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

Carbon for Cloud & Cognitive IBM Security UI components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
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("./_mocks_");
/**
 * @file Truncated list stories.
 * @copyright IBM Security 2020 - 2021
 */

(0, _react.storiesOf)((0, _storybook.components)(_.TruncatedList.name), module).addDecorator(function (story) {
  return /*#__PURE__*/_react2.default.createElement("div", {
    style: {
      minWidth: 150,
      minHeight: 300
    }
  }, story());
}).add('default', function () {
  return /*#__PURE__*/_react2.default.createElement(_.TruncatedList, {
    className: "other-class",
    style: {
      paddingLeft: 0
    },
    as: _.UnorderedList,
    scrollGradientColor: (0, _addonKnobs.color)('scroll gradient color (scrollGradientColor)', _.TruncatedList.defaultProps.scrollGradientColor),
    getExpandButtonLabel: function getExpandButtonLabel(isExpanded, displayCount, hiddenCount) {
      return isExpanded ? 'View less' : "View more (".concat(hiddenCount, ")");
    },
    truncateThreshold: (0, _addonKnobs.number)('Number of items to show before truncation (truncateThreshold)', 10),
    collapsedItemLimit: (0, _addonKnobs.number)('Number of items to show when collapsed (collapsedItemLimit)', 5),
    expandedItemLimit: (0, _addonKnobs.number)('Number items to show when expanded (expandedItemLimit)', 10)
  }, (0, _mocks_.createChildrenArray)((0, _addonKnobs.number)('Number of items in list', 15)));
}, {
  info: {
    text: "## Truncated list\nThis component is a list that accepts any number of list items (`li`). It allows consumers to control\nhow many items are revealed to the user while giving the user the ability to expand the list and see\nthe entire list. There are props that control how many items a user can see at once:\n\n  * `truncateThreshold`: This prop will give consumers control of how many items are rendered\n  before the list is truncated.\n\n  * `collapsedItemLimit`: When the number of items surpass the truncation threshold, this prop\n  allows consumers to set how many items should be displayed when the list is collapsed.\n\n  * `expandedItemLimit`: When the list is truncated and expanded, all items in the list are\n  rendered. However, this prop allows consumers to limit the height of the list so the expanded list\n  is not too long. If the list is long, it becomes scrollable.\n\nAdditionally, to provide the desired expand button label, please provide a `getExpandButtonLabel`\nfunction prop. The signature is as follows:\n\n~~~js\ngetExpandButtonLabel = (isExpanded: boolean, displayCount: number, hiddenCount: number): string => {};\n~~~"
  }
});