@pantheon-systems/design-toolkit-react/dist/ExpandableSection/ExpandableBlock.js

Pantheon's React Design Toolkit

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { faCaretDown, faCaretRight } from '@fortawesome/pro-solid-svg-icons';
import PropTypes from 'prop-types';
import { useState, Fragment } from 'react';
import ContainerFlex from '../Containers/ContainerFlex.js';
import Icon from '../Icons/Icon.js';
import { jsxs, jsx } from 'react/jsx-runtime';

var TitleWrapper = function TitleWrapper(_ref) {
  var children = _ref.children,
    subtitle = _ref.subtitle;
  return subtitle ? /*#__PURE__*/jsx(ContainerFlex, {
    itemsDirection: "column",
    children: children
  }) : children;
};
TitleWrapper.defaultProps = {
  subtitle: ''
};
TitleWrapper.propTypes = {
  children: PropTypes.node.isRequired,
  subtitle: PropTypes.string
};
var ExpandableBlock = function ExpandableBlock(_ref2) {
  var children = _ref2.children,
    title = _ref2.title,
    subtitle = _ref2.subtitle,
    initiallyExpanded = _ref2.initiallyExpanded,
    textColor = _ref2.textColor;
  var generateUUID = function generateUUID() {
    return "".concat(Math.random().toString(16), "000000000").substr(2, 8);
  };
  var _useState = useState(initiallyExpanded),
    _useState2 = _slicedToArray(_useState, 2),
    showState = _useState2[0],
    setShowState = _useState2[1];
  var _useState3 = useState(generateUUID),
    _useState4 = _slicedToArray(_useState3, 1),
    uuid = _useState4[0];
  var id = "expandable-content-section-".concat(uuid);
  var caret = showState ? faCaretDown : faCaretRight;
  var onClick = function onClick() {
    return setShowState(!showState);
  };
  var contentCss = "py-0 mb-2 ".concat(showState ? '' : 'hidden').trim();
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsxs("div", {
      "aria-expanded": showState,
      className: "flex flex-row mb-2 cursor-pointer",
      id: id,
      onClick: onClick,
      onKeyDown: onClick,
      role: "button",
      tabIndex: "0",
      children: [/*#__PURE__*/jsx("span", {
        className: "".concat(textColor, " w-4"),
        children: /*#__PURE__*/jsx(Icon, {
          icon: caret
        })
      }), /*#__PURE__*/jsxs(TitleWrapper, {
        subtitle: subtitle,
        children: [/*#__PURE__*/jsx("span", {
          className: "".concat(textColor, " font-semibold"),
          children: title
        }), subtitle && /*#__PURE__*/jsx("span", {
          className: "text-gray-5",
          children: subtitle
        })]
      })]
    }), /*#__PURE__*/jsx("div", {
      "aria-hidden": !showState,
      "aria-labelledby": id,
      className: contentCss,
      children: children
    })]
  });
};
var acceptedColors = ['text-blue-3', 'text-black'];
ExpandableBlock.defaultProps = {
  initiallyExpanded: false,
  subtitle: '',
  textColor: 'text-black',
  title: 'Expandable section title'
};
ExpandableBlock.propTypes = {
  children: PropTypes.node.isRequired,
  initiallyExpanded: PropTypes.bool,
  subtitle: PropTypes.string,
  textColor: PropTypes.oneOf(acceptedColors),
  title: PropTypes.string
};
var ExpandableBlock$1 = ExpandableBlock;

export { ExpandableBlock$1 as default };
//# sourceMappingURL=ExpandableBlock.js.map