@arbor-education/design-system.components 0.0.2 → 0.0.4

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/dist/components/icon/Icon.stories.d.ts +7 -0
  2. package/dist/components/icon/Icon.stories.d.ts.map +1 -1
  3. package/dist/components/icon/Icon.stories.js +8 -0
  4. package/dist/components/icon/Icon.stories.js.map +1 -1
  5. package/dist/components/tabs/Tabs.d.ts +17 -0
  6. package/dist/components/tabs/Tabs.d.ts.map +1 -0
  7. package/dist/components/tabs/Tabs.js +10 -0
  8. package/dist/components/tabs/Tabs.js.map +1 -0
  9. package/dist/components/tabs/Tabs.stories.d.ts +40 -0
  10. package/dist/components/tabs/Tabs.stories.d.ts.map +1 -0
  11. package/dist/components/tabs/Tabs.stories.js +46 -0
  12. package/dist/components/tabs/Tabs.stories.js.map +1 -0
  13. package/dist/components/tabs/Tabs.test.d.ts +2 -0
  14. package/dist/components/tabs/Tabs.test.d.ts.map +1 -0
  15. package/dist/components/tabs/Tabs.test.js +108 -0
  16. package/dist/components/tabs/Tabs.test.js.map +1 -0
  17. package/dist/components/tabs/TabsItem.d.ts +15 -0
  18. package/dist/components/tabs/TabsItem.d.ts.map +1 -0
  19. package/dist/components/tabs/TabsItem.js +18 -0
  20. package/dist/components/tabs/TabsItem.js.map +1 -0
  21. package/dist/components/tabs/TabsItem.stories.d.ts +618 -0
  22. package/dist/components/tabs/TabsItem.stories.d.ts.map +1 -0
  23. package/dist/components/tabs/TabsItem.stories.js +48 -0
  24. package/dist/components/tabs/TabsItem.stories.js.map +1 -0
  25. package/dist/index.css +57 -1
  26. package/dist/index.css.map +1 -1
  27. package/dist/index.d.ts +1 -0
  28. package/dist/index.d.ts.map +1 -1
  29. package/dist/index.js +1 -0
  30. package/dist/index.js.map +1 -1
  31. package/package.json +1 -1
  32. package/src/components/card/card.scss +1 -1
  33. package/src/components/icon/Icon.stories.tsx +8 -0
  34. package/src/components/tabs/Tabs.stories.tsx +92 -0
  35. package/src/components/tabs/Tabs.test.tsx +220 -0
  36. package/src/components/tabs/Tabs.tsx +14 -0
  37. package/src/components/tabs/TabsItem.stories.tsx +55 -0
  38. package/src/components/tabs/TabsItem.tsx +42 -0
  39. package/src/components/tabs/tabs.scss +61 -0
  40. package/src/index.scss +1 -0
  41. package/src/index.ts +1 -0
  42. package/src/tokens.scss +1 -0
package/src/components/tabs/tabs.scss ADDED
@@ -0,0 +1,61 @@
1
+ .ds-tabs {
2
+ display: flex;
3
+ width: 100%;
4
+ list-style: none;
5
+ padding: 0;
6
+ margin: 0;
7
+ font-family: var(--font-family-standard);
8
+ align-items: center;
9
+ justify-content: center;
10
+ }
11
+
12
+ .ds-tabs-item {
13
+ margin: 0;
14
+ padding: 0;
15
+ }
16
+
17
+ .ds-tabs-item__tab {
18
+ font-family: var(--font-family-standard);
19
+ padding: var(--tabs-tab-item-spacing-y) var(--tabs-tab-item-spacing-x);
20
+ cursor: pointer;
21
+ display: flex;
22
+ align-items: center;
23
+ justify-content: center;
24
+ background-color: transparent;
25
+ border: none;
26
+ text-decoration: none;
27
+ color: var(--tabs-tab-item-inactive-default-color-text);
28
+ line-height: 150%;
29
+ font-size: var(--font-size-3-14);
30
+ border-bottom: 2px solid transparent;
31
+ box-sizing: border-box;
32
+ gap: var(--tabs-tab-item-spacing-gap-x);
33
+
34
+ &:hover {
35
+ color: var(--tabs-tab-item-inactive-hover-color-text);
36
+ border-bottom: 2px solid var(--tabs-tab-item-inactive-hover-color-line);
37
+ }
38
+
39
+ &:focus {
40
+ color: var(--tabs-tab-item-inactive-focussed-color-text);
41
+ outline: 2px solid var(--tabs-tab-item-inactive-focussed-color-focus);
42
+ border-radius: var(--tabs-tab-item-radius);
43
+ }
44
+
45
+ &--active {
46
+ color: var(--tabs-tab-item-active-default-color-text);
47
+ border-bottom: 2px solid var(--tabs-tab-item-active-default-color-line);
48
+
49
+ &:hover {
50
+ color: var(--tabs-tab-item-active-default-color-text);
51
+ border-bottom: 2px solid var(--tabs-tab-item-active-default-color-line);
52
+ }
53
+
54
+ &:focus {
55
+ color: var(--tabs-tab-item-active-default-color-text);
56
+ outline: 2px solid var(--tabs-tab-item-active-color-focus);
57
+ }
58
+ }
59
+ }
60
+
61
+
package/src/index.scss CHANGED
@@ -7,4 +7,5 @@
7
7
  @use "./components/formField/inputs/input.scss";
8
8
  @use "./components/formField/label/label.scss";
9
9
  @use './components/pill/pill.scss';
10
+ @use './components/tabs/tabs.scss';
10
11
  @import 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap';
package/src/index.ts CHANGED
@@ -4,5 +4,6 @@ export { HeadingInnerContainer } from 'Components/heading/HeadingInnerContainer'
4
4
  export { Icon } from 'Components/icon/Icon';
5
5
  export { Card } from 'Components/card/Card';
6
6
  export { Pill } from 'Components/pill/Pill';
7
+ export { Tabs } from 'Components/tabs/Tabs';
7
8
  export { TextInput } from './components/formField/inputs/text/TextInput';
8
9
  export { TextArea } from './components/formField/inputs/textArea/TextArea';
package/src/tokens.scss CHANGED
@@ -696,6 +696,7 @@
696
696
  --tabs-tab-item-active-focussed-color-icon: #0e8a0e;
697
697
  --tabs-tab-item-active-focussed-color-line: #0e8a0e;
698
698
  --tabs-tab-item-active-focussed-focus: #3cad51;
699
+ --tabs-tab-item-radius: 0.5rem;
699
700
  --tabs-tab-item-inactive-default-color-text: #2f2f2f;
700
701
  --tabs-tab-item-inactive-default-color-icon: #2f2f2f;
701
702
  --tabs-tab-item-inactive-hover-color-line: #d1d1d1;