@bethinkpl/design-system 40.0.1 → 40.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.
- package/dist/design-system.css +1 -1
- package/dist/design-system.js +156 -154
- package/dist/design-system.js.map +1 -1
- package/dist/lib/js/components/Cards/Card/Card.consts.d.ts +1 -0
- package/dist/lib/js/components/ContainerRibbon/ContainerRibbon.consts.d.ts +1 -0
- package/dist/lib/js/components/Well/Well.consts.d.ts +1 -0
- package/lib/js/components/ContainerRibbon/ContainerRibbon.consts.ts +1 -0
- package/lib/js/components/ContainerRibbon/ContainerRibbon.spec.ts +9 -6
- package/lib/js/components/ContainerRibbon/ContainerRibbon.vue +11 -0
- package/package.json +1 -1
|
@@ -24,6 +24,7 @@ export declare const CARD_RIBBON_COLORS: {
|
|
|
24
24
|
};
|
|
25
25
|
export type CardRibbonColors = Value<typeof CARD_RIBBON_COLORS>;
|
|
26
26
|
export declare const CARD_RIBBON_SIZES: {
|
|
27
|
+
readonly X_SMALL: "x-small";
|
|
27
28
|
readonly SMALL: "small";
|
|
28
29
|
readonly MEDIUM: "medium";
|
|
29
30
|
readonly LARGE: "large";
|
|
@@ -31,6 +31,7 @@ export declare const WELL_RIBBON_COLORS: {
|
|
|
31
31
|
};
|
|
32
32
|
export type WellRibbonColor = Value<typeof WELL_RIBBON_COLORS>;
|
|
33
33
|
export declare const WELL_RIBBON_SIZES: {
|
|
34
|
+
readonly X_SMALL: "x-small";
|
|
34
35
|
readonly SMALL: "small";
|
|
35
36
|
readonly MEDIUM: "medium";
|
|
36
37
|
readonly LARGE: "large";
|
|
@@ -23,12 +23,15 @@ describe('ContainerRibbon', () => {
|
|
|
23
23
|
);
|
|
24
24
|
});
|
|
25
25
|
|
|
26
|
-
it(
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
26
|
+
it.each(Object.values(CONTAINER_RIBBON_SIZES))(
|
|
27
|
+
'applies size class correctly for size "%s"',
|
|
28
|
+
(size) => {
|
|
29
|
+
const wrapper = mount(ContainerRibbon, {
|
|
30
|
+
props: { size },
|
|
31
|
+
});
|
|
32
|
+
expect(wrapper.find('.ds-container-ribbon').classes()).toContain(`-ds-size-${size}`);
|
|
33
|
+
},
|
|
34
|
+
);
|
|
32
35
|
|
|
33
36
|
it('applies color classes correctly', () => {
|
|
34
37
|
const wrapper = mount(ContainerRibbon, {
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<div
|
|
3
3
|
class="ds-container-ribbon"
|
|
4
4
|
:class="{
|
|
5
|
+
'-ds-size-x-small': size === CONTAINER_RIBBON_SIZES.X_SMALL,
|
|
5
6
|
'-ds-size-small': size === CONTAINER_RIBBON_SIZES.SMALL,
|
|
6
7
|
'-ds-size-medium': size === CONTAINER_RIBBON_SIZES.MEDIUM,
|
|
7
8
|
'-ds-size-large': size === CONTAINER_RIBBON_SIZES.LARGE,
|
|
@@ -38,6 +39,16 @@
|
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
// Size variants
|
|
42
|
+
&.-ds-size-x-small {
|
|
43
|
+
&.-ds-layout-vertical {
|
|
44
|
+
width: $border-xs;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&.-ds-layout-horizontal {
|
|
48
|
+
height: $border-xs;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
41
52
|
&.-ds-size-small {
|
|
42
53
|
&.-ds-layout-vertical {
|
|
43
54
|
width: $border-s;
|