@bethinkpl/design-system 42.0.0 → 44.0.0

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;

package/lib/js/components/Toast/Toast.vue

@@ -1,9 +1,14 @@
 <template>
-	<div :style="styles" :class="['ds-toast', toastSize, toastPosition]">
+	<div
+		:class="['ds-toast', toastSize, toastPosition, toastColor, { '-ds-closable': isClosable }]"
+	>
 		<ds-card :loading-bar-color="color" has-loading-bar :loading-bar-time="disappearingTimeout">
 			<template #content>
-				<div class="ds-toast__content">
-					<slot name="content" />
+				<div class="ds-toast__body">
+					<div v-if="title" class="ds-toast__title">{{ title }}</div>
+					<div class="ds-toast__content">
+						<slot name="content" />
+					</div>
 				</div>
 			</template>
 			<template
@@ -14,6 +19,7 @@
 					<ds-button
 						v-if="footerSecondaryButtonText.length"
 						:color="buttonSecondaryColor"
+						:size="buttonSize"
 						:icon-right="footerSecondaryButtonIcon"
 						:type="BUTTON_TYPES.OUTLINED"
 						:radius="BUTTON_RADIUSES.ROUNDED"
@@ -23,6 +29,7 @@
 					<ds-button
 						v-if="footerPrimaryButtonText.length"
 						:color="buttonPrimaryColor"
+						:size="buttonSize"
 						:icon-right="footerPrimaryButtonIcon"
 						:radius="BUTTON_RADIUSES.ROUNDED"
 						@click="$emit('primary-button-click')"
@@ -31,49 +38,113 @@
 				</div>
 			</template>
 		</ds-card>
+		<div v-if="isClosable" class="ds-toast__close">
+			<ds-icon-button
+				:icon="ICONS.FA_XMARK"
+				:size="ICON_BUTTON_SIZES.SMALL"
+				:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
+				@click="close"
+			/>
+		</div>
 	</div>
 </template>
 
 <style scoped lang="scss">
+@import '../../../styles/settings/colors/tokens';
 @import '../../../styles/settings/spacings';
 @import '../../../styles/settings/typography/tokens';
 @import '../../../styles/settings/media-queries';
 
 .ds-toast {
-	position: fixed;
+	$root: &;
+
+	max-width: var(--ds-toast-max-width);
+	// anchors the absolutely positioned close button, including under `position: none`
+	position: relative;
 	width: 100%;
 
 	&.-ds-size-small {
-		max-width: 320px + $space-8 * 2;
-		padding: $space-8;
+		--ds-toast-max-width: 320px;
 	}
 
 	&.-ds-size-medium {
-		max-width: 500px + $space-8 * 2;
-		padding: $space-8;
+		--ds-toast-max-width: 500px;
+	}
+
+	&.-ds-size-large {
+		--ds-toast-max-width: 700px;
+	}
+
+	// The viewport spacing lives in the offsets rather than in padding, so it applies only to the
+	// fixed positions — `none` lets the consumer place (and space) the toast themselves.
+	&.-ds-position-left,
+	&.-ds-position-center,
+	&.-ds-position-right {
+		--ds-toast-offset: #{$space-8};
+
+		bottom: var(--ds-toast-offset);
+		max-width: min(var(--ds-toast-max-width), calc(100% - var(--ds-toast-offset) * 2));
+		position: fixed;
 
 		@media (#{breakpoint-s()}) {
-			max-width: 500px + $space-12 * 2;
-			padding: $space-12;
+			&.-ds-size-medium,
+			&.-ds-size-large {
+				--ds-toast-offset: #{$space-12};
+			}
 		}
 	}
 
 	&.-ds-position-left {
-		bottom: 0;
-		left: 0;
+		left: var(--ds-toast-offset);
 	}
 
 	&.-ds-position-right {
-		bottom: 0;
-		right: 0;
+		right: var(--ds-toast-offset);
 	}
 
 	&.-ds-position-center {
-		bottom: 0;
 		left: 50%;
 		transform: translateX(-50%);
 	}
 
+	&__body {
+		display: flex;
+		flex-direction: column;
+		row-gap: $space-2;
+	}
+
+	&__close {
+		position: absolute;
+		right: $space-1;
+		top: $space-3;
+	}
+
+	&__title {
+		@include heading-s-default-bold;
+
+		color: $color-neutral-text-strong;
+
+		#{$root}.-ds-size-large & {
+			@include heading-m-default-bold;
+		}
+
+		#{$root}.-ds-color-success & {
+			color: $color-success-text-strong;
+		}
+
+		#{$root}.-ds-color-warning & {
+			color: $color-warning-text-strong;
+		}
+
+		#{$root}.-ds-color-danger & {
+			color: $color-danger-text-strong;
+		}
+
+		#{$root}.-ds-color-info & {
+			color: $color-info-text-strong;
+		}
+	}
+
 	&__content {
 		@include text-m-default-regular;
 	}
@@ -87,9 +158,15 @@
 }
 </style>
 
-<script lang="ts">
-import DsButton, { BUTTON_COLORS, BUTTON_RADIUSES, BUTTON_TYPES } from '../Buttons/Button';
+<script lang="ts" setup>
+import DsButton, {
+	BUTTON_COLORS,
+	BUTTON_RADIUSES,
+	BUTTON_SIZES,
+	BUTTON_TYPES,
+} from '../Buttons/Button';
 import DsCard from '../Cards/Card';
+import DsIconButton, { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../Buttons/IconButton';
 import {
 	TOAST_COLORS,
 	TOAST_POSITIONS,
@@ -98,184 +175,88 @@ import {
 	ToastPositions,
 	ToastSizes,
 } from './Toast.consts';
-import { defineComponent, PropType, toRaw } from 'vue';
-import { ICONS } from '../Icons/Icon';
-
-function calculateBoundariesOffset(boundariesElement: HTMLElement) {
-	const borderLeftWidth = window.getComputedStyle(boundariesElement).borderLeftWidth;
-	const borderRightWidth = window.getComputedStyle(boundariesElement).borderRightWidth;
-	const boundingClientRect = boundariesElement.getBoundingClientRect();
-	const boundariesOffsetLeft = boundingClientRect.left + parseInt(borderLeftWidth, 10);
-	const boundariesOffsetRight =
-		boundingClientRect.right - parseInt(borderRightWidth, 10) - parseInt(borderLeftWidth, 10);
-	const boundariesOffsetWidth = boundingClientRect.width;
-	return {
-		left: {
-			left: `${boundariesOffsetLeft}px`,
-		},
-		right: {
-			left: `${boundariesOffsetRight}px`,
-			transform: 'translateX(-100%)',
-		},
-		center: {
-			left: `${boundariesOffsetLeft + boundariesOffsetWidth / 2}px`,
-			transform: 'translateX(-50%)',
-		},
-	};
-}
+import { computed, onMounted, onUnmounted } from 'vue';
+import { ICONS, IconItem } from '../Icons/Icon';
 
-export default defineComponent({
-	name: 'Toast',
-	components: {
-		DsButton,
-		DsCard,
-	},
-	props: {
-		size: {
-			type: String as PropType<ToastSizes>,
-			default: TOAST_SIZES.MEDIUM,
-		},
-		position: {
-			type: String as PropType<ToastPositions>,
-			default: TOAST_POSITIONS.CENTER,
-		},
-		boundariesSelector: {
-			type: [String, Object] as PropType<string | HTMLElement>,
-			default: null,
-		},
-		color: {
-			type: String as PropType<ToastColors>,
-			default: TOAST_COLORS.INFO,
-		},
-		footerPrimaryButtonText: {
-			type: String,
-			default: '',
-		},
-		footerPrimaryButtonIcon: {
-			type: Object,
-			default: null,
-			validator(footerPrimaryButtonIcon: any) {
-				return (
-					footerPrimaryButtonIcon == null ||
-					Object.values(ICONS).includes(toRaw(footerPrimaryButtonIcon))
-				);
-			},
-		},
-		footerSecondaryButtonText: {
-			type: String,
-			default: '',
-		},
-		footerSecondaryButtonIcon: {
-			type: Object,
-			default: null,
-			validator(footerSecondaryButtonIcon: any) {
-				return (
-					footerSecondaryButtonIcon == null ||
-					Object.values(ICONS).includes(toRaw(footerSecondaryButtonIcon))
-				);
-			},
-		},
-		isDisappearing: {
-			type: Boolean,
-			default: true,
-		},
-		disappearingTimeout: {
-			type: String,
-			default: '0',
-			validator(disappearingTimeout: string) {
-				return (
-					(disappearingTimeout === '0' || !isNaN(parseInt(disappearingTimeout, 10))) &&
-					parseInt(disappearingTimeout, 10) >= 0
-				);
-			},
-		},
-	},
-	emits: {
-		close: () => true,
-		'primary-button-click': () => true,
-		'secondary-button-click': () => true,
-	},
-	data() {
-		return {
-			boundariesSelectorElement: null,
-			boundariesSelectorElementResizeObserver: null,
-			styles: {},
-			BUTTON_COLORS: Object.freeze(BUTTON_COLORS),
-			BUTTON_RADIUSES: Object.freeze(BUTTON_RADIUSES),
-			BUTTON_TYPES: Object.freeze(BUTTON_TYPES),
-			TOAST_SIZES: Object.freeze(TOAST_SIZES),
-			TOAST_POSITIONS: Object.freeze(TOAST_POSITIONS),
-		};
-	},
-	computed: {
-		buttonPrimaryColor() {
-			return this.color === TOAST_COLORS.DANGER
-				? BUTTON_COLORS.NEUTRAL
-				: BUTTON_COLORS.PRIMARY;
-		},
-		buttonSecondaryColor() {
-			return this.color === TOAST_COLORS.DANGER
-				? BUTTON_COLORS.DANGER
-				: BUTTON_COLORS.NEUTRAL;
-		},
-		toastPosition() {
-			return `-ds-position-${this.position.toLowerCase()}`;
-		},
-		toastSize() {
-			return `-ds-size-${this.size.toLowerCase()}`;
-		},
-	},
-	mounted() {
-		this.setBoundariesSelectorElement();
-		this.calculateStyles();
-		this.boundariesSelectorElementResizeObserver?.disconnect();
-		this.boundariesSelectorElementResizeObserver = new ResizeObserver(() => {
-			this.calculateStyles();
-		});
-		if (this.boundariesSelectorElement) {
-			this.boundariesSelectorElementResizeObserver.observe(this.boundariesSelectorElement);
-		} else {
-			//window resize does not work for some reason, so we observe body
-			this.boundariesSelectorElementResizeObserver.observe(document.querySelector('body'));
-		}
-		if (this.isDisappearing && this.disappearingTimeout !== '0') {
-			setTimeout(
-				() => this.$emit('close'),
-				parseInt(this.disappearingTimeout, 10) * 1000 + 100, // 100 ms is to let loading bar animation to finish
-			);
-		}
-	},
-	beforeUnmount() {
-		this.boundariesSelectorElementResizeObserver.disconnect();
-		this.boundariesSelectorElementResizeObserver = null;
-	},
-	updated() {
-		const { right, left } = this.$el.getClientRects()[0];
-		if (parseInt(left, 10) < 0 || right > document.documentElement.clientWidth) {
-			this.styles = {
-				left: '50%',
-				transform: 'translateX(-50%)',
-			};
-		}
-	},
-	methods: {
-		calculateStyles() {
-			if (this.boundariesSelectorElement) {
-				this.styles = calculateBoundariesOffset(this.boundariesSelectorElement)[
-					this.position
-				];
-			} else {
-				this.styles = {};
-			}
-		},
-		setBoundariesSelectorElement() {
-			if (typeof this.boundariesSelector === 'string') {
-				this.boundariesSelectorElement =
-					document.querySelector(this.boundariesSelector) || null;
-			} else if (this.boundariesSelector instanceof HTMLElement) {
-				this.boundariesSelectorElement = this.boundariesSelector;
-			}
-		},
-	},
+const {
+	title = '',
+	size = TOAST_SIZES.MEDIUM,
+	position = TOAST_POSITIONS.CENTER,
+	color = TOAST_COLORS.INFO,
+	footerPrimaryButtonText = '',
+	footerPrimaryButtonIcon = null,
+	footerSecondaryButtonText = '',
+	footerSecondaryButtonIcon = null,
+	isDisappearing = true,
+	disappearingTimeout = '0',
+	isClosable = false,
+} = defineProps<{
+	title?: string;
+	size?: ToastSizes;
+	position?: ToastPositions;
+	color?: ToastColors;
+	footerPrimaryButtonText?: string;
+	footerPrimaryButtonIcon?: IconItem | null;
+	footerSecondaryButtonText?: string;
+	footerSecondaryButtonIcon?: IconItem | null;
+	isDisappearing?: boolean;
+	/** Seconds, as a numeric string. `'0'` disables the auto-close. */
+	disappearingTimeout?: string;
+	isClosable?: boolean;
+}>();
+
+const emit = defineEmits<{
+	close: [];
+	'primary-button-click': [];
+	'secondary-button-click': [];
+}>();
+
+defineSlots<{
+	content?: () => any;
+}>();
+
+const buttonPrimaryColor = computed(() =>
+	color === TOAST_COLORS.DANGER ? BUTTON_COLORS.NEUTRAL : BUTTON_COLORS.PRIMARY,
+);
+
+const buttonSecondaryColor = computed(() =>
+	color === TOAST_COLORS.DANGER ? BUTTON_COLORS.DANGER : BUTTON_COLORS.NEUTRAL,
+);
+
+const buttonSize = computed(() =>
+	size === TOAST_SIZES.SMALL ? BUTTON_SIZES.SMALL : BUTTON_SIZES.MEDIUM,
+);
+
+const toastSize = computed(() => `-ds-size-${size.toLowerCase()}`);
+
+const toastPosition = computed(() => `-ds-position-${position.toLowerCase()}`);
+
+const toastColor = computed(() => `-ds-color-${color}`);
+
+let disappearingTimeoutId: ReturnType<typeof setTimeout> | null = null;
+
+const clearDisappearingTimeout = () => {
+	if (disappearingTimeoutId !== null) {
+		clearTimeout(disappearingTimeoutId);
+		disappearingTimeoutId = null;
+	}
+};
+
+// `close` is emitted at most once per toast — dismissing it by hand cancels the pending auto-close
+// so consumers driving a queue (or analytics) off the event never see it twice.
+const close = () => {
+	clearDisappearingTimeout();
+	emit('close');
+};
+
+onMounted(() => {
+	if (isDisappearing && disappearingTimeout !== '0') {
+		disappearingTimeoutId = setTimeout(
+			close,
+			parseInt(disappearingTimeout, 10) * 1000 + 100, // 100 ms is to let loading bar animation to finish
+		);
+	}
 });
+
+onUnmounted(clearDisappearingTimeout);
 </script>

package/lib/js/composables/useFormFieldWithinForm.ts

@@ -1,9 +1,9 @@
 import { inject, MaybeRefOrGetter, ref, Ref, toValue } from 'vue';
 import { FormContextKey, useField } from 'vee-validate';
 
-export function useFormFieldWithinForm<T = string>(
+export function useFormFieldWithinForm<T>(
 	name: MaybeRefOrGetter<string | undefined>,
-	modelValue: Ref<T | undefined>,
+	modelValue: Ref<T>,
 ) {
 	const nameValue = toValue(name);
 	const form = inject(FormContextKey, null);
@@ -14,9 +14,9 @@ export function useFormFieldWithinForm<T = string>(
 		);
 	}
 
-	const field = nameValue ? useField<Array<string>>(nameValue, undefined) : null;
+	const field = nameValue ? useField<T>(nameValue, undefined) : null;
 
-	const value = field ? field.value : modelValue;
+	const value: Ref<T> = field ? field.value : modelValue;
 
 	return {
 		field,

package/lib/js/{components/Form/InputField/useInputFieldWithinForm.ts → composables/useTextFieldWithinForm.ts}

@@ -1,7 +1,12 @@
 import { MaybeRefOrGetter, ref, Ref } from 'vue';
-import { useFormFieldWithinForm } from '../../../composables/useFormFieldWithinForm';
+import { useFormFieldWithinForm } from './useFormFieldWithinForm';
 
-export function useInputFieldWithinForm(
+/**
+ * vee-validate bridge shared by the free-text fields (`InputField`, `TextAreaField`). Validation on
+ * `input` only starts once the field has been blurred, so a half-typed value is never marked
+ * invalid while the user is still filling it in.
+ */
+export function useTextFieldWithinForm(
 	name: MaybeRefOrGetter<string | undefined>,
 	modelValue: Ref<string | undefined>,
 ) {

package/lib/js/index.ts

@@ -53,9 +53,15 @@ export { default as NumberInCircle } from './components/NumberInCircle';
 export { default as DsNumberInCircle } from './components/NumberInCircle';
 export * from './components/NumberInCircle/NumberInCircle.consts';
 export { default as DsPasswordField } from './components/Form/PasswordField';
+export { default as DsPinInputField } from './components/Form/PinInputField';
+export * from './components/Form/PinInputField';
+export { default as DsSelectField } from './components/Form/SelectField';
+export * from './components/Form/SelectField';
 export { default as TabItem } from './components/TabItem';
 export { default as DsTabItem } from './components/TabItem';
 export * from './components/TabItem/TabItem.consts';
+export { default as DsTextAreaField } from './components/Form/TextAreaField';
+export * from './components/Form/TextAreaField';
 export { default as Tile } from './components/Tile';
 export { default as DsTile } from './components/Tile';
 export * from './components/Tile/Tile.consts';

package/lib/js/styles/Shadows/Shadows.stories.scss

@@ -23,6 +23,22 @@
 		box-shadow: $shadow-xl;
 	}
 
+	&.-ds-shadowTopS {
+		box-shadow: $shadow-top-s;
+	}
+
+	&.-ds-shadowTopM {
+		box-shadow: $shadow-top-m;
+	}
+
+	&.-ds-shadowTopL {
+		box-shadow: $shadow-top-l;
+	}
+
+	&.-ds-shadowTopXl {
+		box-shadow: $shadow-top-xl;
+	}
+
 	&.-ds-shadowInsetS {
 		box-shadow: $shadow-inset-s;
 	}