@bethinkpl/design-system 43.0.0 → 44.0.0

package/lib/js/components/Form/TextAreaField/TextAreaField.stories.ts

@@ -0,0 +1,99 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import TextAreaField from './TextAreaField.vue';
+import HelpButton from '../../Buttons/HelpButton/HelpButton.vue';
+import Modal from '../../Modals/Modal';
+import { args, argTypes } from '../FormField/FormField.stories.shared';
+import { FORM_FIELD_STATES } from '../FormField/FormField.consts';
+import { reactive, toRefs } from 'vue';
+
+const meta: Meta<typeof TextAreaField> = {
+	title: 'Components/Form/TextAreaField',
+	component: TextAreaField,
+	render: (args) => ({
+		components: { TextAreaField, HelpButton, Modal },
+		setup() {
+			const { help, labelAside, message, fieldStatus, ...restRefs } = toRefs(args);
+			const props = reactive({ ...restRefs });
+
+			return {
+				props,
+				labelAside,
+				fieldStatus,
+				message,
+				help,
+				FORM_FIELD_STATES,
+			};
+		},
+		data: () => ({
+			value: '',
+		}),
+		template: `<TextAreaField v-bind="props" v-model="value">
+			<template v-if="help" #help>
+				<HelpButton :is-disabled="props.state === FORM_FIELD_STATES.DISABLED" modal-title="Help modal title">
+					<template #modalContent>
+						Modal
+					</template>
+				</HelpButton>
+			</template>
+			<template #labelAside v-if="labelAside">
+				<div v-html="labelAside" />
+			</template>
+			<template #fieldStatus v-if="fieldStatus">
+				<div v-html="fieldStatus" />
+			</template>
+			<template #message v-if="message">
+				<div v-if="message" v-html="message" />
+			</template>
+		</TextAreaField>`,
+	}),
+	argTypes: {
+		...argTypes,
+		inputProps: {
+			control: 'object',
+		},
+		isAutoresizing: {
+			control: 'boolean',
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof TextAreaField>;
+
+export const Interactive: Story = {
+	args: {
+		...args,
+		isAutoresizing: false,
+		inputProps: {
+			rows: 3,
+			placeholder: 'TextArea placeholder',
+		},
+	},
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=13216-6572',
+		},
+	},
+};
+
+/**
+ * The field grows with its content instead of showing the resize handle. `rows` stays the starting
+ * height, and the field grows up to 500px, after which it scrolls.
+ */
+export const Autoresizing: Story = {
+	...Interactive,
+	args: {
+		...Interactive.args,
+		isAutoresizing: true,
+	},
+};
+
+export const Error: Story = {
+	...Interactive,
+	args: {
+		...Interactive.args,
+		state: FORM_FIELD_STATES.ERROR,
+		messageText: 'Error message text',
+	},
+};

package/lib/js/components/Form/TextAreaField/TextAreaField.types.ts

@@ -0,0 +1,23 @@
+import { TextareaHTMLAttributes } from 'vue';
+import { FormFieldProps, FormFieldSlots } from '../FormField';
+
+export interface TextAreaFieldProps extends FormFieldProps {
+	/**
+	 * Forwarded to the `<textarea>`, so this is also where `rows` (default 3), `placeholder` and
+	 * `maxlength` go. Overrides the defaults the component applies.
+	 */
+	inputProps?: TextareaHTMLAttributes;
+	/**
+	 * Grows the field with its content instead of showing the resize handle. `rows` stays the
+	 * starting height, and the field grows up to 500px, after which it scrolls.
+	 *
+	 * @default false
+	 */
+	isAutoresizing?: boolean;
+	/**
+	 * vee-validate field name. Requires a surrounding form context, e.g. from `useForm()`.
+	 */
+	name?: string;
+}
+
+export type TextAreaFieldSlots = Omit<FormFieldSlots, 'field'>;

package/lib/js/components/Form/TextAreaField/TextAreaField.vue

@@ -0,0 +1,190 @@
+<template>
+	<form-field v-bind="formFieldProps">
+		<template #field="{ fieldId, messageId }">
+			<div
+				:class="[
+					'ds-textAreaField',
+					{
+						'-ds-autoresizing': isAutoresizing,
+						'-ds-error': formFieldProps.state === FORM_FIELD_STATES.ERROR,
+						'-ds-disabled': isDisabled,
+					},
+				]"
+			>
+				<text-area-field-autosized
+					v-if="isAutoresizing"
+					v-bind="finalInputProps"
+					:id="fieldId"
+					v-model="value"
+					class="ds-textAreaField__input"
+					:aria-describedby="hasMessage ? messageId : undefined"
+				/>
+				<textarea
+					v-else
+					v-bind="finalInputProps"
+					:id="fieldId"
+					v-model="value"
+					class="ds-textAreaField__input"
+					:aria-describedby="hasMessage ? messageId : undefined"
+				/>
+			</div>
+		</template>
+		<!-- begin: FormField slots -->
+		<template v-if="$slots.help" #help>
+			<slot name="help" />
+		</template>
+		<template v-if="$slots.labelAside" #labelAside>
+			<slot name="labelAside" />
+		</template>
+		<template v-if="$slots.message" #message="{ messageId }">
+			<slot name="message" :message-id="messageId" />
+		</template>
+		<template v-if="$slots.fieldStatus" #fieldStatus>
+			<slot name="fieldStatus" />
+		</template>
+		<!-- end: FormField slots -->
+	</form-field>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/radiuses';
+@import '../../../../styles/settings/borders';
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/typography/tokens';
+@import '../../../../styles/settings/shadows';
+
+$input-padding: $space-4;
+$autoresizing-max-height: 500px;
+
+.ds-textAreaField {
+	$root: &;
+
+	align-self: stretch;
+	background: $color-default-background;
+	border: $border-xs solid $color-neutral-border-strong;
+	border-radius: $radius-s;
+	box-shadow: $shadow-inset-m;
+	display: flex;
+	overflow: hidden;
+
+	&__input {
+		@include formText-s-default-regular;
+
+		background: transparent;
+		border: none;
+		color: $color-neutral-text-heavy;
+		flex: 1;
+		min-height: 32px;
+		min-width: 0;
+		outline: none;
+		padding: $input-padding;
+		resize: vertical;
+
+		&::placeholder {
+			color: $color-neutral-text-weak;
+		}
+	}
+
+	&:focus-within {
+		border-color: $color-primary-border;
+	}
+
+	&.-ds-error:not(:focus-within) {
+		border-color: $color-danger-border;
+	}
+
+	&:hover:not(.-ds-disabled):not(:focus-within) {
+		border-color: $color-neutral-border-strong-hovered;
+	}
+
+	&.-ds-autoresizing {
+		#{$root}__input {
+			max-height: $autoresizing-max-height;
+			// The autosize writes an explicit `height`, which makes the browser ignore `rows`, so
+			// the starting height has to be restated here. Capped as well, since `min-height` would
+			// otherwise win over `max-height`.
+			min-height: min(
+				#{$autoresizing-max-height},
+				calc(v-bind(rows) * #{$typography-line-height-2xs} + #{$input-padding * 2})
+			);
+			overflow-y: auto;
+			resize: none;
+		}
+	}
+
+	&.-ds-disabled {
+		border-color: $color-neutral-border-strong-disabled;
+		box-shadow: none;
+
+		#{$root}__input {
+			color: $color-neutral-text-heavy-disabled;
+
+			&::placeholder {
+				color: $color-neutral-text-weak-disabled;
+			}
+		}
+	}
+}
+</style>
+
+<script lang="ts" setup>
+import { computed, TextareaHTMLAttributes } from 'vue';
+import FormField, { FORM_FIELD_STATES, FormFieldProps } from '../FormField';
+import { extractFormFieldProps } from '../FormField/FormField.utils';
+import TextAreaFieldAutosized from './TextAreaFieldAutosized.vue';
+import { TextAreaFieldProps, TextAreaFieldSlots } from './TextAreaField.types';
+import { useTextFieldWithinForm } from '../../../composables/useTextFieldWithinForm';
+
+const DEFAULT_ROWS = 3;
+
+const { inputProps, isAutoresizing = false, name, ...rest } = defineProps<TextAreaFieldProps>();
+
+const slots = defineSlots<TextAreaFieldSlots>();
+const modelValue = defineModel<string>();
+
+const {
+	value,
+	errors,
+	onInput: onFormFieldInput,
+	onBlur: onFormFieldBlur,
+} = useTextFieldWithinForm(() => name, modelValue);
+
+const { formFieldProps, isDisabled, hasMessage } = useFormFieldState();
+const { finalInputProps } = useTextArea();
+
+// Used by the `min-height` of the autoresizing field, see the style block.
+const rows = computed(() => finalInputProps.value.rows);
+
+function useFormFieldState() {
+	const formFieldProps = computed<FormFieldProps>(() =>
+		// this is needed to avoid passing modelValue to FormField as prop
+		extractFormFieldProps(rest, errors.value),
+	);
+
+	const isDisabled = computed(() => formFieldProps.value.state === FORM_FIELD_STATES.DISABLED);
+
+	// Avoids pointing `aria-describedby` at a message element that is never rendered.
+	const hasMessage = computed(() => !!(formFieldProps.value.messageText || slots.message));
+
+	return { formFieldProps, isDisabled, hasMessage };
+}
+
+function useTextArea() {
+	const finalInputProps = computed<TextareaHTMLAttributes>(() => ({
+		disabled: isDisabled.value,
+		rows: DEFAULT_ROWS,
+		...inputProps,
+		onInput: (event: Event) => {
+			onFormFieldInput();
+			inputProps?.onInput?.(event);
+		},
+		onBlur: (event: FocusEvent) => {
+			onFormFieldBlur(event);
+			inputProps?.onBlur?.(event);
+		},
+	}));
+
+	return { finalInputProps };
+}
+</script>

package/lib/js/components/Form/TextAreaField/TextAreaFieldAutosized.vue

@@ -0,0 +1,19 @@
+<template>
+	<textarea ref="textarea" v-model="model" />
+</template>
+
+<script lang="ts" setup>
+import { computed, useTemplateRef } from 'vue';
+import { useTextareaAutosize } from '@vueuse/core';
+
+const model = defineModel<string>();
+
+const textareaEl = useTemplateRef<HTMLTextAreaElement>('textarea');
+
+// Writes `height`, so the `min-height` / `max-height` from the CSS stay in charge of the bounds —
+// `min-height` would otherwise win over `max-height` and let the field grow past the cap.
+useTextareaAutosize({
+	element: textareaEl,
+	input: computed(() => model.value ?? ''),
+});
+</script>

package/lib/js/components/Form/TextAreaField/index.ts

@@ -0,0 +1,5 @@
+import TextAreaField from './TextAreaField.vue';
+
+export * from './TextAreaField.types';
+
+export default TextAreaField;

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