@bethinkpl/design-system 26.15.1 → 27.0.0

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

@@ -0,0 +1,274 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import InputField from './InputField.vue';
+import Icon, { ICONS } from '../../Icons/Icon';
+import { ComputedRef, h, Ref } from 'vue';
+import { FORM_FIELD_STATES } from '../FormField';
+import { ComponentProps, ComponentSlots } 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,
+	slots,
+}: {
+	props?: ComponentProps<typeof InputField>;
+	slots?: ComponentSlots<typeof InputField>;
+} = {}) {
+	return mount(InputField, {
+		props,
+		slots: {
+			action() {
+				return [];
+			},
+			...slots,
+		},
+	});
+}
+
+describe('InputField', () => {
+	it('should render', () => {
+		const wrapper = setup({
+			props: {
+				label: 'Label',
+				messageText: 'Message text',
+				suffixText: 'Suffix text',
+				leftIcon: ICONS.FA_TAG,
+			},
+			slots: {
+				action: () => [h('button', { id: 'test-action' }, () => 'Action Button')],
+			},
+		});
+
+		expect(wrapper.exists()).toBe(true);
+		expect(wrapper.find('.ds-inputField__suffixText').text()).toBe('Suffix text');
+		expect(wrapper.findComponent<typeof Icon>('.ds-inputField__leftIcon').props().icon).toEqual(
+			ICONS.FA_TAG,
+		);
+		expect(wrapper.find('#test-action').exists()).toBe(true);
+	});
+
+	it('should handle value updates', async () => {
+		const onUpdate = vi.fn();
+		const wrapper = setup({
+			props: {
+				label: 'Label',
+				modelValue: 'initial value',
+				'onUpdate:modelValue': onUpdate,
+			},
+		});
+
+		const input = wrapper.find<HTMLInputElement>('input');
+		expect(input.element.value).toBe('initial value');
+
+		await input.setValue('updated value');
+
+		expect(onUpdate).toHaveBeenCalledWith('updated value');
+		expect(input.element.value).toBe('updated value');
+	});
+
+	it('should render with accessible ids', () => {
+		const wrapper = setup({
+			props: {
+				label: 'Label',
+				messageText: 'Message text',
+			},
+		});
+		expect(wrapper.exists()).toBe(true);
+		expect(wrapper.find('label').attributes('for')).toBe(fieldId);
+
+		const input = wrapper.find('input');
+
+		expect(input.attributes('id')).toBe(fieldId);
+		expect(input.attributes('aria-describedby')).toBe(messageId);
+		expect(wrapper.find(`#${messageId}`).exists()).toBe(true);
+	});
+
+	it('should pass inputProps to the input element', () => {
+		const inputProps = {
+			placeholder: 'Enter text',
+			disabled: true,
+			'aria-label': 'Input field',
+		};
+
+		const wrapper = setup({
+			props: {
+				label: 'Label',
+				inputProps,
+			},
+		});
+
+		const input = wrapper.find('input');
+		expect(input.attributes('placeholder')).toBe(inputProps.placeholder);
+		expect(input.attributes('disabled')).toBeDefined();
+		expect(input.attributes('aria-label')).toBe(inputProps['aria-label']);
+	});
+
+	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-inputField').classes()).toContain(expectedClass);
+	});
+
+	it('should make input disabled when state is DISABLED', () => {
+		const wrapper = setup({
+			props: {
+				state: FORM_FIELD_STATES.DISABLED,
+			},
+		});
+		const input = wrapper.find('input');
+		expect(input.attributes('disabled')).toBeDefined();
+	});
+
+	describe('with vee-validate', () => {
+		const fieldName = 'siema';
+		const initialValue = 'siemanko!';
+		function setupWithForm(props?: ComponentProps<typeof InputField>) {
+			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>
+					<InputField
+						v-bind="props"
+						:name="name"
+					/>
+				</form>
+			`,
+				components: { InputField },
+				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 input value with vee-validate form values', async () => {
+			const { wrapper, controlledValuesRef } = setupWithForm();
+
+			const input = wrapper.find('input');
+
+			expect(input.element.value).toBe(initialValue);
+			expect(controlledValuesRef?.value[fieldName]).toBe(initialValue);
+
+			const newValue = 'no cześć!';
+			await input.setValue(newValue);
+
+			expect(input.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 input = wrapper.find('input');
+			await input.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 input = wrapper.find('input');
+			await input.setValue('test');
+
+			expect(onInput).toHaveBeenCalled();
+
+			await input.trigger('blur');
+
+			await waitForExpectShort(() => {
+				expect(errorsRef?.value?.siema).toBeDefined();
+			});
+
+			expect(wrapper.find('.ds-inputField').classes()).toContain('-ds-error');
+			expect(wrapper.find(`#${messageId}`).text()).toBe('Too short');
+
+			await input.setValue('valid value');
+
+			await waitForExpectShort(() => {
+				expect(errorsRef?.value?.siema).toBeUndefined();
+			});
+		});
+
+		it('should throw an error if used outside of a form context', () => {
+			expect(() => {
+				setup({
+					props: {
+						name: 'siema',
+					},
+				});
+			}).toThrowError();
+		});
+
+		it('overrides state and message on vee-validate form error', async () => {
+			const { wrapper, errorsRef } = setupWithForm({
+				state: FORM_FIELD_STATES.SUCCESS,
+				messageText: 'Success message',
+			});
+
+			const input = wrapper.find('input');
+			await input.setValue('test');
+
+			await input.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');
+		});
+	});
+});

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

@@ -0,0 +1,98 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import InputField from './InputField.vue';
+import HelpButton from '../../Buttons/HelpButton/HelpButton.vue';
+import Modal from '../../Modals/Modal';
+import { ICONS } from '../../Icons/Icon';
+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 InputField> = {
+	title: 'Components/Form/InputField',
+	component: InputField,
+	render: (args) => ({
+		components: { InputField, HelpButton, Modal },
+		setup() {
+			const { help, labelAside, message, fieldStatus, action, ...restRefs } = toRefs(args);
+			const props = reactive({ ...restRefs });
+
+			return {
+				props,
+				labelAside,
+				fieldStatus,
+				message,
+				help,
+				action,
+				FORM_FIELD_STATES,
+				ICONS,
+			};
+		},
+		data: () => ({
+			value: '',
+		}),
+		template: `<InputField v-bind="props" :left-icon="props.leftIcon ? ICONS[props.leftIcon] : null" 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>
+			<template #action v-if="action">
+				<div v-html="action" />
+			</template>
+		</InputField>`,
+	}),
+	argTypes: {
+		...argTypes,
+		leftIcon: {
+			control: 'select',
+			options: [null, ...Object.keys(ICONS)],
+		},
+		suffixText: {
+			control: 'text',
+		},
+		action: {
+			control: 'text',
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof InputField>;
+
+export const Interactive: Story = {
+	args: {
+		...args,
+		leftIcon: null,
+		suffixText: '%',
+		action: 'Action',
+		inputProps: {
+			placeholder: 'Placeholder',
+		},
+	},
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=13198-38645&t=BlkZV83eerbMSMyv-4',
+		},
+	},
+};
+
+export const Error: Story = {
+	...Interactive,
+	args: {
+		...Interactive.args,
+		state: FORM_FIELD_STATES.ERROR,
+		messageText: 'Error message text',
+	},
+};

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

@@ -0,0 +1,14 @@
+import { InputHTMLAttributes } from 'vue';
+import { FormFieldProps, FormFieldSlots } from '../FormField';
+import { IconItem } from '../../Icons/Icon';
+
+export interface InputFieldProps extends FormFieldProps {
+	inputProps?: InputHTMLAttributes;
+	leftIcon?: IconItem | null;
+	suffixText?: string;
+	name?: string;
+}
+
+export interface InputFieldSlots extends Omit<FormFieldSlots, 'field'> {
+	action?: () => any;
+}

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

@@ -0,0 +1,175 @@
+<template>
+	<form-field v-bind="formFieldProps">
+		<template #field="{ fieldId, messageId }">
+			<div
+				:class="[
+					'ds-inputField',
+					{
+						'-ds-error': formFieldProps.state === FORM_FIELD_STATES.ERROR,
+						'-ds-disabled': formFieldProps.state === FORM_FIELD_STATES.DISABLED,
+					},
+				]"
+			>
+				<icon
+					v-if="leftIcon"
+					:icon="leftIcon"
+					class="ds-inputField__leftIcon"
+					:size="ICON_SIZES.X_SMALL"
+				/>
+				<input
+					v-bind="finalInputProps"
+					:id="fieldId"
+					v-model="value"
+					class="ds-inputField__input"
+					:aria-describedby="messageId"
+				/>
+				<div v-if="suffixText" class="ds-inputField__suffixText">
+					{{ suffixText }}
+				</div>
+				<slot name="action" />
+			</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';
+
+.ds-inputField {
+	$root: &;
+
+	align-items: center;
+	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;
+	gap: $space-2xs;
+	height: 32px;
+	padding: 0 $space-2xs;
+
+	&:focus-within {
+		border-color: $color-primary-border;
+	}
+
+	&.-ds-error:not(:focus-within) {
+		border-color: $color-danger-border;
+	}
+
+	&:hover:not(.-ds-disabled) {
+		border-color: $color-neutral-border-strong-hovered;
+	}
+
+	&.-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;
+			}
+		}
+
+		#{$root}__leftIcon {
+			color: $color-neutral-icon-weak-disabled;
+		}
+	}
+
+	&__input {
+		@include formText-s-default-regular;
+
+		background: transparent;
+		// hacky solution to override default browser styles for autofill
+		background-clip: text !important;
+		border: none;
+		color: $color-neutral-text-heavy;
+		flex: 1;
+		height: 100%;
+		// override default browser min-width
+		min-width: 0;
+		outline: none;
+
+		&::placeholder {
+			color: $color-neutral-text-weak;
+		}
+	}
+
+	&__leftIcon {
+		color: $color-neutral-icon-weak;
+	}
+
+	&__suffixText {
+		@include formText-s-default-regular;
+
+		color: $color-neutral-text;
+	}
+}
+</style>
+
+<script lang="ts" setup>
+import { computed, InputHTMLAttributes } from 'vue';
+import FormField, { FORM_FIELD_STATES, FormFieldProps } from '../FormField';
+import Icon, { ICON_SIZES } from '../../Icons/Icon';
+import { extractFormFieldProps } from '../FormField/FormField.utils';
+import { InputFieldProps, InputFieldSlots } from './InputField.types';
+import { useInputFieldWithinForm } from './useInputFieldWithinForm';
+
+const { inputProps, leftIcon, suffixText, name, ...rest } = defineProps<InputFieldProps>();
+defineSlots<InputFieldSlots>();
+const modelValue = defineModel<string>();
+
+const {
+	value,
+	errors,
+	onInput: onFormFieldInput,
+	onBlur: onFormFieldBlur,
+} = useInputFieldWithinForm(() => name, modelValue);
+
+const formFieldProps = computed<FormFieldProps>(() => {
+	// this is needed to avoid passing modelValue to FormField as prop
+	const extractedProps = extractFormFieldProps(rest);
+
+	return {
+		...extractedProps,
+		messageText: extractedProps.messageText ?? errors.value[0],
+		state: extractedProps.state ?? (errors.value[0] ? FORM_FIELD_STATES.ERROR : undefined),
+	};
+});
+
+const finalInputProps = computed<InputHTMLAttributes>(() => {
+	return {
+		disabled: formFieldProps.value.state === FORM_FIELD_STATES.DISABLED,
+		...inputProps,
+		onInput: (event: Event) => {
+			onFormFieldInput();
+			inputProps?.onInput?.(event);
+		},
+		onBlur: (event: FocusEvent) => {
+			onFormFieldBlur(event);
+			inputProps?.onBlur?.(event);
+		},
+	};
+});
+</script>

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

@@ -0,0 +1,3 @@
+import InputField from './InputField.vue';
+
+export default InputField;

package/lib/js/components/Form/InputField/useInputFieldWithinForm.ts

@@ -0,0 +1,54 @@
+import { computed, inject, MaybeRefOrGetter, ref, Ref, toValue } from 'vue';
+import { FormContextKey, useField } from 'vee-validate';
+
+export function useInputFieldWithinForm(
+	name: MaybeRefOrGetter<string | undefined>,
+	modelValue: Ref<string | undefined>,
+) {
+	const form = inject(FormContextKey, null);
+	const nameValue = toValue(name);
+
+	// this computed property was created only for type safety so we can use it with `useField`
+	const nameString = computed(() => {
+		const value = toValue(name);
+
+		if (value === undefined) {
+			throw new Error('fieldName is required');
+		}
+
+		return value;
+	});
+
+	if (nameValue && !form) {
+		throw new Error(
+			`InputField with name "${nameValue}" must be used within a component that provides a FormContext, e.g. by using useForm()`,
+		);
+	}
+
+	const field = nameValue
+		? useField(nameString, undefined, {
+				validateOnValueUpdate: false,
+		  })
+		: null;
+
+	const value = field ? field.value : modelValue;
+	const blurred = ref(false);
+
+	const onBlur = (event: Event) => {
+		field?.handleBlur(event, true);
+		blurred.value = true;
+	};
+
+	const onInput = () => {
+		if (blurred.value) {
+			field?.validate();
+		}
+	};
+
+	return {
+		onBlur,
+		onInput,
+		value,
+		errors: field?.errors ?? ref<Array<string>>([]),
+	};
+}

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

@@ -0,0 +1,73 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+import PasswordField from './PasswordField.vue';
+
+const fieldId = 'form-field-v-0';
+const messageId = `${fieldId}-message`;
+
+describe('PasswordField', () => {
+	it('should switch between password and text input types', async () => {
+		const wrapper = mount(PasswordField);
+
+		expect(wrapper.exists()).toBe(true);
+		expect(wrapper.find('input').attributes('type')).toBe('password');
+
+		const toggleButton = wrapper.find('[data-test-id="password-toggle"]');
+
+		await toggleButton.trigger('click');
+
+		expect(wrapper.find('input').attributes('type')).toBe('text');
+
+		await toggleButton.trigger('click');
+
+		expect(wrapper.find('input').attributes('type')).toBe('password');
+	});
+
+	it('should render InputField and pass props', () => {
+		const wrapper = mount(PasswordField, {
+			props: {
+				label: 'Label',
+				messageText: 'Message text',
+			},
+		});
+
+		expect(wrapper.find('label').text()).toBe('Label');
+		expect(wrapper.find(`#${messageId}`).text()).toBe('Message text');
+	});
+
+	it('should render InputField with slots', () => {
+		const wrapper = mount(PasswordField, {
+			slots: {
+				labelAside: () => 'Label Aside',
+				message: () => 'Message Slot',
+				fieldStatus: () => 'Field Status Slot',
+				help: () => h('div', { id: 'help-slot' }, 'Help Slot'),
+			},
+		});
+
+		expect(wrapper.find('.ds-formField__labelAside').text()).toBe('Label Aside');
+		expect(wrapper.find('.ds-formField__message').text()).toBe('Message Slot');
+		expect(wrapper.find('.ds-formField__fieldStatus').text()).toBe('Field Status Slot');
+		expect(wrapper.find('#help-slot').text()).toBe('Help Slot');
+	});
+
+	it('should handle value updates', async () => {
+		const onUpdate = vi.fn();
+		const wrapper = mount(PasswordField, {
+			props: {
+				label: 'Label',
+				modelValue: 'initial value',
+				'onUpdate:modelValue': onUpdate,
+			},
+		});
+
+		const input = wrapper.find<HTMLInputElement>('input');
+		expect(input.element.value).toBe('initial value');
+
+		await input.setValue('updated value');
+
+		expect(onUpdate).toHaveBeenCalledWith('updated value');
+		expect(input.element.value).toBe('updated value');
+	});
+});