@bethinkpl/design-system 30.4.2 → 31.0.0

package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts

@@ -131,6 +131,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_CREDIT_CARD: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_DNA_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_DOT_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_DOT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_EARTH_AMERICAS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ELLIPSIS_VERTICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ELLIPSIS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -771,6 +772,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly FA_CREDIT_CARD: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_DNA_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_DOT_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+            readonly FA_DOT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_EARTH_AMERICAS: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_ELLIPSIS_VERTICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_ELLIPSIS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1308,6 +1310,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly FA_CREDIT_CARD: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_DNA_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_DOT_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+            readonly FA_DOT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_EARTH_AMERICAS: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_ELLIPSIS_VERTICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_ELLIPSIS: import('@fortawesome/fontawesome-common-types').IconDefinition;

package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts

@@ -150,6 +150,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_CREDIT_CARD: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_DNA_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_DOT_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_DOT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_EARTH_AMERICAS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ELLIPSIS_VERTICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ELLIPSIS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -744,6 +745,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly FA_CREDIT_CARD: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_DNA_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_DOT_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+            readonly FA_DOT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_EARTH_AMERICAS: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_ELLIPSIS_VERTICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_ELLIPSIS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1454,6 +1456,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly FA_CREDIT_CARD: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_DNA_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_DOT_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+            readonly FA_DOT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_EARTH_AMERICAS: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_ELLIPSIS_VERTICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_ELLIPSIS: import('@fortawesome/fontawesome-common-types').IconDefinition;

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

@@ -150,6 +150,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_CREDIT_CARD: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_DNA_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_DOT_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_DOT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_EARTH_AMERICAS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ELLIPSIS_VERTICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ELLIPSIS: import('@fortawesome/fontawesome-common-types').IconDefinition;

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

@@ -110,6 +110,7 @@ export declare const data: () => {
         readonly FA_CREDIT_CARD: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_DNA_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_DOT_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_DOT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_EARTH_AMERICAS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ELLIPSIS_VERTICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ELLIPSIS: import('@fortawesome/fontawesome-common-types').IconDefinition;

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

@@ -166,6 +166,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_CREDIT_CARD: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_DNA_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_DOT_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_DOT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_EARTH_AMERICAS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ELLIPSIS_VERTICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ELLIPSIS: import('@fortawesome/fontawesome-common-types').IconDefinition;

package/dist/lib/js/i18n/en.d.ts

@@ -7,7 +7,6 @@ declare const _default: {
     "ds.statsLayout.statsErrorBanner.message": string;
     "ds.statsLayout.statsErrorBanner.title": string;
     "ds.statsLayout.statsResetBanner.buttonText": string;
-    "ds.statsLayout.statsResetBanner.message": string;
     "ds.statsLayout.statsResetBanner.title": string;
     "ds.pagination.from": string;
     "ds.accessStatus.status.active": string;

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

@@ -12,7 +12,6 @@ export declare const messages: {
         "ds.statsLayout.statsErrorBanner.message": string;
         "ds.statsLayout.statsErrorBanner.title": string;
         "ds.statsLayout.statsResetBanner.buttonText": string;
-        "ds.statsLayout.statsResetBanner.message": string;
         "ds.statsLayout.statsResetBanner.title": string;
         "ds.pagination.from": string;
         "ds.accessStatus.status.active": string;
@@ -33,7 +32,6 @@ export declare const messages: {
         "ds.statsLayout.statsErrorBanner.message": string;
         "ds.statsLayout.statsErrorBanner.title": string;
         "ds.statsLayout.statsResetBanner.buttonText": string;
-        "ds.statsLayout.statsResetBanner.message": string;
         "ds.statsLayout.statsResetBanner.title": string;
         "ds.pagination.from": string;
         "ds.accessStatus.status.active": string;

package/dist/lib/js/i18n/pl.d.ts

@@ -7,7 +7,6 @@ declare const _default: {
     "ds.statsLayout.statsErrorBanner.message": string;
     "ds.statsLayout.statsErrorBanner.title": string;
     "ds.statsLayout.statsResetBanner.buttonText": string;
-    "ds.statsLayout.statsResetBanner.message": string;
     "ds.statsLayout.statsResetBanner.title": string;
     "ds.pagination.from": string;
     "ds.accessStatus.status.active": string;

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

@@ -97,6 +97,7 @@ export declare const FONTAWESOME_ICONS: {
     readonly FA_CREDIT_CARD: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_DNA_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_DOT_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+    readonly FA_DOT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_EARTH_AMERICAS: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_ELLIPSIS_VERTICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_ELLIPSIS: import('@fortawesome/fontawesome-common-types').IconDefinition;

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

@@ -100,13 +100,14 @@ export { default as DrawerTile } from './components/Drawer/DrawerTile/DrawerTile
 export { default as DsDrawerTile } from './components/Drawer/DrawerTile/DrawerTile.vue';
 export { default as DrawerSection } from './components/Drawer/DrawerSection/DrawerSection.vue';
 export { default as DsDrawerSection } from './components/Drawer/DrawerSection/DrawerSection.vue';
-export { default as OutlineItem } from './components/Outline/OutlineItem';
-export { default as DsOutlineItem } from './components/Outline/OutlineItem';
-export * from './components/Outline/OutlineItem/OutlineItem.consts';
-export { default as OutlineDivider } from './components/Outline/OutlineDivider';
-export { default as DsOutlineDivider } from './components/Outline/OutlineDivider';
-export { default as OutlineSectionHeader } from './components/Outline/OutlineSectionHeader';
-export { default as DsOutlineSectionHeader } from './components/Outline/OutlineSectionHeader';
+export { default as Menu } from './components/Menu/Menu';
+export { default as DsMenu } from './components/Menu/Menu';
+export * from './components/Menu/Menu/Menu.consts';
+export { default as MenuItem } from './components/Menu/MenuItem';
+export { default as DsMenuItem } from './components/Menu/MenuItem';
+export * from './components/Menu/MenuItem/MenuItem.consts';
+export { default as MenuDivider } from './components/Menu/MenuDivider';
+export { default as DsMenuDivider } from './components/Menu/MenuDivider';
 export { default as Chip } from './components/Chip';
 export { default as DsChip } from './components/Chip';
 export * from './components/Chip/Chip.consts';

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

@@ -0,0 +1,11 @@
+import { Value } from '../../../utils/type.utils';
+import type { InjectionKey } from 'vue';
+
+export const MENU_LAYOUTS = {
+	DEFAULT: 'default',
+	EXTENSIVE: 'extensive',
+};
+
+export type MenuLayout = Value<typeof MENU_LAYOUTS>;
+
+export const MENU_LAYOUT_INJECTION_KEY: InjectionKey<MenuLayout> = Symbol('menuLayout');

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

@@ -0,0 +1,134 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+import Menu from './Menu.vue';
+import { MENU_LAYOUT_INJECTION_KEY, MENU_LAYOUTS } from './Menu.consts';
+
+describe('Menu', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(Menu);
+
+		expect(wrapper.exists()).toBe(true);
+		expect(wrapper.element.tagName).toBe('UL');
+		expect(wrapper.classes()).toContain('ds-menu');
+	});
+
+	it('renders slot content', () => {
+		const slotContent = 'Menu items go here';
+		const wrapper = mount(Menu, {
+			slots: {
+				default: () => h('li', slotContent),
+			},
+		});
+
+		expect(wrapper.text()).toContain(slotContent);
+		expect(wrapper.find('li').exists()).toBe(true);
+	});
+
+	describe('layout prop', () => {
+		it('applies default layout when no layout prop is provided', () => {
+			const wrapper = mount(Menu);
+
+			expect(wrapper.classes()).toContain('ds-menu');
+			expect(wrapper.classes()).not.toContain('-ds-extensive');
+		});
+
+		it('applies default layout when layout prop is explicitly set to default', () => {
+			const wrapper = mount(Menu, {
+				props: {
+					layout: MENU_LAYOUTS.DEFAULT,
+				},
+			});
+
+			expect(wrapper.classes()).toContain('ds-menu');
+			expect(wrapper.classes()).not.toContain('-ds-extensive');
+		});
+
+		it('applies extensive layout when layout prop is set to extensive', () => {
+			const wrapper = mount(Menu, {
+				props: {
+					layout: MENU_LAYOUTS.EXTENSIVE,
+				},
+			});
+
+			expect(wrapper.classes()).toContain('ds-menu');
+			expect(wrapper.classes()).toContain('-ds-extensive');
+		});
+	});
+
+	describe('layout injection', () => {
+		it('uses injected layout when no layout prop is provided', () => {
+			const wrapper = mount(Menu, {
+				global: {
+					provide: {
+						[MENU_LAYOUT_INJECTION_KEY]: MENU_LAYOUTS.EXTENSIVE,
+					},
+				},
+			});
+
+			expect(wrapper.classes()).toContain('ds-menu');
+			expect(wrapper.classes()).toContain('-ds-extensive');
+		});
+
+		it('prioritizes layout prop over injected layout', () => {
+			const wrapper = mount(Menu, {
+				props: {
+					layout: MENU_LAYOUTS.DEFAULT,
+				},
+				global: {
+					provide: {
+						[MENU_LAYOUT_INJECTION_KEY]: MENU_LAYOUTS.EXTENSIVE,
+					},
+				},
+			});
+
+			expect(wrapper.classes()).toContain('ds-menu');
+			expect(wrapper.classes()).not.toContain('-ds-extensive');
+		});
+	});
+
+	describe('layout provision', () => {
+		it('provides layout value to child components', () => {
+			let providedLayout: string | null = null;
+
+			const ChildComponent = {
+				setup() {
+					const { inject } = require('vue');
+					providedLayout = inject(MENU_LAYOUT_INJECTION_KEY, null);
+					return () => h('div', 'child');
+				},
+			};
+
+			mount(Menu, {
+				props: {
+					layout: MENU_LAYOUTS.EXTENSIVE,
+				},
+				slots: {
+					default: () => h(ChildComponent),
+				},
+			});
+
+			expect(providedLayout).toBe(MENU_LAYOUTS.EXTENSIVE);
+		});
+
+		it('provides default layout when no layout prop is set', () => {
+			let providedLayout: string | null = null;
+
+			const ChildComponent = {
+				setup() {
+					const { inject } = require('vue');
+					providedLayout = inject(MENU_LAYOUT_INJECTION_KEY, null);
+					return () => h('div', 'child');
+				},
+			};
+
+			mount(Menu, {
+				slots: {
+					default: () => h(ChildComponent),
+				},
+			});
+
+			expect(providedLayout).toBe(MENU_LAYOUTS.DEFAULT);
+		});
+	});
+});

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

@@ -0,0 +1,52 @@
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import DsMenu, { MENU_LAYOUTS } from './index';
+import MenuItem from '../MenuItem';
+import MenuDivider from '../MenuDivider';
+
+export default {
+	title: 'Components/Menu/Menu',
+	component: DsMenu,
+} as Meta<typeof DsMenu>;
+
+const StoryTemplate: StoryFn<typeof DsMenu> = (args) => ({
+	components: { DsMenu, MenuItem, MenuDivider },
+	setup() {
+		return args;
+	},
+	template: `
+		<ds-menu :layout="layout" >
+			<menu-item label="level 1" />
+			<menu-item label="level 1" />
+			<menu-divider />
+			<menu-item label="level 1" />
+			<menu-item label="level 1" >
+				<template #children>
+					<ds-menu>
+						<menu-item label="level 2" />
+					</ds-menu>
+				</template>
+			</menu-item>
+			<menu-item label="level 1" />
+		</ds-menu>`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const argTypes = {
+	layout: {
+		control: 'select',
+		options: Object.values(MENU_LAYOUTS),
+	},
+} as ArgTypes;
+
+Interactive.args = {
+	layout: MENU_LAYOUTS.DEFAULT,
+} as Args;
+Interactive.argTypes = argTypes;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=15355-7663&m=dev',
+	},
+};

package/lib/js/components/Menu/Menu/Menu.vue

@@ -0,0 +1,56 @@
+<template>
+	<ul
+		:class="[
+			'ds-menu',
+			{
+				'-ds-extensive': calculatedLayout === MENU_LAYOUTS.EXTENSIVE,
+			},
+		]"
+	>
+		<slot />
+	</ul>
+</template>
+
+<style scoped lang="scss">
+@import '../../../../styles/settings/spacings';
+
+.ds-menu {
+	display: flex;
+	flex-direction: column;
+	gap: $space-5xs;
+	margin: 0;
+	padding: 0;
+
+	&.-ds-extensive {
+		gap: $space-2xs;
+	}
+}
+</style>
+
+<script setup lang="ts">
+import { MENU_LAYOUT_INJECTION_KEY, MENU_LAYOUTS, MenuLayout } from './Menu.consts';
+import { computed, inject, provide } from 'vue';
+
+const { layout = null } = defineProps<{
+	layout?: MenuLayout | null;
+}>();
+
+const slots = defineSlots<{
+	default?: () => any;
+}>();
+
+const calculatedLayout = computed(() => {
+	if (layout !== null) {
+		return layout;
+	}
+
+	const injectedLayout = inject(MENU_LAYOUT_INJECTION_KEY, null);
+	if (injectedLayout !== null) {
+		return injectedLayout;
+	}
+
+	return MENU_LAYOUTS.DEFAULT;
+});
+
+provide(MENU_LAYOUT_INJECTION_KEY, calculatedLayout.value);
+</script>

package/lib/js/components/Menu/Menu/index.ts

@@ -0,0 +1,4 @@
+import DsMenu from './Menu.vue';
+
+export default DsMenu;
+export * from './Menu.consts';

package/lib/js/components/{Outline/OutlineDivider/OutlineDivider.stories.ts → Menu/MenuDivider/MenuDivider.stories.ts}

@@ -1,19 +1,19 @@
-import OutlineDivider from './OutlineDivider.vue';
+import MenuDivider from './MenuDivider.vue';
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import { DIVIDER_PROMINENCES, DIVIDER_SIZES } from '../../Divider';
 
 export default {
-	title: 'Components/Outline/OutlineDivider',
-	component: OutlineDivider,
-} as Meta<typeof OutlineDivider>;
+	title: 'Components/Menu/MenuDivider',
+	component: MenuDivider,
+} as Meta<typeof MenuDivider>;
 
-const StoryTemplate: StoryFn<typeof OutlineDivider> = (args) => ({
-	components: { OutlineDivider },
+const StoryTemplate: StoryFn<typeof MenuDivider> = (args) => ({
+	components: { MenuDivider },
 	setup() {
 		return args;
 	},
 	template: `
-		<outline-divider :prominence="prominence" :size="size" />`,
+		<menu-divider :prominence="prominence" :size="size" />`,
 });
 
 export const Interactive = StoryTemplate.bind({});

package/lib/js/components/{Outline/OutlineDivider/OutlineDivider.vue → Menu/MenuDivider/MenuDivider.vue}

@@ -1,13 +1,14 @@
 <template>
-	<div class="ds-outlineDivider">
+	<li class="ds-menuDivider">
 		<ds-divider :prominence="prominence" :size="size" />
-	</div>
+	</li>
 </template>
 
 <style scoped lang="scss">
 @import '../../../../styles/settings/spacings';
 
-.ds-outlineDivider {
+.ds-menuDivider {
+	list-style-type: none;
 	padding: $space-3xs 0;
 }
 </style>
@@ -18,7 +19,7 @@ import DsDivider, { DIVIDER_PROMINENCES, DIVIDER_SIZES } from '../../Divider';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'OutlineDivider',
+	name: 'MenuDivider',
 	components: {
 		DsDivider,
 	},

package/lib/js/components/Menu/MenuDivider/index.ts

@@ -0,0 +1,3 @@
+import MenuDivider from './MenuDivider.vue';
+
+export default MenuDivider;

package/lib/js/components/Menu/MenuItem/MenuItem.consts.ts

@@ -0,0 +1,34 @@
+import { Value } from '../../../utils/type.utils';
+import type { InjectionKey } from 'vue';
+
+export const MENU_ITEM_SIZES = {
+	SMALL: 'small',
+	MEDIUM: 'medium',
+};
+
+export type MenuItemSize = Value<typeof MENU_ITEM_SIZES>;
+
+export const MENU_ITEM_STATES = {
+	DEFAULT: 'default',
+	DISABLED: 'disabled',
+};
+
+export type MenuItemState = Value<typeof MENU_ITEM_STATES>;
+
+export const MENU_ITEM_BACKGROUND_COLORS = {
+	NEUTRAL_WEAK: 'neutralWeak',
+	NEUTRAL: 'neutral',
+};
+
+export type MenuItemBackgroundColor = Value<typeof MENU_ITEM_BACKGROUND_COLORS>;
+
+export const MENU_ITEM_ACCESSORY_STATES = {
+	DOT: 'dot',
+	// not implemented for now
+	// EXPANDED: 'expanded',
+	// COLLAPSED: 'collapsed',
+};
+
+export type MenuItemAccessoryState = Value<typeof MENU_ITEM_ACCESSORY_STATES>;
+
+export const MENU_ITEM_LEVEL_INJECTION_KEY: InjectionKey<number> = Symbol('menuItemLevel');