@bethinkpl/design-system 20.0.0 → 20.1.0

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 (58) hide show
  1. package/.eslintrc.js +1 -0
  2. package/.github/workflows/build-to-review-on-trigger.yml +68 -0
  3. package/.yarnrc.yml +1 -0
  4. package/dist/design-system.umd.js +438 -376
  5. package/dist/design-system.umd.js.map +1 -1
  6. package/dist/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue.d.ts +282 -3
  7. package/dist/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue.d.ts +228 -3
  8. package/dist/lib/js/components/Drawer/DrawerSection/DrawerSection.vue.d.ts +1 -1
  9. package/dist/lib/js/components/SelectList/SelectList.vue.d.ts +4 -3
  10. package/dist/lib/js/components/SelectList/SelectListItem/SelectListItem.vue.d.ts +258 -3
  11. package/dist/lib/js/components/SelectList/SelectListItemDivider/SelectListItemDivider.vue.d.ts +8 -3
  12. package/dist/lib/js/components/Switch/Switch.vue.d.ts +6 -0
  13. package/docs/iframe.html +1 -1
  14. package/docs/main.d1b90503.iframe.bundle.js +1 -0
  15. package/docs/project.json +1 -1
  16. package/lib/js/components/Banner/Banner.vue +2 -0
  17. package/lib/js/components/Cards/CardExpandable/CardExpandable.vue +2 -0
  18. package/lib/js/components/Chip/Chip.vue +2 -0
  19. package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue +2 -0
  20. package/lib/js/components/Drawer/DrawerSection/DrawerSection.vue +4 -2
  21. package/lib/js/components/Drawer/DrawerTile/DrawerTile.vue +2 -0
  22. package/lib/js/components/Dropdown/Dropdown.vue +2 -0
  23. package/lib/js/components/Form/Checkbox/Checkbox.vue +2 -0
  24. package/lib/js/components/Form/RadioButton/RadioButton.vue +2 -0
  25. package/lib/js/components/Form/SelectionControl/SelectionControl.vue +2 -0
  26. package/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue +2 -0
  27. package/lib/js/components/Headers/SectionHeader/SectionHeader.vue +2 -0
  28. package/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.vue +2 -0
  29. package/lib/js/components/Modal/Modal.vue +2 -0
  30. package/lib/js/components/Modals/Modal/Modal.vue +5 -3
  31. package/lib/js/components/Modals/ModalDialog/ModalDialog.vue +2 -0
  32. package/lib/js/components/Pagination/Pagination.vue +2 -0
  33. package/lib/js/components/PopOver/PopOver.vue +2 -0
  34. package/lib/js/components/RichList/{RichListItemBasic/RichListItemBasic.stories.ts → BasicRichListItem/BasicRichListItem.stories.ts} +51 -17
  35. package/lib/js/components/RichList/{RichListItemBasic/RichListItemBasic.vue → BasicRichListItem/BasicRichListItem.vue} +90 -16
  36. package/lib/js/components/RichList/BasicRichListItem/index.ts +3 -0
  37. package/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.consts.ts +18 -0
  38. package/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.stories.ts +337 -0
  39. package/lib/js/components/RichList/{RichListGroupItem/RichListGroupItem.vue → GroupRichListItem/GroupRichListItem.vue} +63 -16
  40. package/lib/js/components/RichList/GroupRichListItem/index.ts +4 -0
  41. package/lib/js/components/RichList/RichListItem/RichListItem.consts.ts +15 -18
  42. package/lib/js/components/RichList/RichListItem/RichListItem.stories.ts +42 -12
  43. package/lib/js/components/RichList/RichListItem/RichListItem.vue +242 -82
  44. package/lib/js/components/SelectionTile/SelectionTile.vue +2 -0
  45. package/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue +2 -0
  46. package/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue +2 -0
  47. package/lib/js/components/SurveyQuestions/SurveyQuestionTextarea.vue +2 -0
  48. package/lib/js/components/Switch/Switch.vue +12 -0
  49. package/lib/js/components/TabItem/TabItem.vue +2 -0
  50. package/lib/js/components/Toggles/ToggleButton/ToggleButton.vue +2 -0
  51. package/lib/js/index.ts +2 -2
  52. package/lib/styles/mixins/_scrollbars.scss +9 -0
  53. package/package.json +1 -1
  54. package/docs/main.0861887f.iframe.bundle.js +0 -1
  55. package/lib/js/components/RichList/RichListGroupItem/RichListGroupItem.consts.ts +0 -7
  56. package/lib/js/components/RichList/RichListGroupItem/RichListGroupItem.stories.ts +0 -327
  57. package/lib/js/components/RichList/RichListGroupItem/index.ts +0 -4
  58. package/lib/js/components/RichList/RichListItemBasic/index.ts +0 -3
package/lib/js/components/RichList/RichListGroupItem/RichListGroupItem.consts.ts DELETED
@@ -1,7 +0,0 @@
1
- import { RICH_LIST_ITEM_BORDER_COLOR, RichListItemBorderColor } from '../RichListItem';
2
-
3
- export const RICH_LIST_GROUP_ITEM_BORDER_COLOR = {
4
- ...RICH_LIST_ITEM_BORDER_COLOR,
5
- } as const;
6
-
7
- export type RichListGroupItemBorderColor = RichListItemBorderColor;
package/lib/js/components/RichList/RichListGroupItem/RichListGroupItem.stories.ts DELETED
@@ -1,327 +0,0 @@
1
- import RichListGroupItem from './RichListGroupItem.vue';
2
- import RichListItem, { RICH_LIST_ITEM_STATE, RICH_LIST_ITEM_TYPE } from '../RichListItem';
3
- import Divider from '../../Divider';
4
-
5
- import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
6
- import { RICH_LIST_GROUP_ITEM_BORDER_COLOR } from './RichListGroupItem.consts';
7
- import { ICONS } from '../../Icons/Icon';
8
-
9
- export default {
10
- title: 'Components/RichList/RichListGroupItem',
11
- component: RichListGroupItem,
12
- decorators: [
13
- (story) => ({
14
- template: `<div style="display: flex;padding: 16px;"><story/></div>`,
15
- }),
16
- ],
17
- } as Meta<typeof RichListGroupItem>;
18
-
19
- const args = {
20
- isExpanded: false,
21
- borderColor: null,
22
- borderColorHex: '',
23
- } as Args;
24
-
25
- const argTypes = {
26
- borderColor: {
27
- options: [null, ...Object.values(RICH_LIST_GROUP_ITEM_BORDER_COLOR)],
28
- control: { type: 'select' },
29
- },
30
- borderColorHex: {
31
- control: { type: 'text' },
32
- },
33
- } as ArgTypes;
34
-
35
- const build = (parent, childrens) => {
36
- const StoryTemplate: StoryFn<typeof RichListGroupItem> = (args, { updateArgs }) => {
37
- return {
38
- components: { RichListGroupItem, RichListItem, Divider },
39
- setup() {
40
- return { ...args };
41
- },
42
- data() {
43
- return {
44
- RICH_LIST_ITEM_TYPE: Object.freeze(RICH_LIST_ITEM_TYPE),
45
- RICH_LIST_ITEM_STATE: Object.freeze(RICH_LIST_ITEM_STATE),
46
- ICONS: Object.freeze(ICONS),
47
- };
48
- },
49
- methods: {
50
- onClick() {
51
- updateArgs({
52
- isExpanded: !this.isExpanded,
53
- });
54
- },
55
- },
56
- template: `
57
- <rich-list-group-item :is-expanded="isExpanded" :is-dimmed="isDimmed" :border-color="borderColor"
58
- :border-color-hex="borderColorHex">
59
- <template #parent>
60
- ${parent}
61
- </template>
62
- <template #children>
63
- ${childrens}
64
- </template>
65
- </rich-list-group-item>
66
- `,
67
- };
68
- };
69
- const instance = StoryTemplate.bind({});
70
- instance.argTypes = argTypes;
71
- instance.args = args;
72
- instance.parameters = {
73
- layout: 'fullscreen',
74
- design: {
75
- type: 'figma',
76
- url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=8505-126430&mode=design&t=7Ay1DzrwONAPwSGv-4',
77
- },
78
- };
79
- return instance;
80
- };
81
-
82
- const slots = `<template #content>Content slot</template><template #meta>Meta slot</template><template #trailing>Trailing slot</template>`;
83
- const parent = `<rich-list-item :is-interactive="true" :is-draggable="true" :is-dimmed="false" :icon="ICONS.FA_CALENDAR" :type="RICH_LIST_ITEM_TYPE.FLAT" @click="onClick">${slots}</rich-list-item>`;
84
- export const OneChild = build(
85
- parent,
86
- `<rich-list-item
87
- :is-interactive="true"
88
- :is-draggable="true"
89
- :icon="ICONS.FA_CALENDAR"
90
- :is-dimmed="false"
91
- :type="RICH_LIST_ITEM_TYPE.FLAT"
92
- >
93
- ${slots}
94
- </rich-list-item>`,
95
- );
96
- export const MultipleChild = build(
97
- parent,
98
- `<rich-list-item
99
- :is-interactive="true"
100
- :is-draggable="true"
101
- :icon="ICONS.FA_CALENDAR"
102
- :is-dimmed="false"
103
- :type="RICH_LIST_ITEM_TYPE.FLAT"
104
- >
105
- ${slots}
106
- </rich-list-item>
107
- <divider />
108
- <rich-list-item
109
- :is-interactive="true"
110
- :is-draggable="true"
111
- :icon="ICONS.FA_CALENDAR"
112
- :is-dimmed="false"
113
- :type="RICH_LIST_ITEM_TYPE.FLAT"
114
- >
115
- ${slots}
116
- </rich-list-item>
117
- <divider />
118
- <rich-list-item
119
- :is-interactive="true"
120
- :is-draggable="true"
121
- :icon="ICONS.FA_CALENDAR"
122
- :is-dimmed="false"
123
- :type="RICH_LIST_ITEM_TYPE.FLAT"
124
- >
125
- ${slots}
126
- </rich-list-item>`,
127
- );
128
- export const DimmedOneChild = build(
129
- parent,
130
- `<rich-list-item
131
- :is-interactive="true"
132
- :is-draggable="true"
133
- :icon="ICONS.FA_CALENDAR"
134
- :is-dimmed="false"
135
- :type="RICH_LIST_ITEM_TYPE.FLAT"
136
- >
137
- ${slots}
138
- </rich-list-item>
139
- <divider />
140
- <rich-list-item
141
- :is-interactive="true"
142
- :is-draggable="true"
143
- :icon="ICONS.FA_CALENDAR"
144
- :is-dimmed="true"
145
- :type="RICH_LIST_ITEM_TYPE.FLAT"
146
- >
147
- ${slots}
148
- </rich-list-item>
149
- <divider />
150
- <rich-list-item
151
- :is-interactive="true"
152
- :is-draggable="true"
153
- :icon="ICONS.FA_CALENDAR"
154
- :is-dimmed="false"
155
- :type="RICH_LIST_ITEM_TYPE.FLAT"
156
- >
157
- ${slots}
158
- </rich-list-item>`,
159
- );
160
- export const DimmedAllChild = build(
161
- parent,
162
- `<rich-list-item
163
- :is-interactive="true"
164
- :is-draggable="true"
165
- :icon="ICONS.FA_CALENDAR"
166
- :is-dimmed="true"
167
- :type="RICH_LIST_ITEM_TYPE.FLAT"
168
- >
169
- ${slots}
170
- </rich-list-item>
171
- <divider />
172
- <rich-list-item
173
- :is-interactive="true"
174
- :is-draggable="true"
175
- :icon="ICONS.FA_CALENDAR"
176
- :is-dimmed="true"
177
- :type="RICH_LIST_ITEM_TYPE.FLAT"
178
- >
179
- ${slots}
180
- </rich-list-item>
181
- <divider />
182
- <rich-list-item
183
- :is-interactive="true"
184
- :is-draggable="true"
185
- :icon="ICONS.FA_CALENDAR"
186
- :is-dimmed="true"
187
- :type="RICH_LIST_ITEM_TYPE.FLAT"
188
- >
189
- ${slots}
190
- </rich-list-item>`,
191
- );
192
- export const LoadingOneChild = build(
193
- parent,
194
- `<rich-list-item
195
- :is-interactive="true"
196
- :is-draggable="true"
197
- :icon="ICONS.FA_CALENDAR"
198
- :is-dimmed="false"
199
- :type="RICH_LIST_ITEM_TYPE.FLAT"
200
- >
201
- ${slots}
202
- </rich-list-item>
203
- <divider />
204
- <rich-list-item
205
- :is-interactive="true"
206
- :is-draggable="true"
207
- :icon="ICONS.FA_CALENDAR"
208
- :is-dimmed="false"
209
- :type="RICH_LIST_ITEM_TYPE.FLAT"
210
- :state="RICH_LIST_ITEM_STATE.LOADING"
211
- >
212
- ${slots}
213
- </rich-list-item>
214
- <divider />
215
- <rich-list-item
216
- :is-interactive="true"
217
- :is-draggable="true"
218
- :icon="ICONS.FA_CALENDAR"
219
- :is-dimmed="false"
220
- :type="RICH_LIST_ITEM_TYPE.FLAT"
221
- >
222
- ${slots}
223
- </rich-list-item>`,
224
- );
225
- export const LoadingAllChild = build(
226
- parent,
227
- `<rich-list-item
228
- :is-interactive="true"
229
- :is-draggable="true"
230
- :icon="ICONS.FA_CALENDAR"
231
- :is-dimmed="false"
232
- :type="RICH_LIST_ITEM_TYPE.FLAT"
233
- :state="RICH_LIST_ITEM_STATE.LOADING"
234
- >
235
- ${slots}
236
- </rich-list-item>
237
- <divider />
238
- <rich-list-item
239
- :is-interactive="true"
240
- :is-draggable="true"
241
- :icon="ICONS.FA_CALENDAR"
242
- :is-dimmed="false"
243
- :type="RICH_LIST_ITEM_TYPE.FLAT"
244
- :state="RICH_LIST_ITEM_STATE.LOADING"
245
- >
246
- ${slots}
247
- </rich-list-item>
248
- <divider />
249
- <rich-list-item
250
- :is-interactive="true"
251
- :is-draggable="true"
252
- :icon="ICONS.FA_CALENDAR"
253
- :is-dimmed="false"
254
- :type="RICH_LIST_ITEM_TYPE.FLAT"
255
- :state="RICH_LIST_ITEM_STATE.LOADING"
256
- >
257
- ${slots}
258
- </rich-list-item>`,
259
- );
260
-
261
- export const AllDimmed = build(
262
- `<rich-list-item :is-interactive="true" :is-draggable="true" :is-dimmed="true" :icon="ICONS.FA_CALENDAR" :type="RICH_LIST_ITEM_TYPE.FLAT" @click="onClick">${slots}</rich-list-item>`,
263
- `<rich-list-item
264
- :is-interactive="true"
265
- :is-draggable="true"
266
- :icon="ICONS.FA_CALENDAR"
267
- :is-dimmed="true"
268
- :type="RICH_LIST_ITEM_TYPE.FLAT"
269
- >
270
- ${slots}
271
- </rich-list-item>
272
- <divider />
273
- <rich-list-item
274
- :is-interactive="true"
275
- :is-draggable="true"
276
- :icon="ICONS.FA_CALENDAR"
277
- :is-dimmed="true"
278
- :type="RICH_LIST_ITEM_TYPE.FLAT"
279
- >
280
- ${slots}
281
- </rich-list-item>
282
- <divider />
283
- <rich-list-item
284
- :is-interactive="true"
285
- :is-draggable="true"
286
- :icon="ICONS.FA_CALENDAR"
287
- :is-dimmed="true"
288
- :type="RICH_LIST_ITEM_TYPE.FLAT"
289
- >
290
- ${slots}
291
- </rich-list-item>`,
292
- );
293
- export const AllLoading = build(
294
- `<rich-list-item :is-interactive="true" :is-draggable="true" :is-dimmed="false" :icon="ICONS.FA_CALENDAR" :type="RICH_LIST_ITEM_TYPE.FLAT" :state="RICH_LIST_ITEM_STATE.LOADING" @click="onClick">${slots}</rich-list-item>`,
295
- `<rich-list-item
296
- :is-interactive="true"
297
- :is-draggable="true"
298
- :icon="ICONS.FA_CALENDAR"
299
- :is-dimmed="false"
300
- :type="RICH_LIST_ITEM_TYPE.FLAT"
301
- :state="RICH_LIST_ITEM_STATE.LOADING"
302
- >
303
- ${slots}
304
- </rich-list-item>
305
- <divider />
306
- <rich-list-item
307
- :is-interactive="true"
308
- :is-draggable="true"
309
- :icon="ICONS.FA_CALENDAR"
310
- :is-dimmed="false"
311
- :type="RICH_LIST_ITEM_TYPE.FLAT"
312
- :state="RICH_LIST_ITEM_STATE.LOADING"
313
- >
314
- ${slots}
315
- </rich-list-item>
316
- <divider />
317
- <rich-list-item
318
- :is-interactive="true"
319
- :is-draggable="true"
320
- :icon="ICONS.FA_CALENDAR"
321
- :is-dimmed="false"
322
- :type="RICH_LIST_ITEM_TYPE.FLAT"
323
- :state="RICH_LIST_ITEM_STATE.LOADING"
324
- >
325
- ${slots}
326
- </rich-list-item>`,
327
- );
package/lib/js/components/RichList/RichListGroupItem/index.ts DELETED
@@ -1,4 +0,0 @@
1
- import RichListGroupItem from './RichListGroupItem.vue';
2
-
3
- export default RichListGroupItem;
4
- export * from './RichListGroupItem.consts';
package/lib/js/components/RichList/RichListItemBasic/index.ts DELETED
@@ -1,3 +0,0 @@
1
- import RichListItemBasic from './RichListItemBasic.vue';
2
-
3
- export default RichListItemBasic;