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

package/dist/components/icoText/IcoText.stories.js

@@ -1,24 +1,319 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { IcoText } from './IcoText';
+// ---------------------------------------------------------------------------
+// Docs page content
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = [
+    '`IcoText` is a compound layout component that pairs an icon in a left rail with a heading and/or paragraph.',
+    'It is the canonical icon-plus-text primitive in this design system — used internally by `ArticleCard`',
+    'and available for direct use in any context that needs an icon anchoring labelled content.',
+].join(' ');
+const ICON_PROPS = [
+    '| Prop | Type | Default | Description |',
+    '|---|---|---|---|',
+    '| `name` | `IconName` | — | **Required.** The icon identifier |',
+    '| `size` | `12 \\| 16 \\| 24` | `24` | Icon size in pixels |',
+    '| `color` | `string` | — | Icon colour — use a CSS token e.g. `var(--color-grey-600)` |',
+    '| `screenReaderText` | `string` | — | Accessible label. Omit for decorative icons (icon becomes `aria-hidden`) |',
+    '| `className` | `string` | — | Additional CSS classes |',
+].join('\n');
+const HEADING_PROPS = [
+    '| Prop | Type | Default | Description |',
+    '|---|---|---|---|',
+    '| `children` | `ReactNode` | — | **Required.** Heading text |',
+    '| `...HTMLAttributes<h4>` | | | All standard heading element attributes forwarded |',
+].join('\n');
+const PARAGRAPH_PROPS = [
+    '| Prop | Type | Default | Description |',
+    '|---|---|---|---|',
+    '| `children` | `ReactNode` | — | **Required.** Paragraph text |',
+    '| `...HTMLAttributes<p>` | | | All standard paragraph element attributes forwarded |',
+].join('\n');
+const USAGE_GUIDANCE = [
+    '### When to use',
+    '',
+    '- Pairing a meaningful icon with a short heading and/or description — attendance alerts, feature blurbs, help text',
+    '- Inside panels, list items, or cards where an icon anchors the content',
+    '- As the building block for `ArticleCard` icon-rail layouts',
+    '',
+    '---',
+    '',
+    '### When NOT to use',
+    '',
+    '| Situation | Use instead |',
+    '|---|---|',
+    '| Content inside a navigable card | [`ArticleCard`](?path=/docs/components-card-articlecard--docs) |',
+    '| Icon with no text | [`Icon`](?path=/docs/components-icon--docs) directly |',
+    '| Long-form prose | Semantic HTML `<p>` with a separate heading |',
+    '| Interactive element | Wrap `IcoText` inside a `Card` or `Button` — never add `onClick` to `IcoText` itself |',
+].join('\n');
+const DEVELOPER_NOTES = [
+    '### Critical usage patterns',
+    '',
+    '**`IcoText.Icon` is automatically hoisted to the left rail** regardless of position in JSX.',
+    'The root inspects `children`, pulls out any `IcoText.Icon` elements into a flex-shrink-0 left column,',
+    'and places all other children (Heading, Paragraph) in the content column.',
+    '',
+    '```tsx',
+    '<IcoText>',
+    '  <IcoText.Icon name="guardians" />',
+    '  <IcoText.Heading>Year 9 Attendance</IcoText.Heading>',
+    '  <IcoText.Paragraph>28 pupils · 94.2% this term</IcoText.Paragraph>',
+    '</IcoText>',
+    '```',
+    '',
+    '**`IcoText.Heading` always renders as `<h4>`.** There is no `level` prop. Verify your document',
+    'heading hierarchy is correct before using `IcoText` as a standalone heading.',
+    '',
+    '**Omit `screenReaderText` for decorative icons.** The icon is rendered with `aria-hidden="true"`',
+    'when `screenReaderText` is absent. The heading or surrounding text should carry the accessible meaning.',
+    '',
+    '---',
+    '',
+    '### Accessibility',
+    '',
+    '- Decorative icons (no `screenReaderText`): `aria-hidden="true"` — screen readers skip them',
+    '- Meaningful icons: provide `screenReaderText` so the icon has an accessible label',
+    '- `IcoText.Heading` renders `<h4>` — verify your document heading hierarchy',
+    '- `IcoText.Paragraph` renders `<p>` — semantically appropriate for supporting text',
+    '',
+    '---',
+    '',
+    '### TypeScript types',
+    '',
+    '```ts',
+    "import { IcoText } from '@arbor-education/design-system.components';",
+    "import type { IcoTextProps, IcoTextIconProps, IcoTextHeadingProps, IcoTextParagraphProps } from '@arbor-education/design-system.components';",
+    '```',
+].join('\n');
+const RELATED_COMPONENTS = [
+    '## Related components',
+    '',
+    '[ArticleCard](?path=/docs/components-card-articlecard--docs) · [Icon](?path=/docs/components-icon--docs) · [Card](?path=/docs/components-card--docs)',
+].join('\n');
+const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tweak any prop to see the story update in real time.';
+// ---------------------------------------------------------------------------
+// Custom DocsPage
+// ---------------------------------------------------------------------------
+function IcoTextDocsPage() {
+    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: "IcoText.Icon props" }), _jsx(Markdown, { children: ICON_PROPS }), _jsx(DocHeading, { children: "IcoText.Heading props" }), _jsx(Markdown, { children: HEADING_PROPS }), _jsx(DocHeading, { children: "IcoText.Paragraph props" }), _jsx(Markdown, { children: PARAGRAPH_PROPS }), _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/IcoText',
     component: IcoText,
+    tags: ['autodocs'],
     parameters: {
-        docs: {
-            description: {
-                component: 'Use `IcoText.Icon` as a direct child of `IcoText` so it is hoisted into the leading icon rail.',
-            },
+        layout: 'padded',
+        docs: { page: IcoTextDocsPage },
+    },
+    argTypes: {
+        className: {
+            control: false,
+            description: 'Additional CSS class names on the root `div.ds-ico-text` element.',
+            table: { type: { summary: 'string' } },
+        },
+        children: {
+            control: false,
+            description: 'Compose using `IcoText.Icon`, `IcoText.Heading`, and `IcoText.Paragraph` sub-components.',
+            table: { type: { summary: 'ReactNode' } },
         },
     },
 };
-export const WithIconAndParagraph = {
-    render: args => (_jsxs(IcoText, { ...args, children: [_jsx(IcoText.Icon, { name: "eye" }), _jsx(IcoText.Heading, { children: "Article heading" }), _jsx(IcoText.Paragraph, { children: "Supporting text for an article card layout." })] })),
-};
-export const TextOnly = {
-    render: args => (_jsxs(IcoText, { ...args, children: [_jsx(IcoText.Heading, { children: "Article heading" }), _jsx(IcoText.Paragraph, { children: "Supporting text with no leading icon." })] })),
-};
-export const HeadingWithIcon = {
-    render: args => (_jsxs(IcoText, { ...args, children: [_jsx(IcoText.Icon, { name: "eye" }), _jsx(IcoText.Heading, { children: "Heading only" })] })),
-};
 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 IconSizesTemplate = () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xlarge)' }, children: [12, 16, 24].map(size => (_jsxs("div", { children: [_jsx("p", { className: "ds-text", style: { margin: '0 0 var(--spacing-small)', color: 'var(--color-grey-600)' }, children: `size={${size}}` }), _jsxs(IcoText, { children: [_jsx(IcoText.Icon, { name: "guardians", size: size }), _jsx(IcoText.Heading, { children: "Year 9 Attendance" }), _jsx(IcoText.Paragraph, { children: "28 pupils \u00B7 94.2% average this term" })] })] }, size))) }));
+const IconColorsTemplate = () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xlarge)' }, children: [
+        { color: 'var(--color-semantic-info-600)', label: 'Info — var(--color-semantic-info-600)' },
+        { color: 'var(--color-semantic-success-600)', label: 'Success — var(--color-semantic-success-600)' },
+        { color: 'var(--color-semantic-warning-600)', label: 'Warning — var(--color-semantic-warning-600)' },
+        { color: 'var(--color-semantic-destructive-600)', label: 'Destructive — var(--color-semantic-destructive-600)' },
+    ].map(({ color, label }) => (_jsxs("div", { children: [_jsx("p", { className: "ds-text", style: { margin: '0 0 var(--spacing-small)', color: 'var(--color-grey-600)' }, children: label }), _jsxs(IcoText, { children: [_jsx(IcoText.Icon, { name: "triangle-alert", color: color }), _jsx(IcoText.Heading, { children: "Attendance alert" }), _jsx(IcoText.Paragraph, { children: "3 pupils below 90% this half-term" })] })] }, color))) }));
+const MultipleParagraphsTemplate = () => (_jsxs(IcoText, { children: [_jsx(IcoText.Icon, { name: "date" }), _jsx(IcoText.Heading, { children: "Parents' evening \u2014 Tuesday 14 May" }), _jsx(IcoText.Paragraph, { children: "4:00 pm \u2013 7:00 pm \u00B7 Main Hall" }), _jsx(IcoText.Paragraph, { children: "Appointments available every 10 minutes. Please arrive 5 minutes early." })] }));
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+export const Default = withDescription({
+    render: () => (_jsxs(IcoText, { children: [_jsx(IcoText.Icon, { name: "guardians" }), _jsx(IcoText.Heading, { children: "Year 9 Attendance" }), _jsx(IcoText.Paragraph, { children: "28 pupils \u00B7 94.2% average this term" })] })),
+}, 'The full canonical composition — `IcoText.Icon` in the left rail, `IcoText.Heading` and `IcoText.Paragraph` in the content column.');
+export const HeadingOnly = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { IcoText } from '@arbor-education/design-system.components';
+
+function HeadingOnlyExample() {
+  return (
+    <IcoText>
+      <IcoText.Icon name="book-open" />
+      <IcoText.Heading>Assessment policy</IcoText.Heading>
+    </IcoText>
+  );
+}
+export default HeadingOnlyExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs(IcoText, { children: [_jsx(IcoText.Icon, { name: "book-open" }), _jsx(IcoText.Heading, { children: "Assessment policy" })] })),
+}, 'Icon + Heading with no Paragraph — the compact pattern for short navigational labels.');
+export const WithoutIcon = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { IcoText } from '@arbor-education/design-system.components';
+
+function WithoutIconExample() {
+  return (
+    <IcoText>
+      <IcoText.Heading>Behaviour report</IcoText.Heading>
+      <IcoText.Paragraph>No incidents recorded this week. All targets met.</IcoText.Paragraph>
+    </IcoText>
+  );
+}
+export default WithoutIconExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs(IcoText, { children: [_jsx(IcoText.Heading, { children: "Behaviour report" }), _jsx(IcoText.Paragraph, { children: "No incidents recorded this week. All targets met." })] })),
+}, 'Heading + Paragraph with no icon. The left rail disappears cleanly — `IcoText.Icon` is entirely optional.');
+export const IconWithScreenReaderText = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { IcoText } from '@arbor-education/design-system.components';
+
+function IconWithScreenReaderTextExample() {
+  return (
+    <IcoText>
+      <IcoText.Icon
+        name="triangle-alert"
+        color="var(--color-semantic-warning-600)"
+        screenReaderText="Warning"
+      />
+      <IcoText.Heading>Attendance below target</IcoText.Heading>
+      <IcoText.Paragraph>Alice Johnson — 78.4% this term. Intervention recommended.</IcoText.Paragraph>
+    </IcoText>
+  );
+}
+export default IconWithScreenReaderTextExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs(IcoText, { children: [_jsx(IcoText.Icon, { name: "triangle-alert", color: "var(--color-semantic-warning-600)", screenReaderText: "Warning" }), _jsx(IcoText.Heading, { children: "Attendance below target" }), _jsx(IcoText.Paragraph, { children: "Alice Johnson \u2014 78.4% this term. Intervention recommended." })] })),
+}, 'When the icon carries meaning not conveyed by the heading text, provide `screenReaderText`. Without it the icon is `aria-hidden="true"`. Here the warning triangle conveys severity — screen readers announce "Warning, Attendance below target".');
+export const IconSizes = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { IcoText } from '@arbor-education/design-system.components';
+
+function IconSizesExample() {
+  return (
+    <>
+      <IcoText>
+        <IcoText.Icon name="guardians" size={12} />
+        <IcoText.Heading>size 12</IcoText.Heading>
+        <IcoText.Paragraph>Use in very compact contexts</IcoText.Paragraph>
+      </IcoText>
+      <IcoText>
+        <IcoText.Icon name="guardians" size={16} />
+        <IcoText.Heading>size 16</IcoText.Heading>
+        <IcoText.Paragraph>Use in moderately compact contexts</IcoText.Paragraph>
+      </IcoText>
+      <IcoText>
+        <IcoText.Icon name="guardians" size={24} />
+        <IcoText.Heading>size 24 (default)</IcoText.Heading>
+        <IcoText.Paragraph>Standard — aligns best with h4 line-height</IcoText.Paragraph>
+      </IcoText>
+    </>
+  );
+}
+export default IconSizesExample;
+`.trim(),
+            },
+        },
+    },
+    render: IconSizesTemplate,
+}, 'All three supported icon sizes — 12, 16, and 24 (default). Use smaller sizes only in compact contexts such as table cells or dense lists. The `24` default aligns best with `IcoText.Heading`\'s h4 line-height.');
+export const IconColors = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { IcoText } from '@arbor-education/design-system.components';
+
+function IconColorsExample() {
+  return (
+    <IcoText>
+      <IcoText.Icon name="triangle-alert" color="var(--color-semantic-warning-600)" />
+      <IcoText.Heading>Attendance alert</IcoText.Heading>
+      <IcoText.Paragraph>3 pupils below 90% this half-term</IcoText.Paragraph>
+    </IcoText>
+  );
+}
+export default IconColorsExample;
+`.trim(),
+            },
+        },
+    },
+    render: IconColorsTemplate,
+}, 'The `color` prop on `IcoText.Icon` accepts any CSS value — always use design token variables, never hardcoded hex. Semantic tokens (`--color-semantic-*`) are most appropriate for status-indicating icons.');
+export const MultipleParagraphs = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { IcoText } from '@arbor-education/design-system.components';
+
+function MultipleParagraphsExample() {
+  return (
+    <IcoText>
+      <IcoText.Icon name="calendar" />
+      <IcoText.Heading>Parents' evening — Tuesday 14 May</IcoText.Heading>
+      <IcoText.Paragraph>4:00 pm – 7:00 pm · Main Hall</IcoText.Paragraph>
+      <IcoText.Paragraph>Appointments every 10 minutes. Please arrive 5 minutes early.</IcoText.Paragraph>
+    </IcoText>
+  );
+}
+export default MultipleParagraphsExample;
+`.trim(),
+            },
+        },
+    },
+    render: MultipleParagraphsTemplate,
+}, 'Multiple `IcoText.Paragraph` sub-components stack vertically in the content column. Use for supplementary detail lines below the primary heading.');
 //# sourceMappingURL=IcoText.stories.js.map

package/dist/components/icoText/IcoText.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"IcoText.stories.js","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,OAAO;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EACP,gGAAgG;aACnG;SACF;KACF;CAC6B,CAAC;AAIjC,MAAM,CAAC,MAAM,oBAAoB,GAAU;IACzC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,MAAC,OAAO,OAAK,IAAI,aACf,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG,EAC3B,KAAC,OAAO,CAAC,OAAO,kCAAkC,EAClD,KAAC,OAAO,CAAC,SAAS,8DAAgE,IAC1E,CACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,MAAC,OAAO,OAAK,IAAI,aACf,KAAC,OAAO,CAAC,OAAO,kCAAkC,EAClD,KAAC,OAAO,CAAC,SAAS,wDAA0D,IACpE,CACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,MAAC,OAAO,OAAK,IAAI,aACf,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG,EAC3B,KAAC,OAAO,CAAC,OAAO,+BAA+B,IACvC,CACX;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"IcoText.stories.js","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.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,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,8EAA8E;AAC9E,oBAAoB;AACpB,8EAA8E;AAE9E,MAAM,iBAAiB,GAAG;IACxB,6GAA6G;IAC7G,uGAAuG;IACvG,4FAA4F;CAC7F,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,UAAU,GAAG;IACjB,yCAAyC;IACzC,mBAAmB;IACnB,iEAAiE;IACjE,8DAA8D;IAC9D,yFAAyF;IACzF,kHAAkH;IAClH,yDAAyD;CAC1D,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,aAAa,GAAG;IACpB,yCAAyC;IACzC,mBAAmB;IACnB,+DAA+D;IAC/D,qFAAqF;CACtF,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,eAAe,GAAG;IACtB,yCAAyC;IACzC,mBAAmB;IACnB,iEAAiE;IACjE,sFAAsF;CACvF,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,cAAc,GAAG;IACrB,iBAAiB;IACjB,EAAE;IACF,oHAAoH;IACpH,yEAAyE;IACzE,6DAA6D;IAC7D,EAAE;IACF,KAAK;IACL,EAAE;IACF,qBAAqB;IACrB,EAAE;IACF,6BAA6B;IAC7B,WAAW;IACX,sGAAsG;IACtG,8EAA8E;IAC9E,mEAAmE;IACnE,gHAAgH;CACjH,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,eAAe,GAAG;IACtB,6BAA6B;IAC7B,EAAE;IACF,6FAA6F;IAC7F,uGAAuG;IACvG,2EAA2E;IAC3E,EAAE;IACF,QAAQ;IACR,WAAW;IACX,qCAAqC;IACrC,wDAAwD;IACxD,sEAAsE;IACtE,YAAY;IACZ,KAAK;IACL,EAAE;IACF,gGAAgG;IAChG,8EAA8E;IAC9E,EAAE;IACF,kGAAkG;IAClG,yGAAyG;IACzG,EAAE;IACF,KAAK;IACL,EAAE;IACF,mBAAmB;IACnB,EAAE;IACF,6FAA6F;IAC7F,oFAAoF;IACpF,6EAA6E;IAC7E,oFAAoF;IACpF,EAAE;IACF,KAAK;IACL,EAAE;IACF,sBAAsB;IACtB,EAAE;IACF,OAAO;IACP,sEAAsE;IACtE,8IAA8I;IAC9I,KAAK;CACN,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,kBAAkB,GAAG;IACzB,uBAAuB;IACvB,EAAE;IACF,sJAAsJ;CACvJ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,WAAW,GAAG,6GAA6G,CAAC;AAElI,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,qCAAgC,EAC3C,KAAC,QAAQ,cAAE,UAAU,GAAY,EACjC,KAAC,UAAU,wCAAmC,EAC9C,KAAC,QAAQ,cAAE,aAAa,GAAY,EACpC,KAAC,UAAU,0CAAqC,EAChD,KAAC,QAAQ,cAAE,eAAe,GAAY,EACtC,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,oBAAoB;IAC3B,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,SAAS,EAAE;YACT,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,mEAAmE;YAChF,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;SACvC;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,0FAA0F;YACvG,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE;SAC1C;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,iBAAiB,GAAG,GAAG,EAAE,CAAC,CAC9B,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,uBAAuB,EAAE,YAClF,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACnC,0BACE,YAAG,SAAS,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,0BAA0B,EAAE,KAAK,EAAE,uBAAuB,EAAE,YACjG,SAAS,IAAI,GAAG,GACf,EACJ,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,GAAI,EAC7C,KAAC,OAAO,CAAC,OAAO,oCAAoC,EACpD,KAAC,OAAO,CAAC,SAAS,2DAAwD,IAClE,KARF,IAAI,CASR,CACP,CAAC,GACE,CACP,CAAC;AAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,CAC/B,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,uBAAuB,EAAE,YACnF;QACC,EAAE,KAAK,EAAE,gCAAgC,EAAE,KAAK,EAAE,uCAAuC,EAAE;QAC3F,EAAE,KAAK,EAAE,mCAAmC,EAAE,KAAK,EAAE,6CAA6C,EAAE;QACpG,EAAE,KAAK,EAAE,mCAAmC,EAAE,KAAK,EAAE,6CAA6C,EAAE;QACpG,EAAE,KAAK,EAAE,uCAAuC,EAAE,KAAK,EAAE,qDAAqD,EAAE;KACjH,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAC1B,0BACE,YAAG,SAAS,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,0BAA0B,EAAE,KAAK,EAAE,uBAAuB,EAAE,YACjG,KAAK,GACJ,EACJ,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAE,KAAK,GAAI,EACpD,KAAC,OAAO,CAAC,OAAO,mCAAmC,EACnD,KAAC,OAAO,CAAC,SAAS,oDAAsD,IAChE,KARF,KAAK,CAST,CACP,CAAC,GACE,CACP,CAAC;AAEF,MAAM,0BAA0B,GAAG,GAAG,EAAE,CAAC,CACvC,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EAC5B,KAAC,OAAO,CAAC,OAAO,yDAAyD,EACzE,KAAC,OAAO,CAAC,SAAS,0DAAkD,EACpE,KAAC,OAAO,CAAC,SAAS,0FAA4F,IACtG,CACX,CAAC;AAEF,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E,MAAM,CAAC,MAAM,OAAO,GAAU,eAAe,CAC3C;IACE,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,WAAW,GAAG,EACjC,KAAC,OAAO,CAAC,OAAO,oCAAoC,EACpD,KAAC,OAAO,CAAC,SAAS,2DAAwD,IAClE,CACX;CACF,EACD,oIAAoI,CACrI,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;;;;;;;;;;;;CAYf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,WAAW,GAAG,EACjC,KAAC,OAAO,CAAC,OAAO,oCAAoC,IAC5C,CACX;CACF,EACD,uFAAuF,CACxF,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;;;;;;;;;;;;CAYf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,OAAO,mCAAmC,EACnD,KAAC,OAAO,CAAC,SAAS,oEAAsE,IAChF,CACX;CACF,EACD,2GAA2G,CAC5G,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAU,eAAe,CAC5D;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;CAiBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,mCAAmC,EAAC,gBAAgB,EAAC,SAAS,GAAG,EAC3G,KAAC,OAAO,CAAC,OAAO,0CAA0C,EAC1D,KAAC,OAAO,CAAC,SAAS,kFAA+E,IACzF,CACX;CACF,EACD,mPAAmP,CACpP,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU,eAAe,CAC7C;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;CAyBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,iBAAiB;CAC1B,EACD,kNAAkN,CACnN,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU,eAAe,CAC9C;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,kBAAkB;CAC3B,EACD,6MAA6M,CAC9M,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAU,eAAe,CACtD;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,0BAA0B;CACnC,EACD,mJAAmJ,CACpJ,CAAC"}

package/dist/components/kpiCard/KPICard.stories.d.ts

@@ -1,9 +1,107 @@
 import type { StoryObj } from '@storybook/react-vite';
+import { KPICard } from './KPICard';
+declare function KPICardDocsPage(): import("react/jsx-runtime").JSX.Element;
 declare const meta: {
     title: string;
     component: (props: import("./KPICard").KPICardProps) => React.JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            page: typeof KPICardDocsPage;
+        };
+    };
+    argTypes: {
+        label: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        value: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        isPercentage: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        onClick: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        'aria-label': {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
 };
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
 export default meta;
+type Story = StoryObj<typeof KPICard>;
+export declare const Default: Story;
+export declare const AsPercentage: Story;
+export declare const WithChildren: Story;
+export declare const WithProgressBar: Story;
+export declare const Interactive: Story;
+export declare const Disabled: Story;
+export declare const MultipleCards: Story;
 //# sourceMappingURL=KPICard.stories.d.ts.map

package/dist/components/kpiCard/KPICard.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KPICard.stories.d.ts","sourceRoot":"","sources":["../../../src/components/kpiCard/KPICard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAK5D,QAAA,MAAM,IAAI;;;CAGsB,CAAC;AAEjC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgCrB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"KPICard.stories.d.ts","sourceRoot":"","sources":["../../../src/components/kpiCard/KPICard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAoGpC,iBAAS,eAAe,4CAmBvB;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AA4DtC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA+B1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAkC1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAyB7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAqCzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAuCtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA2B3B,CAAC"}