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

wix-style-react

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _addonLinks = require('@storybook/addon-links');

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

var _EmptyState = require('../../src/EmptyState');

var _EmptyState2 = _interopRequireDefault(_EmptyState);

var _TextLink = require('../../src/TextLink');

var _TextLink2 = _interopRequireDefault(_TextLink);

var _Heading = require('../../src/Heading');

var _Heading2 = _interopRequireDefault(_Heading);

var _Add = require('../../src/new-icons/Add');

var _Add2 = _interopRequireDefault(_Add);

var _Download = require('../../src/new-icons/Download');

var _Download2 = _interopRequireDefault(_Download);

var _StatusComplete = require('../../src/new-icons/StatusComplete');

var _StatusComplete2 = _interopRequireDefault(_StatusComplete);

var _ImagePlaceholder = require('../assets/ImagePlaceholder');

var _ImagePlaceholder2 = _interopRequireDefault(_ImagePlaceholder);

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

var singleAction = _react2.default.createElement(
  _TextLink2.default,
  { prefixIcon: _react2.default.createElement(_Add2.default, null) },
  'New Item'
);

var singleActionLongText = _react2.default.createElement(
  _TextLink2.default,
  { ellipsis: true, prefixIcon: _react2.default.createElement(_Add2.default, null) },
  'New Item with a ridiculous length name that does not fit to a single line'
);

var twoActions = _react2.default.createElement(
  'span',
  null,
  _react2.default.createElement(
    'span',
    { style: { margin: '0 15px' } },
    _react2.default.createElement(
      _TextLink2.default,
      { prefixIcon: _react2.default.createElement(_Add2.default, null) },
      'New Item'
    )
  ),
  _react2.default.createElement(
    'span',
    { style: { margin: '0 15px' } },
    _react2.default.createElement(
      _TextLink2.default,
      { prefixIcon: _react2.default.createElement(_Download2.default, null) },
      'Import Items'
    )
  )
);

exports.default = {
  category: _storySettings.storySettings.kind,
  storyName: _storySettings.storySettings.storyName,

  component: _EmptyState2.default,
  componentPath: '../../src/EmptyState/EmptyState.js',

  componentProps: {
    dataHook: _storySettings.storySettings.dataHook,
    theme: 'page',
    title: "You don't have any items yet",
    subtitle: 'Create your product item in an easy & fast way to display it on your site',
    image: _react2.default.createElement(_ImagePlaceholder2.default, null),
    children: null
  },

  exampleProps: {
    theme: ['page', 'page-no-border', 'section'],
    image: [{ label: 'No image', value: null }, {
      label: 'Image URL',
      value: 'https://static.wixstatic.com/media/c78d05b79ede429fb77c9d8ec4443b93.jpg/v1/fit/w_375,h_375/c78d05b79ede429fb77c9d8ec4443b93.jpg'
    }, { label: 'Node', value: _react2.default.createElement(_ImagePlaceholder2.default, null) }, { label: 'SVG', value: _react2.default.createElement(_StatusComplete2.default, { size: '120px' }) }],
    children: [{ label: 'No children', value: null }, { label: 'Single action', value: singleAction }, { label: 'Two actions', value: twoActions }, { label: 'Single action with long text', value: singleActionLongText }]
  },

  examples: _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      _Heading2.default,
      { appearance: 'H2' },
      'You can find more examples for components that utilize the EmptyState:'
    ),
    _react2.default.createElement(
      'ul',
      null,
      _react2.default.createElement(
        'li',
        null,
        _react2.default.createElement(
          _TextLink2.default,
          { onClick: (0, _addonLinks.linkTo)('2. Layout', '2.5 Page') },
          'Page'
        ),
        _react2.default.createElement('br', null)
      ),
      _react2.default.createElement(
        'li',
        null,
        _react2.default.createElement(
          _TextLink2.default,
          { onClick: (0, _addonLinks.linkTo)('2. Layout', 'Card') },
          'Card'
        ),
        _react2.default.createElement('br', null)
      ),
      _react2.default.createElement(
        'li',
        null,
        _react2.default.createElement(
          _TextLink2.default,
          { onClick: (0, _addonLinks.linkTo)('7. Tooltips', '7.2. Popover') },
          'Popover'
        ),
        _react2.default.createElement('br', null)
      ),
      _react2.default.createElement(
        'li',
        null,
        _react2.default.createElement(
          _TextLink2.default,
          { onClick: (0, _addonLinks.linkTo)('9. Modals', '9.1 Alert') },
          'Alert'
        ),
        _react2.default.createElement('br', null)
      ),
      _react2.default.createElement(
        'li',
        null,
        _react2.default.createElement(
          _TextLink2.default,
          { onClick: (0, _addonLinks.linkTo)('10. Tables', '10.1 Table') },
          'Table'
        ),
        _react2.default.createElement('br', null)
      )
    )
  )
};