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

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Markdown = require('wix-storybook-utils/Markdown');

var _Markdown2 = _interopRequireDefault(_Markdown);

var _CodeExample = require('wix-storybook-utils/CodeExample');

var _CodeExample2 = _interopRequireDefault(_CodeExample);

var _Card = require('wix-style-react/Card');

var _Card2 = _interopRequireDefault(_Card);

var _react3 = require('@storybook/react');

var _MainExample = require('./MainExample');

var _MainExample2 = _interopRequireDefault(_MainExample);

var _MainExample3 = require('!raw-loader!./MainExample');

var _MainExample4 = _interopRequireDefault(_MainExample3);

var _MainExampleRTL = require('./MainExampleRTL');

var _MainExampleRTL2 = _interopRequireDefault(_MainExampleRTL);

var _MainExampleRTL3 = require('!raw-loader!./MainExampleRTL');

var _MainExampleRTL4 = _interopRequireDefault(_MainExampleRTL3);

var _BulkActionsExample = require('./BulkActionsExample');

var _BulkActionsExample2 = require('!raw-loader!./BulkActionsExample');

var _BulkActionsExample3 = _interopRequireDefault(_BulkActionsExample2);

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

var _README = require('./README.md');

var _README2 = _interopRequireDefault(_README);

var _ToolbarStory = require('./Toolbar.story.scss');

var _ToolbarStory2 = _interopRequireDefault(_ToolbarStory);

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

(0, _react3.storiesOf)(_storySettings.storySettings.category, module).add(_storySettings.storySettings.storyName, function () {
  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(_Markdown2.default, { source: _README2.default }),
    _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(_Markdown2.default, {
        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        '
      }),
      _react2.default.createElement(
        'div',
        { className: _ToolbarStory2.default.example },
        _react2.default.createElement(
          _CodeExample2.default,
          { title: 'Typical Main Toolbar', code: _MainExample4.default },
          _react2.default.createElement(
            _Card2.default,
            null,
            _react2.default.createElement(_MainExample2.default, null)
          )
        ),
        _react2.default.createElement(
          _CodeExample2.default,
          {
            title: 'Typical Main Toolbar (RTL)',
            code: _MainExampleRTL4.default
          },
          _react2.default.createElement(
            _Card2.default,
            null,
            _react2.default.createElement(_MainExampleRTL2.default, null)
          )
        )
      )
    ),
    _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(_Markdown2.default, {
        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        '
      }),
      _react2.default.createElement(
        'div',
        { className: _ToolbarStory2.default.example },
        _react2.default.createElement(
          _CodeExample2.default,
          {
            title: 'Typical BulkActions Toolbar',
            code: _BulkActionsExample3.default
          },
          _react2.default.createElement(
            _Card2.default,
            null,
            _react2.default.createElement(_BulkActionsExample.BulkActionsExample, null)
          )
        )
      )
    )
  );
});