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

package/dist/components/arborLogo/ArborLogo.stories.js

@@ -0,0 +1,418 @@
+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 { ArborLogo } from './ArborLogo';
+const DESCRIPTION_INTRO = `
+ArborLogo renders the Arbor Education brand mark as an inline SVG with a built-in \`<title>\` element for accessibility.
+
+Reach for it whenever the Arbor identity needs to appear on screen — application headers, login and splash screens, homepage links, email and report headers, and any dark hero panel that calls for the white wordmark variant.
+`.trim();
+const USAGE_GUIDANCE = `
+### When to use
+
+- **Application headers** — the icon-only mark fits compact top-nav bars and rails where horizontal space is precious.
+- **Login, onboarding, and splash screens** — the full wordmark establishes brand context the moment a user lands.
+- **Homepage links** — wrap the logo in an anchor and pass \`aria-label="Arbor home"\` so assistive tech announces the destination clearly.
+- **Email and report headers** — the dark wordmark on a light background is the canonical lockup for printed and emailed artefacts.
+- **Dark hero panels and sidebars** — switch to \`textColor="white"\` so the wordmark stays legible.
+
+---
+
+### When NOT to use
+
+| Scenario | Use instead |
+|---|---|
+| Generic decorative iconography | [\`Icon\`](?path=/docs/components-icon--docs) |
+| Arbitrary image asset | A plain \`<img>\` with the hosted asset URL |
+| A school's crest or logo | A separate, school-supplied image — ArborLogo is the *Arbor Education* mark only |
+| Repeating decorative flourish where any abstract shape would do | Don't dilute the brand — pick a neutral shape or pattern instead |
+`.trim();
+const DEVELOPER_NOTES = `
+### Critical usage patterns
+
+**\`textColor\` is silently ignored when \`showText\` is falsy.** The icon-only mark uses fixed brand colours that cannot be customised — \`textColor\` only affects the wordmark.
+
+**\`aria-label\` becomes the \`<title>\` text, not an \`aria-label\` attribute.** If you inspect the DOM you'll find \`aria-labelledby="..."\` pointing to a \`<title>\` element, not \`aria-label="..."\` on the SVG itself. The two are functionally equivalent for screen readers but visually different in DevTools.
+
+**\`aria-hidden\` strips ALL accessibility attributes.** When set, the SVG drops \`role\`, \`aria-labelledby\`, and the inner \`<title>\` element entirely — and any \`aria-label\` you pass is silently ignored. Don't combine the two.
+
+**The "black" wordmark is \`#2F2F2F\`, not pure black.** That's a brand decision, equivalent to \`--color-grey-900\`. If a designer asks why it isn't \`#000\`, that's the answer.
+
+**SVG dimensions are hardcoded.** The icon-only variant is 25×25 px and the full logo is 66×26 px. To resize, apply CSS via \`className\` (for example \`width: 120px; height: auto\`). Setting width without \`height: auto\` distorts the aspect ratio. There are no \`width\` or \`height\` props.
+
+**Multiple ArborLogos on one page won't clash.** Internal \`<clipPath>\` and \`<title>\` IDs are generated with React's \`useId()\`, so duplicate instances stay isolated.
+
+---
+
+### Accessibility
+
+- By default the SVG has \`role="img"\` and the inner \`<title>\` provides the accessible name (\`"Arbor"\` unless overridden).
+- For brand context override, pass \`aria-label\` — for example \`aria-label="Arbor home"\` when the logo links to the homepage.
+- For decorative use alongside visible "Arbor" text, pass \`aria-hidden\` so screen readers don't announce the brand twice.
+- Never combine \`aria-label\` and \`aria-hidden\` — \`aria-label\` is ignored when the SVG is hidden.
+
+---
+
+### TypeScript types
+
+\`\`\`ts
+import type { ArborLogoProps } from '@arbor-education/design-system.components';
+\`\`\`
+
+| Prop | Type | Default |
+|---|---|---|
+| \`showText\` | \`boolean\` | \`undefined\` (icon-only) |
+| \`textColor\` | \`'white' \\| 'black'\` | \`'black'\` |
+| \`aria-label\` | \`string\` | \`'Arbor'\` |
+| \`aria-hidden\` | \`boolean\` | \`undefined\` |
+| \`className\` | \`string\` | \`undefined\` |
+`.trim();
+const RELATED_COMPONENTS = `
+## Related components
+
+[Icon](?path=/docs/components-icon--docs)
+`.trim();
+const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tweak any prop to see the story update in real time.';
+function ArborLogoDocsPage() {
+    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 })] }));
+}
+const meta = {
+    title: 'Components/ArborLogo',
+    component: ArborLogo,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: {
+            page: ArborLogoDocsPage,
+        },
+    },
+    argTypes: {
+        'showText': {
+            description: 'When true, renders the full 66×26 px logo with wordmark. When falsy, renders the 25×25 px icon-only mark.',
+            control: { type: 'boolean' },
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        'textColor': {
+            description: 'Wordmark colour. Only takes effect when `showText` is true. The "black" value renders as `#2F2F2F` (equivalent to `--color-grey-900`).',
+            control: { type: 'radio' },
+            options: ['white', 'black'],
+            table: {
+                type: { summary: '\'white\' | \'black\'' },
+                defaultValue: { summary: '\'black\'' },
+            },
+        },
+        'aria-label': {
+            description: 'Accessible name. Rendered as the SVG\'s inner `<title>` text and referenced via `aria-labelledby`. Ignored when `aria-hidden` is set.',
+            control: { type: 'text' },
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '\'Arbor\'' },
+            },
+        },
+        'aria-hidden': {
+            description: 'When truthy, marks the SVG as decorative — strips `role`, `aria-labelledby`, and the inner `<title>`. Use when adjacent visible text already conveys the brand name.',
+            control: { type: 'boolean' },
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        'className': {
+            description: 'Class applied to the root SVG. Use this to resize via CSS (for example `width: 120px; height: auto`) — there are no width/height props.',
+            control: { type: 'text' },
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: {
+            ...story.parameters?.docs,
+            description: {
+                story: description,
+            },
+        },
+    },
+});
+export const Default = withDescription({
+    args: {
+        'showText': true,
+        'textColor': 'black',
+        'aria-label': 'Arbor',
+        'aria-hidden': false,
+    },
+    decorators: [
+        (StoryFn, context) => {
+            const isDark = context.args.textColor === 'white';
+            return (_jsx("div", { style: {
+                    alignItems: 'center',
+                    backgroundColor: isDark
+                        ? 'var(--color-grey-800)'
+                        : 'var(--color-grey-050)',
+                    borderRadius: 'var(--border-radius-xsmall)',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    padding: 'var(--spacing-xlarge)',
+                }, children: _jsx(StoryFn, {}) }));
+        },
+    ],
+    render: args => _jsx(ArborLogo, { ...args }),
+}, 'Interactive playground. Toggle `showText` to switch between the icon-only mark and the full wordmark, then flip `textColor` — the wrapper background swaps automatically so the white variant stays visible.');
+export const IconOnly = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { ArborLogo } from '@arbor-education/design-system.components';
+
+function ArborLogoIconOnlyExample() {
+  return <ArborLogo aria-label="Arbor" />;
+}
+export default ArborLogoIconOnlyExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx("div", { style: {
+            alignItems: 'center',
+            backgroundColor: 'var(--color-grey-050)',
+            borderRadius: 'var(--border-radius-xsmall)',
+            display: 'flex',
+            justifyContent: 'center',
+            padding: 'var(--spacing-xlarge)',
+        }, children: _jsx(ArborLogo, { "aria-label": "Arbor" }) })),
+}, 'The 25×25 px icon-only mark. Reach for this in compact spaces — top-nav rails, app icons, favourited shortcuts — where the wordmark would crowd the layout.');
+export const WithWordmark = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { ArborLogo } from '@arbor-education/design-system.components';
+
+function ArborLogoWithWordmarkExample() {
+  return <ArborLogo showText aria-label="Arbor" />;
+}
+export default ArborLogoWithWordmarkExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx("div", { style: {
+            alignItems: 'center',
+            backgroundColor: 'var(--color-grey-050)',
+            borderRadius: 'var(--border-radius-xsmall)',
+            display: 'flex',
+            justifyContent: 'center',
+            padding: 'var(--spacing-xlarge)',
+        }, children: _jsx(ArborLogo, { showText: true, "aria-label": "Arbor" }) })),
+}, 'The canonical brand lockup — full 66×26 px logo with the dark `#2F2F2F` wordmark on a light surface. Use this for login screens, email headers, and printed reports.');
+const WhiteWordmarkTemplate = () => (_jsxs("div", { style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--spacing-large)',
+    }, children: [_jsx("div", { style: {
+                alignItems: 'center',
+                backgroundColor: 'var(--color-grey-800)',
+                borderRadius: 'var(--border-radius-xsmall)',
+                display: 'flex',
+                justifyContent: 'center',
+                padding: 'var(--spacing-xlarge)',
+            }, children: _jsx(ArborLogo, { showText: true, textColor: "white", "aria-label": "Arbor" }) }), _jsx("span", { className: "ds-text", style: {
+                color: 'var(--color-grey-600)',
+                fontStyle: 'italic',
+            }, children: "The dark background is part of the story, not the component \u2014 pair the white wordmark with a sufficiently dark surface in your own layout." })] }));
+export const WhiteWordmark = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { ArborLogo } from '@arbor-education/design-system.components';
+
+function ArborLogoWhiteWordmarkExample() {
+  return (
+    <div style={{ background: 'var(--color-grey-800)', padding: 'var(--spacing-xlarge)', display: 'inline-flex' }}>
+      <ArborLogo showText textColor="white" aria-label="Arbor" />
+    </div>
+  );
+}
+export default ArborLogoWhiteWordmarkExample;
+`.trim(),
+            },
+        },
+    },
+    render: WhiteWordmarkTemplate,
+}, 'Switch the wordmark to white for dark hero panels, marketing splash screens, and inverted sidebars. The component itself does nothing to the surrounding background — that is the consumer\'s responsibility.');
+const DecorativeTemplate = () => (_jsxs("div", { style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--spacing-xxlarge)',
+    }, children: [_jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--spacing-large)',
+            }, children: [_jsxs("div", { style: {
+                        alignItems: 'center',
+                        backgroundColor: 'var(--color-grey-050)',
+                        borderRadius: 'var(--border-radius-xsmall)',
+                        display: 'flex',
+                        gap: 'var(--spacing-small)',
+                        padding: 'var(--spacing-xlarge)',
+                    }, children: [_jsx(ArborLogo, { "aria-hidden": true }), _jsx("span", { className: "ds-text", children: "Arbor" })] }), _jsxs("span", { className: "ds-text", style: {
+                        color: 'var(--color-grey-600)',
+                        fontStyle: 'italic',
+                    }, children: ["Screen reader announces:", ' ', _jsx("strong", { children: "\u201CArbor\u201D" }), ' ', "\u2014 once, from the visible text."] })] }), _jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--spacing-large)',
+            }, children: [_jsxs("div", { style: {
+                        alignItems: 'center',
+                        backgroundColor: 'var(--color-grey-050)',
+                        borderRadius: 'var(--border-radius-xsmall)',
+                        display: 'flex',
+                        gap: 'var(--spacing-small)',
+                        padding: 'var(--spacing-xlarge)',
+                    }, children: [_jsx(ArborLogo, { showText: true, "aria-hidden": true }), _jsx("span", { className: "ds-text", children: "\u2014 Dashboard" })] }), _jsxs("span", { className: "ds-text", style: {
+                        color: 'var(--color-grey-600)',
+                        fontStyle: 'italic',
+                    }, children: ["Screen reader announces:", ' ', _jsx("strong", { children: "\u201C\u2014 Dashboard\u201D" }), ' ', "\u2014 the logo is skipped because the wordmark is already visible."] })] })] }));
+export const Decorative = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { ArborLogo } from '@arbor-education/design-system.components';
+
+function ArborLogoDecorativeExample() {
+  return (
+    <header style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-small)' }}>
+      <ArborLogo aria-hidden />
+      <span>Arbor</span>
+    </header>
+  );
+}
+export default ArborLogoDecorativeExample;
+`.trim(),
+            },
+        },
+    },
+    render: DecorativeTemplate,
+}, 'Use `aria-hidden` whenever an adjacent visible "Arbor" wordmark already announces the brand — repeating it via the SVG just doubles the screen-reader output. Both examples below show the same content with the logo correctly hidden from assistive tech.');
+const CustomAccessibleNameTemplate = () => (_jsxs("div", { style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--spacing-large)',
+    }, children: [_jsx("div", { style: {
+                alignItems: 'center',
+                backgroundColor: 'var(--color-grey-050)',
+                borderRadius: 'var(--border-radius-xsmall)',
+                display: 'flex',
+                justifyContent: 'center',
+                padding: 'var(--spacing-xlarge)',
+            }, children: _jsx("a", { href: "/", style: {
+                    alignItems: 'center',
+                    display: 'inline-flex',
+                    padding: 'var(--spacing-small)',
+                    textDecoration: 'none',
+                }, children: _jsx(ArborLogo, { showText: true, "aria-label": "Arbor home" }) }) }), _jsxs("span", { className: "ds-text", style: {
+                color: 'var(--color-grey-600)',
+                fontStyle: 'italic',
+            }, children: ["Screen reader announces:", ' ', _jsx("strong", { children: "\u201CArbor home, link\u201D" }), ' ', "\u2014 the accessible name clarifies that the brand mark is also the homepage destination."] })] }));
+export const CustomAccessibleName = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { ArborLogo } from '@arbor-education/design-system.components';
+
+function ArborLogoCustomAccessibleNameExample() {
+  return (
+    <a href="/">
+      <ArborLogo showText aria-label="Arbor home" />
+    </a>
+  );
+}
+export default ArborLogoCustomAccessibleNameExample;
+`.trim(),
+            },
+        },
+    },
+    render: CustomAccessibleNameTemplate,
+}, 'When the logo is the homepage link, override `aria-label` so screen-reader users hear the destination, not just the brand name. The default `"Arbor"` label is fine for purely decorative brand placement, but link targets deserve more context.');
+// Inline <style> tags inside the template inject the CSS rules referenced by
+// the className examples below. In a real app these rules would live in your
+// stylesheet — Storybook can't resize the SVG without them because width/height
+// are baked into the SVG attributes.
+const CustomSizingTemplate = () => (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+        .my-arbor-logo--favicon { width: 16px; height: auto; }
+        .my-arbor-logo--hero { width: 240px; height: auto; }
+      ` }), _jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--spacing-large)',
+            }, children: [_jsxs("div", { style: {
+                        alignItems: 'flex-end',
+                        backgroundColor: 'var(--color-grey-050)',
+                        borderRadius: 'var(--border-radius-xsmall)',
+                        display: 'flex',
+                        gap: 'var(--spacing-xxlarge)',
+                        justifyContent: 'center',
+                        padding: 'var(--spacing-xlarge)',
+                    }, children: [_jsxs("div", { style: {
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 'var(--spacing-small)',
+                            }, children: [_jsx(ArborLogo, { showText: true, "aria-label": "Arbor", className: "my-arbor-logo--favicon" }), _jsx("span", { className: "ds-text", style: { color: 'var(--color-grey-600)' }, children: "16 px (favicon)" })] }), _jsxs("div", { style: {
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 'var(--spacing-small)',
+                            }, children: [_jsx(ArborLogo, { showText: true, "aria-label": "Arbor" }), _jsx("span", { className: "ds-text", style: { color: 'var(--color-grey-600)' }, children: "66 px (default)" })] }), _jsxs("div", { style: {
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 'var(--spacing-small)',
+                            }, children: [_jsx(ArborLogo, { showText: true, "aria-label": "Arbor", className: "my-arbor-logo--hero" }), _jsx("span", { className: "ds-text", style: { color: 'var(--color-grey-600)' }, children: "240 px (hero / login)" })] })] }), _jsxs("span", { className: "ds-text", style: {
+                        color: 'var(--color-grey-600)',
+                        fontStyle: 'italic',
+                    }, children: ["Resizing happens via CSS in your own stylesheet \u2014 for example", ' ', _jsx("code", { children: ".my-arbor-logo--hero { width: 240px; height: auto; }" }), ". Always set", ' ', _jsx("code", { children: "height: auto" }), ' ', "alongside", ' ', _jsx("code", { children: "width" }), ' ', "to preserve the 66:26 aspect ratio."] })] })] }));
+export const CustomSizing = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { ArborLogo } from '@arbor-education/design-system.components';
+
+// In your stylesheet:
+//   .my-arbor-logo--hero { width: 240px; height: auto; }
+
+function ArborLogoCustomSizingExample() {
+  return <ArborLogo showText aria-label="Arbor" className="my-arbor-logo--hero" />;
+}
+export default ArborLogoCustomSizingExample;
+`.trim(),
+            },
+        },
+    },
+    render: CustomSizingTemplate,
+}, 'SVG width and height are baked into the component — to resize, target the SVG with CSS via `className`. Always pair `width` with `height: auto` to preserve the 66:26 aspect ratio. The three sizes shown here cover the realistic range: favicon, default, and login hero.');
+//# sourceMappingURL=ArborLogo.stories.js.map

package/dist/components/arborLogo/ArborLogo.stories.js.map

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

package/dist/components/arborLogo/ArborLogo.test.d.ts

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

package/dist/components/arborLogo/ArborLogo.test.d.ts.map

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

package/dist/components/arborLogo/ArborLogo.test.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { expect, describe, it } from 'vitest';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { ArborLogo } from './ArborLogo';
+describe('ArborLogo', () => {
+    it('renders the icon-only variant', () => {
+        const { container } = render(_jsx(ArborLogo, {}));
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it('renders the icon-only variant with aria-hidden', () => {
+        const { container } = render(_jsx(ArborLogo, { "aria-hidden": true }));
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it('renders the icon-only variant with a custom aria-label', () => {
+        const { container } = render(_jsx(ArborLogo, { "aria-label": "Arbor Education logo" }));
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it('renders the text variant with black text', () => {
+        const { container } = render(_jsx(ArborLogo, { showText: true }));
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it('renders the text variant with white text', () => {
+        const { container } = render(_jsx(ArborLogo, { showText: true, textColor: "white" }));
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it('renders the text variant with aria-hidden', () => {
+        const { container } = render(_jsx(ArborLogo, { showText: true, "aria-hidden": true }));
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=ArborLogo.test.js.map

package/dist/components/arborLogo/ArborLogo.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArborLogo.test.js","sourceRoot":"","sources":["../../../src/components/arborLogo/ArborLogo.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACvC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC;QAC5C,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;QACxD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,SAAS,0BAAe,CAAC,CAAC;QACxD,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wDAAwD,EAAE,GAAG,EAAE;QAChE,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,SAAS,kBAAY,sBAAsB,GAAG,CAAC,CAAC;QAC9E,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;QAClD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,SAAS,IAAC,QAAQ,SAAG,CAAC,CAAC;QACrD,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;QAClD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,SAAS,IAAC,QAAQ,QAAC,SAAS,EAAC,OAAO,GAAG,CAAC,CAAC;QACvE,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACnD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,SAAS,IAAC,QAAQ,8BAAe,CAAC,CAAC;QACjE,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/components/dataViewCard/DataViewCard.d.ts

@@ -0,0 +1,19 @@
+import { Avatar } from '../avatar/Avatar';
+import { Card } from '../card/Card';
+import { Row } from '../row/Row';
+export type DataViewCardRow = Row.Props;
+type DataViewCardBaseProps = {
+    className?: string;
+    header: string;
+    avatar?: Avatar.Props;
+    rows: DataViewCardRow[];
+    disabled?: boolean;
+};
+export type DataViewCardProps = DataViewCardBaseProps & Card.InteractionProps;
+export declare const DataViewCard: (props: DataViewCardProps) => React.JSX.Element;
+export declare namespace DataViewCard {
+    type Props = DataViewCardProps;
+    type RowData = DataViewCardRow;
+}
+export {};
+//# sourceMappingURL=DataViewCard.d.ts.map

package/dist/components/dataViewCard/DataViewCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewCard.d.ts","sourceRoot":"","sources":["../../../src/components/dataViewCard/DataViewCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,IAAI,EAA2B,MAAM,sBAAsB,CAAC;AAErE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAGzC,MAAM,MAAM,eAAe,GAAG,GAAG,CAAC,KAAK,CAAC;AAExC,KAAK,qBAAqB,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC;IACtB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,CAAC;AAE9E,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,KAAG,KAAK,CAAC,GAAG,CAAC,OAoCjE,CAAC;AAEF,yBAAiB,YAAY,CAAC;IAC5B,KAAY,KAAK,GAAG,iBAAiB,CAAC;IACtC,KAAY,OAAO,GAAG,eAAe,CAAC;CACvC"}

package/dist/components/dataViewCard/DataViewCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Fragment } from 'react';
+import { Avatar } from '../avatar/Avatar';
+import { Card, getCardInteractionProps } from '../card/Card';
+import { Heading } from '../heading/Heading';
+import { Row } from '../row/Row';
+import { Separator } from '../separator/Separator';
+export const DataViewCard = (props) => {
+    const { className, header, avatar, rows, disabled = false } = props;
+    return (_jsx(Card, { ...getCardInteractionProps(props), className: classNames('ds-data-view-card__container', className), disabled: disabled, spacing: "default", children: _jsxs("article", { className: "ds-data-view-card", children: [avatar && (_jsx(Avatar, { size: "extra-large", ...avatar, className: classNames('ds-data-view-card__avatar', avatar.className) })), _jsxs("div", { className: "ds-data-view-card__content", children: [_jsx(Heading, { level: 4, className: "ds-data-view-card__header", children: header }), _jsx(Separator, {}), rows.map((row, index) => (_jsxs(Fragment, { children: [_jsx(Row, { ...row }), index < rows.length - 1 && _jsx(Separator, {})] }, `${row.label}-${index}`)))] })] }) }));
+};
+//# sourceMappingURL=DataViewCard.js.map

package/dist/components/dataViewCard/DataViewCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewCard.js","sourceRoot":"","sources":["../../../src/components/dataViewCard/DataViewCard.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAc3D,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAqB,EAAE;IAC1E,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEpE,OAAO,CACL,KAAC,IAAI,OACC,uBAAuB,CAAC,KAAK,CAAC,EAClC,SAAS,EAAE,UAAU,CAAC,8BAA8B,EAAE,SAAS,CAAC,EAChE,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,SAAS,YAEjB,mBAAS,SAAS,EAAC,mBAAmB,aACnC,MAAM,IAAI,CACT,KAAC,MAAM,IACL,IAAI,EAAC,aAAa,KACd,MAAM,EACV,SAAS,EAAE,UAAU,CACnB,2BAA2B,EAC3B,MAAM,CAAC,SAAS,CACjB,GACD,CACH,EACD,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,OAAO,IAAC,KAAK,EAAE,CAAC,EAAE,SAAS,EAAC,2BAA2B,YACrD,MAAM,GACC,EACV,KAAC,SAAS,KAAG,EACZ,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,MAAC,QAAQ,eACP,KAAC,GAAG,OAAK,GAAG,GAAI,EACf,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,SAAS,KAAG,KAF5B,GAAG,GAAG,CAAC,KAAK,IAAI,KAAK,EAAE,CAG3B,CACZ,CAAC,IACE,IACE,GACL,CACR,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/dataViewCard/DataViewCard.stories.d.ts

@@ -0,0 +1,100 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { DataViewCard } from './DataViewCard';
+declare function DataViewCardDocsPage(): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: (props: import("./DataViewCard").DataViewCardProps) => React.JSX.Element;
+    parameters: {
+        layout: string;
+        docs: {
+            page: typeof DataViewCardDocsPage;
+        };
+    };
+    tags: string[];
+    argTypes: {
+        header: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        avatar: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        rows: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        onClick: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        'aria-label': {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        'aria-labelledby': {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof DataViewCard>;
+export declare const Default: Story;
+export declare const Grid: Story;
+export declare const NoAvatar: Story;
+export declare const Static: Story;
+export declare const Disabled: Story;
+export declare const WithNote: Story;
+//# sourceMappingURL=DataViewCard.stories.d.ts.map

package/dist/components/dataViewCard/DataViewCard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewCard.stories.d.ts","sourceRoot":"","sources":["../../../src/components/dataViewCard/DataViewCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAU5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiF9C,iBAAS,oBAAoB,4CAmB5B;AAcD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwE2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AA8J3C,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KA6ClB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC"}