@veevarts/design-system 2.1.0-beta.20 → 2.1.0-beta.22

package/dist/patterns/VerticalSteps/types.d.ts

@@ -0,0 +1,100 @@
+import { default as React, ReactNode } from 'react';
+/**
+ * Where a step stands. `done` and `optional` need nothing; `needs-fix` is
+ * what stops the page from being ready, and carries a `reason`.
+ */
+export type VerticalStepStatus = 'done' | 'needs-fix' | 'optional';
+/** One row of a {@link VerticalSteps} panel, and one page of a {@link StepPager}. */
+export interface VerticalStep {
+    /** Stable id. Keys the row and its default test id. */
+    key: string;
+    /** Step name. The row prefixes its 1-based number; the pager shows it bare. */
+    label: string;
+    /** One line under the label: "3 tickets", "Nov 1 – Dec 31". */
+    summary?: ReactNode;
+    status: VerticalStepStatus;
+    /** What to fix ("Add the end date"). Shown instead of `summary` while `needs-fix`. */
+    reason?: ReactNode;
+    /** Override the row's test id; defaults to `${data-testid}-step-${key}`. */
+    testId?: string;
+}
+/**
+ * The status words, translated by the host. `optional` is visible
+ * ("Optional · 2 rules"); `done` and `needsFix` are read out only, before the
+ * summary or the reason, so include the punctuation your language wants there
+ * (`'Done.'`, `'Needs a fix:'`).
+ */
+export interface VerticalStepsStatusLabels {
+    done: string;
+    needsFix: string;
+    optional: string;
+}
+/**
+ * Same position model as `HorizontalSteps`: an index, controlled or not,
+ * with `onStepChange` and an `isStepReachable` gate.
+ */
+export interface VerticalStepsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    steps: VerticalStep[];
+    /** Controlled index of the active step. Omit for uncontrolled mode. */
+    currentStep?: number;
+    /** Starting index in uncontrolled mode. */
+    defaultStep?: number;
+    onStepChange?: (stepIndex: number) => void;
+    /**
+     * Steps for which this returns `false` render disabled and cannot be
+     * pressed. When omitted every step is reachable, which is the program
+     * page's case: no step is locked.
+     */
+    isStepReachable?: (stepIndex: number) => boolean;
+    /** Accessible name of the `<nav>` that holds the rows ("Program steps"). */
+    ariaLabel: string;
+    statusLabels: VerticalStepsStatusLabels;
+    /** Above the rows: a {@link StepsReadiness}, or anything else. */
+    header?: ReactNode;
+    /**
+     * Cap on the panel's height; past it the panel scrolls inside. Any CSS
+     * length (`'calc(100vh - 7rem)'`) or px number. The panel never sets
+     * `position: sticky` itself: the page that places it decides that.
+     */
+    maxHeight?: string | number;
+    'data-testid'?: string;
+}
+/**
+ * `ready` and `live` are the success tone and mark the panel ready
+ * (`data-ready="true"`); `fix` is the warning tone.
+ */
+export type StepsReadinessVariant = 'ready' | 'fix' | 'live';
+export interface StepsReadinessProps {
+    variant: StepsReadinessVariant;
+    /** "Ready to publish", "2 things to fix", "Live — visitors can buy". */
+    title: ReactNode;
+    /** The sub-line: "Fix them before you can publish." */
+    description?: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+}
+export interface StepPagerProps {
+    steps: VerticalStep[];
+    /** Index of the step on screen; the same index `VerticalSteps` uses. */
+    currentStep: number;
+    onStepChange: (stepIndex: number) => void;
+    /** The middle text: `(n, total) => \`Step ${n} of ${total}\``. `n` is 1-based. */
+    progressLabel: (stepNumber: number, total: number) => ReactNode;
+    /** The forward button: `(step) => \`Next: ${step.label}\``. */
+    nextLabel: (step: VerticalStep) => ReactNode;
+    /** The back button. Defaults to the previous step's label. */
+    previousLabel?: (step: VerticalStep) => ReactNode;
+    /**
+     * Shown in place of Next on the last step ("Review and publish"). Omit it,
+     * or `onFinalAction`, and the last step has no forward button.
+     */
+    finalActionLabel?: ReactNode;
+    onFinalAction?: () => void;
+    isFinalActionDisabled?: boolean;
+    className?: string;
+    /** Root test id. The buttons' ids default to `${data-testid}-prev` / `-next` / `-final`. */
+    'data-testid'?: string;
+    previousTestId?: string;
+    nextTestId?: string;
+    finalActionTestId?: string;
+}

package/dist/patterns/index.d.ts

@@ -4,6 +4,8 @@ export { Stepper } from './Stepper';
 export type { StepperProps } from './Stepper';
 export { HorizontalSteps } from './HorizontalSteps';
 export type { HorizontalStepsProps, HorizontalStepProps } from './HorizontalSteps';
+export { VerticalSteps, StepsReadiness, StepPager } from './VerticalSteps';
+export type { VerticalStep, VerticalStepStatus, VerticalStepsProps, VerticalStepsStatusLabels, StepsReadinessProps, StepsReadinessVariant, StepPagerProps, } from './VerticalSteps';
 export { Footer } from './Footer';
 export { Multiselect } from './Multiselect';
 export type { MultiselectProps } from './Multiselect';
@@ -63,8 +65,8 @@ export { ToolbarButton } from './ToolbarButton';
 export type { ToolbarButtonProps } from './ToolbarButton';
 export { UnderlineTabs } from './UnderlineTabs';
 export type { UnderlineTabsProps, UnderlineTabItem, UnderlineTabsSize, UnderlineTabsLevel } from './UnderlineTabs';
-export { AdminFieldLabel, AdminTextField, adminFieldErrorClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelSuffixClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './AdminTextField';
-export type { AdminTextFieldProps } from './AdminTextField';
+export { AdminFieldLabel, AdminTextField, adminFieldErrorClass, adminFieldHelpButtonClass, adminFieldHelpContentClass, adminFieldHelpIconClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelNoAutoMarkClass, adminFieldLabelRowClass, adminFieldLabelSuffixClass, adminFieldRequiredClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './AdminTextField';
+export type { AdminTextFieldProps, AdminFieldLabelProps, AdminFieldRequiredProps, AdminFieldHelpProps, } from './AdminTextField';
 export { RowActions } from './RowActions';
 export type { RowActionsProps, RowAction } from './RowActions';
 export { PickerRow } from './PickerRow';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "2.1.0-beta.20",
+    "version": "2.1.0-beta.22",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",