@bethinkpl/design-system 41.1.4 → 41.1.5

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 (43) hide show
  1. package/dist/design-system.css +1 -1
  2. package/dist/design-system.js +7145 -7148
  3. package/dist/design-system.js.map +1 -1
  4. package/dist/lib/js/components/Buttons/IconButton/IconButton.vue.d.ts +1 -0
  5. package/dist/lib/js/components/Cards/CardExpandable/CardExpandable.vue.d.ts +1 -0
  6. package/dist/lib/js/components/DatePickers/DateBox/DateBox.vue.d.ts +1 -0
  7. package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.vue.d.ts +1 -0
  8. package/dist/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue.d.ts +1 -0
  9. package/dist/lib/js/components/Drawer/Drawer.consts.d.ts +6 -0
  10. package/dist/lib/js/components/Drawer/Drawer.vue.d.ts +13 -1
  11. package/dist/lib/js/components/Drawer/DrawerHeader/DrawerHeader.consts.d.ts +5 -0
  12. package/dist/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue.d.ts +63 -1394
  13. package/dist/lib/js/components/Drawer/DrawerSection/DrawerSection.vue.d.ts +3 -0
  14. package/dist/lib/js/components/Form/RadioButton/RadioButton.vue.d.ts +1 -0
  15. package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts +2 -0
  16. package/dist/lib/js/components/Headers/SectionHeader/SectionHeader.vue.d.ts +2 -0
  17. package/dist/lib/js/components/Icons/Icon/Icon.consts.d.ts +1 -0
  18. package/dist/lib/js/components/Modal/Modal.vue.d.ts +1 -0
  19. package/dist/lib/js/components/Modals/Modal/Modal.vue.d.ts +2 -0
  20. package/dist/lib/js/components/Modals/ModalDialog/ModalDialog.vue.d.ts +2 -0
  21. package/dist/lib/js/components/Pagination/Pagination.vue.d.ts +2 -0
  22. package/dist/lib/js/components/ProgressBar/ProgressBar.vue.d.ts +1 -0
  23. package/dist/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue.d.ts +1 -0
  24. package/dist/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue.d.ts +1 -0
  25. package/dist/lib/js/components/RichList/RichListItem/RichListItem.vue.d.ts +1 -0
  26. package/dist/lib/js/components/Statuses/AccessStatus/AccessStatus.vue.d.ts +1 -0
  27. package/dist/lib/js/components/Statuses/BlockadeStatus/BlockadeStatus.vue.d.ts +1 -0
  28. package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts +3 -0
  29. package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts +3 -0
  30. package/dist/lib/js/components/Switch/Switch.vue.d.ts +1 -0
  31. package/dist/lib/js/components/Tile/Tile.sb.shared.d.ts +1 -0
  32. package/dist/lib/js/components/Toggles/ToggleButton/ToggleButton.vue.d.ts +1 -0
  33. package/dist/lib/js/icons/fontawesome.d.ts +1 -0
  34. package/lib/js/components/Drawer/Drawer.consts.ts +9 -0
  35. package/lib/js/components/Drawer/Drawer.spec.ts +36 -0
  36. package/lib/js/components/Drawer/Drawer.stories.ts +7 -2
  37. package/lib/js/components/Drawer/Drawer.vue +35 -2
  38. package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.consts.ts +8 -0
  39. package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.spec.ts +40 -1
  40. package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.stories.ts +22 -8
  41. package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue +129 -146
  42. package/lib/js/icons/fontawesome.ts +2 -0
  43. package/package.json +1 -1
package/dist/lib/js/components/Drawer/DrawerSection/DrawerSection.vue.d.ts CHANGED
@@ -190,6 +190,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
190
190
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
191
191
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
192
192
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
193
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
193
194
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
194
195
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
195
196
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -625,6 +626,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
625
626
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
626
627
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
627
628
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
629
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
628
630
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
629
631
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
630
632
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1164,6 +1166,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1164
1166
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
1165
1167
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
1166
1168
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
1169
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1167
1170
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
1168
1171
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1169
1172
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Form/RadioButton/RadioButton.vue.d.ts CHANGED
@@ -131,6 +131,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
131
131
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
132
132
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
133
133
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
134
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
134
135
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
135
136
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
136
137
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts CHANGED
@@ -178,6 +178,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
178
178
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
179
179
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
180
180
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
181
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
181
182
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
182
183
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
183
184
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -596,6 +597,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
596
597
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
597
598
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
598
599
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
600
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
599
601
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
600
602
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
601
603
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Headers/SectionHeader/SectionHeader.vue.d.ts CHANGED
@@ -179,6 +179,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
179
179
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
180
180
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
181
181
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
182
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
182
183
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
183
184
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
184
185
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -718,6 +719,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
718
719
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
719
720
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
720
721
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
722
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
721
723
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
722
724
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
723
725
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Icons/Icon/Icon.consts.d.ts CHANGED
@@ -137,6 +137,7 @@ export declare const ICONS: {
137
137
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
138
138
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
139
139
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
140
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
140
141
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
141
142
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
142
143
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Modal/Modal.vue.d.ts CHANGED
@@ -118,6 +118,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
118
118
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
119
119
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
120
120
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
121
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
121
122
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
122
123
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
123
124
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Modals/Modal/Modal.vue.d.ts CHANGED
@@ -226,6 +226,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
226
226
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
227
227
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
228
228
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
229
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
229
230
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
230
231
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
231
232
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -849,6 +850,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
849
850
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
850
851
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
851
852
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
853
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
852
854
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
853
855
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
854
856
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Modals/ModalDialog/ModalDialog.vue.d.ts CHANGED
@@ -361,6 +361,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
361
361
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
362
362
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
363
363
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
364
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
364
365
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
365
366
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
366
367
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -984,6 +985,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
984
985
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
985
986
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
986
987
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
988
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
987
989
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
988
990
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
989
991
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Pagination/Pagination.vue.d.ts CHANGED
@@ -176,6 +176,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
176
176
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
177
177
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
178
178
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
179
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
179
180
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
180
181
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
181
182
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -569,6 +570,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
569
570
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
570
571
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
571
572
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
573
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
572
574
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
573
575
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
574
576
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/ProgressBar/ProgressBar.vue.d.ts CHANGED
@@ -202,6 +202,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
202
202
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
203
203
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
204
204
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
205
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
205
206
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
206
207
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
207
208
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue.d.ts CHANGED
@@ -133,6 +133,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
133
133
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
134
134
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
135
135
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
136
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
136
137
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
137
138
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
138
139
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue.d.ts CHANGED
@@ -675,6 +675,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
675
675
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
676
676
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
677
677
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
678
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
678
679
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
679
680
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
680
681
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/RichList/RichListItem/RichListItem.vue.d.ts CHANGED
@@ -199,6 +199,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
199
199
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
200
200
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
201
201
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
202
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
202
203
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
203
204
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
204
205
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Statuses/AccessStatus/AccessStatus.vue.d.ts CHANGED
@@ -116,6 +116,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
116
116
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
117
117
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
118
118
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
119
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
119
120
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
120
121
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
121
122
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Statuses/BlockadeStatus/BlockadeStatus.vue.d.ts CHANGED
@@ -116,6 +116,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
116
116
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
117
117
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
118
118
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
119
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
119
120
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
120
121
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
121
122
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts CHANGED
@@ -133,6 +133,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
133
133
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
134
134
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
135
135
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
136
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
136
137
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
137
138
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
138
139
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -834,6 +835,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
834
835
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
835
836
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
836
837
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
838
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
837
839
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
838
840
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
839
841
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1406,6 +1408,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1406
1408
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
1407
1409
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
1408
1410
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
1411
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1409
1412
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
1410
1413
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1411
1414
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts CHANGED
@@ -152,6 +152,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
152
152
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
153
153
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
154
154
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
155
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
155
156
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
156
157
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
157
158
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -806,6 +807,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
806
807
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
807
808
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
808
809
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
810
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
809
811
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
810
812
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
811
813
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1551,6 +1553,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1551
1553
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
1552
1554
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
1553
1555
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
1556
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1554
1557
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
1555
1558
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1556
1559
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Switch/Switch.vue.d.ts CHANGED
@@ -152,6 +152,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
152
152
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
153
153
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
154
154
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
155
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
155
156
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
156
157
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
157
158
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Tile/Tile.sb.shared.d.ts CHANGED
@@ -112,6 +112,7 @@ export declare const data: () => {
112
112
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
113
113
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
114
114
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
115
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
115
116
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
116
117
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
117
118
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Toggles/ToggleButton/ToggleButton.vue.d.ts CHANGED
@@ -168,6 +168,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
168
168
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
169
169
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
170
170
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
171
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
171
172
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
172
173
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
173
174
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/icons/fontawesome.d.ts CHANGED
@@ -96,6 +96,7 @@ export declare const FONTAWESOME_ICONS: {
96
96
  readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
97
97
  readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
98
98
  readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
99
+ readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
99
100
  readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
100
101
  readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
101
102
  readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/lib/js/components/Drawer/Drawer.consts.ts CHANGED
@@ -4,3 +4,12 @@ export const DRAWER_POSITIONS = {
4
4
  } as const;
5
5
 
6
6
  export type DrawerPosition = (typeof DRAWER_POSITIONS)[keyof typeof DRAWER_POSITIONS];
7
+
8
+ export const DRAWER_BACKGROUND_COLORS = {
9
+ NONE: 'none',
10
+ DEFAULT: 'default',
11
+ NEUTRAL: 'neutral',
12
+ } as const;
13
+
14
+ export type DrawerBackgroundColor =
15
+ (typeof DRAWER_BACKGROUND_COLORS)[keyof typeof DRAWER_BACKGROUND_COLORS];
package/lib/js/components/Drawer/Drawer.spec.ts ADDED
@@ -0,0 +1,36 @@
1
+ import { describe, expect, it } from 'vitest';
2
+ import { mount } from '@vue/test-utils';
3
+ import Drawer from './Drawer.vue';
4
+ import { DRAWER_BACKGROUND_COLORS, DrawerBackgroundColor } from './Drawer.consts';
5
+
6
+ const createComponent = (props = {}, slots = {}) => {
7
+ return mount(Drawer, {
8
+ props,
9
+ slots,
10
+ });
11
+ };
12
+
13
+ describe('Drawer', () => {
14
+ describe('backgroundColor', () => {
15
+ it.each([
16
+ [DRAWER_BACKGROUND_COLORS.DEFAULT, '-ds-backgroundDefault'],
17
+ [DRAWER_BACKGROUND_COLORS.NEUTRAL, '-ds-backgroundNeutral'],
18
+ ])('should set the %s background class', (backgroundColor, expectedClass) => {
19
+ const component = createComponent({ backgroundColor });
20
+
21
+ expect(component.find('.ds-drawer').classes()).toContain(expectedClass);
22
+ });
23
+
24
+ it.each([undefined, DRAWER_BACKGROUND_COLORS.NONE])(
25
+ 'should not set any background class when backgroundColor is %s',
26
+ (backgroundColor?: DrawerBackgroundColor) => {
27
+ const component = createComponent({ backgroundColor });
28
+
29
+ const classes = component.find('.ds-drawer').classes();
30
+
31
+ expect(classes).not.toContain('-ds-backgroundDefault');
32
+ expect(classes).not.toContain('-ds-backgroundNeutral');
33
+ },
34
+ );
35
+ });
36
+ });
package/lib/js/components/Drawer/Drawer.stories.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import Drawer from './Drawer.vue';
2
- import { DRAWER_POSITIONS } from './Drawer.consts';
2
+ import { DRAWER_BACKGROUND_COLORS, DRAWER_POSITIONS } from './Drawer.consts';
3
3
 
4
4
  import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
5
5
 
@@ -14,7 +14,7 @@ const StoryTemplate: StoryFn<typeof Drawer> = (args) => ({
14
14
  return args;
15
15
  },
16
16
  template: `<div style="height: 300px; width: 200px;">
17
- <drawer :position="position" :sticky-header="stickyHeader" :sticky-footer="stickyFooter">
17
+ <drawer :position="position" :sticky-header="stickyHeader" :sticky-footer="stickyFooter" :background-color="backgroundColor">
18
18
  <template v-slot:header><div style="background-color: var(--raw-gray-100)">Header<br><br></div></template>
19
19
  <div>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br></div>
20
20
  <template v-slot:footer><div style="background-color: var(--raw-gray-100)">Footer<br><br></div></template>
@@ -28,6 +28,7 @@ const args = {
28
28
  position: DRAWER_POSITIONS.RIGHT,
29
29
  stickyHeader: true,
30
30
  stickyFooter: true,
31
+ backgroundColor: DRAWER_BACKGROUND_COLORS.NONE,
31
32
  } as Args;
32
33
 
33
34
  const argTypes = {
@@ -35,6 +36,10 @@ const argTypes = {
35
36
  control: 'select',
36
37
  options: Object.values(DRAWER_POSITIONS),
37
38
  },
39
+ backgroundColor: {
40
+ control: 'select',
41
+ options: Object.values(DRAWER_BACKGROUND_COLORS),
42
+ },
38
43
  } as ArgTypes;
39
44
 
40
45
  Interactive.argTypes = argTypes;
package/lib/js/components/Drawer/Drawer.vue CHANGED
@@ -1,5 +1,8 @@
1
1
  <template>
2
- <div class="ds-drawer scrollable-container" :class="{ [positionClassName]: true }">
2
+ <div
3
+ class="ds-drawer scrollable-container"
4
+ :class="[positionClassName, backgroundColorClassName]"
5
+ >
3
6
  <div v-if="$slots.header && stickyHeader" class="ds-drawer__header -ds-sticky">
4
7
  <slot name="header" />
5
8
  </div>
@@ -48,6 +51,14 @@
48
51
  }
49
52
  }
50
53
 
54
+ &.-ds-backgroundDefault {
55
+ background-color: $color-default-background;
56
+ }
57
+
58
+ &.-ds-backgroundNeutral {
59
+ background-color: $color-neutral-background;
60
+ }
61
+
51
62
  &__header,
52
63
  &__footer {
53
64
  flex-shrink: 0;
@@ -73,7 +84,12 @@
73
84
  <script lang="ts">
74
85
  import { defineComponent, PropType } from 'vue';
75
86
 
76
- import { DRAWER_POSITIONS, DrawerPosition } from './Drawer.consts';
87
+ import {
88
+ DRAWER_BACKGROUND_COLORS,
89
+ DRAWER_POSITIONS,
90
+ DrawerBackgroundColor,
91
+ DrawerPosition,
92
+ } from './Drawer.consts';
77
93
 
78
94
  export default defineComponent({
79
95
  name: 'Drawer',
@@ -93,6 +109,13 @@ export default defineComponent({
93
109
  type: Boolean,
94
110
  default: true,
95
111
  },
112
+ backgroundColor: {
113
+ type: String as PropType<DrawerBackgroundColor>,
114
+ default: DRAWER_BACKGROUND_COLORS.NONE,
115
+ validator(backgroundColor: DrawerBackgroundColor) {
116
+ return Object.values(DRAWER_BACKGROUND_COLORS).includes(backgroundColor);
117
+ },
118
+ },
96
119
  },
97
120
  computed: {
98
121
  positionClassName(): string {
@@ -102,6 +125,16 @@ export default defineComponent({
102
125
 
103
126
  return '-ds-positionRight';
104
127
  },
128
+ backgroundColorClassName(): string | null {
129
+ switch (this.backgroundColor) {
130
+ case DRAWER_BACKGROUND_COLORS.DEFAULT:
131
+ return '-ds-backgroundDefault';
132
+ case DRAWER_BACKGROUND_COLORS.NEUTRAL:
133
+ return '-ds-backgroundNeutral';
134
+ default:
135
+ return null;
136
+ }
137
+ },
105
138
  },
106
139
  });
107
140
  </script>
package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.consts.ts CHANGED
@@ -5,3 +5,11 @@ export const DRAWER_HEADER_TITLE_COLORS = {
5
5
 
6
6
  export type DrawerHeaderTitleColor =
7
7
  (typeof DRAWER_HEADER_TITLE_COLORS)[keyof typeof DRAWER_HEADER_TITLE_COLORS];
8
+
9
+ export const DRAWER_HEADER_BACKGROUND_COLORS = {
10
+ NONE: 'none',
11
+ DEFAULT: 'default',
12
+ } as const;
13
+
14
+ export type DrawerHeaderBackgroundColor =
15
+ (typeof DRAWER_HEADER_BACKGROUND_COLORS)[keyof typeof DRAWER_HEADER_BACKGROUND_COLORS];
package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.spec.ts CHANGED
@@ -2,10 +2,15 @@ import { describe, expect, it } from 'vitest';
2
2
  import { mount } from '@vue/test-utils';
3
3
  import DrawerHeader from './DrawerHeader.vue';
4
4
  import { IconButton } from '../../../';
5
+ import {
6
+ DRAWER_HEADER_BACKGROUND_COLORS,
7
+ DrawerHeaderBackgroundColor,
8
+ } from './DrawerHeader.consts';
5
9
 
6
- const createComponent = (props = {}) => {
10
+ const createComponent = (props = {}, slots = {}) => {
7
11
  return mount(DrawerHeader, {
8
12
  props,
13
+ slots,
9
14
  });
10
15
  };
11
16
 
@@ -52,4 +57,38 @@ describe('DrawerHeader', () => {
52
57
  expect(component.emitted().backClicked).toHaveLength(1);
53
58
  });
54
59
  });
60
+
61
+ describe('supporting slot', () => {
62
+ it('should render the slot content inside the header wrapper', () => {
63
+ const component = createComponent(
64
+ {},
65
+ { supporting: '<span class="supporting-content">Supporting</span>' },
66
+ );
67
+
68
+ const headerWrapper = component.find('.ds-drawerHeader__headerWrapper').element;
69
+
70
+ expect(component.find('.supporting-content').element.parentElement).toBe(headerWrapper);
71
+ });
72
+ });
73
+
74
+ describe('backgroundColor', () => {
75
+ it('should set the default background class when backgroundColor is default', () => {
76
+ const component = createComponent({
77
+ backgroundColor: DRAWER_HEADER_BACKGROUND_COLORS.DEFAULT,
78
+ });
79
+
80
+ expect(component.find('.ds-drawerHeader').classes()).toContain('-ds-backgroundDefault');
81
+ });
82
+
83
+ it.each([undefined, DRAWER_HEADER_BACKGROUND_COLORS.NONE])(
84
+ 'should not set any background class when backgroundColor is %s',
85
+ (backgroundColor?: DrawerHeaderBackgroundColor) => {
86
+ const component = createComponent({ backgroundColor });
87
+
88
+ expect(component.find('.ds-drawerHeader').classes()).not.toContain(
89
+ '-ds-backgroundDefault',
90
+ );
91
+ },
92
+ );
93
+ });
55
94
  });
package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.stories.ts CHANGED
@@ -2,7 +2,11 @@ import DrawerHeader from './DrawerHeader.vue';
2
2
 
3
3
  import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
4
4
  import { ICONS } from '../../Icons/Icon';
5
- import { DRAWER_HEADER_TITLE_COLORS } from './DrawerHeader.consts';
5
+ import { DRAWER_HEADER_BACKGROUND_COLORS, DRAWER_HEADER_TITLE_COLORS } from './DrawerHeader.consts';
6
+ import SlotPlaceholder, {
7
+ SLOT_PLACEHOLDER_SIZES,
8
+ } from '../../../../../.storybook/SlotPlaceholder/SlotPlaceholder.vue';
9
+ import { toRefs } from 'vue';
6
10
 
7
11
  export default {
8
12
  title: 'Components/Drawer/DrawerHeader',
@@ -10,13 +14,12 @@ export default {
10
14
  } as Meta<typeof DrawerHeader>;
11
15
 
12
16
  const StoryTemplate: StoryFn<typeof DrawerHeader> = (args) => ({
13
- components: { DrawerHeader },
17
+ components: { DrawerHeader, SlotPlaceholder },
14
18
  setup() {
15
- return args;
16
- },
17
- data() {
18
19
  return {
19
- ICONS: Object.freeze(ICONS),
20
+ ...toRefs(args),
21
+ ICONS,
22
+ SLOT_PLACEHOLDER_SIZES,
20
23
  };
21
24
  },
22
25
  template: `
@@ -33,12 +36,16 @@ const StoryTemplate: StoryFn<typeof DrawerHeader> = (args) => ({
33
36
  :title-ellipsis="titleEllipsis"
34
37
  :title="title"
35
38
  :has-back-button="hasBackButton"
39
+ :background-color="backgroundColor"
36
40
  >
37
41
  <template #actions v-if="actions">
38
- <div v-html="actions" />
42
+ <slot-placeholder :label="actions" :size="SLOT_PLACEHOLDER_SIZES.SMALL" />
39
43
  </template>
40
44
  <template #titleTrailing v-if="titleTrailing">
41
- <div v-html="titleTrailing" />
45
+ <slot-placeholder :label="titleTrailing" :size="SLOT_PLACEHOLDER_SIZES.SMALL" />
46
+ </template>
47
+ <template #supporting v-if="supporting">
48
+ <slot-placeholder :label="supporting" :size="SLOT_PLACEHOLDER_SIZES.SMALL" />
42
49
  </template>
43
50
  </drawer-header>`,
44
51
  });
@@ -59,7 +66,9 @@ const args = {
59
66
  isSecondLevel: false,
60
67
  actions: 'actions slot',
61
68
  titleTrailing: 'trailing slot',
69
+ supporting: 'supporting slot',
62
70
  hasBackButton: false,
71
+ backgroundColor: DRAWER_HEADER_BACKGROUND_COLORS.NONE,
63
72
  } as Args;
64
73
 
65
74
  const argTypes = {
@@ -82,7 +91,12 @@ const argTypes = {
82
91
  isClosable: { control: 'boolean' },
83
92
  actions: { control: 'text' },
84
93
  titleTrailing: { control: 'text' },
94
+ supporting: { control: 'text' },
85
95
  hasBackButton: { control: 'boolean' },
96
+ backgroundColor: {
97
+ control: 'select',
98
+ options: Object.values(DRAWER_HEADER_BACKGROUND_COLORS),
99
+ },
86
100
  } as ArgTypes;
87
101
 
88
102
  Interactive.argTypes = argTypes;