@bethinkpl/design-system 30.3.2 → 30.4.2

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);
+			});
+		});
+	});
+});

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

@@ -0,0 +1,156 @@
+import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
+import StatsLayout from './StatsLayout.vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import StatsSectionHeader from './StatsSectionHeader/StatsSectionHeader.vue';
+import StatsResetBanner from './StatsResetBanner/StatsResetBanner.vue';
+import SlotPlaceholder from '../../../../.storybook/SlotPlaceholder/SlotPlaceholder.vue';
+
+type StatsLayoutProps = ComponentProps<typeof StatsLayout>;
+
+const prepareItemsTemplate = (
+	itemsCount: number = 5,
+	itemTemplate: string = '<slot-placeholder/>',
+) => {
+	return Array.from({ length: itemsCount }, (_, index) => {
+		return `<template v-slot:["statsItem-${index}"]>${itemTemplate}</template>`;
+	}).join('');
+};
+
+const meta: Meta<StatsLayoutProps> = {
+	title: 'Components/StatsLayout/StatsLayout',
+	component: StatsLayout,
+	render: (args) => {
+		return {
+			components: { StatsLayout, SlotPlaceholder },
+			setup() {
+				return { args };
+			},
+			template: `
+		<stats-layout v-bind="args">
+			<template #sectionHeader>
+			   <slot-placeholder label="Slot nagłówka sekcji" />
+			</template>
+			<template #overallStatsItem><slot-placeholder /></template>
+			<template #resetBanner>
+			   <slot-placeholder label="Slot banera resetu" />
+			</template>
+			${prepareItemsTemplate()}
+		</stats-layout>
+		`,
+		};
+	},
+	args: {
+		hasGridHeader: true,
+		hasRightColumn: true,
+		leftColumnLabel: 'Zakres',
+		rightColumnLabel: 'Wyniki',
+		statsItemsHeaderLabel: '{Nazwa użytej taksonomii}',
+		isLoading: false,
+		hasError: false,
+	} as Args,
+	argTypes: {
+		hasGridHeader: {
+			control: 'boolean',
+		},
+		hasRightColumn: {
+			control: 'boolean',
+		},
+		leftColumnLabel: {
+			control: 'text',
+		},
+		rightColumnLabel: {
+			control: 'text',
+		},
+		statsItemsHeaderLabel: {
+			control: 'text',
+		},
+		isLoading: {
+			control: 'boolean',
+		},
+		hasError: {
+			control: 'boolean',
+		},
+	} as ArgTypes,
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=14877-39964&m=dev',
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj<StatsLayoutProps>;
+
+export const Raw: Story = {};
+
+export const WithHeaders: Story = {
+	render: (args) => {
+		return {
+			components: { StatsLayout, StatsSectionHeader, StatsResetBanner, SlotPlaceholder },
+			setup() {
+				return {
+					args,
+					filterItems: [
+						{ key: 'all', label: 'Wszystkie' },
+						{ key: 'week', label: 'Tydzień' },
+						{ key: 'month', label: 'Miesiąc' },
+					],
+				};
+			},
+			template: `
+			<stats-layout v-bind="args">
+				<template #sectionHeader>
+					<stats-section-header :filter-items="filterItems" selected-filter-key="all">
+						<template #infoModalContent><span>Info content for filter</span></template>
+					</stats-section-header>
+				</template>
+				<template #overallStatsItem><slot-placeholder /></template>
+				<template #resetBanner>
+					<stats-reset-banner timeMarker="2 czerwca 2025" infoModalTitle="Info modal title">
+						<template #infoModalContent><p>Info content for reset banner</p></template>
+					</stats-reset-banner>
+				</template>
+				${prepareItemsTemplate()}
+			</stats-layout>
+`,
+		};
+	},
+};
+
+export const MultipleColumns: Story = {
+	render: (args) => {
+		const itemTemplate = `<div><slot-placeholder label="Slot left" /></div><div><slot-placeholder label="Slot" /></div>`;
+
+		return {
+			components: { StatsLayout, StatsSectionHeader, StatsResetBanner, SlotPlaceholder },
+			setup() {
+				return {
+					args,
+					filterItems: [
+						{ key: 'all', label: 'Wszystkie' },
+						{ key: 'week', label: 'Tydzień' },
+						{ key: 'month', label: 'Miesiąc' },
+					],
+				};
+			},
+			template: `
+			<stats-layout v-bind="args">
+				<template #sectionHeader>
+					<stats-section-header :filter-items="filterItems" selected-filter-key="all">
+						<template #infoModalContent><span>Info content for filter</span></template>
+					</stats-section-header>
+				</template>
+				<template #overallStatsItem>
+				${itemTemplate}
+				</template>
+				<template #resetBanner>
+					<stats-reset-banner timeMarker="2 czerwca 2025" infoModalTitle="Info modal title">
+						<template #infoModalContent><p>Info content for reset banner</p></template>
+					</stats-reset-banner>
+				</template>
+				${prepareItemsTemplate(5, itemTemplate)}
+			</stats-layout>`,
+		};
+	},
+};