@bethinkpl/design-system 20.0.1 → 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 (20) hide show
  1. package/.github/workflows/build-to-review-on-trigger.yml +68 -0
  2. package/.yarnrc.yml +1 -0
  3. package/docs/project.json +1 -1
  4. package/lib/js/components/RichList/{RichListItemBasic/RichListItemBasic.stories.ts → BasicRichListItem/BasicRichListItem.stories.ts} +51 -17
  5. package/lib/js/components/RichList/{RichListItemBasic/RichListItemBasic.vue → BasicRichListItem/BasicRichListItem.vue} +90 -16
  6. package/lib/js/components/RichList/BasicRichListItem/index.ts +3 -0
  7. package/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.consts.ts +18 -0
  8. package/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.stories.ts +337 -0
  9. package/lib/js/components/RichList/{RichListGroupItem/RichListGroupItem.vue → GroupRichListItem/GroupRichListItem.vue} +63 -16
  10. package/lib/js/components/RichList/GroupRichListItem/index.ts +4 -0
  11. package/lib/js/components/RichList/RichListItem/RichListItem.consts.ts +15 -18
  12. package/lib/js/components/RichList/RichListItem/RichListItem.stories.ts +42 -12
  13. package/lib/js/components/RichList/RichListItem/RichListItem.vue +242 -84
  14. package/lib/js/index.ts +2 -2
  15. package/lib/styles/mixins/_scrollbars.scss +9 -0
  16. package/package.json +1 -1
  17. package/lib/js/components/RichList/RichListGroupItem/RichListGroupItem.consts.ts +0 -7
  18. package/lib/js/components/RichList/RichListGroupItem/RichListGroupItem.stories.ts +0 -327
  19. package/lib/js/components/RichList/RichListGroupItem/index.ts +0 -4
  20. package/lib/js/components/RichList/RichListItemBasic/index.ts +0 -3
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;