@bethinkpl/design-system 21.0.0 → 21.0.1

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 (19) hide show
  1. package/dist/design-system.umd.js +67 -26
  2. package/dist/design-system.umd.js.map +1 -1
  3. package/dist/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue.d.ts +282 -3
  4. package/dist/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue.d.ts +228 -3
  5. package/dist/lib/js/components/Modals/Modal/Modal.vue.d.ts +15 -0
  6. package/dist/lib/js/components/Modals/ModalDialog/ModalDialog.vue.d.ts +10 -0
  7. package/dist/lib/js/components/SelectList/SelectList.vue.d.ts +4 -3
  8. package/dist/lib/js/components/SelectList/SelectListItem/SelectListItem.vue.d.ts +258 -3
  9. package/dist/lib/js/components/SelectList/SelectListItemDivider/SelectListItemDivider.vue.d.ts +8 -3
  10. package/dist/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.vue.d.ts +58 -3
  11. package/docs/iframe.html +1 -1
  12. package/docs/main.e1d54860.iframe.bundle.js +1 -0
  13. package/docs/project.json +1 -1
  14. package/lib/js/components/Modals/Modal/Modal.stories.ts +29 -4
  15. package/lib/js/components/Modals/Modal/Modal.vue +30 -1
  16. package/lib/js/components/Modals/ModalDialog/ModalDialog.stories.ts +18 -2
  17. package/lib/js/components/Modals/ModalDialog/ModalDialog.vue +18 -1
  18. package/package.json +1 -1
  19. package/docs/main.baf88961.iframe.bundle.js +0 -1
package/docs/project.json CHANGED
@@ -1 +1 @@
1
- {"generatedAt":1712900883956,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}
1
+ {"generatedAt":1713181986832,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}
package/lib/js/components/Modals/Modal/Modal.stories.ts CHANGED
@@ -3,7 +3,8 @@ import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
3
3
  import Modal from './Modal.vue';
4
4
  import { ICONS } from '../../Icons/Icon';
5
5
  import { FEATURE_ICON_COLOR } from '../../Icons/FeatureIcon';
6
- import { MODAL_SIZES, MODAL_HEADER_TITLE_SIZES } from './Modal.consts';
6
+ import { MODAL_HEADER_TITLE_SIZES, MODAL_SIZES } from './Modal.consts';
7
+ import { BUTTON_STATES } from '../../Buttons/Button';
7
8
 
8
9
  export default {
9
10
  title: 'Components/Modals/Modal',
@@ -18,9 +19,9 @@ const StoryTemplate: StoryFn<typeof Modal> = (args) => ({
18
19
  template:
19
20
  '<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' +
20
21
  ':headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" ' +
21
- ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" ' +
22
- ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" ' +
23
- ':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" ' +
22
+ ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" ' +
23
+ ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" ' +
24
+ ':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' +
24
25
  ':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' +
25
26
  '<div v-html="defaultSlot" />' +
26
27
  '</modal>',
@@ -47,10 +48,13 @@ const args = {
47
48
  headerFeatureIconColor: FEATURE_ICON_COLOR.NEUTRAL,
48
49
  footerPrimaryButtonText: 'Primary M',
49
50
  footerPrimaryButtonIcon: null,
51
+ footerPrimaryButtonState: BUTTON_STATES.DEFAULT,
50
52
  footerSecondaryButtonText: 'Secondary M',
51
53
  footerSecondaryButtonIcon: null,
54
+ footerSecondaryButtonState: BUTTON_STATES.DEFAULT,
52
55
  footerTertiaryButtonText: 'Tertiary M',
53
56
  footerTertiaryButtonIcon: null,
57
+ footerTertiaryButtonState: BUTTON_STATES.DEFAULT,
54
58
  footerCheckboxText: '',
55
59
  } as Args;
56
60
 
@@ -81,16 +85,28 @@ const argTypes = {
81
85
  control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
82
86
  defaultValue: null,
83
87
  },
88
+ footerPrimaryButtonState: {
89
+ control: { type: 'select', options: Object.values(BUTTON_STATES) },
90
+ defaultValue: BUTTON_STATES.DEFAULT,
91
+ },
84
92
  footerSecondaryButtonText: { control: { type: 'text' } },
85
93
  footerSecondaryButtonIcon: {
86
94
  control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
87
95
  defaultValue: null,
88
96
  },
97
+ footerSecondaryButtonState: {
98
+ control: { type: 'select', options: Object.values(BUTTON_STATES) },
99
+ defaultValue: BUTTON_STATES.DEFAULT,
100
+ },
89
101
  footerTertiaryButtonText: { control: { type: 'text' } },
90
102
  footerTertiaryButtonIcon: {
91
103
  control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
92
104
  defaultValue: ICONS.FA_CHART_COLUMN,
93
105
  },
106
+ footerTertiaryButtonState: {
107
+ control: { type: 'select', options: Object.values(BUTTON_STATES) },
108
+ defaultValue: BUTTON_STATES.DEFAULT,
109
+ },
94
110
  footerCheckboxText: { control: { type: 'text' } },
95
111
  onCloseModal: { action: 'close-modal' },
96
112
  onCheckboxChange: { action: 'checkbox-change' },
@@ -123,10 +139,13 @@ const argsDanger = {
123
139
  headerFeatureIconColor: FEATURE_ICON_COLOR.NEUTRAL,
124
140
  footerPrimaryButtonText: 'Primary M',
125
141
  footerPrimaryButtonIcon: null,
142
+ footerPrimaryButtonState: BUTTON_STATES.DEFAULT,
126
143
  footerSecondaryButtonText: 'Secondary M',
127
144
  footerSecondaryButtonIcon: null,
145
+ footerSecondaryButtonState: BUTTON_STATES.DEFAULT,
128
146
  footerTertiaryButtonText: '',
129
147
  footerTertiaryButtonIcon: null,
148
+ footerTertiaryButtonState: BUTTON_STATES.DEFAULT,
130
149
  footerCheckboxText: '',
131
150
  } as Args;
132
151
 
@@ -149,10 +168,13 @@ const argsWithImage = {
149
168
  headerFeatureIconColor: null,
150
169
  footerPrimaryButtonText: 'Primary M',
151
170
  footerPrimaryButtonIcon: null,
171
+ footerPrimaryButtonState: BUTTON_STATES.DEFAULT,
152
172
  footerSecondaryButtonText: 'Secondary M',
153
173
  footerSecondaryButtonIcon: null,
174
+ footerSecondaryButtonState: BUTTON_STATES.DEFAULT,
154
175
  footerTertiaryButtonText: '',
155
176
  footerTertiaryButtonIcon: null,
177
+ footerTertiaryButtonState: BUTTON_STATES.DEFAULT,
156
178
  footerCheckboxText: '',
157
179
  } as Args;
158
180
 
@@ -174,10 +196,13 @@ const argsSmallHeaderAndCentered = {
174
196
  headerFeatureIconColor: FEATURE_ICON_COLOR.NEUTRAL,
175
197
  footerPrimaryButtonText: 'Primary M',
176
198
  footerPrimaryButtonIcon: null,
199
+ footerPrimaryButtonState: BUTTON_STATES.DEFAULT,
177
200
  footerSecondaryButtonText: 'Secondary M',
178
201
  footerSecondaryButtonIcon: null,
202
+ footerSecondaryButtonState: BUTTON_STATES.DEFAULT,
179
203
  footerTertiaryButtonText: '',
180
204
  footerTertiaryButtonIcon: null,
205
+ footerTertiaryButtonState: BUTTON_STATES.DEFAULT,
181
206
  footerCheckboxText: '',
182
207
  } as Args;
183
208
 
package/lib/js/components/Modals/Modal/Modal.vue CHANGED
@@ -64,6 +64,7 @@
64
64
  :type="BUTTON_TYPES.TEXT"
65
65
  :color="BUTTON_COLORS.NEUTRAL"
66
66
  :icon-left="footerTertiaryButtonIcon"
67
+ :state="footerTertiaryButtonState"
67
68
  class="ds-modal__tertiaryButton"
68
69
  @click="$emit('tertiary-button-click')"
69
70
  >
@@ -79,6 +80,7 @@
79
80
  :type="BUTTON_TYPES.OUTLINED"
80
81
  :color="calcFooterSecondaryButtonColor"
81
82
  :icon-right="footerSecondaryButtonIcon"
83
+ :state="footerSecondaryButtonState"
82
84
  @click="$emit('secondary-button-click')"
83
85
  >
84
86
  {{ footerSecondaryButtonText }}
@@ -87,6 +89,7 @@
87
89
  v-if="footerPrimaryButtonText"
88
90
  :color="calcFooterPrimaryButtonColor"
89
91
  :icon-right="footerPrimaryButtonIcon"
92
+ :state="footerPrimaryButtonState"
90
93
  @click="$emit('primary-button-click')"
91
94
  >
92
95
  {{ footerPrimaryButtonText }}
@@ -315,7 +318,12 @@ import FeatureIcon from '../../Icons/FeatureIcon/FeatureIcon.vue';
315
318
  import { MODAL_HEADER_TITLE_SIZES, MODAL_SIZES } from './Modal.consts';
316
319
  import { ICON_SIZES, ICONS } from '../../Icons/Icon';
317
320
  import { FEATURE_ICON_COLOR, FEATURE_ICON_SIZES } from '../../Icons/FeatureIcon';
318
- import WnlButton, { BUTTON_COLORS, BUTTON_ELEVATIONS, BUTTON_TYPES } from '../../Buttons/Button';
321
+ import WnlButton, {
322
+ BUTTON_COLORS,
323
+ BUTTON_ELEVATIONS,
324
+ BUTTON_STATES,
325
+ BUTTON_TYPES,
326
+ } from '../../Buttons/Button';
319
327
  import WnlIconButton, { ICON_BUTTON_COLORS } from '../../Buttons/IconButton';
320
328
  import { toRaw } from 'vue';
321
329
 
@@ -378,6 +386,13 @@ export default {
378
386
  return Object.values(ICONS).includes(toRaw(icon));
379
387
  },
380
388
  },
389
+ footerPrimaryButtonState: {
390
+ type: String,
391
+ default: BUTTON_STATES.DEFAULT,
392
+ validator(state) {
393
+ return Object.values(BUTTON_STATES).includes(state);
394
+ },
395
+ },
381
396
  footerSecondaryButtonText: {
382
397
  type: String,
383
398
  default: null,
@@ -389,6 +404,13 @@ export default {
389
404
  return Object.values(ICONS).includes(toRaw(icon));
390
405
  },
391
406
  },
407
+ footerSecondaryButtonState: {
408
+ type: String,
409
+ default: BUTTON_STATES.DEFAULT,
410
+ validator(state) {
411
+ return Object.values(BUTTON_STATES).includes(state);
412
+ },
413
+ },
392
414
  footerTertiaryButtonText: {
393
415
  type: String,
394
416
  default: null,
@@ -400,6 +422,13 @@ export default {
400
422
  return Object.values(ICONS).includes(toRaw(icon));
401
423
  },
402
424
  },
425
+ footerTertiaryButtonState: {
426
+ type: String,
427
+ default: BUTTON_STATES.DEFAULT,
428
+ validator(state) {
429
+ return Object.values(BUTTON_STATES).includes(state);
430
+ },
431
+ },
403
432
  footerCheckboxText: {
404
433
  type: String,
405
434
  default: null,
package/lib/js/components/Modals/ModalDialog/ModalDialog.stories.ts CHANGED
@@ -3,6 +3,7 @@ import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
3
3
  import ModalDialog from './ModalDialog.vue';
4
4
  import { ICONS } from '../../Icons/Icon';
5
5
  import { FEATURE_ICON_COLOR } from '../../Icons/FeatureIcon';
6
+ import { BUTTON_STATES } from '../../Buttons/Button';
6
7
 
7
8
  export default {
8
9
  title: 'Components/Modals/ModalDialog',
@@ -17,14 +18,15 @@ const StoryTemplate: StoryFn<typeof ModalDialog> = (args) => ({
17
18
  template:
18
19
  '<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" ' +
19
20
  ':headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :headerFeatureIconColor="headerFeatureIconColor" ' +
20
- ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" ' +
21
+ ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" :footerPrimaryButtonState="footerPrimaryButtonState" ' +
21
22
  ':headerImage="headerImage" ' +
22
- ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon">' +
23
+ ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon" :footerSecondaryButtonState="footerSecondaryButtonState">' +
23
24
  '<div v-html="defaultSlot" />' +
24
25
  '</modal-dialog>',
25
26
  data() {
26
27
  return {
27
28
  ICONS: Object.freeze(ICONS),
29
+ BUTTON_STATES: Object.freeze(BUTTON_STATES),
28
30
  };
29
31
  },
30
32
  });
@@ -42,8 +44,10 @@ const args = {
42
44
  headerFeatureIconColor: FEATURE_ICON_COLOR.NEUTRAL,
43
45
  footerPrimaryButtonText: 'Primary M',
44
46
  footerPrimaryButtonIcon: null,
47
+ footerPrimaryButtonState: BUTTON_STATES.DEFAULT,
45
48
  footerSecondaryButtonText: 'Secondary M',
46
49
  footerSecondaryButtonIcon: null,
50
+ footerSecondaryButtonState: BUTTON_STATES.DEFAULT,
47
51
  } as Args;
48
52
 
49
53
  const argTypes = {
@@ -70,11 +74,19 @@ const argTypes = {
70
74
  control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
71
75
  defaultValue: null,
72
76
  },
77
+ footerPrimaryButtonState: {
78
+ control: { type: 'select', options: Object.values(BUTTON_STATES) },
79
+ defaultValue: BUTTON_STATES.DEFAULT,
80
+ },
73
81
  footerSecondaryButtonText: { control: { type: 'text' } },
74
82
  footerSecondaryButtonIcon: {
75
83
  control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
76
84
  defaultValue: null,
77
85
  },
86
+ footerSecondaryButtonState: {
87
+ control: { type: 'select', options: Object.values(BUTTON_STATES) },
88
+ defaultValue: BUTTON_STATES.DEFAULT,
89
+ },
78
90
  } as ArgTypes;
79
91
 
80
92
  Interactive.argTypes = argTypes;
@@ -98,8 +110,10 @@ const argsDanger = {
98
110
  headerFeatureIconColor: FEATURE_ICON_COLOR.NEUTRAL,
99
111
  footerPrimaryButtonText: 'Primary M',
100
112
  footerPrimaryButtonIcon: null,
113
+ footerPrimaryButtonState: BUTTON_STATES.DEFAULT,
101
114
  footerSecondaryButtonText: 'Secondary M',
102
115
  footerSecondaryButtonIcon: null,
116
+ footerSecondaryButtonState: BUTTON_STATES.DEFAULT,
103
117
  } as Args;
104
118
 
105
119
  export const Danger = StoryTemplate.bind({});
@@ -118,8 +132,10 @@ const argsWithImage = {
118
132
  headerFeatureIconColor: FEATURE_ICON_COLOR.NEUTRAL,
119
133
  footerPrimaryButtonText: 'Primary M',
120
134
  footerPrimaryButtonIcon: null,
135
+ footerPrimaryButtonState: BUTTON_STATES.DEFAULT,
121
136
  footerSecondaryButtonText: 'Secondary M',
122
137
  footerSecondaryButtonIcon: null,
138
+ footerSecondaryButtonState: BUTTON_STATES.DEFAULT,
123
139
  } as Args;
124
140
 
125
141
  export const WithImage = StoryTemplate.bind({});
package/lib/js/components/Modals/ModalDialog/ModalDialog.vue CHANGED
@@ -12,8 +12,10 @@
12
12
  :header-subtitle="headerSubtitle"
13
13
  :footer-primary-button-text="footerPrimaryButtonText"
14
14
  :footer-primary-button-icon="footerPrimaryButtonIcon"
15
+ :footer-primary-button-state="footerPrimaryButtonState"
15
16
  :footer-secondary-button-text="footerSecondaryButtonText"
16
17
  :footer-secondary-button-icon="footerSecondaryButtonIcon"
18
+ :footer-secondary-button-state="footerSecondaryButtonState"
17
19
  @close-modal="$emit('close-modal')"
18
20
  @primary-button-click="$emit('primary-button-click')"
19
21
  @secondary-button-click="$emit('secondary-button-click')"
@@ -24,10 +26,11 @@
24
26
 
25
27
  <script lang="ts">
26
28
  import DsModal from '../Modal/Modal.vue';
27
- import { MODAL_SIZES, MODAL_HEADER_TITLE_SIZES } from '../Modal';
29
+ import { MODAL_HEADER_TITLE_SIZES, MODAL_SIZES } from '../Modal';
28
30
  import { ICONS } from '../../Icons/Icon';
29
31
  import { FEATURE_ICON_COLOR } from '../../Icons/FeatureIcon';
30
32
  import { toRaw } from 'vue';
33
+ import { BUTTON_STATES } from '../../Buttons/Button';
31
34
 
32
35
  export default {
33
36
  name: 'ModalDialog',
@@ -74,6 +77,13 @@ export default {
74
77
  return Object.values(ICONS).includes(toRaw(icon));
75
78
  },
76
79
  },
80
+ footerPrimaryButtonState: {
81
+ type: String,
82
+ default: BUTTON_STATES.DEFAULT,
83
+ validator(state) {
84
+ return Object.values(BUTTON_STATES).includes(state);
85
+ },
86
+ },
77
87
  footerSecondaryButtonText: {
78
88
  type: String,
79
89
  default: null,
@@ -85,6 +95,13 @@ export default {
85
95
  return Object.values(ICONS).includes(toRaw(icon));
86
96
  },
87
97
  },
98
+ footerSecondaryButtonState: {
99
+ type: String,
100
+ default: BUTTON_STATES.DEFAULT,
101
+ validator(state) {
102
+ return Object.values(BUTTON_STATES).includes(state);
103
+ },
104
+ },
88
105
  },
89
106
  // TODO fix me when touching this file
90
107
  // eslint-disable-next-line vue/require-emit-validator
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bethinkpl/design-system",
3
- "version": "21.0.0",
3
+ "version": "21.0.1",
4
4
  "description": "Bethink universe design-system",
5
5
  "repository": "git@github.com:bethinkpl/design-system.git",
6
6
  "author": "nerdy@bethink.pl",