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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.Icons = void 0;

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

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

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

var _addonKnobs = require("@storybook/addon-knobs");

var _icons = _interopRequireDefault(require("./icons"));

var _ = require("../");

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

var IconGrid = (0, _styledComponents.default)('div').withConfig({
  displayName: "IconstoriesHelpers__IconGrid",
  componentId: "sc-1sz8m7a-0"
})(["display:flex;flex-wrap:wrap;"]);
var WrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "IconstoriesHelpers__WrapperUI",
  componentId: "sc-1sz8m7a-1"
})(["flex:0 0 80px;text-align:center;margin:12px;border:1px solid ", ";border-radius:5px;-webkit-box-align:start;display:flex;flex-direction:column;"], (0, _color.getColor)('grey.500'));

var IconContainerUI = _styledComponents.default.div.withConfig({
  displayName: "IconstoriesHelpers__IconContainerUI",
  componentId: "sc-1sz8m7a-2"
})(["display:inline-block;&:hover{border:1px solid ", ";border-radius:3px;}"], (0, _color.getColor)('grey.400'));

var TextWrapper = (0, _styledComponents.default)(_.Text).withConfig({
  displayName: "IconstoriesHelpers__TextWrapper",
  componentId: "sc-1sz8m7a-3"
})(["margin-top:'auto';border-top:1px solid ", ";display:'flex';padding:8px;width:100%;color:", ";"], (0, _color.getColor)('grey.500'), (0, _color.getColor)('charcoal.300'));
var IconWrapper = (0, _styledComponents.default)('div').withConfig({
  displayName: "IconstoriesHelpers__IconWrapper",
  componentId: "sc-1sz8m7a-4"
})(["height:60px;display:flex;align-items:center;justify-content:center;width:100%;"]);

var Icons = function Icons() {
  var size = (0, _addonKnobs.select)('size', {
    10: 10,
    12: 12,
    13: 13,
    14: 14,
    16: 16,
    18: 18,
    20: 20,
    24: 24,
    32: 32,
    48: 48,
    52: 52
  }, 24);
  var state = (0, _addonKnobs.select)('state', {
    default: 'default',
    error: 'error',
    success: 'success',
    warning: 'warning'
  }, 'default');
  var shade = (0, _addonKnobs.select)('shade', {
    default: 'default',
    subtle: 'subtle',
    muted: 'muted',
    faint: 'faint',
    extraMuted: 'extraMuted'
  }, 'default');
  var muted = (0, _addonKnobs.boolean)('muted', false);
  var withCaret = (0, _addonKnobs.boolean)('withCaret', false);
  var icons = Object.keys(_icons.default).map(function (i) {
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(WrapperUI, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconWrapper, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainerUI, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Icon, {
            name: i,
            size: size,
            center: true,
            state: state,
            shade: shade,
            muted: muted,
            withCaret: withCaret
          }, i)
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextWrapper, {
        size: "12",
        children: i
      })]
    }, i);
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconGrid, {
    children: icons
  });
};

exports.Icons = Icons;