wix-style-react/src/TableToolbar/docs/index.story.js

wix-style-react

import React from 'react';
import {
  header,
  tabs,
  tab,
  description,
  importExample,
  title,
  divider,
  code,
  api,
} from 'wix-storybook-utils/Sections';

import { storySettings } from '../test/storySettings';

import * as examples from './examples';

import { TableToolbar } from '..';

import Box from '../../Box';
import SectionHelper from '../../SectionHelper';

export default {
  category: `${storySettings.category}/Table`,
  storyName: 'TableToolbar',

  component: TableToolbar,
  componentPath: '..',

  sections: [
    header({
      sourceUrl:
        'https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-style-react/src/TableToolbar/',
    }),

    tabs([
      tab({
        title: 'Description',
        sections: [
          description({
            title: 'Description',
            text:
              "TableToolbar is a (dumb) layout component for creating the Table's Toolbar.\n" +
              ' It supports one line of items, divided into 2 groups according to alignment.',
          }),

          <Box marginBottom="50px">
            <SectionHelper
              appearance="danger"
              title="Note"
              children="The white background is not part of the Toolbar, it is coming from the `<Card/>` which the Table sits in."
            />
          </Box>,

          importExample("import { TableToolbar } from 'wix-style-react';"),

          divider(),

          title('Examples'),

          description({
            title: 'Filters Toolbar',
            text: 'By default table toolbar can show table title, search, filters or all together. It can contain up to two filters.',
          }),

          code({
            compact: true,
            source: examples.filtersToolbarExample,
          }),

          description({
            title: 'Bulk Actions Toolbar',
            text:
              'When table items are selected, table toolbar enables bulk actions. It can contain up to 3 bulk actions: <br/>' +
              '1.  A selection count (`<TableToolbar.SelectedCount> 2 Selected </TableToolbar.SelectedCount>`)<br/>' +
              '2.  Action Buttons: `<Button/>` (with prefix) , `<TextButton/>` or `<IconButton/>` . All Buttons should have `skin="light"`. <br/>' +
              '3.  A collapsed Search input box (`<Search expandable/>`)',
          }),

          code({
            compact: true,
            source: examples.bulkActionsToolbarExample,
          }),
        ],
      }),

      ...[
        {
          title: 'API',
          sections: api(),
        },
      ].map(tab),
    ]),
  ],
};