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

package/dist/components/kpiCard/KPICard.stories.js

@@ -1,18 +1,362 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { KVPList } from '../kvpList/KVPList';
-import { Progress } from '../progress/Progress';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
+import { fn } from 'storybook/test';
 import { KPICard } from './KPICard';
+import { Progress } from '../progress/Progress';
+import { KVPList } from '../kvpList/KVPList';
+// ---------------------------------------------------------------------------
+// Docs page content
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = [
+    '`KPICard` is a compact metric tile that surfaces a single key-performance indicator — a labelled value,',
+    'optionally expressed as a percentage, optionally followed by supplementary content.',
+    'It is built on `Card` with `spacing="dense"` and supports the same static/interactive modes.',
+].join(' ');
+const USAGE_GUIDANCE = [
+    '### When to use',
+    '',
+    '- Displaying a single headline figure — total pupils, attendance rate, behaviour incidents',
+    '- Dashboard or summary views where multiple KPIs sit side-by-side in a grid',
+    '- When the metric is navigational (click to drill down) — use the interactive variant with `onClick`',
+    '',
+    '---',
+    '',
+    '### When NOT to use',
+    '',
+    '| Situation | Use instead |',
+    '|---|---|',
+    '| Multiple related key–value pairs | [`KVPList`](?path=/docs/components-kvplist--docs) |',
+    '| Rich content card with text + image | [`ArticleCard`](?path=/docs/components-card-articlecard--docs) |',
+    '| Non-metric summary block | [`Card`](?path=/docs/components-card--docs) |',
+    '| A long label or multi-line value | `Card` with custom content |',
+].join('\n');
+const DEVELOPER_NOTES = [
+    '### Critical usage patterns',
+    '',
+    '**`label` and `value` are required** — omitting either will produce a broken layout.',
+    'Both accept `ReactNode`, so you can render formatted numbers, icons, or short JSX.',
+    '',
+    '```tsx',
+    '<KPICard label="Total pupils" value={247} />',
+    '```',
+    '',
+    '**Interactive KPICards require an accessible name.**',
+    'When `onClick` is provided, the underlying `Card` requires either `aria-label` or `aria-labelledby`.',
+    'The component throws in development and logs a console error in production if neither is supplied.',
+    '',
+    '```tsx',
+    '// ✅ Correct',
+    '<KPICard',
+    '  label="Attendance"',
+    '  value={94.2}',
+    '  isPercentage',
+    '  onClick={handleClick}',
+    '  aria-label="View attendance details"',
+    '/>',
+    '',
+    '// ❌ Missing accessible name — throws in dev',
+    '<KPICard label="Attendance" value={94.2} onClick={handleClick} />',
+    '```',
+    '',
+    '**`isPercentage` appends `%` to the DOM via a `<span>`.** Do not include `%` in the `value` prop — it will be doubled.',
+    '',
+    '**`children` renders below the value row**, spanning the full card width.',
+    'Use it for trend indicators, progress bars, or supplementary `KVPList` data.',
+    '',
+    '**`disabled` only has effect when `onClick` is provided.**',
+    'Passing `disabled` to a static `KPICard` (no `onClick`) is a no-op.',
+    '',
+    '---',
+    '',
+    '### Accessibility',
+    '',
+    '- Interactive cards receive `role="button"` and `tabIndex={0}` via the underlying `Card`',
+    '- Enter and Space trigger the `onClick` handler',
+    '- `aria-label` or `aria-labelledby` is **required** on interactive cards',
+    '- `aria-disabled={true}` is set on disabled interactive cards',
+    '',
+    '---',
+    '',
+    '### TypeScript types',
+    '',
+    '```ts',
+    "import { KPICard } from '@arbor-education/design-system.components';",
+    "import type { KPICardProps } from '@arbor-education/design-system.components';",
+    '```',
+].join('\n');
+const RELATED_COMPONENTS = [
+    '## Related components',
+    '',
+    '[Card](?path=/docs/components-card--docs) · [ArticleCard](?path=/docs/components-card-articlecard--docs) · [KVPList](?path=/docs/components-kvplist--docs) · [Progress](?path=/docs/components-progress--docs)',
+].join('\n');
+const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tweak `label`, `value`, `isPercentage`, or `disabled` to see the card update in real time.';
+// ---------------------------------------------------------------------------
+// Custom DocsPage
+// ---------------------------------------------------------------------------
+function KPICardDocsPage() {
+    return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(Markdown, { children: PROPS_INTRO }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
+}
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
 const meta = {
     title: 'Components/Card/KPICard',
     component: KPICard,
-};
-export const Default = {
-    args: {
-        label: 'KPI label text',
-        value: 'XX.X',
-        isPercentage: true,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: { page: KPICardDocsPage },
+    },
+    argTypes: {
+        'label': {
+            control: 'text',
+            description: '**Required.** The metric label rendered above the value.',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        'value': {
+            control: 'text',
+            description: '**Required.** The headline metric value. Do not include `%` — use `isPercentage` instead.',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        'isPercentage': {
+            control: 'boolean',
+            description: 'Appends a `%` suffix (`<span class="ds-kpi-card__suffix">`) after the value. Do NOT include `%` in the `value` prop.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        'disabled': {
+            control: 'boolean',
+            description: 'Disables an interactive card — sets `aria-disabled={true}` and suppresses click/keyboard handling. Has no effect on static cards (no `onClick`).',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        'onClick': {
+            control: false,
+            description: [
+                'Click handler. Providing this switches the card to **interactive mode** — it gains `role="button"`,',
+                '`tabIndex={0}`, and a chevron/arrow icon. Requires `aria-label` or `aria-labelledby`.',
+            ].join(' '),
+            table: {
+                type: { summary: '(e: MouseEvent<HTMLElement>) => void' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        'aria-label': {
+            control: 'text',
+            description: '**Required on interactive cards** (unless `aria-labelledby` is provided). Accessible name announced by screen readers.',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        'children': {
+            control: false,
+            description: 'Optional content rendered below the value row — use for progress bars, trend indicators, or supplementary `KVPList` data.',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        'className': {
+            control: false,
+            description: 'Additional CSS class names on the root element.',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
     },
-    render: args => (_jsxs(KPICard, { ...args, children: [_jsx(KVPList, { "aria-label": "Summary values", children: _jsxs(KVPList.Row, { orientation: "horizontal", children: [_jsx(KVPList.Term, { children: "Bar label text" }), _jsx(KVPList.Definition, { prominence: "strong", children: "XX.X" })] }) }), _jsxs(KVPList, { "aria-label": "Progress values", children: [_jsxs(KVPList.Row, { orientation: "horizontal", children: [_jsx(KVPList.Term, { children: "Bar label text" }), _jsx(KVPList.Definition, { prominence: "neutral", children: "X" }), _jsx(KVPList.Definition, { "aria-hidden": "true", isRow: true, children: _jsx(Progress, { "aria-label": "Progress bar first", max: 100, value: 95 }) })] }), _jsxs(KVPList.Row, { orientation: "horizontal", children: [_jsx(KVPList.Term, { children: "Bar label text" }), _jsx(KVPList.Definition, { prominence: "neutral", children: "X" }), _jsx(KVPList.Definition, { "aria-hidden": "true", isRow: true, children: _jsx(Progress, { "aria-label": "Progress bar second", max: 100, value: 95 }) })] })] })] })),
 };
 export default meta;
+// ---------------------------------------------------------------------------
+// Helper: attach a per-story description to docs
+// ---------------------------------------------------------------------------
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: { ...story.parameters?.docs, description: { story: description } },
+    },
+});
+// ---------------------------------------------------------------------------
+// Template components
+// ---------------------------------------------------------------------------
+const WithChildrenTemplate = () => (_jsx("div", { style: { maxWidth: '320px' }, children: _jsx(KPICard, { label: "Attendance rate", value: 94.2, isPercentage: true, children: _jsxs(KVPList, { children: [_jsxs(KVPList.Row, { children: [_jsx(KVPList.Term, { children: "This week" }), _jsx(KVPList.Definition, { children: "96.1%" })] }), _jsxs(KVPList.Row, { children: [_jsx(KVPList.Term, { children: "Last week" }), _jsx(KVPList.Definition, { children: "92.3%" })] })] }) }) }));
+const WithProgressTemplate = () => (_jsx("div", { style: { maxWidth: '320px' }, children: _jsx(KPICard, { label: "Attendance rate", value: 94.2, isPercentage: true, children: _jsx("div", { style: { marginTop: 'var(--spacing-small)' }, children: _jsx(Progress, { value: 94.2, max: 100 }) }) }) }));
+const MultipleCardsTemplate = () => (_jsxs("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--spacing-medium)' }, children: [_jsx(KPICard, { label: "Total pupils", value: 247 }), _jsx(KPICard, { label: "Attendance rate", value: 94.2, isPercentage: true }), _jsx(KPICard, { label: "Behaviour incidents", value: 3 }), _jsx(KPICard, { label: "Staff present", value: 38 }), _jsx(KPICard, { label: "Pupils on report", value: 12 }), _jsx(KPICard, { label: "Average mark", value: 78, isPercentage: true })] }));
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+export const Default = withDescription({
+    args: {
+        label: 'Total pupils',
+        value: 247,
+        isPercentage: false,
+        disabled: false,
+    },
+    render: args => (_jsx("div", { style: { maxWidth: '320px' }, children: _jsx(KPICard, { ...args }) })),
+}, 'The base KPICard — `label` and `value` are the only required props. Toggle `isPercentage` or `disabled` in **Controls**, or change the `label` and `value` text.');
+export const AsPercentage = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { KPICard } from '@arbor-education/design-system.components';
+
+function AsPercentageExample() {
+  return (
+    <KPICard
+      label="Attendance rate"
+      value={94.2}
+      isPercentage
+    />
+  );
+}
+export default AsPercentageExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx("div", { style: { maxWidth: '320px' }, children: _jsx(KPICard, { label: "Attendance rate", value: 94.2, isPercentage: true }) })),
+}, '`isPercentage` appends a `%` suffix to the value. The `%` is rendered in a separate `<span>` — do NOT include it in the `value` prop or it will appear twice.');
+export const WithChildren = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { KPICard, KVPList } from '@arbor-education/design-system.components';
+
+function WithChildrenExample() {
+  return (
+    <KPICard label="Attendance rate" value={94.2} isPercentage>
+      <KVPList>
+        <KVPList.Row>
+          <KVPList.Term>This week</KVPList.Term>
+          <KVPList.Definition>96.1%</KVPList.Definition>
+        </KVPList.Row>
+        <KVPList.Row>
+          <KVPList.Term>Last week</KVPList.Term>
+          <KVPList.Definition>92.3%</KVPList.Definition>
+        </KVPList.Row>
+      </KVPList>
+    </KPICard>
+  );
+}
+export default WithChildrenExample;
+`.trim(),
+            },
+        },
+    },
+    render: WithChildrenTemplate,
+}, '`children` renders below the value row, spanning the full card width. Use it for trend breakdowns (`KVPList`), progress bars, or any supplementary metric context.');
+export const WithProgressBar = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { KPICard, Progress } from '@arbor-education/design-system.components';
+
+function WithProgressBarExample() {
+  return (
+    <KPICard label="Attendance rate" value={94.2} isPercentage>
+      <Progress value={94.2} max={100} />
+    </KPICard>
+  );
+}
+export default WithProgressBarExample;
+`.trim(),
+            },
+        },
+    },
+    render: WithProgressTemplate,
+}, 'A `Progress` bar in `children` provides an at-a-glance visual indicator alongside the percentage value.');
+export const Interactive = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { KPICard } from '@arbor-education/design-system.components';
+
+function InteractiveExample() {
+  return (
+    <KPICard
+      label="Total pupils"
+      value={247}
+      onClick={() => console.log('navigate to pupils list')}
+      aria-label="View all pupils"
+    />
+  );
+}
+export default InteractiveExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx("div", { style: { maxWidth: '320px' }, children: _jsx(KPICard, { label: "Total pupils", value: 247, onClick: fn(), "aria-label": "View all pupils" }) })),
+}, 'With `onClick`, the card becomes interactive — `role="button"`, `tabIndex={0}`, and a chevron/arrow icon appear. `aria-label` is required and must describe the navigation destination.');
+export const Disabled = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { KPICard } from '@arbor-education/design-system.components';
+
+function DisabledExample() {
+  return (
+    <KPICard
+      label="Behaviour incidents"
+      value={3}
+      onClick={() => console.log('never fires')}
+      aria-label="View behaviour incidents"
+      disabled
+    />
+  );
+}
+export default DisabledExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx("div", { style: { maxWidth: '320px' }, children: _jsx(KPICard, { label: "Behaviour incidents", value: 3, onClick: fn(), "aria-label": "View behaviour incidents", disabled: true }) })),
+}, '`disabled` on an interactive card — `aria-disabled={true}` is set and click/keyboard handling is suppressed. `onClick` must still be provided to activate the disabled visual state.');
+export const MultipleCards = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { KPICard } from '@arbor-education/design-system.components';
+
+function MultipleCardsExample() {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--spacing-medium)' }}>
+      <KPICard label="Total pupils" value={247} />
+      <KPICard label="Attendance rate" value={94.2} isPercentage />
+      <KPICard label="Behaviour incidents" value={3} />
+    </div>
+  );
+}
+export default MultipleCardsExample;
+`.trim(),
+            },
+        },
+    },
+    render: MultipleCardsTemplate,
+}, 'Multiple `KPICard` tiles in a CSS grid — the typical dashboard layout. Each card is self-contained and can independently be static or interactive.');
 //# sourceMappingURL=KPICard.stories.js.map

package/dist/components/kpiCard/KPICard.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"KPICard.stories.js","sourceRoot":"","sources":["../../../src/components/kpiCard/KPICard.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,OAAO;CACY,CAAC;AAIjC,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,gBAAgB;QACvB,KAAK,EAAE,MAAM;QACb,YAAY,EAAE,IAAI;KACnB;IACD,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,MAAC,OAAO,OAAK,IAAI,aACf,KAAC,OAAO,kBAAY,gBAAgB,YAClC,MAAC,OAAO,CAAC,GAAG,IAAC,WAAW,EAAC,YAAY,aACnC,KAAC,OAAO,CAAC,IAAI,iCAA8B,EAC3C,KAAC,OAAO,CAAC,UAAU,IAAC,UAAU,EAAC,QAAQ,qBAA0B,IACrD,GACN,EACV,MAAC,OAAO,kBAAY,iBAAiB,aACnC,MAAC,OAAO,CAAC,GAAG,IAAC,WAAW,EAAC,YAAY,aACnC,KAAC,OAAO,CAAC,IAAI,iCAA8B,EAC3C,KAAC,OAAO,CAAC,UAAU,IAAC,UAAU,EAAC,SAAS,kBAAuB,EAC/D,KAAC,OAAO,CAAC,UAAU,mBAAa,MAAM,EAAC,KAAK,kBAC1C,KAAC,QAAQ,kBAAY,oBAAoB,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,GAAI,GAC9C,IACT,EACd,MAAC,OAAO,CAAC,GAAG,IAAC,WAAW,EAAC,YAAY,aACnC,KAAC,OAAO,CAAC,IAAI,iCAA8B,EAC3C,KAAC,OAAO,CAAC,UAAU,IAAC,UAAU,EAAC,SAAS,kBAAuB,EAC/D,KAAC,OAAO,CAAC,UAAU,mBAAa,MAAM,EAAC,KAAK,kBAC1C,KAAC,QAAQ,kBAAY,qBAAqB,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,GAAI,GAC/C,IACT,IACN,IACF,CACX;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"KPICard.stories.js","sourceRoot":"","sources":["../../../src/components/kpiCard/KPICard.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,QAAQ,EACR,OAAO,IAAI,UAAU,EACrB,QAAQ,EACR,OAAO,IAAI,UAAU,EACrB,OAAO,EACP,QAAQ,EACR,KAAK,GACN,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,8EAA8E;AAC9E,oBAAoB;AACpB,8EAA8E;AAE9E,MAAM,iBAAiB,GAAG;IACxB,yGAAyG;IACzG,qFAAqF;IACrF,8FAA8F;CAC/F,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,cAAc,GAAG;IACrB,iBAAiB;IACjB,EAAE;IACF,4FAA4F;IAC5F,6EAA6E;IAC7E,sGAAsG;IACtG,EAAE;IACF,KAAK;IACL,EAAE;IACF,qBAAqB;IACrB,EAAE;IACF,6BAA6B;IAC7B,WAAW;IACX,0FAA0F;IAC1F,0GAA0G;IAC1G,4EAA4E;IAC5E,mEAAmE;CACpE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,eAAe,GAAG;IACtB,6BAA6B;IAC7B,EAAE;IACF,sFAAsF;IACtF,oFAAoF;IACpF,EAAE;IACF,QAAQ;IACR,8CAA8C;IAC9C,KAAK;IACL,EAAE;IACF,sDAAsD;IACtD,sGAAsG;IACtG,oGAAoG;IACpG,EAAE;IACF,QAAQ;IACR,cAAc;IACd,UAAU;IACV,sBAAsB;IACtB,gBAAgB;IAChB,gBAAgB;IAChB,yBAAyB;IACzB,wCAAwC;IACxC,IAAI;IACJ,EAAE;IACF,8CAA8C;IAC9C,mEAAmE;IACnE,KAAK;IACL,EAAE;IACF,wHAAwH;IACxH,EAAE;IACF,2EAA2E;IAC3E,8EAA8E;IAC9E,EAAE;IACF,4DAA4D;IAC5D,qEAAqE;IACrE,EAAE;IACF,KAAK;IACL,EAAE;IACF,mBAAmB;IACnB,EAAE;IACF,0FAA0F;IAC1F,iDAAiD;IACjD,0EAA0E;IAC1E,+DAA+D;IAC/D,EAAE;IACF,KAAK;IACL,EAAE;IACF,sBAAsB;IACtB,EAAE;IACF,OAAO;IACP,sEAAsE;IACtE,gFAAgF;IAChF,KAAK;CACN,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,kBAAkB,GAAG;IACzB,uBAAuB;IACvB,EAAE;IACF,gNAAgN;CACjN,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,WAAW,GAAG,mJAAmJ,CAAC;AAExK,8EAA8E;AAC9E,kBAAkB;AAClB,8EAA8E;AAE9E,SAAS,eAAe;IACtB,OAAO,CACL,8BACE,KAAC,KAAK,KAAG,EACT,KAAC,QAAQ,KAAG,EACZ,KAAC,QAAQ,cAAE,iBAAiB,GAAY,EACxC,KAAC,UAAU,sCAAiC,EAC5C,KAAC,QAAQ,cAAE,WAAW,GAAY,EAClC,KAAC,UAAU,KAAG,EACd,KAAC,QAAQ,KAAG,EACZ,KAAC,UAAU,iCAA4B,EACvC,KAAC,QAAQ,cAAE,cAAc,GAAY,EACrC,KAAC,UAAU,kCAA6B,EACxC,KAAC,QAAQ,cAAE,eAAe,GAAY,EACtC,KAAC,UAAU,2BAAsB,EACjC,KAAC,OAAO,IAAC,KAAK,EAAC,EAAE,GAAG,EACpB,KAAC,QAAQ,cAAE,kBAAkB,GAAY,IACxC,CACJ,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,OAAO;AACP,8EAA8E;AAE9E,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,OAAO;IAClB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE;KAChC;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0DAA0D;YACvE,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aAC/B;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,2FAA2F;YACxG,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aAC/B;SACF;QACD,cAAc,EAAE;YACd,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,sHAAsH;YACnI,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kJAAkJ;YAC/J,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,KAAK;YACd,WAAW,EAAE;gBACX,qGAAqG;gBACrG,uFAAuF;aACxF,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,sCAAsC,EAAE;gBACzD,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,wHAAwH;YACrI,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,2HAA2H;YACxI,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aAC/B;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,iDAAiD;YAC9D,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF;KACF;CAC6B,CAAC;AAEjC,eAAe,IAAI,CAAC;AAGpB,8EAA8E;AAC9E,iDAAiD;AACjD,8EAA8E;AAE9E,MAAM,eAAe,GAAG,CAAC,KAAY,EAAE,WAAmB,EAAS,EAAE,CAAC,CAAC;IACrE,GAAG,KAAK;IACR,UAAU,EAAE;QACV,GAAG,KAAK,CAAC,UAAU;QACnB,IAAI,EAAE,EAAE,GAAG,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE;KACzE;CACF,CAAC,CAAC;AAEH,8EAA8E;AAC9E,sBAAsB;AACtB,8EAA8E;AAE9E,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACjC,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,OAAO,IAAC,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,IAAI,EAAE,YAAY,kBACxD,MAAC,OAAO,eACN,MAAC,OAAO,CAAC,GAAG,eACV,KAAC,OAAO,CAAC,IAAI,4BAAyB,EACtC,KAAC,OAAO,CAAC,UAAU,wBAA2B,IAClC,EACd,MAAC,OAAO,CAAC,GAAG,eACV,KAAC,OAAO,CAAC,IAAI,4BAAyB,EACtC,KAAC,OAAO,CAAC,UAAU,wBAA2B,IAClC,IACN,GACF,GACN,CACP,CAAC;AAEF,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACjC,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,OAAO,IAAC,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,IAAI,EAAE,YAAY,kBACxD,cAAK,KAAK,EAAE,EAAE,SAAS,EAAE,sBAAsB,EAAE,YAC/C,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,GAAI,GAC/B,GACE,GACN,CACP,CAAC;AAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,CAClC,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,EAAE,uBAAuB,EAAE,aAClG,KAAC,OAAO,IAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,GAAG,GAAI,EAC5C,KAAC,OAAO,IAAC,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,IAAI,EAAE,YAAY,SAAG,EAC7D,KAAC,OAAO,IAAC,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,CAAC,GAAI,EACjD,KAAC,OAAO,IAAC,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,GAAI,EAC5C,KAAC,OAAO,IAAC,KAAK,EAAC,kBAAkB,EAAC,KAAK,EAAE,EAAE,GAAI,EAC/C,KAAC,OAAO,IAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,EAAE,YAAY,SAAG,IACpD,CACP,CAAC;AAEF,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E,MAAM,CAAC,MAAM,OAAO,GAAU,eAAe,CAC3C;IACE,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,GAAG;QACV,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,KAAK;KAChB;IACD,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,OAAO,OAAK,IAAI,GAAI,GACjB,CACP;CACF,EACD,kKAAkK,CACnK,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU,eAAe,CAChD;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;CAaf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,OAAO,IAAC,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,IAAI,EAAE,YAAY,SAAG,GACzD,CACP;CACF,EACD,+JAA+J,CAChK,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU,eAAe,CAChD;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;CAoBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,oBAAoB;CAC7B,EACD,oKAAoK,CACrK,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU,eAAe,CACnD;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;CAWf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,oBAAoB;CAC7B,EACD,yGAAyG,CAC1G,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU,eAAe,CAC/C;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;CAcf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,OAAO,IACN,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,EAAE,EAAE,gBACF,iBAAiB,GAC5B,GACE,CACP;CACF,EACD,yLAAyL,CAC1L,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU,eAAe,CAC5C;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;CAef,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,OAAO,IACN,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,EAAE,EAAE,gBACF,0BAA0B,EACrC,QAAQ,SACR,GACE,CACP;CACF,EACD,sLAAsL,CACvL,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU,eAAe,CACjD;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;CAaf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,qBAAqB;CAC9B,EACD,oJAAoJ,CACrJ,CAAC"}

package/dist/components/kvpList/KVPList.stories.d.ts

@@ -1,4 +1,6 @@
 import type { StoryObj } from '@storybook/react-vite';
+import { KVPList } from './KVPList';
+declare function KVPListDocsPage(): import("react/jsx-runtime").JSX.Element;
 declare const meta: {
     title: string;
     component: {
@@ -18,10 +20,61 @@ declare const meta: {
             displayName: string;
         };
     };
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            page: typeof KVPListDocsPage;
+        };
+    };
+    argTypes: {
+        '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;
+                };
+            };
+        };
+        children: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
 };
-type Story = StoryObj<typeof meta>;
-export declare const Summary: Story;
-export declare const WithProgressAndPercentage: Story;
-export declare const WithProgressNoPercentage: Story;
 export default meta;
+type Story = StoryObj<typeof KVPList>;
+export declare const Default: Story;
+export declare const HorizontalOrientation: Story;
+export declare const StrongProminence: Story;
+export declare const IsRow: Story;
+export declare const AsPercentage: Story;
+export declare const MultipleRows: Story;
+export declare const MixedOrientations: Story;
+export declare const WithAriaLabel: Story;
+export declare const WithProgressBars: Story;
 //# sourceMappingURL=KVPList.stories.d.ts.map

package/dist/components/kvpList/KVPList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KVPList.stories.d.ts","sourceRoot":"","sources":["../../../src/components/kvpList/KVPList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;CAGsB,CAAC;AAEjC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAYvC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAYtC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"KVPList.stories.d.ts","sourceRoot":"","sources":["../../../src/components/kvpList/KVPList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAsHpC,iBAAS,eAAe,4CAyBvB;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAoFtC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAuCnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAuC9B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA0CnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA4C1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAoC1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAgC/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAgD3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA+B9B,CAAC"}