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

wix-style-react

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

import AddItem from '../../src/AddItem/AddItem';
import Text from '../../src/Text';

import VerticalExample from './Examples/VerticalExample';
import VerticalExampleRaw from '!raw-loader!./Examples/VerticalExample';

import WithoutActionExample from './Examples/WithoutActionExample';
import WithoutActionExampleRaw from '!raw-loader!./Examples/WithoutActionExample';

import BreakpointsExample from './Examples/BreakpointsExample';
import BreakpointsExampleRaw from '!raw-loader!./Examples/BreakpointsExample';

import WithinExample from './Examples/WithinExample';
import WithinExampleRaw from '!raw-loader!./Examples/WithinExample';

import AddImageExample from './Examples/AddImageExample';
import AddImageExampleRaw from '!raw-loader!./Examples/AddImageExample';
import { Container, Col, Row } from '../../src/Grid';

import { storySettings } from './storySettings';

var Cards = React.createElement(
  Container,
  null,
  React.createElement(
    Row,
    null,
    React.createElement(
      Col,
      { span: 6 },
      React.createElement(
        CodeExample,
        {
          title: 'Add item as a vertical card',
          code: VerticalExampleRaw
        },
        React.createElement(
          'div',
          {
            style: { width: '400px', padding: '30px', background: '#F0F4F7' }
          },
          React.createElement(VerticalExample, null)
        )
      )
    ),
    React.createElement(
      Col,
      { span: 6 },
      React.createElement(
        CodeExample,
        {
          title: 'Add item without action text',
          code: WithoutActionExampleRaw
        },
        React.createElement(
          'div',
          { style: { padding: '30px', background: '#F0F4F7' } },
          React.createElement(WithoutActionExample, null)
        )
      )
    )
  )
);

var Breakpoints = React.createElement(
  CodeExample,
  { title: 'Breakpoints', code: BreakpointsExampleRaw },
  React.createElement(BreakpointsExample, null)
);

var Within = React.createElement(
  Container,
  null,
  React.createElement(
    Row,
    null,
    React.createElement(
      Col,
      { span: 6 },
      React.createElement(
        CodeExample,
        { title: 'Add item within a card', code: WithinExampleRaw },
        React.createElement(
          'div',
          { style: { padding: '30px', background: '#F0F4F7' } },
          React.createElement(WithinExample, null)
        )
      )
    ),
    React.createElement(
      Col,
      { span: 6 },
      React.createElement(
        CodeExample,
        { title: 'Add image placeholder', code: AddImageExampleRaw },
        React.createElement(
          'div',
          { style: { padding: '30px', background: '#F0F4F7' } },
          React.createElement(AddImageExample, null)
        )
      )
    )
  )
);

var childrenExamples = [{
  label: 'String',
  value: 'Add New Item'
}, {
  label: 'Component',
  value: React.createElement(
    Text,
    null,
    'Add New Item'
  )
}];

export default {
  category: storySettings.kind,
  storyName: storySettings.storyName,
  component: AddItem,
  componentPath: '../../src/AddItem',

  componentProps: {
    theme: 'dashes',
    dataHook: storySettings.dataHook,
    children: childrenExamples[0].value,
    alignItems: 'center'
  },

  exampleProps: {
    children: childrenExamples
  },

  examples: [Cards, Within, Breakpoints]
};