@storybook/design-system/dist/components/LinkTabs.js

Storybook design system

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LinkTabs = 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 _Link = require("./Link");

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

var _animation = require("./shared/animation");

var _excluded = ["isLoading", "items"],
    _excluded2 = ["key", "label"];

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

var Wrapper = (0, _theming.styled)("ul", process.env.NODE_ENV === "production" ? {
  target: "e1r2r91m1"
} : {
  target: "e1r2r91m1",
  label: "Wrapper"
})(process.env.NODE_ENV === "production" ? {
  name: "yt1q6z",
  styles: "display:flex;list-style:none;margin:0;padding:0;overflow-x:auto;overflow-y:hidden;li{list-style:none;}"
} : {
  name: "yt1q6z",
  styles: "display:flex;list-style:none;margin:0;padding:0;overflow-x:auto;overflow-y:hidden;li{list-style:none;}",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
var Tab = ( /*#__PURE__*/0, _theming.styled)(_Link.Link, process.env.NODE_ENV === "production" ? {
  target: "e1r2r91m0"
} : {
  target: "e1r2r91m0",
  label: "Tab"
})("padding:10px 15px;line-height:20px;font-size:", _styles.typography.size.s2, "px;font-weight:", _styles.typography.weight.bold, ";color:", _styles.color.mediumdark, ";white-space:nowrap;&:hover{color:", _styles.color.secondary, ";}", function (props) {
  return props.isLoading && /*#__PURE__*/(0, _theming.css)("cursor:progress!important;>*{", _animation.inlineGlow, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:Tab;"));
}, " ", function (props) {
  return props.isActive && !props.isLoading && /*#__PURE__*/(0, _theming.css)("color:", _styles.color.secondary, ";box-shadow:", _styles.color.secondary, " 0 -3px 0 0 inset;" + (process.env.NODE_ENV === "production" ? "" : ";label:Tab;"));
}, ";");

var LinkTabs = function LinkTabs(_ref) {
  var _ref$isLoading = _ref.isLoading,
      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
      _ref$items = _ref.items,
      items = _ref$items === void 0 ? [] : _ref$items,
      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  return /*#__PURE__*/_react["default"].createElement(Wrapper, props, items.map(function (_ref2) {
    var key = _ref2.key,
        label = _ref2.label,
        item = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
    return /*#__PURE__*/_react["default"].createElement("li", {
      key: key
    }, /*#__PURE__*/_react["default"].createElement(Tab, (0, _extends2["default"])({
      isLoading: isLoading
    }, item), label));
  }));
};

exports.LinkTabs = LinkTabs;