@bethinkpl/design-system 43.0.0 → 44.0.0

package/dist/lib/js/components/Toast/Toast.vue.d.ts

@@ -1,439 +1,57 @@
 import { ToastColors, ToastPositions, ToastSizes } from './Toast.consts';
-import { PropType } from 'vue';
+import { IconItem } from '../Icons/Icon';
 
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    size: {
-        type: PropType<ToastSizes>;
-        default: "medium";
-    };
-    position: {
-        type: PropType<ToastPositions>;
-        default: string;
-    };
-    boundariesSelector: {
-        type: PropType<string | HTMLElement>;
-        default: null;
-    };
-    color: {
-        type: PropType<ToastColors>;
-        default: string;
-    };
-    footerPrimaryButtonText: {
-        type: StringConstructor;
-        default: string;
-    };
-    footerPrimaryButtonIcon: {
-        type: ObjectConstructor;
-        default: null;
-        validator(footerPrimaryButtonIcon: any): boolean;
-    };
-    footerSecondaryButtonText: {
-        type: StringConstructor;
-        default: string;
-    };
-    footerSecondaryButtonIcon: {
-        type: ObjectConstructor;
-        default: null;
-        validator(footerSecondaryButtonIcon: any): boolean;
-    };
-    isDisappearing: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disappearingTimeout: {
-        type: StringConstructor;
-        default: string;
-        validator(disappearingTimeout: string): boolean;
-    };
-}>, {}, {
-    boundariesSelectorElement: null;
-    boundariesSelectorElementResizeObserver: null;
-    styles: {};
-    BUTTON_COLORS: Readonly<{
-        readonly PRIMARY: "primary";
-        readonly NEUTRAL: "neutral";
-        readonly DANGER: "danger";
-        readonly SUCCESS: "success";
-        readonly INVERTED: "inverted";
-        readonly MAGIC: "magic";
-    }>;
-    BUTTON_RADIUSES: Readonly<{
-        readonly CAPSULE: "capsule";
-        readonly ROUNDED: "rounded";
-    }>;
-    BUTTON_TYPES: Readonly<{
-        readonly FILLED: "filled";
-        readonly OUTLINED: "outlined";
-        readonly TEXT: "text";
-    }>;
-    TOAST_SIZES: Readonly<{
-        readonly SMALL: "small";
-        readonly MEDIUM: "medium";
-    }>;
-    TOAST_POSITIONS: Readonly<{
-        LEFT: string;
-        CENTER: string;
-        RIGHT: string;
-    }>;
-}, {
-    buttonPrimaryColor(): "neutral" | "primary";
-    buttonSecondaryColor(): "danger" | "neutral";
-    toastPosition(): string;
-    toastSize(): string;
-}, {
-    calculateStyles(): void;
-    setBoundariesSelectorElement(): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    close: () => true;
-    'primary-button-click': () => true;
-    'secondary-button-click': () => true;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    size: {
-        type: PropType<ToastSizes>;
-        default: "medium";
-    };
-    position: {
-        type: PropType<ToastPositions>;
-        default: string;
-    };
-    boundariesSelector: {
-        type: PropType<string | HTMLElement>;
-        default: null;
-    };
-    color: {
-        type: PropType<ToastColors>;
-        default: string;
-    };
-    footerPrimaryButtonText: {
-        type: StringConstructor;
-        default: string;
-    };
-    footerPrimaryButtonIcon: {
-        type: ObjectConstructor;
-        default: null;
-        validator(footerPrimaryButtonIcon: any): boolean;
-    };
-    footerSecondaryButtonText: {
-        type: StringConstructor;
-        default: string;
-    };
-    footerSecondaryButtonIcon: {
-        type: ObjectConstructor;
-        default: null;
-        validator(footerSecondaryButtonIcon: any): boolean;
-    };
-    isDisappearing: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disappearingTimeout: {
-        type: StringConstructor;
-        default: string;
-        validator(disappearingTimeout: string): boolean;
-    };
-}>> & Readonly<{
+declare function __VLS_template(): Readonly<{
+    content?: () => any;
+}> & {
+    content?: () => any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    title?: string;
+    size?: ToastSizes;
+    position?: ToastPositions;
+    color?: ToastColors;
+    footerPrimaryButtonText?: string;
+    footerPrimaryButtonIcon?: IconItem | null;
+    footerSecondaryButtonText?: string;
+    footerSecondaryButtonIcon?: IconItem | null;
+    isDisappearing?: boolean;
+    disappearingTimeout?: string;
+    isClosable?: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => void;
+    "secondary-button-click": () => void;
+    "primary-button-click": () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    title?: string;
+    size?: ToastSizes;
+    position?: ToastPositions;
+    color?: ToastColors;
+    footerPrimaryButtonText?: string;
+    footerPrimaryButtonIcon?: IconItem | null;
+    footerSecondaryButtonText?: string;
+    footerSecondaryButtonIcon?: IconItem | null;
+    isDisappearing?: boolean;
+    disappearingTimeout?: string;
+    isClosable?: boolean;
+}>>> & Readonly<{
     onClose?: (() => any) | undefined;
     "onSecondary-button-click"?: (() => any) | undefined;
     "onPrimary-button-click"?: (() => any) | undefined;
-}>, {
-    size: ToastSizes;
-    color: string;
-    footerPrimaryButtonText: string;
-    footerPrimaryButtonIcon: Record<string, any>;
-    footerSecondaryButtonText: string;
-    footerSecondaryButtonIcon: Record<string, any>;
-    position: string;
-    boundariesSelector: string | HTMLElement;
-    isDisappearing: boolean;
-    disappearingTimeout: string;
-}, {}, {
-    DsButton: {
-        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
-            size: {
-                type: PropType<string>;
-            };
-            type: {
-                type: PropType<string>;
-            };
-            color: {
-                type: PropType<string | null>;
-            };
-            radius: {
-                type: PropType<string>;
-            };
-            state: {
-                type: PropType<string>;
-            };
-            iconLeft: import('../Icons/Icon').IconItem | null;
-            iconRight: import('../Icons/Icon').IconItem | null;
-            elevation: {
-                type: PropType<string>;
-            };
-            as: {
-                type: PropType<"a" | "button" | "span" | "router-link" | "nuxt-link">;
-            };
-        }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import('vue').ExtractPropTypes<{
-            size: {
-                type: PropType<string>;
-            };
-            type: {
-                type: PropType<string>;
-            };
-            color: {
-                type: PropType<string | null>;
-            };
-            radius: {
-                type: PropType<string>;
-            };
-            state: {
-                type: PropType<string>;
-            };
-            iconLeft: import('../Icons/Icon').IconItem | null;
-            iconRight: import('../Icons/Icon').IconItem | null;
-            elevation: {
-                type: PropType<string>;
-            };
-            as: {
-                type: PropType<"a" | "button" | "span" | "router-link" | "nuxt-link">;
-            };
-        }>> & Readonly<{}>, {}, {}, {}, {}, {}>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
-        size: {
-            type: PropType<string>;
-        };
-        type: {
-            type: PropType<string>;
-        };
-        color: {
-            type: PropType<string | null>;
-        };
-        radius: {
-            type: PropType<string>;
-        };
-        state: {
-            type: PropType<string>;
-        };
-        iconLeft: import('../Icons/Icon').IconItem | null;
-        iconRight: import('../Icons/Icon').IconItem | null;
-        elevation: {
-            type: PropType<string>;
-        };
-        as: {
-            type: PropType<"a" | "button" | "span" | "router-link" | "nuxt-link">;
-        };
-    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-        $slots: {
-            default?(_: {}): any;
-        };
-    });
-    DsCard: {
-        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
-            contentHasPadding: {
-                type: PropType<boolean>;
-            };
-            headerHasPadding: {
-                type: PropType<boolean>;
-            };
-            footerHasPadding: {
-                type: PropType<boolean>;
-            };
-            paddingSize: {
-                type: PropType<import('../Cards/Card').CardPaddingSize>;
-            };
-            dividerUnderHeader: {
-                type: PropType<boolean>;
-            };
-            hasRibbon: {
-                type: PropType<boolean>;
-            };
-            elevation: {
-                type: PropType<import('../Cards/Card').CardElevation>;
-            };
-            radius: {
-                type: PropType<import('../Cards/Card').CardRadius>;
-            };
-            backgroundColor: {
-                type: PropType<import('../Cards/Card').CardBackgroundColor>;
-            };
-            isFlat: {
-                type: PropType<boolean>;
-            };
-            ribbonPosition: {
-                type: PropType<import('../Cards/Card').CardRibbonPositions>;
-            };
-            ribbonSize: {
-                type: PropType<import('../Cards/Card').CardRibbonSizes>;
-            };
-            ribbonColor: {
-                type: PropType<import('../Cards/Card').CardRibbonColors>;
-            };
-            hasRibbonRadius: {
-                type: PropType<boolean>;
-            };
-            hasLoadingBar: {
-                type: PropType<boolean>;
-            };
-            loadingBarColor: {
-                type: PropType<string>;
-            };
-            loadingBarTime: {
-                type: PropType<string>;
-            };
-            isContentScrollable: {
-                type: PropType<boolean>;
-            };
-            hasRadius: {
-                type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to radius">>;
-            };
-        }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import('vue').ExtractPropTypes<{
-            contentHasPadding: {
-                type: PropType<boolean>;
-            };
-            headerHasPadding: {
-                type: PropType<boolean>;
-            };
-            footerHasPadding: {
-                type: PropType<boolean>;
-            };
-            paddingSize: {
-                type: PropType<import('../Cards/Card').CardPaddingSize>;
-            };
-            dividerUnderHeader: {
-                type: PropType<boolean>;
-            };
-            hasRibbon: {
-                type: PropType<boolean>;
-            };
-            elevation: {
-                type: PropType<import('../Cards/Card').CardElevation>;
-            };
-            radius: {
-                type: PropType<import('../Cards/Card').CardRadius>;
-            };
-            backgroundColor: {
-                type: PropType<import('../Cards/Card').CardBackgroundColor>;
-            };
-            isFlat: {
-                type: PropType<boolean>;
-            };
-            ribbonPosition: {
-                type: PropType<import('../Cards/Card').CardRibbonPositions>;
-            };
-            ribbonSize: {
-                type: PropType<import('../Cards/Card').CardRibbonSizes>;
-            };
-            ribbonColor: {
-                type: PropType<import('../Cards/Card').CardRibbonColors>;
-            };
-            hasRibbonRadius: {
-                type: PropType<boolean>;
-            };
-            hasLoadingBar: {
-                type: PropType<boolean>;
-            };
-            loadingBarColor: {
-                type: PropType<string>;
-            };
-            loadingBarTime: {
-                type: PropType<string>;
-            };
-            isContentScrollable: {
-                type: PropType<boolean>;
-            };
-            hasRadius: {
-                type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to radius">>;
-            };
-        }>> & Readonly<{}>, {}, {}, {}, {}, {}>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
-        contentHasPadding: {
-            type: PropType<boolean>;
-        };
-        headerHasPadding: {
-            type: PropType<boolean>;
-        };
-        footerHasPadding: {
-            type: PropType<boolean>;
-        };
-        paddingSize: {
-            type: PropType<import('../Cards/Card').CardPaddingSize>;
-        };
-        dividerUnderHeader: {
-            type: PropType<boolean>;
-        };
-        hasRibbon: {
-            type: PropType<boolean>;
-        };
-        elevation: {
-            type: PropType<import('../Cards/Card').CardElevation>;
-        };
-        radius: {
-            type: PropType<import('../Cards/Card').CardRadius>;
-        };
-        backgroundColor: {
-            type: PropType<import('../Cards/Card').CardBackgroundColor>;
-        };
-        isFlat: {
-            type: PropType<boolean>;
-        };
-        ribbonPosition: {
-            type: PropType<import('../Cards/Card').CardRibbonPositions>;
-        };
-        ribbonSize: {
-            type: PropType<import('../Cards/Card').CardRibbonSizes>;
-        };
-        ribbonColor: {
-            type: PropType<import('../Cards/Card').CardRibbonColors>;
-        };
-        hasRibbonRadius: {
-            type: PropType<boolean>;
-        };
-        hasLoadingBar: {
-            type: PropType<boolean>;
-        };
-        loadingBarColor: {
-            type: PropType<string>;
-        };
-        loadingBarTime: {
-            type: PropType<string>;
-        };
-        isContentScrollable: {
-            type: PropType<boolean>;
-        };
-        hasRadius: {
-            type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to radius">>;
-        };
-    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-        $slots: Readonly<{
-            header?: () => any;
-            content?: () => any;
-            footer?: () => any;
-            experimentalContent?: () => any;
-        }> & {
-            header?: () => any;
-            content?: () => any;
-            footer?: () => any;
-            experimentalContent?: () => any;
-        };
-    });
-}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/lib/js/{components/Form/InputField/useInputFieldWithinForm.d.ts → composables/useTextFieldWithinForm.d.ts}

@@ -1,6 +1,6 @@
 import { MaybeRefOrGetter, Ref } from 'vue';
 
-export declare function useInputFieldWithinForm(name: MaybeRefOrGetter<string | undefined>, modelValue: Ref<string | undefined>): {
+export declare function useTextFieldWithinForm(name: MaybeRefOrGetter<string | undefined>, modelValue: Ref<string | undefined>): {
     onBlur: (event: Event) => void;
     onInput: () => void;
     value: Ref<string | undefined, string | undefined>;

package/dist/lib/js/index.d.ts

@@ -53,11 +53,15 @@ export { default as NumberInCircle } from './components/NumberInCircle';
 export { default as DsNumberInCircle } from './components/NumberInCircle';
 export * from './components/NumberInCircle/NumberInCircle.consts';
 export { default as DsPasswordField } from './components/Form/PasswordField';
+export { default as DsPinInputField } from './components/Form/PinInputField';
+export * from './components/Form/PinInputField';
 export { default as DsSelectField } from './components/Form/SelectField';
 export * from './components/Form/SelectField';
 export { default as TabItem } from './components/TabItem';
 export { default as DsTabItem } from './components/TabItem';
 export * from './components/TabItem/TabItem.consts';
+export { default as DsTextAreaField } from './components/Form/TextAreaField';
+export * from './components/Form/TextAreaField';
 export { default as Tile } from './components/Tile';
 export { default as DsTile } from './components/Tile';
 export * from './components/Tile/Tile.consts';

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

@@ -104,6 +104,21 @@ describe('CheckboxGroupField', () => {
 		);
 	});
 
+	it('sets aria-describedby only when a message is rendered', () => {
+		const wrapper = mount(CheckboxGroupField, {
+			props: {
+				label: 'Test Label',
+			},
+			slots: {
+				field: '<div>Content</div>',
+			},
+		});
+
+		expect(
+			wrapper.find('.ds-checkboxGroupField').attributes('aria-describedby'),
+		).toBeUndefined();
+	});
+
 	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

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

@@ -5,7 +5,7 @@
 				v-model="value"
 				class="ds-checkboxGroupField"
 				role="group"
-				:aria-describedby="messageId"
+				:aria-describedby="hasMessage ? messageId : undefined"
 				:aria-labelledby="labelId"
 				:disabled="formFieldProps.state === FORM_FIELD_STATES.DISABLED"
 				loop
@@ -64,7 +64,7 @@ const {
 	...rest
 } = defineProps<CheckboxGroupFieldProps>();
 
-defineSlots<CheckboxGroupFieldSlots>();
+const slots = defineSlots<CheckboxGroupFieldSlots>();
 
 const modelValue = defineModel<Array<string>>({
 	default: [],
@@ -77,6 +77,9 @@ const formFieldProps = computed<FormFieldProps>(() => {
 	return extractFormFieldProps(rest, errors.value);
 });
 
+// Avoids pointing `aria-describedby` at a message element that is never rendered.
+const hasMessage = computed(() => !!(formFieldProps.value.messageText || slots.message));
+
 const mappedState = computed(() => {
 	const stateMap: Record<FormFieldState, CheckboxState> = {
 		[FORM_FIELD_STATES.DEFAULT]: CHECKBOX_STATES.DEFAULT,

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

@@ -7,6 +7,8 @@ import { toTypedSchema } from '@vee-validate/zod';
 import { array, object, string } from 'zod';
 import CheckboxGroupField from './CheckboxGroupField/CheckboxGroupField.vue';
 import SelectField from './SelectField';
+import TextAreaField from './TextAreaField';
+import PinInputField from './PinInputField';
 import Button from '../Buttons/Button';
 
 export default {
@@ -15,13 +17,23 @@ export default {
 } as Meta<any>;
 
 export const SimpleForm = () => ({
-	components: { InputField, CheckboxGroupField, Checkbox, SelectField, Button },
+	components: {
+		InputField,
+		CheckboxGroupField,
+		Checkbox,
+		SelectField,
+		TextAreaField,
+		PinInputField,
+		Button,
+	},
 	setup: () => {
 		const { handleSubmit } = useForm({
 			initialValues: {
 				fullName: '',
 				country: '',
 				newsletterTopics: [],
+				notes: '',
+				code: '',
 			},
 			validationSchema: toTypedSchema(
 				object({
@@ -31,6 +43,8 @@ export const SimpleForm = () => ({
 						1,
 						'Wybierz przynajmniej jeden temat newslettera',
 					),
+					notes: string().max(500, 'Maksymalnie 500 znaków'),
+					code: string().length(6, 'Kod ma 6 cyfr'),
 				}),
 			),
 		});
@@ -54,7 +68,7 @@ export const SimpleForm = () => ({
 		};
 	},
 	template: `
-		<form @submit.prevent="onSubmit" style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
+		<form novalidate @submit.prevent="onSubmit" style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
 			<InputField label="Imię i nazwisko" name="fullName" />
 			<SelectField
 				label="Kraj"
@@ -70,6 +84,13 @@ export const SimpleForm = () => ({
 					<Checkbox value="sports">Sport</Checkbox>
 				</template>
 			</CheckboxGroupField>
+			<TextAreaField
+				label="Uwagi"
+				name="notes"
+				is-autoresizing
+				:input-props="{ rows: 4, maxlength: 500, placeholder: 'Coś jeszcze?' }"
+			/>
+			<PinInputField label="Kod z e-maila" name="code" />
 			<Button as="button">
 				Wyślij
 			</Button>

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

@@ -87,6 +87,16 @@ describe('InputField', () => {
 		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('input').attributes('aria-describedby')).toBeUndefined();
+	});
+
 	it('should pass inputProps to the input element', () => {
 		const inputProps = {
 			placeholder: 'Enter text',
@@ -252,7 +262,7 @@ describe('InputField', () => {
 			}).toThrowError();
 		});
 
-		it('overrides state and message on vee-validate form error', async () => {
+		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',