@carbon/ibm-security/lib/components/ComboButton/ComboButton-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 _react = _interopRequireDefault(require("react"));
var _addonActions = require("@storybook/addon-actions");
var _addonKnobs = require("@storybook/addon-knobs");
var _react2 = require("@storybook/react");
var _storybook = require("../../../.storybook");
var _IconButton = require("../IconButton/IconButton");
var _ = require("../..");
/**
 * @file Combo button stories.
 * @copyright IBM Security 2019 - 2021
 */

var props = function props() {
  return {
    direction: (0, _addonKnobs.radios)('Menu direction (direction)', {
      top: _IconButton.TooltipDirection.TOP,
      bottom: _IconButton.TooltipDirection.BOTTOM
    }, _IconButton.TooltipDirection.TOP)
  };
};
(0, _react2.storiesOf)((0, _storybook.patterns)('ComboButton'), module).add('default', function () {
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: 300
    }
  }, /*#__PURE__*/_react.default.createElement(_.ComboButton, props(), /*#__PURE__*/_react.default.createElement(_.ComboButtonItem, {
    href: "#",
    onClick: (0, _addonActions.action)("onClick (Item 1)"),
    renderIcon: _iconsReact.ArrowRight20,
    target: "_blank"
  }, "Item 1 -- becomes primary button and text will be truncated"), /*#__PURE__*/_react.default.createElement(_.ComboButtonItem, {
    href: "#",
    onClick: (0, _addonActions.action)("onClick (Item 2)"),
    renderIcon: _iconsReact.Filter20
  }, "Item 2"), /*#__PURE__*/_react.default.createElement(_.ComboButtonItem, {
    href: "#",
    renderIcon: _iconsReact.Filter20,
    onClick: (0, _addonActions.action)("onClick (Item 3)"),
    "data-overflow-menu-primary-focus": true
  }, "Item 3 -- will be selected when menu opens"), /*#__PURE__*/_react.default.createElement(_.ComboButtonItem, {
    href: "#",
    renderIcon: _iconsReact.Filter20,
    onClick: (0, _addonActions.action)("onClick (Item 3)"),
    target: "_blank"
  }, "Item 4 -- will open link in new tab when clicked")));
}, {
  info: {
    text: "\n          The `ComboButton` accepts `ComboButtonItem` components as children.\n\n          The first child of the `ComboButton` will be marked as the \"primary\" action, and will appear as a `Button` next to the `OverflowMenu` of additional actions.\n\n          If there is only one child of `ComboButton`, then an `OverflowMenu` will not be rendered.\n        "
  }
});