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

Carbon for Cloud & Cognitive IBM Security UI components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _addonKnobs = require("@storybook/addon-knobs");
var _react = require("@storybook/react");
var _react2 = _interopRequireDefault(require("react"));
var _iconsReact = require("@carbon/icons-react");
var _storybook = require("../../../.storybook");
var _namespace = require("../../globals/namespace");
var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
var _ = require("../..");
var _ICA = require("./ICA");
var _mocks_ = _interopRequireDefault(require("./_mocks_"));
/**
 * @file Important content area stories.
 * @copyright IBM Security 2019 - 2021
 */

var label = _mocks_.default.label,
  total = _mocks_.default.total,
  icaValue = _mocks_.default.value;
var sizes = {
  Default: 'default',
  Large: 'lg',
  XLarge: 'xl'
};
var storyProps = function storyProps() {
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? icaValue : _ref$value,
    total = _ref.total;
  return {
    label: (0, _addonKnobs.text)('Label (label)', label),
    value: (0, _addonKnobs.number)('Value (value)', value),
    total: (0, _addonKnobs.number)('Total (total)', total),
    percentage: (0, _addonKnobs.boolean)('Percentage (percentage)', false),
    size: (0, _addonKnobs.select)('ICA size (size)', sizes, 'default'),
    forceShowTotal: (0, _addonKnobs.boolean)('Show total (forceShowTotal)', false),
    trending: (0, _addonKnobs.boolean)('Show trending arrow (trending)', false),
    truncate: (0, _addonKnobs.boolean)('Truncate (truncate)', _.ICA.defaultProps.truncate),
    locale: (0, _addonKnobs.select)('Locale (locale)', _ICA.Locales, _ICA.Locales[0])
  };
};
(0, _react.storiesOf)((0, _storybook.components)('ICA'), module).add('default', function () {
  return /*#__PURE__*/_react2.default.createElement(_.ICA, storyProps());
}).add('with null value', function () {
  return /*#__PURE__*/_react2.default.createElement(_.ICA, storyProps({
    value: null
  }));
}).add('with 1000 value', function () {
  return /*#__PURE__*/_react2.default.createElement(_.ICA, storyProps({
    value: icaValue * 100
  }));
}).add('with 1000000 value', function () {
  return /*#__PURE__*/_react2.default.createElement(_.ICA, storyProps({
    value: icaValue * 100000
  }));
}).add('with total', function () {
  return /*#__PURE__*/_react2.default.createElement(_.ICA, storyProps({
    total: total
  }));
}).add('with edit button', function () {
  return /*#__PURE__*/_react2.default.createElement(_.ICA, (0, _extends2.default)({}, storyProps({
    value: 350,
    total: 450
  }), {
    iconButton: /*#__PURE__*/_react2.default.createElement(_IconButton.default, {
      onClick: console.log('click event'),
      renderIcon: _iconsReact.Edit16,
      tooltip: true,
      label: 'Edit label',
      tooltipDirection: "bottom"
    })
  }));
}).add('with information icon', function () {
  return /*#__PURE__*/_react2.default.createElement(_.ICA, (0, _extends2.default)({}, storyProps({
    value: 350,
    total: 450
  }), {
    information: 'Information label'
  }));
}).add('in an ICA wall', function () {
  return /*#__PURE__*/_react2.default.createElement("div", {
    className: "".concat(_namespace.carbonPrefix, "--grid ").concat(_namespace.carbonPrefix, "--grid--full-width")
  }, /*#__PURE__*/_react2.default.createElement("div", {
    className: "".concat(_namespace.carbonPrefix, "--row")
  }, /*#__PURE__*/_react2.default.createElement("div", {
    className: "".concat(_namespace.carbonPrefix, "--col")
  }, /*#__PURE__*/_react2.default.createElement("h4", null, "4 spaced"))), /*#__PURE__*/_react2.default.createElement("div", {
    className: "".concat(_namespace.carbonPrefix, "--row")
  }, Array(4).fill(0).map(function (item) {
    return /*#__PURE__*/_react2.default.createElement("div", {
      key: item.id,
      className: "".concat(_namespace.carbonPrefix, "--col-sm-4 ").concat(_namespace.carbonPrefix, "--col-md-2 ").concat(_namespace.carbonPrefix, "--col-lg-4")
    }, /*#__PURE__*/_react2.default.createElement(_.ICA, storyProps({
      total: total
    })));
  })), /*#__PURE__*/_react2.default.createElement("div", {
    className: "".concat(_namespace.carbonPrefix, "--row")
  }, /*#__PURE__*/_react2.default.createElement("div", {
    className: "".concat(_namespace.carbonPrefix, "--col")
  }, /*#__PURE__*/_react2.default.createElement("h4", null, "8 condensed"))), /*#__PURE__*/_react2.default.createElement("div", {
    className: "".concat(_namespace.carbonPrefix, "--row")
  }, Array(8).fill(0).map(function (item) {
    return /*#__PURE__*/_react2.default.createElement("div", {
      key: item.id,
      className: "".concat(_namespace.carbonPrefix, "--col-sm-2 ").concat(_namespace.carbonPrefix, "--col-md-2 ").concat(_namespace.carbonPrefix, "--col-lg-2")
    }, /*#__PURE__*/_react2.default.createElement(_.ICA, storyProps({
      total: total
    })));
  })));
}, {
  info: {
    text: "\n        Multiple `ICA` components (i.e., an \"ICA Wall\") should be presented in a grid using the correct class names.\n\n        These two row examples show different combinations of breakpoints and spans set per column with specific class names.\n\n        For more information the 16 column IBM grid, please review the [`@carbon/grid` package documentation](https://github.com/carbon-design-system/carbon/tree/main/packages/grid).\n      "
  }
});