@pantheon-systems/design-toolkit-react/dist/Stepper/StepperProgress/Gate.js

Pantheon's React Design Toolkit

import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import PropTypes from 'prop-types';
import { Fragment } from 'react';
import { ButtonSubtle } from '../../Buttons/index.js';
import useStepperApi from '../hooks/useStepperApi.js';
import LineBar from './LineBar.js';
import Milestone from './Milestone.js';
import { jsxs, jsx } from 'react/jsx-runtime';

var GATE_LABEL_STYLES = 'absolute left-1/2 -translate-x-1/2 transform w-24 text-center';
var Gate = function Gate(_ref) {
  var ariaPosinset = _ref.ariaPosinset,
    ariaSetsize = _ref.ariaSetsize,
    currentStep = _ref.currentStep,
    disableNav = _ref.disableNav,
    gate = _ref.gate,
    isActive = _ref.isActive,
    steps = _ref.steps;
  var _useStepperApi = useStepperApi(),
    goToGate = _useStepperApi.goToGate;
  var hasError = isActive && _toConsumableArray(steps.values()).some(function (step) {
    return !!step.isError;
  });
  var disableNavButton = disableNav || !gate.isComplete;
  return /*#__PURE__*/jsxs("li", {
    "aria-current": isActive ? 'step' : undefined,
    "aria-label": gate.label,
    "aria-posinset": ariaPosinset,
    "aria-setsize": ariaSetsize,
    className: "flex flex-auto relative m-0 last:flex-initial",
    children: [/*#__PURE__*/jsx(LineBar, {
      currentStep: currentStep,
      isActive: isActive,
      isComplete: gate.isComplete,
      steps: steps
    }), /*#__PURE__*/jsx("div", {
      className: "stepper-milestone absolute -left-4",
      children: disableNavButton ? /*#__PURE__*/jsxs(Fragment, {
        children: [/*#__PURE__*/jsx(Milestone, {
          disableNavButton: true,
          isActive: isActive,
          isComplete: gate.isComplete,
          isError: hasError
        }), /*#__PURE__*/jsx("p", {
          className: GATE_LABEL_STYLES,
          children: gate.label
        })]
      }) : /*#__PURE__*/jsxs(ButtonSubtle, {
        className: "border-none p-0 font-normal text-current hover:text-current",
        onClick: function onClick() {
          return goToGate(gate.id);
        },
        children: [/*#__PURE__*/jsx(Milestone, {
          isActive: isActive,
          isComplete: gate.isComplete,
          isError: hasError
        }), /*#__PURE__*/jsx("p", {
          className: GATE_LABEL_STYLES,
          children: gate.label
        })]
      })
    })]
  });
};
Gate.propTypes = {
  ariaPosinset: PropTypes.number.isRequired,
  ariaSetsize: PropTypes.number.isRequired,
  currentStep: PropTypes.number.isRequired,
  disableNav: PropTypes.bool.isRequired,
  gate: PropTypes.shape({
    id: PropTypes.string.isRequired,
    isComplete: PropTypes.bool.isRequired,
    label: PropTypes.string.isRequired
  }).isRequired,
  isActive: PropTypes.bool.isRequired,
  steps: PropTypes.instanceOf(Map).isRequired
};
var Gate$1 = Gate;

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