@bethinkpl/design-system 43.0.0 → 44.0.0

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

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

@@ -10,6 +10,26 @@ export default {
 	decorators: [withActions],
 } as Meta<typeof DsToast>;
 
+const toastTemplate = `<ds-toast
+		v-if="isVisible"
+		:title="title"
+		:size="size"
+		:position="position"
+		:color="color"
+		:footer-primary-button-text="footerPrimaryButtonText"
+		:footer-primary-button-icon="ICONS[footerPrimaryButtonIcon]"
+		:footer-secondary-button-text="footerSecondaryButtonText"
+		:footer-secondary-button-icon="ICONS[footerSecondaryButtonIcon]"
+		:is-disappearing="isDisappearing"
+		:disappearing-timeout="disappearingTimeout"
+		:is-closable="isClosable"
+		@close="isVisible = false"
+	>
+		<template #content>
+			<span v-html="content" />
+		</template>
+	</ds-toast>`;
+
 const StoryTemplate: StoryFn<typeof DsToast> = (args) => ({
 	components: { DsToast },
 	setup() {
@@ -19,40 +39,41 @@ const StoryTemplate: StoryFn<typeof DsToast> = (args) => ({
 		return {
 			ICONS: Object.freeze(ICONS),
 			isVisible: true,
-			boundariesSelectorId:
-				this.boundariesSelector != null ? `#${this.boundariesSelector}` : null,
 		};
 	},
-	template: `<div style="display: flex; justify-content: space-around; height: 1200px; width: 100%;">
-		<ds-toast
-			v-if="isVisible"
-			:size="size"
-			:position="position"
-			:boundaries-selector="boundariesSelectorId"
-			:color="color"
-			:footer-primary-button-text="footerPrimaryButtonText"
-			:footer-primary-button-icon="ICONS[footerPrimaryButtonIcon]"
-			:footer-secondary-button-text="footerSecondaryButtonText"
-			:footer-secondary-button-icon="ICONS[footerSecondaryButtonIcon]"
-			:is-disappearing="isDisappearing"
-			:disappearing-timeout="disappearingTimeout"
-			@close="isVisible = false"
-		>
-			<template #content>
-				<span v-html="content" />
-			</template>
-		</ds-toast>
-		<div id="left" style="width: 25%; height: 100%;  border: 1px black solid;"></div>
-		<div id="right" style="width: 25%; height: 100%;  border: 1px black solid;"></div>
+	template: `<div style="height: 1200px; width: 100%;">
+		${toastTemplate}
+	</div>`,
+});
+
+// `position: none` leaves the placement to the consumer — here the wrapper anchors the toast to the
+// bottom right of its own container instead of the viewport.
+const ClientPositionedStoryTemplate: StoryFn<typeof DsToast> = (args) => ({
+	components: { DsToast },
+	setup() {
+		return args;
+	},
+	data() {
+		return {
+			ICONS: Object.freeze(ICONS),
+			isVisible: true,
+		};
+	},
+	template: `<div style="height: 400px; padding: 24px; width: 100%;">
+		<div style="position: relative; height: 100%; border: 1px black solid;">
+			<div style="position: absolute; bottom: 16px; right: 16px;">
+				${toastTemplate}
+			</div>
+		</div>
 	</div>`,
 });
 
 export const Interactive = StoryTemplate.bind({});
 
 const args = {
+	title: 'Opcjonalny Title wpisz tutaj',
 	size: TOAST_SIZES.MEDIUM,
 	position: TOAST_POSITIONS.CENTER,
-	boundariesSelector: null,
 	color: TOAST_COLORS.INFO,
 	footerPrimaryButtonText: 'primary',
 	footerPrimaryButtonIcon: null,
@@ -60,10 +81,14 @@ const args = {
 	footerSecondaryButtonIcon: null,
 	isDisappearing: false,
 	disappearingTimeout: '0',
+	isClosable: true,
 	content: 'Wpłynąłem na suchego przestwór oceanu',
 } as Args;
 
 const argTypes = {
+	title: {
+		control: 'text',
+	},
 	size: {
 		control: 'select',
 		options: Object.values(TOAST_SIZES),
@@ -72,10 +97,6 @@ const argTypes = {
 		control: 'select',
 		options: Object.values(TOAST_POSITIONS),
 	},
-	boundariesSelector: {
-		control: 'select',
-		options: [null, 'left', 'right'],
-	},
 	color: {
 		control: 'select',
 		options: Object.values(TOAST_COLORS),
@@ -88,20 +109,33 @@ const argTypes = {
 		control: 'select',
 		options: [null, ...Object.keys(ICONS)],
 	},
+	isClosable: {
+		control: 'boolean',
+	},
 	content: {
 		control: 'text',
 	},
 } as ArgTypes;
 
+const actionsParameters = {
+	actions: {
+		handles: ['close', 'primary-button-click', 'secondary-button-click'],
+	},
+};
+
 Interactive.argTypes = argTypes;
 Interactive.args = args;
 
 Interactive.parameters = {
-	actions: {
-		handles: ['close', 'primary-button-click', 'secondary-button-click'],
-	},
+	...actionsParameters,
 	design: {
 		type: 'figma',
 		url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=8091-108960',
 	},
 };
+
+export const ClientPositioned = ClientPositionedStoryTemplate.bind({});
+
+ClientPositioned.argTypes = argTypes;
+ClientPositioned.args = { ...args, position: TOAST_POSITIONS.NONE };
+ClientPositioned.parameters = actionsParameters;