@roadlittledawn/docs-design-system-react 0.2.2 → 0.3.0

package/dist/components/Collapser.d.ts

@@ -5,14 +5,22 @@ interface CollapserProps {
     /** Optional ID for the title element */
     id?: string;
     /**
-     * Whether the collapser should be open by default
+     * Whether the collapser should be open by default (uncontrolled)
      * @default false
      */
     defaultOpen?: boolean;
+    /**
+     * Controlled open state (used by CollapserGroup)
+     */
+    open?: boolean;
+    /**
+     * Callback when toggle is clicked (used by CollapserGroup)
+     */
+    onToggle?: () => void;
     /** Content to show/hide when toggling */
     children: ReactNode;
     /** Additional CSS classes */
     className?: string;
 }
-export declare function Collapser({ title, id, defaultOpen, children, className, }: CollapserProps): import("react/jsx-runtime").JSX.Element;
+export declare function Collapser({ title, id, defaultOpen, open: controlledOpen, onToggle, children, className, }: CollapserProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Collapser.js

@@ -2,19 +2,30 @@ import { jsx as _jsx, jsxs as _jsxs } 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, children = _a.children, _c = _a.className, className = _c === void 0 ? "" : _c;
-    var _d = useState(defaultOpen), isOpen = _d[0], setIsOpen = _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;
+    var _d = useState(defaultOpen), uncontrolledOpen = _d[0], setUncontrolledOpen = _d[1];
+    var isControlled = controlledOpen !== undefined;
+    var isOpen = isControlled ? controlledOpen : uncontrolledOpen;
     var _e = useState(undefined), height = _e[0], setHeight = _e[1];
     var contentRef = useRef(null);
     // Keyboard shortcuts: 's' or 'f' to show, 'h' to hide
-    useKeyPress(['s', 'f', 'h'], function (e) { return setIsOpen(e.key !== 'h'); });
+    useKeyPress(['s', 'f', 'h'], function (e) {
+        if (!isControlled) {
+            setUncontrolledOpen(e.key !== 'h');
+        }
+    });
     useEffect(function () {
         if (contentRef.current) {
             setHeight(contentRef.current.scrollHeight);
         }
     }, [children]);
     var toggleOpen = function () {
-        setIsOpen(!isOpen);
+        if (onToggle) {
+            onToggle();
+        }
+        else {
+            setUncontrolledOpen(!uncontrolledOpen);
+        }
     };
     var collapserClasses = ["dds-collapser", className]
         .filter(Boolean)

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

@@ -23,6 +23,6 @@ export declare const WithID: Story;
  */
 export declare const ComplexContent: Story;
 /**
- * Multiple collapsers in a FAQ-style layout.
+ * Multiple collapsers in a FAQ-style layout using CollapserGroup.
  */
 export declare const FAQExample: Story;

package/dist/components/Collapser.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Collapser } from './Collapser';
+import { CollapserGroup } from './CollapserGroup';
 /**
  * The Collapser component creates expandable/collapsible content sections with smooth animations.
  */
@@ -55,8 +56,8 @@ export var ComplexContent = {
     },
 };
 /**
- * Multiple collapsers in a FAQ-style layout.
+ * Multiple collapsers in a FAQ-style layout using CollapserGroup.
  */
 export var FAQExample = {
-    render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, 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", { 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." }) })] })); },
 };

package/dist/components/CollapserGroup.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface CollapserGroupProps {
+    children: React.ReactNode;
+    /** Spacing between collapsers (CSS gap value) */
+    spacing?: string;
+    /** Allow multiple collapsers to be open simultaneously */
+    allowMultiple?: boolean;
+    /** Index(es) of collapser(s) that should be open by default */
+    defaultOpen?: number | number[];
+    /** Callback when collapser open state changes */
+    onChange?: (openIndexes: number[]) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const CollapserGroup: React.FC<CollapserGroupProps>;

package/dist/components/CollapserGroup.js

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 () {
+        if (defaultOpen === undefined)
+            return [];
+        return Array.isArray(defaultOpen) ? defaultOpen : [defaultOpen];
+    }), openIndexes = _e[0], setOpenIndexes = _e[1];
+    var handleToggle = function (index) {
+        setOpenIndexes(function (prev) {
+            var next;
+            if (allowMultiple) {
+                next = prev.includes(index)
+                    ? prev.filter(function (i) { return i !== index; })
+                    : __spreadArray(__spreadArray([], prev, true), [index], false);
+            }
+            else {
+                next = prev.includes(index) ? [] : [index];
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(next);
+            return next;
+        });
+    };
+    return (_jsx("div", { className: "dds-collapser-group ".concat(className).trim(), style: { gap: spacing }, children: Children.map(children, function (child, index) {
+            if (!isValidElement(child))
+                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 child;
+        }) }));
+};
+CollapserGroup.displayName = 'CollapserGroup';

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

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CollapserGroup } from './CollapserGroup';
+/**
+ * CollapserGroup manages multiple Collapser components with consistent spacing
+ * and optional accordion behavior.
+ */
+declare const meta: Meta<typeof CollapserGroup>;
+export default meta;
+type Story = StoryObj<typeof CollapserGroup>;
+/**
+ * Basic group with default spacing, allowing multiple collapsers to be open.
+ */
+export declare const Basic: Story;
+/**
+ * Accordion mode - only one collapser can be open at a time.
+ */
+export declare const AccordionMode: Story;
+/**
+ * Custom spacing between collapsers.
+ */
+export declare const CustomSpacing: Story;
+/**
+ * One collapser open by default.
+ */
+export declare const DefaultOpen: Story;
+/**
+ * Multiple collapsers open by default.
+ */
+export declare const MultipleDefaultOpen: Story;

package/dist/components/CollapserGroup.stories.js

@@ -0,0 +1,77 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CollapserGroup } from './CollapserGroup';
+import { Collapser } from './Collapser';
+/**
+ * CollapserGroup manages multiple Collapser components with consistent spacing
+ * and optional accordion behavior.
+ */
+var meta = {
+    title: 'Components/CollapserGroup',
+    component: CollapserGroup,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: "\nCollapserGroup provides a container for multiple Collapser components with built-in spacing and accordion functionality.\n\n## When to Use\n\n- FAQ sections with multiple questions\n- Accordion-style navigation or content sections\n- Any grouped collapsible content that needs consistent spacing\n- When you want only one section open at a time (accordion mode)\n\n## When Not to Use\n\n- For a single Collapser (use Collapser directly)\n- When collapsers need independent styling or spacing\n\n## Accessibility\n\n- Maintains all Collapser accessibility features\n- Keyboard navigation works within the group\n- Accordion mode provides clear single-selection behavior\n        ",
+            },
+        },
+    },
+};
+export default meta;
+/**
+ * Basic group with default spacing, allowing multiple collapsers to be open.
+ */
+export var Basic = {
+    args: {
+        spacing: '0.5rem',
+        allowMultiple: true,
+    },
+    render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { 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." }) })] }))); },
+};
+/**
+ * Accordion mode - only one collapser can be open at a time.
+ */
+export var AccordionMode = {
+    args: {
+        allowMultiple: false,
+    },
+    render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { children: [_jsxs(Collapser, { title: "Installation", children: [_jsx("p", { children: "Install the package using npm or yarn:" }), _jsx("pre", { children: "npm install @roadlittledawn/docs-design-system" })] }), _jsxs(Collapser, { title: "Configuration", children: [_jsx("p", { children: "Import the CSS and components in your application:" }), _jsx("pre", { children: "import '@roadlittledawn/docs-design-system/dist/styles.css';" })] }), _jsxs(Collapser, { title: "Usage", children: [_jsx("p", { children: "Use the components in your React application:" }), _jsx("pre", { children: '<Button variant="primary">Click me</Button>' })] })] }))); },
+};
+/**
+ * Custom spacing between collapsers.
+ */
+export var CustomSpacing = {
+    args: {
+        spacing: '1.5rem',
+    },
+    render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { children: [_jsx(Collapser, { title: "Section 1", children: _jsx("p", { children: "Content with larger spacing between sections." }) }), _jsx(Collapser, { title: "Section 2", children: _jsx("p", { children: "This makes the layout more breathable." }) }), _jsx(Collapser, { title: "Section 3", children: _jsx("p", { children: "Useful for prominent content sections." }) })] }))); },
+};
+/**
+ * One collapser open by default.
+ */
+export var DefaultOpen = {
+    args: {
+        defaultOpen: 0,
+    },
+    render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { children: [_jsx(Collapser, { title: "Getting Started", children: _jsx("p", { children: "This section is open by default." }) }), _jsx(Collapser, { title: "Advanced Topics", children: _jsx("p", { children: "This section starts closed." }) }), _jsx(Collapser, { title: "API Reference", children: _jsx("p", { children: "This section also starts closed." }) })] }))); },
+};
+/**
+ * Multiple collapsers open by default.
+ */
+export var MultipleDefaultOpen = {
+    args: {
+        defaultOpen: [0, 2],
+    },
+    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." }) })] }))); },
+};

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from './components/Callout';
 export * from './components/Card';
 export * from './components/CardGrid';
 export * from './components/Collapser';
+export * from './components/CollapserGroup';
 export * from './components/CodeBlock';
 export * from './components/Typography';
 export * from './components/Heading';

package/dist/index.js

@@ -4,6 +4,7 @@ export * from './components/Callout';
 export * from './components/Card';
 export * from './components/CardGrid';
 export * from './components/Collapser';
+export * from './components/CollapserGroup';
 export * from './components/CodeBlock';
 export * from './components/Typography';
 export * from './components/Heading';

package/dist/styles.css

@@ -1012,6 +1012,13 @@ a.no-text-decoration {
   padding: var(--dds-collapser-content-padding);
   color: var(--dds-collapser-text);
 }
+.dds-collapser-group {
+  display: flex;
+  flex-direction: column;
+}
+.dds-collapser-group > .dds-collapser {
+  margin: 0;
+}
 .dds-code-block {
   border: 1px solid var(--dds-code-block-border);
   border-radius: var(--dds-code-block-radius);

package/package.json

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