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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = SidePanelApp;

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

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

var _classnames = _interopRequireDefault(require("classnames"));

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

var _depth = require("../../styles/mixins/depth.css");

var _Button = _interopRequireDefault(require("../Button/"));

var _ChoiceGroup = _interopRequireDefault(require("../ChoiceGroup"));

var _Radio = _interopRequireDefault(require("../Radio"));

var _huzzahBird = _interopRequireDefault(require("@helpscout/hsds-illos/huzzah-bird"));

var _SidePanel = _interopRequireDefault(require("./SidePanel"));

var _SimpleModal = _interopRequireDefault(require("../SimpleModal"));

var _SidePanel2 = require("./SidePanel.layouts");

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 AppContainerUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "SidePanelstoriesHelpers__AppContainerUI",
  componentId: "o6rlna-0"
})(["width:100%;height:calc(100vh - 2rem);background-color:#e5e5f7;background-size:10px 10px;background-image:repeating-linear-gradient( 45deg,#444cf7 0,#444cf7 1px,#e5e5f7 0,#e5e5f7 50% );"]);
var FakeNavUI = (0, _styledComponents.default)('nav').withConfig({
  displayName: "SidePanelstoriesHelpers__FakeNavUI",
  componentId: "o6rlna-1"
})(["display:flex;align-items:center;justify-content:center;height:40px;width:100%;background-color:#444cf7;.c-ChoiceGroup{margin-right:20px;}.c-FormGroupChoice{margin-bottom:0;color:white;}"]);
var FakeCardUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "SidePanelstoriesHelpers__FakeCardUI",
  componentId: "o6rlna-2"
})(["", ";width:200px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:10px;border-radius:4px;&.in-panel{width:100%;height:100px;margin:0 0 45px 0;box-shadow:0 0 0 2px white,0 0 0 4px ", ";&.checked{box-shadow:0 0 0 2px white,0 0 0 4px ", ";}}&:hover{", "}&:focus{outline:none;box-shadow:0 0 0 2px white,0 0 0 4px ", ";}"], _depth.d400, (0, _color.getColor)('yellow.400'), (0, _color.getColor)('green.400'), _depth.d400Effect, (0, _color.getColor)('blue.400'));
var FakeMainUI = (0, _styledComponents.default)('main').withConfig({
  displayName: "SidePanelstoriesHelpers__FakeMainUI",
  componentId: "o6rlna-3"
})(["position:relative;width:100%;height:calc(100vh - 40px - 2rem);padding:30px;background-color:#e5e5f7;background-image:radial-gradient(#444cf7 0.5px,#e5e5f7 0.5px);background-size:10px 10px;"]);
var SimpleModalUI = (0, _styledComponents.default)(_SimpleModal.default).withConfig({
  displayName: "SidePanelstoriesHelpers__SimpleModalUI",
  componentId: "o6rlna-4"
})(["padding:27px;"]);

function SidePanelApp() {
  var _useState = (0, _react.useState)(false),
      showPanel = _useState[0],
      setShowPanel = _useState[1];

  var _useState2 = (0, _react.useState)(false),
      showModal = _useState2[0],
      setShowModal = _useState2[1];

  var _useState3 = (0, _react.useState)('right'),
      panelDirection = _useState3[0],
      setPanelDirection = _useState3[1];

  var _useState4 = (0, _react.useState)(false),
      step1Checked = _useState4[0],
      setStep1Checked = _useState4[1];

  var _useState5 = (0, _react.useState)(false),
      step2Checked = _useState5[0],
      setStep2Checked = _useState5[1];

  var _useState6 = (0, _react.useState)(false),
      step3Checked = _useState6[0],
      setStep3Checked = _useState6[1];

  function handleToggle() {
    setShowPanel(!showPanel);
  }

  function onClose() {
    setShowPanel(false);
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AppContainerUI, {
    className: "AppContainer",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(FakeNavUI, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChoiceGroup.default, {
        multiSelect: false,
        align: "horizontal",
        value: panelDirection,
        onChange: function onChange(value) {
          setPanelDirection(value);
        },
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {
          label: "Right",
          value: "right",
          name: "right"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {
          label: "Left",
          value: "left",
          name: "left"
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
        theme: "grey",
        outlined: true,
        size: "xs",
        onClick: function onClick() {
          return handleToggle();
        },
        children: "Toggle Panel"
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FakeMainUI, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FakeCardUI, {
          children: "Card 1"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FakeCardUI, {
          children: "Card 2"
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidePanel.default, {
        closeOnClickOutside: "panel",
        ariaLabelledBy: "sidepanel-descriptor",
        show: showPanel,
        onClose: onClose,
        side: panelDirection,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SidePanel2.HeaderAndFooter, {
          panelHeadingId: "sidepanel-descriptor",
          onMainActionClick: function onMainActionClick() {
            return setShowModal(true);
          },
          mainActionDisabled: !step1Checked || !step2Checked || !step3Checked,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FakeCardUI, {
            className: (0, _classnames.default)('in-panel', step1Checked && 'checked'),
            onClick: function onClick() {
              setStep1Checked(!step1Checked);
            },
            tabIndex: "0",
            children: "Step 1"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FakeCardUI, {
            className: (0, _classnames.default)('in-panel', step2Checked && 'checked'),
            onClick: function onClick() {
              setStep2Checked(!step2Checked);
            },
            tabIndex: "0",
            children: "Step 2"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FakeCardUI, {
            className: (0, _classnames.default)('in-panel', step3Checked && 'checked'),
            onClick: function onClick() {
              setStep3Checked(!step3Checked);
            },
            tabIndex: "0",
            children: "Step 3"
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(SimpleModalUI, {
            show: showModal,
            zIndex: 1000,
            onClose: function onClose() {
              return setShowModal(false);
            },
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_huzzahBird.default, {
              size: 200
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
              children: "Action!"
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
              children: "More Action!"
            })]
          })]
        })
      })]
    })]
  });
}