@bethinkpl/design-system 40.1.0 → 41.0.1

package/dist/lib/js/components/TopNav/TopNavBranding/TopNavBranding.vue.d.ts

@@ -0,0 +1,33 @@
+type RouterLocation = string | Record<string, unknown>;
+declare function __VLS_template(): Readonly<{
+    logo?: () => any;
+    accessory?: () => any;
+}> & {
+    logo?: () => any;
+    accessory?: () => any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    title: string;
+    href?: string;
+    to?: RouterLocation;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    title: string;
+    href?: string;
+    to?: RouterLocation;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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/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.spec.ts

@@ -55,6 +55,56 @@ describe('Card', () => {
 		expect(component.text()).toContain(footer);
 	});
 
+	it('should render experimentalContent slot', () => {
+		const experimentalContent = 'Wpłynąlem na suchego przestwór oceanu';
+		const component = createComponent({
+			slots: {
+				experimentalContent: () => [h('span', experimentalContent)],
+			},
+		});
+
+		expect(component.find('.ds-card__experimentalContent').exists()).toBe(true);
+		expect(component.find('.ds-card__experimentalContent').text()).toContain(
+			experimentalContent,
+		);
+	});
+
+	it('should skip standard slots when experimentalContent is used', () => {
+		const component = createComponent({
+			slots: {
+				header: () => [h('span', 'header')],
+				content: () => [h('span', 'content')],
+				footer: () => [h('span', 'footer')],
+				experimentalContent: () => [h('span', 'experimental')],
+			},
+		});
+
+		expect(component.find('.ds-card__header').exists()).toBe(false);
+		expect(component.find('.ds-card__content').exists()).toBe(false);
+		expect(component.find('.ds-card__footer').exists()).toBe(false);
+	});
+
+	it('should not render the slotsWrapper when experimentalContent is used', () => {
+		const component = createComponent({
+			slots: {
+				experimentalContent: () => [h('span', 'experimental')],
+			},
+		});
+
+		expect(component.find('.ds-card__slotsWrapper').exists()).toBe(false);
+	});
+
+	it('should still render the ribbon when experimentalContent is used', () => {
+		const component = createComponent({
+			props: { hasRibbon: true },
+			slots: {
+				experimentalContent: () => [h('span', 'experimental')],
+			},
+		});
+
+		expect(component.find('.ds-card__ribbon').exists()).toBe(true);
+	});
+
 	it('should render content slot with padding by default', () => {
 		const content = 'Wpłynąlem na suchego przestwór oceanu';
 		const component = createComponent({

package/lib/js/components/Cards/Card/Card.stories.ts

@@ -31,6 +31,9 @@ const StoryTemplate: StoryFn<typeof Card> = (args) => ({
 			<template v-if="args.footer" #footer>
 				<div v-html="args.footer" />
 			</template>
+			<template v-if="args.experimentalContent" #experimentalContent>
+				<div v-html="args.experimentalContent" />
+			</template>
 		</card>`,
 });
 
@@ -40,6 +43,7 @@ const args = {
 	header: 'header slot',
 	content: 'content slot that supports <b>HTML markup</b>',
 	footer: 'footer slot',
+	experimentalContent: '',
 	contentHasPadding: true,
 	headerHasPadding: false,
 	footerHasPadding: false,
@@ -65,6 +69,7 @@ const argTypes = {
 		control: 'text',
 	},
 	footer: { control: 'text' },
+	experimentalContent: { control: 'text' },
 	backgroundColor: {
 		control: 'select',
 		options: Object.values(CARD_BACKGROUND_COLORS),

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

@@ -28,7 +28,12 @@
 			/>
 		</div>
 
+		<div v-if="$slots.experimentalContent" class="ds-card__experimentalContent">
+			<slot name="experimentalContent" />
+		</div>
+
 		<div
+			v-else
 			class="ds-card__slotsWrapper"
 			:class="{ '-ds-containerIsScrollable': isContentScrollable }"
 		>
@@ -110,6 +115,14 @@
 		}
 	}
 
+	&__experimentalContent {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		// prevents excessive width due to child elements
+		min-width: 0;
+	}
+
 	&__header {
 		&.-ds-withPadding {
 			padding: $space-8;
@@ -192,7 +205,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,22 +259,13 @@ 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<{
 	header?: () => any;
 	content?: () => any;
 	footer?: () => any;
+	experimentalContent?: () => any;
 }>();
 
 const ribbonLayout = computed(() => {

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>