@helpscout/hsds-react/components/Depth/Depth.storiesHelpers.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.RelatedLink = exports.BoxWithDepthUI = exports.BoxContainerUI = exports.InteractiveContainer = exports.ContainerWithDepth = void 0;

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _color = require("../../styles/utilities/color");

var _GlobalStyle = require("../HSDS/GlobalStyle");

var _Depth = _interopRequireDefault(require("./Depth"));

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var ContainerWithDepth = (0, _styledComponents.default)(_Depth.default).attrs(function (props) {
  return {
    level: props.level
  };
}).withConfig({
  displayName: "DepthstoriesHelpers__ContainerWithDepth",
  componentId: "sc-1abe3t9-0"
})(["display:flex;width:300px;padding:50px;justify-content:space-between;"]);
exports.ContainerWithDepth = ContainerWithDepth;
var SwitcherUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "DepthstoriesHelpers__SwitcherUI",
  componentId: "sc-1abe3t9-1"
})(["display:flex;position:absolute;width:140px;bottom:20px;left:50%;margin-left:-70px;button{cursor:pointer;width:20px;height:20px;overflow:hidden;text-indent:-9000px;border-radius:50%;margin:0 4px;border:2px solid white;box-shadow:0 2px 3px rgba(0,0,0,0.1);}"]);

var InteractiveContainer = function InteractiveContainer(_ref) {
  var children = _ref.children,
      _ref$columns = _ref.columns,
      columns = _ref$columns === void 0 ? 1 : _ref$columns;

  var _useState = (0, _react.useState)((0, _color.getColor)('grey.200')),
      bg = _useState[0],
      setBg = _useState[1];

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BoxContainerUI, {
    bg: bg,
    columns: columns,
    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsxs)(SwitcherUI, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
        style: {
          background: 'white'
        },
        onClick: function onClick() {
          setBg('white');
        },
        children: "white"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
        style: {
          background: (0, _color.getColor)('grey.200')
        },
        onClick: function onClick() {
          setBg((0, _color.getColor)('grey.200'));
        },
        children: "grey.200"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
        style: {
          background: (0, _color.getColor)('grey.300')
        },
        onClick: function onClick() {
          setBg((0, _color.getColor)('grey.300'));
        },
        children: "grey.300"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
        style: {
          background: (0, _color.getColor)('charcoal.700')
        },
        onClick: function onClick() {
          setBg((0, _color.getColor)('charcoal.700'));
        },
        children: "charcoal.700"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
        style: {
          background: (0, _color.getColor)('blue.700')
        },
        onClick: function onClick() {
          setBg((0, _color.getColor)('blue.700'));
        },
        children: "blue.700"
      })]
    })]
  });
};

exports.InteractiveContainer = InteractiveContainer;
var BoxContainerUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "DepthstoriesHelpers__BoxContainerUI",
  componentId: "sc-1abe3t9-2"
})(["position:relative;display:grid;grid-template-columns:", ";grid-gap:20px;justify-items:center;justify-content:center;padding:20px 20px 60px;border-radius:5px;margin:20px 0 30px;font-family:", ";background:", ";"], function (_ref2) {
  var columns = _ref2.columns;
  return "repeat(" + columns + ", " + (columns === 1 ? '250px' : '1fr') + ")";
}, _GlobalStyle.FONT_FAMILY, function (_ref3) {
  var bg = _ref3.bg;
  return bg;
});
exports.BoxContainerUI = BoxContainerUI;
var BoxWithDepthUI = (0, _styledComponents.default)(_Depth.default).withConfig({
  displayName: "DepthstoriesHelpers__BoxWithDepthUI",
  componentId: "sc-1abe3t9-3"
})(["width:100%;height:100px;line-height:100px;text-align:center;text-transform:uppercase;letter-spacing:1px;color:", ";font-size:15px;"], (0, _color.getColor)('charcoal.500'));
exports.BoxWithDepthUI = BoxWithDepthUI;
var RelatedLink = (0, _styledComponents.default)('a').withConfig({
  displayName: "DepthstoriesHelpers__RelatedLink",
  componentId: "sc-1abe3t9-4"
})(["display:inline-block;margin:2px 5px 2px 0;padding:4px 10px 4px 35px;border-radius:4px;background:#f1f3f5;background-size:16px;background-repeat:no-repeat;background-position:10px center;text-decoration:none;font-family:", ";font-size:14px;color:#1292ee;&:hover{color:#0077cc;background-color:#d6edff;text-decoration:underline;}&.figma{background-image:url('https://static.figma.com/app/icon/1/favicon.png');}&.storybook{background-image:url('https://storybook.js.org/images/logos/icon-storybook.png');}"], _GlobalStyle.FONT_FAMILY);
exports.RelatedLink = RelatedLink;