@roadlittledawn/docs-design-system-react 0.6.2 → 0.7.0

package/dist/components/Collapser.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-interface CollapserProps {
+export interface CollapserProps {
     /** Title text or element displayed in the collapsible header */
     title: string | ReactNode;
     /** Optional ID for the title element */
@@ -21,6 +21,23 @@ interface CollapserProps {
     children: ReactNode;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * Alignment of the title within the header.
+     * Use 'right' for right-aligned titles, typically paired with an icon on the left.
+     * @default 'left'
+     */
+    align?: 'left' | 'right';
+    /**
+     * Optional icon or React element rendered on the left side of the header,
+     * before the title text. Useful for visual identification of each section.
+     */
+    icon?: ReactNode;
+    /**
+     * Numeric step label shown on the far left of the header.
+     * Automatically injected by `CollapserGroup` when `numbered` is true;
+     * can also be set manually on individual collapsers.
+     * Use `--dds-collapser-step-number-color` to customise its colour.
+     */
+    stepNumber?: number;
 }
-export declare function Collapser({ title, id, defaultOpen, open: controlledOpen, onToggle, children, className, }: CollapserProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Collapser({ title, id, defaultOpen, open: controlledOpen, onToggle, children, className, align, icon, stepNumber, }: CollapserProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Collapser.js

@@ -1,13 +1,13 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { useKeyPress } from "../hooks/useKeyPress";
 export function Collapser(_a) {
-    var title = _a.title, id = _a.id, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, controlledOpen = _a.open, onToggle = _a.onToggle, children = _a.children, _c = _a.className, className = _c === void 0 ? "" : _c;
-    var _d = useState(defaultOpen), uncontrolledOpen = _d[0], setUncontrolledOpen = _d[1];
+    var title = _a.title, id = _a.id, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, controlledOpen = _a.open, onToggle = _a.onToggle, children = _a.children, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.align, align = _d === void 0 ? 'left' : _d, icon = _a.icon, stepNumber = _a.stepNumber;
+    var _e = useState(defaultOpen), uncontrolledOpen = _e[0], setUncontrolledOpen = _e[1];
     var isControlled = controlledOpen !== undefined;
     var isOpen = isControlled ? controlledOpen : uncontrolledOpen;
-    var _e = useState(undefined), height = _e[0], setHeight = _e[1];
+    var _f = useState(undefined), height = _f[0], setHeight = _f[1];
     var contentRef = useRef(null);
     // Keyboard shortcuts: 's' or 'f' to show, 'h' to hide
     useKeyPress(['s', 'f', 'h'], function (e) {
@@ -28,10 +28,14 @@ export function Collapser(_a) {
             setUncontrolledOpen(!uncontrolledOpen);
         }
     };
-    var collapserClasses = ["dds-collapser", className]
+    var collapserClasses = [
+        "dds-collapser",
+        align === 'right' ? "dds-collapser--align-right" : "",
+        className,
+    ]
         .filter(Boolean)
         .join(" ");
-    return (_jsxs("div", { className: collapserClasses, children: [_jsxs("button", { onClick: toggleOpen, type: "button", className: "dds-collapser-button", "aria-expanded": isOpen, children: [_jsx("h5", { id: id, className: "dds-collapser-title", children: title }), _jsx("svg", { className: "dds-collapser-icon ".concat(isOpen ? "dds-collapser-icon-open" : ""), width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })] }), _jsx("div", { className: "dds-collapser-content-wrapper", style: {
+    return (_jsxs("div", { className: collapserClasses, children: [_jsxs("button", { onClick: toggleOpen, type: "button", className: "dds-collapser-button", "aria-expanded": isOpen, children: [stepNumber !== undefined && (_jsxs("span", { className: "dds-collapser-step-number", children: [stepNumber, "."] })), icon && (_jsx("span", { className: "dds-collapser-header-icon", "aria-hidden": "true", children: icon })), _jsx("h5", { id: id, className: "dds-collapser-title", children: title }), _jsx("svg", { className: "dds-collapser-icon ".concat(isOpen ? "dds-collapser-icon-open" : ""), width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })] }), _jsx("div", { className: "dds-collapser-content-wrapper", style: {
                     height: isOpen ? height : 0,
                 }, children: _jsx("div", { ref: contentRef, className: "dds-collapser-content", children: children }) })] }));
 }

package/dist/components/Collapser.stories.d.ts

@@ -18,11 +18,44 @@ export declare const DefaultOpen: Story;
  * Collapser with an ID for the title.
  */
 export declare const WithID: Story;
+/**
+ * Collapser with an icon rendered on the left side of the header.
+ * The icon prop accepts any React element — use your own icon component or SVG.
+ */
+export declare const WithIcon: Story;
+/**
+ * Collapser with the title right-aligned within the header.
+ * Use this for design layouts where the title should appear on the right
+ * and content (such as a step number or icon) anchors the left.
+ */
+export declare const RightAligned: Story;
+/**
+ * Collapser with both an icon and right-aligned title — matching the
+ * reference screenshot layout where an icon anchors the left and the
+ * title text flows to the right before the chevron.
+ */
+export declare const WithIconRightAligned: Story;
 /**
  * Collapser containing complex content.
  */
 export declare const ComplexContent: Story;
+/**
+ * Shows all four header layout variants side-by-side for visual comparison:
+ * default left-aligned, left-aligned with icon, right-aligned, and right-aligned with icon.
+ */
+export declare const AllVariants: Story;
 /**
  * Multiple collapsers in a FAQ-style layout using CollapserGroup.
  */
 export declare const FAQExample: Story;
+/**
+ * Example matching the reference screenshot: collapsers in a group where each
+ * has a distinct icon on the left and right-aligned title text.
+ */
+export declare const IconGroupExample: Story;
+/**
+ * CollapserGroup with `numbered` auto-numbers each entry.
+ * Matches the reference screenshot pattern: step number + icon on the left,
+ * title right-aligned, chevron on the far right.
+ */
+export declare const NumberedGroup: Story;

package/dist/components/Collapser.stories.js

@@ -1,6 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Collapser } from './Collapser';
 import { CollapserGroup } from './CollapserGroup';
+// Spoofed icon components for demonstration purposes
+// (replace with your own Icon component when available)
+var IconBook = function () { return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M4 19.5A2.5 2.5 0 0 1 6.5 17H20" }), _jsx("path", { d: "M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" })] })); };
+var IconBolt = function () { return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) })); };
+var IconStar = function () { return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) })); };
+var IconSettings = function () { return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })] })); };
 /**
  * The Collapser component creates expandable/collapsible content sections with smooth animations.
  */
@@ -22,6 +28,20 @@ var meta = {
             description: 'Whether the collapser should be open by default (uncontrolled mode).',
             table: { defaultValue: { summary: 'false' } },
         },
+        align: {
+            control: 'radio',
+            options: ['left', 'right'],
+            description: "Alignment of the title within the header. Use 'right' for right-aligned titles, typically paired with an icon on the left.",
+            table: { defaultValue: { summary: 'left' } },
+        },
+        icon: {
+            control: false,
+            description: 'Optional icon or React element rendered on the left side of the header, before the title text.',
+        },
+        stepNumber: {
+            control: 'number',
+            description: 'Numeric step label shown on the far left. Auto-injected by `CollapserGroup` when `numbered` is true. Colour controlled via `--dds-collapser-step-number-color`.',
+        },
         children: {
             control: false,
             description: 'Content to show/hide when toggling.',
@@ -35,7 +55,7 @@ var meta = {
     parameters: {
         docs: {
             description: {
-                component: "\nThe Collapser component allows users to show and hide content sections to reduce visual clutter.\n\n## When to Use\n\n- For FAQ sections where answers can be toggled\n- To hide advanced options or detailed information\n- For progressive disclosure of content\n- When you have lengthy content that doesn't need to be visible all the time\n\n## When Not to Use\n\n- For primary navigation (use proper navigation components)\n- For critical information that should always be visible\n- When most users will need to expand all sections (just show the content)\n\n## Accessibility\n\n- Uses proper ARIA attributes (aria-expanded)\n- Keyboard accessible with Enter and Space keys\n- Supports additional keyboard shortcuts: 's' or 'f' to show, 'h' to hide\n- Screen reader friendly\n\n## Keyboard Shortcuts\n\n- **s** or **f**: Show/expand the content\n- **h**: Hide/collapse the content\n- **Enter** or **Space**: Toggle expand/collapse\n        ",
+                component: "\nThe Collapser component allows users to show and hide content sections to reduce visual clutter.\n\n## When to Use\n\n- For FAQ sections where answers can be toggled\n- To hide advanced options or detailed information\n- For progressive disclosure of content\n- When you have lengthy content that doesn't need to be visible all the time\n\n## When Not to Use\n\n- For primary navigation (use proper navigation components)\n- For critical information that should always be visible\n- When most users will need to expand all sections (just show the content)\n\n## Accessibility\n\n- Uses proper ARIA attributes (aria-expanded)\n- Keyboard accessible with Enter and Space keys\n- Supports additional keyboard shortcuts: 's' or 'f' to show, 'h' to hide\n- Screen reader friendly\n- Icons passed via the `icon` prop should be wrapped in a container with `aria-hidden=\"true\"` since the title provides the accessible label\n\n## Keyboard Shortcuts\n\n- **s** or **f**: Show/expand the content\n- **h**: Hide/collapse the content\n- **Enter** or **Space**: Toggle expand/collapse\n\n## Customising Step Numbers\n\nOverride the CSS custom property to change the step number colour:\n\n```css\n.my-steps {\n  --dds-collapser-step-number-color: #7c3aed;\n}\n```\n        ",
             },
         },
     },
@@ -91,6 +111,63 @@ export var WithID = {
         },
     },
 };
+/**
+ * Collapser with an icon rendered on the left side of the header.
+ * The icon prop accepts any React element — use your own icon component or SVG.
+ */
+export var WithIcon = {
+    args: {
+        title: 'Documentation guides',
+        icon: _jsx(IconBook, {}),
+        children: (_jsxs("p", { style: { color: 'var(--dds-collapser-text)' }, children: ["Icons help users quickly identify sections at a glance. Pass any React element to the ", _jsx("code", { children: "icon" }), " prop to display it on the left side of the header."] })),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Collapser title=\"Documentation guides\" icon={<IconBook />}>\n  <p>\n    Icons help users quickly identify sections at a glance. Pass any React\n    element to the icon prop to display it on the left side of the header.\n  </p>\n</Collapser>",
+            },
+        },
+    },
+};
+/**
+ * Collapser with the title right-aligned within the header.
+ * Use this for design layouts where the title should appear on the right
+ * and content (such as a step number or icon) anchors the left.
+ */
+export var RightAligned = {
+    args: {
+        title: 'Right-aligned title',
+        align: 'right',
+        children: (_jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "The title is right-aligned in the header, with the chevron remaining on the far right. Long titles will wrap to a new line on small screens rather than colliding with other elements." })),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Collapser title=\"Right-aligned title\" align=\"right\">\n  <p>\n    The title is right-aligned in the header, with the chevron remaining on\n    the far right.\n  </p>\n</Collapser>",
+            },
+        },
+    },
+};
+/**
+ * Collapser with both an icon and right-aligned title — matching the
+ * reference screenshot layout where an icon anchors the left and the
+ * title text flows to the right before the chevron.
+ */
+export var WithIconRightAligned = {
+    args: {
+        title: 'Quick start guide',
+        align: 'right',
+        icon: _jsx(IconBolt, {}),
+        children: (_jsxs("p", { style: { color: 'var(--dds-collapser-text)' }, children: ["Combining ", _jsx("code", { children: "icon" }), " and ", _jsx("code", { children: "align=\"right\"" }), " produces a layout where the icon anchors the left edge, the title flows to the right, and the chevron stays at the far right."] })),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Collapser title=\"Quick start guide\" align=\"right\" icon={<IconBolt />}>\n  <p>\n    Combining icon and align=\"right\" produces a layout where the icon anchors\n    the left edge, the title flows to the right, and the chevron stays at the far right.\n  </p>\n</Collapser>",
+            },
+        },
+    },
+};
 /**
  * Collapser containing complex content.
  */
@@ -107,6 +184,20 @@ export var ComplexContent = {
         },
     },
 };
+/**
+ * Shows all four header layout variants side-by-side for visual comparison:
+ * default left-aligned, left-aligned with icon, right-aligned, and right-aligned with icon.
+ */
+export var AllVariants = {
+    parameters: {
+        docs: {
+            source: {
+                code: "{/* Left-aligned (default) */}\n<Collapser title=\"Left-aligned (default)\">\n  <p>The standard layout \u2014 title on the left, chevron on the right.</p>\n</Collapser>\n\n{/* Left-aligned with icon */}\n<Collapser title=\"Left-aligned with icon\" icon={<IconBook />}>\n  <p>An icon appears to the left of the title.</p>\n</Collapser>\n\n{/* Right-aligned */}\n<Collapser title=\"Right-aligned title\" align=\"right\">\n  <p>Title text flows to the right. Chevron stays at the far right.</p>\n</Collapser>\n\n{/* Right-aligned with icon */}\n<Collapser title=\"Right-aligned with icon\" align=\"right\" icon={<IconBolt />}>\n  <p>Icon anchors the left, title flows right, chevron at the far right.</p>\n</Collapser>",
+            },
+        },
+    },
+    render: function () { return (_jsxs("div", { children: [_jsx(Collapser, { title: "Left-aligned (default)", children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "The standard layout \u2014 title on the left, chevron on the right." }) }), _jsx(Collapser, { title: "Left-aligned with icon", icon: _jsx(IconBook, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "An icon appears to the left of the title." }) }), _jsx(Collapser, { title: "Right-aligned title", align: "right", children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Title text flows to the right. Chevron stays at the far right." }) }), _jsx(Collapser, { title: "Right-aligned with icon", align: "right", icon: _jsx(IconBolt, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Icon anchors the left, title flows right, chevron at the far right." }) })] })); },
+};
 /**
  * Multiple collapsers in a FAQ-style layout using CollapserGroup.
  */
@@ -118,5 +209,34 @@ export var FAQExample = {
             },
         },
     },
-    render: function () { return (_jsxs(CollapserGroup, { children: [_jsx(Collapser, { title: "What is this documentation system?", children: _jsx("p", { children: "This is a comprehensive documentation design system that provides reusable components and guidelines for creating effective technical documentation." }) }), _jsx(Collapser, { title: "How do I get started?", children: _jsx("p", { children: "Start by installing the component package, then explore the components in Storybook to understand their usage and configuration options." }) }), _jsx(Collapser, { title: "Can I customize the components?", children: _jsx("p", { children: "Yes! All components accept a className prop for custom styling, and you can override the default styles using CSS." }) }), _jsx(Collapser, { title: "Is this accessible?", children: _jsx("p", { children: "Accessibility is a core principle. All components follow WAI-ARIA best practices and are keyboard navigable." }) })] })); },
+    render: function () { return (_jsxs(CollapserGroup, { children: [_jsx(Collapser, { title: "What is this documentation system?", children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "This is a comprehensive documentation design system that provides reusable components and guidelines for creating effective technical documentation." }) }), _jsx(Collapser, { title: "How do I get started?", children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Start by installing the component package, then explore the components in Storybook to understand their usage and configuration options." }) }), _jsx(Collapser, { title: "Can I customize the components?", children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Yes! All components accept a className prop for custom styling, and you can override the default styles using CSS." }) }), _jsx(Collapser, { title: "Is this accessible?", children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Accessibility is a core principle. All components follow WAI-ARIA best practices and are keyboard navigable." }) })] })); },
+};
+/**
+ * Example matching the reference screenshot: collapsers in a group where each
+ * has a distinct icon on the left and right-aligned title text.
+ */
+export var IconGroupExample = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<CollapserGroup>\n  <Collapser title=\"Getting started\" align=\"right\" icon={<IconBook />}>\n    <p>Learn the basics and set up your environment.</p>\n  </Collapser>\n  <Collapser title=\"Quick actions\" align=\"right\" icon={<IconBolt />}>\n    <p>Discover shortcuts and power-user features.</p>\n  </Collapser>\n  <Collapser title=\"Highlights\" align=\"right\" icon={<IconStar />}>\n    <p>See what makes this system stand out.</p>\n  </Collapser>\n  <Collapser title=\"Configuration\" align=\"right\" icon={<IconSettings />}>\n    <p>Customise the system to fit your workflow.</p>\n  </Collapser>\n</CollapserGroup>",
+            },
+        },
+    },
+    render: function () { return (_jsxs(CollapserGroup, { children: [_jsx(Collapser, { title: "Getting started", align: "right", icon: _jsx(IconBook, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Learn the basics and set up your environment." }) }), _jsx(Collapser, { title: "Quick actions", align: "right", icon: _jsx(IconBolt, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Discover shortcuts and power-user features." }) }), _jsx(Collapser, { title: "Highlights", align: "right", icon: _jsx(IconStar, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "See what makes this system stand out." }) }), _jsx(Collapser, { title: "Configuration", align: "right", icon: _jsx(IconSettings, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Customise the system to fit your workflow." }) })] })); },
+};
+/**
+ * CollapserGroup with `numbered` auto-numbers each entry.
+ * Matches the reference screenshot pattern: step number + icon on the left,
+ * title right-aligned, chevron on the far right.
+ */
+export var NumberedGroup = {
+    parameters: {
+        docs: {
+            source: {
+                code: "{/* numbered=true on CollapserGroup auto-injects stepNumber into each child */}\n<CollapserGroup numbered>\n  <Collapser title=\"Decrease pain\" align=\"right\" icon={<IconBolt />}>\n    <p>Step numbers are injected automatically by CollapserGroup.</p>\n  </Collapser>\n  <Collapser title=\"Align your workflow\" align=\"right\" icon={<IconBook />}>\n    <p>Combine numbered with icons and right-aligned titles.</p>\n  </Collapser>\n  <Collapser title=\"Learn to move\" align=\"right\" icon={<IconStar />}>\n    <p>Each entry gets a sequential step number on the far left.</p>\n  </Collapser>\n  <Collapser title=\"Configuration\" align=\"right\" icon={<IconSettings />}>\n    <p>Customise the system to fit your workflow.</p>\n  </Collapser>\n</CollapserGroup>",
+            },
+        },
+    },
+    render: function () { return (_jsxs(CollapserGroup, { numbered: true, children: [_jsx(Collapser, { title: "Decrease pain", align: "right", icon: _jsx(IconBolt, {}), children: _jsxs("p", { style: { color: 'var(--dds-collapser-text)' }, children: ["Step numbers are injected automatically by CollapserGroup when", ' ', _jsx("code", { children: "numbered" }), " is true."] }) }), _jsx(Collapser, { title: "Align your workflow", align: "right", icon: _jsx(IconBook, {}), children: _jsxs("p", { style: { color: 'var(--dds-collapser-text)' }, children: ["Combine ", _jsx("code", { children: "numbered" }), " with icons and right-aligned titles for a clean annotated-list layout."] }) }), _jsx(Collapser, { title: "Learn to move", align: "right", icon: _jsx(IconStar, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Each entry gets a sequential step number on the far left." }) }), _jsx(Collapser, { title: "Configuration", align: "right", icon: _jsx(IconSettings, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Customise the system to fit your workflow." }) })] })); },
 };

package/dist/components/CollapserGroup.d.ts

@@ -11,5 +11,11 @@ export interface CollapserGroupProps {
     onChange?: (openIndexes: number[]) => void;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * Automatically prefix each collapser header with a sequential step number (1, 2, 3…).
+     * The number is injected via the `stepNumber` prop on each `Collapser` child.
+     * @default false
+     */
+    numbered?: boolean;
 }
 export declare const CollapserGroup: React.FC<CollapserGroupProps>;

package/dist/components/CollapserGroup.js

@@ -23,12 +23,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, Children, cloneElement, isValidElement } from 'react';
 import { Collapser } from './Collapser';
 export var CollapserGroup = function (_a) {
-    var children = _a.children, _b = _a.spacing, spacing = _b === void 0 ? '0.5rem' : _b, _c = _a.allowMultiple, allowMultiple = _c === void 0 ? true : _c, defaultOpen = _a.defaultOpen, onChange = _a.onChange, _d = _a.className, className = _d === void 0 ? '' : _d;
-    var _e = useState(function () {
+    var children = _a.children, _b = _a.spacing, spacing = _b === void 0 ? '0.5rem' : _b, _c = _a.allowMultiple, allowMultiple = _c === void 0 ? true : _c, defaultOpen = _a.defaultOpen, onChange = _a.onChange, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.numbered, numbered = _e === void 0 ? false : _e;
+    var _f = useState(function () {
         if (defaultOpen === undefined)
             return [];
         return Array.isArray(defaultOpen) ? defaultOpen : [defaultOpen];
-    }), openIndexes = _e[0], setOpenIndexes = _e[1];
+    }), openIndexes = _f[0], setOpenIndexes = _f[1];
     var handleToggle = function (index) {
         setOpenIndexes(function (prev) {
             var next;
@@ -49,7 +49,7 @@ export var CollapserGroup = function (_a) {
                 return child;
             // Only inject props if child is a Collapser component
             if (child.type === Collapser) {
-                return cloneElement(child, __assign(__assign({}, child.props), { open: openIndexes.includes(index), onToggle: function () { return handleToggle(index); } }));
+                return cloneElement(child, __assign(__assign(__assign({}, child.props), { open: openIndexes.includes(index), onToggle: function () { return handleToggle(index); } }), (numbered ? { stepNumber: index + 1 } : {})));
             }
             return child;
         }) }));

package/dist/components/CollapserGroup.stories.d.ts

@@ -27,3 +27,10 @@ export declare const DefaultOpen: Story;
  * Multiple collapsers open by default.
  */
 export declare const MultipleDefaultOpen: Story;
+/**
+ * Setting `numbered` on CollapserGroup automatically prefixes each collapser header
+ * with a sequential step number (1., 2., …), closely matching the reference screenshot
+ * with number + icon on the left and right-aligned title text.
+ * Customise the number colour with `--dds-collapser-step-number-color`.
+ */
+export declare const NumberedGroup: Story;

package/dist/components/CollapserGroup.stories.js

@@ -12,6 +12,11 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CollapserGroup } from './CollapserGroup';
 import { Collapser } from './Collapser';
+// Spoofed icons for the NumberedGroup story (replace with your Icon component when available)
+var IconBolt = function () { return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) })); };
+var IconBook = function () { return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M4 19.5A2.5 2.5 0 0 1 6.5 17H20" }), _jsx("path", { d: "M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" })] })); };
+var IconStar = function () { return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) })); };
+var IconSettings = function () { return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })] })); };
 /**
  * CollapserGroup manages multiple Collapser components with consistent spacing
  * and optional accordion behavior.
@@ -48,6 +53,11 @@ var meta = {
             description: 'Additional CSS classes.',
             table: { defaultValue: { summary: '""' } },
         },
+        numbered: {
+            control: 'boolean',
+            description: 'Automatically prefix each collapser header with a sequential step number (1, 2, 3…). Pairs well with `icon` and `align="right"` on child collapsers.',
+            table: { defaultValue: { summary: 'false' } },
+        },
     },
     parameters: {
         docs: {
@@ -139,3 +149,22 @@ export var MultipleDefaultOpen = {
     },
     render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { children: [_jsx(Collapser, { title: "Introduction", children: _jsx("p", { children: "This section is open by default." }) }), _jsx(Collapser, { title: "Installation", children: _jsx("p", { children: "This section starts closed." }) }), _jsx(Collapser, { title: "Quick Start", children: _jsx("p", { children: "This section is also open by default." }) })] }))); },
 };
+/**
+ * Setting `numbered` on CollapserGroup automatically prefixes each collapser header
+ * with a sequential step number (1., 2., …), closely matching the reference screenshot
+ * with number + icon on the left and right-aligned title text.
+ * Customise the number colour with `--dds-collapser-step-number-color`.
+ */
+export var NumberedGroup = {
+    args: {
+        numbered: true,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CollapserGroup numbered>\n  <Collapser title=\"Decrease pain\" align=\"right\" icon={<IconBolt />}>\n    <p>Step numbers are injected automatically \u2014 no extra props needed on each item.</p>\n  </Collapser>\n  <Collapser title=\"Align your workflow\" align=\"right\" icon={<IconBook />}>\n    <p>Combine numbered with icons and right-aligned titles.</p>\n  </Collapser>\n  <Collapser title=\"Learn to move\" align=\"right\" icon={<IconStar />}>\n    <p>Each entry gets a sequential step number on the far left.</p>\n  </Collapser>\n  <Collapser title=\"Build strength\" align=\"right\" icon={<IconSettings />}>\n    <p>Customise the number colour with --dds-collapser-step-number-color.</p>\n  </Collapser>\n</CollapserGroup>",
+            },
+        },
+    },
+    render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { children: [_jsx(Collapser, { title: "Decrease pain", align: "right", icon: _jsx(IconBolt, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Step numbers are injected automatically \u2014 no extra props needed on each item." }) }), _jsx(Collapser, { title: "Align your workflow", align: "right", icon: _jsx(IconBook, {}), children: _jsxs("p", { style: { color: 'var(--dds-collapser-text)' }, children: ["Combine ", _jsx("code", { children: "numbered" }), " with icons and right-aligned titles for a clean annotated-list layout."] }) }), _jsx(Collapser, { title: "Learn to move", align: "right", icon: _jsx(IconStar, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Each entry gets a sequential step number on the far left." }) }), _jsx(Collapser, { title: "Build strength", align: "right", icon: _jsx(IconSettings, {}), children: _jsxs("p", { style: { color: 'var(--dds-collapser-text)' }, children: ["Customise the number colour with ", _jsx("code", { children: "--dds-collapser-step-number-color" }), "."] }) })] }))); },
+};

package/dist/styles.css

@@ -207,8 +207,10 @@
   --dds-collapser-button-padding: 0.75rem; /* p-3 */
   --dds-collapser-button-hover-bg: #f9fafb; /* gray-50 */
   --dds-collapser-icon-color: #6b7280; /* gray-500 */
+  --dds-collapser-step-number-color: #6b7280; /* gray-500 — override to customise step numbers */
   --dds-collapser-text: #374151; /* gray-700 */
   --dds-collapser-content-padding: 1rem; /* p-4 */
+  --dds-collapser-header-gap: 0.5rem;
 
   /* Tabs */
   --dds-tabs-margin: 1rem 0;
@@ -342,6 +344,7 @@
   --dds-collapser-border: #4b5563; /* gray-600 */
   --dds-collapser-button-hover-bg: rgba(255, 255, 255, 0.05);
   --dds-collapser-icon-color: #9ca3af; /* gray-400 */
+  --dds-collapser-step-number-color: #9ca3af;
   --dds-collapser-text: #e5e7eb; /* gray-200 */
 
   /* Tabs */
@@ -497,6 +500,7 @@
     --dds-collapser-border: #4b5563;
     --dds-collapser-button-hover-bg: rgba(255, 255, 255, 0.05);
     --dds-collapser-icon-color: #9ca3af;
+    --dds-collapser-step-number-color: #9ca3af;
     --dds-collapser-text: #e5e7eb;
 
     /* Tabs */
@@ -652,6 +656,7 @@
   --dds-collapser-border: #4b5563;
   --dds-collapser-button-hover-bg: rgba(255, 255, 255, 0.05);
   --dds-collapser-icon-color: #9ca3af;
+  --dds-collapser-step-number-color: #9ca3af;
   --dds-collapser-text: #e5e7eb;
 
   /* CodeBlock */
@@ -1101,6 +1106,7 @@ a.no-text-decoration {
   padding: var(--dds-collapser-button-padding);
   display: flex;
   align-items: center;
+  gap: var(--dds-collapser-header-gap);
   transition: var(--dds-transition-colors);
   border: none;
   background: transparent;
@@ -1112,6 +1118,18 @@ a.no-text-decoration {
   background-color: var(--dds-collapser-button-hover-bg);
   outline: none;
 }
+.dds-collapser-step-number {
+  flex-shrink: 0;
+  min-width: 1.5em;
+  font-variant-numeric: tabular-nums;
+  color: var(--dds-collapser-step-number-color);
+}
+.dds-collapser-header-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--dds-collapser-icon-color);
+}
 .dds-collapser-title {
   display: flex;
   align-items: center;
@@ -1120,12 +1138,18 @@ a.no-text-decoration {
   margin: 0;
   font-weight: bold;
   color: var(--dds-heading-color);
+  word-break: break-word;
+  min-width: 0;
+}
+.dds-collapser--align-right .dds-collapser-title {
+  justify-content: flex-end;
+  text-align: right;
 }
 .dds-collapser-icon {
   margin-left: auto;
+  flex-shrink: 0;
   transition: transform 0.3s ease;
   color: var(--dds-collapser-icon-color);
-  flex-shrink: 0;
 }
 .dds-collapser-icon-open {
   transform: rotate(180deg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadlittledawn/docs-design-system-react",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "license": "MIT",
   "description": "React components for documentation design system",
   "repository": {