@bethinkpl/design-system 40.1.0 → 41.0.0

package/lib/js/components/RichList/RichListItem/RichListItem.stories.ts

@@ -12,6 +12,9 @@ import {
 } from './RichListItem.consts';
 import { ICON_COLORS, ICONS } from '../../Icons/Icon';
 import { DsImage } from '../../../index';
+import SlotPlaceholder, {
+	SLOT_PLACEHOLDER_SIZES,
+} from '../../../../../.storybook/SlotPlaceholder/SlotPlaceholder.vue';
 import { useArgs } from '@storybook/preview-api';
 import { withActions } from '@storybook/addon-actions/decorator';
 
@@ -66,6 +69,9 @@ const expandStory = (story: StoryFn<typeof RichListItem>, args = {}) => {
 		content: {
 			control: 'text',
 		},
+		leadingAccessory: {
+			control: 'text',
+		},
 		metadata: {
 			control: 'text',
 		},
@@ -107,6 +113,7 @@ const expandStory = (story: StoryFn<typeof RichListItem>, args = {}) => {
 		draggableIconClassName: 'draggableIconClassName-1',
 
 		content: 'Content Slot',
+		leadingAccessory: '',
 		metadata: 'Metadata Slot',
 		actions: 'ACS',
 
@@ -170,6 +177,9 @@ const InteractiveStoryTemplate: StoryFn<typeof RichListItem> = (args) => {
 				<template v-if="content" #content>
 					<div v-html="content" />
 				</template>
+				<template v-if="leadingAccessory" #leadingAccessory>
+					<div v-html="leadingAccessory" />
+				</template>
 				<template v-if="metadata" #metadata>
 					<div v-html="metadata" />
 				</template>
@@ -183,6 +193,74 @@ const InteractiveStoryTemplate: StoryFn<typeof RichListItem> = (args) => {
 export const Interactive = InteractiveStoryTemplate.bind({});
 expandStory(Interactive);
 
+const PlaceholderSlotsStoryTemplate: StoryFn<typeof RichListItem> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { RichListItem, SlotPlaceholder },
+		setup() {
+			return args;
+		},
+		data() {
+			return {
+				SLOT_PLACEHOLDER_SIZES,
+			};
+		},
+		methods: {
+			updateIsSelected(isSelected) {
+				updateArgs({ isSelected });
+			},
+		},
+		template: `
+			<rich-list-item
+				:size="size"
+				:type="type"
+				:layout="layout"
+				:is-interactive="isInteractive"
+				:is-draggable="isDraggable"
+				:is-dimmed="isDimmed"
+				:border-color="borderColor"
+				:border-color-hex="borderColorHex"
+				:draggable-icon-class-name="draggableIconClassName"
+				:state="state"
+				:background-color="backgroundColor"
+				:elevation="elevation"
+				:has-draggable-handler="hasDraggableHandler"
+				:has-actions-slot-divider="hasActionsSlotDivider"
+				:is-selectable="isSelectable"
+				:is-selected="isSelected"
+				@update:is-selected="updateIsSelected"
+			>
+				<template #media>
+					<slot-placeholder :size="SLOT_PLACEHOLDER_SIZES.SMALL" label="media" />
+				</template>
+				<template #leadingAccessory>
+					<slot-placeholder :size="SLOT_PLACEHOLDER_SIZES.SMALL" label="leadingAccessory" />
+				</template>
+				<template #content>
+					<slot-placeholder :size="SLOT_PLACEHOLDER_SIZES.SMALL" label="content" />
+				</template>
+				<template #metadata>
+					<slot-placeholder :size="SLOT_PLACEHOLDER_SIZES.SMALL" label="metadata" />
+				</template>
+				<template #actions>
+					<slot-placeholder :size="SLOT_PLACEHOLDER_SIZES.SMALL" label="actions" />
+				</template>
+			</rich-list-item>`,
+	};
+};
+
+export const PlaceholderSlots = PlaceholderSlotsStoryTemplate.bind({});
+expandStory(PlaceholderSlots);
+// All slots are provided by the story template, so their controls are not editable.
+PlaceholderSlots.argTypes = {
+	...PlaceholderSlots.argTypes,
+	content: { control: false },
+	leadingAccessory: { control: false },
+	metadata: { control: false },
+	actions: { control: false },
+} as ArgTypes;
+
 const WithMediaStoryTemplate: StoryFn<typeof RichListItem> = (args) => {
 	const [_, updateArgs] = useArgs();
 
@@ -245,3 +323,8 @@ expandStory(WithMedia, {
 	imageSrcUsedInStoryBook:
 		'https://storage.googleapis.com/media-manager/lek/018f6291-3956-7342-8e6b-0ee901d48643/018f6291-3a56-7213-aef6-b5da7253839f.jpg',
 });
+// The media story does not use the leadingAccessory slot, so its control is not editable.
+WithMedia.argTypes = {
+	...WithMedia.argTypes,
+	leadingAccessory: { control: false },
+} as ArgTypes;

package/lib/js/components/RichList/RichListItem/RichListItem.vue

@@ -37,6 +37,9 @@
 					@click.prevent="$emit('icon-click')"
 				/>
 			</div>
+			<div v-if="$slots.leadingAccessory" class="ds-richListItem__leadingAccessory">
+				<slot name="leadingAccessory" />
+			</div>
 			<div class="ds-richListItem__content">
 				<slot name="content" />
 			</div>
@@ -136,7 +139,8 @@ $rich-list-item-media-horizontal-height: 80px;
 		}
 
 		#{$root}__dragAndDrop,
-		#{$root}__iconWrapper {
+		#{$root}__iconWrapper,
+		#{$root}__leadingAccessory {
 			align-items: center;
 			padding: $space-3 $space-1 $space-3 $space-8;
 		}
@@ -171,7 +175,8 @@ $rich-list-item-media-horizontal-height: 80px;
 			padding: 0 $space-2 0 0;
 
 			#{$root}__dragAndDrop,
-			#{$root}__iconWrapper {
+			#{$root}__iconWrapper,
+			#{$root}__leadingAccessory {
 				padding: $space-3 0 $space-3 $space-6;
 			}
 
@@ -211,7 +216,8 @@ $rich-list-item-media-horizontal-height: 80px;
 		}
 
 		#{$root}__dragAndDrop,
-		#{$root}__iconWrapper {
+		#{$root}__iconWrapper,
+		#{$root}__leadingAccessory {
 			align-items: flex-start;
 			padding: $space-6 0 0 $space-6;
 		}
@@ -244,7 +250,8 @@ $rich-list-item-media-horizontal-height: 80px;
 
 		&.-ds-small {
 			#{$root}__dragAndDrop,
-			#{$root}__iconWrapper {
+			#{$root}__iconWrapper,
+			#{$root}__leadingAccessory {
 				padding: $space-4 $space-2 0 $space-4;
 			}
 

package/lib/js/components/SelectList/SelectListItem/SelectListItem.stories.ts

@@ -39,6 +39,9 @@ const StoryTemplate: StoryFn<typeof SelectListItem> = (args) => ({
 				<template v-if="args.accessorySlot" #accessory>
 					<slot-placeholder :size="SLOT_PLACEHOLDER_SIZES.SMALL" :label="args.accessorySlot" />
 				</template>
+				<template v-if="args.metadataSlot" #metadata>
+					<slot-placeholder :size="SLOT_PLACEHOLDER_SIZES.SMALL" :label="args.metadataSlot" />
+				</template>
 			</select-list-item>
     `,
 });
@@ -55,6 +58,7 @@ const args = {
 	isSelected: false,
 	selectionMode: SELECT_LIST_ITEM_SELECTION_MODE.SELECT_ONLY,
 	accessorySlot: 'accessory',
+	metadataSlot: 'metadata',
 } as Args;
 
 const argTypes = {
@@ -77,6 +81,9 @@ const argTypes = {
 	accessorySlot: {
 		control: 'text',
 	},
+	metadataSlot: {
+		control: 'text',
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

package/lib/js/components/SelectList/SelectListItem/SelectListItem.vue

@@ -30,13 +30,15 @@
 			<span class="ds-selectListItem__text">{{ label }}</span>
 		</span>
 
+		<slot name="metadata" />
+
 		<ds-icon
 			v-if="isSelected"
 			class="ds-selectListItem__iconRight"
 			:icon="ICONS.FA_CHECK_SOLID"
 			:size="ICON_SIZES.XX_SMALL"
 		/>
-		<div v-else class="ds-selectListItem__placeholderRight" />
+		<div v-else-if="!hasMetadata" class="ds-selectListItem__placeholderRight" />
 	</div>
 </template>
 
@@ -107,12 +109,10 @@
 
 	&__iconRight {
 		color: $color-primary-icon;
-		margin-left: $space-6;
 	}
 
 	&__placeholderRight {
 		flex-shrink: 0;
-		margin-left: $space-6;
 		width: $icon-xs;
 	}
 
@@ -194,6 +194,12 @@ const {
 	state?: SelectListItemState;
 }>();
 
+const slots = defineSlots<{
+	accessory?: () => any;
+	metadata?: () => any;
+}>();
+
 const isLoading = computed(() => state === SELECT_LIST_ITEM_STATES.LOADING);
 const isDisabled = computed(() => state === SELECT_LIST_ITEM_STATES.DISABLED);
+const hasMetadata = computed(() => !!slots.metadata);
 </script>

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

@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import Stepper from './Stepper.vue';
+
+interface createComponentOptions {
+	title?: string;
+	counterLabel?: string;
+	hasCounterValue?: boolean;
+	totalSteps?: number;
+	currentStep?: number;
+}
+
+describe('Stepper', () => {
+	const createComponent = ({
+		title,
+		counterLabel,
+		hasCounterValue,
+		totalSteps = 5,
+		currentStep = 1,
+	}: createComponentOptions = {}) => {
+		return mount(Stepper, {
+			props: {
+				title,
+				counterLabel,
+				hasCounterValue,
+				totalSteps,
+				currentStep,
+			},
+		});
+	};
+
+	it('should create', () => {
+		const component = createComponent();
+
+		expect(component.exists()).toBe(true);
+	});
+
+	it('renders one step per total step', () => {
+		const component = createComponent({ totalSteps: 4 });
+
+		expect(component.findAll('.ds-stepper__step')).toHaveLength(4);
+	});
+
+	it('marks the steps up to the current step as active', () => {
+		const component = createComponent({ totalSteps: 5, currentStep: 2 });
+
+		const steps = component.findAll('.ds-stepper__step');
+		expect(steps[0].classes()).toContain('-ds-active');
+		expect(steps[1].classes()).toContain('-ds-active');
+		expect(steps[2].classes()).not.toContain('-ds-active');
+		expect(steps[3].classes()).not.toContain('-ds-active');
+		expect(steps[4].classes()).not.toContain('-ds-active');
+	});
+
+	it('renders the title when provided', () => {
+		const title = 'My title';
+		const component = createComponent({ title });
+
+		expect(component.find('.ds-stepper__title').text()).toBe(title);
+	});
+
+	it('renders the counter value with the current and total steps by default', () => {
+		const component = createComponent({ totalSteps: 5, currentStep: 3 });
+
+		expect(component.find('.ds-stepper__counterValue').text()).toBe('3/5');
+	});
+
+	it('renders the counter label when provided', () => {
+		const counterLabel = 'Counter Label';
+		const component = createComponent({ counterLabel });
+
+		expect(component.find('.ds-stepper__counterLabel').text()).toBe(counterLabel);
+	});
+
+	it('does not render the counter label when it is not provided', () => {
+		const component = createComponent({ counterLabel: undefined });
+
+		expect(component.find('.ds-stepper__counterLabel').exists()).toBe(false);
+	});
+
+	it('hides only the counter value when hasCounterValue is false', () => {
+		const counterLabel = 'Counter Label';
+		const component = createComponent({ counterLabel, hasCounterValue: false });
+
+		expect(component.find('.ds-stepper__counterValue').exists()).toBe(false);
+		expect(component.find('.ds-stepper__counterLabel').text()).toBe(counterLabel);
+	});
+
+	it('does not render the header when there is no title, no counter label and the counter value is hidden', () => {
+		const component = createComponent({
+			title: undefined,
+			counterLabel: undefined,
+			hasCounterValue: false,
+		});
+
+		expect(component.find('.ds-stepper__header').exists()).toBe(false);
+	});
+});

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

@@ -0,0 +1,62 @@
+import Stepper from './Stepper.vue';
+
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+	title: 'Components/Stepper',
+	component: Stepper,
+} as Meta<typeof Stepper>;
+
+const StoryTemplate: StoryFn<typeof Stepper> = (args) => ({
+	components: { Stepper },
+	setup() {
+		return args;
+	},
+	template: `
+		<stepper
+			:title="title"
+			:counter-label="counterLabel"
+			:has-counter-value="hasCounterValue"
+			:total-steps="totalSteps"
+			:current-step="currentStep"
+		/>
+		`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {
+	title: 'Title here',
+	counterLabel: 'Counter Label',
+	hasCounterValue: true,
+	totalSteps: 5,
+	currentStep: 1,
+} as Args;
+
+const argTypes = {
+	title: {
+		control: 'text',
+	},
+	counterLabel: {
+		control: 'text',
+	},
+	hasCounterValue: {
+		control: 'boolean',
+	},
+	totalSteps: {
+		control: { type: 'number', min: 1 },
+	},
+	currentStep: {
+		control: { type: 'number', min: 0 },
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/xym3gXf0vBCofzksDtRDaU/INI-201-E-commerce?node-id=240-17773&m=dev',
+	},
+};

package/lib/js/components/Stepper/Stepper.vue

@@ -0,0 +1,97 @@
+<template>
+	<div class="ds-stepper">
+		<div v-if="title || counterLabel || hasCounterValue" class="ds-stepper__header">
+			<div class="ds-stepper__title">
+				{{ title }}
+			</div>
+			<div v-if="counterLabel || hasCounterValue" class="ds-stepper__counter">
+				<span v-if="counterLabel" class="ds-stepper__counterLabel">
+					{{ counterLabel }}
+				</span>
+				<span v-if="hasCounterValue" class="ds-stepper__counterValue">
+					{{ currentStep }}/{{ totalSteps }}
+				</span>
+			</div>
+		</div>
+		<div class="ds-stepper__steps">
+			<div
+				v-for="step in totalSteps"
+				:key="step"
+				class="ds-stepper__step"
+				:class="{ '-ds-active': step <= currentStep }"
+			/>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../styles/settings/colors/tokens';
+@import '../../../styles/settings/spacings';
+@import '../../../styles/settings/typography/tokens';
+@import '../../../styles/settings/radiuses';
+
+.ds-stepper {
+	display: flex;
+	flex-direction: column;
+	gap: $space-2;
+	width: 100%;
+
+	&__header {
+		align-items: baseline;
+		display: flex;
+		gap: $space-4;
+		width: 100%;
+	}
+
+	&__title {
+		@include heading-m-default-regular;
+
+		color: $color-neutral-text-heavy;
+		flex: 1 0 0;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__counter {
+		@include label-m-default-regular;
+
+		align-items: baseline;
+		color: $color-neutral-text-weak;
+		display: flex;
+		flex-shrink: 0;
+		gap: $space-2;
+		text-align: right;
+	}
+
+	&__steps {
+		align-items: center;
+		display: flex;
+		gap: $space-2;
+		width: 100%;
+	}
+
+	&__step {
+		background-color: $color-neutral-background-medium;
+		border-radius: $radius-xs;
+		flex: 1 0 0;
+		height: 4px;
+		min-width: 0;
+
+		&.-ds-active {
+			background-color: $color-primary-background-strong;
+		}
+	}
+}
+</style>
+
+<script setup lang="ts">
+const { hasCounterValue = true } = defineProps<{
+	title?: string;
+	counterLabel?: string;
+	hasCounterValue?: boolean;
+	totalSteps: number;
+	currentStep: number;
+}>();
+</script>

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

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

package/lib/js/components/TextGroup/TextGroup.vue

@@ -372,7 +372,6 @@ import {
 	TEXT_GROUP_PROMINENCE,
 } from './TextGroup.consts';
 import DsTooltip from '../Tooltip';
-import { RemovedProp } from '../../utils/type.utils';
 
 const {
 	size = TEXT_GROUP_SIZES.MEDIUM,
@@ -414,10 +413,6 @@ const {
 	isSupportingTextTooltipEnabledOnMobile?: boolean;
 	isSupportingTextTooltipAutoFilledWithContent?: boolean;
 	supportingTextTooltipContent?: string;
-
-	// Removed prop kept as a removal marker so existing usages fail type-checking.
-	/** @deprecated use `mainTextColor` set to `primary` instead */
-	isSelected?: RemovedProp<'use mainTextColor=primary instead'>;
 }>();
 
 const prominenceClassName = computed(() => `-ds-${prominence}`);

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

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+
+import TopNav from './TopNav.vue';
+
+describe('TopNav', () => {
+	it('should create', () => {
+		const component = mount(TopNav);
+
+		expect(component.exists()).toBe(true);
+		expect(component.find('.ds-topNav').exists()).toBe(true);
+	});
+
+	it('renders default slot content', () => {
+		const component = mount(TopNav, {
+			slots: {
+				default: () => h('span', { class: 'child' }, 'Default content'),
+			},
+		});
+
+		expect(component.find('.ds-topNav__default .child').text()).toBe('Default content');
+	});
+
+	it('renders the leading slot when provided', () => {
+		const component = mount(TopNav, {
+			slots: {
+				leading: () => h('span', { class: 'child' }, 'Leading content'),
+			},
+		});
+
+		expect(component.find('.ds-topNav__leading .child').text()).toBe('Leading content');
+	});
+
+	it('does not render the leading wrapper when the slot is not provided', () => {
+		const component = mount(TopNav);
+
+		expect(component.find('.ds-topNav__leading').exists()).toBe(false);
+	});
+
+	it('renders the trailing slot when provided', () => {
+		const component = mount(TopNav, {
+			slots: {
+				trailing: () => h('span', { class: 'child' }, 'Trailing content'),
+			},
+		});
+
+		expect(component.find('.ds-topNav__trailing .child').text()).toBe('Trailing content');
+	});
+
+	it('does not render the trailing wrapper when the slot is not provided', () => {
+		const component = mount(TopNav);
+
+		expect(component.find('.ds-topNav__trailing').exists()).toBe(false);
+	});
+});

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

@@ -0,0 +1,99 @@
+import TopNav from './TopNav.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+import TopNavBranding from '../TopNavBranding/TopNavBranding.vue';
+import Flag from '../../Flag/Flag.vue';
+import { FLAG_SIZES } from '../../Flag/Flag.consts';
+import * as FLAGS from '../../Flag/flags';
+import IconButton from '../../Buttons/IconButton/IconButton.vue';
+import {
+	ICON_BUTTON_COLORS,
+	ICON_BUTTON_SIZES,
+	ICON_BUTTON_TYPES,
+} from '../../Buttons/IconButton/IconButton.consts';
+import { BUTTON_RADIUSES } from '../../Buttons/Button/Button.consts';
+import { ICONS } from '../../Icons/Icon';
+import Avatar from '../../Avatar/Avatar.vue';
+import { AVATAR_SIZES } from '../../Avatar/Avatar.consts';
+import SlotPlaceholder, {
+	SLOT_PLACEHOLDER_SIZES,
+} from '../../../../../.storybook/SlotPlaceholder/SlotPlaceholder.vue';
+import { TOP_NAV_STORY_LOGO } from '../topNavStoryLogo';
+
+export default {
+	title: 'Components/TopNav/TopNav',
+	component: TopNav,
+} as Meta<typeof TopNav>;
+
+const FilledTemplate: StoryFn<typeof TopNav> = () => ({
+	components: { TopNav, TopNavBranding, Flag, IconButton, Avatar },
+	setup() {
+		return {
+			logo: TOP_NAV_STORY_LOGO,
+			FLAGS,
+			FLAG_SIZES,
+			ICONS,
+			ICON_BUTTON_COLORS,
+			ICON_BUTTON_SIZES,
+			ICON_BUTTON_TYPES,
+			BUTTON_RADIUSES,
+			AVATAR_SIZES,
+		};
+	},
+	template: `
+		<top-nav>
+			<template #leading>
+				<icon-button
+					:icon="ICONS.FA_BARS"
+					:size="ICON_BUTTON_SIZES.MEDIUM"
+					:type="ICON_BUTTON_TYPES.ICON_ONLY"
+					:color="ICON_BUTTON_COLORS.NEUTRAL"
+					:radius="BUTTON_RADIUSES.ROUNDED"
+				/>
+			</template>
+			<top-nav-branding title="Bethink">
+				<template #logo>
+					<span v-html="logo" style="display: inline-flex;" />
+				</template>
+				<template #accessory>
+					<flag :flag="FLAGS.FLAG_POLAND" :size="FLAG_SIZES.XXS" />
+				</template>
+			</top-nav-branding>
+			<template #trailing>
+				<avatar username="Bethink User" :size="AVATAR_SIZES.X_SMALL" />
+			</template>
+		</top-nav>
+	`,
+});
+
+export const Filled = FilledTemplate.bind({});
+
+const SlotPlaceholdersTemplate: StoryFn<typeof TopNav> = () => ({
+	components: { TopNav, SlotPlaceholder },
+	setup() {
+		return { SLOT_PLACEHOLDER_SIZES };
+	},
+	template: `
+		<top-nav>
+			<template #leading>
+				<slot-placeholder label="leading" :size="SLOT_PLACEHOLDER_SIZES.MEDIUM" />
+			</template>
+			<slot-placeholder label="default" :size="SLOT_PLACEHOLDER_SIZES.MEDIUM" />
+			<template #trailing>
+				<slot-placeholder label="trailing" :size="SLOT_PLACEHOLDER_SIZES.MEDIUM" />
+			</template>
+		</top-nav>
+	`,
+});
+
+export const SlotPlaceholders = SlotPlaceholdersTemplate.bind({});
+
+const parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/xym3gXf0vBCofzksDtRDaU/INI-201-E-commerce?node-id=345-21287&m=dev',
+	},
+};
+
+Filled.parameters = parameters;
+SlotPlaceholders.parameters = parameters;