@bethinkpl/design-system 42.0.0 → 43.0.0

package/dist/lib/js/components/Toast/Toast.vue.d.ts

@@ -256,12 +256,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             hasRibbon: {
                 type: PropType<boolean>;
             };
-            hasRadius: {
-                type: PropType<boolean>;
+            elevation: {
+                type: PropType<import('../Cards/Card').CardElevation>;
+            };
+            radius: {
+                type: PropType<import('../Cards/Card').CardRadius>;
             };
             backgroundColor: {
                 type: PropType<import('../Cards/Card').CardBackgroundColor>;
             };
+            isFlat: {
+                type: PropType<boolean>;
+            };
             ribbonPosition: {
                 type: PropType<import('../Cards/Card').CardRibbonPositions>;
             };
@@ -283,12 +289,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             loadingBarTime: {
                 type: PropType<string>;
             };
-            isFlat: {
-                type: PropType<boolean>;
-            };
             isContentScrollable: {
                 type: PropType<boolean>;
             };
+            hasRadius: {
+                type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to radius">>;
+            };
         }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
             P: {};
             B: {};
@@ -315,12 +321,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             hasRibbon: {
                 type: PropType<boolean>;
             };
-            hasRadius: {
-                type: PropType<boolean>;
+            elevation: {
+                type: PropType<import('../Cards/Card').CardElevation>;
+            };
+            radius: {
+                type: PropType<import('../Cards/Card').CardRadius>;
             };
             backgroundColor: {
                 type: PropType<import('../Cards/Card').CardBackgroundColor>;
             };
+            isFlat: {
+                type: PropType<boolean>;
+            };
             ribbonPosition: {
                 type: PropType<import('../Cards/Card').CardRibbonPositions>;
             };
@@ -342,12 +354,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             loadingBarTime: {
                 type: PropType<string>;
             };
-            isFlat: {
-                type: PropType<boolean>;
-            };
             isContentScrollable: {
                 type: PropType<boolean>;
             };
+            hasRadius: {
+                type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to radius">>;
+            };
         }>> & Readonly<{}>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
@@ -371,12 +383,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         hasRibbon: {
             type: PropType<boolean>;
         };
-        hasRadius: {
-            type: PropType<boolean>;
+        elevation: {
+            type: PropType<import('../Cards/Card').CardElevation>;
+        };
+        radius: {
+            type: PropType<import('../Cards/Card').CardRadius>;
         };
         backgroundColor: {
             type: PropType<import('../Cards/Card').CardBackgroundColor>;
         };
+        isFlat: {
+            type: PropType<boolean>;
+        };
         ribbonPosition: {
             type: PropType<import('../Cards/Card').CardRibbonPositions>;
         };
@@ -398,12 +416,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         loadingBarTime: {
             type: PropType<string>;
         };
-        isFlat: {
-            type: PropType<boolean>;
-        };
         isContentScrollable: {
             type: PropType<boolean>;
         };
+        hasRadius: {
+            type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to radius">>;
+        };
     }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
         $slots: Readonly<{
             header?: () => any;

package/dist/lib/js/composables/useFormFieldWithinForm.d.ts

@@ -1,7 +1,7 @@
 import { MaybeRefOrGetter, Ref } from 'vue';
 
-export declare function useFormFieldWithinForm<T = string>(name: MaybeRefOrGetter<string | undefined>, modelValue: Ref<T | undefined>): {
-    field: import('vee-validate').FieldContext<string[]> | null;
-    value: Ref<T | undefined, T | undefined> | Ref<string[], string[]>;
+export declare function useFormFieldWithinForm<T>(name: MaybeRefOrGetter<string | undefined>, modelValue: Ref<T>): {
+    field: import('vee-validate').FieldContext<T> | null;
+    value: Ref<T, T>;
     errors: Ref<string[], string[]>;
 };

package/dist/lib/js/index.d.ts

@@ -53,6 +53,8 @@ export { default as NumberInCircle } from './components/NumberInCircle';
 export { default as DsNumberInCircle } from './components/NumberInCircle';
 export * from './components/NumberInCircle/NumberInCircle.consts';
 export { default as DsPasswordField } from './components/Form/PasswordField';
+export { default as DsSelectField } from './components/Form/SelectField';
+export * from './components/Form/SelectField';
 export { default as TabItem } from './components/TabItem';
 export { default as DsTabItem } from './components/TabItem';
 export * from './components/TabItem/TabItem.consts';

package/lib/js/components/Cards/Card/Card.consts.ts

@@ -7,6 +7,7 @@ import {
 
 export const CARD_PADDING_SIZES = {
 	SMALL: 'small',
+	MEDIUM: 'medium',
 	LARGE: 'large',
 } as const;
 
@@ -15,10 +16,27 @@ export type CardPaddingSize = Value<typeof CARD_PADDING_SIZES>;
 export const CARD_BACKGROUND_COLORS = {
 	DEFAULT: 'default',
 	NEUTRAL: 'neutral',
+	NONE: 'none',
 } as const;
 
 export type CardBackgroundColor = Value<typeof CARD_BACKGROUND_COLORS>;
 
+export const CARD_ELEVATIONS = {
+	DEFAULT: 'default',
+	TOP: 'top',
+	NONE: 'none',
+} as const;
+
+export type CardElevation = Value<typeof CARD_ELEVATIONS>;
+
+export const CARD_RADIUSES = {
+	ALL: 'all',
+	TOP: 'top',
+	NONE: 'none',
+} as const;
+
+export type CardRadius = Value<typeof CARD_RADIUSES>;
+
 export const CARD_RIBBON_COLORS = CONTAINER_RIBBON_COLORS;
 
 export type CardRibbonColors = Value<typeof CARD_RIBBON_COLORS>;

package/lib/js/components/Cards/Card/Card.spec.ts

@@ -3,13 +3,37 @@ import { ComponentMountingOptions, mount } from '@vue/test-utils';
 import { h } from 'vue';
 
 import Card from './Card.vue';
-import { CARD_BACKGROUND_COLORS, CARD_PADDING_SIZES } from './Card.consts';
+import {
+	CARD_BACKGROUND_COLORS,
+	CARD_ELEVATIONS,
+	CARD_PADDING_SIZES,
+	CARD_RADIUSES,
+	CardBackgroundColor,
+	CardElevation,
+	CardPaddingSize,
+	CardRadius,
+} from './Card.consts';
 
 describe('Card', () => {
 	const createComponent = (options: ComponentMountingOptions<typeof Card> = {}) => {
 		return mount(Card, options);
 	};
 
+	// asserts that exactly one modifier out of a variant group is applied
+	const expectOnlyModifier = (
+		classes: Array<string>,
+		modifiers: Array<string>,
+		expectedModifier: string | null,
+	) => {
+		modifiers.forEach((modifier) => {
+			if (modifier === expectedModifier) {
+				expect(classes).toContain(modifier);
+			} else {
+				expect(classes).not.toContain(modifier);
+			}
+		});
+	};
+
 	it('should create', () => {
 		const component = createComponent();
 
@@ -198,62 +222,143 @@ describe('Card', () => {
 		);
 	});
 
-	it('should set large padding class', () => {
-		const component = createComponent({
-			props: { paddingSize: CARD_PADDING_SIZES.LARGE },
-		});
+	const PADDING_MODIFIERS = ['-ds-paddingMedium', '-ds-paddingLarge'];
+
+	it.each<[CardPaddingSize, string | null]>([
+		[CARD_PADDING_SIZES.SMALL, null],
+		[CARD_PADDING_SIZES.MEDIUM, '-ds-paddingMedium'],
+		[CARD_PADDING_SIZES.LARGE, '-ds-paddingLarge'],
+	])('should set the padding class for paddingSize %s', (paddingSize, expectedModifier) => {
+		const component = createComponent({ props: { paddingSize } });
 
-		expect(component.find('.ds-card').classes()).toContain('-ds-paddingLarge');
+		expectOnlyModifier(
+			component.find('.ds-card').classes(),
+			PADDING_MODIFIERS,
+			expectedModifier,
+		);
 	});
 
-	it('should not set large padding class', () => {
-		const component = createComponent({
-			props: { paddingSize: CARD_PADDING_SIZES.SMALL },
-		});
+	it('should not set any padding class by default', () => {
+		const component = createComponent();
+
+		expectOnlyModifier(component.find('.ds-card').classes(), PADDING_MODIFIERS, null);
+	});
 
-		expect(component.find('.ds-card').classes()).not.toContain('-ds-paddingLarge');
+	const ELEVATION_MODIFIERS = ['-ds-elevationTop', '-ds-elevationNone'];
+
+	it.each<[CardElevation, string | null]>([
+		[CARD_ELEVATIONS.DEFAULT, null],
+		[CARD_ELEVATIONS.TOP, '-ds-elevationTop'],
+		[CARD_ELEVATIONS.NONE, '-ds-elevationNone'],
+	])('should set the elevation class for elevation %s', (elevation, expectedModifier) => {
+		const component = createComponent({ props: { elevation } });
+
+		expectOnlyModifier(
+			component.find('.ds-card').classes(),
+			ELEVATION_MODIFIERS,
+			expectedModifier,
+		);
 	});
 
-	it('should not set flat class by default', () => {
+	it('should not set any elevation class by default', () => {
 		const component = createComponent();
 
-		expect(component.find('.ds-card').classes()).not.toContain('-ds-flat');
+		expectOnlyModifier(component.find('.ds-card').classes(), ELEVATION_MODIFIERS, null);
 	});
 
-	it('should set flat class', () => {
-		const component = createComponent({
-			props: { isFlat: true },
-		});
+	const RADIUS_MODIFIERS = ['-ds-radiusTop', '-ds-radiusNone'];
+
+	it.each<[CardRadius, string | null]>([
+		[CARD_RADIUSES.ALL, null],
+		[CARD_RADIUSES.TOP, '-ds-radiusTop'],
+		[CARD_RADIUSES.NONE, '-ds-radiusNone'],
+	])('should set the radius class for radius %s', (radius, expectedModifier) => {
+		const component = createComponent({ props: { radius } });
 
-		expect(component.find('.ds-card').classes()).toContain('-ds-flat');
+		expectOnlyModifier(
+			component.find('.ds-card').classes(),
+			RADIUS_MODIFIERS,
+			expectedModifier,
+		);
+	});
+
+	it('should not set any radius class by default', () => {
+		const component = createComponent();
+
+		expectOnlyModifier(component.find('.ds-card').classes(), RADIUS_MODIFIERS, null);
 	});
 
-	it('should not set no-radius class by default', () => {
+	const BACKGROUND_MODIFIERS = ['-ds-backgroundNeutral', '-ds-backgroundNone'];
+
+	it.each<[CardBackgroundColor, string | null]>([
+		[CARD_BACKGROUND_COLORS.DEFAULT, null],
+		[CARD_BACKGROUND_COLORS.NEUTRAL, '-ds-backgroundNeutral'],
+		[CARD_BACKGROUND_COLORS.NONE, '-ds-backgroundNone'],
+	])(
+		'should set the background class for backgroundColor %s',
+		(backgroundColor, expectedModifier) => {
+			const component = createComponent({ props: { backgroundColor } });
+
+			expectOnlyModifier(
+				component.find('.ds-card').classes(),
+				BACKGROUND_MODIFIERS,
+				expectedModifier,
+			);
+		},
+	);
+
+	it('should not set any background class by default', () => {
 		const component = createComponent();
 
-		expect(component.find('.ds-card').classes()).not.toContain('-ds-noRadius');
+		expectOnlyModifier(component.find('.ds-card').classes(), BACKGROUND_MODIFIERS, null);
+	});
+
+	it('should set the none modifiers of all three visual axes when isFlat is true', () => {
+		const classes = createComponent({ props: { isFlat: true } })
+			.find('.ds-card')
+			.classes();
+
+		expectOnlyModifier(classes, ELEVATION_MODIFIERS, '-ds-elevationNone');
+		expectOnlyModifier(classes, RADIUS_MODIFIERS, '-ds-radiusNone');
+		expectOnlyModifier(classes, BACKGROUND_MODIFIERS, '-ds-backgroundNone');
+	});
+
+	it('should not change the padding when isFlat is true', () => {
+		const component = createComponent({ props: { isFlat: true } });
+
+		expectOnlyModifier(component.find('.ds-card').classes(), PADDING_MODIFIERS, null);
 	});
 
-	it('should set no-radius class when hasRadius is false', () => {
+	it('should let an explicit elevation override isFlat', () => {
 		const component = createComponent({
-			props: { hasRadius: false },
+			props: { isFlat: true, elevation: CARD_ELEVATIONS.TOP },
 		});
 
-		expect(component.find('.ds-card').classes()).toContain('-ds-noRadius');
+		expectOnlyModifier(
+			component.find('.ds-card').classes(),
+			ELEVATION_MODIFIERS,
+			'-ds-elevationTop',
+		);
 	});
 
-	it('should not set neutral background class by default', () => {
-		const component = createComponent();
+	it('should let an explicit radius override isFlat', () => {
+		const component = createComponent({
+			props: { isFlat: true, radius: CARD_RADIUSES.TOP },
+		});
 
-		expect(component.find('.ds-card').classes()).not.toContain('-ds-backgroundNeutral');
+		expectOnlyModifier(component.find('.ds-card').classes(), RADIUS_MODIFIERS, '-ds-radiusTop');
 	});
 
-	it('should set neutral background class when backgroundColor is neutral', () => {
+	it('should let an explicit backgroundColor override isFlat', () => {
 		const component = createComponent({
-			props: { backgroundColor: CARD_BACKGROUND_COLORS.NEUTRAL },
+			props: { isFlat: true, backgroundColor: CARD_BACKGROUND_COLORS.NEUTRAL },
 		});
 
-		expect(component.find('.ds-card').classes()).toContain('-ds-backgroundNeutral');
+		expectOnlyModifier(
+			component.find('.ds-card').classes(),
+			BACKGROUND_MODIFIERS,
+			'-ds-backgroundNeutral',
+		);
 	});
 
 	it('should not give the ribbon a radius when only hasRibbonRadius is set', () => {
@@ -266,25 +371,46 @@ describe('Card', () => {
 
 	it('should give the ribbon a radius when hasRibbonRadius and card has no radius', () => {
 		const component = createComponent({
-			props: { hasRibbon: true, hasRibbonRadius: true, hasRadius: false },
+			props: { hasRibbon: true, hasRibbonRadius: true, radius: CARD_RADIUSES.NONE },
 		});
 
 		expect(component.find('.-ds-radius-bottom').exists()).toBe(true);
 	});
 
-	it('should not give the ribbon a radius when hasRadius is false but hasRibbonRadius is false', () => {
+	it('should not give the ribbon a radius when radius is none but hasRibbonRadius is false', () => {
+		const component = createComponent({
+			props: { hasRibbon: true, hasRibbonRadius: false, radius: CARD_RADIUSES.NONE },
+		});
+
+		expect(component.find('.-ds-radius-bottom').exists()).toBe(false);
+	});
+
+	it('should not give the ribbon a radius when the card is rounded at the top', () => {
 		const component = createComponent({
-			props: { hasRibbon: true, hasRibbonRadius: false, hasRadius: false },
+			props: { hasRibbon: true, hasRibbonRadius: true, radius: CARD_RADIUSES.TOP },
 		});
 
 		expect(component.find('.-ds-radius-bottom').exists()).toBe(false);
 	});
 
-	it('should give the ribbon a radius when hasRibbonRadius and card is flat', () => {
+	it('should give the ribbon a radius when hasRibbonRadius and the card is flat', () => {
 		const component = createComponent({
 			props: { hasRibbon: true, hasRibbonRadius: true, isFlat: true },
 		});
 
 		expect(component.find('.-ds-radius-bottom').exists()).toBe(true);
 	});
+
+	it('should not give the ribbon a radius when a flat card is overridden with radius top', () => {
+		const component = createComponent({
+			props: {
+				hasRibbon: true,
+				hasRibbonRadius: true,
+				isFlat: true,
+				radius: CARD_RADIUSES.TOP,
+			},
+		});
+
+		expect(component.find('.-ds-radius-bottom').exists()).toBe(false);
+	});
 });

package/lib/js/components/Cards/Card/Card.stories.ts

@@ -3,6 +3,8 @@ import Card from './Card.vue';
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import {
 	CARD_BACKGROUND_COLORS,
+	CARD_ELEVATIONS,
+	CARD_RADIUSES,
 	CARD_RIBBON_COLORS,
 	CARD_RIBBON_POSITIONS,
 	CARD_RIBBON_SIZES,
@@ -50,7 +52,9 @@ const args = {
 	paddingSize: CARD_PADDING_SIZES.SMALL,
 	dividerUnderHeader: false,
 	hasRibbon: false,
-	hasRadius: true,
+	isFlat: false,
+	elevation: CARD_ELEVATIONS.DEFAULT,
+	radius: CARD_RADIUSES.ALL,
 	backgroundColor: CARD_BACKGROUND_COLORS.DEFAULT,
 	ribbonPosition: CARD_RIBBON_POSITIONS.TOP,
 	ribbonSize: CARD_RIBBON_SIZES.MEDIUM,
@@ -59,7 +63,6 @@ const args = {
 	hasLoadingBar: false,
 	loadingBarColor: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
 	loadingBarTime: '0',
-	isFlat: false,
 	isContentScrollable: false,
 } as Args;
 
@@ -70,6 +73,17 @@ const argTypes = {
 	},
 	footer: { control: 'text' },
 	experimentalContent: { control: 'text' },
+	isFlat: {
+		control: 'boolean',
+	},
+	elevation: {
+		control: 'select',
+		options: Object.values(CARD_ELEVATIONS),
+	},
+	radius: {
+		control: 'select',
+		options: Object.values(CARD_RADIUSES),
+	},
 	backgroundColor: {
 		control: 'select',
 		options: Object.values(CARD_BACKGROUND_COLORS),
@@ -108,3 +122,8 @@ Interactive.parameters = {
 		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=1552%3A34959',
 	},
 };
+
+export const Flat = StoryTemplate.bind({});
+
+Flat.argTypes = argTypes;
+Flat.args = { ...args, isFlat: true };