@bethinkpl/design-system 30.1.2 → 30.3.0

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

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import CheckboxGroupField from './CheckboxGroupField.vue';
+import Checkbox from '../Checkbox/Checkbox.vue';
+import { CHECKBOX_ELEVATIONS, CHECKBOX_SIZES, CHECKBOX_STATES } from '../Checkbox/Checkbox.consts';
+import { args, argTypes } from '../FormField/FormField.stories.shared';
+import { reactive, toRefs } from 'vue';
+import { ICONS } from '../../Icons/Icon';
+import HelpButton from '../../Buttons/HelpButton';
+import Banner from '../../Banner';
+
+const meta: Meta<typeof CheckboxGroupField> = {
+	title: 'Components/Form/CheckboxGroupField',
+	component: CheckboxGroupField,
+	render: (args) => ({
+		components: { CheckboxGroupField, Checkbox, HelpButton, Banner },
+		setup() {
+			const { help, labelAside, message, fieldStatus, field, ...restRefs } = toRefs(args);
+			const props = reactive({ ...restRefs });
+
+			return {
+				props,
+				labelAside,
+				fieldStatus,
+				message,
+				help,
+				CHECKBOX_STATES,
+				ICONS,
+			};
+		},
+		template: `
+			<CheckboxGroupField v-bind="props">
+				<template #field>
+					<Checkbox value="option1">Option 1</Checkbox>
+					<Checkbox value="option2">Option 2</Checkbox>
+					<Checkbox value="option3">Option 3</Checkbox>
+				</template>
+				<template v-if="help" #help>
+					<HelpButton :is-disabled="props.state === CHECKBOX_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>
+			</CheckboxGroupField>
+			<Banner color="danger" title="Uwaga! Mogą wystąpić problemy z pisaniem testów jednostkowych korzystających z tego komponentu. Unikaj jego używania. A jeśli jest rok 2026 i wciąż widzisz ten komunikat — nakrzycz na Karola!" title-in-color />
+		`,
+	}),
+	argTypes,
+};
+
+export default meta;
+type Story = StoryObj<typeof CheckboxGroupField>;
+
+export const Interactive: Story = {
+	args: {
+		...args,
+		state: CHECKBOX_STATES.DEFAULT,
+		size: CHECKBOX_SIZES.SMALL,
+		elevation: CHECKBOX_ELEVATIONS.X_SMALL,
+		// Override the field arg just to make TS happy; the story doesn't allow editing it anyway
+		field: () => {},
+	},
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=14832-98644&m=dev',
+		},
+	},
+	argTypes: {
+		size: {
+			control: 'select',
+			options: Object.values(CHECKBOX_SIZES),
+		},
+		state: {
+			control: 'select',
+			options: Object.values(CHECKBOX_STATES),
+		},
+		elevation: {
+			control: 'select',
+			options: Object.values(CHECKBOX_ELEVATIONS),
+		},
+	},
+};

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

@@ -0,0 +1,13 @@
+import { FormFieldProps, FormFieldSlots } from '../FormField';
+import type { CheckboxElevation, CheckboxSize, CheckboxState } from '../Checkbox';
+
+export interface CheckboxGroupFieldProps extends FormFieldProps {
+	size?: CheckboxSize;
+	state?: CheckboxState;
+	elevation?: CheckboxElevation;
+	name?: string;
+}
+
+export type CheckboxGroupFieldSlots = Omit<FormFieldSlots, 'field'> & {
+	field: () => any;
+};

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

@@ -0,0 +1,97 @@
+<template>
+	<form-field v-bind="formFieldProps">
+		<template #field="{ messageId, labelId }">
+			<checkbox-group-root
+				v-model="value"
+				class="ds-checkboxGroupField"
+				role="group"
+				:aria-describedby="messageId"
+				:aria-labelledby="labelId"
+				:disabled="formFieldProps.state === FORM_FIELD_STATES.DISABLED"
+				loop
+			>
+				<slot name="field"></slot>
+			</checkbox-group-root>
+		</template>
+		<!-- begin: FormField slots -->
+		<template v-if="$slots.labelAside" #labelAside>
+			<slot name="labelAside" />
+		</template>
+		<template v-if="$slots.help" #help>
+			<slot name="help" />
+		</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 scoped lang="scss">
+@import '../../../../styles/settings/spacings';
+
+.ds-checkboxGroupField {
+	display: flex;
+	flex-direction: column;
+	gap: $space-2xs;
+}
+</style>
+
+<script setup lang="ts">
+import { CheckboxGroupRoot } from 'reka-ui';
+import { provide, computed, toRef } from 'vue';
+import FormField from '../FormField/FormField.vue';
+import { FormFieldProps } from '../FormField/FormField.types';
+import { extractFormFieldProps } from '../FormField/FormField.utils';
+import {
+	CHECKBOX_SIZES,
+	CHECKBOX_ELEVATIONS,
+	type CheckboxState,
+	CHECKBOX_STATES,
+} from '../Checkbox/Checkbox.consts';
+import { CHECKBOX_GROUP_INJECTION_KEY } from './CheckboxGroupField.consts';
+import { FORM_FIELD_STATES, FormFieldState } from '../FormField';
+import { CheckboxGroupFieldProps, CheckboxGroupFieldSlots } from './CheckboxGroupField.types';
+import { useFormFieldWithinForm } from '../../../composables/useFormFieldWithinForm';
+
+const {
+	size = CHECKBOX_SIZES.SMALL,
+	elevation = CHECKBOX_ELEVATIONS.NONE,
+	name,
+	...rest
+} = defineProps<CheckboxGroupFieldProps>();
+
+defineSlots<CheckboxGroupFieldSlots>();
+
+const modelValue = defineModel<Array<string>>({
+	default: [],
+});
+
+const { value, errors } = useFormFieldWithinForm(() => name, modelValue);
+
+const formFieldProps = computed<FormFieldProps>(() => {
+	// this is needed to avoid passing modelValue to FormField as prop
+	return extractFormFieldProps(rest, errors.value);
+});
+
+const mappedState = computed(() => {
+	const stateMap: Record<FormFieldState, CheckboxState> = {
+		[FORM_FIELD_STATES.DEFAULT]: CHECKBOX_STATES.DEFAULT,
+		[FORM_FIELD_STATES.ERROR]: CHECKBOX_STATES.ERROR,
+		[FORM_FIELD_STATES.DISABLED]: CHECKBOX_STATES.DISABLED,
+		[FORM_FIELD_STATES.SUCCESS]: CHECKBOX_STATES.DEFAULT,
+	};
+
+	return stateMap[formFieldProps.value.state || CHECKBOX_STATES.DEFAULT];
+});
+
+// Provide context for child checkboxes
+provide(CHECKBOX_GROUP_INJECTION_KEY, {
+	size: toRef(() => size),
+	state: mappedState,
+	elevation: toRef(() => elevation),
+});
+</script>

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

@@ -0,0 +1 @@
+export { default } from './CheckboxGroupField.vue';

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

@@ -0,0 +1,67 @@
+import Checkbox from './Checkbox/Checkbox.vue';
+import { withActions } from '@storybook/addon-actions/decorator';
+import { Meta } from '@storybook/vue3';
+import InputField from './InputField';
+import { useForm } from 'vee-validate';
+import { toTypedSchema } from '@vee-validate/zod';
+import { array, object, string } from 'zod';
+import CheckboxGroupField from './CheckboxGroupField/CheckboxGroupField.vue';
+import Button from '../Buttons/Button';
+
+export default {
+	title: 'Components/Form/FormExamples',
+	decorators: [withActions],
+} as Meta<any>;
+
+export const SimpleForm = () => ({
+	components: { InputField, CheckboxGroupField, Checkbox, Button },
+	setup: () => {
+		const { handleSubmit } = useForm({
+			initialValues: {
+				fullName: '',
+				newsletterTopics: [],
+			},
+			validationSchema: toTypedSchema(
+				object({
+					fullName: string().min(1, 'Imię i nazwisko jest wymagane'),
+					newsletterTopics: array(string()).min(
+						1,
+						'Wybierz przynajmniej jeden temat newslettera',
+					),
+				}),
+			),
+		});
+
+		const onSubmit = handleSubmit(
+			(form) => {
+				console.log('Form submitted successfully:', form);
+			},
+			(errors) => {
+				console.log('Validation errors:', errors);
+			},
+		);
+
+		return {
+			onSubmit,
+		};
+	},
+	template: `
+		<form @submit.prevent="onSubmit" style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
+			<InputField label="Imię i nazwisko" name="fullName" />
+			<CheckboxGroupField label="Jakie tematy newslettera Cię interesują?" name="newsletterTopics">
+				<template #field>
+					<Checkbox value="technology">Technologia</Checkbox>
+					<Checkbox value="health">Zdrowie</Checkbox>
+					<Checkbox value="finance">Finanse</Checkbox>
+					<Checkbox value="sports">Sport</Checkbox>
+				</template>
+			</CheckboxGroupField>
+			<Button as="button">
+				Wyślij
+			</Button>
+		</form>				
+	`,
+	data() {
+		return {};
+	},
+});

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

@@ -0,0 +1,16 @@
+import { Value } from '../../../utils/type.utils';
+
+export const FORM_CONTROL_SIZE = {
+	X_SMALL: 'x-small',
+	SMALL: 'small',
+	MEDIUM: 'medium',
+} as const;
+
+export type FormControlSize = Value<typeof FORM_CONTROL_SIZE>;
+
+export const FORM_CONTROL_STATE = {
+	DEFAULT: 'default',
+	DISABLED: 'disabled',
+};
+
+export type FormControlState = Value<typeof FORM_CONTROL_STATE>;

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

@@ -0,0 +1,61 @@
+<template>
+	<span
+		:class="[
+			'ds-formControlLabel',
+			{
+				'-ds-x-small': size === FORM_CONTROL_SIZE.X_SMALL,
+				'-ds-small': size === FORM_CONTROL_SIZE.SMALL,
+				'-ds-medium': size === FORM_CONTROL_SIZE.MEDIUM,
+				'-ds-disabled': state === FORM_CONTROL_STATE.DISABLED,
+			},
+		]"
+	>
+		<slot />
+	</span>
+</template>
+
+<style scoped lang="scss">
+@import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/typography/tokens';
+@import '../../../../styles/settings/colors/tokens';
+
+.ds-formControlLabel {
+	color: $color-neutral-text-strong;
+
+	&.-ds-x-small {
+		@include formLabel-s-default-regular;
+
+		padding: $space-4xs 0;
+	}
+
+	&.-ds-small {
+		@include formLabel-m-default-regular;
+
+		padding: $space-3xs 0;
+	}
+
+	&.-ds-medium {
+		@include formLabel-l-default-regular;
+
+		padding: $space-2xs 0;
+	}
+
+	&.-ds-disabled {
+		color: $color-neutral-text-strong-disabled;
+	}
+}
+</style>
+
+<script setup lang="ts">
+import {
+	FORM_CONTROL_SIZE,
+	FORM_CONTROL_STATE,
+	FormControlSize,
+	FormControlState,
+} from './FormControlLabel.consts';
+
+const { state = FORM_CONTROL_STATE.DEFAULT, size = FORM_CONTROL_SIZE.SMALL } = defineProps<{
+	size?: FormControlSize;
+	state?: FormControlState;
+}>();
+</script>

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

@@ -11,7 +11,8 @@ export interface FormFieldProps {
 export interface FormFieldSlots {
 	labelAside?: () => any;
 	help?: () => any;
-	field: (props: { fieldId: string; messageId: string }) => any;
+	field: (props: { fieldId: string; messageId: string; labelId: string }) => any;
 	message?: (props: { messageId: string }) => any;
 	fieldStatus?: () => any;
+	// !!!! If you ever add a new slot here, please remember to update all components using FormField component !!!! //
 }

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

@@ -1,18 +1,11 @@
 import { FormFieldProps } from './FormField.types';
+import { FORM_FIELD_STATES } from './FormField.consts';
 
 /**
  * Extracts the properties needed for a form field component only
  */
-export function extractFormFieldProps({
-	label,
-	state,
-	hasRequiredIndicator,
-	labelInfo,
-	subLabel,
-	fieldId,
-	messageText,
-}: FormFieldProps) {
-	return {
+export function extractFormFieldProps(
+	{
 		label,
 		state,
 		hasRequiredIndicator,
@@ -20,5 +13,16 @@ export function extractFormFieldProps({
 		subLabel,
 		fieldId,
 		messageText,
+	}: FormFieldProps,
+	errors: Array<string> = [],
+) {
+	return {
+		label,
+		state: state ?? (errors[0] ? FORM_FIELD_STATES.ERROR : undefined),
+		hasRequiredIndicator,
+		labelInfo,
+		subLabel,
+		fieldId,
+		messageText: messageText ?? errors[0],
 	};
 }

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

@@ -10,7 +10,7 @@
 		<div v-if="label || subLabel || $slots.labelAside" class="ds-formField__labels">
 			<div class="ds-formField__labelRow">
 				<div class="ds-formField__labelWrapper">
-					<label v-if="label" class="ds-formField__label" :for="id">
+					<label v-if="label" :id="labelId" class="ds-formField__label" :for="id">
 						<span class="ds-formField__labelText">{{ label }}</span>
 						<span
 							v-if="hasRequiredIndicator"
@@ -31,7 +31,7 @@
 			<div v-if="subLabel" class="ds-formField__subLabelRow">{{ subLabel }}</div>
 		</div>
 		<div class="ds-formField__field">
-			<slot name="field" :field-id="id" :message-id="messageId"></slot>
+			<slot name="field" :field-id="id" :message-id="messageId" :label-id="labelId"></slot>
 		</div>
 		<div v-if="hasMessage || $slots.fieldStatus" class="ds-formField__footerRow">
 			<div class="ds-formField__message">
@@ -175,6 +175,7 @@ const slots = defineSlots<FormFieldSlots>();
 
 const baseId = useId();
 const id = computed(() => fieldId || `form-field-${baseId}`);
+const labelId = computed(() => `${id.value}-label`);
 const { hasMessage, messageId } = useMessage();
 
 function useMessage() {

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

@@ -156,13 +156,7 @@ const {
 
 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),
-	};
+	return extractFormFieldProps(rest, errors.value);
 });
 
 const finalInputProps = computed<InputHTMLAttributes>(() => {

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

@@ -1,37 +1,12 @@
-import { computed, inject, MaybeRefOrGetter, ref, Ref, toValue } from 'vue';
-import { FormContextKey, useField } from 'vee-validate';
+import { MaybeRefOrGetter, ref, Ref } from 'vue';
+import { useFormFieldWithinForm } from '../../../composables/useFormFieldWithinForm';
 
 export function useInputFieldWithinForm(
 	name: MaybeRefOrGetter<string | undefined>,
 	modelValue: Ref<string | undefined>,
 ) {
-	const form = inject(FormContextKey, null);
-	const nameValue = toValue(name);
+	const { value, errors, field } = useFormFieldWithinForm(name, modelValue);
 
-	// 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) => {
@@ -49,6 +24,6 @@ export function useInputFieldWithinForm(
 		onBlur,
 		onInput,
 		value,
-		errors: field?.errors ?? ref<Array<string>>([]),
+		errors,
 	};
 }

package/lib/js/components/RichList/RichListItem/RichListItem.vue

@@ -54,8 +54,9 @@
 				<div v-if="isSelectable" class="ds-richListItem__checkbox">
 					<ds-divider v-if="isHorizontal" is-vertical />
 					<ds-checkbox
-						:is-selected="isSelected"
-						@update:is-selected="$emit('update:is-selected', $event)"
+						:elevation="CHECKBOX_ELEVATIONS.NONE"
+						:model-value="isSelected"
+						@update:model-value="(value) => $emit('update:is-selected', !!value)"
 						@click.stop
 					/>
 				</div>
@@ -503,6 +504,7 @@ import {
 	RichListItemState,
 	RichListItemType,
 } from './RichListItem.consts';
+import { CHECKBOX_ELEVATIONS } from '../../Form/Checkbox';
 
 export default defineComponent({
 	name: 'RichListItem',
@@ -621,13 +623,14 @@ export default defineComponent({
 		click: (event: Event) => true,
 		'update:is-selected': (isSelected: boolean) => true,
 	},
-	data() {
+	setup() {
 		return {
-			ICONS: Object.freeze(ICONS),
-			ICON_SIZES: Object.freeze(ICON_SIZES),
-			RICH_LIST_ITEM_TYPE: Object.freeze(RICH_LIST_ITEM_TYPE),
-			RICH_LIST_ITEM_STATE: Object.freeze(RICH_LIST_ITEM_STATE),
-			RICH_LIST_ITEM_SIZE: Object.freeze(RICH_LIST_ITEM_SIZE),
+			ICONS,
+			ICON_SIZES,
+			RICH_LIST_ITEM_TYPE,
+			RICH_LIST_ITEM_STATE,
+			RICH_LIST_ITEM_SIZE,
+			CHECKBOX_ELEVATIONS,
 		};
 	},
 	computed: {