@arbor-education/design-system.components 0.15.0 → 0.16.0

package/dist/components/section/Section.stories.js

@@ -1,71 +1,509 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Section } from './Section';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
+import { fn } from 'storybook/test';
 import { Row } from '../row/Row';
+import { Section } from './Section';
+// ---------------------------------------------------------------------------
+// Content strings for the custom DocsPage
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = [
+    '`Section` is a structural layout component that wraps a labelled content region.',
+    'It renders a semantic `<section>` element with an optional title heading, an optional action button,',
+    'and optional collapse/expand behaviour.',
+    'Sections can be nested to create hierarchical content structures — nested sections automatically',
+    'lose their horizontal padding to maintain visual rhythm.',
+].join(' ');
+const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tweak any prop to see the story update in real time.';
+const USAGE_GUIDANCE = [
+    '### When to use',
+    '',
+    '- Grouping related content within a page or panel under a descriptive heading (e.g. "Personal Details", "Contact Information").',
+    '- Providing a collapsible region where space is at a premium and the content can reasonably be hidden by default.',
+    '- Pairing with an action button in the heading to give quick access to a related action (e.g. "Edit", "Add").',
+    '- Nesting sections to model a parent/child hierarchy — e.g. a "Student Profile" section containing "Personal Details" and "Academic" sub-sections.',
+    '',
+    '---',
+    '',
+    '### When NOT to use',
+    '',
+    '| Situation | Use instead |',
+    '|---|---|',
+    '| Full-page layout regions | Native `<main>`, `<aside>`, or `<article>` elements |',
+    '| Overlay or modal content | [`Modal`](?path=/docs/components-modals-modal--docs) or [`Slideover`](?path=/docs/components-slideover--docs) |',
+    '| Tabbed content panels | A tab component with panel regions |',
+    '| Purely decorative grouping with no heading | A plain `<div>` — `Section` always renders a heading element |',
+].join('\n');
+const DEVELOPER_NOTES = [
+    '### `collapsed` is initial state only',
+    '',
+    'The `collapsed` prop sets the **initial** collapsed state — the component becomes self-managed (uncontrolled) after mount.',
+    '`Section` owns the expanded/collapsed state internally via `useState(initialCollapsed)`.',
+    'You cannot control the expanded state from outside after the component has mounted.',
+    'If you need fully controlled behaviour, you will need a custom implementation.',
+    '',
+    '---',
+    '',
+    '### `headingLevel` defaults to `1` — use with care',
+    '',
+    '`headingLevel` defaults to `1`, which renders an `<h1>`. Most pages should have only one `<h1>`.',
+    'Always set an explicit `headingLevel` appropriate to the heading hierarchy of the page.',
+    'Use `2` for top-level sections on a page that already has an `<h1>`, and `3` or `4` for nested sub-sections.',
+    '',
+    '---',
+    '',
+    '### Button props must all be provided together',
+    '',
+    'The action button only renders when `buttonText` is provided.',
+    'When adding a button, always supply all four props together: `buttonText`, `buttonOnClick`, `buttonVariant`, and `buttonSize`.',
+    'If any are omitted, the `Button` component falls back to its own defaults, which may produce unexpected visual results.',
+    '',
+    '---',
+    '',
+    '### Accessibility',
+    '',
+    '- The `<section>` renders with a hardcoded `aria-label="section"` to give it an implicit `role="region"`. This label is not configurable.',
+    '- When `collapsible` is `true`, a `<button>` with `aria-expanded` is rendered in the heading — this is the accessible toggle.',
+    '- The heading element gains `tabIndex={0}` and responds to **Enter** and **Space** when collapsible.',
+    '- Title icons should always include `titleIconScreenReaderText` unless they are purely decorative and the title fully describes the section.',
+    '',
+    '---',
+    '',
+    '### TypeScript types',
+    '',
+    '```ts',
+    "import { Section } from '@arbor-education/design-system.components';",
+    '',
+    'type SectionProps = Section.Props;',
+    '```',
+].join('\n');
+const RELATED_COMPONENTS = [
+    '## Related components',
+    '',
+    '[Row](?path=/docs/components-row--docs) · [Card](?path=/docs/components-card--docs) · [Heading](?path=/docs/components-heading--docs)',
+].join('\n');
+// ---------------------------------------------------------------------------
+// Custom DocsPage
+// ---------------------------------------------------------------------------
+function SectionDocsPage() {
+    return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(Markdown, { children: PROPS_INTRO }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
+}
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
 const meta = {
     title: 'Components/Section',
     component: Section,
-    globals: {
-        backgrounds: { value: 'dark' },
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: {
+            page: SectionDocsPage,
+        },
     },
-};
-export const Default = {
-    args: {
-        title: 'titleValue',
-        children: [_jsx("p", { children: "Sunt consectetur esse labore dolor consequat tempor dolor incididunt. Ullamco veniam ex enim consequat esse. Qui aute consequat dolore dolore ipsum commodo magna minim consectetur deserunt veniam in ipsum. Aute veniam do mollit cupidatat laboris. Laborum nisi est qui et eiusmod. Enim aliqua quis officia ut eiusmod quis dolore id commodo ipsum cillum sunt adipisicing laboris. Et non est sunt cillum ipsum." }, 1)],
+    argTypes: {
+        title: {
+            description: 'Heading text rendered at the top of the section.',
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        headingLevel: {
+            description: [
+                'The HTML heading level rendered for the section title.',
+                'Defaults to `1` (an `<h1>`) — always set this explicitly to match the page heading hierarchy.',
+                'Use `2` for top-level sections, `3` or `4` for nested sub-sections.',
+            ].join(' '),
+            control: 'select',
+            options: [1, 2, 3, 4],
+            table: {
+                type: { summary: '1 | 2 | 3 | 4' },
+                defaultValue: { summary: '1' },
+            },
+        },
+        titleIconName: {
+            description: [
+                'Icon rendered immediately after the title text.',
+                'Pass `titleIconScreenReaderText` if the icon carries semantic meaning.',
+            ].join(' '),
+            control: 'text',
+            table: {
+                type: { summary: 'IconName' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        titleIconColor: {
+            description: 'CSS colour value applied to the title icon (e.g. `var(--color-brand-600)` or a hex string).',
+            control: 'color',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        titleIconScreenReaderText: {
+            description: [
+                'Accessible label for the title icon.',
+                'Omit only when the icon is purely decorative and the title already conveys full meaning.',
+            ].join(' '),
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        collapsible: {
+            description: [
+                'When `true`, the section heading becomes a toggle.',
+                'A chevron button with `aria-expanded` is rendered and the section contents can be shown or hidden.',
+                'Keyboard users can toggle with **Enter** or **Space**.',
+            ].join(' '),
+            control: 'boolean',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        collapsed: {
+            description: [
+                '**Initial** collapsed state when `collapsible` is `true`.',
+                'This prop sets the state at mount — the component is uncontrolled after that.',
+                'Changing this prop after mount has no effect.',
+            ].join(' '),
+            control: 'boolean',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        buttonText: {
+            description: [
+                'Label for the action button rendered in the section heading.',
+                'Must be paired with `buttonOnClick`, `buttonVariant`, and `buttonSize`.',
+            ].join(' '),
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        buttonOnClick: {
+            description: 'Click handler for the heading action button.',
+            action: 'buttonOnClick',
+            control: false,
+            table: {
+                type: { summary: 'MouseEventHandler<HTMLButtonElement>' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        buttonVariant: {
+            description: 'Visual variant for the heading action button. Always supply when `buttonText` is set.',
+            control: 'select',
+            options: ['primary', 'secondary', 'tertiary', 'primary-destructive', 'secondary-destructive', 'tertiary-destructive', 'ghost'],
+            table: {
+                type: { summary: "'primary' | 'secondary' | 'tertiary' | 'primary-destructive' | 'secondary-destructive' | 'tertiary-destructive' | 'ghost'" },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        buttonSize: {
+            description: "Size of the heading action button. Always supply when `buttonText` is set. Use `'S'` to keep it visually lightweight alongside the title.",
+            control: 'select',
+            options: ['S', 'M', 'L'],
+            table: {
+                type: { summary: "'S' | 'M' | 'L'" },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        className: {
+            description: 'Additional CSS class names applied to the root `<section>` element.',
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        children: {
+            description: [
+                'Content rendered inside the section body.',
+                'Typically `Row` components, nested `Section` components, or any React node.',
+            ].join(' '),
+            control: false,
+            table: {
+                type: { summary: 'ReactNode' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
     },
 };
-export const NestedSections = {
-    args: {
-        title: 'Parent Section',
-        collapsible: true,
-        children: [
-            _jsx(Section, { title: "Sub-section 1", collapsible: true, children: _jsx("p", { children: "Eu nisi dolore qui irure irure nulla aliqua commodo non sint dolor consectetur. Ullamco dolore ut exercitation ad cupidatat ipsum. Nisi proident esse nisi ullamco irure incididunt eiusmod fugiat est culpa Lorem. Dolor esse ut minim magna. In qui fugiat non nulla eu mollit enim excepteur consequat qui consequat occaecat aliquip adipisicing. Eu est nisi irure laboris culpa amet consectetur irure quis duis." }) }, 1),
-            _jsx(Section, { title: "Sub-section 2", collapsible: true, children: _jsx("p", { children: "Eu nisi dolore qui irure irure nulla aliqua commodo non sint dolor consectetur. Ullamco dolore ut exercitation ad cupidatat ipsum. Nisi proident esse nisi ullamco irure incididunt eiusmod fugiat est culpa Lorem. Dolor esse ut minim magna. In qui fugiat non nulla eu mollit enim excepteur consequat qui consequat occaecat aliquip adipisicing. Eu est nisi irure laboris culpa amet consectetur irure quis duis." }) }, 2),
-        ],
+export default meta;
+// ---------------------------------------------------------------------------
+// Helper
+// ---------------------------------------------------------------------------
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: { ...story.parameters?.docs, description: { story: description } },
     },
-};
-export const WithRows = {
+});
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+export const Default = withDescription({
     args: {
         title: 'Student Details',
-        children: [
-            _jsx(Row, { label: "First Name", value: "Jacob" }, 1),
-            _jsx(Row, { label: "Last Name", value: "Black" }, 2),
-            _jsx(Row, { label: "Year Group", value: "Year 10", note: "2024/2025" }, 3),
-            _jsx(Row, { label: "Form Group", value: "10A" }, 4),
-        ],
+        headingLevel: 2,
+        children: (_jsxs("p", { children: ["Section content goes here. Add", _jsx("code", { children: "Row" }), ' ', "components, nested", _jsx("code", { children: "Section" }), ' ', "components, or any content relevant to the section topic."] })),
     },
-};
-export const WithClickableRows = {
-    args: {
-        title: 'Quick Links',
-        buttonText: 'Edit',
-        children: [
-            _jsx(Row, { label: "Attendance", value: "96%", note: "Above target", onClick: () => { console.log('click!'); } }, 1),
-            _jsx(Row, { label: "Behaviour", value: "3 positive points", onClick: () => { console.log('click!'); } }, 2),
-            _jsx(Row, { label: "Assessment", value: "On track", note: "Last updated 2 days ago", onClick: () => { console.log('click!'); } }, 3),
-        ],
+    render: args => _jsx(Section, { ...args }),
+}, 'The default story is wired to the Controls panel. Toggle `collapsible` to add expand/collapse behaviour, or add `buttonText` (with the three companion props) to surface an action in the heading.');
+export const WithHeadingLevel = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Section } from '@arbor-education/design-system.components';
+
+function SectionHierarchyExample() {
+  return (
+    <Section title="Student Profile" headingLevel={2}>
+      <p>Top-level section — headingLevel 2.</p>
+      <Section title="Personal Details" headingLevel={3}>
+        <p>Sub-section — headingLevel 3.</p>
+        <Section title="Emergency Contacts" headingLevel={4}>
+          <p>Deeper sub-section — headingLevel 4.</p>
+        </Section>
+      </Section>
+    </Section>
+  );
+}
+export default SectionHierarchyExample;
+`.trim(),
+            },
+        },
     },
-};
-export const CollapsibleWithRows = {
-    args: {
-        title: 'Contact Information',
-        collapsible: true,
-        children: [
-            _jsx(Row, { label: "Email", value: "jacob.black@forks.edu" }, 1),
-            _jsx(Row, { label: "Phone", value: "01onal 555 0123" }, 2),
-            _jsx(Row, { label: "Address", value: "La Push, Washington", note: "Primary" }, 3),
-        ],
+    render: () => (_jsxs(Section, { title: "Student Profile", headingLevel: 2, children: [_jsxs("p", { children: ["Top-level section \u2014", _jsxs("code", { children: ["headingLevel=", 2] }), "."] }), _jsxs(Section, { title: "Personal Details", headingLevel: 3, children: [_jsxs("p", { children: ["Sub-section \u2014", _jsxs("code", { children: ["headingLevel=", 3] }), "."] }), _jsx(Section, { title: "Emergency Contacts", headingLevel: 4, children: _jsxs("p", { children: ["Deeper sub-section \u2014", _jsxs("code", { children: ["headingLevel=", 4] }), "."] }) })] })] })),
+}, 'Set `headingLevel` to match the correct position in the page heading hierarchy. The default is `1` — always override it to avoid multiple `<h1>` elements on the page.');
+export const WithTitleIcon = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Section } from '@arbor-education/design-system.components';
+
+function SENSectionWithIcon() {
+  return (
+    <Section
+      title="SEN Information"
+      headingLevel={2}
+      titleIconName="circle-alert"
+      titleIconColor="var(--color-semantic-warning-600)"
+      titleIconScreenReaderText="Special educational needs flag"
+    >
+      <p>Section content here.</p>
+    </Section>
+  );
+}
+export default SENSectionWithIcon;
+`.trim(),
+            },
+        },
     },
-};
-export const NestedSectionsWithRows = {
-    args: {
-        title: 'Student Profile',
-        collapsible: true,
-        children: [
-            _jsxs(Section, { title: "Personal Details", collapsible: true, children: [_jsx(Row, { label: "First Name", value: "Jacob" }), _jsx(Row, { label: "Last Name", value: "Black" }), _jsx(Row, { label: "Date of Birth", value: "14/01/1990", note: "Age 36" })] }, 1),
-            _jsxs(Section, { title: "Academic", collapsible: true, children: [_jsx(Row, { label: "Year Group", value: "Year 10", note: "2024/2025" }), _jsx(Row, { label: "Form Group", value: "10A" }), _jsx(Row, { label: "Attendance", value: "96%", note: "Above target", onClick: () => { console.log('click!'); } })] }, 2),
-        ],
+    render: () => (_jsx(Section, { title: "SEN Information", headingLevel: 2, titleIconName: "circle-alert", titleIconColor: "var(--color-semantic-warning-600)", titleIconScreenReaderText: "Special educational needs flag", children: _jsxs("p", { children: ["An icon after the title provides an at-a-glance visual cue. Pass", _jsx("code", { children: "titleIconScreenReaderText" }), ' ', "so the icon is announced to screen readers."] }) })),
+}, 'Add `titleIconName` to render an icon after the section title. Pair it with `titleIconColor` for semantic colour and `titleIconScreenReaderText` for accessibility.');
+export const WithActionButton = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Section } from '@arbor-education/design-system.components';
+
+function PersonalDetailsSection() {
+  return (
+    <Section
+      title="Personal Details"
+      headingLevel={2}
+      buttonText="Edit"
+      buttonOnClick={() => openEditModal()}
+      buttonVariant="secondary"
+      buttonSize="S"
+    >
+      <p>Section content here.</p>
+    </Section>
+  );
+}
+export default PersonalDetailsSection;
+`.trim(),
+            },
+        },
     },
-};
-export default meta;
+    render: () => (_jsx(Section, { title: "Personal Details", headingLevel: 2, buttonText: "Edit", buttonOnClick: fn(), buttonVariant: "secondary", buttonSize: "S", children: _jsxs("p", { children: ["The action button appears in the heading row. Always provide all four button props together:", _jsx("code", { children: "buttonText" }), ",", _jsx("code", { children: "buttonOnClick" }), ",", _jsx("code", { children: "buttonVariant" }), ", and", _jsx("code", { children: "buttonSize" }), "."] }) })),
+}, 'Provide all four button props together to render an action button in the section heading. Use `buttonSize="S"` to keep it visually lightweight alongside the title.');
+export const Collapsible = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Section } from '@arbor-education/design-system.components';
+
+function CollapsibleSection() {
+  return (
+    <Section
+      title="Additional Notes"
+      headingLevel={2}
+      collapsible
+    >
+      <p>This section starts expanded. Click the heading or the chevron to collapse it.</p>
+    </Section>
+  );
+}
+export default CollapsibleSection;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx(Section, { title: "Additional Notes", headingLevel: 2, collapsible: true, children: _jsxs("p", { children: ["This section starts", _jsx("strong", { children: "expanded" }), ". Click the heading or the chevron to collapse it. The state is managed internally \u2014 no external state management is required."] }) })),
+}, 'Set `collapsible` to add expand/collapse behaviour. The section starts expanded by default. Click the heading or the chevron icon to toggle — keyboard users can press **Enter** or **Space**.');
+export const CollapsibleInitiallyCollapsed = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Section } from '@arbor-education/design-system.components';
+
+function CollapsedByDefaultSection() {
+  return (
+    <Section
+      title="Medical Information"
+      headingLevel={2}
+      collapsible
+      collapsed
+    >
+      <p>Sensitive content that is hidden by default.</p>
+    </Section>
+  );
+}
+export default CollapsedByDefaultSection;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx(Section, { title: "Medical Information", headingLevel: 2, collapsible: true, collapsed: true, children: _jsxs("p", { children: ["This content was hidden when the section mounted. The", _jsx("code", { children: "collapsed" }), ' ', "prop only sets the initial state \u2014 the section is self-managed after that."] }) })),
+}, 'Pass `collapsed` alongside `collapsible` to start in the collapsed state. The `collapsed` prop is **initial state only** — the component owns the toggle state after mount and changing the prop later has no effect.');
+export const CollapsibleWithActionButton = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Section } from '@arbor-education/design-system.components';
+
+function ContactSection() {
+  return (
+    <Section
+      title="Contact Information"
+      headingLevel={2}
+      collapsible
+      buttonText="Add contact"
+      buttonOnClick={() => openAddContactModal()}
+      buttonVariant="secondary"
+      buttonSize="S"
+    >
+      <p>Contact details here.</p>
+    </Section>
+  );
+}
+export default ContactSection;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx(Section, { title: "Contact Information", headingLevel: 2, collapsible: true, buttonText: "Add contact", buttonOnClick: fn(), buttonVariant: "secondary", buttonSize: "S", children: _jsxs("p", { children: ["A section can be both collapsible", _jsx("em", { children: "and" }), ' ', "have an action button. The chevron and the button both appear in the heading row."] }) })),
+}, 'A section can combine `collapsible` with an action button. Both the chevron toggle and the action button appear in the heading row — useful when the content can be hidden but the action remains permanently accessible.');
+export const WithRows = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Section, Row } from '@arbor-education/design-system.components';
+
+function PupilDetailSection() {
+  return (
+    <Section
+      title="Personal Details"
+      headingLevel={2}
+      buttonText="Edit"
+      buttonOnClick={() => openEditModal()}
+      buttonVariant="secondary"
+      buttonSize="S"
+    >
+      <Row label="Full name" value="Amara Osei-Bonsu" />
+      <Row label="Date of birth" value="14 March 2009" note="Age 16" />
+      <Row label="Year group" value="Year 10" />
+      <Row label="Form" value="10JH" />
+      <Row label="UPN" value="A823456789012" />
+    </Section>
+  );
+}
+export default PupilDetailSection;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs(Section, { title: "Personal Details", headingLevel: 2, buttonText: "Edit", buttonOnClick: fn(), buttonVariant: "secondary", buttonSize: "S", children: [_jsx(Row, { label: "Full name", value: "Amara Osei-Bonsu" }), _jsx(Row, { label: "Date of birth", value: "14 March 2009", note: "Age 16" }), _jsx(Row, { label: "Year group", value: "Year 10" }), _jsx(Row, { label: "Form", value: "10JH" }), _jsx(Row, { label: "UPN", value: "A823456789012" })] })),
+}, 'The most common real-world usage — `Row` components inside a `Section`. Static and clickable rows can be freely mixed. The section heading can carry an action button for record-level operations like "Edit".');
+export const NestedCollapsibleSections = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Section, Row } from '@arbor-education/design-system.components';
+
+function PupilProfilePanel() {
+  return (
+    <Section title="Student Profile" headingLevel={2} collapsible>
+      <Section title="Personal Details" headingLevel={3} collapsible>
+        <Row label="Full name" value="Amara Osei-Bonsu" />
+        <Row label="Date of birth" value="14 March 2009" note="Age 16" />
+        <Row label="Admission number" value="001847" />
+      </Section>
+      <Section title="Academic" headingLevel={3} collapsible>
+        <Row label="Year group" value="Year 10" />
+        <Row label="Form" value="10JH" />
+        <Row
+          label="Attendance (YTD)"
+          value="88.3%"
+          note="Below 90% threshold"
+          onClick={() => navigateToAttendance()}
+        />
+      </Section>
+      <Section title="Contact Information" headingLevel={3} collapsible collapsed>
+        <Row label="Email" value="guardian@example.com" note="Primary contact" />
+        <Row label="Phone" value="07700 900123" />
+      </Section>
+    </Section>
+  );
+}
+export default PupilProfilePanel;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs(Section, { title: "Student Profile", headingLevel: 2, collapsible: true, children: [_jsxs(Section, { title: "Personal Details", headingLevel: 3, collapsible: true, children: [_jsx(Row, { label: "Full name", value: "Amara Osei-Bonsu" }), _jsx(Row, { label: "Date of birth", value: "14 March 2009", note: "Age 16" }), _jsx(Row, { label: "Admission number", value: "001847" })] }), _jsxs(Section, { title: "Academic", headingLevel: 3, collapsible: true, children: [_jsx(Row, { label: "Year group", value: "Year 10" }), _jsx(Row, { label: "Form", value: "10JH" }), _jsx(Row, { label: "Attendance (YTD)", value: "88.3%", note: "Below 90% threshold", onClick: fn() })] }), _jsxs(Section, { title: "Contact Information", headingLevel: 3, collapsible: true, collapsed: true, children: [_jsx(Row, { label: "Email", value: "guardian@example.com", note: "Primary contact" }), _jsx(Row, { label: "Phone", value: "07700 900123" })] })] })),
+}, 'Nested sections are a common pattern for hierarchical detail panels. Nested sections automatically lose their horizontal padding to maintain visual rhythm. Each section manages its own collapsed state independently.');
 //# sourceMappingURL=Section.stories.js.map

package/dist/components/section/Section.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.stories.js","sourceRoot":"","sources":["../../../src/components/section/Section.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Section.stories.js","sourceRoot":"","sources":["../../../src/components/section/Section.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/singleUser/SingleUser.stories.d.ts

@@ -3,9 +3,10 @@ import { SingleUser } from './SingleUser';
 declare const meta: Meta<typeof SingleUser>;
 export default meta;
 type Story = StoryObj<typeof SingleUser>;
-export declare const WithImage: Story;
-export declare const WithInitials: Story;
-export declare const Placeholder: Story;
-export declare const MediumAvatar: Story;
+export declare const Default: Story;
+export declare const WithPhoto: Story;
+export declare const AllSizes: Story;
+export declare const InitialsFallback: Story;
+export declare const TwoClassNameProps: Story;
 export declare const LongLabel: Story;
 //# sourceMappingURL=SingleUser.stories.d.ts.map

package/dist/components/singleUser/SingleUser.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleUser.stories.d.ts","sourceRoot":"","sources":["../../../src/components/singleUser/SingleUser.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAIjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAiBzC,eAAO,MAAM,SAAS,EAAE,KAKsD,CAAC;AAE/E,eAAO,MAAM,YAAY,EAAE,KAK0B,CAAC;AAEtD,eAAO,MAAM,WAAW,EAAE,KAIgE,CAAC;AAE3F,eAAO,MAAM,YAAY,EAAE,KAOsD,CAAC;AAElF,eAAO,MAAM,SAAS,EAAE,KAKuE,CAAC"}
+{"version":3,"file":"SingleUser.stories.d.ts","sourceRoot":"","sources":["../../../src/components/singleUser/SingleUser.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA0H1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA8EjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAkBzC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAiCvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAmCtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAmC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAmC/B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAC"}