wix-style-react/dist/stories/AddItem/AddItem.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 _AddItem = require('../../src/AddItem/AddItem');

var _AddItem2 = _interopRequireDefault(_AddItem);

var _Text = require('../../src/Text');

var _Text2 = _interopRequireDefault(_Text);

var _VerticalExample = require('./Examples/VerticalExample');

var _VerticalExample2 = _interopRequireDefault(_VerticalExample);

var _VerticalExample3 = require('!raw-loader!./Examples/VerticalExample');

var _VerticalExample4 = _interopRequireDefault(_VerticalExample3);

var _WithoutActionExample = require('./Examples/WithoutActionExample');

var _WithoutActionExample2 = _interopRequireDefault(_WithoutActionExample);

var _WithoutActionExample3 = require('!raw-loader!./Examples/WithoutActionExample');

var _WithoutActionExample4 = _interopRequireDefault(_WithoutActionExample3);

var _BreakpointsExample = require('./Examples/BreakpointsExample');

var _BreakpointsExample2 = _interopRequireDefault(_BreakpointsExample);

var _BreakpointsExample3 = require('!raw-loader!./Examples/BreakpointsExample');

var _BreakpointsExample4 = _interopRequireDefault(_BreakpointsExample3);

var _WithinExample = require('./Examples/WithinExample');

var _WithinExample2 = _interopRequireDefault(_WithinExample);

var _WithinExample3 = require('!raw-loader!./Examples/WithinExample');

var _WithinExample4 = _interopRequireDefault(_WithinExample3);

var _AddImageExample = require('./Examples/AddImageExample');

var _AddImageExample2 = _interopRequireDefault(_AddImageExample);

var _AddImageExample3 = require('!raw-loader!./Examples/AddImageExample');

var _AddImageExample4 = _interopRequireDefault(_AddImageExample3);

var _Grid = require('../../src/Grid');

var _storySettings = require('./storySettings');

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

var Cards = _react2.default.createElement(
  _Grid.Container,
  null,
  _react2.default.createElement(
    _Grid.Row,
    null,
    _react2.default.createElement(
      _Grid.Col,
      { span: 6 },
      _react2.default.createElement(
        _CodeExample2.default,
        {
          title: 'Add item as a vertical card',
          code: _VerticalExample4.default
        },
        _react2.default.createElement(
          'div',
          {
            style: { width: '400px', padding: '30px', background: '#F0F4F7' }
          },
          _react2.default.createElement(_VerticalExample2.default, null)
        )
      )
    ),
    _react2.default.createElement(
      _Grid.Col,
      { span: 6 },
      _react2.default.createElement(
        _CodeExample2.default,
        {
          title: 'Add item without action text',
          code: _WithoutActionExample4.default
        },
        _react2.default.createElement(
          'div',
          { style: { padding: '30px', background: '#F0F4F7' } },
          _react2.default.createElement(_WithoutActionExample2.default, null)
        )
      )
    )
  )
);

var Breakpoints = _react2.default.createElement(
  _CodeExample2.default,
  { title: 'Breakpoints', code: _BreakpointsExample4.default },
  _react2.default.createElement(_BreakpointsExample2.default, null)
);

var Within = _react2.default.createElement(
  _Grid.Container,
  null,
  _react2.default.createElement(
    _Grid.Row,
    null,
    _react2.default.createElement(
      _Grid.Col,
      { span: 6 },
      _react2.default.createElement(
        _CodeExample2.default,
        { title: 'Add item within a card', code: _WithinExample4.default },
        _react2.default.createElement(
          'div',
          { style: { padding: '30px', background: '#F0F4F7' } },
          _react2.default.createElement(_WithinExample2.default, null)
        )
      )
    ),
    _react2.default.createElement(
      _Grid.Col,
      { span: 6 },
      _react2.default.createElement(
        _CodeExample2.default,
        { title: 'Add image placeholder', code: _AddImageExample4.default },
        _react2.default.createElement(
          'div',
          { style: { padding: '30px', background: '#F0F4F7' } },
          _react2.default.createElement(_AddImageExample2.default, null)
        )
      )
    )
  )
);

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

exports.default = {
  category: _storySettings.storySettings.kind,
  storyName: _storySettings.storySettings.storyName,
  component: _AddItem2.default,
  componentPath: '../../src/AddItem',

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

  exampleProps: {
    children: childrenExamples
  },

  examples: [Cards, Within, Breakpoints]
};