@arbor-education/design-system.components 0.13.0 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agent-memory/blanche-designspert/MEMORY.md +189 -0
- package/.agent-memory/dorothy-fact-checker/MEMORY.md +228 -0
- package/.agent-memory/dorothy-fact-checker/numberinput_component.md +53 -0
- package/.agent-memory/dorothy-fact-checker/progress_component.md +36 -0
- package/.agent-memory/rose-storybookspert/MEMORY.md +105 -0
- package/.agent-memory/sophia-componentspert/MEMORY.md +34 -0
- package/{.claude/agent-memory → .agent-memory}/sophia-componentspert/components.md +170 -17
- package/{.claude → .gather}/agents/blanche-designspert.md +7 -2
- package/{.claude → .gather}/agents/dorothy-fact-checker.md +7 -2
- package/{.claude → .gather}/agents/rose-storybookspert.md +80 -11
- package/{.claude → .gather}/agents/sophia-componentspert.md +9 -4
- package/.gather/gather.yaml +9 -0
- package/{CLAUDE.md → .gather/instructions/project-overview.md} +42 -9
- package/{.claude → .gather}/skills/analyze-design/README.md +5 -0
- package/{.claude → .gather}/skills/analyze-design/SKILL.md +1 -1
- package/.gather/skills/analyze-design/meta.md +4 -0
- package/{.claude → .gather}/skills/create-page/README.md +5 -0
- package/{.claude → .gather}/skills/create-page/design-analysis-template.md +5 -0
- package/.gather/skills/create-page/meta.md +4 -0
- package/{.claude → .gather}/skills/create-page/page-template.scss +5 -0
- package/{.claude → .gather}/skills/create-page/page-template.tsx +5 -0
- package/{.claude → .gather}/skills/map-legacy/README.md +5 -0
- package/.gather/skills/map-legacy/meta.md +4 -0
- package/{.claude → .gather}/skills/migrate-page/README.md +5 -0
- package/.gather/skills/migrate-page/meta.md +4 -0
- package/.gather/skills/write-stories/README.md +157 -0
- package/.gather/skills/write-stories/SKILL.md +841 -0
- package/.gather/skills/write-stories/meta.md +4 -0
- package/.ralph/storybook-upgrade/knowledge.md +308 -0
- package/.ralph/storybook-upgrade/prd.json +777 -0
- package/.ralph/storybook-upgrade/progress.md +342 -0
- package/.storybook/DocsTemplate.tsx +122 -0
- package/.storybook/preview.ts +40 -0
- package/.stylelintignore +2 -0
- package/CHANGELOG.md +14 -0
- package/{.claude/component-library.md → component-library.md} +27 -10
- package/dist/components/articleCard/ArticleCard.d.ts +30 -0
- package/dist/components/articleCard/ArticleCard.d.ts.map +1 -0
- package/dist/components/articleCard/ArticleCard.js +24 -0
- package/dist/components/articleCard/ArticleCard.js.map +1 -0
- package/dist/components/articleCard/ArticleCard.stories.d.ts +18 -0
- package/dist/components/articleCard/ArticleCard.stories.d.ts.map +1 -0
- package/dist/components/articleCard/ArticleCard.stories.js +112 -0
- package/dist/components/articleCard/ArticleCard.stories.js.map +1 -0
- package/dist/components/articleCard/ArticleCard.test.d.ts +2 -0
- package/dist/components/articleCard/ArticleCard.test.d.ts.map +1 -0
- package/dist/components/articleCard/ArticleCard.test.js +49 -0
- package/dist/components/articleCard/ArticleCard.test.js.map +1 -0
- package/dist/components/badge/Badge.stories.d.ts +85 -6
- package/dist/components/badge/Badge.stories.d.ts.map +1 -1
- package/dist/components/badge/Badge.stories.js +626 -27
- package/dist/components/badge/Badge.stories.js.map +1 -1
- package/dist/components/banner/Banner.stories.d.ts +129 -63
- package/dist/components/banner/Banner.stories.d.ts.map +1 -1
- package/dist/components/banner/Banner.stories.js +855 -39
- package/dist/components/banner/Banner.stories.js.map +1 -1
- package/dist/components/button/Button.stories.d.ts +148 -8
- package/dist/components/button/Button.stories.d.ts.map +1 -1
- package/dist/components/button/Button.stories.js +1089 -80
- package/dist/components/button/Button.stories.js.map +1 -1
- package/dist/components/card/Card.d.ts +41 -12
- package/dist/components/card/Card.d.ts.map +1 -1
- package/dist/components/card/Card.js +46 -17
- package/dist/components/card/Card.js.map +1 -1
- package/dist/components/card/Card.stories.d.ts +9 -84
- package/dist/components/card/Card.stories.d.ts.map +1 -1
- package/dist/components/card/Card.stories.js +15 -73
- package/dist/components/card/Card.stories.js.map +1 -1
- package/dist/components/card/Card.test.js +50 -152
- package/dist/components/card/Card.test.js.map +1 -1
- package/dist/components/dot/Dot.stories.d.ts +46 -11
- package/dist/components/dot/Dot.stories.d.ts.map +1 -1
- package/dist/components/dot/Dot.stories.js +504 -15
- package/dist/components/dot/Dot.stories.js.map +1 -1
- package/dist/components/dropdown/Dropdown.stories.d.ts +89 -14
- package/dist/components/dropdown/Dropdown.stories.d.ts.map +1 -1
- package/dist/components/dropdown/Dropdown.stories.js +769 -17
- package/dist/components/dropdown/Dropdown.stories.js.map +1 -1
- package/dist/components/formField/FormField.stories.d.ts +95 -35
- package/dist/components/formField/FormField.stories.d.ts.map +1 -1
- package/dist/components/formField/FormField.stories.js +1174 -69
- package/dist/components/formField/FormField.stories.js.map +1 -1
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.d.ts +96 -9
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.js +717 -10
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.js.map +1 -1
- package/dist/components/formField/inputs/number/NumberInput.stories.d.ts +149 -11
- package/dist/components/formField/inputs/number/NumberInput.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/number/NumberInput.stories.js +624 -10
- package/dist/components/formField/inputs/number/NumberInput.stories.js.map +1 -1
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.d.ts +74 -1
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.js +673 -44
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.js.map +1 -1
- package/dist/components/formField/inputs/text/TextInput.stories.d.ts +119 -1
- package/dist/components/formField/inputs/text/TextInput.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/text/TextInput.stories.js +549 -10
- package/dist/components/formField/inputs/text/TextInput.stories.js.map +1 -1
- package/dist/components/formField/inputs/textArea/TextArea.stories.d.ts +129 -4
- package/dist/components/formField/inputs/textArea/TextArea.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/textArea/TextArea.stories.js +577 -3
- package/dist/components/formField/inputs/textArea/TextArea.stories.js.map +1 -1
- package/dist/components/formField/inputs/time/TimeInput.d.ts +1 -1
- package/dist/components/formField/inputs/time/TimeInput.stories.d.ts +1 -1
- package/dist/components/heading/Heading.stories.d.ts +449 -50
- package/dist/components/heading/Heading.stories.d.ts.map +1 -1
- package/dist/components/heading/Heading.stories.js +536 -60
- package/dist/components/heading/Heading.stories.js.map +1 -1
- package/dist/components/icoText/IcoText.d.ts +37 -0
- package/dist/components/icoText/IcoText.d.ts.map +1 -0
- package/dist/components/icoText/IcoText.js +29 -0
- package/dist/components/icoText/IcoText.js.map +1 -0
- package/dist/components/icoText/IcoText.stories.d.ts +34 -0
- package/dist/components/icoText/IcoText.stories.d.ts.map +1 -0
- package/dist/components/icoText/IcoText.stories.js +24 -0
- package/dist/components/icoText/IcoText.stories.js.map +1 -0
- package/dist/components/icoText/IcoText.test.d.ts +2 -0
- package/dist/components/icoText/IcoText.test.d.ts.map +1 -0
- package/dist/components/icoText/IcoText.test.js +27 -0
- package/dist/components/icoText/IcoText.test.js.map +1 -0
- package/dist/components/icon/Icon.stories.d.ts +81 -10
- package/dist/components/icon/Icon.stories.d.ts.map +1 -1
- package/dist/components/icon/Icon.stories.js +979 -8
- package/dist/components/icon/Icon.stories.js.map +1 -1
- package/dist/components/kpiCard/KPICard.d.ts +13 -0
- package/dist/components/kpiCard/KPICard.d.ts.map +1 -0
- package/dist/components/kpiCard/KPICard.js +8 -0
- package/dist/components/kpiCard/KPICard.js.map +1 -0
- package/dist/components/kpiCard/KPICard.stories.d.ts +9 -0
- package/dist/components/kpiCard/KPICard.stories.d.ts.map +1 -0
- package/dist/components/kpiCard/KPICard.stories.js +18 -0
- package/dist/components/kpiCard/KPICard.stories.js.map +1 -0
- package/dist/components/kpiCard/KPICard.test.d.ts +2 -0
- package/dist/components/kpiCard/KPICard.test.d.ts.map +1 -0
- package/dist/components/kpiCard/KPICard.test.js +37 -0
- package/dist/components/kpiCard/KPICard.test.js.map +1 -0
- package/dist/components/kvpList/KVPList.d.ts +34 -0
- package/dist/components/kvpList/KVPList.d.ts.map +1 -0
- package/dist/components/kvpList/KVPList.js +20 -0
- package/dist/components/kvpList/KVPList.js.map +1 -0
- package/dist/components/kvpList/KVPList.stories.d.ts +27 -0
- package/dist/components/kvpList/KVPList.stories.d.ts.map +1 -0
- package/dist/components/kvpList/KVPList.stories.js +18 -0
- package/dist/components/kvpList/KVPList.stories.js.map +1 -0
- package/dist/components/kvpList/KVPList.test.d.ts +2 -0
- package/dist/components/kvpList/KVPList.test.d.ts.map +1 -0
- package/dist/components/kvpList/KVPList.test.js +29 -0
- package/dist/components/kvpList/KVPList.test.js.map +1 -0
- package/dist/components/pill/Pill.stories.d.ts +71 -19
- package/dist/components/pill/Pill.stories.d.ts.map +1 -1
- package/dist/components/pill/Pill.stories.js +573 -14
- package/dist/components/pill/Pill.stories.js.map +1 -1
- package/dist/components/progress/Progress.stories.d.ts +75 -298
- package/dist/components/progress/Progress.stories.d.ts.map +1 -1
- package/dist/components/progress/Progress.stories.js +449 -52
- package/dist/components/progress/Progress.stories.js.map +1 -1
- package/dist/components/separator/Separator.stories.d.ts +58 -5
- package/dist/components/separator/Separator.stories.d.ts.map +1 -1
- package/dist/components/separator/Separator.stories.js +443 -4
- package/dist/components/separator/Separator.stories.js.map +1 -1
- package/dist/components/singleUser/SingleUser.d.ts +1 -1
- package/dist/components/tabs/TabsItem.stories.d.ts +2 -2
- package/dist/components/tag/Tag.stories.d.ts +116 -5
- package/dist/components/tag/Tag.stories.d.ts.map +1 -1
- package/dist/components/tag/Tag.stories.js +581 -28
- package/dist/components/tag/Tag.stories.js.map +1 -1
- package/dist/index.css +194 -23
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +13 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +12 -3
- package/dist/index.js.map +1 -1
- package/eslint.config.mts +5 -1
- package/package.json +3 -3
- package/src/components/articleCard/ArticleCard.stories.tsx +132 -0
- package/src/components/articleCard/ArticleCard.test.tsx +121 -0
- package/src/components/articleCard/ArticleCard.tsx +100 -0
- package/src/components/articleCard/articleCard.scss +39 -0
- package/src/components/badge/Badge.stories.tsx +869 -42
- package/src/components/banner/Banner.stories.tsx +1081 -63
- package/src/components/button/Button.stories.tsx +1394 -99
- package/src/components/card/Card.stories.tsx +35 -79
- package/src/components/card/Card.test.tsx +72 -190
- package/src/components/card/Card.tsx +117 -58
- package/src/components/card/card.scss +18 -31
- package/src/components/dot/Dot.stories.tsx +723 -32
- package/src/components/dropdown/Dropdown.stories.tsx +1174 -35
- package/src/components/formField/FormField.stories.tsx +1522 -105
- package/src/components/formField/inputs/checkbox/CheckboxInput.stories.tsx +1020 -15
- package/src/components/formField/inputs/number/NumberInput.stories.tsx +908 -15
- package/src/components/formField/inputs/radio/RadioButtonInput.stories.tsx +932 -51
- package/src/components/formField/inputs/text/TextInput.stories.tsx +773 -13
- package/src/components/formField/inputs/textArea/TextArea.stories.tsx +756 -8
- package/src/components/heading/Heading.stories.tsx +752 -120
- package/src/components/icoText/IcoText.stories.tsx +47 -0
- package/src/components/icoText/IcoText.test.tsx +41 -0
- package/src/components/icoText/IcoText.tsx +93 -0
- package/src/components/icoText/icoText.scss +34 -0
- package/src/components/icon/Icon.stories.tsx +1446 -12
- package/src/components/kpiCard/KPICard.stories.tsx +47 -0
- package/src/components/kpiCard/KPICard.test.tsx +60 -0
- package/src/components/kpiCard/KPICard.tsx +45 -0
- package/src/components/kpiCard/kpiCard.scss +35 -0
- package/src/components/kvpList/KVPList.stories.tsx +51 -0
- package/src/components/kvpList/KVPList.test.tsx +66 -0
- package/src/components/kvpList/KVPList.tsx +109 -0
- package/src/components/kvpList/kvpList.scss +64 -0
- package/src/components/pill/Pill.stories.tsx +867 -21
- package/src/components/progress/Progress.stories.tsx +625 -58
- package/src/components/separator/Separator.stories.tsx +730 -8
- package/src/components/separator/separator.scss +12 -3
- package/src/components/tag/Tag.stories.tsx +755 -53
- package/src/index.scss +4 -0
- package/src/index.ts +13 -4
- package/src/tokens.scss +6 -0
- package/tokens/json/Arbor.json +30 -0
- package/.claude/agent-memory/blanche-designspert/MEMORY.md +0 -64
- package/.claude/agent-memory/dorothy-fact-checker/MEMORY.md +0 -129
- package/.claude/agent-memory/rose-storybookspert/MEMORY.md +0 -29
- package/.claude/agent-memory/sophia-componentspert/MEMORY.md +0 -14
- package/.claude/design-assessment-daily-attendance-2026-04-10.md +0 -566
- package/.claude/figma-assessment-7154-58899.md +0 -404
- package/.claude/figma-assessment-UKQfcxnT4rlHHNuiumt4o1-11086-97537.md +0 -392
- package/.claude/figma-assessment-UKQfcxnT4rlHHNuiumt4o1-551-41974.md +0 -474
- package/.claude/figma-assessment-UKQfcxnT4rlHHNuiumt4o1-551-43094.md +0 -462
- package/.claude/figma-assessment-fcFK4CGzkz2fVyY3koX8ZE-7154-59061.md +0 -440
- package/.claude/migration-report-custom-report-writer-2026-02-19.md +0 -591
- /package/{.claude/agent-memory → .agent-memory}/blanche-designspert/token-review-patterns.md +0 -0
- /package/{.claude/agent-memory → .agent-memory}/rose-storybookspert/patterns.md +0 -0
- /package/{.claude → .gather}/skills/create-page/SKILL.md +0 -0
- /package/{.claude → .gather}/skills/map-legacy/SKILL.md +0 -0
- /package/{.claude → .gather}/skills/migrate-page/SKILL.md +0 -0
|
@@ -1,164 +1,62 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { expect, test, describe, vi } from 'vitest';
|
|
4
4
|
import { render, screen, fireEvent } from '@testing-library/react';
|
|
5
5
|
import { Card } from './Card';
|
|
6
6
|
import '@testing-library/jest-dom/vitest';
|
|
7
|
-
describe('Card
|
|
8
|
-
test('renders
|
|
9
|
-
render(_jsx(Card, {}));
|
|
10
|
-
const card =
|
|
7
|
+
describe('Card', () => {
|
|
8
|
+
test('renders children inside the card shell', () => {
|
|
9
|
+
const { container } = render(_jsx(Card, { "aria-label": "Summary card", children: _jsx("div", { children: "Custom content" }) }));
|
|
10
|
+
const card = container.querySelector('figure');
|
|
11
11
|
expect(card).toBeInTheDocument();
|
|
12
|
-
expect(card).toHaveAttribute('aria-label', '
|
|
12
|
+
expect(card).toHaveAttribute('aria-label', 'Summary card');
|
|
13
|
+
expect(screen.getByText('Custom content')).toBeInTheDocument();
|
|
13
14
|
});
|
|
14
|
-
test('renders
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
expect(
|
|
22
|
-
expect(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
expect(
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
expect(
|
|
36
|
-
|
|
37
|
-
|
|
15
|
+
test('renders clickable affordances when interactive', () => {
|
|
16
|
+
const mockClick = vi.fn();
|
|
17
|
+
const { container } = render(_jsx(Card, { onClick: mockClick, "aria-label": "Clickable card", children: _jsx("div", { children: "Clickable content" }) }));
|
|
18
|
+
const card = screen.getByRole('button', { name: 'Clickable card' });
|
|
19
|
+
fireEvent.click(card);
|
|
20
|
+
expect(mockClick).toHaveBeenCalledTimes(1);
|
|
21
|
+
expect(card).toHaveClass('ds-card__container--clickable');
|
|
22
|
+
expect(card).toHaveAttribute('tabIndex', '0');
|
|
23
|
+
expect(container.querySelector('.ds-icon-chevron-right')).toBeInTheDocument();
|
|
24
|
+
expect(container.querySelector('.ds-icon-arrow-right')).toBeInTheDocument();
|
|
25
|
+
});
|
|
26
|
+
test('does not render clickable affordances when disabled', () => {
|
|
27
|
+
const mockClick = vi.fn();
|
|
28
|
+
const { container } = render(_jsx(Card, { disabled: true, onClick: mockClick, "aria-label": "Disabled card", children: _jsx("div", { children: "Disabled content" }) }));
|
|
29
|
+
const card = screen.getByRole('button', { name: 'Disabled card' });
|
|
30
|
+
expect(card).toHaveClass('ds-card__container--disabled');
|
|
31
|
+
expect(card).toHaveAttribute('aria-disabled', 'true');
|
|
32
|
+
expect(card).toHaveAttribute('role', 'button');
|
|
33
|
+
expect(card).toHaveAttribute('tabIndex', '0');
|
|
34
|
+
expect(container.querySelector('.ds-icon-chevron-right')).not.toBeInTheDocument();
|
|
35
|
+
card.focus();
|
|
36
|
+
expect(card).toHaveFocus();
|
|
37
|
+
fireEvent.click(card);
|
|
38
|
+
fireEvent.keyDown(card, { key: 'Enter' });
|
|
39
|
+
fireEvent.keyDown(card, { key: ' ' });
|
|
40
|
+
expect(mockClick).not.toHaveBeenCalled();
|
|
41
|
+
});
|
|
42
|
+
test('calls onKeyDown and keyboard-activates the card on Enter', () => {
|
|
38
43
|
const mockClick = vi.fn();
|
|
39
44
|
const mockKeyDown = vi.fn();
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
expect(
|
|
44
|
-
expect(
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
const mockClick = vi.fn();
|
|
56
|
-
render(_jsx(Card, { title: "Disabled Card", onClick: mockClick, disabled: true }));
|
|
57
|
-
const card = screen.getByRole('article');
|
|
58
|
-
fireEvent.click(card);
|
|
59
|
-
expect(mockClick).not.toHaveBeenCalled();
|
|
60
|
-
});
|
|
61
|
-
test('shows click arrow icon when card is clickable', () => {
|
|
62
|
-
const mockClick = vi.fn();
|
|
63
|
-
const { container } = render(_jsx(Card, { title: "Clickable Card", onClick: mockClick }));
|
|
64
|
-
expect(container.querySelector('.ds-icon-chevron-right')).toBeInTheDocument();
|
|
65
|
-
});
|
|
66
|
-
test('does not show click arrow icon when card is not clickable', () => {
|
|
67
|
-
const { container } = render(_jsx(Card, { title: "Non-clickable Card" }));
|
|
68
|
-
expect(container.querySelector('.ds-icon-chevron-right')).not.toBeInTheDocument();
|
|
69
|
-
});
|
|
70
|
-
test('does not show click arrow icon when card is disabled', () => {
|
|
71
|
-
const mockClick = vi.fn();
|
|
72
|
-
const { container } = render(_jsx(Card, { title: "Disabled Card", onClick: mockClick, disabled: true }));
|
|
73
|
-
expect(container.querySelector('.ds-icon-chevron-right')).not.toBeInTheDocument();
|
|
74
|
-
});
|
|
75
|
-
});
|
|
76
|
-
describe('Keyboard interactions', () => {
|
|
77
|
-
test('calls onKeyDown handler when key is pressed on clickable card', () => {
|
|
78
|
-
const mockKeyDown = vi.fn();
|
|
79
|
-
render(_jsx(Card, { title: "Keyboard Card", onClick: vi.fn(), onKeyDown: mockKeyDown }));
|
|
80
|
-
const card = screen.getByRole('article');
|
|
81
|
-
fireEvent.keyDown(card, { key: 'Enter' });
|
|
82
|
-
expect(mockKeyDown).toHaveBeenCalledTimes(1);
|
|
83
|
-
});
|
|
84
|
-
test('does not call onKeyDown when card is disabled', () => {
|
|
85
|
-
const mockKeyDown = vi.fn();
|
|
86
|
-
render(_jsx(Card, { title: "Disabled Card", onClick: vi.fn(), onKeyDown: mockKeyDown, disabled: true }));
|
|
87
|
-
const card = screen.getByRole('article');
|
|
88
|
-
fireEvent.keyDown(card, { key: 'Enter' });
|
|
89
|
-
expect(mockKeyDown).not.toHaveBeenCalled();
|
|
90
|
-
});
|
|
91
|
-
test('does not call onKeyDown when card is not clickable', () => {
|
|
92
|
-
const mockKeyDown = vi.fn();
|
|
93
|
-
render(_jsx(Card, { title: "Non-clickable Card", onKeyDown: mockKeyDown }));
|
|
94
|
-
const card = screen.getByRole('article');
|
|
95
|
-
fireEvent.keyDown(card, { key: 'Enter' });
|
|
96
|
-
expect(mockKeyDown).not.toHaveBeenCalled();
|
|
97
|
-
});
|
|
98
|
-
});
|
|
99
|
-
describe('CSS classes and accessibility', () => {
|
|
100
|
-
test('applies clickable class when onClick is provided and not disabled', () => {
|
|
101
|
-
const mockClick = vi.fn();
|
|
102
|
-
render(_jsx(Card, { onClick: mockClick }));
|
|
103
|
-
const card = screen.getByRole('article');
|
|
104
|
-
expect(card).toHaveClass('ds-card__container--clickable');
|
|
105
|
-
});
|
|
106
|
-
test('applies disabled class when disabled', () => {
|
|
107
|
-
render(_jsx(Card, { disabled: true }));
|
|
108
|
-
const card = screen.getByRole('article');
|
|
109
|
-
expect(card).toHaveClass('ds-card__container--disabled');
|
|
110
|
-
});
|
|
111
|
-
test('does not apply clickable class when disabled', () => {
|
|
112
|
-
const mockClick = vi.fn();
|
|
113
|
-
render(_jsx(Card, { onClick: mockClick, disabled: true }));
|
|
114
|
-
const card = screen.getByRole('article');
|
|
115
|
-
expect(card).not.toHaveClass('ds-card__container--clickable');
|
|
116
|
-
expect(card).toHaveClass('ds-card__container--disabled');
|
|
117
|
-
});
|
|
118
|
-
test('sets correct tabIndex for clickable card', () => {
|
|
119
|
-
const mockClick = vi.fn();
|
|
120
|
-
render(_jsx(Card, { onClick: mockClick }));
|
|
121
|
-
const card = screen.getByRole('article');
|
|
122
|
-
expect(card).toHaveAttribute('tabIndex', '0');
|
|
123
|
-
});
|
|
124
|
-
test('sets correct tabIndex for non-clickable card', () => {
|
|
125
|
-
render(_jsx(Card, {}));
|
|
126
|
-
const card = screen.getByRole('article');
|
|
127
|
-
expect(card).toHaveAttribute('tabIndex', '-1');
|
|
128
|
-
});
|
|
129
|
-
test('sets correct tabIndex for disabled card', () => {
|
|
130
|
-
const mockClick = vi.fn();
|
|
131
|
-
render(_jsx(Card, { onClick: mockClick, disabled: true }));
|
|
132
|
-
const card = screen.getByRole('article');
|
|
133
|
-
expect(card).toHaveAttribute('tabIndex', '-1');
|
|
134
|
-
});
|
|
135
|
-
test('has correct aria-label', () => {
|
|
136
|
-
render(_jsx(Card, {}));
|
|
137
|
-
const card = screen.getByRole('article');
|
|
138
|
-
expect(card).toHaveAttribute('aria-label', 'Card');
|
|
139
|
-
});
|
|
140
|
-
});
|
|
141
|
-
describe('Event handler edge cases', () => {
|
|
142
|
-
test('handles onClick without onKeyDown', () => {
|
|
143
|
-
const mockClick = vi.fn();
|
|
144
|
-
render(_jsx(Card, { title: "Click only", onClick: mockClick }));
|
|
145
|
-
const card = screen.getByRole('article');
|
|
146
|
-
fireEvent.click(card);
|
|
147
|
-
expect(mockClick).toHaveBeenCalledTimes(1);
|
|
148
|
-
});
|
|
149
|
-
test('handles onKeyDown without onClick', () => {
|
|
150
|
-
const mockKeyDown = vi.fn();
|
|
151
|
-
render(_jsx(Card, { title: "KeyDown only", onKeyDown: mockKeyDown }));
|
|
152
|
-
const card = screen.getByRole('article');
|
|
153
|
-
fireEvent.keyDown(card, { key: 'Enter' });
|
|
154
|
-
// Should not be called because card is not clickable (no onClick)
|
|
155
|
-
expect(mockKeyDown).not.toHaveBeenCalled();
|
|
156
|
-
});
|
|
157
|
-
test('does not throw error when clicking card without handlers', () => {
|
|
158
|
-
render(_jsx(Card, { title: "No handlers" }));
|
|
159
|
-
const card = screen.getByRole('article');
|
|
160
|
-
expect(() => fireEvent.click(card)).not.toThrow();
|
|
161
|
-
});
|
|
45
|
+
render(_jsx(Card, { onClick: mockClick, onKeyDown: mockKeyDown, "aria-label": "Keyboard card", children: _jsx("div", { children: "Keyboard content" }) }));
|
|
46
|
+
const card = screen.getByRole('button', { name: 'Keyboard card' });
|
|
47
|
+
fireEvent.keyDown(card, { key: 'Enter' });
|
|
48
|
+
expect(mockKeyDown).toHaveBeenCalledTimes(1);
|
|
49
|
+
expect(mockClick).toHaveBeenCalledTimes(1);
|
|
50
|
+
});
|
|
51
|
+
test('passes through aria-labelledby', () => {
|
|
52
|
+
const { container } = render(_jsxs(_Fragment, { children: [_jsx("h2", { id: "card-heading", children: "Linked heading" }), _jsx(Card, { "aria-labelledby": "card-heading", children: _jsx("div", { children: "Linked content" }) })] }));
|
|
53
|
+
const card = container.querySelector('figure');
|
|
54
|
+
expect(card).toHaveAttribute('aria-labelledby', 'card-heading');
|
|
55
|
+
});
|
|
56
|
+
test('applies dense spacing when requested', () => {
|
|
57
|
+
const { container } = render(_jsx(Card, { spacing: "dense", children: _jsx("div", { children: "Dense content" }) }));
|
|
58
|
+
const card = container.querySelector('figure');
|
|
59
|
+
expect(card).toHaveClass('ds-card__container--dense');
|
|
162
60
|
});
|
|
163
61
|
});
|
|
164
62
|
//# sourceMappingURL=Card.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.test.js","sourceRoot":"","sources":["../../../src/components/card/Card.test.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,kCAAkC,CAAC;AAE1C,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"Card.test.js","sourceRoot":"","sources":["../../../src/components/card/Card.test.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,kCAAkC,CAAC;AAE1C,QAAQ,CAAC,MAAM,EAAE,GAAG,EAAE;IACpB,IAAI,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAClD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,IAAI,kBAAY,cAAc,YAC7B,2CAAyB,GACpB,CACR,CAAC;QAEF,MAAM,IAAI,GAAG,SAAS,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAE/C,MAAM,CAAC,IAAI,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjC,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;QAC3D,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,gDAAgD,EAAE,GAAG,EAAE;QAC1D,MAAM,SAAS,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QAC1B,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,IAAI,IAAC,OAAO,EAAE,SAAS,gBAAa,gBAAgB,YACnD,8CAA4B,GACvB,CACR,CAAC;QAEF,MAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC;QACpE,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAEtB,MAAM,CAAC,SAAS,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QAC3C,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,+BAA+B,CAAC,CAAC;QAC1D,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAC9C,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC9E,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC9E,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,qDAAqD,EAAE,GAAG,EAAE;QAC/D,MAAM,SAAS,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QAC1B,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,IAAI,IAAC,QAAQ,QAAC,OAAO,EAAE,SAAS,gBAAa,eAAe,YAC3D,6CAA2B,GACtB,CACR,CAAC;QAEF,MAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;QAEnE,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,8BAA8B,CAAC,CAAC;QACzD,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QACtD,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAC/C,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAC9C,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;QAElF,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC;QAE3B,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACtB,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC;QAC1C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAEtC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,0DAA0D,EAAE,GAAG,EAAE;QACpE,MAAM,SAAS,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QAC1B,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QAE5B,MAAM,CACJ,KAAC,IAAI,IAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,gBAAa,eAAe,YAC1E,6CAA2B,GACtB,CACR,CAAC;QAEF,MAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;QACnE,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC;QAE1C,MAAM,CAAC,WAAW,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QAC7C,MAAM,CAAC,SAAS,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,gCAAgC,EAAE,GAAG,EAAE;QAC1C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,8BACE,aAAI,EAAE,EAAC,cAAc,+BAAoB,EACzC,KAAC,IAAI,uBAAiB,cAAc,YAClC,2CAAyB,GACpB,IACN,CACJ,CAAC;QAEF,MAAM,IAAI,GAAG,SAAS,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC/C,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAChD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,IAAI,IAAC,OAAO,EAAC,OAAO,YACnB,0CAAwB,GACnB,CACR,CAAC;QAEF,MAAM,IAAI,GAAG,SAAS,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC/C,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,2BAA2B,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1,15 +1,50 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import { Dot } from './Dot';
|
|
3
|
-
declare
|
|
1
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Dot, type DotColour } from './Dot';
|
|
3
|
+
declare function DotDocsPage(): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare const meta: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: ({ colour, label }: {
|
|
7
|
+
colour: DotColour;
|
|
8
|
+
label?: string;
|
|
9
|
+
}) => React.JSX.Element;
|
|
10
|
+
parameters: {
|
|
11
|
+
layout: string;
|
|
12
|
+
docs: {
|
|
13
|
+
page: typeof DotDocsPage;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
tags: string[];
|
|
17
|
+
argTypes: {
|
|
18
|
+
colour: {
|
|
19
|
+
control: "select";
|
|
20
|
+
options: DotColour[];
|
|
21
|
+
description: string;
|
|
22
|
+
table: {
|
|
23
|
+
type: {
|
|
24
|
+
summary: string;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
label: {
|
|
29
|
+
control: "text";
|
|
30
|
+
description: string;
|
|
31
|
+
table: {
|
|
32
|
+
type: {
|
|
33
|
+
summary: string;
|
|
34
|
+
};
|
|
35
|
+
defaultValue: {
|
|
36
|
+
summary: string;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
};
|
|
4
42
|
export default meta;
|
|
5
43
|
type Story = StoryObj<typeof Dot>;
|
|
6
|
-
export declare const
|
|
7
|
-
export declare const Salmon: Story;
|
|
8
|
-
export declare const Teal: Story;
|
|
9
|
-
export declare const Yellow: Story;
|
|
10
|
-
export declare const Green: Story;
|
|
11
|
-
export declare const Orange: Story;
|
|
12
|
-
export declare const Blue: Story;
|
|
13
|
-
export declare const Labeled: Story;
|
|
44
|
+
export declare const Default: Story;
|
|
14
45
|
export declare const AllColours: Story;
|
|
46
|
+
export declare const WithAccessibleLabel: Story;
|
|
47
|
+
export declare const DecorativeVsMeaningful: Story;
|
|
48
|
+
export declare const InTagContext: Story;
|
|
49
|
+
export declare const InStatusList: Story;
|
|
15
50
|
//# sourceMappingURL=Dot.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dot.stories.d.ts","sourceRoot":"","sources":["../../../src/components/dot/Dot.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"Dot.stories.d.ts","sourceRoot":"","sources":["../../../src/components/dot/Dot.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,GAAG,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAiH5C,iBAAS,WAAW,4CAmBnB;AAYD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCkB,CAAC;AAE7B,eAAe,IAAI,CAAC;AAIpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAkPlC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA4DxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA8BjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoEpC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA+C1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAoE1B,CAAC"}
|