wix-style-react/dist/es/stories/TableToolbar/ToolbarStory.js

wix-style-react

import React from 'react';

import Markdown from 'wix-storybook-utils/Markdown';
import CodeExample from 'wix-storybook-utils/CodeExample';

import Card from 'wix-style-react/Card';

import { storiesOf } from '@storybook/react';

import MainExample from './MainExample';
import MainExampleRaw from '!raw-loader!./MainExample';

import MainExampleRTL from './MainExampleRTL';
import MainExampleRTLRaw from '!raw-loader!./MainExampleRTL';

import { BulkActionsExample } from './BulkActionsExample';
import BulkActionsExampleRaw from '!raw-loader!./BulkActionsExample';
import { storySettings } from './storySettings';

import Readme from './README.md';

import s from './Toolbar.story.scss';

storiesOf(storySettings.category, module).add(storySettings.storyName, function () {
  return React.createElement(
    'div',
    null,
    React.createElement(Markdown, { source: Readme }),
    React.createElement(
      'div',
      null,
      React.createElement(Markdown, {
        source: '\n### Main Toolbar\nThe Main Toolbar typically includes components that let you search or filter the table data.\n\nIt may include (by convention) the following UI components:\n  - A Table Title (`<TableToolbar.Title>My Table</TableToolbar.Title>`). If Table reside in a `<Page/>` component, then the Title would usually be in the Page component rather then in the Toolbar.\n  - Input box\n  - Dropdown\n  - DateRange\n  - Checkbox\n        '
      }),
      React.createElement(
        'div',
        { className: s.example },
        React.createElement(
          CodeExample,
          { title: 'Typical Main Toolbar', code: MainExampleRaw },
          React.createElement(
            Card,
            null,
            React.createElement(MainExample, null)
          )
        ),
        React.createElement(
          CodeExample,
          {
            title: 'Typical Main Toolbar (RTL)',
            code: MainExampleRTLRaw
          },
          React.createElement(
            Card,
            null,
            React.createElement(MainExampleRTL, null)
          )
        )
      )
    ),
    React.createElement(
      'div',
      null,
      React.createElement(Markdown, {
        source: '\n### Typical BulkActions Toolbar\nThe BulkActions Toolbar typically includes actions which act on the current selected rows.\n\nIt may include (by convention) the following UI component:\n - A selection count (`<TableToolbar.SelectedCount> 2 Selected </TableToolbar.SelectedCount>`)\n - Action Buttons(`<Button/>`). All Buttons should have `theme="whiteblueprimary"`.\n   - Icon Button\n   - Text only Button\n   - Button with Prefix\n - A collapsed Search input box (`<Search expandable/>`)\n        '
      }),
      React.createElement(
        'div',
        { className: s.example },
        React.createElement(
          CodeExample,
          {
            title: 'Typical BulkActions Toolbar',
            code: BulkActionsExampleRaw
          },
          React.createElement(
            Card,
            null,
            React.createElement(BulkActionsExample, null)
          )
        )
      )
    )
  );
});