@telia/teddy 0.3.0 → 0.3.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 (86) hide show
  1. package/dist/components/card/card-illustration.d.ts +1 -1
  2. package/dist/components/card/index.d.ts +1 -1
  3. package/dist/components/channel-button/channel-button-illustration.cjs +33 -0
  4. package/dist/components/channel-button/channel-button-illustration.d.ts +8 -0
  5. package/dist/components/channel-button/channel-button-illustration.js +33 -0
  6. package/dist/components/channel-button/channel-button-image.cjs +19 -0
  7. package/dist/components/channel-button/channel-button-image.d.ts +5 -0
  8. package/dist/components/channel-button/channel-button-image.js +19 -0
  9. package/dist/components/channel-button/channel-button-root.cjs +41 -0
  10. package/dist/components/channel-button/channel-button-root.d.ts +34 -0
  11. package/dist/components/channel-button/channel-button-root.js +41 -0
  12. package/dist/components/channel-button/channel-button-text.cjs +23 -0
  13. package/dist/components/channel-button/channel-button-text.d.ts +5 -0
  14. package/dist/components/channel-button/channel-button-text.js +23 -0
  15. package/dist/components/channel-button/index.cjs +15 -0
  16. package/dist/components/channel-button/index.d.ts +91 -0
  17. package/dist/components/channel-button/index.js +15 -0
  18. package/dist/components/checkbox/checkbox-group-list.d.ts +1 -1
  19. package/dist/components/checkbox/checkbox-group.d.ts +1 -1
  20. package/dist/components/checkbox/index.d.ts +2 -2
  21. package/dist/components/chip/chip-indicator.d.ts +2 -2
  22. package/dist/components/chip/index.d.ts +2 -2
  23. package/dist/components/color-dot/index.d.ts +1 -1
  24. package/dist/components/expandable-card/expandable-card-button.d.ts +2 -2
  25. package/dist/components/expandable-card/index.d.ts +3 -3
  26. package/dist/components/icon/utils.d.ts +1 -1
  27. package/dist/components/index.cjs +4 -2
  28. package/dist/components/index.d.ts +1 -0
  29. package/dist/components/index.js +3 -1
  30. package/dist/components/link/link.cjs +10 -10
  31. package/dist/components/link/link.js +10 -10
  32. package/dist/components/modal/modal.cjs +2 -1
  33. package/dist/components/modal/modal.js +2 -1
  34. package/dist/components/navigation-menu/navigation-menu.cjs +2 -1
  35. package/dist/components/navigation-menu/navigation-menu.js +2 -1
  36. package/dist/components/notabene/index.cjs +4 -9
  37. package/dist/components/notabene/index.d.ts +51 -8
  38. package/dist/components/notabene/index.js +4 -9
  39. package/dist/components/notabene/notabene-icon.cjs +1 -1
  40. package/dist/components/notabene/notabene-icon.d.ts +2 -2
  41. package/dist/components/notabene/notabene-icon.js +1 -1
  42. package/dist/components/notification/index.cjs +13 -2
  43. package/dist/components/notification/index.d.ts +132 -2
  44. package/dist/components/notification/index.js +12 -1
  45. package/dist/components/notification/notification-dismiss.cjs +46 -0
  46. package/dist/components/notification/notification-dismiss.d.ts +5 -0
  47. package/dist/components/notification/notification-dismiss.js +29 -0
  48. package/dist/components/notification/notification-footer.cjs +18 -0
  49. package/dist/components/notification/notification-footer.d.ts +5 -0
  50. package/dist/components/notification/notification-footer.js +18 -0
  51. package/dist/components/notification/notification-heading.cjs +18 -0
  52. package/dist/components/notification/notification-heading.d.ts +5 -0
  53. package/dist/components/notification/notification-heading.js +18 -0
  54. package/dist/components/notification/notification-icon.cjs +32 -0
  55. package/dist/components/notification/notification-icon.d.ts +9 -0
  56. package/dist/components/notification/notification-icon.js +32 -0
  57. package/dist/components/notification/notification-root.cjs +59 -0
  58. package/dist/components/notification/notification-root.d.ts +86 -0
  59. package/dist/components/notification/notification-root.js +42 -0
  60. package/dist/components/notification/notification-text.cjs +15 -0
  61. package/dist/components/notification/notification-text.d.ts +5 -0
  62. package/dist/components/notification/notification-text.js +15 -0
  63. package/dist/components/radio-card-group/radio-card-group-content.cjs +2 -1
  64. package/dist/components/radio-card-group/radio-card-group-content.js +2 -1
  65. package/dist/components/radio-card-group/radio-card-group-item-title.cjs +11 -10
  66. package/dist/components/radio-card-group/radio-card-group-item-title.js +11 -10
  67. package/dist/components/radio-card-group/radio-card-group-item.cjs +2 -1
  68. package/dist/components/radio-card-group/radio-card-group-item.js +2 -1
  69. package/dist/components/scroll-area/index.d.ts +2 -2
  70. package/dist/components/scroll-area/scroll-area-button.d.ts +2 -2
  71. package/dist/components/tabs/index.d.ts +2 -2
  72. package/dist/components/tabs/tabs-scroll-button.d.ts +2 -2
  73. package/dist/components/text-field/index.d.ts +2 -2
  74. package/dist/components/text-field/text-field-button.d.ts +2 -2
  75. package/dist/components/toggle/toggle.d.ts +2 -2
  76. package/dist/components/tooltip/index.d.ts +2 -2
  77. package/dist/main.cjs +4 -2
  78. package/dist/main.js +3 -1
  79. package/dist/style.css +1035 -948
  80. package/dist/utils/generate-styling/grid.d.ts +24 -24
  81. package/dist/utils/generate-styling/index.d.ts +16 -16
  82. package/dist/utils/generate-styling/util.d.ts +2 -2
  83. package/package.json +16 -16
  84. package/dist/components/notification/notification.cjs +0 -116
  85. package/dist/components/notification/notification.d.ts +0 -106
  86. package/dist/components/notification/notification.js +0 -99
@@ -1,22 +1,22 @@
1
1
  import { Responsive, numberIterator } from './util';
2
2
 
3
3
  export declare const gridTemplateRowsValues: readonly [...{
4
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
5
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
4
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
5
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
6
6
  }[], {
7
7
  readonly key: "none";
8
8
  readonly value: "none";
9
9
  }];
10
10
  export declare const gridTemplateColumnsValues: readonly [...{
11
- readonly key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
12
- readonly value: "repeat(1, minmax(0, 1fr))" | "repeat(10, minmax(0, 1fr))" | "repeat(2, minmax(0, 1fr))" | "repeat(3, minmax(0, 1fr))" | "repeat(4, minmax(0, 1fr))" | "repeat(5, minmax(0, 1fr))" | "repeat(6, minmax(0, 1fr))" | "repeat(7, minmax(0, 1fr))" | "repeat(8, minmax(0, 1fr))" | "repeat(9, minmax(0, 1fr))" | "repeat(11, minmax(0, 1fr))" | "repeat(12, minmax(0, 1fr))";
11
+ readonly key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
12
+ readonly value: "repeat(1, minmax(0, 1fr))" | "repeat(2, minmax(0, 1fr))" | "repeat(10, minmax(0, 1fr))" | "repeat(3, minmax(0, 1fr))" | "repeat(4, minmax(0, 1fr))" | "repeat(5, minmax(0, 1fr))" | "repeat(6, minmax(0, 1fr))" | "repeat(7, minmax(0, 1fr))" | "repeat(8, minmax(0, 1fr))" | "repeat(9, minmax(0, 1fr))" | "repeat(11, minmax(0, 1fr))" | "repeat(12, minmax(0, 1fr))";
13
13
  }[], {
14
14
  readonly key: "none";
15
15
  readonly value: "none";
16
16
  }];
17
17
  declare const gridColumnValues: readonly [...{
18
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
19
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
18
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
19
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
20
20
  }[], {
21
21
  readonly key: "span-2";
22
22
  readonly value: "span 2";
@@ -52,8 +52,8 @@ declare const gridColumnValues: readonly [...{
52
52
  readonly value: "span 12";
53
53
  }];
54
54
  declare const gridRowValues: readonly [...{
55
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
56
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
55
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
56
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
57
57
  }[], {
58
58
  readonly key: "span-2";
59
59
  readonly value: "span 2";
@@ -131,8 +131,8 @@ export declare const gridLayout: readonly [{
131
131
  readonly key: "rows";
132
132
  readonly className: "teddy-gtr";
133
133
  readonly values: readonly [...{
134
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
135
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
134
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
135
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
136
136
  }[], {
137
137
  readonly key: "none";
138
138
  readonly value: "none";
@@ -141,8 +141,8 @@ export declare const gridLayout: readonly [{
141
141
  readonly key: "columns";
142
142
  readonly className: "teddy-gtc";
143
143
  readonly values: readonly [...{
144
- readonly key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
145
- readonly value: "repeat(1, minmax(0, 1fr))" | "repeat(10, minmax(0, 1fr))" | "repeat(2, minmax(0, 1fr))" | "repeat(3, minmax(0, 1fr))" | "repeat(4, minmax(0, 1fr))" | "repeat(5, minmax(0, 1fr))" | "repeat(6, minmax(0, 1fr))" | "repeat(7, minmax(0, 1fr))" | "repeat(8, minmax(0, 1fr))" | "repeat(9, minmax(0, 1fr))" | "repeat(11, minmax(0, 1fr))" | "repeat(12, minmax(0, 1fr))";
144
+ readonly key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
145
+ readonly value: "repeat(1, minmax(0, 1fr))" | "repeat(2, minmax(0, 1fr))" | "repeat(10, minmax(0, 1fr))" | "repeat(3, minmax(0, 1fr))" | "repeat(4, minmax(0, 1fr))" | "repeat(5, minmax(0, 1fr))" | "repeat(6, minmax(0, 1fr))" | "repeat(7, minmax(0, 1fr))" | "repeat(8, minmax(0, 1fr))" | "repeat(9, minmax(0, 1fr))" | "repeat(11, minmax(0, 1fr))" | "repeat(12, minmax(0, 1fr))";
146
146
  }[], {
147
147
  readonly key: "none";
148
148
  readonly value: "none";
@@ -171,36 +171,36 @@ export declare const gridChildren: readonly [{
171
171
  readonly key: "gridColumnStart";
172
172
  readonly className: "teddy-gcs";
173
173
  readonly values: {
174
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
175
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
174
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
175
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
176
176
  }[];
177
177
  }, {
178
178
  readonly key: "gridColumnEnd";
179
179
  readonly className: "teddy-gce";
180
180
  readonly values: {
181
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
182
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
181
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
182
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
183
183
  }[];
184
184
  }, {
185
185
  readonly key: "gridRowStart";
186
186
  readonly className: "teddy-grs";
187
187
  readonly values: {
188
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
189
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
188
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
189
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
190
190
  }[];
191
191
  }, {
192
192
  readonly key: "gridRowEnd";
193
193
  readonly className: "teddy-gre";
194
194
  readonly values: {
195
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
196
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
195
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
196
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
197
197
  }[];
198
198
  }, {
199
199
  readonly key: "gridColumn";
200
200
  readonly className: "teddy-gc";
201
201
  readonly values: readonly [...{
202
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
203
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
202
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
203
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
204
204
  }[], {
205
205
  readonly key: "span-2";
206
206
  readonly value: "span 2";
@@ -239,8 +239,8 @@ export declare const gridChildren: readonly [{
239
239
  readonly key: "gridRow";
240
240
  readonly className: "teddy-gr";
241
241
  readonly values: readonly [...{
242
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
243
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
242
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
243
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
244
244
  }[], {
245
245
  readonly key: "span-2";
246
246
  readonly value: "span 2";
@@ -1978,8 +1978,8 @@ export declare const stylings: readonly [{
1978
1978
  readonly key: "rows";
1979
1979
  readonly className: "teddy-gtr";
1980
1980
  readonly values: readonly [...{
1981
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
1982
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
1981
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
1982
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
1983
1983
  }[], {
1984
1984
  readonly key: "none";
1985
1985
  readonly value: "none";
@@ -1988,8 +1988,8 @@ export declare const stylings: readonly [{
1988
1988
  readonly key: "columns";
1989
1989
  readonly className: "teddy-gtc";
1990
1990
  readonly values: readonly [...{
1991
- readonly key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
1992
- readonly value: "repeat(1, minmax(0, 1fr))" | "repeat(10, minmax(0, 1fr))" | "repeat(2, minmax(0, 1fr))" | "repeat(3, minmax(0, 1fr))" | "repeat(4, minmax(0, 1fr))" | "repeat(5, minmax(0, 1fr))" | "repeat(6, minmax(0, 1fr))" | "repeat(7, minmax(0, 1fr))" | "repeat(8, minmax(0, 1fr))" | "repeat(9, minmax(0, 1fr))" | "repeat(11, minmax(0, 1fr))" | "repeat(12, minmax(0, 1fr))";
1991
+ readonly key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
1992
+ readonly value: "repeat(1, minmax(0, 1fr))" | "repeat(2, minmax(0, 1fr))" | "repeat(10, minmax(0, 1fr))" | "repeat(3, minmax(0, 1fr))" | "repeat(4, minmax(0, 1fr))" | "repeat(5, minmax(0, 1fr))" | "repeat(6, minmax(0, 1fr))" | "repeat(7, minmax(0, 1fr))" | "repeat(8, minmax(0, 1fr))" | "repeat(9, minmax(0, 1fr))" | "repeat(11, minmax(0, 1fr))" | "repeat(12, minmax(0, 1fr))";
1993
1993
  }[], {
1994
1994
  readonly key: "none";
1995
1995
  readonly value: "none";
@@ -2017,36 +2017,36 @@ export declare const stylings: readonly [{
2017
2017
  readonly key: "gridColumnStart";
2018
2018
  readonly className: "teddy-gcs";
2019
2019
  readonly values: {
2020
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2021
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2020
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2021
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2022
2022
  }[];
2023
2023
  }, {
2024
2024
  readonly key: "gridColumnEnd";
2025
2025
  readonly className: "teddy-gce";
2026
2026
  readonly values: {
2027
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2028
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2027
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2028
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2029
2029
  }[];
2030
2030
  }, {
2031
2031
  readonly key: "gridRowStart";
2032
2032
  readonly className: "teddy-grs";
2033
2033
  readonly values: {
2034
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2035
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2034
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2035
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2036
2036
  }[];
2037
2037
  }, {
2038
2038
  readonly key: "gridRowEnd";
2039
2039
  readonly className: "teddy-gre";
2040
2040
  readonly values: {
2041
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2042
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2041
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2042
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2043
2043
  }[];
2044
2044
  }, {
2045
2045
  readonly key: "gridColumn";
2046
2046
  readonly className: "teddy-gc";
2047
2047
  readonly values: readonly [...{
2048
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2049
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2048
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2049
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2050
2050
  }[], {
2051
2051
  readonly key: "span-2";
2052
2052
  readonly value: "span 2";
@@ -2085,8 +2085,8 @@ export declare const stylings: readonly [{
2085
2085
  readonly key: "gridRow";
2086
2086
  readonly className: "teddy-gr";
2087
2087
  readonly values: readonly [...{
2088
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2089
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2088
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2089
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
2090
2090
  }[], {
2091
2091
  readonly key: "span-2";
2092
2092
  readonly value: "span 2";
@@ -76,7 +76,7 @@ export type Responsive<T> = {
76
76
  [key in Breakpoint]?: T | AnyCssValue;
77
77
  } | (T | AnyCssValue);
78
78
  export declare const numberIterator: {
79
- key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
80
- value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
79
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
80
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
81
81
  }[];
82
82
  export {};
package/package.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "pnpm": ">=9"
21
21
  },
22
22
  "private": false,
23
- "version": "0.3.0",
23
+ "version": "0.3.2",
24
24
  "sideEffects": [
25
25
  "**/*.css",
26
26
  "**/*.svg"
@@ -30,20 +30,20 @@
30
30
  "react-dom": "^18.0.0"
31
31
  },
32
32
  "devDependencies": {
33
- "@chromatic-com/storybook": "^2.0.2",
33
+ "@chromatic-com/storybook": "^3.2.4",
34
34
  "@laynezh/vite-plugin-lib-assets": "^0.5.19",
35
- "@storybook/addon-a11y": "^8.3.0",
36
- "@storybook/addon-essentials": "^8.3.0",
37
- "@storybook/addon-interactions": "^8.3.0",
38
- "@storybook/addon-links": "^8.3.0",
39
- "@storybook/addon-storysource": "^8.3.0",
40
- "@storybook/blocks": "^8.3.0",
35
+ "@storybook/addon-a11y": "^8.5.6",
36
+ "@storybook/addon-essentials": "^8.5.6",
37
+ "@storybook/addon-interactions": "^8.5.6",
38
+ "@storybook/addon-links": "^8.5.6",
39
+ "@storybook/addon-storysource": "^8.5.6",
40
+ "@storybook/blocks": "^8.5.6",
41
41
  "@storybook/client-api": "^7.6.17",
42
- "@storybook/manager-api": "^8.3.0",
43
- "@storybook/react": "^8.3.0",
44
- "@storybook/react-vite": "^8.3.0",
45
- "@storybook/test": "^8.3.0",
46
- "@storybook/theming": "^8.3.0",
42
+ "@storybook/manager-api": "^8.5.6",
43
+ "@storybook/react": "^8.5.6",
44
+ "@storybook/react-vite": "^8.5.6",
45
+ "@storybook/test": "^8.5.6",
46
+ "@storybook/theming": "^8.5.6",
47
47
  "@types/fs-extra": "^11.0.4",
48
48
  "@types/node": "^20.11.16",
49
49
  "@types/react": "^18.2.53",
@@ -60,7 +60,7 @@
60
60
  "eslint-plugin-mdx": "^3.1.5",
61
61
  "eslint-plugin-react-hooks": "^4.6.0",
62
62
  "eslint-plugin-react-refresh": "^0.4.5",
63
- "eslint-plugin-storybook": "^0.8.0",
63
+ "eslint-plugin-storybook": "^0.11.3",
64
64
  "execa": "^8.0.1",
65
65
  "fs-extra": "^11.2.0",
66
66
  "glob": "^10.3.10",
@@ -72,7 +72,7 @@
72
72
  "react-router-dom": "^6.23.0",
73
73
  "rollup-plugin-visualizer": "^5.12.0",
74
74
  "sass": "^1.70.0",
75
- "storybook": "^8.3.0",
75
+ "storybook": "^8.5.6",
76
76
  "style-dictionary": "^3.9.2",
77
77
  "tsx": "^4.7.0",
78
78
  "typescript": "^5.3.3",
@@ -100,7 +100,7 @@
100
100
  "@radix-ui/react-tooltip": "^1.1.2",
101
101
  "@radix-ui/react-use-controllable-state": "^1.0.1",
102
102
  "@react-spring/web": "^9.7.3",
103
- "@storybook/addon-docs": "^8.3.4",
103
+ "@storybook/addon-docs": "^8.5.6",
104
104
  "clsx": "^2.1.0",
105
105
  "react-intersection-observer": "^9.13.1",
106
106
  "react-slick": "0.29.x",
@@ -1,116 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const React = require("react");
5
- const clsx = require("clsx");
6
- const CollapsiblePrimitive = require("@radix-ui/react-collapsible");
7
- const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
8
- const components_text_text = require("../text/text.cjs");
9
- const components_button_button = require("../button/button.cjs");
10
- require("../../assets/sprite.1321fab0-teddy.svg");
11
- const components_icon_icon = require("../icon/icon.cjs");
12
- const components_heading_heading = require("../heading/heading.cjs");
13
- const components_card_index = require("../card/index.cjs");
14
- function _interopNamespaceDefault(e) {
15
- const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
16
- if (e) {
17
- for (const k in e) {
18
- if (k !== "default") {
19
- const d = Object.getOwnPropertyDescriptor(e, k);
20
- Object.defineProperty(n, k, d.get ? d : {
21
- enumerable: true,
22
- get: () => e[k]
23
- });
24
- }
25
- }
26
- }
27
- n.default = e;
28
- return Object.freeze(n);
29
- }
30
- const CollapsiblePrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(CollapsiblePrimitive);
31
- const styles = {
32
- "teddy-notification": "_teddy-notification_1ref8_3",
33
- "teddy-notification__dismiss": "_teddy-notification__dismiss_1ref8_12",
34
- "teddy-notification--success": "_teddy-notification--success_1ref8_16",
35
- "teddy-notification--warning": "_teddy-notification--warning_1ref8_21",
36
- "teddy-notification--error": "_teddy-notification--error_1ref8_26",
37
- "teddy-notification--information": "_teddy-notification--information_1ref8_31",
38
- "teddy-notification__heading": "_teddy-notification__heading_1ref8_36",
39
- "teddy-notification__icon": "_teddy-notification__icon_1ref8_41"
40
- };
41
- const rootClassName = "teddy-notification";
42
- const NotificationContext = React.createContext(void 0);
43
- const Root = React.forwardRef(
44
- ({ className, open: openProp, defaultOpen, onOpenChange, variant, ...props }, forwardRef) => {
45
- const classes = clsx([styles[`${rootClassName}`]], styles[`${rootClassName}--${variant}`], className);
46
- const [open = true, setOpen] = reactUseControllableState.useControllableState({
47
- prop: openProp,
48
- defaultProp: defaultOpen,
49
- onChange: onOpenChange
50
- });
51
- return /* @__PURE__ */ jsxRuntime.jsx(NotificationContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.Root, { open, onOpenChange: setOpen, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components_card_index.Card, { variant: "white", as: void 0, bordered: true, ...props, ref: forwardRef, className: classes }) }) }) });
52
- }
53
- );
54
- Root.displayName = "Notification";
55
- function getVariantIcon(variant) {
56
- switch (variant) {
57
- case "success":
58
- return "check-circle-filled";
59
- case "error":
60
- return "error-filled";
61
- case "warning":
62
- return "alert-filled";
63
- case "information":
64
- return "info-filled";
65
- }
66
- }
67
- const Icon = React.forwardRef(
68
- ({ className, ...props }, forwardRef) => {
69
- const classes = clsx([styles[`${rootClassName}__icon`]], className);
70
- const context = React.useContext(NotificationContext);
71
- const name = props.name || getVariantIcon(context == null ? void 0 : context.variant);
72
- if (!name)
73
- return null;
74
- return /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { size: "md", ...props, name, ref: forwardRef, className: classes });
75
- }
76
- );
77
- Icon.displayName = "Notification.Icon";
78
- const Heading = React.forwardRef(
79
- ({ className, ...props }, forwardRef) => {
80
- const classes = clsx([styles[`${rootClassName}__heading`]], className);
81
- return /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { ...props, variant: "subsection-100", asChild: false, ref: forwardRef, className: classes });
82
- }
83
- );
84
- Heading.displayName = "Notification.Heading";
85
- const Text = React.forwardRef(
86
- ({ className, ...props }, forwardRef) => {
87
- const classes = clsx([styles[`${rootClassName}__text`]], className);
88
- return /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { ...props, ref: forwardRef, className: classes });
89
- }
90
- );
91
- Text.displayName = "Notification.Text";
92
- const Dismiss = React.forwardRef(
93
- ({ className, children, ...props }, forwardRef) => {
94
- const classes = clsx([styles[`${rootClassName}__dismiss`]], className);
95
- return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
96
- components_button_button.Button,
97
- {
98
- iconOnly: true,
99
- "aria-label": "Lukk",
100
- variant: "tertiary-purple",
101
- ...props,
102
- ref: forwardRef,
103
- className: classes,
104
- children: children || /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "close" })
105
- }
106
- ) });
107
- }
108
- );
109
- Dismiss.displayName = "Notification.Dismiss";
110
- const Notification = Object.assign(Root, {
111
- Text,
112
- Heading,
113
- Icon,
114
- Dismiss
115
- });
116
- exports.Notification = Notification;
@@ -1,106 +0,0 @@
1
- import { default as React } from 'react';
2
- import { Text as TextPrimitives } from '../text';
3
- import { Button as ButtonPrimitives } from '../button';
4
- import { Icon as IconPrimitives } from '../icon';
5
- import { Heading as HeadingPrimitives } from '../heading';
6
- import { Card } from '../card';
7
-
8
- /** -------------------------------------------------------------------------------------------------
9
- * Root
10
- * -----------------------------------------------------------------------------------------------*/
11
- type RootProps = Omit<React.ComponentPropsWithoutRef<typeof Card>, 'variant' | 'as'> & {
12
- variant?: 'success' | 'error' | 'warning' | 'information';
13
- open?: boolean;
14
- defaultOpen?: boolean;
15
- onOpenChange?: (open: boolean) => void;
16
- role?: 'alert';
17
- };
18
- /** -------------------------------------------------------------------------------------------------
19
- * Icon
20
- * -----------------------------------------------------------------------------------------------*/
21
- type IconProps = Partial<React.ComponentPropsWithoutRef<typeof IconPrimitives>>;
22
- /** -------------------------------------------------------------------------------------------------
23
- * Heading
24
- * -----------------------------------------------------------------------------------------------*/
25
- type HeadingProps = Omit<React.ComponentPropsWithoutRef<typeof HeadingPrimitives>, 'asChild' | 'variant'>;
26
- /** -------------------------------------------------------------------------------------------------
27
- * Text
28
- * -----------------------------------------------------------------------------------------------*/
29
- type TextProps = React.ComponentPropsWithoutRef<typeof TextPrimitives>;
30
- /** -------------------------------------------------------------------------------------------------
31
- * Dismiss
32
- * -----------------------------------------------------------------------------------------------*/
33
- type DismissProps = Omit<React.ComponentPropsWithoutRef<typeof ButtonPrimitives>, 'variant'>;
34
- declare const Notification: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/radius').RadiusProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
35
- display?: import('../../utils/generate-styling').DisplayChildren | undefined;
36
- } & import('../../utils/generate-styling/gap').GapProps & {
37
- align?: import('../../utils/generate-styling/align').Align | undefined;
38
- justify?: import('../../utils/generate-styling/justify').Justify | undefined;
39
- } & import('../../utils/generate-styling/grid').GridLayout & {
40
- asChild: true;
41
- as?: undefined;
42
- } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
43
- asChild?: boolean | undefined;
44
- variant?: "beige" | "gray" | "white" | "purple-light" | "purple-dark" | "beige-light" | undefined;
45
- bordered?: boolean | undefined;
46
- shadow?: boolean | undefined;
47
- backgroundImageSrc?: string | undefined;
48
- imageGradient?: ("default" | "dark" | "light") | undefined;
49
- layout?: import('../card/card').Layout | undefined;
50
- } & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/radius').RadiusProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
51
- display?: import('../../utils/generate-styling').DisplayChildren | undefined;
52
- } & import('../../utils/generate-styling/gap').GapProps & {
53
- align?: import('../../utils/generate-styling/align').Align | undefined;
54
- justify?: import('../../utils/generate-styling/justify').Justify | undefined;
55
- } & import('../../utils/generate-styling/grid').GridLayout & {
56
- as?: "span" | undefined;
57
- asChild?: false | undefined;
58
- } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
59
- asChild?: boolean | undefined;
60
- variant?: "beige" | "gray" | "white" | "purple-light" | "purple-dark" | "beige-light" | undefined;
61
- bordered?: boolean | undefined;
62
- shadow?: boolean | undefined;
63
- backgroundImageSrc?: string | undefined;
64
- imageGradient?: ("default" | "dark" | "light") | undefined;
65
- layout?: import('../card/card').Layout | undefined;
66
- } & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/radius').RadiusProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
67
- display?: import('../../utils/generate-styling').DisplayChildren | undefined;
68
- } & import('../../utils/generate-styling/gap').GapProps & {
69
- align?: import('../../utils/generate-styling/align').Align | undefined;
70
- justify?: import('../../utils/generate-styling/justify').Justify | undefined;
71
- } & import('../../utils/generate-styling/grid').GridLayout & {
72
- as: "div";
73
- asChild?: false | undefined;
74
- } & React.RefAttributes<HTMLDivElement>, "ref"> & {
75
- asChild?: boolean | undefined;
76
- variant?: "beige" | "gray" | "white" | "purple-light" | "purple-dark" | "beige-light" | undefined;
77
- bordered?: boolean | undefined;
78
- shadow?: boolean | undefined;
79
- backgroundImageSrc?: string | undefined;
80
- imageGradient?: ("default" | "dark" | "light") | undefined;
81
- layout?: import('../card/card').Layout | undefined;
82
- } & React.RefAttributes<HTMLDivElement>, "ref">, "as" | "variant"> & {
83
- variant?: "error" | "warning" | "information" | "success" | undefined;
84
- open?: boolean | undefined;
85
- defaultOpen?: boolean | undefined;
86
- onOpenChange?: ((open: boolean) => void) | undefined;
87
- role?: "alert" | undefined;
88
- } & React.RefAttributes<HTMLDivElement>> & {
89
- Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;
90
- Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
91
- Icon: React.ForwardRefExoticComponent<Partial<Omit<React.SVGProps<SVGSVGElement> & {
92
- name: "link" | "map" | "menu" | "search" | "summary" | "time" | "video" | "filter" | "image" | "stop" | "key" | "x" | "download" | "split" | "alert" | "radio" | "email" | "copy" | "help" | "zoom-out" | "present" | "add" | "reverse" | "infinite" | "visible" | "zoom" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shortcut" | "shuffle" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "sync" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "smart-connect" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "youtube" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
93
- size?: ("sm" | "md" | "lg" | "xl" | "xs" | "font" | "xxs") | undefined;
94
- children?: React.ReactNode;
95
- }, "ref">> & React.RefAttributes<SVGSVGElement>>;
96
- Dismiss: React.ForwardRefExoticComponent<DismissProps & React.RefAttributes<HTMLButtonElement>>;
97
- };
98
- type NotificationProps = {
99
- Root: RootProps;
100
- Text: TextProps;
101
- Heading: HeadingProps;
102
- Icon: IconProps;
103
- Dismiss: DismissProps;
104
- };
105
- export { Notification };
106
- export type { NotificationProps };