@bethinkpl/design-system 40.1.0 → 41.0.1

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

@@ -4,6 +4,9 @@ import { withActions } from '@storybook/addon-actions/decorator';
 import { useArgs } from '@storybook/preview-api';
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import { DsImage } from '../../../index';
+import SlotPlaceholder, {
+	SLOT_PLACEHOLDER_SIZES,
+} from '../../../../../.storybook/SlotPlaceholder/SlotPlaceholder.vue';
 import { ICON_COLORS, ICONS } from '../../Icons/Icon';
 import {
 	RICH_LIST_ITEM_BACKGROUND_COLOR,
@@ -14,6 +17,7 @@ import {
 	RICH_LIST_ITEM_STATE,
 	RICH_LIST_ITEM_TYPE,
 } from '../RichListItem';
+import { toRefs } from 'vue';
 
 export default {
 	title: 'Components/RichList/BasicRichListItem',
@@ -90,6 +94,9 @@ const expandStory = (story: StoryFn<typeof BasicRichListItem>, args = {}) => {
 		metadata: {
 			control: 'text',
 		},
+		leadingAccessory: {
+			control: 'text',
+		},
 		textSlot: {
 			control: 'text',
 		},
@@ -141,6 +148,7 @@ const expandStory = (story: StoryFn<typeof BasicRichListItem>, args = {}) => {
 		isSupportingTextTooltipEnabled: false,
 
 		metadata: 'Metadata Slot',
+		leadingAccessory: '',
 		textSlot: '',
 		actions: 'ACS',
 
@@ -167,11 +175,9 @@ const InteractiveStoryTemplate: StoryFn<typeof BasicRichListItem> = (args) => {
 	return {
 		components: { BasicRichListItem },
 		setup() {
-			return args;
-		},
-		data() {
 			return {
-				ICONS: Object.freeze(ICONS),
+				...toRefs(args),
+				ICONS,
 			};
 		},
 		methods: {
@@ -213,6 +219,9 @@ const InteractiveStoryTemplate: StoryFn<typeof BasicRichListItem> = (args) => {
 			<template v-if="metadata" #metadata>
 				<div v-html="metadata" />
 			</template>
+			<template v-if="leadingAccessory" #leadingAccessory>
+				<div v-html="leadingAccessory" />
+			</template>
 			<template v-if="textSlot" #text>
 				<div v-html="textSlot" />
 			</template>
@@ -226,17 +235,88 @@ const InteractiveStoryTemplate: StoryFn<typeof BasicRichListItem> = (args) => {
 export const Interactive = InteractiveStoryTemplate.bind({});
 expandStory(Interactive);
 
+const PlaceholderSlotsStoryTemplate: StoryFn<typeof BasicRichListItem> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { BasicRichListItem, SlotPlaceholder },
+		setup() {
+			return {
+				...toRefs(args),
+				SLOT_PLACEHOLDER_SIZES,
+			};
+		},
+		methods: {
+			updateIsSelected(isSelected) {
+				updateArgs({ isSelected });
+			},
+		},
+		template: `
+			<basic-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"
+				:eyebrow="eyebrow === 'null' ? null : eyebrow"
+				:eyebrow-ellipsis="eyebrowEllipsis"
+				:is-eyebrow-uppercase="isEyebrowUppercase"
+				:text="text"
+				:text-ellipsis="textEllipsis"
+				:supporting-text="supportingText === 'null' ? null : supportingText"
+				:supporting-text-ellipsis="supportingTextEllipsis"
+				:is-supporting-text-tooltip-enabled="isSupportingTextTooltipEnabled"
+				: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 #text>
+					<slot-placeholder :size="SLOT_PLACEHOLDER_SIZES.SMALL" label="text" />
+				</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>
+			</basic-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,
+	leadingAccessory: { control: false },
+	metadata: { control: false },
+	textSlot: { control: false },
+	actions: { control: false },
+} as ArgTypes;
+
 const WithMediaStoryTemplate: StoryFn<typeof BasicRichListItem> = (args) => {
 	const [_, updateArgs] = useArgs();
 
 	return {
 		components: { BasicRichListItem, DsImage },
 		setup() {
-			return args;
-		},
-		data() {
 			return {
-				ICONS: Object.freeze(ICONS),
+				...toRefs(args),
+				ICONS,
 			};
 		},
 		methods: {
@@ -293,3 +373,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/BasicRichListItem/BasicRichListItem.vue

@@ -30,6 +30,9 @@
 		<template v-if="$slots.media" #media>
 			<slot name="media" />
 		</template>
+		<template v-if="$slots.leadingAccessory" #leadingAccessory>
+			<slot name="leadingAccessory" />
+		</template>
 		<template #content>
 			<div class="ds-basicRichListItem__content">
 				<ds-text-group

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