@bethinkpl/design-system 40.0.1 → 41.0.0

package/dist/lib/js/components/TopNav/topNavStoryLogo.d.ts

@@ -0,0 +1 @@
+export declare const TOP_NAV_STORY_LOGO = "\n\t<span style=\"display: inline-flex; height: 24px; width: 31.448px;\">\n\t\t<svg preserveAspectRatio=\"none\" width=\"100%\" height=\"100%\" viewBox=\"0 0 31.4483 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n\t\t\t<g clip-path=\"url(#clip0_0_28)\">\n\t\t\t\t<path d=\"M6.79071 8.23154C6.79071 8.64557 7.12449 8.95993 7.51966 8.95993C7.68463 8.95993 7.84193 8.90242 7.96086 8.81041L11.947 11.7278C11.8818 11.8658 11.8435 12.023 11.8435 12.1878C11.8435 12.3527 11.878 12.4984 11.9432 12.6287L7.96853 15.3966C7.84193 15.2969 7.68463 15.2318 7.51582 15.2318C7.10147 15.2318 6.78687 15.5653 6.78687 15.9601C6.78687 16.3742 7.12065 16.6885 7.51582 16.6885C7.91099 16.6885 8.24477 16.355 8.24477 15.9601C8.24477 15.8758 8.22558 15.7876 8.19873 15.7186L12.1657 12.9584C12.3614 13.1539 12.6338 13.2728 12.9215 13.2728C13.5315 13.2728 13.9996 12.7782 13.9996 12.1955C13.9996 11.6128 13.5277 11.0991 12.933 11.0991C12.6491 11.0991 12.3883 11.2179 12.1887 11.402L8.20256 8.48839C8.23709 8.40788 8.2486 8.32354 8.2486 8.23154C8.2486 7.8175 7.91482 7.50314 7.51966 7.50314C7.10531 7.50314 6.79071 7.83667 6.79071 8.23154ZM12.933 11.6856C13.2093 11.6856 13.428 11.9042 13.428 12.1802C13.428 12.4562 13.2093 12.6747 12.933 12.6747C12.6568 12.6747 12.4381 12.4562 12.4381 12.1802C12.4381 11.9042 12.6568 11.6856 12.933 11.6856ZM7.86111 8.24687C7.86111 8.42322 7.70381 8.5804 7.52733 8.5804C7.35085 8.5804 7.19355 8.42322 7.19355 8.24687C7.19355 8.07052 7.35085 7.91334 7.52733 7.91334C7.70381 7.91334 7.86111 8.07052 7.86111 8.24687Z\" fill=\"#101921\"/>\n\t\t\t\t<path d=\"M4.4811 14.9481C4.58916 14.9481 4.67677 14.8605 4.67677 14.7526C4.67677 14.6446 4.58916 14.557 4.4811 14.557C4.37304 14.557 4.28544 14.6446 4.28544 14.7526C4.28544 14.8605 4.37304 14.9481 4.4811 14.9481Z\" fill=\"#101921\"/>\n\t\t\t\t<path d=\"M3.59102 13.499C3.40686 13.499 3.25724 13.6485 3.25724 13.8325C3.25724 14.0165 3.40686 14.166 3.59102 14.166C3.77517 14.166 3.9248 14.0165 3.9248 13.8325C3.9248 13.6485 3.77517 13.499 3.59102 13.499Z\" fill=\"#101921\"/>\n\t\t\t\t<path d=\"M3.8097 12.0843C3.8097 11.7278 3.53347 11.4518 3.17667 11.4518C2.81987 11.4518 2.54364 11.7278 2.54364 12.0843C2.54364 12.4409 2.81987 12.7169 3.17667 12.7169C3.53347 12.7169 3.8097 12.4409 3.8097 12.0843Z\" fill=\"#101921\"/>\n\t\t\t\t<path d=\"M24.3315 5.37931H7.6923C3.44139 5.37931 0 8.34271 0 12C0 15.6573 3.46058 18.6207 7.6923 18.6207H24.3123C28.2486 18.6207 31.4521 15.6343 31.4521 11.9885C31.4521 8.34271 28.2639 5.37931 24.3315 5.37931ZM15.5419 17.5434H7.71148C4.07443 17.5434 1.10493 15.0631 1.10493 12C1.10493 8.93692 4.05141 6.45656 7.71148 6.45656H15.5419V17.5434ZM29.8753 10.6122C29.8561 10.6122 29.8177 10.6237 29.7755 10.6237C29.6566 10.6161 29.5645 10.5509 29.5108 10.4282C28.9852 9.00976 27.7076 7.83284 26.0694 7.29996C25.9198 7.24629 25.8277 7.08144 25.8776 6.93193C25.9313 6.78242 26.0963 6.69041 26.2459 6.74025C28.0337 7.34597 29.4571 8.64557 30.0364 10.225C30.0901 10.3899 30.0172 10.5471 29.8715 10.6122H29.8753Z\" fill=\"#101921\"/>\n\t\t\t</g>\n\t\t\t<defs>\n\t\t\t\t<clipPath id=\"clip0_0_28\">\n\t\t\t\t\t<rect width=\"31.4483\" height=\"24\" fill=\"white\"/>\n\t\t\t\t</clipPath>\n\t\t\t</defs>\n\t\t</svg>\n\t</span>\n";

package/dist/lib/js/components/Well/Well.consts.d.ts

@@ -31,6 +31,7 @@ export declare const WELL_RIBBON_COLORS: {
 };
 export type WellRibbonColor = Value<typeof WELL_RIBBON_COLORS>;
 export declare const WELL_RIBBON_SIZES: {
+    readonly X_SMALL: "x-small";
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
     readonly LARGE: "large";

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

@@ -96,11 +96,9 @@ export { default as DsDrawerDivider } from './components/Drawer/DrawerDivider/Dr
 export { default as DrawerHeader } from './components/Drawer/DrawerHeader/DrawerHeader.vue';
 export { default as DsDrawerHeader } from './components/Drawer/DrawerHeader/DrawerHeader.vue';
 export * from './components/Drawer/DrawerHeader/DrawerHeader.consts';
-export { default as DrawerListItem } from './components/Drawer/DrawerListItem/DrawerListItem.vue';
-export { default as DsDrawerListItem } from './components/Drawer/DrawerListItem/DrawerListItem.vue';
-export { default as DrawerListItemGroup } from './components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue';
-export { default as DsDrawerListItemGroup } from './components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue';
-export * from './components/Drawer/DrawerListItem/DrawerListItem.consts';
+export { default as DsLabelValueItem } from './components/LabelValue/LabelValueItem/LabelValueItem.vue';
+export { default as DsLabelValueItemGroup } from './components/LabelValue/LabelValueItemGroup/LabelValueItemGroup.vue';
+export * from './components/LabelValue/LabelValueItem/LabelValueItem.consts';
 export { default as DrawerTile } from './components/Drawer/DrawerTile/DrawerTile.vue';
 export { default as DsDrawerTile } from './components/Drawer/DrawerTile/DrawerTile.vue';
 export { default as DrawerSection } from './components/Drawer/DrawerSection/DrawerSection.vue';
@@ -188,6 +186,9 @@ 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 { default as DsStepper } from './components/Stepper';
+export { default as DsTopNav } from './components/TopNav/TopNav/TopNav.vue';
+export { default as DsTopNavBranding } from './components/TopNav/TopNavBranding/TopNavBranding.vue';
 export { default as DsFlag } from './components/Flag';
 export * from './components/Flag/Flag.consts';
 export * from './components/Flag/flags';

package/lib/js/components/Cards/Card/Card.vue

@@ -192,7 +192,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-import { RemovedProp } from '../../../utils/type.utils';
 import DsDivider from '../../Divider/Divider.vue';
 import DsLoadingBar, { LOADING_BAR_COLORS, LoadingBarColors } from '../../LoadingBar';
 import DsContainerRibbon from '../../ContainerRibbon/ContainerRibbon.vue';
@@ -247,16 +246,6 @@ const {
 	loadingBarTime?: string;
 	isFlat?: boolean;
 	isContentScrollable?: boolean;
-
-	// Renamed props kept as removal markers so existing usages fail type-checking.
-	/** @deprecated renamed to `hasRibbon` */
-	hasBorder?: RemovedProp<'renamed to hasRibbon'>;
-	/** @deprecated renamed to `ribbonPosition` */
-	borderPosition?: RemovedProp<'renamed to ribbonPosition'>;
-	/** @deprecated renamed to `ribbonSize` */
-	borderSize?: RemovedProp<'renamed to ribbonSize'>;
-	/** @deprecated renamed to `ribbonColor` */
-	borderColor?: RemovedProp<'renamed to ribbonColor'>;
 }>();
 
 defineSlots<{

package/lib/js/components/ContainerRibbon/ContainerRibbon.consts.ts

@@ -1,6 +1,7 @@
 import { Value } from '../../utils/type.utils';
 
 export const CONTAINER_RIBBON_SIZES = {
+	X_SMALL: 'x-small',
 	SMALL: 'small',
 	MEDIUM: 'medium',
 	LARGE: 'large',

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

@@ -23,12 +23,15 @@ describe('ContainerRibbon', () => {
 		);
 	});
 
-	it('applies size classes correctly', () => {
-		const wrapper = mount(ContainerRibbon, {
-			props: { size: CONTAINER_RIBBON_SIZES.SMALL },
-		});
-		expect(wrapper.find('.ds-container-ribbon').classes()).toContain('-ds-size-small');
-	});
+	it.each(Object.values(CONTAINER_RIBBON_SIZES))(
+		'applies size class correctly for size "%s"',
+		(size) => {
+			const wrapper = mount(ContainerRibbon, {
+				props: { size },
+			});
+			expect(wrapper.find('.ds-container-ribbon').classes()).toContain(`-ds-size-${size}`);
+		},
+	);
 
 	it('applies color classes correctly', () => {
 		const wrapper = mount(ContainerRibbon, {

package/lib/js/components/ContainerRibbon/ContainerRibbon.vue

@@ -2,6 +2,7 @@
 	<div
 		class="ds-container-ribbon"
 		:class="{
+			'-ds-size-x-small': size === CONTAINER_RIBBON_SIZES.X_SMALL,
 			'-ds-size-small': size === CONTAINER_RIBBON_SIZES.SMALL,
 			'-ds-size-medium': size === CONTAINER_RIBBON_SIZES.MEDIUM,
 			'-ds-size-large': size === CONTAINER_RIBBON_SIZES.LARGE,
@@ -38,6 +39,16 @@
 	}
 
 	// Size variants
+	&.-ds-size-x-small {
+		&.-ds-layout-vertical {
+			width: $border-xs;
+		}
+
+		&.-ds-layout-horizontal {
+			height: $border-xs;
+		}
+	}
+
 	&.-ds-size-small {
 		&.-ds-layout-vertical {
 			width: $border-s;

package/lib/js/components/LabelValue/LabelValueItem/LabelValueItem.consts.ts

@@ -0,0 +1,20 @@
+import { Value } from '../../../utils/type.utils';
+
+export const LABEL_VALUE_ITEM_STATES = {
+	DEFAULT: 'default',
+	LOADING: 'loading',
+} as const;
+
+export const LABEL_VALUE_ITEM_SIZES = {
+	MEDIUM: 'medium',
+	LARGE: 'large',
+} as const;
+
+export const LABEL_VALUE_ITEM_VALUE_COLORS = {
+	NEUTRAL: 'neutral',
+	PRIMARY: 'primary',
+} as const;
+
+export type LabelValueItemState = Value<typeof LABEL_VALUE_ITEM_STATES>;
+export type LabelValueItemSize = Value<typeof LABEL_VALUE_ITEM_SIZES>;
+export type LabelValueItemValueColor = Value<typeof LABEL_VALUE_ITEM_VALUE_COLORS>;

package/lib/js/components/LabelValue/LabelValueItem/LabelValueItem.spec.ts

@@ -0,0 +1,125 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import LabelValueItem from './LabelValueItem.vue';
+import Icon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
+import {
+	LABEL_VALUE_ITEM_SIZES,
+	LABEL_VALUE_ITEM_STATES,
+	LABEL_VALUE_ITEM_VALUE_COLORS,
+	LabelValueItemSize,
+	LabelValueItemState,
+	LabelValueItemValueColor,
+} from './LabelValueItem.consts';
+
+interface createComponentOptions {
+	label?: string;
+	valueText?: string;
+	state?: LabelValueItemState;
+	size?: LabelValueItemSize;
+	isLabelStrong?: boolean;
+	valueColor?: LabelValueItemValueColor;
+}
+
+describe('LabelValueItem', () => {
+	const createComponent = ({
+		label = 'random label',
+		valueText = 'random value',
+		state = LABEL_VALUE_ITEM_STATES.DEFAULT,
+		size = LABEL_VALUE_ITEM_SIZES.MEDIUM,
+		isLabelStrong = false,
+		valueColor = LABEL_VALUE_ITEM_VALUE_COLORS.NEUTRAL,
+	}: createComponentOptions = {}) => {
+		return mount(LabelValueItem, {
+			props: {
+				label,
+				valueText,
+				state,
+				size,
+				isLabelStrong,
+				valueColor,
+			},
+		});
+	};
+
+	it('should create', () => {
+		const component = createComponent();
+
+		expect(component.exists()).toBe(true);
+	});
+
+	it('renders label', () => {
+		const label = 'Mam labela';
+		const component = createComponent({ label });
+
+		expect(component.find('.ds-labelValueItem__label').text()).toBe(label);
+	});
+
+	it('renders valueText by default', () => {
+		const valueText = 'Mam wartość';
+		const component = createComponent({ valueText });
+
+		expect(component.find('.ds-labelValueItem__value').text()).toBe(valueText);
+	});
+
+	it('does not render the spinner in the default state', () => {
+		const component = createComponent({ state: LABEL_VALUE_ITEM_STATES.DEFAULT });
+
+		expect(component.findComponent(Icon).exists()).toBe(false);
+		expect(component.find('.ds-labelValueItem__value').exists()).toBe(true);
+	});
+
+	it('renders the spinner instead of the value in the loading state', () => {
+		const component = createComponent({ state: LABEL_VALUE_ITEM_STATES.LOADING });
+
+		expect(component.find('.ds-labelValueItem__value').exists()).toBe(false);
+
+		const icon = component.findComponent(Icon);
+		expect(icon.exists()).toBe(true);
+		expect(icon.props().icon).toEqual(ICONS.FAD_SPINNER_THIRD);
+		expect(icon.props().size).toBe(ICON_SIZES.XX_SMALL);
+		expect(icon.props().spinning).toBe(true);
+	});
+
+	it('applies the medium size by default', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-labelValueItem').classes()).not.toContain('-ds-large');
+	});
+
+	it('applies the large size modifier when size is large', () => {
+		const component = createComponent({ size: LABEL_VALUE_ITEM_SIZES.LARGE });
+
+		expect(component.find('.ds-labelValueItem').classes()).toContain('-ds-large');
+	});
+
+	it('does not make the label strong by default', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-labelValueItem__label').classes()).not.toContain('-ds-strong');
+	});
+
+	it('makes the label strong when isLabelStrong is true', () => {
+		const component = createComponent({ isLabelStrong: true });
+
+		expect(component.find('.ds-labelValueItem__label').classes()).toContain('-ds-strong');
+	});
+
+	it('uses the neutral value color by default', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-labelValueItem__value').classes()).not.toContain(
+			'-ds-color-primary',
+		);
+	});
+
+	it('applies the primary value color modifier when valueColor is primary', () => {
+		const component = createComponent({
+			valueColor: LABEL_VALUE_ITEM_VALUE_COLORS.PRIMARY,
+		});
+
+		expect(component.find('.ds-labelValueItem__value').classes()).toContain(
+			'-ds-color-primary',
+		);
+	});
+});

package/lib/js/components/LabelValue/LabelValueItem/LabelValueItem.stories.ts

@@ -0,0 +1,69 @@
+import LabelValueItem from './LabelValueItem.vue';
+
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import {
+	LABEL_VALUE_ITEM_SIZES,
+	LABEL_VALUE_ITEM_STATES,
+	LABEL_VALUE_ITEM_VALUE_COLORS,
+} from './LabelValueItem.consts';
+
+export default {
+	title: 'Components/LabelValue/LabelValueItem',
+	component: LabelValueItem,
+} as Meta<typeof LabelValueItem>;
+
+const StoryTemplate: StoryFn<typeof LabelValueItem> = (args) => ({
+	components: { LabelValueItem },
+	setup() {
+		return args;
+	},
+	template: `<div style="height: 300px; width: 200px;">
+		<label-value-item
+			:label="label"
+			:value-text="valueText"
+			:state="state"
+			:size="size"
+			:is-label-strong="isLabelStrong"
+			:value-color="valueColor"
+		/>
+		</div>`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {
+	label: 'Label',
+	valueText: 'value',
+	state: LABEL_VALUE_ITEM_STATES.DEFAULT,
+	size: LABEL_VALUE_ITEM_SIZES.MEDIUM,
+	isLabelStrong: false,
+	valueColor: LABEL_VALUE_ITEM_VALUE_COLORS.NEUTRAL,
+} as Args;
+
+const argTypes = {
+	state: {
+		control: 'select',
+		options: Object.values(LABEL_VALUE_ITEM_STATES),
+	},
+	size: {
+		control: 'select',
+		options: Object.values(LABEL_VALUE_ITEM_SIZES),
+	},
+	valueColor: {
+		control: 'select',
+		options: Object.values(LABEL_VALUE_ITEM_VALUE_COLORS),
+	},
+	isLabelStrong: {
+		control: 'boolean',
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=6785-111025&t=pzyp7YuJcnGNBfS5-4',
+	},
+};

package/lib/js/components/LabelValue/LabelValueItem/LabelValueItem.vue

@@ -0,0 +1,101 @@
+<template>
+	<div class="ds-labelValueItem" :class="{ '-ds-large': size === LABEL_VALUE_ITEM_SIZES.LARGE }">
+		<div class="ds-labelValueItem__label" :class="{ '-ds-strong': isLabelStrong }">
+			{{ label }}
+		</div>
+		<ds-icon
+			v-if="state === LABEL_VALUE_ITEM_STATES.LOADING"
+			:icon="ICONS.FAD_SPINNER_THIRD"
+			:size="ICON_SIZES.XX_SMALL"
+			spinning
+		/>
+		<div
+			v-else
+			class="ds-labelValueItem__value"
+			:class="{
+				'-ds-color-primary': valueColor === LABEL_VALUE_ITEM_VALUE_COLORS.PRIMARY,
+			}"
+		>
+			{{ valueText }}
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/typography/tokens';
+
+.ds-labelValueItem {
+	align-items: center;
+	color: $color-neutral-text-strong;
+	display: flex;
+	gap: $space-4;
+	padding: $space-4 0;
+	width: 100%;
+
+	&__label {
+		@include label-m-default-regular;
+
+		flex-shrink: 1;
+		overflow: hidden;
+		overflow-wrap: break-word;
+		width: 100%;
+
+		&.-ds-strong {
+			@include label-m-default-bold;
+		}
+	}
+
+	&__value {
+		@include info-m-default-bold;
+
+		flex-shrink: 0;
+		max-width: 50%;
+
+		&.-ds-color-primary {
+			color: $color-primary-text-strong;
+		}
+	}
+
+	&.-ds-large {
+		.ds-labelValueItem__label {
+			@include label-l-default-regular;
+
+			&.-ds-strong {
+				@include label-l-default-bold;
+			}
+		}
+
+		.ds-labelValueItem__value {
+			@include info-l-default-bold;
+		}
+	}
+}
+</style>
+
+<script setup lang="ts">
+import {
+	LABEL_VALUE_ITEM_SIZES,
+	LABEL_VALUE_ITEM_STATES,
+	LABEL_VALUE_ITEM_VALUE_COLORS,
+	LabelValueItemSize,
+	LabelValueItemState,
+	LabelValueItemValueColor,
+} from './LabelValueItem.consts';
+import DsIcon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
+
+const {
+	state = LABEL_VALUE_ITEM_STATES.DEFAULT,
+	size = LABEL_VALUE_ITEM_SIZES.MEDIUM,
+	isLabelStrong = false,
+	valueColor = LABEL_VALUE_ITEM_VALUE_COLORS.NEUTRAL,
+} = defineProps<{
+	state?: LabelValueItemState;
+	label: string;
+	valueText: string;
+	size?: LabelValueItemSize;
+	isLabelStrong?: boolean;
+	valueColor?: LabelValueItemValueColor;
+}>();
+</script>

package/lib/js/components/LabelValue/LabelValueItemGroup/LabelValueItemGroup.spec.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+
+import LabelValueItemGroup from './LabelValueItemGroup.vue';
+
+describe('LabelValueItemGroup', () => {
+	it('should create', () => {
+		const component = mount(LabelValueItemGroup);
+
+		expect(component.exists()).toBe(true);
+		expect(component.find('.ds-labelValueItemGroup').exists()).toBe(true);
+	});
+
+	it('renders default slot content', () => {
+		const component = mount(LabelValueItemGroup, {
+			slots: {
+				default: () => h('span', { class: 'child' }, 'Slotted content'),
+			},
+		});
+
+		expect(component.find('.ds-labelValueItemGroup .child').text()).toBe('Slotted content');
+	});
+});

package/lib/js/components/LabelValue/LabelValueItemGroup/LabelValueItemGroup.stories.ts

@@ -0,0 +1,31 @@
+import LabelValueItemGroup from './LabelValueItemGroup.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+import LabelValueItem from '../LabelValueItem/LabelValueItem.vue';
+
+export default {
+	title: 'Components/LabelValue/LabelValueItemGroup',
+	component: LabelValueItemGroup,
+} as Meta<typeof LabelValueItemGroup>;
+
+const StoryTemplate: StoryFn<typeof LabelValueItemGroup> = (args) => ({
+	components: { LabelValueItemGroup, LabelValueItem },
+	setup() {
+		return args;
+	},
+	template: `
+    	<label-value-item-group>
+			<label-value-item value-text="1" label="Item" />
+			<label-value-item value-text="2" label="Item" />
+		</label-value-item-group>
+  `,
+});
+
+export const Static = StoryTemplate.bind({});
+
+Static.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=6785-111079&t=PEjZUz7dUozNqntp-4',
+	},
+};

package/lib/js/components/LabelValue/LabelValueItemGroup/LabelValueItemGroup.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="ds-labelValueItemGroup">
+		<slot />
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../../styles/settings/spacings';
+
+.ds-labelValueItemGroup {
+	padding: 0 0 $space-3;
+}
+</style>
+
+<script setup lang="ts">
+defineSlots<{
+	default?: () => any;
+}>();
+</script>

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;