wix-style-react/dist/es/stories/TextField/index.js

wix-style-react

import React from 'react';
import { storiesOf } from '@storybook/react';

import CodeExample from 'wix-storybook-utils/CodeExample';
import { Title, IncludedComponents, SubTitle, TLDRSection, ExamplesSection } from '../UXStoryTemplate';
import { Layout, Cell } from 'wix-style-react/Layout';

import { Category } from '../storiesHierarchy';

import ExampleBasic from './ExampleBasic';
import ExampleBasicRaw from '!raw-loader!./ExampleBasic';

import ExampleSizes from './ExampleSizes';
import ExampleSizesRaw from '!raw-loader!./ExampleSizes';

import ExampleAdornments from './ExampleAdornments';
import ExampleAdornmentsRaw from '!raw-loader!./ExampleAdornments';

import ExampleNumberInput from './ExampleNumberInput';
import ExampleNumberInputRaw from '!raw-loader!./ExampleNumberInput';

storiesOf(Category.INPUTS, module).add('3.1 Text Field', function () {
  return React.createElement(
    'div',
    null,
    React.createElement(
      Title,
      null,
      '3.1 Text Field'
    ),
    React.createElement(
      SubTitle,
      null,
      'TextField let users enter and edit text.'
    ),
    React.createElement(IncludedComponents, { componentNames: ['FormField', 'Input'] }),
    React.createElement(
      TLDRSection,
      null,
      React.createElement(
        CodeExample,
        { title: 'Text Field', code: ExampleBasicRaw },
        React.createElement(
          Layout,
          null,
          React.createElement(
            Cell,
            { span: 4 },
            React.createElement(ExampleBasic, null)
          )
        )
      )
    ),
    React.createElement(
      ExamplesSection,
      null,
      React.createElement(
        CodeExample,
        { title: 'Sizes', code: ExampleSizesRaw },
        React.createElement(ExampleSizes, null)
      ),
      React.createElement(
        CodeExample,
        { title: 'Adornments', code: ExampleAdornmentsRaw },
        React.createElement(ExampleAdornments, null)
      ),
      React.createElement(
        CodeExample,
        { title: 'Number Input', code: ExampleNumberInputRaw },
        React.createElement(
          Layout,
          null,
          React.createElement(
            Cell,
            { span: 2 },
            React.createElement(ExampleNumberInput, null)
          )
        )
      )
    )
  );
});