@eureca/eureca-ui/src/components/Inputs/stories/password.stories.js

UI component library of Eureca's user and admin apps

import React, { useState } from 'react';
import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';

import { Password } from '../';

const inputVariants = {
  Outlined: 'outlined',
  Standard: 'standard',
  Filled: 'filled',
};

export default { title: 'Material/Inputs', decorators: [withKnobs], includeStories: [] };

export function PasswordInput() {
  const [value, setValue] = useState('');

  const helperText = text('Helper text', 'Optional helper text');
  const variant = select('Variant', inputVariants, 'outlined');
  const disabled = boolean('Disabled');

  function handleChange(e) {
    setValue(e.target.value);
  }

  return (
    <Password
      name="password-input"
      label="Password"
      value={value}
      variant={variant}
      onChange={handleChange}
      helperText={helperText}
      disabled={disabled}
    />
  );
}