@bethinkpl/design-system 30.3.2 → 30.4.1

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>`,
+		};
+	},
+};

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

@@ -0,0 +1,173 @@
+<template>
+	<div class="ds-statsLayout">
+		<slot name="sectionHeader" />
+
+		<ds-card>
+			<template #content>
+				<div v-if="isLoading" class="ds-statsLayout__loading">
+					<ds-spinner-loading />
+				</div>
+				<div v-else-if="hasError" class="ds-statsLayout__error">
+					<ds-stats-error-banner @button-clicked="$emit('retryClicked')" />
+				</div>
+				<div v-else class="ds-statsLayout__content">
+					<div class="ds-statsLayout__wrapper">
+						<div class="ds-statsLayout__summary">
+							<div v-if="hasGridHeader" class="ds-statsLayout__gridHeader">
+								<div class="ds-statsLayout__gridHeaderLeftColumn">{{
+									leftColumnLabel || t('ds.statsLayout.default.leftColumnLabel')
+								}}</div>
+								<div
+									v-if="hasRightColumn"
+									class="ds-statsLayout__gridHeaderRightColumn"
+								>
+									{{
+										rightColumnLabel ||
+										t('ds.statsLayout.default.rightColumnLabel')
+									}}
+								</div>
+							</div>
+							<div class="ds-statsLayout__overallStats">
+								<slot name="overallStatsItem" />
+							</div>
+						</div>
+
+						<div class="ds-statsLayout__stats">
+							<div v-if="hasGridHeader" class="ds-statsLayout__gridHeader">
+								<div class="ds-statsLayout__gridHeaderLeftColumn">
+									{{ statsItemsHeaderLabel }}
+								</div>
+							</div>
+
+							<div class="ds-statsLayout__statsList">
+								<template v-for="slotName in statsItems" :key="slotName">
+									<slot :name="slotName" />
+									<ds-divider class="ds-statsLayout__statsDivider" />
+								</template>
+							</div>
+						</div>
+					</div>
+
+					<slot name="resetBanner" />
+				</div>
+			</template>
+		</ds-card>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../styles/settings/spacings';
+@import '../../../styles/settings/colors/tokens';
+@import '../../../styles/settings/typography/tokens';
+
+$right-column-width: 96px;
+
+.ds-statsLayout {
+	display: flex;
+	flex-direction: column;
+	gap: $space-xs;
+
+	&__content,
+	&__summary,
+	&__stats {
+		display: flex;
+		flex-direction: column;
+		gap: $space-s;
+	}
+
+	&__wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: $space-l;
+	}
+
+	&__gridHeader {
+		@include label-m-extensive-bold-uppercase();
+
+		background: $color-neutral-background;
+		color: $color-neutral-text;
+		display: flex;
+	}
+
+	&__gridHeaderLeftColumn,
+	&__gridHeaderRightColumn {
+		align-items: center;
+		display: flex;
+	}
+
+	&__gridHeaderLeftColumn {
+		flex: 1 0 0;
+		padding: $space-2xs;
+	}
+
+	&__gridHeaderRightColumn {
+		justify-content: flex-end;
+		padding: $space-2xs;
+	}
+
+	&__overallStats,
+	&__statsList {
+		display: grid;
+		grid-template-columns: 1fr auto;
+	}
+
+	&__statsList {
+		row-gap: $space-s;
+	}
+
+	&__statsDivider {
+		grid-column: 1 / -1;
+		grid-row: auto;
+	}
+
+	&__loading {
+		align-items: center;
+		display: flex;
+		justify-content: center;
+	}
+}
+</style>
+
+<script setup lang="ts">
+import DsCard from '../Cards/Card/Card.vue';
+import DsDivider from '../Divider/Divider.vue';
+import DsStatsErrorBanner from './StatsErrorBanner/StatsErrorBanner.vue';
+import DsSpinnerLoading from '../SpinnerLoading/SpinnerLoading.vue';
+import { computed } from 'vue';
+import { useLegacyI18n } from '../../composables/useLegacyI18n';
+
+const { t } = useLegacyI18n();
+
+interface StatsLayoutProps {
+	hasGridHeader?: boolean;
+	hasRightColumn?: boolean;
+	leftColumnLabel?: string;
+	rightColumnLabel?: string;
+	statsItemsHeaderLabel?: string;
+	isLoading?: boolean;
+	hasError?: boolean;
+}
+
+const {
+	hasGridHeader = true,
+	hasRightColumn = true,
+	leftColumnLabel = null,
+	rightColumnLabel = null,
+	statsItemsHeaderLabel = null,
+	isLoading = false,
+	hasError = false,
+} = defineProps<StatsLayoutProps>();
+
+const slots = defineSlots<{
+	sectionHeader?: () => any;
+	overallStatsItem?: () => any;
+	[key: `statsItem-${number}`]: (() => any) | undefined;
+	resetBanner?: () => any;
+}>();
+
+const statsItems = computed(() => Object.keys(slots).filter((key) => key.startsWith('statsItem-')));
+
+defineEmits<{
+	(e: 'retryClicked'): void;
+}>();
+</script>

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

@@ -0,0 +1,48 @@
+import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
+import StatsResetBanner from './StatsResetBanner.vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import Modal from '../../Modals/Modal/Modal.vue';
+
+type StatsResetBannerProps = ComponentProps<typeof StatsResetBanner>;
+
+const meta: Meta<StatsResetBannerProps> = {
+	title: 'Components/StatsLayout/StatsResetBanner',
+	component: StatsResetBanner,
+	render: (args) => {
+		return {
+			components: { StatsResetBanner, Modal },
+			setup() {
+				return {
+					args,
+				};
+			},
+			template:
+				'<stats-reset-banner v-bind="args"><template #infoModalContent>Default content</template><template #resetModal="{onClose}"><modal @close-modal="onClose">Modal content</modal></template></stats-reset-banner>',
+		};
+	},
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=14870-10680&m=dev',
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj<StatsResetBannerProps>;
+
+export const Interactive: Story = {
+	args: {
+		timeMarker: '2 czerwca 2025',
+		infoModalTitle: 'Info modal title',
+	} as Args,
+};
+
+Interactive.argTypes = {
+	timeMarker: {
+		control: 'text',
+	},
+	infoModalTitle: {
+		control: 'text',
+	},
+} as ArgTypes;

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

@@ -0,0 +1,51 @@
+<template>
+	<ds-banner
+		:title="t('ds.statsLayout.statsResetBanner.title')"
+		:button-text="t('ds.statsLayout.statsResetBanner.buttonText')"
+		:color="BANNER_COLORS.NEUTRAL"
+		@button-clicked="isOpen = true"
+	>
+		<template #defaultText>
+			<span
+				>{{ t('ds.statsLayout.statsResetBanner.message') }}
+				<strong>{{ props.timeMarker }}</strong></span
+			>
+		</template>
+		<template v-if="$slots.infoModalContent" #rightSlot>
+			<ds-help-button :size="ICON_BUTTON_SIZES.SMALL" :modal-title="infoModalTitle">
+				<template #modalContent>
+					<slot name="infoModalContent" />
+				</template>
+			</ds-help-button>
+		</template>
+	</ds-banner>
+
+	<slot v-if="isOpen" name="resetModal" :on-close="onClose" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { BANNER_COLORS } from '../../Banner/Banner.consts';
+import DsBanner from '../../Banner/Banner.vue';
+import DsHelpButton from '../../Buttons/HelpButton/HelpButton.vue';
+import { useLegacyI18n } from '../../../composables/useLegacyI18n';
+import { ICON_BUTTON_SIZES } from '../../Buttons/IconButton';
+
+const { t } = useLegacyI18n();
+
+const props = defineProps<{
+	timeMarker: string;
+	infoModalTitle?: string;
+}>();
+
+defineSlots<{
+	infoModalContent?: () => any;
+	resetModal?: (props: { onClose: () => void }) => any;
+}>();
+
+const isOpen = ref(false);
+
+const onClose = () => {
+	isOpen.value = false;
+};
+</script>

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

@@ -0,0 +1,68 @@
+import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
+import StatsSectionHeader from './StatsSectionHeader.vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import { useArgs } from '@storybook/preview-api';
+
+type StatsSectionHeaderProps = ComponentProps<typeof StatsSectionHeader>;
+
+const meta: Meta<StatsSectionHeaderProps> = {
+	title: 'Components/StatsLayout/StatsSectionHeader',
+	component: StatsSectionHeader,
+	render: (args) => {
+		const [_, updateArgs] = useArgs();
+		return {
+			components: { StatsSectionHeader },
+			setup() {
+				return {
+					args,
+				};
+			},
+			methods: {
+				selectFilter(filterKey: string) {
+					updateArgs({
+						selectedFilterKey: filterKey,
+					});
+				},
+			},
+			template: `<stats-section-header v-bind="args" @select-filter="selectFilter"><template #infoModalContent><p>Info content</p></template></stats-section-header>`,
+		};
+	},
+	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<StatsSectionHeaderProps>;
+
+export const Interactive: Story = {
+	args: {
+		filterItems: [
+			{
+				key: 'all',
+				label: 'Wszystkie',
+			},
+			{
+				key: 'today',
+				label: 'Dzisiaj',
+			},
+			{
+				key: 'yesterday',
+				label: 'Wczoraj',
+			},
+		],
+		selectedFilterKey: 'all',
+	} as Args,
+};
+
+Interactive.argTypes = {
+	filterItems: {
+		control: 'object',
+	},
+	selectedFilterKey: {
+		control: 'text',
+	},
+} as ArgTypes;

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

@@ -0,0 +1,72 @@
+<template>
+	<ds-section-header
+		:title="t('ds.statsLayout.sectionHeader.title')"
+		:icon-left="ICONS.FA_CHART_COLUMN"
+		:has-divider="false"
+		:info="!!$slots.infoModalContent"
+		:mobile-layout="SECTION_HEADER_MOBILE_LAYOUTS.HORIZONTAL"
+		@info-click="infoContentModalVisible = true"
+	>
+		<template v-if="filterItems && filterItems.length > 0" #default>
+			<slot name="accessory">
+				<ds-stats-filters-dropdown
+					:filter-items="filterItems"
+					:selected-filter-key="selectedFilterKey"
+					@select="selectFilter"
+				/>
+			</slot>
+		</template>
+	</ds-section-header>
+
+	<ds-modal
+		v-if="infoContentModalVisible && !!$slots.infoModalContent"
+		:header-title="infoModalTitle"
+		@close-modal="infoContentModalVisible = false"
+	>
+		<template #default>
+			<slot name="infoModalContent" />
+		</template>
+	</ds-modal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import DsSectionHeader from '../../Headers/SectionHeader/SectionHeader.vue';
+import DsStatsFiltersDropdown from '../StatsFiltersDropdown/StatsFiltersDropdown.vue';
+import { SECTION_HEADER_MOBILE_LAYOUTS } from '../../Headers/SectionHeader/SectionHeader.consts';
+import { ICONS } from '../../Icons/Icon/Icon.consts';
+import DsModal from '../../Modals/Modal/Modal.vue';
+import { useLegacyI18n } from '../../../composables/useLegacyI18n';
+
+interface FilterItem {
+	key: string;
+	label: string;
+}
+
+const {
+	filterItems = [],
+	selectedFilterKey = null,
+	infoModalTitle,
+} = defineProps<{
+	filterItems?: Array<FilterItem>;
+	selectedFilterKey?: string | null;
+	infoModalTitle?: string;
+}>();
+
+defineSlots<{
+	accessory?: string;
+	infoModalContent?: string;
+}>();
+
+const emit = defineEmits<{
+	'select-filter': [filterKey: string];
+}>();
+
+const infoContentModalVisible = ref(false);
+
+const selectFilter = (filterKey: string) => {
+	emit('select-filter', filterKey);
+};
+
+const { t } = useLegacyI18n();
+</script>

package/lib/js/i18n/en/globals.json

@@ -1,4 +1,5 @@
 {
 	"ds.globals.back": "Back",
-	"ds.globals.confirmation": "OK, I understand"
+	"ds.globals.confirmation": "OK, I understand",
+	"ds.globals.loading": "Loading..."
 }

package/lib/js/i18n/en/statsLayout.json

@@ -0,0 +1,12 @@
+{
+	"ds.statsLayout.default.leftColumnLabel": "Range",
+	"ds.statsLayout.default.rightColumnLabel": "Results",
+	"ds.statsLayout.filtersDropdown.title": "Filter",
+	"ds.statsLayout.sectionHeader.title": "Your statistics",
+	"ds.statsLayout.statsErrorBanner.buttonText": "Try again",
+	"ds.statsLayout.statsErrorBanner.message": "Refresh the page to try again",
+	"ds.statsLayout.statsErrorBanner.title": "Failed to load statistics",
+	"ds.statsLayout.statsResetBanner.buttonText": "RESET STATISTICS",
+	"ds.statsLayout.statsResetBanner.message": "Statistics counted from",
+	"ds.statsLayout.statsResetBanner.title": "Reset statistics"
+}

package/lib/js/i18n/en.ts

@@ -1,9 +1,11 @@
 import globals from './en/globals.json';
 import accessStatus from './en/accessStatus.json';
 import pagination from './en/pagination.json';
+import statsLayout from './en/statsLayout.json';
 
 export default {
 	...globals,
 	...accessStatus,
 	...pagination,
+	...statsLayout,
 };

package/lib/js/i18n/pl/globals.json

@@ -1,4 +1,5 @@
 {
 	"ds.globals.back": "Wróć",
-	"ds.globals.confirmation": "OK, rozumiem"
+	"ds.globals.confirmation": "OK, rozumiem",
+	"ds.globals.loading": "Momencik, ładuję dane..."
 }

package/lib/js/i18n/pl/statsLayout.json

@@ -0,0 +1,12 @@
+{
+	"ds.statsLayout.default.leftColumnLabel": "Zakres",
+	"ds.statsLayout.default.rightColumnLabel": "Wyniki",
+	"ds.statsLayout.filtersDropdown.title": "Filtruj",
+	"ds.statsLayout.sectionHeader.title": "Twoje statystyki",
+	"ds.statsLayout.statsErrorBanner.buttonText": "Spróbuj ponownie",
+	"ds.statsLayout.statsErrorBanner.message": "Odśwież stronę, aby spróbować ponownie",
+	"ds.statsLayout.statsErrorBanner.title": "Nie udało się załadować statystyk",
+	"ds.statsLayout.statsResetBanner.buttonText": "Resetuj statystyki",
+	"ds.statsLayout.statsResetBanner.message": "Statystyki liczone od",
+	"ds.statsLayout.statsResetBanner.title": "Reset statystyk"
+}

package/lib/js/i18n/pl.ts

@@ -1,9 +1,11 @@
 import globals from './pl/globals.json';
 import accessStatus from './pl/accessStatus.json';
 import pagination from './pl/pagination.json';
+import statsLayout from './pl/statsLayout.json';
 
 export default {
 	...globals,
 	...accessStatus,
 	...pagination,
+	...statsLayout,
 };

package/lib/js/icons/fontawesome.ts

@@ -118,6 +118,7 @@ import { faLocationDot } from '@fortawesome/pro-regular-svg-icons/faLocationDot'
 import { faLockKeyhole } from '@fortawesome/pro-regular-svg-icons/faLockKeyhole';
 import { faMagnifyingGlass } from '@fortawesome/pro-regular-svg-icons/faMagnifyingGlass';
 import { faMedal } from '@fortawesome/pro-regular-svg-icons/faMedal';
+import { faMemo } from '@fortawesome/pro-regular-svg-icons/faMemo';
 import { faMemoCircleInfo } from '@fortawesome/pro-regular-svg-icons/faMemoCircleInfo';
 import { faMinus } from '@fortawesome/pro-regular-svg-icons/faMinus';
 import { faMobileRotate } from '@fortawesome/pro-regular-svg-icons/faMobileRotate';
@@ -404,6 +405,7 @@ export const FONTAWESOME_ICONS = {
 	FA_LOCK_KEYHOLE: faLockKeyhole,
 	FA_MAGNIFYING_GLASS: faMagnifyingGlass,
 	FA_MEDAL: faMedal,
+	FA_MEMO: faMemo,
 	FA_MEMO_CIRCLE_INFO_SOLID: fasMemoCircleInfo,
 	FA_MEMO_CIRCLE_INFO: faMemoCircleInfo,
 	FA_MESSAGE_QUESTION_SOLID: fasMessageQuestion,

package/lib/js/index.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';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "30.3.2",
+  "version": "30.4.1",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",