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

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _CodeExample = require('wix-storybook-utils/CodeExample');

var _CodeExample2 = _interopRequireDefault(_CodeExample);

var _FormField = require('wix-style-react/FormField');

var _FormField2 = _interopRequireDefault(_FormField);

var _Input = require('wix-style-react/Input');

var _Input2 = _interopRequireDefault(_Input);

var _InputArea = require('wix-style-react/InputArea');

var _InputArea2 = _interopRequireDefault(_InputArea);

var _RichTextArea = require('wix-style-react/RichTextArea');

var _RichTextArea2 = _interopRequireDefault(_RichTextArea);

var _DatePicker = require('wix-style-react/DatePicker');

var _DatePicker2 = _interopRequireDefault(_DatePicker);

var _Dropdown = require('wix-style-react/Dropdown');

var _Dropdown2 = _interopRequireDefault(_Dropdown);

var _Checkbox = require('wix-style-react/Checkbox');

var _Checkbox2 = _interopRequireDefault(_Checkbox);

var _ToggleSwitch = require('wix-style-react/ToggleSwitch');

var _ToggleSwitch2 = _interopRequireDefault(_ToggleSwitch);

var _ExampleWithLengthCount = require('./ExampleWithLengthCount');

var _ExampleWithLengthCount2 = _interopRequireDefault(_ExampleWithLengthCount);

var _ExampleWithLengthCount3 = require('!raw-loader!./ExampleWithLengthCount');

var _ExampleWithLengthCount4 = _interopRequireDefault(_ExampleWithLengthCount3);

var _ExampleWithinGrid = require('./ExampleWithinGrid');

var _ExampleWithinGrid2 = _interopRequireDefault(_ExampleWithinGrid);

var _ExampleWithinGrid3 = require('!raw-loader!./ExampleWithinGrid');

var _ExampleWithinGrid4 = _interopRequireDefault(_ExampleWithinGrid3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var ID = 'formFieldId';

var placeholder = 'Default text goes here...';
var childrenExamples = [{ label: 'Input', value: _react2.default.createElement(_Input2.default, { 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 _react2.default.createElement(_Input2.default, {
      placeholder: placeholder,
      onChange: function onChange(e) {
        return setCharactersLeft(50 - e.target.value.length);
      },
      id: ID
    });
  }
}, {
  label: 'InputArea',
  value: _react2.default.createElement(_InputArea2.default, { 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 _react2.default.createElement(_InputArea2.default, {
      placeholder: placeholder,
      id: ID,
      onChange: function onChange(e) {
        return setCharactersLeft(50 - e.target.value.length);
      }
    });
  }
}, { label: 'RichTextArea', value: _react2.default.createElement(_RichTextArea2.default, { placeholder: placeholder }) }, { label: 'DatePicker', value: _react2.default.createElement(_DatePicker2.default, { value: new Date() }) }, {
  label: 'Dropdown',
  value: _react2.default.createElement(_Dropdown2.default, {
    placeholder: 'Select dominant hand',
    options: [{ id: 0, value: 'Left' }, { id: 1, value: 'Right' }, { id: 2, value: 'Ambidextrous' }]
  })
}, { label: 'Checkbox', value: _react2.default.createElement(_Checkbox2.default, null) }, { label: 'ToggleSwitch', value: _react2.default.createElement(_ToggleSwitch2.default, null) }];

exports.default = {
  category: 'Components',
  storyName: 'FormField',
  component: _FormField2.default,
  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: _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      _CodeExample2.default,
      { title: 'With Length Count', code: _ExampleWithLengthCount4.default },
      _react2.default.createElement(
        'div',
        { style: { width: '500px' } },
        _react2.default.createElement(_ExampleWithLengthCount2.default, null)
      )
    ),
    _react2.default.createElement(
      _CodeExample2.default,
      { title: 'Within Grid', code: _ExampleWithinGrid4.default },
      _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(_ExampleWithinGrid2.default, null)
      )
    )
  )
};