@bethinkpl/design-system 42.0.0 → 44.0.0

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

@@ -19,6 +19,7 @@ interface createComponentOptions {
 	size?: LabelValueItemSize;
 	isLabelStrong?: boolean;
 	valueColor?: LabelValueItemValueColor;
+	slots?: Record<string, string>;
 }
 
 describe('LabelValueItem', () => {
@@ -29,6 +30,7 @@ describe('LabelValueItem', () => {
 		size = LABEL_VALUE_ITEM_SIZES.MEDIUM,
 		isLabelStrong = false,
 		valueColor = LABEL_VALUE_ITEM_VALUE_COLORS.NEUTRAL,
+		slots = {},
 	}: createComponentOptions = {}) => {
 		return mount(LabelValueItem, {
 			props: {
@@ -39,6 +41,7 @@ describe('LabelValueItem', () => {
 				isLabelStrong,
 				valueColor,
 			},
+			slots,
 		});
 	};
 
@@ -122,4 +125,27 @@ describe('LabelValueItem', () => {
 			'-ds-color-primary',
 		);
 	});
+
+	it('does not render the accessory slot content when the slot is empty', () => {
+		const component = createComponent();
+
+		expect(component.find('.accessory-content').exists()).toBe(false);
+	});
+
+	it('renders the accessory slot content', () => {
+		const component = createComponent({
+			slots: { accessory: '<span class="accessory-content">chip</span>' },
+		});
+
+		expect(component.find('.accessory-content').text()).toBe('chip');
+	});
+
+	it('renders the accessory slot in the loading state', () => {
+		const component = createComponent({
+			state: LABEL_VALUE_ITEM_STATES.LOADING,
+			slots: { accessory: '<span class="accessory-content">chip</span>' },
+		});
+
+		expect(component.find('.accessory-content').exists()).toBe(true);
+	});
 });

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

@@ -1,4 +1,7 @@
 import LabelValueItem from './LabelValueItem.vue';
+import SlotPlaceholder, {
+	SLOT_PLACEHOLDER_SIZES,
+} from '../../../../../.storybook/SlotPlaceholder/SlotPlaceholder.vue';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import {
@@ -6,6 +9,7 @@ import {
 	LABEL_VALUE_ITEM_STATES,
 	LABEL_VALUE_ITEM_VALUE_COLORS,
 } from './LabelValueItem.consts';
+import { toRefs } from 'vue';
 
 export default {
 	title: 'Components/LabelValue/LabelValueItem',
@@ -13,9 +17,9 @@ export default {
 } as Meta<typeof LabelValueItem>;
 
 const StoryTemplate: StoryFn<typeof LabelValueItem> = (args) => ({
-	components: { LabelValueItem },
+	components: { LabelValueItem, SlotPlaceholder },
 	setup() {
-		return args;
+		return { ...toRefs(args), SLOT_PLACEHOLDER_SIZES };
 	},
 	template: `<div style="height: 300px; width: 200px;">
 		<label-value-item
@@ -25,7 +29,12 @@ const StoryTemplate: StoryFn<typeof LabelValueItem> = (args) => ({
 			:size="size"
 			:is-label-strong="isLabelStrong"
 			:value-color="valueColor"
-		/>
+		>
+			<template #accessory>
+				<div v-if="accessorySlot" v-html="accessorySlot" />
+				<slot-placeholder v-else :size="SLOT_PLACEHOLDER_SIZES.SMALL" label="accessory" />
+			</template>
+		</label-value-item>
 		</div>`,
 });
 
@@ -38,6 +47,7 @@ const args = {
 	size: LABEL_VALUE_ITEM_SIZES.MEDIUM,
 	isLabelStrong: false,
 	valueColor: LABEL_VALUE_ITEM_VALUE_COLORS.NEUTRAL,
+	accessorySlot: 'accessory slot',
 } as Args;
 
 const argTypes = {
@@ -56,6 +66,9 @@ const argTypes = {
 	isLabelStrong: {
 		control: 'boolean',
 	},
+	accessorySlot: {
+		control: 'text',
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

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

@@ -3,6 +3,7 @@
 		<div class="ds-labelValueItem__label" :class="{ '-ds-strong': isLabelStrong }">
 			{{ label }}
 		</div>
+		<slot name="accessory" />
 		<ds-icon
 			v-if="state === LABEL_VALUE_ITEM_STATES.LOADING"
 			:icon="ICONS.FAD_SPINNER_THIRD"
@@ -98,4 +99,8 @@ const {
 	isLabelStrong?: boolean;
 	valueColor?: LabelValueItemValueColor;
 }>();
+
+defineSlots<{
+	accessory?: () => any;
+}>();
 </script>

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

@@ -0,0 +1,84 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ComponentProps } from 'vue-component-type-helpers';
+import LoadingBar from './LoadingBar.vue';
+import DsContainerRibbon from '../ContainerRibbon/ContainerRibbon.vue';
+import { CONTAINER_RIBBON_COLORS, CONTAINER_RIBBON_SIZES } from '../ContainerRibbon';
+import { LOADING_BAR_COLORS, LOADING_BAR_SIZES } from './LoadingBar.consts';
+
+const setup = (props: ComponentProps<typeof LoadingBar>) => mount(LoadingBar, { props });
+
+const progressStyle = (wrapper: ReturnType<typeof setup>) =>
+	wrapper.find('.ds-loadingBar__progress').attributes('style') ?? '';
+
+// jsdom neither runs animations nor applies the component's `<style scoped>` block, so nothing here
+// observes the fill itself — that needs a real browser. What these do cover is the declarative wiring
+// the animation depends on: the duration reaching the element, `'0'` opting out, and no JS being
+// involved in starting it.
+describe('LoadingBar', () => {
+	it('should render the track and the progress element', () => {
+		const wrapper = setup({ time: '5' });
+
+		expect(wrapper.find('.ds-loadingBar').exists()).toBe(true);
+		expect(wrapper.find('.ds-loadingBar__progress').exists()).toBe(true);
+	});
+
+	it('should set the animation duration from the time prop', () => {
+		const wrapper = setup({ time: '5' });
+
+		expect(progressStyle(wrapper)).toContain('animation-duration: 5s');
+	});
+
+	it('should not set a width on the progress element when animating', () => {
+		// the keyframes own the width — an inline one would override the animated value
+		const wrapper = setup({ time: '5' });
+
+		expect(progressStyle(wrapper)).not.toContain('width');
+	});
+
+	it('should show a full bar with no animation for time 0', () => {
+		const wrapper = setup({ time: '0' });
+
+		expect(progressStyle(wrapper)).toContain('animation: none');
+		expect(progressStyle(wrapper)).toContain('width: 100%');
+	});
+
+	// The fill used to be started from `onMounted`, which raced the browser's first style pass and
+	// left the bar snapped to full when it lost. The rendered output must be complete on mount.
+	it('should render its final styles synchronously on mount', () => {
+		const wrapper = setup({ time: '5' });
+		const styleOnMount = progressStyle(wrapper);
+
+		expect(styleOnMount).toBe(progressStyle(wrapper));
+		expect(styleOnMount).toContain('animation-duration: 5s');
+	});
+
+	it.each([
+		{ size: LOADING_BAR_SIZES.SMALL, expected: CONTAINER_RIBBON_SIZES.SMALL },
+		{ size: LOADING_BAR_SIZES.MEDIUM, expected: CONTAINER_RIBBON_SIZES.MEDIUM },
+		{ size: LOADING_BAR_SIZES.LARGE, expected: CONTAINER_RIBBON_SIZES.LARGE },
+	])('should pass ribbon size $expected for size $size', ({ size, expected }) => {
+		const wrapper = setup({ size, time: '5' });
+
+		expect(wrapper.findComponent(DsContainerRibbon).props('size')).toBe(expected);
+	});
+
+	it.each([
+		{
+			color: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
+			expected: CONTAINER_RIBBON_COLORS.NEUTRAL_HEAVY,
+		},
+		{
+			color: LOADING_BAR_COLORS.NEUTRAL_STRONG,
+			expected: CONTAINER_RIBBON_COLORS.NEUTRAL_STRONG,
+		},
+		{ color: LOADING_BAR_COLORS.SUCCESS, expected: CONTAINER_RIBBON_COLORS.SUCCESS },
+		{ color: LOADING_BAR_COLORS.WARNING, expected: CONTAINER_RIBBON_COLORS.WARNING },
+		{ color: LOADING_BAR_COLORS.DANGER, expected: CONTAINER_RIBBON_COLORS.DANGER },
+		{ color: LOADING_BAR_COLORS.INFO, expected: CONTAINER_RIBBON_COLORS.INFO },
+	])('should pass ribbon color $expected for color $color', ({ color, expected }) => {
+		const wrapper = setup({ color, time: '5' });
+
+		expect(wrapper.findComponent(DsContainerRibbon).props('color')).toBe(expected);
+	});
+});

package/lib/js/components/LoadingBar/LoadingBar.vue

@@ -13,12 +13,33 @@
 <style scoped lang="scss">
 @import '../../../styles/settings/colors/tokens';
 
+// A keyframe animation carries its own start value, so — unlike a transition — it needs no resolved
+// *before-change* style and runs from the first style pass the element gets. That is what makes it
+// the right tool here: the bar is mounted and animated in the same breath, and the previous
+// `width: 0 -> 100%` transition (flipped from JS just after mount) could lose the race against the
+// browser's first style pass. When it did, the freshly inserted node went straight to its final
+// width with nothing to interpolate from, and the bar snapped to full instead of filling.
+// Only the duration is set from JS, inline. The animation *name* has to stay in this block so that
+// `scoped` rewrites it together with the keyframes — Vue does not rewrite inline styles.
+@keyframes ds-loading-bar-fill {
+	from {
+		width: 0;
+	}
+
+	to {
+		width: 100%;
+	}
+}
+
 .ds-loadingBar {
 	background-color: $color-neutral-background;
 	display: flex;
 	width: 100%;
 
 	&__progress {
+		animation-fill-mode: forwards;
+		animation-name: ds-loading-bar-fill;
+		animation-timing-function: linear;
 		overflow: hidden;
 		width: 0;
 	}
@@ -26,7 +47,7 @@
 </style>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed } from 'vue';
 import DsContainerRibbon from '../ContainerRibbon/ContainerRibbon.vue';
 import {
 	CONTAINER_RIBBON_COLORS,
@@ -52,8 +73,6 @@ const props = withDefaults(
 	},
 );
 
-const width = ref(0);
-
 const ribbonSize = computed(() => {
 	const sizeMap = {
 		[LOADING_BAR_SIZES.SMALL]: CONTAINER_RIBBON_SIZES.SMALL,
@@ -75,20 +94,12 @@ const ribbonColor = computed(() => {
 	return colorMap[props.color] || CONTAINER_RIBBON_COLORS.NEUTRAL_HEAVY;
 });
 
-const loadingBarStyles = computed(() => ({
-	width: `${width.value}%`,
-	transition: `width ${props.time}s linear`,
-}));
-
-onMounted(() => {
-	if (props.time === '0') {
-		width.value = 100;
-		return;
-	}
-	// without postponing the width change, the transition won't work,
-	// and the loading bar is 100% width right away
-	setTimeout(() => {
-		width.value = 100;
-	}, 0);
-});
+// The fill is driven entirely by the `ds-loading-bar-fill` keyframes in this component's styles, so
+// there is nothing to start from JS — no mounted hook, no timer, no frame juggling. `'0'` opts out
+// of the animation altogether and shows a full bar right away.
+const loadingBarStyles = computed(() =>
+	props.time === '0'
+		? { animation: 'none', width: '100%' }
+		: { animationDuration: `${props.time}s` },
+);
 </script>

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

@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+import { ComponentProps } from 'vue-component-type-helpers';
+import SelectListItem from './SelectListItem.vue';
+import { SELECT_LIST_ITEM_SIZES, SELECT_LIST_ITEM_STATES } from './SelectListItem.consts';
+import Icon, { ICONS } from '../../Icons/Icon';
+
+const setup = (props: ComponentProps<typeof SelectListItem>, slots = {}) =>
+	mount(SelectListItem, { props, slots });
+
+describe('SelectListItem', () => {
+	it('should render the label', () => {
+		const wrapper = setup({ label: 'Basic listItem' });
+
+		expect(wrapper.find('.ds-selectListItem').exists()).toBe(true);
+		expect(wrapper.find('.ds-selectListItem__text').text()).toBe('Basic listItem');
+		expect(wrapper.find('.ds-selectListItem').attributes('title')).toBe('Basic listItem');
+	});
+
+	it('should render the eyebrow text when provided', () => {
+		const wrapper = setup({ label: 'Label', eyebrowText: 'Eyebrow' });
+
+		expect(wrapper.find('.ds-selectListItem__eyebrowText').text()).toBe('Eyebrow');
+	});
+
+	it.each(Object.values(SELECT_LIST_ITEM_SIZES))('should render in size: %s', (size) => {
+		const wrapper = setup({ label: 'Label', size });
+
+		expect(wrapper.find('.ds-selectListItem').classes()).toContain(`-ds-${size}`);
+	});
+
+	it.each([
+		{ state: SELECT_LIST_ITEM_STATES.DISABLED, expectedClass: '-ds-disabled' },
+		{ state: SELECT_LIST_ITEM_STATES.LOADING, expectedClass: '-ds-loading' },
+	])('should apply $expectedClass for state $state', ({ state, expectedClass }) => {
+		const wrapper = setup({ label: 'Label', state });
+
+		expect(wrapper.find('.ds-selectListItem').classes()).toContain(expectedClass);
+	});
+
+	it('should render the check icon when selected', () => {
+		const wrapper = setup({ label: 'Label', isSelected: true });
+
+		expect(
+			wrapper.findComponent<typeof Icon>('.ds-selectListItem__iconRight').props().icon,
+		).toEqual(ICONS.FA_CHECK_SOLID);
+	});
+
+	it('should not render the check icon when not selected', () => {
+		const wrapper = setup({ label: 'Label' });
+
+		expect(wrapper.find('.ds-selectListItem__iconRight').exists()).toBe(false);
+	});
+
+	describe('text slot', () => {
+		it('should fall back to the label when the slot is not provided', () => {
+			const wrapper = setup({ label: 'Fallback label' });
+
+			expect(wrapper.find('.ds-selectListItem__text').text()).toBe('Fallback label');
+		});
+
+		it('should override the rendered label when the slot is provided', () => {
+			const wrapper = setup(
+				{ label: 'Prop label' },
+				{ text: () => h('span', { id: 'custom-text' }, 'Slot label') },
+			);
+
+			const text = wrapper.find('.ds-selectListItem__text');
+
+			expect(text.find('#custom-text').exists()).toBe(true);
+			expect(text.text()).toBe('Slot label');
+			// `label` is still used for the title attribute and typeahead fallback.
+			expect(wrapper.find('.ds-selectListItem').attributes('title')).toBe('Prop label');
+		});
+	});
+});

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

@@ -27,7 +27,9 @@
 				:class="{ '-ds-uppercase': isEyebrowTextUppercase }"
 				>{{ eyebrowText }}</span
 			>
-			<span class="ds-selectListItem__text">{{ label }}</span>
+			<span class="ds-selectListItem__text"
+				><slot name="text">{{ label }}</slot></span
+			>
 		</span>
 
 		<slot name="metadata" />
@@ -197,6 +199,7 @@ const {
 const slots = defineSlots<{
 	accessory?: () => any;
 	metadata?: () => any;
+	text?: () => any;
 }>();
 
 const isLoading = computed(() => state === SELECT_LIST_ITEM_STATES.LOADING);

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

@@ -3,6 +3,7 @@ import { Value } from '../../utils/type.utils';
 export const TOAST_SIZES = {
 	SMALL: 'small',
 	MEDIUM: 'medium',
+	LARGE: 'large',
 } as const;
 
 export type ToastSizes = Value<typeof TOAST_SIZES>;
@@ -14,7 +15,7 @@ export const TOAST_COLORS = {
 	WARNING: 'warning',
 	DANGER: 'danger',
 	INFO: 'info',
-};
+} as const;
 
 export type ToastColors = Value<typeof TOAST_COLORS>;
 
@@ -22,6 +23,7 @@ export const TOAST_POSITIONS = {
 	LEFT: 'left',
 	CENTER: 'center',
 	RIGHT: 'right',
-};
+	NONE: 'none',
+} as const;
 
 export type ToastPositions = Value<typeof TOAST_POSITIONS>;

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

@@ -0,0 +1,177 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+import Toast from './Toast.vue';
+import { TOAST_COLORS, TOAST_POSITIONS, TOAST_SIZES } from './Toast.consts';
+import DsButton, { BUTTON_SIZES } from '../Buttons/Button';
+import DsIconButton, { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../Buttons/IconButton';
+import { ICONS } from '../Icons/Icon';
+import { ComponentProps } from 'vue-component-type-helpers';
+
+const setup = (props: ComponentProps<typeof Toast> = {}) =>
+	mount(Toast, {
+		props,
+		slots: {
+			content: () => h('span', 'Wpłynąłem na suchego przestwór oceanu'),
+		},
+	});
+
+describe('Toast', () => {
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
+	it('should render the content slot', () => {
+		const wrapper = setup();
+
+		expect(wrapper.find('.ds-toast__content').text()).toBe(
+			'Wpłynąłem na suchego przestwór oceanu',
+		);
+	});
+
+	it.each(Object.values(TOAST_POSITIONS))('should render in position: %s', (position) => {
+		const wrapper = setup({ position });
+
+		expect(wrapper.find('.ds-toast').classes()).toContain(`-ds-position-${position}`);
+	});
+
+	it('should update the position modifier when the prop changes', async () => {
+		const wrapper = setup({ position: TOAST_POSITIONS.CENTER });
+
+		await wrapper.setProps({ position: TOAST_POSITIONS.NONE });
+
+		expect(wrapper.find('.ds-toast').classes()).toContain('-ds-position-none');
+		expect(wrapper.find('.ds-toast').classes()).not.toContain('-ds-position-center');
+	});
+
+	it.each(Object.values(TOAST_SIZES))('should render in size: %s', (size) => {
+		const wrapper = setup({ size });
+
+		expect(wrapper.find('.ds-toast').classes()).toContain(`-ds-size-${size}`);
+	});
+
+	it.each(Object.values(TOAST_COLORS))('should render in color: %s', (color) => {
+		const wrapper = setup({ color });
+
+		expect(wrapper.find('.ds-toast').classes()).toContain(`-ds-color-${color}`);
+	});
+
+	it('should render the title when provided', () => {
+		const wrapper = setup({ title: 'Tytuł' });
+
+		expect(wrapper.find('.ds-toast__title').text()).toBe('Tytuł');
+	});
+
+	it('should not render the title when not provided', () => {
+		const wrapper = setup();
+
+		expect(wrapper.find('.ds-toast__title').exists()).toBe(false);
+	});
+
+	it.each([
+		{ size: TOAST_SIZES.SMALL, expectedButtonSize: BUTTON_SIZES.SMALL },
+		{ size: TOAST_SIZES.MEDIUM, expectedButtonSize: BUTTON_SIZES.MEDIUM },
+		{ size: TOAST_SIZES.LARGE, expectedButtonSize: BUTTON_SIZES.MEDIUM },
+	])(
+		'should render $expectedButtonSize footer buttons in size $size',
+		({ size, expectedButtonSize }) => {
+			const wrapper = setup({
+				size,
+				footerPrimaryButtonText: 'primary',
+				footerSecondaryButtonText: 'secondary',
+			});
+
+			const buttonSizes = wrapper
+				.findAllComponents(DsButton)
+				.map((button) => button.props('size'));
+
+			expect(buttonSizes).toEqual([expectedButtonSize, expectedButtonSize]);
+		},
+	);
+
+	it('should not render the footer without button texts', () => {
+		const wrapper = setup();
+
+		expect(wrapper.find('.ds-toast__footerButtons').exists()).toBe(false);
+	});
+
+	it('should emit primary-button-click on the primary button click', async () => {
+		const wrapper = setup({ footerPrimaryButtonText: 'primary' });
+
+		await wrapper.findComponent(DsButton).trigger('click');
+
+		expect(wrapper.emitted('primary-button-click')).toHaveLength(1);
+	});
+
+	it('should emit secondary-button-click on the secondary button click', async () => {
+		const wrapper = setup({ footerSecondaryButtonText: 'secondary' });
+
+		await wrapper.findComponent(DsButton).trigger('click');
+
+		expect(wrapper.emitted('secondary-button-click')).toHaveLength(1);
+	});
+
+	it('should emit close after the disappearing timeout', () => {
+		vi.useFakeTimers();
+		const wrapper = setup({ isDisappearing: true, disappearingTimeout: '3' });
+
+		vi.advanceTimersByTime(3 * 1000 + 100);
+
+		expect(wrapper.emitted('close')).toHaveLength(1);
+	});
+
+	it('should not emit close when it is not disappearing', () => {
+		vi.useFakeTimers();
+		const wrapper = setup({ isDisappearing: false, disappearingTimeout: '3' });
+
+		vi.advanceTimersByTime(3 * 1000 + 100);
+
+		expect(wrapper.emitted('close')).toBeUndefined();
+	});
+
+	it('should not render the close button by default', () => {
+		const wrapper = setup();
+
+		expect(wrapper.find('.ds-toast__close').exists()).toBe(false);
+		expect(wrapper.find('.ds-toast').classes()).not.toContain('-ds-closable');
+	});
+
+	it('should render the close button when it is closable', () => {
+		const wrapper = setup({ isClosable: true });
+
+		expect(wrapper.find('.ds-toast__close').exists()).toBe(true);
+		expect(wrapper.find('.ds-toast').classes()).toContain('-ds-closable');
+	});
+
+	it('should render the close button as a small neutral-weak xmark', () => {
+		const wrapper = setup({ isClosable: true });
+
+		const closeButton = wrapper.findComponent(DsIconButton);
+
+		expect(closeButton.props('icon')).toBe(ICONS.FA_XMARK);
+		expect(closeButton.props('size')).toBe(ICON_BUTTON_SIZES.SMALL);
+		expect(closeButton.props('color')).toBe(ICON_BUTTON_COLORS.NEUTRAL_WEAK);
+	});
+
+	it('should emit close on the close button click', async () => {
+		const wrapper = setup({ isClosable: true });
+
+		await wrapper.find('.ds-toast__close > *').trigger('click');
+
+		expect(wrapper.emitted('close')).toHaveLength(1);
+	});
+
+	it('should emit close only once when the close button pre-empts the disappearing timeout', async () => {
+		vi.useFakeTimers();
+		const wrapper = setup({
+			isClosable: true,
+			isDisappearing: true,
+			disappearingTimeout: '3',
+		});
+
+		await wrapper.find('.ds-toast__close > *').trigger('click');
+		vi.advanceTimersByTime(3 * 1000 + 100);
+
+		expect(wrapper.emitted('close')).toHaveLength(1);
+	});
+});