wix-style-react/dist/es/stories/CheckBox/index.story.js

wix-style-react

import React from 'react';
import Checkbox from 'wix-style-react/Checkbox';
import Languages from 'wix-style-react/new-icons/Languages';
import CodeExample from 'wix-storybook-utils/CodeExample';

import ExampleFormField from './ExampleFormField';
import ExampleFormFieldRaw from '!raw-loader!./ExampleFormField';

var labelExamples = [{ label: 'Simple string', value: 'Hello World!' }, {
  label: 'Component',
  value: React.createElement(
    'span',
    { key: 0 },
    'Hello ',
    React.createElement(
      'strong',
      null,
      'World!'
    )
  )
}, {
  label: 'Component with icon',
  value: React.createElement(
    'span',
    { key: 1 },
    'Hello ',
    React.createElement(Languages, null)
  )
}];

export default {
  category: '4. Selection',
  storyName: '4.2 Checkbox',
  component: Checkbox,
  componentPath: '../../src/Checkbox',

  componentProps: function componentProps(setState) {
    return {
      children: labelExamples[0].value,
      onChange: function onChange(_ref) {
        var checked = _ref.target.checked;
        return setState({ checked: checked });
      },
      dataHook: 'storybook-checkbox'
    };
  },

  exampleProps: {
    children: labelExamples,
    onChange: function onChange(_ref2) {
      var checked = _ref2.target.checked;
      return checked ? 'Checked' : 'Unchecked';
    }
  },

  examples: React.createElement(
    CodeExample,
    { title: 'Composition with FormField', code: ExampleFormFieldRaw },
    React.createElement(ExampleFormField, null)
  )
};