@bethinkpl/design-system 26.15.1 → 26.16.0

package/lib/js/components/Form/FormField/FormFieldMessage/FormFieldMessage.vue

@@ -0,0 +1,89 @@
+<template>
+	<div
+		:id="messageId"
+		:class="[
+			'ds-formFieldMessage',
+			{
+				['-ds-error']: state === FORM_FIELD_STATES.ERROR,
+				['-ds-success']: state === FORM_FIELD_STATES.SUCCESS,
+				['-ds-disabled']: state === FORM_FIELD_STATES.DISABLED,
+			},
+		]"
+	>
+		<div v-if="stateIcon" class="ds-formFieldMessage__iconWrapper">
+			<icon :icon="stateIcon" :size="ICON_SIZES.XX_SMALL" />
+		</div>
+		<slot></slot>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../../../styles/settings/spacings';
+@import '../../../../../styles/settings/typography/tokens';
+@import '../../../../../styles/settings/colors/tokens';
+
+.ds-formFieldMessage {
+	$root: &;
+
+	// if you ever change the line-height here, make sure to also update the height of the iconWrapper
+	@include formCaption-m-default-regular;
+
+	color: $color-neutral-text;
+	display: flex;
+	gap: $space-4xs;
+
+	&.-ds-error {
+		color: $color-danger-text;
+	}
+
+	&.-ds-success {
+		color: $color-success-text;
+	}
+
+	&.-ds-disabled {
+		color: $color-neutral-text-disabled;
+	}
+
+	&__iconWrapper {
+		align-items: center;
+		display: flex;
+		// height is equal to the line-height of the text to ensure proper alignment
+		// if we ever decide to introduce different sizes for the messages, we should adjust this accordingly
+		height: $typography-line-height-3xs;
+
+		#{$root}.-ds-error & {
+			color: $color-danger-icon;
+		}
+
+		#{$root}.-ds-success & {
+			color: $color-success-icon;
+		}
+	}
+}
+</style>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { FORM_FIELD_STATES, FormFieldState } from '../FormField.consts';
+import Icon, { ICON_SIZES, ICONS } from '../../../Icons/Icon';
+
+const { state = FORM_FIELD_STATES.DEFAULT, messageId } = defineProps<{
+	state?: FormFieldState;
+	messageId: string;
+}>();
+
+defineSlots<{
+	default: () => any;
+}>();
+
+const stateIcon = computed(() => {
+	switch (state) {
+		case FORM_FIELD_STATES.ERROR:
+			return ICONS.FA_CIRCLE_EXCLAMATION;
+		case FORM_FIELD_STATES.SUCCESS:
+			return ICONS.FA_CIRCLE_CHECK;
+		default:
+			return null;
+	}
+});
+</script>

package/lib/js/components/Form/FormField/FormFieldMessage/index.ts

@@ -0,0 +1,2 @@
+import FormFieldMessage from './FormFieldMessage.vue';
+export default FormFieldMessage;

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

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

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

@@ -0,0 +1,135 @@
+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 { h } from 'vue';
+import { FORM_FIELD_STATES } from '../FormField';
+import { ComponentProps, ComponentSlots } from 'vue-component-type-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();
+	});
+});

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,13 @@
+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;
+}
+
+export interface InputFieldSlots extends Omit<FormFieldSlots, 'field'> {
+	action?: () => any;
+}

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

@@ -0,0 +1,151 @@
+<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 formLabel-m-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 formLabel-m-default-regular;
+
+		color: $color-neutral-text;
+	}
+}
+</style>
+
+<script lang="ts" setup>
+import { computed, InputHTMLAttributes } from 'vue';
+import FormField, { FORM_FIELD_STATES } from '../FormField';
+import Icon, { ICON_SIZES } from '../../Icons/Icon';
+import { extractFormFieldProps } from '../FormField/FormField.utils';
+import { InputFieldProps, InputFieldSlots } from './InputField.types';
+
+const { inputProps, leftIcon, suffixText, ...rest } = defineProps<InputFieldProps>();
+defineSlots<InputFieldSlots>();
+const value = defineModel<string>();
+
+// this is needed to avoid passing modelValue to FormField as prop
+const formFieldProps = computed(() => extractFormFieldProps(rest));
+
+const finalInputProps = computed<InputHTMLAttributes>(() => {
+	return {
+		disabled: formFieldProps.value.state === FORM_FIELD_STATES.DISABLED,
+		...inputProps,
+	};
+});
+</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/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');
+	});
+});

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

@@ -0,0 +1,88 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import PasswordField from './PasswordField.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 PasswordField> = {
+	title: 'Components/Form/PasswordField',
+	component: PasswordField,
+	render: (args) => ({
+		components: { PasswordField, HelpButton, Modal },
+		setup() {
+			const { help, labelAside, message, fieldStatus, ...restRefs } = toRefs(args);
+			const props = reactive({ ...restRefs });
+
+			return {
+				props,
+				labelAside,
+				fieldStatus,
+				message,
+				help,
+				FORM_FIELD_STATES,
+				ICONS,
+			};
+		},
+		data: () => ({
+			value: '',
+		}),
+		template: `<PasswordField v-bind="props" v-model="value">
+			<template v-if="help" #help>
+				<HelpButton :is-disabled="props.state === FORM_FIELD_STATES.DISABLED">
+					<template #modal="{onClose}">
+						<Modal @close-modal="onClose">Modal</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>
+		</PasswordField>`,
+	}),
+	argTypes: {
+		...argTypes,
+		suffixText: {
+			control: 'text',
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof PasswordField>;
+
+export const Interactive: Story = {
+	args: {
+		...args,
+		suffixText: '%',
+		inputProps: {
+			placeholder: 'Placeholder',
+		},
+	},
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=13576-21478&m=dev',
+		},
+	},
+};
+
+export const Error: Story = {
+	...Interactive,
+	args: {
+		...Interactive.args,
+		state: FORM_FIELD_STATES.ERROR,
+		messageText: 'Error message text',
+	},
+};