@bethinkpl/design-system 30.3.2 → 30.4.1

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

@@ -194,6 +194,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MEMO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -832,6 +833,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
+            readonly FA_MEMO: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1367,6 +1369,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
+            readonly FA_MEMO: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;

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

@@ -213,6 +213,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MEMO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -805,6 +806,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
+            readonly FA_MEMO: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1513,6 +1515,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
+            readonly FA_MEMO: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;

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

@@ -213,6 +213,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MEMO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;

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

@@ -173,6 +173,7 @@ export declare const data: () => {
         readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MEMO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;

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

@@ -229,6 +229,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MEMO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;

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

@@ -1,4 +1,14 @@
 declare const _default: {
+    "ds.statsLayout.default.leftColumnLabel": string;
+    "ds.statsLayout.default.rightColumnLabel": string;
+    "ds.statsLayout.filtersDropdown.title": string;
+    "ds.statsLayout.sectionHeader.title": string;
+    "ds.statsLayout.statsErrorBanner.buttonText": string;
+    "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;
     "ds.accessStatus.status.awaiting": string;
@@ -7,5 +17,6 @@ declare const _default: {
     "ds.accessStatus.status.suspended": string;
     "ds.globals.back": string;
     "ds.globals.confirmation": string;
+    "ds.globals.loading": string;
 };
 export default _default;

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

@@ -4,6 +4,16 @@ import { default as pl } from './pl';
 export type MessageSchema = typeof pl;
 export declare const messages: {
     pl: {
+        "ds.statsLayout.default.leftColumnLabel": string;
+        "ds.statsLayout.default.rightColumnLabel": string;
+        "ds.statsLayout.filtersDropdown.title": string;
+        "ds.statsLayout.sectionHeader.title": string;
+        "ds.statsLayout.statsErrorBanner.buttonText": string;
+        "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;
         "ds.accessStatus.status.awaiting": string;
@@ -12,8 +22,19 @@ export declare const messages: {
         "ds.accessStatus.status.suspended": string;
         "ds.globals.back": string;
         "ds.globals.confirmation": string;
+        "ds.globals.loading": string;
     };
     en: {
+        "ds.statsLayout.default.leftColumnLabel": string;
+        "ds.statsLayout.default.rightColumnLabel": string;
+        "ds.statsLayout.filtersDropdown.title": string;
+        "ds.statsLayout.sectionHeader.title": string;
+        "ds.statsLayout.statsErrorBanner.buttonText": string;
+        "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;
         "ds.accessStatus.status.awaiting": string;
@@ -22,6 +43,7 @@ export declare const messages: {
         "ds.accessStatus.status.suspended": string;
         "ds.globals.back": string;
         "ds.globals.confirmation": string;
+        "ds.globals.loading": string;
     };
 };
 export type ValidI18nKey = keyof MessageSchema;

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

@@ -1,4 +1,14 @@
 declare const _default: {
+    "ds.statsLayout.default.leftColumnLabel": string;
+    "ds.statsLayout.default.rightColumnLabel": string;
+    "ds.statsLayout.filtersDropdown.title": string;
+    "ds.statsLayout.sectionHeader.title": string;
+    "ds.statsLayout.statsErrorBanner.buttonText": string;
+    "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;
     "ds.accessStatus.status.awaiting": string;
@@ -7,5 +17,6 @@ declare const _default: {
     "ds.accessStatus.status.suspended": string;
     "ds.globals.back": string;
     "ds.globals.confirmation": string;
+    "ds.globals.loading": string;
 };
 export default _default;

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

@@ -160,6 +160,7 @@ export declare const FONTAWESOME_ICONS: {
     readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
+    readonly FA_MEMO: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;

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

@@ -179,6 +179,9 @@ export * from './components/Tooltip/Tooltip.consts';
 export { default as DsImage } from './components/Image';
 export * from './components/Skeleton/Skeleton.consts';
 export { default as DsSkeleton } from './components/Skeleton/Skeleton.vue';
+export { default as DsStatsLayout } from './components/StatsLayout/StatsLayout.vue';
+export { default as DsStatsResetBanner } from './components/StatsLayout/StatsResetBanner/StatsResetBanner.vue';
+export { default as DsStatsSectionHeader } from './components/StatsLayout/StatsSectionHeader/StatsSectionHeader.vue';
 export { initializePrimeVue } from './primevue';
 export { initialize as initializeIcons, initializeWithDomWatcher as initializeIconsWithDomWatcher, } from './icons/fontawesome';
 export type { IconDefinition } from './icons/fontawesome';

package/lib/js/components/Buttons/HelpButton/HelpButton.vue

@@ -3,7 +3,7 @@
 		<icon-button
 			:icon="ICONS.FA_CIRCLE_QUESTION"
 			:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
-			:size="ICON_BUTTON_SIZES.X_SMALL"
+			:size="size"
 			:state="isDisabled ? ICON_BUTTON_STATES.DISABLED : ICON_BUTTON_STATES.DEFAULT"
 			:touchable="false"
 			v-bind="$attrs"
@@ -11,7 +11,13 @@
 		/>
 	</tooltip>
 	<slot v-if="isOpen" name="modal" :on-close="onClose">
-		<modal :header-title="modalTitle" :size="modalSize" @close-modal="onClose">
+		<modal
+			:header-title="modalTitle"
+			:size="modalSize"
+			:footer-primary-button-text="t('ds.globals.confirmation')"
+			@close-modal="onClose"
+			@primary-button-click="onClose"
+		>
 			<slot name="modalContent" />
 		</modal>
 	</slot>
@@ -23,16 +29,27 @@ import IconButton, {
 	ICON_BUTTON_COLORS,
 	ICON_BUTTON_SIZES,
 	ICON_BUTTON_STATES,
+	IconButtonSize,
 } from '../IconButton';
 import Tooltip from '../../Tooltip';
 import { ICONS } from '../../Icons/Icon';
 import Modal, { ModalSize } from '../../Modals/Modal';
+import { useLegacyI18n } from '../../../composables/useLegacyI18n';
 
-defineProps<{
+const { t } = useLegacyI18n();
+
+const {
+	tooltipText,
+	isDisabled,
+	modalTitle,
+	modalSize,
+	size = ICON_BUTTON_SIZES.X_SMALL,
+} = defineProps<{
 	tooltipText?: string;
 	isDisabled?: boolean;
 	modalTitle?: string;
 	modalSize?: ModalSize;
+	size?: IconButtonSize;
 }>();
 
 defineSlots<{

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

@@ -0,0 +1,42 @@
+import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
+import SpinnerLoading from './SpinnerLoading.vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+type SpinnerLoadingProps = ComponentProps<typeof SpinnerLoading>;
+
+const meta: Meta<SpinnerLoadingProps> = {
+	title: 'Components/SpinnerLoading',
+	component: SpinnerLoading,
+	render: (args) => {
+		return {
+			components: { SpinnerLoading },
+			setup() {
+				return {
+					args,
+				};
+			},
+			template: '<spinner-loading v-bind="args" />',
+		};
+	},
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/design/WeJCbVlnkL9HmEcoBpu5NU/LMS---Specific-Components---Limbo?node-id=108-7632&m=dev',
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj<SpinnerLoadingProps>;
+
+export const Interactive: Story = {
+	args: {
+		message: '',
+	} as Args,
+};
+
+Interactive.argTypes = {
+	message: {
+		control: 'text',
+	},
+} as ArgTypes;

package/lib/js/components/SpinnerLoading/SpinnerLoading.vue

@@ -0,0 +1,33 @@
+<template>
+	<div class="ds-spinnerLoading">
+		<ds-icon :icon="ICONS.FAD_SPINNER_THIRD" :size="ICON_SIZES.SMALL" spinning />
+		<div>{{ message || t('ds.globals.loading') }}</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../styles/settings/typography/tokens';
+@import '../../../styles/settings/colors/tokens';
+@import '../../../styles/settings/spacings';
+
+.ds-spinnerLoading {
+	@include text-m-default-regular();
+
+	align-items: center;
+	color: $color-neutral-text;
+	display: inline-flex;
+	gap: $space-2xs;
+}
+</style>
+
+<script setup lang="ts">
+import { ICON_SIZES, ICONS } from '../Icons/Icon/Icon.consts';
+import DsIcon from '../Icons/Icon/Icon.vue';
+import { useLegacyI18n } from '../../composables/useLegacyI18n';
+
+const { t } = useLegacyI18n();
+
+const { message } = defineProps<{
+	message?: string;
+}>();
+</script>

package/lib/js/components/StatsLayout/StatsErrorBanner/StatsErrorBanner.stories.ts

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import StatsErrorBanner from './StatsErrorBanner.vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+type StatsErrorBannerProps = ComponentProps<typeof StatsErrorBanner>;
+
+const meta: Meta<StatsErrorBannerProps> = {
+	title: 'Components/StatsLayout/StatsErrorBanner',
+	component: StatsErrorBanner,
+	render: (args) => {
+		return {
+			components: { StatsErrorBanner },
+			setup() {
+				return {
+					args,
+				};
+			},
+			template: '<stats-error-banner v-bind="args"></stats-error-banner>',
+		};
+	},
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=14870-10790&m=dev',
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj<StatsErrorBannerProps>;
+
+export const Interactive: Story = {};

package/lib/js/components/StatsLayout/StatsErrorBanner/StatsErrorBanner.vue

@@ -0,0 +1,24 @@
+<template>
+	<ds-banner
+		:title="t('ds.statsLayout.statsErrorBanner.title')"
+		:button-text="t('ds.statsLayout.statsErrorBanner.buttonText')"
+		:icon="ICONS.FA_CIRCLE_EXCLAMATION"
+		:color="BANNER_COLORS.DANGER"
+		@button-clicked="$emit('button-clicked')"
+	>
+		<template #defaultText> {{ t('ds.statsLayout.statsErrorBanner.message') }} </template>
+	</ds-banner>
+</template>
+
+<script setup lang="ts">
+import { ICONS } from '../../Icons/Icon';
+import { BANNER_COLORS } from '../../Banner/Banner.consts';
+import DsBanner from '../../Banner/Banner.vue';
+import { useLegacyI18n } from '../../../composables/useLegacyI18n';
+
+const { t } = useLegacyI18n();
+
+defineEmits<{
+	(e: 'button-clicked'): void;
+}>();
+</script>

package/lib/js/components/StatsLayout/StatsFiltersDropdown/StatsFiltersDropdown.stories.ts

@@ -0,0 +1,50 @@
+import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
+import StatsFiltersDropdown from './StatsFiltersDropdown.vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+type StatsFiltersDropdownProps = ComponentProps<typeof StatsFiltersDropdown>;
+
+const meta: Meta<StatsFiltersDropdownProps> = {
+	title: 'Components/StatsLayout/StatsFiltersDropdown',
+	component: StatsFiltersDropdown,
+	render: (args) => {
+		return {
+			components: { StatsFiltersDropdown },
+			setup() {
+				return {
+					args,
+				};
+			},
+			template: '<stats-filters-dropdown v-bind="args"></stats-filters-dropdown>',
+		};
+	},
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=14870-10787&m=dev',
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj<StatsFiltersDropdownProps>;
+
+export const Interactive: Story = {
+	args: {
+		filterItems: [
+			{ key: 'all', label: 'All' },
+			{ key: 'active', label: 'Active' },
+			{ key: 'inactive', label: 'Inactive' },
+		],
+		selectedFilterKey: 'all',
+	} as Args,
+};
+
+Interactive.argTypes = {
+	filterItems: {
+		control: 'object',
+	},
+	selectedFilterKey: {
+		control: 'text',
+	},
+} as ArgTypes;

package/lib/js/components/StatsLayout/StatsFiltersDropdown/StatsFiltersDropdown.vue

@@ -0,0 +1,55 @@
+<template>
+	<ds-dropdown :placement="DROPDOWN_PLACEMENTS.BOTTOM_END">
+		<template #reference="{ isOpened }">
+			<ds-button
+				:icon-left="ICONS.FA_CHART_COLUMN"
+				:icon-right="isOpened ? ICONS.FA_ANGLE_UP : ICONS.FA_ANGLE_DOWN"
+				:type="BUTTON_TYPES.TEXT"
+				>{{ t('ds.statsLayout.filtersDropdown.title') }}</ds-button
+			>
+		</template>
+		<template #default="{ close }">
+			<ds-select-list>
+				<ds-select-list-item
+					v-for="filterItem in filterItems"
+					:key="filterItem.key"
+					:label="filterItem.label"
+					:is-selected="filterItem.key === selectedFilterKey"
+					@click="select(filterItem, close)"
+				/>
+			</ds-select-list>
+		</template>
+	</ds-dropdown>
+</template>
+
+<script setup lang="ts">
+import DsButton from '../../Buttons/Button';
+import { ICONS } from '../../Icons/Icon/Icon.consts';
+import DsDropdown from '../../Dropdown/Dropdown.vue';
+import DsSelectList from '../../SelectList/SelectList.vue';
+import DsSelectListItem from '../../SelectList/SelectListItem/SelectListItem.vue';
+import { BUTTON_TYPES } from '../../Buttons/Button/Button.consts';
+import { DROPDOWN_PLACEMENTS } from '../../Dropdown/Dropdown.consts';
+import { useLegacyI18n } from '../../../composables/useLegacyI18n';
+
+interface FilterItem {
+	key: string;
+	label: string;
+}
+
+export interface StatsFiltersDropdownProps {
+	filterItems?: Array<FilterItem>;
+	selectedFilterKey?: string | null;
+}
+
+const { filterItems = [], selectedFilterKey = null } = defineProps<StatsFiltersDropdownProps>();
+
+const emit = defineEmits<{ select: [key: string] }>();
+
+const { t } = useLegacyI18n();
+
+const select = (filterItem: FilterItem, close: () => void) => {
+	emit('select', filterItem.key);
+	close();
+};
+</script>

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

@@ -0,0 +1,169 @@
+import { describe, expect, it } from 'vitest';
+import { ComponentMountingOptions, mount } from '@vue/test-utils';
+import { h } from 'vue';
+
+import StatsLayout from './StatsLayout.vue';
+
+describe('StatsLayout', () => {
+	const createComponent = (options: ComponentMountingOptions<typeof StatsLayout> = {}) => {
+		return mount(StatsLayout, options);
+	};
+
+	it('should create', () => {
+		const component = createComponent();
+
+		expect(component.exists()).toBe(true);
+	});
+
+	it('should render main layout class', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-statsLayout').exists()).toBe(true);
+	});
+
+	describe('slots', () => {
+		it('should render dynamic statsItem slots', () => {
+			const component = createComponent({
+				slots: {
+					'statsItem-0': () => [h('div', { class: 'test-item-0' }, 'Item 0')],
+					'statsItem-1': () => [h('div', { class: 'test-item-1' }, 'Item 1')],
+					'statsItem-2': () => [h('div', { class: 'test-item-2' }, 'Item 2')],
+				},
+			});
+
+			expect(component.find('.test-item-0').exists()).toBe(true);
+			expect(component.find('.test-item-1').exists()).toBe(true);
+			expect(component.find('.test-item-2').exists()).toBe(true);
+		});
+
+		it('should render dividers between statsItems', () => {
+			const component = createComponent({
+				slots: {
+					'statsItem-0': () => [h('div', 'Item 0')],
+					'statsItem-1': () => [h('div', 'Item 1')],
+				},
+			});
+
+			const dividers = component.findAll('.ds-statsLayout__statsDivider');
+			expect(dividers.length).toBe(2);
+		});
+	});
+
+	describe('props', () => {
+		describe('hasGridHeader', () => {
+			it('should render grid headers by default', () => {
+				const component = createComponent();
+
+				const gridHeaders = component.findAll('.ds-statsLayout__gridHeader');
+				expect(gridHeaders.length).toBe(2);
+			});
+
+			it('should not render grid headers when hasGridHeader is false', () => {
+				const component = createComponent({
+					props: {
+						hasGridHeader: false,
+					},
+				});
+
+				const gridHeaders = component.findAll('.ds-statsLayout__gridHeader');
+				expect(gridHeaders.length).toBe(0);
+			});
+		});
+
+		describe('hasRightColumn', () => {
+			it('should render right column by default', () => {
+				const component = createComponent();
+
+				const rightColumns = component.findAll('.ds-statsLayout__gridHeaderRightColumn');
+				expect(rightColumns.length).toBeGreaterThan(0);
+			});
+
+			it('should not render right column when hasRightColumn is false', () => {
+				const component = createComponent({
+					props: {
+						hasRightColumn: false,
+					},
+				});
+
+				const rightColumns = component.findAll('.ds-statsLayout__gridHeaderRightColumn');
+				expect(rightColumns.length).toBe(0);
+			});
+		});
+
+		describe('isLoading', () => {
+			it('should not show loading state by default', () => {
+				const component = createComponent();
+
+				expect(component.find('.ds-statsLayout__loading').exists()).toBe(false);
+			});
+
+			it('should show loading state when isLoading is true', () => {
+				const component = createComponent({
+					props: {
+						isLoading: true,
+					},
+				});
+
+				expect(component.find('.ds-statsLayout__loading').exists()).toBe(true);
+			});
+
+			it('should hide content when loading', () => {
+				const component = createComponent({
+					props: {
+						isLoading: true,
+					},
+					slots: {
+						overallStatsItem: () => [h('div', { class: 'test-content' }, 'Content')],
+					},
+				});
+
+				expect(component.find('.ds-statsLayout__content').exists()).toBe(false);
+				expect(component.find('.test-content').exists()).toBe(false);
+			});
+		});
+
+		describe('hasError', () => {
+			it('should not show error state by default', () => {
+				const component = createComponent();
+
+				expect(component.find('.ds-statsLayout__error').exists()).toBe(false);
+			});
+
+			it('should show error state when hasError is true', () => {
+				const component = createComponent({
+					props: {
+						hasError: true,
+					},
+				});
+
+				expect(component.find('.ds-statsLayout__error').exists()).toBe(true);
+			});
+
+			it('should hide content when error', () => {
+				const component = createComponent({
+					props: {
+						hasError: true,
+					},
+					slots: {
+						overallStatsItem: () => [h('div', { class: 'test-content' }, 'Content')],
+					},
+				});
+
+				expect(component.find('.ds-statsLayout__content').exists()).toBe(false);
+				expect(component.find('.test-content').exists()).toBe(false);
+			});
+
+			it('should prioritize loading over error', () => {
+				const component = createComponent({
+					props: {
+						isLoading: true,
+						hasError: true,
+					},
+				});
+
+				expect(component.find('.ds-statsLayout__loading').exists()).toBe(true);
+				expect(component.find('.ds-statsLayout__error').exists()).toBe(false);
+			});
+		});
+	});
+});