@bethinkpl/design-system 41.1.4 → 42.0.0

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

@@ -85,6 +85,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_BADGE_PERCENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BAN: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BARS: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_BELL_SLASH_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_BELL_ON_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BELL_SLASH: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BELL: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -152,6 +154,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;

package/dist/lib/js/components/Tile/Tile.sb.shared.d.ts

@@ -45,6 +45,8 @@ export declare const data: () => {
         readonly FA_BADGE_PERCENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BAN: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BARS: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_BELL_SLASH_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_BELL_ON_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BELL_SLASH: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BELL: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -112,6 +114,7 @@ export declare const data: () => {
         readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;

package/dist/lib/js/components/Toggles/ToggleButton/ToggleButton.vue.d.ts

@@ -101,6 +101,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_BADGE_PERCENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BAN: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BARS: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_BELL_SLASH_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_BELL_ON_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BELL_SLASH: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BELL: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -168,6 +170,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;

package/dist/lib/js/icons/fontawesome.d.ts

@@ -29,6 +29,8 @@ export declare const FONTAWESOME_ICONS: {
     readonly FA_BADGE_PERCENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_BAN: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_BARS: import('@fortawesome/fontawesome-common-types').IconDefinition;
+    readonly FA_BELL_SLASH_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+    readonly FA_BELL_ON_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_BELL_SLASH: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_BELL: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -96,6 +98,7 @@ export declare const FONTAWESOME_ICONS: {
     readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_COMMENTS_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
+    readonly FA_COMMENTS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_COMMENTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_COMPASS_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_COMPRESS: import('@fortawesome/fontawesome-common-types').IconDefinition;

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

@@ -46,7 +46,6 @@ export { default as IconButton } from './components/Buttons/IconButton';
 export { default as DsIconButton } from './components/Buttons/IconButton';
 export * from './components/Buttons/IconButton/IconButton.consts';
 export { default as DsInputField } from './components/Form/InputField';
-export { default as Modal } from './components/Modal';
 export { default as DsModal } from './components/Modals/Modal';
 export * from './components/Modals/Modal/Modal.consts';
 export { default as DsModalDialog } from './components/Modals/ModalDialog';

package/lib/js/components/Drawer/Drawer.consts.ts

@@ -4,3 +4,12 @@ export const DRAWER_POSITIONS = {
 } as const;
 
 export type DrawerPosition = (typeof DRAWER_POSITIONS)[keyof typeof DRAWER_POSITIONS];
+
+export const DRAWER_BACKGROUND_COLORS = {
+	NONE: 'none',
+	DEFAULT: 'default',
+	NEUTRAL: 'neutral',
+} as const;
+
+export type DrawerBackgroundColor =
+	(typeof DRAWER_BACKGROUND_COLORS)[keyof typeof DRAWER_BACKGROUND_COLORS];

package/lib/js/components/Drawer/Drawer.spec.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Drawer from './Drawer.vue';
+import { DRAWER_BACKGROUND_COLORS, DrawerBackgroundColor } from './Drawer.consts';
+
+const createComponent = (props = {}, slots = {}) => {
+	return mount(Drawer, {
+		props,
+		slots,
+	});
+};
+
+describe('Drawer', () => {
+	describe('backgroundColor', () => {
+		it.each([
+			[DRAWER_BACKGROUND_COLORS.DEFAULT, '-ds-backgroundDefault'],
+			[DRAWER_BACKGROUND_COLORS.NEUTRAL, '-ds-backgroundNeutral'],
+		])('should set the %s background class', (backgroundColor, expectedClass) => {
+			const component = createComponent({ backgroundColor });
+
+			expect(component.find('.ds-drawer').classes()).toContain(expectedClass);
+		});
+
+		it.each([undefined, DRAWER_BACKGROUND_COLORS.NONE])(
+			'should not set any background class when backgroundColor is %s',
+			(backgroundColor?: DrawerBackgroundColor) => {
+				const component = createComponent({ backgroundColor });
+
+				const classes = component.find('.ds-drawer').classes();
+
+				expect(classes).not.toContain('-ds-backgroundDefault');
+				expect(classes).not.toContain('-ds-backgroundNeutral');
+			},
+		);
+	});
+});

package/lib/js/components/Drawer/Drawer.stories.ts

@@ -1,5 +1,5 @@
 import Drawer from './Drawer.vue';
-import { DRAWER_POSITIONS } from './Drawer.consts';
+import { DRAWER_BACKGROUND_COLORS, DRAWER_POSITIONS } from './Drawer.consts';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
@@ -14,7 +14,7 @@ const StoryTemplate: StoryFn<typeof Drawer> = (args) => ({
 		return args;
 	},
 	template: `<div style="height: 300px; width: 200px;">
-		<drawer :position="position" :sticky-header="stickyHeader" :sticky-footer="stickyFooter">
+		<drawer :position="position" :sticky-header="stickyHeader" :sticky-footer="stickyFooter" :background-color="backgroundColor">
 		<template v-slot:header><div style="background-color: var(--raw-gray-100)">Header<br><br></div></template>
 		<div>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br></div>
 		<template v-slot:footer><div style="background-color: var(--raw-gray-100)">Footer<br><br></div></template>
@@ -28,6 +28,7 @@ const args = {
 	position: DRAWER_POSITIONS.RIGHT,
 	stickyHeader: true,
 	stickyFooter: true,
+	backgroundColor: DRAWER_BACKGROUND_COLORS.NONE,
 } as Args;
 
 const argTypes = {
@@ -35,6 +36,10 @@ const argTypes = {
 		control: 'select',
 		options: Object.values(DRAWER_POSITIONS),
 	},
+	backgroundColor: {
+		control: 'select',
+		options: Object.values(DRAWER_BACKGROUND_COLORS),
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

package/lib/js/components/Drawer/Drawer.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="ds-drawer scrollable-container" :class="{ [positionClassName]: true }">
+	<div
+		class="ds-drawer scrollable-container"
+		:class="[positionClassName, backgroundColorClassName]"
+	>
 		<div v-if="$slots.header && stickyHeader" class="ds-drawer__header -ds-sticky">
 			<slot name="header" />
 		</div>
@@ -48,6 +51,14 @@
 		}
 	}
 
+	&.-ds-backgroundDefault {
+		background-color: $color-default-background;
+	}
+
+	&.-ds-backgroundNeutral {
+		background-color: $color-neutral-background;
+	}
+
 	&__header,
 	&__footer {
 		flex-shrink: 0;
@@ -73,7 +84,12 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 
-import { DRAWER_POSITIONS, DrawerPosition } from './Drawer.consts';
+import {
+	DRAWER_BACKGROUND_COLORS,
+	DRAWER_POSITIONS,
+	DrawerBackgroundColor,
+	DrawerPosition,
+} from './Drawer.consts';
 
 export default defineComponent({
 	name: 'Drawer',
@@ -93,6 +109,13 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		backgroundColor: {
+			type: String as PropType<DrawerBackgroundColor>,
+			default: DRAWER_BACKGROUND_COLORS.NONE,
+			validator(backgroundColor: DrawerBackgroundColor) {
+				return Object.values(DRAWER_BACKGROUND_COLORS).includes(backgroundColor);
+			},
+		},
 	},
 	computed: {
 		positionClassName(): string {
@@ -102,6 +125,16 @@ export default defineComponent({
 
 			return '-ds-positionRight';
 		},
+		backgroundColorClassName(): string | null {
+			switch (this.backgroundColor) {
+				case DRAWER_BACKGROUND_COLORS.DEFAULT:
+					return '-ds-backgroundDefault';
+				case DRAWER_BACKGROUND_COLORS.NEUTRAL:
+					return '-ds-backgroundNeutral';
+				default:
+					return null;
+			}
+		},
 	},
 });
 </script>

package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.consts.ts

@@ -5,3 +5,11 @@ export const DRAWER_HEADER_TITLE_COLORS = {
 
 export type DrawerHeaderTitleColor =
 	(typeof DRAWER_HEADER_TITLE_COLORS)[keyof typeof DRAWER_HEADER_TITLE_COLORS];
+
+export const DRAWER_HEADER_BACKGROUND_COLORS = {
+	NONE: 'none',
+	DEFAULT: 'default',
+} as const;
+
+export type DrawerHeaderBackgroundColor =
+	(typeof DRAWER_HEADER_BACKGROUND_COLORS)[keyof typeof DRAWER_HEADER_BACKGROUND_COLORS];

package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.spec.ts

@@ -2,10 +2,15 @@ import { describe, expect, it } from 'vitest';
 import { mount } from '@vue/test-utils';
 import DrawerHeader from './DrawerHeader.vue';
 import { IconButton } from '../../../';
+import {
+	DRAWER_HEADER_BACKGROUND_COLORS,
+	DrawerHeaderBackgroundColor,
+} from './DrawerHeader.consts';
 
-const createComponent = (props = {}) => {
+const createComponent = (props = {}, slots = {}) => {
 	return mount(DrawerHeader, {
 		props,
+		slots,
 	});
 };
 
@@ -52,4 +57,38 @@ describe('DrawerHeader', () => {
 			expect(component.emitted().backClicked).toHaveLength(1);
 		});
 	});
+
+	describe('supporting slot', () => {
+		it('should render the slot content inside the header wrapper', () => {
+			const component = createComponent(
+				{},
+				{ supporting: '<span class="supporting-content">Supporting</span>' },
+			);
+
+			const headerWrapper = component.find('.ds-drawerHeader__headerWrapper').element;
+
+			expect(component.find('.supporting-content').element.parentElement).toBe(headerWrapper);
+		});
+	});
+
+	describe('backgroundColor', () => {
+		it('should set the default background class when backgroundColor is default', () => {
+			const component = createComponent({
+				backgroundColor: DRAWER_HEADER_BACKGROUND_COLORS.DEFAULT,
+			});
+
+			expect(component.find('.ds-drawerHeader').classes()).toContain('-ds-backgroundDefault');
+		});
+
+		it.each([undefined, DRAWER_HEADER_BACKGROUND_COLORS.NONE])(
+			'should not set any background class when backgroundColor is %s',
+			(backgroundColor?: DrawerHeaderBackgroundColor) => {
+				const component = createComponent({ backgroundColor });
+
+				expect(component.find('.ds-drawerHeader').classes()).not.toContain(
+					'-ds-backgroundDefault',
+				);
+			},
+		);
+	});
 });

package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.stories.ts

@@ -2,7 +2,11 @@ import DrawerHeader from './DrawerHeader.vue';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import { ICONS } from '../../Icons/Icon';
-import { DRAWER_HEADER_TITLE_COLORS } from './DrawerHeader.consts';
+import { DRAWER_HEADER_BACKGROUND_COLORS, DRAWER_HEADER_TITLE_COLORS } from './DrawerHeader.consts';
+import SlotPlaceholder, {
+	SLOT_PLACEHOLDER_SIZES,
+} from '../../../../../.storybook/SlotPlaceholder/SlotPlaceholder.vue';
+import { toRefs } from 'vue';
 
 export default {
 	title: 'Components/Drawer/DrawerHeader',
@@ -10,13 +14,12 @@ export default {
 } as Meta<typeof DrawerHeader>;
 
 const StoryTemplate: StoryFn<typeof DrawerHeader> = (args) => ({
-	components: { DrawerHeader },
+	components: { DrawerHeader, SlotPlaceholder },
 	setup() {
-		return args;
-	},
-	data() {
 		return {
-			ICONS: Object.freeze(ICONS),
+			...toRefs(args),
+			ICONS,
+			SLOT_PLACEHOLDER_SIZES,
 		};
 	},
 	template: `
@@ -33,12 +36,16 @@ const StoryTemplate: StoryFn<typeof DrawerHeader> = (args) => ({
 			:title-ellipsis="titleEllipsis"
 			:title="title"
 			:has-back-button="hasBackButton"
+			:background-color="backgroundColor"
 		>
 			<template #actions v-if="actions">
-				<div v-html="actions" />
+				<slot-placeholder :label="actions" :size="SLOT_PLACEHOLDER_SIZES.SMALL" />
 			</template>
 			<template #titleTrailing v-if="titleTrailing">
-				<div v-html="titleTrailing" />
+				<slot-placeholder :label="titleTrailing" :size="SLOT_PLACEHOLDER_SIZES.SMALL" />
+			</template>
+			<template #supporting v-if="supporting">
+				<slot-placeholder :label="supporting" :size="SLOT_PLACEHOLDER_SIZES.SMALL" />
 			</template>
 		</drawer-header>`,
 });
@@ -59,7 +66,9 @@ const args = {
 	isSecondLevel: false,
 	actions: 'actions slot',
 	titleTrailing: 'trailing slot',
+	supporting: 'supporting slot',
 	hasBackButton: false,
+	backgroundColor: DRAWER_HEADER_BACKGROUND_COLORS.NONE,
 } as Args;
 
 const argTypes = {
@@ -82,7 +91,12 @@ const argTypes = {
 	isClosable: { control: 'boolean' },
 	actions: { control: 'text' },
 	titleTrailing: { control: 'text' },
+	supporting: { control: 'text' },
 	hasBackButton: { control: 'boolean' },
+	backgroundColor: {
+		control: 'select',
+		options: Object.values(DRAWER_HEADER_BACKGROUND_COLORS),
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;