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

wix-style-react

import React from 'react';
import { linkTo } from '@storybook/addon-links';
import { storySettings } from './storySettings';

import EmptyState from '../../src/EmptyState';
import TextLink from '../../src/TextLink';
import Heading from '../../src/Heading';

import Add from '../../src/new-icons/Add';
import Download from '../../src/new-icons/Download';
import StatusComplete from '../../src/new-icons/StatusComplete';

import ImagePlaceholder from '../assets/ImagePlaceholder';

var singleAction = React.createElement(
  TextLink,
  { prefixIcon: React.createElement(Add, null) },
  'New Item'
);

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

var twoActions = React.createElement(
  'span',
  null,
  React.createElement(
    'span',
    { style: { margin: '0 15px' } },
    React.createElement(
      TextLink,
      { prefixIcon: React.createElement(Add, null) },
      'New Item'
    )
  ),
  React.createElement(
    'span',
    { style: { margin: '0 15px' } },
    React.createElement(
      TextLink,
      { prefixIcon: React.createElement(Download, null) },
      'Import Items'
    )
  )
);

export default {
  category: storySettings.kind,
  storyName: storySettings.storyName,

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

  componentProps: {
    dataHook: 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: React.createElement(ImagePlaceholder, 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: React.createElement(ImagePlaceholder, null) }, { label: 'SVG', value: React.createElement(StatusComplete, { 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: React.createElement(
    'div',
    null,
    React.createElement(
      Heading,
      { appearance: 'H2' },
      'You can find more examples for components that utilize the EmptyState:'
    ),
    React.createElement(
      'ul',
      null,
      React.createElement(
        'li',
        null,
        React.createElement(
          TextLink,
          { onClick: linkTo('2. Layout', '2.5 Page') },
          'Page'
        ),
        React.createElement('br', null)
      ),
      React.createElement(
        'li',
        null,
        React.createElement(
          TextLink,
          { onClick: linkTo('2. Layout', 'Card') },
          'Card'
        ),
        React.createElement('br', null)
      ),
      React.createElement(
        'li',
        null,
        React.createElement(
          TextLink,
          { onClick: linkTo('7. Tooltips', '7.2. Popover') },
          'Popover'
        ),
        React.createElement('br', null)
      ),
      React.createElement(
        'li',
        null,
        React.createElement(
          TextLink,
          { onClick: linkTo('9. Modals', '9.1 Alert') },
          'Alert'
        ),
        React.createElement('br', null)
      ),
      React.createElement(
        'li',
        null,
        React.createElement(
          TextLink,
          { onClick: linkTo('10. Tables', '10.1 Table') },
          'Table'
        ),
        React.createElement('br', null)
      )
    )
  )
};