@bethinkpl/design-system 30.1.2 → 30.3.0

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

@@ -1,60 +1,277 @@
 <template>
-	<selection-control
-		:size="size"
-		:label="label"
-		:is-selected="isSelected"
-		:selected-icon="ICONS.FA_SQUARE_CHECK_SOLID"
-		:not-selected-icon="ICONS.FA_SQUARE"
-		:state="state"
-		:type="SELECTION_CONTROL_TYPE.CHECKBOX"
-		@update:is-selected="$emit('update:is-selected', $event)"
-		@input:focus="$emit('input:focus')"
-		@input:blur="$emit('input:blur')"
-	/>
+	<label
+		:class="[
+			'ds-checkbox',
+			{
+				'-ds-x-small': size === CHECKBOX_SIZES.X_SMALL,
+				'-ds-small': size === CHECKBOX_SIZES.SMALL,
+				'-ds-medium': size === CHECKBOX_SIZES.MEDIUM,
+				'-ds-elevation': elevation === CHECKBOX_ELEVATIONS.X_SMALL,
+				'-ds-disabled': state === CHECKBOX_STATES.DISABLED,
+				'-ds-error': state === CHECKBOX_STATES.ERROR,
+			},
+		]"
+	>
+		<checkbox-root
+			v-slot="{ state: rekaState }"
+			v-model="modelValue"
+			:disabled="state === CHECKBOX_STATES.DISABLED"
+			class="ds-checkbox__root"
+			:value="value"
+		>
+			<!-- As we also use icon for unchecked state, we need to force mount the indicator -->
+			<checkbox-indicator :force-mount="true" class="ds-checkbox__indicator" as="div">
+				<ds-icon
+					v-if="rekaState === 'indeterminate'"
+					:icon="ICONS.FAD_SQUARE_MINUS"
+					:size="iconSize"
+				/>
+				<ds-icon v-else-if="rekaState" :icon="ICONS.FAD_SQUARE_CHECK" :size="iconSize" />
+				<ds-icon v-else :icon="ICONS.FAD_SQUARE" :size="iconSize" />
+			</checkbox-indicator>
+		</checkbox-root>
+
+		<ds-form-control-label v-if="$slots.default" :size="size" :state="labelState">
+			<slot />
+		</ds-form-control-label>
+	</label>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { CHECKBOX_SIZE, CHECKBOX_STATE, CheckboxSize, CheckboxState } from './Checkbox.consts';
-import SelectionControl from '../SelectionControl/SelectionControl.vue';
-import { ICONS } from '../../Icons/Icon';
-import { SELECTION_CONTROL_TYPE } from '../SelectionControl/SelectionControl.consts';
-
-export default defineComponent({
-	name: 'Checkbox',
-	components: { SelectionControl },
-	props: {
-		size: {
-			type: String as PropType<CheckboxSize>,
-			default: CHECKBOX_SIZE.SMALL,
-			validator(size: CheckboxSize) {
-				return Object.values(CHECKBOX_SIZE).includes(size);
-			},
-		},
-		label: {
-			type: String,
-			default: null,
-		},
-		isSelected: {
-			type: Boolean,
-			default: false,
-		},
-		state: {
-			type: String as PropType<CheckboxState>,
-			default: CHECKBOX_STATE.DEFAULT,
-			validator(state: CheckboxState) {
-				return Object.values(CHECKBOX_STATE).includes(state);
-			},
-		},
-	},
-	// TODO fix me when touching this file
-	// eslint-disable-next-line vue/require-emit-validator
-	emits: ['update:is-selected', 'input:focus', 'input:blur'],
-	data() {
-		return {
-			SELECTION_CONTROL_TYPE: Object.freeze(SELECTION_CONTROL_TYPE),
-			ICONS: Object.freeze(ICONS),
-		};
-	},
+<style scoped lang="scss">
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/typography/tokens';
+@import '../../../../styles/settings/radiuses';
+@import '../../../../styles/settings/animations';
+
+.ds-checkbox {
+	$root: &;
+
+	align-items: flex-start;
+	display: inline-flex;
+
+	&.-ds-x-small {
+		gap: $space-4xs;
+	}
+
+	&.-ds-small {
+		gap: $space-2xs;
+	}
+
+	&.-ds-medium {
+		gap: $space-2xs;
+	}
+
+	&:not(.-ds-disabled) {
+		cursor: pointer;
+	}
+
+	&__root {
+		$checkbox-root-xs-space: $space-3xs;
+		$checkbox-root-s-space: $space-3xs;
+		$checkbox-root-m-space: $space-2xs;
+
+		--checkbox-circle-background-color-focused: #{$color-primary-background-ghost-focused};
+		--checkbox-circle-background-color-hovered: #{$color-primary-background-ghost-hovered};
+
+		background: none;
+		border: none;
+		line-height: 0;
+		margin: 0;
+		padding: 0;
+		position: relative;
+
+		&[data-state='unchecked'] {
+			--checkbox-circle-background-color-focused: #{$color-primary-background-ghost-focused};
+			--checkbox-circle-background-color-hovered: #{$color-neutral-background-ghost-hovered};
+		}
+
+		#{$root}.-ds-error & {
+			--checkbox-circle-background-color-focused: #{$color-danger-background-ghost-focused};
+			--checkbox-circle-background-color-hovered: #{$color-danger-background-ghost-hovered};
+		}
+
+		#{$root}.-ds-x-small & {
+			padding: $checkbox-root-xs-space 0;
+		}
+
+		#{$root}.-ds-small & {
+			padding: $checkbox-root-s-space 0;
+		}
+
+		#{$root}.-ds-medium & {
+			padding: $checkbox-root-m-space 0;
+		}
+
+		&:focus {
+			outline: none;
+		}
+
+		&::before {
+			aspect-ratio: 1;
+			border-radius: $radius-xl;
+			content: '';
+			display: block;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			transform: scale(0);
+			transition: $default-cubic-bezier-transition;
+			width: auto;
+		}
+
+		#{$root}:hover:not(.-ds-disabled) &::before,
+		&:focus-visible::before {
+			transform: scale(1);
+		}
+
+		#{$root}.-ds-x-small &::before {
+			left: -$checkbox-root-xs-space;
+		}
+
+		#{$root}.-ds-small &::before {
+			left: -$checkbox-root-s-space;
+		}
+
+		#{$root}.-ds-medium &::before {
+			left: -$checkbox-root-m-space;
+		}
+
+		#{$root}:hover &::before {
+			background-color: var(--checkbox-circle-background-color-hovered);
+		}
+
+		&:focus-visible::before {
+			background-color: var(--checkbox-circle-background-color-focused);
+		}
+	}
+
+	&__indicator {
+		--checkbox-color: #{$color-primary-icon};
+		--checkbox-elevation-opacity: 0;
+
+		position: relative;
+
+		&[data-state='unchecked'] {
+			--checkbox-color: #{$color-neutral-icon};
+			--fa-primary-color: var(--checkbox-color);
+			--fa-primary-opacity: 1;
+			--fa-secondary-color: #{$color-default-background};
+			--fa-secondary-opacity: var(--checkbox-elevation-opacity);
+		}
+
+		&[data-state='checked'] {
+			--fa-primary-color: #{$color-default-background};
+			--fa-primary-opacity: 1;
+			--fa-secondary-color: var(--checkbox-color);
+			--fa-secondary-opacity: 1;
+		}
+
+		&[data-state='indeterminate'] {
+			--fa-primary-color: var(--checkbox-color);
+			--fa-primary-opacity: 1;
+			--fa-secondary-color: #{$color-default-background};
+			--fa-secondary-opacity: var(--checkbox-elevation-opacity);
+		}
+
+		#{$root}__root:focus-visible & {
+			--checkbox-color: #{$color-primary-icon};
+		}
+
+		#{$root}.-ds-error & {
+			--checkbox-color: #{$color-danger-icon};
+		}
+
+		#{$root}.-ds-disabled & {
+			--checkbox-color: #{$color-primary-icon-disabled};
+		}
+
+		#{$root}.-ds-disabled &[data-state='unchecked'] {
+			--checkbox-color: #{$color-neutral-icon-disabled};
+		}
+
+		#{$root}.-ds-elevation & {
+			--checkbox-elevation-opacity: 1;
+		}
+	}
+}
+</style>
+
+<script setup lang="ts">
+import { CheckboxIndicator, CheckboxRoot } from 'reka-ui';
+import {
+	CHECKBOX_ELEVATIONS,
+	CHECKBOX_SIZES,
+	CHECKBOX_STATES,
+	CheckboxElevation,
+	CheckboxSize,
+	CheckboxState,
+	CheckboxValue,
+} from './Checkbox.consts';
+import DsIcon from '../../Icons/Icon/Icon.vue';
+import { ICON_SIZES, ICONS } from '../../Icons/Icon';
+import { computed, inject } from 'vue';
+import { CHECKBOX_GROUP_INJECTION_KEY } from '../CheckboxGroupField/CheckboxGroupField.consts';
+import DsFormControlLabel from '../FormControlLabel/FormControlLabel.vue';
+import { FORM_CONTROL_STATE } from '../FormControlLabel/FormControlLabel.consts';
+
+const props = defineProps<{
+	size?: CheckboxSize;
+	state?: CheckboxState;
+	elevation?: CheckboxElevation;
+	/**
+	 * String value set when the checkbox is checked
+	 */
+	value?: string;
+}>();
+
+const modelValue = defineModel<CheckboxValue>({
+	default: false,
+});
+
+defineSlots<{
+	default?(): any;
+}>();
+
+// Inject context from CheckboxGroupField
+const groupContext = inject(CHECKBOX_GROUP_INJECTION_KEY, null);
+
+// Use props if provided, otherwise fall back to injected values, then defaults
+const size = computed(() => props.size ?? groupContext?.size.value ?? CHECKBOX_SIZES.SMALL);
+
+const state = computed(() => props.state ?? groupContext?.state.value ?? CHECKBOX_STATES.DEFAULT);
+
+const elevation = computed(
+	() => props.elevation ?? groupContext?.elevation.value ?? CHECKBOX_ELEVATIONS.X_SMALL,
+);
+
+const value = computed(() => {
+	if (groupContext && !props.value) {
+		throw new Error(
+			'[Checkbox]: When used inside a CheckboxGroupField, each Checkbox should have a unique "value" prop.',
+		);
+	}
+
+	return props.value ?? 'on';
+});
+
+const iconSize = computed(() => {
+	switch (size.value) {
+		case CHECKBOX_SIZES.X_SMALL:
+			return ICON_SIZES.XX_SMALL;
+		case CHECKBOX_SIZES.SMALL:
+			return ICON_SIZES.X_SMALL;
+		default:
+		case CHECKBOX_SIZES.MEDIUM:
+			return ICON_SIZES.SMALL;
+	}
+});
+
+const labelState = computed(() => {
+	if (state.value === CHECKBOX_STATES.DISABLED) {
+		return FORM_CONTROL_STATE.DISABLED;
+	}
+
+	return FORM_CONTROL_STATE.DEFAULT;
 });
 </script>

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

@@ -0,0 +1,2 @@
+export { default } from './Checkbox.vue';
+export * from './Checkbox.consts';

package/lib/js/components/Form/CheckboxGroupField/CheckboxGroupField.consts.ts

@@ -0,0 +1,11 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { CheckboxSize, CheckboxState, CheckboxElevation } from '../Checkbox';
+
+export interface CheckboxGroupContext {
+	size: Ref<CheckboxSize>;
+	state: Ref<CheckboxState>;
+	elevation: Ref<CheckboxElevation>;
+}
+
+export const CHECKBOX_GROUP_INJECTION_KEY: InjectionKey<CheckboxGroupContext> =
+	Symbol('checkboxGroup');

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

@@ -0,0 +1,268 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { inject, defineComponent } from 'vue';
+import { useForm } from 'vee-validate';
+import { z } from 'zod';
+import { toTypedSchema } from '@vee-validate/zod';
+import CheckboxGroupField from './CheckboxGroupField.vue';
+import FormField from '../FormField/FormField.vue';
+import Checkbox from '../Checkbox/Checkbox.vue';
+import { CHECKBOX_SIZES, CHECKBOX_STATES, CHECKBOX_ELEVATIONS } from '../Checkbox/Checkbox.consts';
+import { FORM_FIELD_STATES } from '../FormField/FormField.consts';
+import { CHECKBOX_GROUP_INJECTION_KEY } from './CheckboxGroupField.consts';
+import { waitForExpectShort } from '../../../tests/helpers';
+
+describe('CheckboxGroupField', () => {
+	it('renders FormField with correct props', () => {
+		const wrapper = mount(CheckboxGroupField, {
+			props: {
+				label: 'Test Label',
+				state: FORM_FIELD_STATES.ERROR,
+				hasRequiredIndicator: true,
+				messageText: 'Test message',
+			},
+			slots: {
+				field: '<div>Test content</div>',
+			},
+		});
+
+		const formField = wrapper.findComponent(FormField);
+		expect(formField.exists()).toBe(true);
+		expect(formField.props('label')).toBe('Test Label');
+		expect(formField.props('state')).toBe(FORM_FIELD_STATES.ERROR);
+		expect(formField.props('hasRequiredIndicator')).toBe(true);
+		expect(formField.props('messageText')).toBe('Test message');
+	});
+
+	it('provides context to child components', () => {
+		const TestChild = {
+			template: '<div>{{ size }}-{{ state }}-{{ elevation }}</div>',
+			setup() {
+				const context = inject(CHECKBOX_GROUP_INJECTION_KEY, null);
+				return {
+					size: context?.size,
+					state: context?.state,
+					elevation: context?.elevation,
+				};
+			},
+		};
+
+		const wrapper = mount(CheckboxGroupField, {
+			props: {
+				label: 'Test',
+				size: CHECKBOX_SIZES.MEDIUM,
+				state: CHECKBOX_STATES.ERROR,
+				elevation: CHECKBOX_ELEVATIONS.X_SMALL,
+			},
+			slots: {
+				field: TestChild,
+			},
+		});
+
+		expect(wrapper.text()).toContain('medium-error-x-small');
+	});
+
+	it('renders all slot content correctly', () => {
+		const wrapper = mount(CheckboxGroupField, {
+			props: {
+				label: 'Test Label',
+			},
+			slots: {
+				labelAside: '<span>Label aside</span>',
+				help: '<button>Help</button>',
+				field: '<div>Field content</div>',
+				message: '<span>Custom message</span>',
+				fieldStatus: '<span>Status</span>',
+			},
+		});
+
+		expect(wrapper.html()).toContain('Label aside');
+		expect(wrapper.html()).toContain('Help');
+		expect(wrapper.html()).toContain('Field content');
+		expect(wrapper.html()).toContain('Custom message');
+		expect(wrapper.html()).toContain('Status');
+	});
+
+	it('has correct accessibility attributes', () => {
+		const wrapper = mount(CheckboxGroupField, {
+			props: {
+				label: 'Test Label',
+				messageText: 'Test message',
+			},
+			slots: {
+				field: '<div>Content</div>',
+			},
+		});
+
+		const fieldGroup = wrapper.find('.ds-checkboxGroupField');
+		expect(fieldGroup.attributes('role')).toBe('group');
+		expect(fieldGroup.attributes('aria-describedby')).toBe(
+			wrapper.find('.ds-formFieldMessage').attributes('id'),
+		);
+		expect(fieldGroup.attributes('aria-labelledby')).toBe(
+			wrapper.find('.ds-formField__label').attributes('id'),
+		);
+	});
+
+	describe('vee-validate integration', () => {
+		it('integrates with vee-validate form context and reflects initial values', async () => {
+			// eslint-disable-next-line vue/one-component-per-file
+			const TestForm = defineComponent({
+				name: 'TestForm',
+				components: {
+					CheckboxGroupField,
+					Checkbox,
+				},
+				setup() {
+					useForm({
+						initialValues: {
+							preferences: ['option2'],
+						},
+					});
+
+					return {};
+				},
+				template: `
+					<form>
+						<CheckboxGroupField 
+							name="preferences" 
+							label="Select your preferences"
+						>
+							<template #field>
+								<Checkbox value="option1">Option 1</Checkbox>
+								<Checkbox value="option2">Option 2</Checkbox>
+								<Checkbox value="option3">Option 3</Checkbox>
+							</template>
+						</CheckboxGroupField>
+					</form>
+				`,
+			});
+
+			const wrapper = mount(TestForm);
+
+			const checkboxes = wrapper.findAll('button[role="checkbox"]');
+
+			expect(checkboxes[0]?.attributes('data-state')).toBe('unchecked');
+			expect(checkboxes[1]?.attributes('data-state')).toBe('checked');
+			expect(checkboxes[2]?.attributes('data-state')).toBe('unchecked');
+		});
+
+		it('displays validation errors on form submission with invalid data', async () => {
+			const validationSchema = toTypedSchema(
+				z.object({
+					preferences: z
+						.array(z.string())
+						.min(1, { message: 'Please select at least one option' }),
+				}),
+			);
+			const onSubmitHandler = vi.fn();
+
+			// eslint-disable-next-line vue/one-component-per-file
+			const TestForm = defineComponent({
+				name: 'TestForm',
+				components: {
+					CheckboxGroupField,
+					Checkbox,
+				},
+				setup() {
+					const { handleSubmit } = useForm({
+						validationSchema,
+						initialValues: {
+							preferences: [],
+						},
+					});
+
+					const onSubmit = handleSubmit(onSubmitHandler);
+
+					return {
+						onSubmit,
+					};
+				},
+				template: `
+					<form @submit="onSubmit">
+						<CheckboxGroupField 
+							name="preferences" 
+							label="Select your preferences"
+						>
+							<template #field>
+								<Checkbox value="option1">Option 1</Checkbox>
+								<Checkbox value="option2">Option 2</Checkbox>
+							</template>
+						</CheckboxGroupField>
+						<button type="submit">Submit</button>
+					</form>
+				`,
+			});
+
+			const wrapper = mount(TestForm);
+			const formField = wrapper.findComponent(FormField);
+
+			const group = wrapper.find('[role="group"]');
+			const describedby = group.attributes('aria-describedby');
+			const message = wrapper.find(`#${describedby}`);
+
+			// Initially, there should be no error message
+			expect(message.exists()).toBe(false);
+
+			const form = wrapper.find('form');
+			await form.trigger('submit');
+
+			await waitForExpectShort(() => {
+				const group = wrapper.find('[role="group"]');
+				const describedby = group.attributes('aria-describedby');
+				const message = wrapper.find(`#${describedby}`);
+				expect(message.text()).toBe('Please select at least one option');
+				expect(formField.props('state')).toBe(FORM_FIELD_STATES.ERROR);
+				expect(onSubmitHandler).not.toHaveBeenCalled();
+			});
+		});
+
+		it('works without vee-validate form context using v-model', async () => {
+			// eslint-disable-next-line vue/one-component-per-file
+			const TestComponent = defineComponent({
+				name: 'TestComponent',
+				components: {
+					CheckboxGroupField,
+					Checkbox,
+				},
+				data() {
+					return {
+						selectedValues: ['option1'],
+					};
+				},
+				template: `
+					<CheckboxGroupField 
+						v-model="selectedValues"
+						label="Select your preferences"
+					>
+						<template #field>
+							<Checkbox value="option1">Option 1</Checkbox>
+							<Checkbox value="option2">Option 2</Checkbox>
+						</template>
+					</CheckboxGroupField>
+				`,
+			});
+
+			const wrapper = mount(TestComponent);
+
+			const checkboxes = wrapper.findAll('button[role="checkbox"]');
+
+			expect(checkboxes[0]?.attributes('data-state')).toBe('checked');
+			expect(checkboxes[1]?.attributes('data-state')).toBe('unchecked');
+		});
+
+		it('throws error when name is provided but no form context exists', () => {
+			expect(() => {
+				mount(CheckboxGroupField, {
+					props: {
+						name: 'preferences',
+						label: 'Test Label',
+					},
+					slots: {
+						field: '<div>test</div>',
+					},
+				});
+			}).toThrow();
+		});
+	});
+});