@arbor-education/design-system.components 0.13.0 → 0.14.0

package/{.claude/component-library.md → component-library.md}

@@ -2,7 +2,7 @@
 
 > Auto-generated reference for AI agents (Sophia, analyze-design, etc.)
 > Source: `src/components/` · Public API: `src/index.ts`
-> Last updated: 2026-04-17
+> Last updated: 2026-04-22
 
 ---
 
@@ -331,7 +331,7 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 
 ### 9. FormField
 
-**File:** `src/components/formField/FormField.tsx` · **Public export:** No (internal)
+**File:** `src/components/formField/FormField.tsx` · **Public export:** Yes
 
 **Use case:** Complete form field wrapper combining label, description, input, error text, and helper link. The preferred way to render any form input with consistent layout and accessibility wiring.
 
@@ -339,7 +339,7 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 |---|---|---|---|---|
 | `label` | `string` | No | — | Field label |
 | `id` | `string` | No | — | Associates label and input |
-| `inputType` | `'text' \| 'textarea' \| 'number' \| 'colourPicker' \| 'selectDropdown' \| 'datePicker'` | No | `'text'` | Which input to render |
+| `inputType` | `'text' \| 'textarea' \| 'number' \| 'time' \| 'colourPicker' \| 'selectDropdown' \| 'datePicker' \| 'combobox'` | No | `'text'` | Which input to render |
 | `inputProps` | Varies by `inputType` | No | — | Props forwarded to the input |
 | `fieldDescription` | `ReactNode` | No | — | Descriptive text below label |
 | `helperLinkText` | `string` | No | — | Helper link label |
@@ -742,7 +742,7 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 ### 30. Table
 
 **File:** `src/components/table/Table.tsx` · **Public export:** Yes
-**Also exports:** `GridApiContext`, `DSDefaultColDef`, `DefaultCellRenderer`, `BooleanCellRenderer`
+**Also exports:** `GridApiContext`, `DSDefaultColDef`, `DefaultCellRenderer`, `BooleanCellRenderer`, `CheckboxCellRenderer`, `TableSettingsContext`, `TABLE_SPACING`
 
 **Use case:** Full-featured enterprise data grid wrapping AG Grid Enterprise with design system theming, search, pagination, column visibility, bulk actions, row selection, and table settings — all pre-wired.
 
@@ -772,12 +772,14 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 | `Table.HideColumnsDropdown` | Multi-select to toggle column visibility |
 | `Table.ButtonCellRenderer` | Renders a `Button` in a cell (ref: `dsButtonCellRenderer`) |
 | `Table.TableSettingsDropdown` | Settings dropdown (spacing, borders, cell colors) |
+| `Table.TableControls` | Composed header bar: search, bulk actions, hide columns, settings, undo/redo, expand, download, help — all wired up |
 
 **Auto-registered cell renderers:**
 - `dsButtonCellRenderer` → `ButtonCellRenderer`
 - `dsInlineTextCellRenderer` → `InlineTextCellRenderer` (editable text in cell)
 - `dsSelectDropdownCellRenderer` → `SelectDropdownCellRenderer` (dropdown in cell)
 - `dsBooleanCellRenderer` → `BooleanCellRenderer` (check-solid icon for `true`, x-solid for `false`, null otherwise; also exported directly as `BooleanCellRenderer`)
+- `dsCheckboxCellRenderer` → `CheckboxCellRenderer` (checkbox for editable boolean cells; also exported directly as `CheckboxCellRenderer`)
 
 **Auto-registered column filters:**
 - `dsBooleanFilter` → `BooleanFilter`
@@ -819,18 +821,32 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 ### 32. Tag
 
 **File:** `src/components/tag/Tag.tsx` · **Public export:** Yes
+**Also exports:** `TagColor`, `TagProps` types
 
-**Use case:** Non-interactive label/badge for categorization, status indicators, or metadata display.
+**Use case:** Non-interactive label for metadata, categories, and status indicators. Used standalone for purely informational display; also used inside Combobox as removable selection chips (the only legitimate use of `onRemove`).
+
+> **MANIFEST CORRECTION (2026-04-17):** Component was rewritten. Old props `text` (string), `dotColour` are GONE. Current API uses `children` (ReactNode) + `slotStart`/`slotEnd` for slot composition.
 
 | Prop | Type | Required | Default | Description |
 |---|---|---|---|---|
-| `text` | `string` | Yes | — | Tag label |
+| `children` | `ReactNode` | Yes | — | Tag label content |
 | `color` | `TagColor` | No | `'neutral'` | Color variant |
-| `dotColour` | `DotColour` | No | — | Optional colored dot prefix |
+| `selected` | `boolean` | No | `false` | Selected state — overrides colour bg/border with selection tokens |
+| `slotStart` | `ReactNode` | No | — | Leading slot (e.g. Dot, Icon, Avatar) |
+| `slotEnd` | `ReactNode` | No | — | Trailing slot (e.g. chevron, badge count) |
+| `onRemove` | `() => void` | No | — | When provided, renders an X remove button. FOR COMPOSITE CONTEXTS ONLY (e.g. Combobox selection chips). Do not use for standalone tags. |
+| `removeLabel` | `string` | No | `'Remove'` | Accessible aria-label for the remove button |
+| `removeButtonTabIndex` | `0 \| -1` | No | `0` | Pass `-1` when a composite parent (e.g. Combobox) manages focus with roving tabindex |
 
 **`TagColor` values:** `'neutral'` · `'orange'` · `'blue'` · `'green'` · `'purple'` · `'teal'` · `'salmon'` · `'yellow'`
 
-**`DotColour` values:** `'purple'` · `'salmon'` · `'teal'` · `'yellow'` · `'green'` · `'orange'` · `'blue'`
+**Key behaviours:**
+- Renders as `<span>` — no interactive role; non-interactive tags have no keyboard focus
+- `selected` state overrides `color` bg/border with `--tag-selected-color-background/border` tokens; text remains neutral colour
+- Label (`ds-tag__label`) has `max-width: 100%`, `white-space: nowrap`, `overflow: hidden`, `text-overflow: ellipsis`
+- `slotStart` = canonical way to prefix a Dot (replace old `dotColour` prop) or Icon
+- Remove button: `aria-label={removeLabel}`, `e.stopPropagation()` on click, uses `Icon name="x" size={12}`
+- Dot in `slotStart` is `aria-hidden` when no `label` prop passed to Dot
 
 **Key features:**
 - Purely presentational `<span>` — no click handling
@@ -1052,9 +1068,10 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 | `DefaultCellRenderer` | `src/components/table/cellRenderers/DefaultCellRenderer.tsx` | Standard AG Grid cell renderer |
 | `BooleanCellRenderer` | `src/components/table/cellRenderers/BooleanCellRenderer.tsx` | Shows check icon (true), x icon (false), or null — also registered as `'dsBooleanCellRenderer'` string |
 
+| `PopupParentContext` | `src/utils/PopupParentContext.ts` | React context (`RefObject<HTMLElement \| null>`) controlling where portal-based floating elements render. Default: `getDefaultPopupParent()`. Consumed by Dropdown, Modal, Tooltip, DatePicker, DateTimePicker, Combobox, UserDropdown, SlideoverManager, and Table column filters (TimeFilter, BooleanFilter). Wrap with `<PopupParentContext.Provider value={containerRef}>` when floating elements are inside containers with `overflow: hidden` or custom z-index stacking contexts. |
+
 **Not exported but notable:**
 - `ModalUtils` — `addModal()`, `removeModal()`, `removeAllModals()` (mount `ModalManager` to use)
-- `PopupParentContext` — React context for portal container (used by Modal, Slideover, Dropdown, Tooltip, DatePicker)
 - `PubSub` — lightweight pub/subscribe for imperative modal/slideover control
 
 ---
@@ -1073,7 +1090,7 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 | `DatePicker` | Yes | any date-fns format; error state | Radix Popover, react-day-picker |
 | `Dropdown` | Yes | compound: Trigger/Content/Item/SelectItem/Separator/Group | Radix DropdownMenu |
 | `EditableText` | Yes | single-line/multiline; controlled editing | — |
-| `FormField` | No | 6 inputType values; error/helper/description | — |
+| `FormField` | Yes | 8 inputType values; error/helper/description; sharedProps a11y wiring | — |
 | `Fieldset` | Yes | with/without legend; native disabled | — |
 | `TextInput` | Yes | size: M/S; error state | — |
 | `TextArea` | Yes | autoSize; error state | — |

package/dist/components/articleCard/ArticleCard.d.ts

@@ -0,0 +1,30 @@
+import type { IcoTextIconProps } from '../icoText/IcoText';
+import type { TagColor } from '../tag/Tag';
+import type { IconName } from '../icon/allowedIcons';
+import { Card } from '../card/Card';
+type ArticleCardBaseProps = {
+    className?: string;
+    paragraph?: React.ReactNode;
+    icon?: IconName;
+    iconColor?: IcoTextIconProps['color'];
+    disabled?: boolean;
+    tagText?: string;
+    tagColor?: TagColor;
+    iconScreenReaderText?: string;
+};
+type ArticleCardLinkedProps = {
+    'href': string;
+    'title': React.ReactNode;
+    'onClick'?: undefined;
+    'onKeyDown'?: undefined;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+type ArticleCardCardShellProps = {
+    href?: undefined;
+    title?: React.ReactNode;
+} & Card.InteractionProps;
+export type ArticleCardProps = ArticleCardBaseProps & (ArticleCardLinkedProps | ArticleCardCardShellProps);
+export declare const ArticleCard: (props: ArticleCardProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=ArticleCard.d.ts.map

package/dist/components/articleCard/ArticleCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleCard.d.ts","sourceRoot":"","sources":["../../../src/components/articleCard/ArticleCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,IAAI,EAA2B,MAAM,sBAAsB,CAAC;AAGrE,KAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,GAAG,IAAI,CAAC,gBAAgB,CAAC;AAE1B,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,CAAC,sBAAsB,GAAG,yBAAyB,CAAC,CAAC;AAE3G,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,KAAG,KAAK,CAAC,GAAG,CAAC,OAgE/D,CAAC"}

package/dist/components/articleCard/ArticleCard.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Tag } from '../tag/Tag';
+import { Card, getCardInteractionProps } from '../card/Card';
+import { IcoText } from '../icoText/IcoText';
+export const ArticleCard = (props) => {
+    const { className, href, title, paragraph, icon, iconColor, iconScreenReaderText, disabled = false, tagText, tagColor, } = props;
+    const hasPrimaryLink = Boolean(href && title && !disabled);
+    const cardClassName = classNames({
+        'ds-card__container--article-link': hasPrimaryLink,
+    }, className);
+    const cardInteractionProps = hasPrimaryLink
+        ? getCardInteractionProps({
+            'onKeyDown': undefined,
+            'aria-label': props['aria-label'],
+            'aria-labelledby': props['aria-labelledby'],
+        })
+        : getCardInteractionProps(props);
+    const content = (_jsx("article", { className: "ds-article-card", children: _jsxs(IcoText, { children: [icon && (_jsx(IcoText.Icon, { color: iconColor, name: icon, screenReaderText: iconScreenReaderText })), title && (_jsx(IcoText.Heading, { children: hasPrimaryLink
+                        ? (_jsx("a", { className: "ds-article-card__primary-link", href: href, children: title }))
+                        : title })), paragraph && _jsx(IcoText.Paragraph, { children: paragraph }), tagText && _jsx(Tag, { color: tagColor, children: tagText })] }) }));
+    return (_jsx(Card, { ...cardInteractionProps, className: cardClassName, disabled: disabled, spacing: "default", children: content }));
+};
+//# sourceMappingURL=ArticleCard.js.map

package/dist/components/articleCard/ArticleCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleCard.js","sourceRoot":"","sources":["../../../src/components/articleCard/ArticleCard.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AA6BrD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAqB,EAAE;IACxE,MAAM,EACJ,SAAS,EACT,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAI,EACJ,SAAS,EACT,oBAAoB,EACpB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,QAAQ,GACT,GAAG,KAAK,CAAC;IACV,MAAM,cAAc,GAAG,OAAO,CAAC,IAAI,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC;IAE3D,MAAM,aAAa,GAAG,UAAU,CAAC;QAC/B,kCAAkC,EAAE,cAAc;KACnD,EAAE,SAAS,CAAC,CAAC;IAEd,MAAM,oBAAoB,GAAG,cAAc;QACzC,CAAC,CAAC,uBAAuB,CAAC;YACtB,WAAW,EAAE,SAAS;YACtB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC;YACjC,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC;SAC5C,CAAC;QACJ,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC;IAEnC,MAAM,OAAO,GAAG,CACd,kBAAS,SAAS,EAAC,iBAAiB,YAClC,MAAC,OAAO,eACL,IAAI,IAAI,CACP,KAAC,OAAO,CAAC,IAAI,IACX,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,oBAAoB,GACtC,CACH,EACA,KAAK,IAAI,CACR,KAAC,OAAO,CAAC,OAAO,cACb,cAAc;wBACb,CAAC,CAAC,CACE,YAAG,SAAS,EAAC,+BAA+B,EAAC,IAAI,EAAE,IAAI,YACpD,KAAK,GACJ,CACL;wBACH,CAAC,CAAC,KAAK,GACO,CACnB,EACA,SAAS,IAAI,KAAC,OAAO,CAAC,SAAS,cAAE,SAAS,GAAqB,EAC/D,OAAO,IAAI,KAAC,GAAG,IAAC,KAAK,EAAE,QAAQ,YAAG,OAAO,GAAO,IACzC,GACF,CACX,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,OACC,oBAAoB,EACxB,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,SAAS,YAEhB,OAAO,GACH,CACR,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/articleCard/ArticleCard.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: (props: import("./ArticleCard").ArticleCardProps) => React.JSX.Element;
+};
+type Story = StoryObj<typeof meta>;
+export declare const CardWithTitleAndParagraph: Story;
+export declare const CardWithTitleParagraphAndIcon: Story;
+export declare const TheEverythingCard: Story;
+export declare const CardWithTitleParagraphAndTag: Story;
+export declare const CardWithTitleAndIcon: Story;
+export declare const CardWithParagraph: Story;
+export declare const ClickableDisabledCard: Story;
+export declare const UnclickableCard: Story;
+export declare const TextOnly: Story;
+export declare const LinkedArticle: Story;
+export default meta;
+//# sourceMappingURL=ArticleCard.stories.d.ts.map

package/dist/components/articleCard/ArticleCard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleCard.stories.d.ts","sourceRoot":"","sources":["../../../src/components/articleCard/ArticleCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI;;;CAG0B,CAAC;AAErC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,yBAAyB,EAAE,KASvC,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,KAU3C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAW1C,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAQ/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAYnC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAgB3B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/articleCard/ArticleCard.stories.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { fn } from 'storybook/test';
+import { ArticleCard } from './ArticleCard';
+const meta = {
+    title: 'Components/Card/ArticleCard',
+    component: ArticleCard,
+};
+export const CardWithTitleAndParagraph = {
+    args: {
+        'title': 'Title of Card',
+        'paragraph': 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+        'disabled': false,
+        'onClick': fn(),
+        'onKeyDown': fn(),
+        'aria-label': 'Clickable article card with title and paragraph',
+    },
+};
+export const CardWithTitleParagraphAndIcon = {
+    args: {
+        'title': 'Title of Card',
+        'paragraph': 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+        'icon': 'eye',
+        'disabled': false,
+        'onClick': fn(),
+        'onKeyDown': fn(),
+        'aria-label': 'Clickable article card with title paragraph and icon',
+    },
+};
+export const TheEverythingCard = {
+    args: {
+        'title': 'Title of Card',
+        'paragraph': 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+        'icon': 'eye',
+        'disabled': false,
+        'tagText': 'argle bargle',
+        'tagColor': 'orange',
+        'onClick': fn(),
+        'onKeyDown': fn(),
+        'aria-label': 'Clickable article card with all content',
+    },
+};
+export const CardWithTitleParagraphAndTag = {
+    args: {
+        'title': 'Title of Card',
+        'paragraph': 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+        'disabled': false,
+        'tagText': 'argle bargle',
+        'tagColor': 'orange',
+        'onClick': fn(),
+        'onKeyDown': fn(),
+        'aria-label': 'Clickable article card with title paragraph and tag',
+    },
+};
+export const CardWithTitleAndIcon = {
+    args: {
+        'title': 'Title of Card',
+        'icon': 'eye',
+        'disabled': false,
+        'onClick': fn(),
+        'onKeyDown': fn(),
+        'aria-label': 'Clickable article card with title and icon',
+    },
+};
+export const CardWithParagraph = {
+    args: {
+        'paragraph': 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+        'disabled': false,
+        'onClick': fn(),
+        'onKeyDown': fn(),
+        'aria-label': 'Clickable article card with paragraph',
+    },
+};
+export const ClickableDisabledCard = {
+    args: {
+        'title': 'Title of Card',
+        'paragraph': 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+        'icon': 'eye',
+        'tagText': 'argle bargle',
+        'tagColor': 'orange',
+        'disabled': true,
+        'onClick': fn(),
+        'onKeyDown': fn(),
+        'aria-label': 'Disabled clickable article card',
+    },
+};
+export const UnclickableCard = {
+    args: {
+        title: 'Title of Card',
+        paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+        icon: 'eye',
+        tagText: 'argle bargle',
+        tagColor: 'orange',
+    },
+};
+export const TextOnly = {
+    args: {
+        title: 'Text-only article card',
+        paragraph: 'A compact way to present article-style content in the shared shell.',
+    },
+};
+export const LinkedArticle = {
+    args: {
+        title: 'Primary article link',
+        href: '/articles/primary-article-link',
+        paragraph: (_jsxs(_Fragment, { children: ["Read the full article or visit the", ' ', _jsx("a", { href: "/authors/design-system", children: "author page" }), "."] })),
+        icon: 'eye',
+        tagText: 'Featured',
+        tagColor: 'green',
+    },
+};
+export default meta;
+//# sourceMappingURL=ArticleCard.stories.js.map

package/dist/components/articleCard/ArticleCard.stories.js.map

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

package/dist/components/articleCard/ArticleCard.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=ArticleCard.test.d.ts.map

package/dist/components/articleCard/ArticleCard.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleCard.test.d.ts","sourceRoot":"","sources":["../../../src/components/articleCard/ArticleCard.test.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC"}

package/dist/components/articleCard/ArticleCard.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, expect, test, vi } from 'vitest';
+import { ArticleCard } from './ArticleCard';
+describe('ArticleCard', () => {
+    test('renders the legacy card content composition', () => {
+        const { container } = render(_jsx(ArticleCard, { icon: "eye", paragraph: "Helpful supporting copy", tagColor: "green", tagText: "Live", title: "Article summary" }));
+        expect(screen.getByRole('article')).toBeInTheDocument();
+        expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Article summary');
+        expect(screen.getByText('Helpful supporting copy')).toBeInTheDocument();
+        expect(screen.getByText('Live')).toBeInTheDocument();
+        expect(container.querySelector('.ds-icon-eye')).toBeInTheDocument();
+    });
+    test('renders content without an icon', () => {
+        const { container } = render(_jsx(ArticleCard, { paragraph: "Helpful supporting copy", title: "Article summary" }));
+        expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Article summary');
+        expect(container.querySelector('.ds-ico-text__icon')).not.toBeInTheDocument();
+    });
+    test('renders a tag when provided', () => {
+        render(_jsx(ArticleCard, { paragraph: "Helpful supporting copy", tagColor: "orange", tagText: "Pinned", title: "Article summary" }));
+        expect(screen.getByText('Pinned')).toBeInTheDocument();
+    });
+    test('renders a primary title link without button semantics when href is provided', () => {
+        const { container } = render(_jsx(ArticleCard, { href: "/articles/linked-article", paragraph: (_jsxs(_Fragment, { children: ["By", ' ', _jsx("a", { href: "/authors/design-system", children: "Design System Team" })] })), title: "Linked article" }));
+        expect(screen.getByRole('link', { name: 'Linked article' })).toHaveAttribute('href', '/articles/linked-article');
+        expect(screen.getByRole('link', { name: 'Design System Team' })).toHaveAttribute('href', '/authors/design-system');
+        expect(container.querySelector('figure')).not.toHaveAttribute('role', 'button');
+    });
+    test('suppresses the primary link when disabled even if href is provided', () => {
+        const { container } = render(_jsx(ArticleCard, { disabled: true, href: "/articles/linked-article", paragraph: "Helpful supporting copy", title: "Linked article" }));
+        expect(screen.queryByRole('link', { name: 'Linked article' })).not.toBeInTheDocument();
+        expect(container.querySelector('figure')).not.toHaveAttribute('role', 'button');
+    });
+    test('uses the shared card shell for interactivity', () => {
+        const handleClick = vi.fn();
+        render(_jsx(ArticleCard, { "aria-label": "Clickable article card", onClick: handleClick, paragraph: "Helpful supporting copy", title: "Clickable article" }));
+        const card = screen.getByRole('button', { name: 'Clickable article card' });
+        fireEvent.click(card);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    test('renders as a static figure when not clickable', () => {
+        const { container } = render(_jsx(ArticleCard, { paragraph: "Helpful supporting copy", title: "Static article" }));
+        const card = container.querySelector('figure');
+        expect(card).toBeInTheDocument();
+        expect(card).not.toHaveAttribute('role', 'button');
+    });
+});
+//# sourceMappingURL=ArticleCard.test.js.map

package/dist/components/articleCard/ArticleCard.test.js.map

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

package/dist/components/badge/Badge.stories.d.ts

@@ -1,10 +1,89 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { StoryObj } from '@storybook/react-vite';
 import { Badge } from './Badge';
-declare const meta: Meta<typeof Badge>;
+declare function BadgeDocsPage(): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: ({ children, a11yLabel, className, size, colour, }: import("./Badge").BadgeProps) => React.JSX.Element;
+    parameters: {
+        layout: string;
+        docs: {
+            page: typeof BadgeDocsPage;
+        };
+    };
+    tags: string[];
+    argTypes: {
+        children: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        colour: {
+            control: "select";
+            options: (import("../dot/Dot").DotColour | undefined)[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        a11yLabel: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
 export default meta;
 type Story = StoryObj<typeof Badge>;
-export declare const Count: Story;
-export declare const WithA11yLabel: Story;
-export declare const Sizes: Story;
-export declare const Colours: Story;
+export declare const Default: Story;
+export declare const SingleDigit: Story;
+export declare const DoubleDigit: Story;
+export declare const Overflow: Story;
+export declare const Zero: Story;
+export declare const WithIcon: Story;
+export declare const InlineWithText: Story;
+export declare const AllSizes: Story;
+export declare const AllColours: Story;
+export declare const AllVariants: Story;
+export declare const A11yWithLabel: Story;
 //# sourceMappingURL=Badge.stories.d.ts.map

package/dist/components/badge/Badge.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAoB,MAAM,SAAS,CAAC;AAYlD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAQ5B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAepC,eAAO,MAAM,KAAK,EAAE,KAIoD,CAAC;AAEzE,eAAO,MAAM,aAAa,EAAE,KAK2D,CAAC;AAExF,eAAO,MAAM,KAAK,EAAE,KAQ4C,CAAC;AAEjE,eAAO,MAAM,OAAO,EAAE,KAU0C,CAAC"}
+{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,KAAK,EAAoB,MAAM,SAAS,CAAC;AAiGlD,iBAAS,aAAa,4CAmBrB;AAYD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AAIpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AA+PpC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAqBzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAqBzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAqBtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAqBlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAwCtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAiD5B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA0DtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgDxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAmDzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiE3B,CAAC"}