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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.14.0
+
+### Minor Changes
+
+- [#163](https://github.com/arbor-education/design-system.components/pull/163) [`8971a5c`](https://github.com/arbor-education/design-system.components/commit/8971a5c76764ee05871f06856b1a183e1c1b40e9) Thanks [@danielpeplow](https://github.com/danielpeplow)! - Refactor `Card` into a composable shell that only renders `children` inside a clickable surface, with `default` and `dense` spacing options. This removes the legacy `title`, `paragraph`, `icon`, `iconColor`, `iconScreenReaderText`, `tagText`, and `tagColor` props, and changes the rendered root from `article` to `figure`.
+
+  Add `ArticleCard` and `IcoText` to preserve the previous title/paragraph/icon/tag card composition, plus `KVPList` and `KPICard` for KPI-focused layouts. Consumers using the removed `Card` content props should migrate to `ArticleCard` or compose `Card` content manually via `children`.
+
 ## 0.13.1
 
 ### Patch Changes

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/card/Card.d.ts

@@ -1,20 +1,49 @@
-import { allowedIcons } from '../icon/allowedIcons';
-import { type TagColor } from '../tag/Tag';
-type CardProps = {
-    title?: string;
-    paragraph?: string;
-    icon?: keyof typeof allowedIcons;
-    iconColor?: string;
+type CardBaseProps = {
+    children?: React.ReactNode;
+    className?: string;
     disabled?: boolean;
-    tagText?: string;
-    tagColor?: TagColor;
-    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    spacing?: 'default' | 'dense';
+};
+type CardAccessibleNameProps = {
+    'aria-label': string;
+    'aria-labelledby'?: string;
+} | {
+    'aria-label'?: string;
+    'aria-labelledby': string;
+};
+type CardInteractiveProps = CardAccessibleNameProps & {
+    onClick: (e: React.MouseEvent<HTMLElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
-    iconScreenReaderText?: string;
 };
-export declare const Card: ({ title, paragraph, icon, iconColor, iconScreenReaderText, onClick, onKeyDown, disabled, tagText, tagColor, }: CardProps) => import("react/jsx-runtime").JSX.Element;
+type CardStaticProps = {
+    'onClick'?: undefined;
+    'onKeyDown'?: (e: React.KeyboardEvent<HTMLElement>) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+type CardInteractionProps = CardInteractiveProps | CardStaticProps;
+type CardResolvedInteractionProps = {
+    'onClick': (e: React.MouseEvent<HTMLElement>) => void;
+    'onKeyDown'?: (e: React.KeyboardEvent<HTMLElement>) => void;
+    'aria-label': string;
+} | {
+    'onClick': (e: React.MouseEvent<HTMLElement>) => void;
+    'onKeyDown'?: (e: React.KeyboardEvent<HTMLElement>) => void;
+    'aria-labelledby': string;
+} | {
+    'onClick'?: undefined;
+    'onKeyDown'?: (e: React.KeyboardEvent<HTMLElement>) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+export type CardProps = CardBaseProps & CardInteractionProps;
+export declare const getCardInteractionProps: (props: CardInteractionProps) => CardResolvedInteractionProps;
+export declare const Card: ({ children, className, onClick, onKeyDown, disabled, spacing, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: CardProps) => React.JSX.Element;
 export declare namespace Card {
     type Props = CardProps;
+    type AccessibleNameProps = CardAccessibleNameProps;
+    type InteractiveProps = CardInteractiveProps;
+    type InteractionProps = CardInteractionProps;
 }
 export {};
 //# sourceMappingURL=Card.d.ts.map

package/dist/components/card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAExD,KAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,+GAWlB,SAAS,4CAsEX,CAAC;AAEF,yBAAiB,IAAI,CAAC;IACpB,KAAY,KAAK,GAAG,SAAS,CAAC;CAC/B"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AAGA,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B,CAAC;AAEF,KAAK,uBAAuB,GACtB;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GACC;IACA,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEJ,KAAK,oBAAoB,GAAG,uBAAuB,GAAG;IACpD,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACpD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,KAAK,oBAAoB,GAAG,oBAAoB,GAAG,eAAe,CAAC;AAEnE,KAAK,4BAA4B,GAC3B;IACF,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACtD,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,MAAM,CAAC;CACtB,GACC;IACA,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACtD,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,iBAAiB,EAAE,MAAM,CAAC;CAC3B,GACC;IACA,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,oBAAoB,CAAC;AAE7D,eAAO,MAAM,uBAAuB,GAAI,OAAO,oBAAoB,KAAG,4BAmCrE,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,6HASlB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAwDxB,CAAC;AAEF,yBAAiB,IAAI,CAAC;IACpB,KAAY,KAAK,GAAG,SAAS,CAAC;IAC9B,KAAY,mBAAmB,GAAG,uBAAuB,CAAC;IAC1D,KAAY,gBAAgB,GAAG,oBAAoB,CAAC;IACpD,KAAY,gBAAgB,GAAG,oBAAoB,CAAC;CACrD"}

package/dist/components/card/Card.js

@@ -1,31 +1,60 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { Icon } from '../icon/Icon';
-import { allowedIcons } from '../icon/allowedIcons';
-import { Tag } from '../tag/Tag';
-export const Card = ({ title, paragraph, icon, iconColor, iconScreenReaderText, onClick, onKeyDown, disabled, tagText, tagColor, }) => {
-    const handleClick = (e) => {
-        if (onClick) {
-            onClick(e);
+export const getCardInteractionProps = (props) => {
+    if (props.onClick === undefined) {
+        return {
+            'onKeyDown': props.onKeyDown,
+            'aria-label': props['aria-label'],
+            'aria-labelledby': props['aria-labelledby'],
+        };
+    }
+    if (props['aria-label'] !== undefined) {
+        return {
+            'onClick': props.onClick,
+            'onKeyDown': props.onKeyDown,
+            'aria-label': props['aria-label'],
+        };
+    }
+    if (props['aria-labelledby'] === undefined) {
+        if (process.env.NODE_ENV !== 'production') {
+            throw new Error('Interactive Card requires aria-label or aria-labelledby.');
         }
+        console.error('Interactive Card requires aria-label or aria-labelledby.');
+        return {
+            onClick: props.onClick,
+            onKeyDown: props.onKeyDown,
+        };
+    }
+    return {
+        'onClick': props.onClick,
+        'onKeyDown': props.onKeyDown,
+        'aria-labelledby': props['aria-labelledby'],
     };
-    const handleKeyDown = (e) => {
-        if (onKeyDown) {
-            onKeyDown(e);
-        }
-    };
-    const isCardClickable = onClick && !disabled;
-    return (_jsx("article", { className: classNames('ds-card__container', {
+};
+export const Card = ({ children, className, onClick, onKeyDown, disabled = false, spacing = 'default', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }) => {
+    const isCardInteractive = Boolean(onClick);
+    const isCardClickable = isCardInteractive && !disabled;
+    return (_jsx("figure", { className: classNames('ds-card__container', className, {
             'ds-card__container--clickable': isCardClickable,
             'ds-card__container--disabled': disabled,
+            'ds-card__container--dense': spacing === 'dense',
         }), onClick: (e) => {
             if (isCardClickable) {
-                handleClick(e);
+                onClick?.(e);
             }
         }, onKeyDown: (e) => {
+            if (!isCardInteractive)
+                return;
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                if (isCardClickable) {
+                    e.currentTarget.click();
+                }
+            }
             if (isCardClickable) {
-                handleKeyDown(e);
+                onKeyDown?.(e);
             }
-        }, "aria-label": "Card", tabIndex: isCardClickable ? 0 : -1, children: _jsxs("div", { className: "ds-card__content", children: [icon && (_jsx(Icon, { name: icon, className: "ds-card__icon-left", screenReaderText: iconScreenReaderText, color: iconColor, size: 24 })), _jsxs("div", { className: "ds-card__text", children: [title && (_jsx("span", { className: "ds-card__title-container", children: title && _jsx("h4", { className: "ds-card__title", children: title }) })), paragraph && _jsx("p", { className: "ds-card__paragraph", children: paragraph }), tagText && _jsx(Tag, { color: tagColor, children: tagText })] }), isCardClickable && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "chevron-right", className: "ds-card__icon-click", size: 24 }), _jsx(Icon, { name: "arrow-right", className: "ds-card__icon-click", size: 24 })] }))] }) }));
+        }, "aria-disabled": isCardInteractive && disabled ? true : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, role: isCardInteractive ? 'button' : undefined, tabIndex: isCardInteractive ? 0 : undefined, children: _jsxs("div", { className: "ds-card__content", children: [_jsx("div", { className: "ds-card__body", children: children }), isCardClickable && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "chevron-right", className: "ds-card__icon-click", size: 24 }), _jsx(Icon, { name: "arrow-right", className: "ds-card__icon-click", size: 24 })] }))] }) }));
 };
 //# sourceMappingURL=Card.js.map

package/dist/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,GAAG,EAAiB,MAAM,oBAAoB,CAAC;AAexD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,KAAK,EACL,SAAS,EACT,IAAI,EACJ,SAAS,EACT,oBAAoB,EACpB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,GACE,EAAE,EAAE;IACd,MAAM,WAAW,GAAG,CAAC,CAAgC,EAAE,EAAE;QACvD,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,CAAC,CAAC,CAAC;QACb,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAmC,EAAE,EAAE;QAC5D,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,CAAC,CAAC,CAAC,CAAC;QACf,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,QAAQ,CAAC;IAE7C,OAAO,CACL,kBACE,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE;YAC1C,+BAA+B,EAAE,eAAe;YAChD,8BAA8B,EAAE,QAAQ;SACzC,CAAC,EACF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,IAAI,eAAe,EAAE,CAAC;gBACpB,WAAW,CAAC,CAAC,CAAC,CAAC;YACjB,CAAC;QACH,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,IAAI,eAAe,EAAE,CAAC;gBACpB,aAAa,CAAC,CAAC,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,gBACU,MAAM,EACjB,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAElC,eAAK,SAAS,EAAC,kBAAkB,aAC9B,IAAI,IAAI,CACP,KAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,oBAAoB,EAC9B,gBAAgB,EAAE,oBAAoB,EACtC,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,EAAE,GACR,CACH,EACD,eAAK,SAAS,EAAC,eAAe,aAC3B,KAAK,IAAI,CACR,eAAM,SAAS,EAAC,0BAA0B,YACvC,KAAK,IAAI,aAAI,SAAS,EAAC,gBAAgB,YAAE,KAAK,GAAM,GAChD,CACR,EACA,SAAS,IAAI,YAAG,SAAS,EAAC,oBAAoB,YAAE,SAAS,GAAK,EAC9D,OAAO,IAAI,KAAC,GAAG,IAAC,KAAK,EAAE,QAAQ,YAAG,OAAO,GAAO,IAC7C,EACL,eAAe,IAAI,CAClB,8BACE,KAAC,IAAI,IACH,IAAI,EAAC,eAAe,EACpB,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAE,EAAE,GACR,EACF,KAAC,IAAI,IACH,IAAI,EAAC,aAAa,EAClB,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAE,EAAE,GACR,IACD,CACJ,IACG,GACE,CACX,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"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"}

package/dist/components/card/Card.stories.d.ts

@@ -1,86 +1,11 @@
-import type { Meta } from '@storybook/react-vite';
-import { Card } from './Card';
-declare const meta: Meta<typeof Card>;
-export declare const CardWithTitleAndParagraph: {
-    args: {
-        title: string;
-        paragraph: string;
-        disabled: boolean;
-        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onKeyDown: import("@vitest/spy").Mock<(...args: any[]) => any>;
-    };
-};
-export declare const CardWithTitleParagraphAndIcon: {
-    args: {
-        title: string;
-        paragraph: string;
-        icon: string;
-        disabled: boolean;
-        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onKeyDown: import("@vitest/spy").Mock<(...args: any[]) => any>;
-    };
-};
-export declare const TheEverythingCard: {
-    args: {
-        title: string;
-        paragraph: string;
-        icon: string;
-        disabled: boolean;
-        pillText: string;
-        pillColor: string;
-        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onKeyDown: import("@vitest/spy").Mock<(...args: any[]) => any>;
-    };
-};
-export declare const CardWithTitleParagraphAndPill: {
-    args: {
-        title: string;
-        paragraph: string;
-        disabled: boolean;
-        pillText: string;
-        pillColor: string;
-        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onKeyDown: import("@vitest/spy").Mock<(...args: any[]) => any>;
-    };
-};
-export declare const CardWithTitleAndIcon: {
-    args: {
-        title: string;
-        icon: string;
-        disabled: boolean;
-        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onKeyDown: import("@vitest/spy").Mock<(...args: any[]) => any>;
-    };
-};
-export declare const CardWithParagraph: {
-    args: {
-        paragraph: string;
-        disabled: boolean;
-        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onKeyDown: import("@vitest/spy").Mock<(...args: any[]) => any>;
-    };
-};
-export declare const ClickableDisabledCard: {
-    args: {
-        title: string;
-        paragraph: string;
-        icon: string;
-        disabled: boolean;
-        pillText: string;
-        pillColor: string;
-        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onKeyDown: import("@vitest/spy").Mock<(...args: any[]) => any>;
-    };
-};
-export declare const UnclickableCard: {
-    args: {
-        title: string;
-        paragraph: string;
-        icon: string;
-        disabled: boolean;
-        pillText: string;
-        pillColor: string;
-    };
-};
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ children, className, onClick, onKeyDown, disabled, spacing, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: import("./Card").CardProps) => React.JSX.Element;
+};
+type Story = StoryObj<typeof meta>;
+export declare const StaticCard: Story;
+export declare const ClickableCard: Story;
+export declare const DenseCard: Story;
 export default meta;
 //# sourceMappingURL=Card.stories.d.ts.map

package/dist/components/card/Card.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAG3B,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;;;;;;CAQrC,CAAC;AAEF,eAAO,MAAM,6BAA6B;;;;;;;;;CASzC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;CAW7B,CAAC;AAEF,eAAO,MAAM,6BAA6B;;;;;;;;;;CAUzC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;;;CAQhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;CAO7B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;CAWjC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;CAS3B,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI;;;CAGmB,CAAC;AAE9B,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AASnC,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAW3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAe,IAAI,CAAC"}