@carbon/ibm-security/lib/components/IconButtonBar/IconButtonBar-story.js

Carbon for Cloud & Cognitive IBM Security UI components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _iconsReact = require("@carbon/icons-react");
var _addonActions = require("@storybook/addon-actions");
var _addonKnobs = require("@storybook/addon-knobs");
var _react = require("@storybook/react");
var _react2 = _interopRequireDefault(require("react"));
var _storybook = require("../../../.storybook");
var _ = require("../..");
var _mocks_ = require("../IconButton/_mocks_");
var _IconButton = require("../IconButton/IconButton");
/**
 * @file Icon button bar stories.
 * @copyright IBM Security 2019 - 2021
 */

(0, _react.storiesOf)((0, _storybook.patterns)('IconButtonBar'), module).add('default', function () {
  var size = (0, _addonKnobs.select)('size', _mocks_.sizes, 'sm');
  /* eslint-disable no-nested-ternary */
  var actions = [{
    className: _mocks_.className,
    divider: (0, _addonKnobs.select)('Icon 1 divider (divider)', ['left', 'right', 'sides'], 'sides'),
    disabled: false,
    iconClassName: _mocks_.iconClassName,
    label: 'Label 1',
    onClick: (0, _addonActions.action)('onClick'),
    renderIcon: size === 'sm' ? _iconsReact.Add16 : size === 'md' ? _iconsReact.Add20 : size === 'lg' ? _iconsReact.Add24 : _iconsReact.Add32
  }, {
    className: _mocks_.className,
    divider: undefined,
    disabled: false,
    iconClassName: _mocks_.iconClassName,
    label: 'Label 2',
    onClick: (0, _addonActions.action)('onClick'),
    renderIcon: size === 'sm' ? _iconsReact.Edit16 : size === 'md' ? _iconsReact.Edit20 : size === 'lg' ? _iconsReact.Edit24 : _iconsReact.Edit32
  }, {
    className: _mocks_.className,
    disabled: false,
    iconClassName: _mocks_.iconClassName,
    label: 'Label 3',
    onClick: (0, _addonActions.action)('onClick'),
    setFocus: true,
    renderIcon: size === 'sm' ? _iconsReact.Locked16 : size === 'md' ? _iconsReact.Locked20 : size === 'lg' ? _iconsReact.Locked24 : _iconsReact.Locked32
  }, {
    className: _mocks_.className,
    disabled: false,
    iconClassName: _mocks_.iconClassName,
    label: 'Label 4',
    onClick: (0, _addonActions.action)('onClick'),
    renderIcon: size === 'sm' ? _iconsReact.Notification16 : size === 'md' ? _iconsReact.Notification20 : size === 'lg' ? _iconsReact.Notification24 : _iconsReact.Notification32
  }];
  return /*#__PURE__*/_react2.default.createElement("div", {
    style: {
      padding: '120px'
    }
  }, /*#__PURE__*/_react2.default.createElement(_.IconButtonBar, {
    length: (0, _addonKnobs.number)('length', 3),
    size: size,
    actions: actions,
    tooltip: (0, _addonKnobs.boolean)('tooltip', _.IconButton.defaultProps.tooltip),
    iconTooltipDirection: (0, _addonKnobs.select)('iconTooltipDirection', [_IconButton.TooltipDirection.TOP, _IconButton.TooltipDirection.BOTTOM], _IconButton.TooltipDirection.TOP),
    overflowMenuDirection: (0, _addonKnobs.select)('overflowMenuDirection', [_IconButton.TooltipDirection.TOP, _IconButton.TooltipDirection.BOTTOM], _IconButton.TooltipDirection.TOP)
  }));
}, {
  info: {
    text: "\n          Basic implementation of an IconButtonBar component.\n        "
  }
});