@navinc/base-react-components/cjs/wizard-flow.js

Nav's Pattern Library

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useWizardFlow = exports.WizardFlowProvider = exports.InnerContainer = exports.Container = exports.Image = exports.ChildContainer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const header_js_1 = __importDefault(require("./header.js"));
const copy_1 = __importDefault(require("./copy"));
const cdn_illustration_js_1 = __importDefault(require("./cdn-illustration.js"));
const standard_card_js_1 = __importDefault(require("./standard-card.js"));
const WizardFlowContext = (0, react_1.createContext)({});
exports.ChildContainer = styled_components_1.default.div ``;
exports.Image = (0, styled_components_1.default)(cdn_illustration_js_1.default) `
  max-width: 192px;
  justify-self: center;
  @media (${({ theme }) => theme.forLargerThanPhone}) {
    width: 192px;
  }
`;
exports.Container = styled_components_1.default.div `
  display: grid;
  grid-template-columns: auto;
  grid-auto-rows: auto;

  ${exports.ChildContainer} {
    grid-column: span 2;
    grid-row: 2;
  }

  @media (${({ theme }) => theme.forLargerThanPhone}) {
    grid-template-columns: 1fr 2fr;
    grid-auto-rows: auto;
    ${exports.Image} {
      grid-row: span 2;
    }

    ${exports.ChildContainer} {
      grid-column: initial;
      grid-row: initial;
    }
  }
`;
const StyledCopy = (0, styled_components_1.default)(copy_1.default) `
  /* styling for the colored bar above the question steps label */
  &::before {
    content: '';
    background: ${({ stepColor, theme }) => stepColor || theme.lightBlue400};
    display: block;
    width: 88px;
    height: 8px;
    border-radius: 4px;
    margin-bottom: 16px;
  }
`;
exports.InnerContainer = styled_components_1.default.div `
  display: grid;
  grid-gap: 16px;
`;
const WizardFlowProvider = ({ children }) => {
    const childrenArray = react_1.default.Children.toArray(children);
    const [currentStep, setCurrentStep] = (0, react_1.useState)(0);
    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
    const incrementStep = (0, react_1.useCallback)(() => setCurrentStep(currentStep + 1), [currentStep]);
    const decrementStep = (0, react_1.useCallback)(() => setCurrentStep(currentStep - 1), [currentStep]);
    const values = {
        currentStep: currentStep + 1,
        totalSteps: childrenArray.length,
        incrementStep,
        decrementStep,
        isLoading,
        setIsLoading,
    };
    return (0, jsx_runtime_1.jsx)(WizardFlowContext.Provider, Object.assign({ value: values }, { children: childrenArray[currentStep] }), void 0);
};
exports.WizardFlowProvider = WizardFlowProvider;
const useWizardFlow = () => {
    const { currentStep, totalSteps, incrementStep, decrementStep, isLoading, setIsLoading } = (0, react_1.useContext)(WizardFlowContext);
    return { currentStep, totalSteps, incrementStep, decrementStep, isLoading, setIsLoading };
};
exports.useWizardFlow = useWizardFlow;
const WizardStep = ({ stepLabel, stepColor, stepContainerTestId, imageFileName, headerCopy, actionTrackingContext, actionForm, actionText, actionTestId, children, }) => {
    const { currentStep, totalSteps, decrementStep, isLoading } = (0, exports.useWizardFlow)();
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(exports.Container, Object.assign({ "data-testid": stepContainerTestId }, { children: [imageFileName && (0, jsx_runtime_1.jsx)(exports.Image, { filename: imageFileName }, void 0), (0, jsx_runtime_1.jsxs)(exports.InnerContainer, { children: [(0, jsx_runtime_1.jsx)(StyledCopy, Object.assign({ light: true, shouldScaleFont: true, size: "sm", stepColor: stepColor }, { children: stepLabel || `QUESTION ${currentStep} OF ${totalSteps}` }), void 0), headerCopy && (0, jsx_runtime_1.jsx)(header_js_1.default, Object.assign({ size: "lg" }, { children: headerCopy }), void 0), children] }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(standard_card_js_1.default.Footer, { isLoading: isLoading, actionDataTestId: actionTestId, actionText: actionText || 'Next', actionForm: actionForm, onBack: currentStep > 1 ? () => decrementStep() : null, actionTrackingContext: actionTrackingContext }, void 0)] }, void 0));
};
exports.default = WizardStep;
//# sourceMappingURL=wizard-flow.js.map