@octopusdeploy/design-system-components/dist/src/components/Dialog/DialogStepIndicator.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DialogStepIndicator = DialogStepIndicator;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const utils_1 = require("../../utils");
/**
 * Text-style step indicator for multi-step dialogs.
 * Displays "X of Y" with hidden accessible text of "Step" for additional context for assistive technologies.
 */
function DialogStepIndicator({ totalSteps, currentStepIndex }) {
    return ((0, jsx_runtime_1.jsxs)("p", { className: stepIndicatorStyles.label, children: [(0, jsx_runtime_1.jsx)("span", { className: stepIndicatorStyles.accessibleText, children: "Step" }), ` ${currentStepIndex + 1} of ${totalSteps}`] }));
}
const stepIndicatorStyles = {
    label: (0, css_1.css)({
        margin: 0,
        font: design_system_tokens_1.text.body.regular.medium,
        color: design_system_tokens_1.themeTokens.color.text.secondary,
        flexShrink: 0,
    }),
    accessibleText: (0, css_1.css)({
        ...utils_1.accessibilityStyles.hidden,
    }),
};