@arbor-education/design-system.components 0.25.1 → 0.25.3

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.
Files changed (44) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/components/row/Row.d.ts +5 -4
  3. package/dist/components/row/Row.d.ts.map +1 -1
  4. package/dist/components/row/Row.js +4 -2
  5. package/dist/components/row/Row.js.map +1 -1
  6. package/dist/components/row/Row.stories.d.ts +114 -4
  7. package/dist/components/row/Row.stories.d.ts.map +1 -1
  8. package/dist/components/row/Row.stories.js +451 -63
  9. package/dist/components/row/Row.stories.js.map +1 -1
  10. package/dist/components/row/Row.test.js +39 -0
  11. package/dist/components/row/Row.test.js.map +1 -1
  12. package/dist/components/toggleGroup/ToggleGroup.d.ts +29 -0
  13. package/dist/components/toggleGroup/ToggleGroup.d.ts.map +1 -0
  14. package/dist/components/toggleGroup/ToggleGroup.js +26 -0
  15. package/dist/components/toggleGroup/ToggleGroup.js.map +1 -0
  16. package/dist/components/toggleGroup/ToggleGroup.stories.d.ts +86 -0
  17. package/dist/components/toggleGroup/ToggleGroup.stories.d.ts.map +1 -0
  18. package/dist/components/toggleGroup/ToggleGroup.stories.js +342 -0
  19. package/dist/components/toggleGroup/ToggleGroup.stories.js.map +1 -0
  20. package/dist/components/toggleGroup/ToggleGroup.test.d.ts +2 -0
  21. package/dist/components/toggleGroup/ToggleGroup.test.d.ts.map +1 -0
  22. package/dist/components/toggleGroup/ToggleGroup.test.js +123 -0
  23. package/dist/components/toggleGroup/ToggleGroup.test.js.map +1 -0
  24. package/dist/components/toggleGroup/ToggleGroupItem.d.ts +10 -0
  25. package/dist/components/toggleGroup/ToggleGroupItem.d.ts.map +1 -0
  26. package/dist/components/toggleGroup/ToggleGroupItem.js +5 -0
  27. package/dist/components/toggleGroup/ToggleGroupItem.js.map +1 -0
  28. package/dist/index.css +33 -0
  29. package/dist/index.css.map +1 -1
  30. package/dist/index.d.ts +1 -0
  31. package/dist/index.d.ts.map +1 -1
  32. package/dist/index.js +1 -0
  33. package/dist/index.js.map +1 -1
  34. package/package.json +1 -1
  35. package/src/components/row/Row.stories.tsx +638 -80
  36. package/src/components/row/Row.test.tsx +48 -0
  37. package/src/components/row/Row.tsx +15 -5
  38. package/src/components/toggleGroup/ToggleGroup.stories.tsx +429 -0
  39. package/src/components/toggleGroup/ToggleGroup.test.tsx +155 -0
  40. package/src/components/toggleGroup/ToggleGroup.tsx +74 -0
  41. package/src/components/toggleGroup/ToggleGroupItem.tsx +24 -0
  42. package/src/components/toggleGroup/toggleGroup.scss +43 -0
  43. package/src/index.scss +1 -0
  44. package/src/index.ts +1 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.25.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#219](https://github.com/arbor-education/design-system.components/pull/219) [`263e11a`](https://github.com/arbor-education/design-system.components/commit/263e11af1fb329c81365538f483c90025a538f3a) Thanks [@Alex-DN-SP](https://github.com/Alex-DN-SP)! - MIS-70565 Added support for links in Row component
8
+
9
+ ## 0.25.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [#216](https://github.com/arbor-education/design-system.components/pull/216) [`edb31ee`](https://github.com/arbor-education/design-system.components/commit/edb31ee11a541a3f2ca84015042fefab915cb78e) Thanks [@angusmglfraser](https://github.com/angusmglfraser)! - MIS-70564 ✨ add ReactNode support for label, value and note in Row component
14
+
15
+ - [#210](https://github.com/arbor-education/design-system.components/pull/210) [`d8783db`](https://github.com/arbor-education/design-system.components/commit/d8783db17cfcd6209595f88acf57c1397858ab88) Thanks [@Alex-DN-SP](https://github.com/Alex-DN-SP)! - MIS-70760 Add ToggleGroup component
16
+
3
17
  ## 0.25.1
4
18
 
5
19
  ### Patch Changes
@@ -1,10 +1,11 @@
1
- import type { CSSProperties, MouseEventHandler } from 'react';
1
+ import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
2
2
  export type RowProps = {
3
3
  className?: string;
4
4
  style?: CSSProperties;
5
- label?: string;
6
- value?: string;
7
- note?: string;
5
+ label?: ReactNode;
6
+ value?: ReactNode;
7
+ href?: string;
8
+ note?: ReactNode;
8
9
  onClick?: MouseEventHandler<HTMLDivElement>;
9
10
  };
10
11
  export declare const Row: (props: RowProps) => import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../src/components/row/Row.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1E,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,4CA0ClC,CAAC;AAEF,yBAAiB,GAAG,CAAC;IACnB,KAAY,KAAK,GAAG,QAAQ,CAAC;CAC9B"}
1
+ {"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../src/components/row/Row.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAc,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrF,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,4CAmDlC,CAAC;AAEF,yBAAiB,GAAG,CAAC;IACnB,KAAY,KAAK,GAAG,QAAQ,CAAC;CAC9B"}
@@ -3,7 +3,7 @@ import classNames from 'classnames';
3
3
  import { Icon } from '../icon/Icon.js';
4
4
  import { ENTER_KEY, SPACE_KEY } from '../../utils/keyboardConstants.js';
5
5
  export const Row = (props) => {
6
- const { className, style, label, value, note, onClick, } = props;
6
+ const { className, style, label, value, href, note, onClick, } = props;
7
7
  const isClickable = !!onClick;
8
8
  return (_jsxs("div", { className: classNames('ds-row', {
9
9
  'ds-row--clickable': isClickable,
@@ -12,6 +12,8 @@ export const Row = (props) => {
12
12
  e.preventDefault();
13
13
  onClick(e);
14
14
  }
15
- }, tabIndex: isClickable ? 0 : -1, children: [_jsx("span", { className: "ds-row__label", children: label }), _jsx("span", { className: "ds-row__value", children: value }), _jsx("span", { className: "ds-row__note", children: note }), isClickable && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "chevron-right", className: "ds-row__icon-click", size: 16 }), _jsx(Icon, { name: "arrow-right", className: "ds-row__icon-click", size: 16 })] }))] }));
15
+ }, tabIndex: isClickable ? 0 : -1, children: [_jsx("span", { className: "ds-row__label", children: label }), _jsx("span", { className: "ds-row__value", children: href
16
+ ? (_jsx("a", { href: href, children: value || href }))
17
+ : value }), _jsx("span", { className: "ds-row__note", children: note }), isClickable && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "chevron-right", className: "ds-row__icon-click", size: 16 }), _jsx(Icon, { name: "arrow-right", className: "ds-row__icon-click", size: 16 })] }))] }));
16
18
  };
17
19
  //# sourceMappingURL=Row.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../src/components/row/Row.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAW/D,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,KAAe,EAAE,EAAE;IACrC,MAAM,EACJ,SAAS,EACT,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,CAAC,CAAC,OAAO,CAAC;IAE9B,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CACnB,QAAQ,EACR;YACE,mBAAmB,EAAE,WAAW;SACjC,EACD,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,IAAI,WAAW,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC1D,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,OAAO,CAAC,CAA0C,CAAC,CAAC;YACtD,CAAC;QACH,CAAC,EACD,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAE9B,eAAM,SAAS,EAAC,eAAe,YAAE,KAAK,GAAQ,EAC9C,eAAM,SAAS,EAAC,eAAe,YAAE,KAAK,GAAQ,EAC9C,eAAM,SAAS,EAAC,cAAc,YAAE,IAAI,GAAQ,EAC3C,WAAW,IAAI,CACd,8BACE,KAAC,IAAI,IAAC,IAAI,EAAC,eAAe,EAAC,SAAS,EAAC,oBAAoB,EAAC,IAAI,EAAE,EAAE,GAAI,EACtE,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,SAAS,EAAC,oBAAoB,EAAC,IAAI,EAAE,EAAE,GAAI,IACnE,CACJ,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../src/components/row/Row.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAY/D,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,KAAe,EAAE,EAAE;IACrC,MAAM,EACJ,SAAS,EACT,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,CAAC,CAAC,OAAO,CAAC;IAE9B,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CACnB,QAAQ,EACR;YACE,mBAAmB,EAAE,WAAW;SACjC,EACD,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,IAAI,WAAW,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC1D,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,OAAO,CAAC,CAA0C,CAAC,CAAC;YACtD,CAAC;QACH,CAAC,EACD,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAE9B,eAAM,SAAS,EAAC,eAAe,YAAE,KAAK,GAAQ,EAC9C,eAAM,SAAS,EAAC,eAAe,YAC5B,IAAI;oBACH,CAAC,CAAC,CACE,YAAG,IAAI,EAAE,IAAI,YACV,KAAK,IAAI,IAAI,GACZ,CACL;oBACH,CAAC,CAAC,KAAK,GACJ,EACP,eAAM,SAAS,EAAC,cAAc,YAAE,IAAI,GAAQ,EAC3C,WAAW,IAAI,CACd,8BACE,KAAC,IAAI,IAAC,IAAI,EAAC,eAAe,EAAC,SAAS,EAAC,oBAAoB,EAAC,IAAI,EAAE,EAAE,GAAI,EACtE,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,SAAS,EAAC,oBAAoB,EAAC,IAAI,EAAE,EAAE,GAAI,IACnE,CACJ,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -1,14 +1,124 @@
1
- import type { Meta, StoryObj } from '@storybook/react-vite';
1
+ import type { StoryObj } from '@storybook/react-vite';
2
2
  import { Row } from './Row.js';
3
- declare const meta: Meta<typeof Row>;
3
+ declare function RowDocsPage(): import("react/jsx-runtime").JSX.Element;
4
+ declare const meta: {
5
+ title: string;
6
+ component: (props: import("./Row.js").RowProps) => import("react/jsx-runtime").JSX.Element;
7
+ tags: string[];
8
+ parameters: {
9
+ layout: string;
10
+ docs: {
11
+ page: typeof RowDocsPage;
12
+ };
13
+ };
14
+ argTypes: {
15
+ label: {
16
+ description: string;
17
+ control: "text";
18
+ table: {
19
+ type: {
20
+ summary: string;
21
+ };
22
+ defaultValue: {
23
+ summary: string;
24
+ };
25
+ };
26
+ };
27
+ value: {
28
+ description: string;
29
+ control: "text";
30
+ table: {
31
+ type: {
32
+ summary: string;
33
+ };
34
+ defaultValue: {
35
+ summary: string;
36
+ };
37
+ };
38
+ };
39
+ href: {
40
+ description: string;
41
+ control: "text";
42
+ table: {
43
+ type: {
44
+ summary: string;
45
+ };
46
+ defaultValue: {
47
+ summary: string;
48
+ };
49
+ };
50
+ };
51
+ note: {
52
+ description: string;
53
+ control: "text";
54
+ table: {
55
+ type: {
56
+ summary: string;
57
+ };
58
+ defaultValue: {
59
+ summary: string;
60
+ };
61
+ };
62
+ };
63
+ onClick: {
64
+ description: string;
65
+ action: string;
66
+ control: false;
67
+ table: {
68
+ type: {
69
+ summary: string;
70
+ };
71
+ defaultValue: {
72
+ summary: string;
73
+ };
74
+ };
75
+ };
76
+ className: {
77
+ description: string;
78
+ control: "text";
79
+ table: {
80
+ type: {
81
+ summary: string;
82
+ };
83
+ defaultValue: {
84
+ summary: string;
85
+ };
86
+ };
87
+ };
88
+ style: {
89
+ description: string;
90
+ control: false;
91
+ table: {
92
+ type: {
93
+ summary: string;
94
+ };
95
+ defaultValue: {
96
+ summary: string;
97
+ };
98
+ };
99
+ };
100
+ };
101
+ };
4
102
  export default meta;
5
- type Story = StoryObj<typeof meta>;
103
+ type Story = StoryObj<typeof Row>;
6
104
  export declare const Default: Story;
7
105
  export declare const LabelOnly: Story;
8
- export declare const LabelAndValue: Story;
106
+ export declare const ValueOnly: Story;
9
107
  export declare const WithNote: Story;
108
+ export declare const WithHref: Story;
109
+ export declare const WithHrefFallback: Story;
110
+ export declare const WithHrefMailto: Story;
111
+ export declare const WithHrefAndNote: Story;
10
112
  export declare const Clickable: Story;
11
113
  export declare const ClickableWithNote: Story;
114
+ export declare const MixedClickableAndStatic: Story;
115
+ export declare const InSection: Story;
12
116
  export declare const LongContent: Story;
13
117
  export declare const MultipleRows: Story;
118
+ export declare const ReactNodeInValue: Story;
119
+ export declare const ReactNodeInNote: Story;
120
+ export declare const ReactNodeInLabel: Story;
121
+ export declare const AccessibilityNotes: Story;
122
+ export declare const CustomClassAndStyle: Story;
123
+ export declare const EmptyRow: Story;
14
124
  //# sourceMappingURL=Row.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Row.stories.d.ts","sourceRoot":"","sources":["../../../src/components/row/Row.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAY5D,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAyH/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAoE1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAkBnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqB3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAiCtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAiCvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAmC/B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAiDzB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA6D1B,CAAC"}
1
+ {"version":3,"file":"Row.stories.d.ts","sourceRoot":"","sources":["../../../src/components/row/Row.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAa5D,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAsI/B,iBAAS,WAAW,4CAmBnB;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFkB,CAAC;AAE7B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAyGlC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAiCtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAiCtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAsB9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAiC5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAmC7B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAiCvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAmC/B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAuCrC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAiCvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAiDzB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAqC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA+B9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA+B7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA+D9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAkChC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAmCjC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAC"}