import React from 'react';
import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';
import {text} from '@storybook/addon-knobs';

import InputPassword from '@propellerads/input-password';
import inputPasswordNote from '@propellerads/input-password/README.md';

export default storiesOf('Components | InputPassword', module)
  .add('InputPassword', () => (
    <>
      <InputPassword
        errors={[]}
        name="InputPassword"
        onChange={(value) => action(value)}
        elementId="InputPassword"
        isRequired
        value={text('Password', 'Password')}
        label="Password field"
        autoComplete="new-password"
      />
      <br />
      <InputPassword
        name="InputPassword"
        onChange={(value) => action(value)}
        elementId="InputPassword2"
        isRequired
        value={text('Password', 'Password')}
        label="Password field"
        errors={['errors']}
      />
    </>
  ), {
    notes: inputPasswordNote,
  });