@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
56 lines • 3.66 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { forwardRef } from "react";
import { ChevronDownIcon } from "@navikt/aksel-icons";
import Button from "../../button/Button.js";
import Collapsible from "../../collapsible/Collapsible.js";
import { HStack } from "../../layout/stack/index.js";
import { ProgressBar } from "../../progress-bar/index.js";
import { Stepper } from "../../stepper/index.js";
import { useRenameCSS } from "../../theme/Theme.js";
import { BodyShort } from "../../typography/index.js";
import { useI18n } from "../../util/i18n/i18n.hooks.js";
/**
* Component for visualizing progression in a form with multiple steps.
*
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/formprogress)
* @see 🏷️ {@link FormProgressProps}
*
* @example
* <FormProgress activeStep={2} totalSteps={3}>
* <FormProgress.Step completed href="#">Children</FormProgress.Step>
* <FormProgress.Step href="#">Personal information</FormProgress.Step>
* <FormProgress.Step interactive={false}>Summary</FormProgress.Step>
* </FormProgress>
*/
export const FormProgress = forwardRef((_a, ref) => {
var { totalSteps, activeStep, open, onOpenChange, children, onStepChange, interactiveSteps, translations } = _a, rest = __rest(_a, ["totalSteps", "activeStep", "open", "onOpenChange", "children", "onStepChange", "interactiveSteps", "translations"]);
const { cn } = useRenameCSS();
const translate = useI18n("FormProgress", translations);
return (React.createElement("div", Object.assign({ ref: ref }, rest),
React.createElement(ProgressBar, { "aria-hidden": true, value: activeStep, valueMax: totalSteps, className: cn("navds-form-progress__bar") }),
React.createElement(Collapsible, { lazy: true, open: open, onOpenChange: onOpenChange },
React.createElement(HStack, { justify: "space-between", align: "center" },
React.createElement(BodyShort, { as: "span" }, translate("step", { activeStep, totalSteps })),
React.createElement(Collapsible.Trigger, { asChild: true, "aria-expanded": undefined },
React.createElement(Button, { variant: "tertiary", size: "small", className: cn("navds-form-progress__button"), icon: React.createElement(ChevronDownIcon, { "aria-hidden": true }) },
React.createElement("span", { className: cn("navds-form-progress__btn-txt-hide") }, translate("hideAllSteps")),
React.createElement("span", { className: cn("navds-form-progress__btn-txt-show") }, translate("showAllSteps"))))),
React.createElement(Collapsible.Content, { className: cn("navds-form-progress__collapsible") },
React.createElement("div", { className: cn("navds-form-progress__collapsible-content") },
React.createElement("div", { className: cn("navds-form-progress__stepper") },
React.createElement(Stepper, { activeStep: activeStep, onStepChange: onStepChange, interactive: interactiveSteps }, children)))))));
});
FormProgress.Step = Stepper.Step;
export const FormProgressStep = Stepper.Step;
export default FormProgress;
//# sourceMappingURL=FormProgress.js.map