@bethinkpl/design-system 40.1.0 → 41.0.0

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/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;

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