wix-style-react/dist/es/stories/TPA/Input/InputExample.js

wix-style-react

import React from 'react';
import Input from '../../../src/TPA/Input';
import styles from './styles.scss';

var InputExample = function InputExample() {
  return React.createElement(
    'div',
    { style: { width: '300px' } },
    React.createElement(Input, {
      dataHook: 'story-input',
      placeholder: 'Default place holder',
      type: 'number'
    })
  );
};

export var InputValidationErrorExample = function InputValidationErrorExample() {
  return React.createElement(
    'div',
    { style: { width: '300px' } },
    React.createElement(Input, {
      dataHook: 'story-input-error',
      error: true,
      placeholder: 'Input in error state'
    })
  );
};

export var InputWithCustomStyleExample = function InputWithCustomStyleExample() {
  return React.createElement(
    'div',
    { style: { width: '300px' } },
    React.createElement(Input, {
      dataHook: 'story-input-style',
      inputClassName: styles.customInput,
      placeholder: 'Input with custom style'
    })
  );
};

export var InputWithCustomErrorExample = function InputWithCustomErrorExample() {
  return React.createElement(
    'div',
    { style: { width: '300px' } },
    React.createElement(Input, {
      dataHook: 'story-input-error-style',
      error: true,
      errorClassName: styles.customError,
      placeholder: 'Input with custom error style'
    })
  );
};

export default InputExample;