@charcuterie/ui 4.15.2 → 4.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Stepper/Stepper.d.ts +3 -1
- package/dist/Stepper/Stepper.d.ts.map +1 -1
- package/dist/Stepper/Stepper.js +4 -3
- package/dist/Stepper/Stepper.js.map +1 -1
- package/package.json +2 -2
- package/src/Stepper/Stepper.mdx +12 -0
- package/src/Stepper/Stepper.stories.tsx +24 -0
- package/src/Stepper/Stepper.test.tsx +19 -0
- package/src/Stepper/Stepper.tsx +17 -1
|
@@ -60,6 +60,8 @@ export type StepperProps = {
|
|
|
60
60
|
* vertical — a column cannot hold a list.
|
|
61
61
|
*/
|
|
62
62
|
readonly orientation?: StepperOrientation;
|
|
63
|
+
/** Completed stages become buttons; the caller resets dependent answers. */
|
|
64
|
+
readonly onStepSelect?: (key: string) => void;
|
|
63
65
|
readonly steps: readonly Step[];
|
|
64
66
|
};
|
|
65
67
|
/**
|
|
@@ -94,5 +96,5 @@ export type StepperProps = {
|
|
|
94
96
|
* step drawing a connector into empty space, which is a
|
|
95
97
|
* `:not(:last-child)` selector nobody remembers to write.
|
|
96
98
|
*/
|
|
97
|
-
export declare const Stepper: ({ appearance, className, headingLevel, isResponsive, label, orientation, steps, }: StepperProps) => import("react").JSX.Element;
|
|
99
|
+
export declare const Stepper: ({ appearance, className, headingLevel, isResponsive, label, orientation, onStepSelect, steps, }: StepperProps) => import("react").JSX.Element;
|
|
98
100
|
//# sourceMappingURL=Stepper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC;;;;;;;;;GASG;AACH,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,SAAS,GACT,MAAM,GACN,UAAU,CAAA;AAEd,MAAM,MAAM,IAAI,GAAG;IACjB,6DAA6D;IAC7D,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAA;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAA;IACzB;uCACmC;IACnC,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAA;IAChC;;;;;;;OAOG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAA;AAE1D,MAAM,MAAM,YAAY,GAAG;IACzB,6EAA6E;IAC7E,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC3C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;;;OAMG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACrC;2CACuC;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB;;;;;OAKG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAA;IAC/B;;;;;;OAMG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,kBAAkB,CAAA;IACzC,4EAA4E;IAC5E,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,QAAQ,CAAC,KAAK,EAAE,SAAS,IAAI,EAAE,CAAA;CAChC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,OAAO,GAAI,iGASrB,YAAY,gCAmLd,CAAA"}
|
package/dist/Stepper/Stepper.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { FLIP_KEY_ATTRIBUTE } from "@charcuterie/logic";
|
|
3
|
+
import { Button } from "../Button/Button.js";
|
|
3
4
|
import { toClassName } from "../toClassName.js";
|
|
4
5
|
import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
|
|
5
6
|
/**
|
|
@@ -34,7 +35,7 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
|
|
|
34
35
|
* step drawing a connector into empty space, which is a
|
|
35
36
|
* `:not(:last-child)` selector nobody remembers to write.
|
|
36
37
|
*/
|
|
37
|
-
export const Stepper = ({ appearance = "default", className, headingLevel = 3, isResponsive = true, label, orientation = "vertical", steps, }) => {
|
|
38
|
+
export const Stepper = ({ appearance = "default", className, headingLevel = 3, isResponsive = true, label, orientation = "vertical", onStepSelect, steps, }) => {
|
|
38
39
|
const Heading = `h${headingLevel}`;
|
|
39
40
|
const isHorizontal = orientation === "horizontal";
|
|
40
41
|
const isCompact = appearance === "compact";
|
|
@@ -50,7 +51,7 @@ export const Stepper = ({ appearance = "default", className, headingLevel = 3, i
|
|
|
50
51
|
: "flex-row gap-0")), children: steps.map((step, index) => {
|
|
51
52
|
const status = step.status ?? "upcoming";
|
|
52
53
|
const isLast = index === steps.length - 1;
|
|
53
|
-
return (_jsxs("li", { [FLIP_KEY_ATTRIBUTE]: step.key, className: toClassName("relative grid grid-cols-[auto_minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)] gap-x-3", isHorizontal &&
|
|
54
|
+
return (_jsxs("li", { "aria-current": status === "current" ? "step" : undefined, [FLIP_KEY_ATTRIBUTE]: step.key, className: toClassName("relative grid grid-cols-[auto_minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)] gap-x-3", isHorizontal &&
|
|
54
55
|
(isResponsive
|
|
55
56
|
? "cq-md:flex cq-md:min-w-0 cq-md:flex-1 cq-md:flex-col cq-md:gap-y-2"
|
|
56
57
|
: "flex min-w-0 flex-1 flex-col gap-y-2"), isCompact && "gap-y-1",
|
|
@@ -82,7 +83,7 @@ export const Stepper = ({ appearance = "default", className, headingLevel = 3, i
|
|
|
82
83
|
: "absolute top-3.5 start-7 my-0 h-0.5 w-[calc(100%-1.75rem)]")) })), _jsxs("div", { className: toClassName("col-start-2 row-span-2 row-start-1 min-w-0", isHorizontal &&
|
|
83
84
|
(isResponsive
|
|
84
85
|
? "cq-md:col-start-1"
|
|
85
|
-
: "col-start-1")), children: [_jsxs(Heading, { className: toClassName("m-0 flex flex-wrap items-center gap-2 font-medium text-content-primary", isCompact ? "text-xs" : "text-md"), children: [step.label, _jsx(VisuallyHidden, { children: STATUS_LABEL[status] })] }), step.description == null ? null : (_jsx("p", { className: "mt-0.5 mb-0 text-sm text-content-secondary", children: step.description })), step.content == null ? null : (_jsx("div", { className: "mt-2", children: step.content }))] })] }, step.key));
|
|
86
|
+
: "col-start-1")), children: [_jsxs(Heading, { className: toClassName("m-0 flex flex-wrap items-center gap-2 font-medium text-content-primary", isCompact ? "text-xs" : "text-md"), children: [onStepSelect && status === "done" ? (_jsx(Button, { appearance: "ghost", onClick: () => onStepSelect(step.key), children: step.label })) : (step.label), _jsx(VisuallyHidden, { children: STATUS_LABEL[status] })] }), step.description == null ? null : (_jsx("p", { className: "mt-0.5 mb-0 text-sm text-content-secondary", children: step.description })), step.content == null ? null : (_jsx("div", { className: "mt-2", children: step.content }))] })] }, step.key));
|
|
86
87
|
}) }) }));
|
|
87
88
|
};
|
|
88
89
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAsC,CAAA;
|
|
1
|
+
{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@charcuterie/ui",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.16.0",
|
|
4
4
|
"description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"typecheck": "tsc --noEmit"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@charcuterie/logic": "2.
|
|
56
|
+
"@charcuterie/logic": "2.8.0",
|
|
57
57
|
"@charcuterie/tokens": "1.10.2",
|
|
58
58
|
"@floating-ui/react": "^0.27.20",
|
|
59
59
|
"@tanstack/react-virtual": "^3.13.12",
|
package/src/Stepper/Stepper.mdx
CHANGED
|
@@ -84,3 +84,15 @@ A stepper is a **document outline**, not a widget: an `<ol>` of headings. Advanc
|
|
|
84
84
|
app's operation and the component only reports where the sequence got to, so there is no
|
|
85
85
|
roving focus, no `aria-current` on a control, and nothing to arrow between. If your steps
|
|
86
86
|
are *navigable* — a checkout you can click back into — you want `Tabs`.
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
## Wizard navigation
|
|
90
|
+
|
|
91
|
+
Provide `onStepSelect` to make completed stages keyboard-accessible buttons.
|
|
92
|
+
Current and upcoming stages remain progress indicators. The caller owns the answers:
|
|
93
|
+
returning to an earlier stage should clear choices that depend on it.
|
|
94
|
+
|
|
95
|
+
<Canvas of={StepperStories.WizardNavigation} />
|
|
96
|
+
|
|
97
|
+
Preact displays can use `getWizardSteps` from `@charcuterie/logic/core` to derive the
|
|
98
|
+
same numbered stages and backward navigation without importing React components.
|
|
@@ -252,3 +252,27 @@ export const Interactive: Story = {
|
|
|
252
252
|
)
|
|
253
253
|
},
|
|
254
254
|
}
|
|
255
|
+
|
|
256
|
+
/** A wizard permits returning to completed stages without skipping answers. */
|
|
257
|
+
export const WizardNavigation: Story = {
|
|
258
|
+
render: (stepperProps) => {
|
|
259
|
+
const [currentKey, setCurrentKey] = useState("tag")
|
|
260
|
+
return (
|
|
261
|
+
<Stepper
|
|
262
|
+
{...stepperProps}
|
|
263
|
+
label="Assignment wizard"
|
|
264
|
+
orientation="horizontal"
|
|
265
|
+
onStepSelect={setCurrentKey}
|
|
266
|
+
steps={RIP.map((step) => ({
|
|
267
|
+
...step,
|
|
268
|
+
status:
|
|
269
|
+
step.key === currentKey
|
|
270
|
+
? "current"
|
|
271
|
+
: step.key === "rip"
|
|
272
|
+
? "done"
|
|
273
|
+
: "upcoming",
|
|
274
|
+
}))}
|
|
275
|
+
/>
|
|
276
|
+
)
|
|
277
|
+
},
|
|
278
|
+
}
|
|
@@ -12,6 +12,7 @@ const {
|
|
|
12
12
|
Playground,
|
|
13
13
|
Interactive,
|
|
14
14
|
Responsive,
|
|
15
|
+
WizardNavigation,
|
|
15
16
|
} = composeStories(stories)
|
|
16
17
|
|
|
17
18
|
test("the sequence is an ordered list with a name", async () => {
|
|
@@ -142,3 +143,21 @@ test("a compact card can keep the horizontal ladder below cq-md", async () => {
|
|
|
142
143
|
).flexDirection,
|
|
143
144
|
).toBe("row")
|
|
144
145
|
})
|
|
146
|
+
|
|
147
|
+
test("wizard stages can be revisited, while upcoming stages cannot be skipped", async () => {
|
|
148
|
+
const { canvas, canvasElement } = await mountStory(
|
|
149
|
+
WizardNavigation,
|
|
150
|
+
)
|
|
151
|
+
await expect(
|
|
152
|
+
canvas.queryByRole("button", { name: "File" }),
|
|
153
|
+
).toBeNull()
|
|
154
|
+
await userEvent.click(
|
|
155
|
+
canvas.getByRole("button", { name: "Rip" }),
|
|
156
|
+
)
|
|
157
|
+
await expect(
|
|
158
|
+
canvas.getByRole("heading", {
|
|
159
|
+
name: /Rip In progress/,
|
|
160
|
+
}),
|
|
161
|
+
).toBeVisible()
|
|
162
|
+
await expectNoAxeViolations(canvasElement)
|
|
163
|
+
})
|
package/src/Stepper/Stepper.tsx
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { FLIP_KEY_ATTRIBUTE } from "@charcuterie/logic"
|
|
2
2
|
import type { ReactNode } from "react"
|
|
3
3
|
|
|
4
|
+
import { Button } from "../Button/Button.tsx"
|
|
4
5
|
import { toClassName } from "../toClassName.ts"
|
|
5
6
|
import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.tsx"
|
|
6
7
|
|
|
@@ -72,6 +73,8 @@ export type StepperProps = {
|
|
|
72
73
|
* vertical — a column cannot hold a list.
|
|
73
74
|
*/
|
|
74
75
|
readonly orientation?: StepperOrientation
|
|
76
|
+
/** Completed stages become buttons; the caller resets dependent answers. */
|
|
77
|
+
readonly onStepSelect?: (key: string) => void
|
|
75
78
|
readonly steps: readonly Step[]
|
|
76
79
|
}
|
|
77
80
|
|
|
@@ -114,6 +117,7 @@ export const Stepper = ({
|
|
|
114
117
|
isResponsive = true,
|
|
115
118
|
label,
|
|
116
119
|
orientation = "vertical",
|
|
120
|
+
onStepSelect,
|
|
117
121
|
steps,
|
|
118
122
|
}: StepperProps) => {
|
|
119
123
|
const Heading = `h${headingLevel}` as "h3"
|
|
@@ -174,6 +178,9 @@ export const Stepper = ({
|
|
|
174
178
|
* nobody reads it, which is why it is not opt-in.
|
|
175
179
|
*/
|
|
176
180
|
<li
|
|
181
|
+
aria-current={
|
|
182
|
+
status === "current" ? "step" : undefined
|
|
183
|
+
}
|
|
177
184
|
{...{ [FLIP_KEY_ATTRIBUTE]: step.key }}
|
|
178
185
|
className={toClassName(
|
|
179
186
|
"relative grid grid-cols-[auto_minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)] gap-x-3",
|
|
@@ -254,7 +261,16 @@ export const Stepper = ({
|
|
|
254
261
|
isCompact ? "text-xs" : "text-md",
|
|
255
262
|
)}
|
|
256
263
|
>
|
|
257
|
-
{
|
|
264
|
+
{onStepSelect && status === "done" ? (
|
|
265
|
+
<Button
|
|
266
|
+
appearance="ghost"
|
|
267
|
+
onClick={() => onStepSelect(step.key)}
|
|
268
|
+
>
|
|
269
|
+
{step.label}
|
|
270
|
+
</Button>
|
|
271
|
+
) : (
|
|
272
|
+
step.label
|
|
273
|
+
)}
|
|
258
274
|
|
|
259
275
|
{/* The status as a WORD. Four marker colours is
|
|
260
276
|
four colours as far as assistive technology is
|