wix-style-react/dist/es/stories/FormField/FormField.story.js

wix-style-react

import React from 'react';

import CodeExample from 'wix-storybook-utils/CodeExample';

import FormField from 'wix-style-react/FormField';
import Input from 'wix-style-react/Input';
import InputArea from 'wix-style-react/InputArea';
import RichTextArea from 'wix-style-react/RichTextArea';
import DatePicker from 'wix-style-react/DatePicker';
import Dropdown from 'wix-style-react/Dropdown';
import Checkbox from 'wix-style-react/Checkbox';
import ToggleSwitch from 'wix-style-react/ToggleSwitch';

import ExampleWithLengthCount from './ExampleWithLengthCount';
import ExampleWithLengthCountRaw from '!raw-loader!./ExampleWithLengthCount';
import ExampleWithinGrid from './ExampleWithinGrid';
import ExampleWithinGridRaw from '!raw-loader!./ExampleWithinGrid';

var ID = 'formFieldId';

var placeholder = 'Default text goes here...';
var childrenExamples = [{ label: 'Input', value: React.createElement(Input, { placeholder: placeholder, id: ID }) }, {
  label: 'Input with char counter',
  // eslint-disable-next-line react/prop-types
  value: function value(_ref) {
    var setCharactersLeft = _ref.setCharactersLeft;
    return React.createElement(Input, {
      placeholder: placeholder,
      onChange: function onChange(e) {
        return setCharactersLeft(50 - e.target.value.length);
      },
      id: ID
    });
  }
}, {
  label: 'InputArea',
  value: React.createElement(InputArea, { placeholder: placeholder, id: ID })
}, {
  label: 'InputArea with char counter',
  // eslint-disable-next-line react/prop-types
  value: function value(_ref2) {
    var setCharactersLeft = _ref2.setCharactersLeft;
    return React.createElement(InputArea, {
      placeholder: placeholder,
      id: ID,
      onChange: function onChange(e) {
        return setCharactersLeft(50 - e.target.value.length);
      }
    });
  }
}, { label: 'RichTextArea', value: React.createElement(RichTextArea, { placeholder: placeholder }) }, { label: 'DatePicker', value: React.createElement(DatePicker, { value: new Date() }) }, {
  label: 'Dropdown',
  value: React.createElement(Dropdown, {
    placeholder: 'Select dominant hand',
    options: [{ id: 0, value: 'Left' }, { id: 1, value: 'Right' }, { id: 2, value: 'Ambidextrous' }]
  })
}, { label: 'Checkbox', value: React.createElement(Checkbox, null) }, { label: 'ToggleSwitch', value: React.createElement(ToggleSwitch, null) }];

export default {
  category: 'Components',
  storyName: 'FormField',
  component: FormField,
  componentPath: '../../src/FormField',

  componentProps: {
    dataHook: 'storybook-formfield',
    children: childrenExamples[0].value,
    label: 'This is an input:',
    labelPlacement: 'top',
    required: true,
    infoContent: 'I help you to fill info',
    stretchContent: true,
    id: 'formFieldId'
  },

  exampleProps: {
    children: childrenExamples,
    infoTooltipProps: [{ label: 'placement left', value: { placement: 'left' } }]
  },
  examples: React.createElement(
    'div',
    null,
    React.createElement(
      CodeExample,
      { title: 'With Length Count', code: ExampleWithLengthCountRaw },
      React.createElement(
        'div',
        { style: { width: '500px' } },
        React.createElement(ExampleWithLengthCount, null)
      )
    ),
    React.createElement(
      CodeExample,
      { title: 'Within Grid', code: ExampleWithinGridRaw },
      React.createElement(
        'div',
        null,
        React.createElement(ExampleWithinGrid, null)
      )
    )
  )
};