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

package/dist/components/singleUser/SingleUser.stories.js

@@ -1,52 +1,324 @@
+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 { SingleUser } from './SingleUser';
+// ---------------------------------------------------------------------------
+// Content strings for the custom DocsPage
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = [
+    '`SingleUser` renders a user identity pill — an avatar paired with a visible name label.',
+    'The avatar is always decorative (`aria-hidden="true"`) so the `label` prop is the sole accessible name for the element.',
+    'The component is built on top of the [`Avatar`](?path=/docs/components-avatar--docs) component and inherits its `src` and `initials` props.',
+].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',
+    '',
+    '- Displaying a named user inline — in a table cell, a row label, a card header, or a list of assignees.',
+    '- Anywhere a bare avatar would lack context — the label removes ambiguity about who the avatar represents.',
+    '- As a compact, non-interactive identity chip (e.g. "Assigned to · Sarah Okafor").',
+    '',
+    '---',
+    '',
+    '### When NOT to use',
+    '',
+    '| Situation | Use instead |',
+    '|---|---|',
+    '| Multiple users side by side | [`AvatarGroup`](?path=/docs/components-avatargroup--docs) |',
+    '| Avatar without a text label | [`Avatar`](?path=/docs/components-avatar--docs) directly |',
+    '| Clickable user link | Wrap `SingleUser` in an anchor or use a `Row` with `onClick` |',
+    '| User selection | A dropdown or autocomplete input |',
+].join('\n');
+const DEVELOPER_NOTES = [
+    '### Avatar is always decorative',
+    '',
+    'The inner `Avatar` is always rendered with `aria-hidden="true"` and `alt=""`. This means:',
+    '',
+    "- The `label` prop is the **only** accessible name — ensure it contains the user's full name.",
+    '- Screen readers announce the label text only; they will not announce initials or image alt text.',
+    '- You **cannot** override this behaviour via props — it is intentional design.',
+    '',
+    '---',
+    '',
+    '### Two className props',
+    '',
+    '`SingleUser` accepts two distinct `className` props:',
+    '',
+    '| Prop | Target element | Use case |',
+    '|---|---|---|',
+    '| `className` | Root `<span>` | Outer layout, margins, flex order |',
+    '| `avatarClassName` | Inner `<Avatar>` | Avatar-specific overrides |',
+    '',
+    '---',
+    '',
+    '### Default size is `"small"`',
+    '',
+    '> **Important:** `SingleUser` defaults to `size="small"`, not `"medium"` (which is `Avatar`\'s own default).',
+    '> Always pass `size` explicitly when a specific size is required.',
+    '',
+    '---',
+    '',
+    '### forwardRef',
+    '',
+    '`SingleUser` uses `React.forwardRef` and exposes a ref to the root `<span>` element.',
+    '',
+    '---',
+    '',
+    '### TypeScript types',
+    '',
+    '```ts',
+    "import { SingleUser } from '@arbor-education/design-system.components';",
+    "import type { SingleUserProps } from '@arbor-education/design-system.components';",
+    '',
+    'type SingleUserProps = {',
+    '  label: string;            // required — also the only accessible name',
+    '  className?: string;       // applied to the root <span>',
+    '  avatarClassName?: string; // applied to the inner <Avatar>',
+    "  size?: 'small' | 'medium' | 'large' | 'extra-large'; // default: 'small'",
+    '  src?: string;             // avatar image URL',
+    '  initials?: string;        // shown when src is absent or fails to load',
+    '  // ...plus remaining AvatarProps (excluding className, alt, size)',
+    '};',
+    '```',
+].join('\n');
+const RELATED_COMPONENTS = [
+    '## Related components',
+    '',
+    '[Avatar](?path=/docs/components-avatar--docs) · [AvatarGroup](?path=/docs/components-avatargroup--docs) · [Row](?path=/docs/components-row--docs)',
+].join('\n');
+// ---------------------------------------------------------------------------
+// Custom DocsPage
+// ---------------------------------------------------------------------------
+function SingleUserDocsPage() {
+    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/SingleUser',
     component: SingleUser,
     tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: {
+            page: SingleUserDocsPage,
+        },
+    },
+    argTypes: {
+        label: {
+            description: [
+                'The visible name label rendered alongside the avatar.',
+                'This is also the **only** accessible name — the inner avatar is always `aria-hidden`.',
+                "Always pass the user's full name.",
+            ].join(' '),
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        size: {
+            description: [
+                'Controls the size of the inner avatar.',
+                "Defaults to `\"small\"` — note this differs from `Avatar`'s own default of `\"medium\"`.",
+            ].join(' '),
+            control: 'select',
+            options: ['small', 'medium', 'large', 'extra-large'],
+            table: {
+                type: { summary: "'small' | 'medium' | 'large' | 'extra-large'" },
+                defaultValue: { summary: "'small'" },
+            },
+        },
+        src: {
+            description: [
+                'URL of the avatar image.',
+                'When absent or broken, `initials` are used as a fallback.',
+            ].join(' '),
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        initials: {
+            description: 'One or two initials shown inside the avatar when no `src` is provided or when the image fails to load.',
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        className: {
+            description: [
+                'Additional CSS class names applied to the **root** `<span>` wrapper.',
+                'Use `avatarClassName` to target the inner avatar specifically.',
+            ].join(' '),
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        avatarClassName: {
+            description: [
+                'Additional CSS class names applied only to the **inner** `<Avatar>` element.',
+                'Useful for avatar-specific overrides without affecting the root layout.',
+            ].join(' '),
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+    },
 };
 export default meta;
+// ---------------------------------------------------------------------------
+// Helper
+// ---------------------------------------------------------------------------
 const withDescription = (story, description) => ({
     ...story,
     parameters: {
         ...story.parameters,
-        docs: {
-            ...story.parameters?.docs,
-            description: {
-                story: description,
-            },
-        },
+        docs: { ...story.parameters?.docs, description: { story: description } },
     },
 });
-const sampleSrc = 'https://i.pravatar.cc/150?img=12';
-export const WithImage = withDescription({
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+export const Default = withDescription({
     args: {
-        label: 'Jordan Matthews',
-        src: sampleSrc,
+        label: 'Sarah Okafor',
+        initials: 'SO',
+        size: 'small',
     },
-}, 'Displays `SingleUser` with an avatar image and the default small layout.');
-export const WithInitials = withDescription({
-    args: {
-        label: 'Riley Chen',
-        initials: 'RC',
+    render: args => _jsx(SingleUser, { ...args }),
+}, 'The default story is wired to the Controls panel. Adjust `label`, `initials`, `src`, and `size` to see the component update in real time.');
+export const WithPhoto = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { SingleUser } from '@arbor-education/design-system.components';
+
+function TeacherIdentity() {
+  return (
+    <SingleUser
+      label="Miss Clara Jones"
+      src="https://i.pravatar.cc/150?img=47"
+      size="medium"
+    />
+  );
+}
+export default TeacherIdentity;
+`.trim(),
+            },
+        },
     },
-}, 'Uses initials when no image source is provided.');
-export const Placeholder = withDescription({
-    args: {
-        label: 'Invited user',
+    render: () => (_jsx(SingleUser, { label: "Miss Clara Jones", src: "https://i.pravatar.cc/150?img=47", size: "medium" })),
+}, 'When a `src` URL is provided the avatar displays the photo. If the image fails to load, the component falls back to `initials` if supplied. The avatar is still `aria-hidden` regardless — `label` remains the only accessible name.');
+export const AllSizes = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { SingleUser } from '@arbor-education/design-system.components';
+
+function SizeShowcase() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-medium)' }}>
+      <SingleUser label="James Okafor" initials="JO" size="small" />
+      <SingleUser label="James Okafor" initials="JO" size="medium" />
+      <SingleUser label="James Okafor" initials="JO" size="large" />
+      <SingleUser label="James Okafor" initials="JO" size="extra-large" />
+    </div>
+  );
+}
+export default SizeShowcase;
+`.trim(),
+            },
+        },
     },
-}, 'Shows the placeholder avatar treatment when neither image nor initials are supplied.');
-export const MediumAvatar = withDescription({
-    name: 'Size override (medium)',
-    args: {
-        label: 'Taylor Brooks',
-        initials: 'TB',
-        size: 'medium',
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-medium)' }, children: [_jsx(SingleUser, { label: "James Okafor", initials: "JO", size: "small" }), _jsx(SingleUser, { label: "James Okafor", initials: "JO", size: "medium" }), _jsx(SingleUser, { label: "James Okafor", initials: "JO", size: "large" }), _jsx(SingleUser, { label: "James Okafor", initials: "JO", size: "extra-large" })] })),
+}, "All four supported sizes. `\"small\"` is the **default** — which differs from the underlying `Avatar` component's own default of `\"medium\"`. Always pass `size` explicitly when a specific size is required.");
+export const InitialsFallback = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { SingleUser } from '@arbor-education/design-system.components';
+
+function StaffList() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }}>
+      <SingleUser label="Dorothy Zbornak" initials="DZ" />
+      <SingleUser label="Rose Nylund" initials="RN" />
+      <SingleUser label="Blanche Devereaux" initials="BD" />
+      <SingleUser label="Sophia Petrillo" initials="SP" />
+    </div>
+  );
+}
+export default StaffList;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }, children: [_jsx(SingleUser, { label: "Dorothy Zbornak", initials: "DZ" }), _jsx(SingleUser, { label: "Rose Nylund", initials: "RN" }), _jsx(SingleUser, { label: "Blanche Devereaux", initials: "BD" }), _jsx(SingleUser, { label: "Sophia Petrillo", initials: "SP" })] })),
+}, 'When no `src` is provided, the avatar falls back to `initials`. One or two characters are recommended for legibility across all sizes.');
+export const TwoClassNameProps = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { SingleUser } from '@arbor-education/design-system.components';
+
+function AssignedUser() {
+  return (
+    <SingleUser
+      label="Amara Osei-Bonsu"
+      initials="AO"
+      className="my-root-override"
+      avatarClassName="my-avatar-override"
+    />
+  );
+}
+export default AssignedUser;
+`.trim(),
+            },
+        },
     },
-}, 'Demonstrates overriding the default avatar size within the SingleUser pill.');
+    render: () => (_jsx(SingleUser, { label: "Amara Osei-Bonsu", initials: "AO", className: "my-root-override", avatarClassName: "my-avatar-override" })),
+}, '`SingleUser` exposes two separate `className` props: `className` targets the **root `<span>`** and `avatarClassName` targets only the **inner `<Avatar>`**. Use them independently to avoid unintended style bleed.');
 export const LongLabel = withDescription({
-    args: {
-        label: 'Dr. Alexandrina Constantinopolous-Worthington',
-        initials: 'AC',
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { SingleUser } from '@arbor-education/design-system.components';
+
+function LongNameExample() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }}>
+      <SingleUser label="Mrs Jacqueline Abernathy-Thornton" initials="JA" />
+      <SingleUser label="Mr Bartholomew Featherington-Smythe" initials="BF" size="medium" />
+    </div>
+  );
+}
+export default LongNameExample;
+`.trim(),
+            },
+        },
     },
-}, 'Exercises the component with a longer label so text wrapping and spacing can be reviewed.');
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }, children: [_jsx(SingleUser, { label: "Mrs Jacqueline Abernathy-Thornton", initials: "JA" }), _jsx(SingleUser, { label: "Mr Bartholomew Featherington-Smythe", initials: "BF", size: "medium" })] })),
+}, 'Long display names flow naturally — the label has no enforced max-width and extends the pill as needed. Apply a width constraint via `className` if truncation is required.');
 //# sourceMappingURL=SingleUser.stories.js.map

package/dist/components/singleUser/SingleUser.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleUser.stories.js","sourceRoot":"","sources":["../../../src/components/singleUser/SingleUser.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,eAAe,GAAG,CAAC,KAAY,EAAE,WAAmB,EAAS,EAAE,CAAC,CAAC;IACrE,GAAG,KAAK;IACR,UAAU,EAAE;QACV,GAAG,KAAK,CAAC,UAAU;QACnB,IAAI,EAAE;YACJ,GAAG,KAAK,CAAC,UAAU,EAAE,IAAI;YACzB,WAAW,EAAE;gBACX,KAAK,EAAE,WAAW;aACnB;SACF;KACF;CACF,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,kCAAkC,CAAC;AAErD,MAAM,CAAC,MAAM,SAAS,GAAU,eAAe,CAAC;IAC9C,IAAI,EAAE;QACJ,KAAK,EAAE,iBAAiB;QACxB,GAAG,EAAE,SAAS;KACf;CACF,EAAE,0EAA0E,CAAC,CAAC;AAE/E,MAAM,CAAC,MAAM,YAAY,GAAU,eAAe,CAAC;IACjD,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,IAAI;KACf;CACF,EAAE,iDAAiD,CAAC,CAAC;AAEtD,MAAM,CAAC,MAAM,WAAW,GAAU,eAAe,CAAC;IAChD,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;KACtB;CACF,EAAE,sFAAsF,CAAC,CAAC;AAE3F,MAAM,CAAC,MAAM,YAAY,GAAU,eAAe,CAAC;IACjD,IAAI,EAAE,wBAAwB;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,QAAQ;KACf;CACF,EAAE,6EAA6E,CAAC,CAAC;AAElF,MAAM,CAAC,MAAM,SAAS,GAAU,eAAe,CAAC;IAC9C,IAAI,EAAE;QACJ,KAAK,EAAE,+CAA+C;QACtD,QAAQ,EAAE,IAAI;KACf;CACF,EAAE,2FAA2F,CAAC,CAAC"}
+{"version":3,"file":"SingleUser.stories.js","sourceRoot":"","sources":["../../../src/components/singleUser/SingleUser.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/slideoverManager/SlideoverManager.stories.d.ts

@@ -1,15 +1,36 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { type IconName } from '../icon/allowedIcons';
-type SlideoverStoryArgs = {
-    headerIcon?: IconName;
-    centerHeaderText?: boolean;
+import type { StoryObj } from '@storybook/react-vite';
+declare function SlideoverManagerDocsPage(): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: (props: {
+        slideovers: import("../slideover/Slideover").SlideoverProps[];
+    }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            page: typeof SlideoverManagerDocsPage;
+        };
+    };
+    argTypes: {
+        slideovers: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
 };
-declare const meta: Meta<SlideoverStoryArgs>;
 export default meta;
-type Story = StoryObj<SlideoverStoryArgs>;
+type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const WithSections: Story;
-export declare const WithFormFields: Story;
-export declare const WithFooterContent: Story;
-export declare const WithScrollableContent: Story;
+export declare const WithFooterActions: Story;
+export declare const StackedSlideovers: Story;
+export declare const HideBackButton: Story;
 //# sourceMappingURL=SlideoverManager.stories.d.ts.map

package/dist/components/slideoverManager/SlideoverManager.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlideoverManager.stories.d.ts","sourceRoot":"","sources":["../../../src/components/slideoverManager/SlideoverManager.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,EAAgB,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEnE,KAAK,kBAAkB,GAAG;IACxB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAkClC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AA0B1C,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA+B1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAmC5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAmE/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAsInC,CAAC"}
+{"version":3,"file":"SlideoverManager.stories.d.ts","sourceRoot":"","sources":["../../../src/components/slideoverManager/SlideoverManager.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAuI5D,iBAAS,wBAAwB,4CAehC;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CAoB+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAmNnC,eAAO,MAAM,OAAO,EAAE,KA4CrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAqD/B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA4D/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAkD5B,CAAC"}