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

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 (42) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/components/row/Row.d.ts +4 -4
  3. package/dist/components/row/Row.d.ts.map +1 -1
  4. package/dist/components/row/Row.stories.d.ts +3 -0
  5. package/dist/components/row/Row.stories.d.ts.map +1 -1
  6. package/dist/components/row/Row.stories.js +96 -6
  7. package/dist/components/row/Row.stories.js.map +1 -1
  8. package/dist/components/row/Row.test.js +20 -0
  9. package/dist/components/row/Row.test.js.map +1 -1
  10. package/dist/components/toggleGroup/ToggleGroup.d.ts +29 -0
  11. package/dist/components/toggleGroup/ToggleGroup.d.ts.map +1 -0
  12. package/dist/components/toggleGroup/ToggleGroup.js +26 -0
  13. package/dist/components/toggleGroup/ToggleGroup.js.map +1 -0
  14. package/dist/components/toggleGroup/ToggleGroup.stories.d.ts +86 -0
  15. package/dist/components/toggleGroup/ToggleGroup.stories.d.ts.map +1 -0
  16. package/dist/components/toggleGroup/ToggleGroup.stories.js +342 -0
  17. package/dist/components/toggleGroup/ToggleGroup.stories.js.map +1 -0
  18. package/dist/components/toggleGroup/ToggleGroup.test.d.ts +2 -0
  19. package/dist/components/toggleGroup/ToggleGroup.test.d.ts.map +1 -0
  20. package/dist/components/toggleGroup/ToggleGroup.test.js +123 -0
  21. package/dist/components/toggleGroup/ToggleGroup.test.js.map +1 -0
  22. package/dist/components/toggleGroup/ToggleGroupItem.d.ts +10 -0
  23. package/dist/components/toggleGroup/ToggleGroupItem.d.ts.map +1 -0
  24. package/dist/components/toggleGroup/ToggleGroupItem.js +5 -0
  25. package/dist/components/toggleGroup/ToggleGroupItem.js.map +1 -0
  26. package/dist/index.css +33 -0
  27. package/dist/index.css.map +1 -1
  28. package/dist/index.d.ts +1 -0
  29. package/dist/index.d.ts.map +1 -1
  30. package/dist/index.js +1 -0
  31. package/dist/index.js.map +1 -1
  32. package/package.json +1 -1
  33. package/src/components/row/Row.stories.tsx +141 -6
  34. package/src/components/row/Row.test.tsx +23 -0
  35. package/src/components/row/Row.tsx +4 -4
  36. package/src/components/toggleGroup/ToggleGroup.stories.tsx +429 -0
  37. package/src/components/toggleGroup/ToggleGroup.test.tsx +155 -0
  38. package/src/components/toggleGroup/ToggleGroup.tsx +74 -0
  39. package/src/components/toggleGroup/ToggleGroupItem.tsx +24 -0
  40. package/src/components/toggleGroup/toggleGroup.scss +43 -0
  41. package/src/index.scss +1 -0
  42. package/src/index.ts +1 -0
package/src/components/toggleGroup/toggleGroup.scss ADDED
@@ -0,0 +1,43 @@
1
+ .ds-toggle-group {
2
+ display: inline-flex;
3
+ border-radius: var(--border-radius-round);
4
+ border: var(--toggle-weight-border) solid var(--color-grey-100);
5
+ padding: var(--border-radius-small);
6
+ gap: 8px;
7
+ align-items: center;
8
+
9
+ .ds-toggle-group__item {
10
+ &--red {
11
+ background-color: var(--color-semantic-destructive-100);
12
+ color: var(--color-semantic-destructive-700);
13
+
14
+ &:focus,
15
+ &:hover {
16
+ background-color: var(--color-semantic-destructive-100);
17
+ color: var(--color-semantic-destructive-700);
18
+ }
19
+ }
20
+
21
+ &--yellow {
22
+ background-color: var(--color-semantic-caution-100);
23
+ color: var(--color-semantic-caution-700);
24
+
25
+ &:focus,
26
+ &:hover {
27
+ background-color: var(--color-semantic-caution-100);
28
+ color: var(--color-semantic-caution-700);
29
+ }
30
+ }
31
+
32
+ &--green {
33
+ background-color: var(--color-semantic-success-100);
34
+ color: var(--color-semantic-success-700);
35
+
36
+ &:focus,
37
+ &:hover {
38
+ background-color: var(--color-semantic-success-100);
39
+ color: var(--color-semantic-success-700);
40
+ }
41
+ }
42
+ }
43
+ }
package/src/index.scss CHANGED
@@ -53,6 +53,7 @@
53
53
  @use "components/row/row.scss";
54
54
  @use "components/combobox/combobox.scss";
55
55
  @use "components/toggle/toggle.scss";
56
+ @use "components/toggleGroup/toggleGroup.scss";
56
57
  @use "components/dataViewCard/dataViewCard.scss";
57
58
  @use "components/treeRow/treeRow.scss";
58
59
  @use "components/sidebarNav/sidebarNav.scss";
package/src/index.ts CHANGED
@@ -74,6 +74,7 @@ export { TagList } from 'Components/tagList/TagList';
74
74
  export type { TagListItem, TagListOverflowRenderArgs, TagListOverflowTarget, TagListProps } from 'Components/tagList/TagList';
75
75
  export { Toast } from 'Components/toast/Toast';
76
76
  export { Toggle } from 'Components/toggle/Toggle';
77
+ export { ToggleGroup } from 'Components/toggleGroup/ToggleGroup';
77
78
  export { Tooltip } from 'Components/tooltip/Tooltip';
78
79
  export { TooltipWrapper } from 'Components/tooltip/TooltipWrapper';
79
80
  export { GovhubLogo, KeyLogo, RobinLogo, SampeopleLogo, TimetablerLogo } from 'Components/userDropdown/assets/logos';