@bethinkpl/design-system 41.0.1 → 41.0.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 (28) hide show
  1. package/dist/design-system.css +1 -1
  2. package/dist/design-system.js +154 -149
  3. package/dist/design-system.js.map +1 -1
  4. package/dist/lib/js/components/Buttons/IconButton/IconButton.consts.d.ts +1 -0
  5. package/dist/lib/js/components/Buttons/IconButton/IconButton.vue.d.ts +1 -0
  6. package/dist/lib/js/components/Cards/Card/Card.consts.d.ts +1 -0
  7. package/dist/lib/js/components/Chip/Chip.consts.d.ts +1 -0
  8. package/dist/lib/js/components/ContainerRibbon/ContainerRibbon.consts.d.ts +1 -0
  9. package/dist/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue.d.ts +1 -0
  10. package/dist/lib/js/components/Drawer/DrawerSection/DrawerSection.vue.d.ts +3 -0
  11. package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts +2 -0
  12. package/dist/lib/js/components/Headers/SectionHeader/SectionHeader.vue.d.ts +2 -0
  13. package/dist/lib/js/components/Modals/Modal/Modal.vue.d.ts +2 -0
  14. package/dist/lib/js/components/Modals/ModalDialog/ModalDialog.vue.d.ts +2 -0
  15. package/dist/lib/js/components/Pagination/Pagination.vue.d.ts +2 -0
  16. package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts +2 -0
  17. package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts +2 -0
  18. package/dist/lib/js/components/Well/Well.consts.d.ts +1 -0
  19. package/lib/js/components/Buttons/IconButton/IconButton.consts.ts +1 -0
  20. package/lib/js/components/Buttons/IconButton/IconButton.spec.ts +1 -0
  21. package/lib/js/components/Chip/Chip.consts.ts +1 -0
  22. package/lib/js/components/Chip/Chip.spec.ts +2 -0
  23. package/lib/js/components/Chip/Chip.vue +12 -0
  24. package/lib/js/components/ContainerRibbon/ContainerRibbon.consts.ts +1 -0
  25. package/lib/js/components/ContainerRibbon/ContainerRibbon.spec.ts +9 -6
  26. package/lib/js/components/ContainerRibbon/ContainerRibbon.vue +5 -0
  27. package/lib/styles/settings/_buttons.scss +42 -0
  28. package/package.json +1 -1
package/dist/lib/js/components/Buttons/IconButton/IconButton.consts.d.ts CHANGED
@@ -30,6 +30,7 @@ export declare const ICON_BUTTON_COLORS: {
30
30
  readonly WARNING: "warning";
31
31
  readonly INFO: "info";
32
32
  readonly MAGIC: "magic";
33
+ readonly ACCENT: "accent";
33
34
  };
34
35
  export type IconButtonColor = Value<typeof ICON_BUTTON_COLORS>;
35
36
  export declare const ICON_BUTTON_STATES: {
package/dist/lib/js/components/Buttons/IconButton/IconButton.vue.d.ts CHANGED
@@ -379,6 +379,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
379
379
  readonly WARNING: "warning";
380
380
  readonly INFO: "info";
381
381
  readonly MAGIC: "magic";
382
+ readonly ACCENT: "accent";
382
383
  }>;
383
384
  BUTTON_COLORS: Readonly<{
384
385
  readonly PRIMARY: "primary";
package/dist/lib/js/components/Cards/Card/Card.consts.d.ts CHANGED
@@ -20,6 +20,7 @@ export declare const CARD_RIBBON_COLORS: {
20
20
  readonly DANGER: "danger";
21
21
  readonly FAIL: "fail";
22
22
  readonly INFO: "info";
23
+ readonly ACCENT: "accent";
23
24
  readonly TRANSPARENT: "transparent";
24
25
  };
25
26
  export type CardRibbonColors = Value<typeof CARD_RIBBON_COLORS>;
package/dist/lib/js/components/Chip/Chip.consts.d.ts CHANGED
@@ -16,6 +16,7 @@ export declare const CHIP_COLORS: {
16
16
  readonly INVERTED: "inverted";
17
17
  readonly WARNING: "warning";
18
18
  readonly INFO: "info";
19
+ readonly ACCENT: "accent";
19
20
  };
20
21
  export declare const CHIP_DEFAULT_COLOR: "neutral";
21
22
  export type ChipColor = Value<typeof CHIP_COLORS>;
package/dist/lib/js/components/ContainerRibbon/ContainerRibbon.consts.d.ts CHANGED
@@ -17,6 +17,7 @@ export declare const CONTAINER_RIBBON_COLORS: {
17
17
  readonly DANGER: "danger";
18
18
  readonly FAIL: "fail";
19
19
  readonly INFO: "info";
20
+ readonly ACCENT: "accent";
20
21
  readonly TRANSPARENT: "transparent";
21
22
  };
22
23
  export type ContainerRibbonColor = Value<typeof CONTAINER_RIBBON_COLORS>;
package/dist/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue.d.ts CHANGED
@@ -1030,6 +1030,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1030
1030
  readonly WARNING: "warning";
1031
1031
  readonly INFO: "info";
1032
1032
  readonly MAGIC: "magic";
1033
+ readonly ACCENT: "accent";
1033
1034
  }>;
1034
1035
  BUTTON_COLORS: Readonly<{
1035
1036
  readonly PRIMARY: "primary";
package/dist/lib/js/components/Drawer/DrawerSection/DrawerSection.vue.d.ts CHANGED
@@ -71,6 +71,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
71
71
  readonly WARNING: "warning";
72
72
  readonly INFO: "info";
73
73
  readonly MAGIC: "magic";
74
+ readonly ACCENT: "accent";
74
75
  };
75
76
  ICON_BUTTON_SIZES: {
76
77
  readonly XX_SMALL: "xx-small";
@@ -820,6 +821,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
820
821
  readonly WARNING: "warning";
821
822
  readonly INFO: "info";
822
823
  readonly MAGIC: "magic";
824
+ readonly ACCENT: "accent";
823
825
  }>;
824
826
  SECTION_HEADER_MOBILE_LAYOUTS: Readonly<{
825
827
  readonly VERTICAL: "vertical";
@@ -1372,6 +1374,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1372
1374
  readonly WARNING: "warning";
1373
1375
  readonly INFO: "info";
1374
1376
  readonly MAGIC: "magic";
1377
+ readonly ACCENT: "accent";
1375
1378
  }>;
1376
1379
  BUTTON_COLORS: Readonly<{
1377
1380
  readonly PRIMARY: "primary";
package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts CHANGED
@@ -59,6 +59,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
59
59
  readonly WARNING: "warning";
60
60
  readonly INFO: "info";
61
61
  readonly MAGIC: "magic";
62
+ readonly ACCENT: "accent";
62
63
  }>;
63
64
  ICON_BUTTON_STATES: Readonly<{
64
65
  readonly DEFAULT: "default";
@@ -807,6 +808,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
807
808
  readonly WARNING: "warning";
808
809
  readonly INFO: "info";
809
810
  readonly MAGIC: "magic";
811
+ readonly ACCENT: "accent";
810
812
  }>;
811
813
  BUTTON_COLORS: Readonly<{
812
814
  readonly PRIMARY: "primary";
package/dist/lib/js/components/Headers/SectionHeader/SectionHeader.vue.d.ts CHANGED
@@ -377,6 +377,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
377
377
  readonly WARNING: "warning";
378
378
  readonly INFO: "info";
379
379
  readonly MAGIC: "magic";
380
+ readonly ACCENT: "accent";
380
381
  }>;
381
382
  SECTION_HEADER_MOBILE_LAYOUTS: Readonly<{
382
383
  readonly VERTICAL: "vertical";
@@ -929,6 +930,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
929
930
  readonly WARNING: "warning";
930
931
  readonly INFO: "info";
931
932
  readonly MAGIC: "magic";
933
+ readonly ACCENT: "accent";
932
934
  }>;
933
935
  BUTTON_COLORS: Readonly<{
934
936
  readonly PRIMARY: "primary";
package/dist/lib/js/components/Modals/Modal/Modal.vue.d.ts CHANGED
@@ -407,6 +407,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
407
407
  readonly WARNING: "warning";
408
408
  readonly INFO: "info";
409
409
  readonly MAGIC: "magic";
410
+ readonly ACCENT: "accent";
410
411
  };
411
412
  ICON_SIZES: {
412
413
  XXX_SMALL: string;
@@ -1060,6 +1061,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1060
1061
  readonly WARNING: "warning";
1061
1062
  readonly INFO: "info";
1062
1063
  readonly MAGIC: "magic";
1064
+ readonly ACCENT: "accent";
1063
1065
  }>;
1064
1066
  BUTTON_COLORS: Readonly<{
1065
1067
  readonly PRIMARY: "primary";
package/dist/lib/js/components/Modals/ModalDialog/ModalDialog.vue.d.ts CHANGED
@@ -542,6 +542,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
542
542
  readonly WARNING: "warning";
543
543
  readonly INFO: "info";
544
544
  readonly MAGIC: "magic";
545
+ readonly ACCENT: "accent";
545
546
  };
546
547
  ICON_SIZES: {
547
548
  XXX_SMALL: string;
@@ -1195,6 +1196,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1195
1196
  readonly WARNING: "warning";
1196
1197
  readonly INFO: "info";
1197
1198
  readonly MAGIC: "magic";
1199
+ readonly ACCENT: "accent";
1198
1200
  }>;
1199
1201
  BUTTON_COLORS: Readonly<{
1200
1202
  readonly PRIMARY: "primary";
package/dist/lib/js/components/Pagination/Pagination.vue.d.ts CHANGED
@@ -53,6 +53,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
53
53
  readonly WARNING: "warning";
54
54
  readonly INFO: "info";
55
55
  readonly MAGIC: "magic";
56
+ readonly ACCENT: "accent";
56
57
  }>;
57
58
  ICON_BUTTON_STATES: Readonly<{
58
59
  readonly DEFAULT: "default";
@@ -761,6 +762,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
761
762
  readonly WARNING: "warning";
762
763
  readonly INFO: "info";
763
764
  readonly MAGIC: "magic";
765
+ readonly ACCENT: "accent";
764
766
  }>;
765
767
  BUTTON_COLORS: Readonly<{
766
768
  readonly PRIMARY: "primary";
package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts CHANGED
@@ -314,6 +314,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
314
314
  readonly WARNING: "warning";
315
315
  readonly INFO: "info";
316
316
  readonly MAGIC: "magic";
317
+ readonly ACCENT: "accent";
317
318
  }>;
318
319
  ICON_SIZES: Readonly<{
319
320
  XXX_SMALL: string;
@@ -1045,6 +1046,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1045
1046
  readonly WARNING: "warning";
1046
1047
  readonly INFO: "info";
1047
1048
  readonly MAGIC: "magic";
1049
+ readonly ACCENT: "accent";
1048
1050
  }>;
1049
1051
  BUTTON_COLORS: Readonly<{
1050
1052
  readonly PRIMARY: "primary";
package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts CHANGED
@@ -343,6 +343,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
343
343
  readonly WARNING: "warning";
344
344
  readonly INFO: "info";
345
345
  readonly MAGIC: "magic";
346
+ readonly ACCENT: "accent";
346
347
  }>;
347
348
  BUTTON_TYPES: Readonly<{
348
349
  readonly FILLED: "filled";
@@ -1017,6 +1018,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1017
1018
  readonly WARNING: "warning";
1018
1019
  readonly INFO: "info";
1019
1020
  readonly MAGIC: "magic";
1021
+ readonly ACCENT: "accent";
1020
1022
  }>;
1021
1023
  BUTTON_COLORS: Readonly<{
1022
1024
  readonly PRIMARY: "primary";
package/dist/lib/js/components/Well/Well.consts.d.ts CHANGED
@@ -27,6 +27,7 @@ export declare const WELL_RIBBON_COLORS: {
27
27
  readonly DANGER: "danger";
28
28
  readonly FAIL: "fail";
29
29
  readonly INFO: "info";
30
+ readonly ACCENT: "accent";
30
31
  readonly TRANSPARENT: "transparent";
31
32
  };
32
33
  export type WellRibbonColor = Value<typeof WELL_RIBBON_COLORS>;
package/lib/js/components/Buttons/IconButton/IconButton.consts.ts CHANGED
@@ -37,6 +37,7 @@ export const ICON_BUTTON_COLORS = {
37
37
  WARNING: 'warning',
38
38
  INFO: 'info',
39
39
  MAGIC: 'magic',
40
+ ACCENT: 'accent',
40
41
  } as const;
41
42
 
42
43
  export type IconButtonColor = Value<typeof ICON_BUTTON_COLORS>;
package/lib/js/components/Buttons/IconButton/IconButton.spec.ts CHANGED
@@ -38,6 +38,7 @@ describe('IconButton', () => {
38
38
  [{ props: { state: ICON_BUTTON_STATES.LOADING }, expectedClass: '-ds-loading' }],
39
39
  [{ props: { color: ICON_BUTTON_COLORS.PRIMARY }, expectedClass: '-ds-color-primary' }],
40
40
  [{ props: { color: ICON_BUTTON_COLORS.MAGIC }, expectedClass: '-ds-color-magic' }],
41
+ [{ props: { color: ICON_BUTTON_COLORS.ACCENT }, expectedClass: '-ds-color-accent' }],
41
42
  ])('correct class for props', ({ props, expectedClass }) => {
42
43
  const component = createComponent(props);
43
44
  expect(component.classes()).toContain(expectedClass);
package/lib/js/components/Chip/Chip.consts.ts CHANGED
@@ -18,6 +18,7 @@ export const CHIP_COLORS = {
18
18
  INVERTED: 'inverted',
19
19
  WARNING: 'warning',
20
20
  INFO: 'info',
21
+ ACCENT: 'accent',
21
22
  } as const;
22
23
 
23
24
  export const CHIP_DEFAULT_COLOR = CHIP_COLORS.NEUTRAL;
package/lib/js/components/Chip/Chip.spec.ts CHANGED
@@ -133,6 +133,7 @@ describe('Chip', () => {
133
133
  [CHIP_COLORS.INFO, '-ds-color-info'],
134
134
  [CHIP_COLORS.WARNING, '-ds-color-warning'],
135
135
  [CHIP_COLORS.INVERTED, '-ds-color-inverted'],
136
+ [CHIP_COLORS.ACCENT, '-ds-color-accent'],
136
137
  ])(
137
138
  'correct class for color: %s prop, expectedClass: %s',
138
139
  (color: string, expectedClass: string) => {
@@ -147,6 +148,7 @@ describe('Chip', () => {
147
148
  '-ds-color-info',
148
149
  '-ds-color-warning',
149
150
  '-ds-color-inverted',
151
+ '-ds-color-accent',
150
152
  ];
151
153
  const component = createComponent({ color });
152
154
  const componentClasses = component.classes();
package/lib/js/components/Chip/Chip.vue CHANGED
@@ -156,6 +156,17 @@ $chip-colors: (
156
156
  'background': $color-info-background,
157
157
  ),
158
158
  ),
159
+ 'accent': (
160
+ 'label': $color-accent-text,
161
+ 'icon': $color-accent-icon,
162
+ 'background': $color-accent-background,
163
+ 'background-hover': $color-accent-background-hovered,
164
+ 'disabled': (
165
+ 'label': $color-accent-text-disabled,
166
+ 'icon': $color-accent-icon-disabled,
167
+ 'background': $color-accent-background,
168
+ ),
169
+ ),
159
170
  'inverted': (
160
171
  'label': $color-neutral-text,
161
172
  'icon': $color-neutral-icon,
@@ -318,6 +329,7 @@ const CHIP_ICON_BUTTONS_COLOR_MAP: Record<ChipColor, IconButtonColor> = {
318
329
  [CHIP_COLORS.WARNING]: ICON_BUTTON_COLORS.WARNING,
319
330
  [CHIP_COLORS.SUCCESS]: ICON_BUTTON_COLORS.SUCCESS,
320
331
  [CHIP_COLORS.INFO]: ICON_BUTTON_COLORS.INFO,
332
+ [CHIP_COLORS.ACCENT]: ICON_BUTTON_COLORS.ACCENT,
321
333
  };
322
334
 
323
335
  const {
package/lib/js/components/ContainerRibbon/ContainerRibbon.consts.ts CHANGED
@@ -19,6 +19,7 @@ export const CONTAINER_RIBBON_COLORS = {
19
19
  DANGER: 'danger',
20
20
  FAIL: 'fail',
21
21
  INFO: 'info',
22
+ ACCENT: 'accent',
22
23
  TRANSPARENT: 'transparent',
23
24
  } as const;
24
25
 
package/lib/js/components/ContainerRibbon/ContainerRibbon.spec.ts CHANGED
@@ -33,12 +33,15 @@ describe('ContainerRibbon', () => {
33
33
  },
34
34
  );
35
35
 
36
- it('applies color classes correctly', () => {
37
- const wrapper = mount(ContainerRibbon, {
38
- props: { color: CONTAINER_RIBBON_COLORS.PRIMARY },
39
- });
40
- expect(wrapper.find('.ds-container-ribbon').classes()).toContain('-ds-color-primary');
41
- });
36
+ it.each(Object.values(CONTAINER_RIBBON_COLORS))(
37
+ 'applies color class correctly for color "%s"',
38
+ (color) => {
39
+ const wrapper = mount(ContainerRibbon, {
40
+ props: { color },
41
+ });
42
+ expect(wrapper.find('.ds-container-ribbon').classes()).toContain(`-ds-color-${color}`);
43
+ },
44
+ );
42
45
 
43
46
  it('applies layout classes correctly', () => {
44
47
  const wrapper = mount(ContainerRibbon, {
package/lib/js/components/ContainerRibbon/ContainerRibbon.vue CHANGED
@@ -15,6 +15,7 @@
15
15
  '-ds-color-danger': color === CONTAINER_RIBBON_COLORS.DANGER,
16
16
  '-ds-color-fail': color === CONTAINER_RIBBON_COLORS.FAIL,
17
17
  '-ds-color-info': color === CONTAINER_RIBBON_COLORS.INFO,
18
+ '-ds-color-accent': color === CONTAINER_RIBBON_COLORS.ACCENT,
18
19
  '-ds-color-transparent': color === CONTAINER_RIBBON_COLORS.TRANSPARENT,
19
20
  '-ds-layout-vertical': layout === CONTAINER_RIBBON_LAYOUTS.VERTICAL,
20
21
  '-ds-layout-horizontal': layout === CONTAINER_RIBBON_LAYOUTS.HORIZONTAL,
@@ -116,6 +117,10 @@
116
117
  background-color: $color-info-border;
117
118
  }
118
119
 
120
+ &.-ds-color-accent {
121
+ background-color: $color-accent-border;
122
+ }
123
+
119
124
  &.-ds-color-transparent {
120
125
  background-color: transparent;
121
126
  }
package/lib/styles/settings/_buttons.scss CHANGED
@@ -185,6 +185,48 @@ $only-icon-button-colors: (
185
185
  ),
186
186
  ),
187
187
  ),
188
+ 'accent': (
189
+ 'filled': (
190
+ 'color': $color-inverted-text,
191
+ 'icon': $color-inverted-icon,
192
+ 'background': $color-accent-background-strong,
193
+ 'background-hovered': $color-accent-background-strong-hovered,
194
+ 'background-focused': $color-accent-background-strong-focused,
195
+ 'background-disabled': $color-accent-background-strong-disabled,
196
+ 'disabled': (
197
+ 'color': $color-inverted-text,
198
+ 'icon': $color-inverted-icon,
199
+ 'background': $color-accent-background-strong-disabled,
200
+ ),
201
+ ),
202
+ 'outlined': (
203
+ 'color': $color-accent-text,
204
+ 'icon': $color-accent-icon,
205
+ 'border': $color-accent-border,
206
+ 'background': $color-accent-background-ghost,
207
+ 'background-hovered': $color-accent-background-ghost-hovered,
208
+ 'background-focused': $color-accent-background-ghost-focused,
209
+ 'background-disabled': $color-accent-background-ghost-disabled,
210
+ 'disabled': (
211
+ 'color': $color-accent-text,
212
+ 'border': $color-accent-border-disabled,
213
+ 'icon': $color-accent-icon-disabled,
214
+ 'background': $color-accent-background-ghost-disabled,
215
+ ),
216
+ ),
217
+ 'text': (
218
+ 'color': $color-accent-text,
219
+ 'icon': $color-accent-icon,
220
+ 'background': $color-accent-background-ghost,
221
+ 'background-hovered': $color-accent-background-ghost-hovered,
222
+ 'background-focused': $color-accent-background-ghost-focused,
223
+ 'background-disabled': $color-accent-background-ghost-disabled,
224
+ 'disabled': (
225
+ 'color': $color-accent-text,
226
+ 'icon': $color-accent-icon-disabled,
227
+ ),
228
+ ),
229
+ ),
188
230
  );
189
231
 
190
232
  $button-colors: (
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bethinkpl/design-system",
3
- "version": "41.0.1",
3
+ "version": "41.0.2",
4
4
  "description": "Bethink universe design-system",
5
5
  "repository": {
6
6
  "type": "git",