@storybook/design-system/dist/components/table-of-contents/TableOfContentsItems.js

Storybook design system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TableOfContentsItems = TableOfContentsItems;
exports.ItemType = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _theming = require("@storybook/theming");

var _BulletLink = require("./BulletLink");

var _ItemLink = require("./ItemLink");

var _MenuLink = require("./MenuLink");

var _styles = require("../shared/styles");

var _Icon = require("../Icon");

var _Link = require("../Link");

var _excluded = ["isTopLevel", "item", "setMenuOpenStateById", "currentPath"],
    _excluded2 = ["className", "currentPath", "isTopLevel", "items", "setMenuOpenStateById"];
var ItemType;
exports.ItemType = ItemType;

(function (ItemType) {
  ItemType["MENU"] = "menu";
  ItemType["LINK"] = "link";
  ItemType["BULLET_LINK"] = "bullet-link";
})(ItemType || (exports.ItemType = ItemType = {}));

var ItemComponent = function ItemComponent(_ref) {
  var currentPath = _ref.currentPath,
      item = _ref.item,
      isTopLevel = _ref.isTopLevel,
      setMenuOpenStateById = _ref.setMenuOpenStateById;

  if (item.type === ItemType.MENU) {
    return /*#__PURE__*/_react["default"].createElement(Menu, {
      currentPath: currentPath,
      item: item,
      isTopLevel: isTopLevel,
      setMenuOpenStateById: setMenuOpenStateById
    });
  }

  if (item.type === ItemType.LINK && item.path !== undefined) {
    return /*#__PURE__*/_react["default"].createElement(_ItemLink.ItemLink, {
      currentPath: currentPath,
      item: item
    });
  }

  if (item.type === ItemType.BULLET_LINK && item.path !== undefined) {
    return /*#__PURE__*/_react["default"].createElement(_BulletLink.BulletLink, {
      currentPath: currentPath,
      item: item
    });
  }

  return null;
};

var TopLevelMenuToggle = ( /*#__PURE__*/0, _theming.styled)(_Link.Link, process.env.NODE_ENV === "production" ? {
  target: "e1vtjrf72"
} : {
  target: "e1vtjrf72",
  label: "TopLevelMenuToggle"
})("font-weight:", _styles.typography.weight.bold, ";line-height:24px;word-break:break-word;text-align:left;>span{display:flex;svg{flex:none;}span{flex:1;}}");
var ArrowIcon = ( /*#__PURE__*/0, _theming.styled)(_Icon.Icon, process.env.NODE_ENV === "production" ? {
  target: "e1vtjrf71"
} : {
  target: "e1vtjrf71",
  label: "ArrowIcon"
})("&&{width:12px;height:12px;color:", _styles.color.mediumdark, ";transform:translateY(1px) ", function (props) {
  return props.isOpen && "rotate(90deg)";
}, ";", function (props) {
  return props.isTopLevel ? "margin-right: 8px;" : "margin-left: 8px;";
}, " bottom:-0.25em;}");

function Menu(_ref2) {
  var isTopLevel = _ref2.isTopLevel,
      item = _ref2.item,
      setMenuOpenStateById = _ref2.setMenuOpenStateById,
      currentPath = _ref2.currentPath,
      rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
  if (!item.children) return null;

  var arrow = /*#__PURE__*/_react["default"].createElement(ArrowIcon, {
    icon: "arrowright",
    isOpen: item.isOpen,
    isTopLevel: isTopLevel,
    "aria-hidden": true
  });

  var toggleOpenState = function toggleOpenState() {
    return setMenuOpenStateById({
      id: item.id,
      isOpen: !item.isOpen
    });
  };

  return /*#__PURE__*/_react["default"].createElement("li", null, isTopLevel ? /*#__PURE__*/_react["default"].createElement(TopLevelMenuToggle, {
    isButton: true,
    tertiary: true,
    onClick: toggleOpenState
  }, arrow, /*#__PURE__*/_react["default"].createElement("span", null, item.title)) : /*#__PURE__*/_react["default"].createElement(_MenuLink.MenuLink, {
    isButton: true,
    onClick: toggleOpenState
  }, item.title, arrow), item.isOpen && /*#__PURE__*/_react["default"].createElement(TableOfContentsItems, (0, _extends2["default"])({
    items: item.children,
    isTopLevel: false,
    setMenuOpenStateById: setMenuOpenStateById,
    currentPath: currentPath
  }, rest)));
}

Menu.defaultProps = {
  isTopLevel: false
};
var List = (0, _theming.styled)("ul", process.env.NODE_ENV === "production" ? {
  target: "e1vtjrf70"
} : {
  target: "e1vtjrf70",
  label: "List"
})("list-style-type:none;padding:0;margin:0;li{padding-top:12px;&:first-of-type{padding-top:0;}}", function (props) {
  return props.isTopLevel && /*#__PURE__*/(0, _theming.css)(">li{padding-top:", props.isFlatList ? 16 : 24, "px;ul,ol{padding-top:12px;display:flex;flex-direction:column;}>ul{padding-left:35px;>li ul{padding-left:15px;}}>ol{padding-left:20px;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:List;"));
}, ";");

function TableOfContentsItems(_ref3) {
  var className = _ref3.className,
      currentPath = _ref3.currentPath,
      _ref3$isTopLevel = _ref3.isTopLevel,
      isTopLevel = _ref3$isTopLevel === void 0 ? false : _ref3$isTopLevel,
      items = _ref3.items,
      setMenuOpenStateById = _ref3.setMenuOpenStateById,
      rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
  var isOrderedList = items.every(function (item) {
    return item.type === ItemType.BULLET_LINK;
  });
  var isFlatList = items.every(function (item) {
    return item.type === ItemType.LINK;
  });
  return /*#__PURE__*/_react["default"].createElement(List, {
    className: className,
    isTopLevel: isTopLevel,
    isFlatList: isFlatList // @ts-expect-error Emotion 10 doesn't include `as` in its types
    ,
    as: isOrderedList ? 'ol' : 'ul'
  }, items.map(function (item) {
    return /*#__PURE__*/_react["default"].createElement(ItemComponent, (0, _extends2["default"])({
      key: item.title,
      currentPath: currentPath,
      item: item,
      isTopLevel: isTopLevel,
      setMenuOpenStateById: setMenuOpenStateById
    }, rest));
  }));
}

TableOfContentsItems.defaultProps = {
  className: ''
};