@bethinkpl/design-system 43.0.0 → 44.0.0

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

@@ -0,0 +1,211 @@
+<template>
+	<form-field v-bind="formFieldProps">
+		<template #field="{ fieldId, messageId, labelId }">
+			<div v-if="isLoading" class="ds-pinInputField -ds-loading" aria-busy="true">
+				<ds-icon
+					class="ds-pinInputField__spinner"
+					:icon="ICONS.FAD_SPINNER_THIRD"
+					:size="ICON_SIZES.LARGE"
+					spinning
+				/>
+			</div>
+			<!--
+				`required` reaches a 1px-clipped, `aria-hidden` input inside reka's root, so in a
+				native `<form>` the browser blocks `submit` while the pin is empty and
+				`@submit.prevent` never runs. vee-validate forms need `novalidate`. `SelectField`
+				forwards it the same way.
+			-->
+			<pin-input-root
+				v-else
+				:id="fieldId"
+				class="ds-pinInputField"
+				role="group"
+				:model-value="chars as Array<string>"
+				:otp="otp"
+				:type="type"
+				:required="formFieldProps.hasRequiredIndicator"
+				:aria-labelledby="formFieldProps.label ? labelId : undefined"
+				:aria-label="formFieldProps.label ? undefined : ariaLabel"
+				:aria-describedby="hasMessage ? messageId : undefined"
+				@complete="onPinComplete"
+				@focusout="onFieldFocusOut"
+				@update:model-value="onCharsUpdate"
+			>
+				<pin-input-input
+					v-for="index in length"
+					:key="index"
+					class="ds-pinInputField__item"
+					:index="index - 1"
+				/>
+			</pin-input-root>
+		</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';
+
+.ds-pinInputField {
+	align-items: center;
+	align-self: stretch;
+	display: flex;
+	gap: $space-4;
+
+	&.-ds-loading {
+		flex-direction: column;
+		min-height: 48px;
+	}
+
+	&__item {
+		@include formText-m-default-bold;
+
+		background: $color-default-background;
+		border: $border-xs solid $color-neutral-border-strong;
+		border-radius: $radius-s;
+		box-shadow: $shadow-inset-m;
+		color: $color-neutral-text-heavy;
+		flex: 0 1 48px;
+		height: 48px;
+		max-width: 48px;
+		min-width: 24px;
+		outline: none;
+		padding: 0 $space-3;
+		text-align: center;
+
+		&:focus {
+			border-color: $color-primary-border;
+		}
+
+		&:hover:not(:focus) {
+			border-color: $color-neutral-border-strong-hovered;
+		}
+	}
+
+	&__spinner {
+		color: $color-neutral-icon;
+	}
+}
+</style>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import { PinInputInput, PinInputRoot } from 'reka-ui';
+import FormField, { FORM_FIELD_STATES, FormFieldProps } from '../FormField';
+import { extractFormFieldProps } from '../FormField/FormField.utils';
+import DsIcon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
+import {
+	PIN_INPUT_FIELD_DEFAULT_LENGTH,
+	PIN_INPUT_FIELD_STATES,
+	PIN_INPUT_FIELD_TYPES,
+} from './PinInputField.consts';
+import { PinInputFieldProps, PinInputFieldSlots } from './PinInputField.types';
+import { PinChars, toPinChars } from './PinInputField.utils';
+import { usePinInputFieldWithinForm } from './usePinInputFieldWithinForm';
+
+const {
+	length = PIN_INPUT_FIELD_DEFAULT_LENGTH,
+	state = PIN_INPUT_FIELD_STATES.DEFAULT,
+	otp = true,
+	type = PIN_INPUT_FIELD_TYPES.NUMBER,
+	ariaLabel,
+	name,
+	...rest
+} = defineProps<PinInputFieldProps>();
+
+const slots = defineSlots<PinInputFieldSlots>();
+
+const emit = defineEmits<{
+	/** Fires whenever the pin becomes complete, including programmatic fills. */
+	complete: [value: string];
+}>();
+
+/** The filled boxes joined, in order. A cleared middle box shortens it (`1 2 _ 4 5 6` → `'12456'`). */
+const modelValue = defineModel<string>();
+
+const { value, errors, onComplete, onBlur } = usePinInputFieldWithinForm(() => name, modelValue);
+
+// The array, not the joined string, is the source of truth: clearing a middle box leaves a hole in
+// it (`delete` in `type: 'number'` mode, `''` in `type: 'text'` mode), so rebuilding it from the
+// string would shift the later boxes leftwards. In numeric mode reka also stores numbers rather than
+// strings, which its own `modelValue` type does not admit — hence the cast on the binding.
+const chars = ref<PinChars>(toPinChars(value.value, length));
+
+// reka rewrites the whole array on every keystroke; `join('')` flattens the numbers it stores in
+// numeric mode and the holes a cleared box leaves behind.
+function onCharsUpdate(next: PinChars) {
+	chars.value = next;
+	value.value = next.join('');
+}
+
+// Inbound only: parent `v-model`, a vee-validate reset, or a shrinking `length`. The write from
+// `onCharsUpdate` lands here too, but is already in sync — rebuilding would collapse a cleared
+// middle box onto its neighbours.
+watch([value, () => length], ([next]) => {
+	const nextValue = next ?? '';
+
+	if (chars.value.length <= length && chars.value.join('') === nextValue) {
+		return;
+	}
+
+	chars.value = toPinChars(next, length);
+
+	// A shrink drops the surplus characters, and the model has to follow: they no longer have a box
+	// to edit them in.
+	const joined = chars.value.join('');
+
+	if (joined !== nextValue) {
+		value.value = joined;
+	}
+});
+
+const formFieldProps = computed<FormFieldProps>(() => {
+	// this is needed to avoid passing modelValue to FormField as prop
+	return extractFormFieldProps(
+		{
+			...rest,
+			state: state === PIN_INPUT_FIELD_STATES.ERROR ? FORM_FIELD_STATES.ERROR : undefined,
+		},
+		errors.value,
+	);
+});
+
+const isLoading = computed(() => state === PIN_INPUT_FIELD_STATES.LOADING);
+
+// Avoids pointing `aria-describedby` at a message element that is never rendered.
+const hasMessage = computed(() => !!(formFieldProps.value.messageText || slots.message));
+
+// Boxes blur on every hop between boxes; only focus leaving the field is a real blur.
+function onFieldFocusOut(event: FocusEvent) {
+	const root = event.currentTarget as HTMLElement | null;
+
+	if (root?.contains(event.relatedTarget as Node | null)) {
+		return;
+	}
+
+	onBlur(event);
+}
+
+function onPinComplete() {
+	onComplete(new Event('blur'));
+	emit('complete', chars.value.join(''));
+}
+</script>

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

@@ -0,0 +1,6 @@
+import PinInputField from './PinInputField.vue';
+
+export * from './PinInputField.consts';
+export * from './PinInputField.types';
+
+export default PinInputField;

package/lib/js/components/Form/PinInputField/usePinInputFieldWithinForm.ts

@@ -0,0 +1,29 @@
+import { computed, MaybeRefOrGetter, Ref } from 'vue';
+import { useFormFieldWithinForm } from '../../../composables/useFormFieldWithinForm';
+
+/**
+ * Pin counterpart of `useTextFieldWithinForm`. A pin has no single blur — its boxes blur on every
+ * hop between boxes — so the field is marked touched when the pin is completed or when focus leaves
+ * the field entirely.
+ */
+export function usePinInputFieldWithinForm(
+	name: MaybeRefOrGetter<string | undefined>,
+	modelValue: Ref<string | undefined>,
+) {
+	const { value, errors, field } = useFormFieldWithinForm(name, modelValue);
+
+	const markTouched = (event: Event) => {
+		field?.handleBlur(event, true);
+	};
+
+	// `meta.touched` covers both callers below and `handleSubmit`, so a half-typed pin is never
+	// marked invalid but a submitted incomplete one still shows its error.
+	const visibleErrors = computed(() => (field?.meta.touched ? errors.value : []));
+
+	return {
+		value,
+		errors: visibleErrors,
+		onComplete: markTouched,
+		onBlur: markTouched,
+	};
+}

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

@@ -174,7 +174,6 @@ export const WithGroups: Story = {
 		...Interactive.args,
 		options: GROUPED_OPTIONS,
 	},
-	parameters: {},
 };
 
 export const WithIconsAndEyebrow: Story = {
@@ -184,7 +183,6 @@ export const WithIconsAndEyebrow: Story = {
 		options: RICH_OPTIONS,
 		placeholder: 'Wybierz status',
 	},
-	parameters: {},
 };
 
 /**
@@ -230,7 +228,6 @@ export const LongList: Story = {
 		options: LONG_OPTIONS,
 		placeholder: 'Wybierz opcję',
 	},
-	parameters: {},
 };
 
 /**
@@ -273,7 +270,6 @@ export const Disabled: Story = {
 		...Interactive.args,
 		state: FORM_FIELD_STATES.DISABLED,
 	},
-	parameters: {},
 };
 
 export const Error: Story = {
@@ -283,5 +279,4 @@ export const Error: Story = {
 		state: FORM_FIELD_STATES.ERROR,
 		messageText: 'Error message text',
 	},
-	parameters: {},
 };

package/lib/js/components/Form/SelectField/useSelectFieldWithinForm.ts

@@ -3,7 +3,7 @@ import { useFormFieldWithinForm } from '../../../composables/useFormFieldWithinF
 import { SelectFieldValue } from './SelectField.types';
 
 /**
- * Select counterpart of `useInputFieldWithinForm`. A select has no `input` event, so closing
+ * Select counterpart of `useTextFieldWithinForm`. A select has no `input` event, so closing
  * the listbox stands in for blur — that is when the field is marked touched.
  *
  * Revalidation on selection needs no handler here: vee-validate's `useField` defaults to

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

@@ -0,0 +1,341 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import TextAreaField from './TextAreaField.vue';
+import TextAreaFieldAutosized from './TextAreaFieldAutosized.vue';
+import { ComputedRef, Ref } from 'vue';
+import { FORM_FIELD_STATES } from '../FormField';
+import { ComponentProps } from 'vue-component-type-helpers';
+import { FormMeta, useForm } from 'vee-validate';
+import { waitForExpectShort } from '../../../tests/helpers';
+
+const fieldId = 'form-field-v-0';
+const messageId = `${fieldId}-message`;
+
+function setup({ props }: { props?: ComponentProps<typeof TextAreaField> } = {}) {
+	return mount(TextAreaField, { props });
+}
+
+describe('TextAreaField', () => {
+	it('should render', () => {
+		const wrapper = setup({
+			props: {
+				label: 'Label',
+				messageText: 'Message text',
+			},
+		});
+
+		expect(wrapper.find('.ds-textAreaField').exists()).toBe(true);
+		expect(wrapper.find('textarea').exists()).toBe(true);
+		expect(wrapper.find('label').text()).toContain('Label');
+		expect(wrapper.find(`#${messageId}`).text()).toBe('Message text');
+	});
+
+	it('should handle value updates', async () => {
+		const onUpdate = vi.fn();
+		const wrapper = setup({
+			props: {
+				label: 'Label',
+				modelValue: 'initial value',
+				'onUpdate:modelValue': onUpdate,
+			},
+		});
+
+		const textarea = wrapper.find<HTMLTextAreaElement>('textarea');
+		expect(textarea.element.value).toBe('initial value');
+
+		await textarea.setValue('updated value');
+
+		expect(onUpdate).toHaveBeenCalledWith('updated value');
+		expect(textarea.element.value).toBe('updated value');
+	});
+
+	it('should render with accessible ids', () => {
+		const wrapper = setup({
+			props: {
+				label: 'Label',
+				messageText: 'Message text',
+			},
+		});
+
+		expect(wrapper.find('label').attributes('for')).toBe(fieldId);
+
+		const textarea = wrapper.find('textarea');
+
+		expect(textarea.attributes('id')).toBe(fieldId);
+		expect(textarea.attributes('aria-describedby')).toBe(messageId);
+		expect(wrapper.find(`#${messageId}`).exists()).toBe(true);
+	});
+
+	it('should set aria-describedby only when a message is rendered', () => {
+		const wrapper = setup({
+			props: {
+				label: 'Label',
+			},
+		});
+
+		expect(wrapper.find('textarea').attributes('aria-describedby')).toBeUndefined();
+	});
+
+	it('should pass inputProps to the textarea element', () => {
+		const inputProps = {
+			placeholder: 'Enter text',
+			disabled: true,
+			maxlength: 500,
+			'aria-label': 'Text area field',
+		};
+
+		const wrapper = setup({
+			props: {
+				label: 'Label',
+				inputProps,
+			},
+		});
+
+		const textarea = wrapper.find('textarea');
+		expect(textarea.attributes('placeholder')).toBe(inputProps.placeholder);
+		expect(textarea.attributes('disabled')).toBeDefined();
+		expect(textarea.attributes('maxlength')).toBe('500');
+		expect(textarea.attributes('aria-label')).toBe(inputProps['aria-label']);
+	});
+
+	it('should render 3 rows by default', () => {
+		const wrapper = setup();
+
+		expect(wrapper.find('textarea').attributes('rows')).toBe('3');
+	});
+
+	it('should let inputProps override the default rows', () => {
+		const wrapper = setup({
+			props: {
+				inputProps: {
+					rows: 6,
+				},
+			},
+		});
+
+		expect(wrapper.find('textarea').attributes('rows')).toBe('6');
+	});
+
+	it.each([
+		{
+			state: FORM_FIELD_STATES.DISABLED,
+			expectedClass: '-ds-disabled',
+		},
+		{
+			state: FORM_FIELD_STATES.ERROR,
+			expectedClass: '-ds-error',
+		},
+	])('should handle state: $state', ({ state, expectedClass }) => {
+		const wrapper = setup({
+			props: {
+				state,
+			},
+		});
+		expect(wrapper.find('.ds-textAreaField').classes()).toContain(expectedClass);
+	});
+
+	it('should make textarea disabled when state is DISABLED', () => {
+		const wrapper = setup({
+			props: {
+				state: FORM_FIELD_STATES.DISABLED,
+			},
+		});
+		const textarea = wrapper.find('textarea');
+		expect(textarea.attributes('disabled')).toBeDefined();
+	});
+
+	describe('autoresizing', () => {
+		it('should render a plain textarea by default', () => {
+			const wrapper = setup();
+
+			expect(wrapper.findComponent(TextAreaFieldAutosized).exists()).toBe(false);
+			expect(wrapper.find('.ds-textAreaField').classes()).not.toContain('-ds-autoresizing');
+			expect(wrapper.find('textarea').exists()).toBe(true);
+		});
+
+		it('should render the autosized textarea when isAutoresizing', () => {
+			const wrapper = setup({
+				props: {
+					isAutoresizing: true,
+				},
+			});
+
+			expect(wrapper.findComponent(TextAreaFieldAutosized).exists()).toBe(true);
+			expect(wrapper.find('.ds-textAreaField').classes()).toContain('-ds-autoresizing');
+		});
+
+		it('should keep the field plumbing when autoresizing', async () => {
+			const onUpdate = vi.fn();
+			const wrapper = setup({
+				props: {
+					label: 'Label',
+					messageText: 'Message text',
+					isAutoresizing: true,
+					inputProps: {
+						rows: 4,
+					},
+					'onUpdate:modelValue': onUpdate,
+				},
+			});
+
+			const textarea = wrapper.find('textarea');
+			expect(textarea.attributes('id')).toBe(fieldId);
+			expect(textarea.attributes('aria-describedby')).toBe(messageId);
+			expect(textarea.attributes('rows')).toBe('4');
+			expect(textarea.classes()).toContain('ds-textAreaField__input');
+
+			await textarea.setValue('updated value');
+
+			expect(onUpdate).toHaveBeenCalledWith('updated value');
+		});
+	});
+
+	describe('with vee-validate', () => {
+		const fieldName = 'siema';
+		const initialValue = 'siemanko!';
+		function setupWithForm(props?: ComponentProps<typeof TextAreaField>) {
+			let controlledValuesRef: Ref<{ siema: string }> | undefined;
+			let errorsRef: ComputedRef<Partial<Record<'siema', string | undefined>>> | undefined;
+			let metaRef: Ref<FormMeta<{ siema: string }>> | undefined;
+
+			const FormComponent = {
+				template: `
+				<form>
+					<TextAreaField
+						v-bind="props"
+						:name="name"
+					/>
+				</form>
+			`,
+				components: { TextAreaField },
+				setup() {
+					const { controlledValues, errors, meta } = useForm({
+						initialValues: {
+							[fieldName]: initialValue,
+						},
+						validationSchema: {
+							siema: (val: string) => (val.length < 5 ? 'Too short' : true),
+						},
+					});
+
+					controlledValuesRef = controlledValues;
+					errorsRef = errors;
+					metaRef = meta;
+
+					return {
+						name: fieldName,
+						props,
+					};
+				},
+			};
+
+			return {
+				wrapper: mount(FormComponent),
+				controlledValuesRef,
+				errorsRef,
+				metaRef,
+			};
+		}
+
+		it('should bind textarea value with vee-validate form values', async () => {
+			const { wrapper, controlledValuesRef } = setupWithForm();
+
+			const textarea = wrapper.find('textarea');
+
+			expect(textarea.element.value).toBe(initialValue);
+			expect(controlledValuesRef?.value[fieldName]).toBe(initialValue);
+
+			const newValue = 'no cześć!';
+			await textarea.setValue(newValue);
+
+			expect(textarea.element.value).toBe(newValue);
+			expect(controlledValuesRef?.value[fieldName]).toBe(newValue);
+		});
+
+		it('should call onBlur and mark form as touched on blur', async () => {
+			const onBlur = vi.fn();
+			const { wrapper, metaRef } = setupWithForm({
+				inputProps: {
+					onBlur,
+				},
+			});
+			expect(metaRef?.value.touched).toBe(false);
+
+			const textarea = wrapper.find('textarea');
+			await textarea.trigger('blur');
+
+			expect(onBlur).toHaveBeenCalled();
+			expect(metaRef?.value.touched).toBe(true);
+		});
+
+		it('should call onInput and show error message', async () => {
+			const onInput = vi.fn();
+			const { wrapper, errorsRef } = setupWithForm({
+				inputProps: {
+					onInput,
+				},
+			});
+
+			const textarea = wrapper.find('textarea');
+			await textarea.setValue('test');
+
+			expect(onInput).toHaveBeenCalled();
+
+			await textarea.trigger('blur');
+
+			await waitForExpectShort(() => {
+				expect(errorsRef?.value?.siema).toBeDefined();
+			});
+
+			expect(wrapper.find('.ds-textAreaField').classes()).toContain('-ds-error');
+			expect(wrapper.find(`#${messageId}`).text()).toBe('Too short');
+
+			await textarea.setValue('valid value');
+
+			await waitForExpectShort(() => {
+				expect(errorsRef?.value?.siema).toBeUndefined();
+			});
+		});
+
+		it('should bind the autosized textarea with vee-validate form values', async () => {
+			const { wrapper, controlledValuesRef } = setupWithForm({ isAutoresizing: true });
+
+			const textarea = wrapper.find('textarea');
+			expect(textarea.element.value).toBe(initialValue);
+
+			const newValue = 'no cześć!';
+			await textarea.setValue(newValue);
+
+			expect(controlledValuesRef?.value[fieldName]).toBe(newValue);
+		});
+
+		it('should throw an error if used outside of a form context', () => {
+			expect(() => {
+				setup({
+					props: {
+						name: 'siema',
+					},
+				});
+			}).toThrowError();
+		});
+
+		it('should keep an explicit state and message over a vee-validate error', async () => {
+			const { wrapper, errorsRef } = setupWithForm({
+				state: FORM_FIELD_STATES.SUCCESS,
+				messageText: 'Success message',
+			});
+
+			const textarea = wrapper.find('textarea');
+			await textarea.setValue('test');
+
+			await textarea.trigger('blur');
+
+			await waitForExpectShort(() => {
+				expect(errorsRef?.value?.siema).toBeDefined();
+			});
+
+			expect(wrapper.find(`#${messageId}`).classes()).toContain('-ds-success');
+			expect(wrapper.find(`#${messageId}`).text()).toBe('Success message');
+		});
+	});
+});