@axeptio/design-system/build/src/Core/Controls/Input/input.stories.jsx

Design System for Axeptio

import React from 'react';
import Input from './index';

export default {
  title: 'Core/Controls/Input',
  component: Input
};

const Template = args => <Input {...args} />;

export const Email = Template.bind({});
Email.args = {
  label: 'Email',
  icon: 'Mail',
  type: 'email'
};

export const HeaderText = Template.bind({});
HeaderText.args = {
  label: 'Email',
  icon: 'Mail',
  type: 'email',
  header: 'Email',
  optionalText: 'Optional text'
};

export const HeaderTextError = Template.bind({});
HeaderTextError.args = {
  label: 'Email',
  icon: 'Mail',
  type: 'email',
  header: 'Email',
  optionalText: 'Optional text',
  error: 'Wrong email'
};

export const HeaderTextDisable = Template.bind({});
HeaderTextDisable.args = {
  label: 'Email',
  icon: 'Mail',
  type: 'email',
  header: 'Email',
  optionalText: 'Optional text',
  disabled: true
};

export const NoIcon = Template.bind({});
NoIcon.args = {
  label: 'Email',
  type: 'email'
};

export const WithValue = Template.bind({});
WithValue.args = {
  label: 'Email',
  type: 'email',
  value: 'contact@axeptio.eu'
};

export const Password = Template.bind({});
Password.args = {
  label: 'Password',
  icon: 'LockShield',
  type: 'password'
};

export const Number = Template.bind({});
Number.args = {
  label: 'Number',
  icon: 'Number',
  type: 'number'
};

export const Text = Template.bind({});
Text.args = {
  label: 'Text',
  icon: 'FolderText',
  type: 'text'
};

export const Disable = Template.bind({});
Disable.args = {
  label: 'Password',
  icon: 'LockShield',
  type: 'password',
  disabled: true
};

export const SpecialWidth = Template.bind({});
SpecialWidth.args = {
  label: 'Email',
  icon: 'Mail',
  type: 'text',
  width: 200
};

export const UrlWithPrefix = Template.bind({});
UrlWithPrefix.args = {
  label: 'URL',
  type: 'url',
  prefix: 'https://'
};

export const ErrorMessage = Template.bind({});
ErrorMessage.args = {
  label: 'Email',
  type: 'email',
  icon: 'Mail',
  value: 'test@test.com',
  error: 'Wrong email'
};

export const Unit = Template.bind({});
Unit.args = {
  label: 'Size',
  type: 'number',
  unit: 'px'
};

export const UnitError = Template.bind({});
UnitError.args = {
  label: 'Size',
  type: 'number',
  value: 'A',
  unit: 'px',
  error: 'Wrong value'
};

export const Multiline = Template.bind({});
Multiline.args = {
  label: 'Multiline',
  type: 'text',
  multiline: true
};