@bethinkpl/design-system 33.0.3 → 33.0.4

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

@@ -185,13 +185,17 @@ describe('Checkbox', () => {
 	});
 
 	describe('user interactions', () => {
-		it('should emit update:modelValue when clicked', async () => {
+		it('should change to checked state when clicked from unchecked', async () => {
 			const wrapper = setup({ modelValue: CHECKBOX_VALUES.UNCHECKED });
 
 			await wrapper.find('label').trigger('click');
 
-			expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-			expect(wrapper.emitted('update:modelValue')?.[0]?.[0]).toBe(CHECKBOX_VALUES.CHECKED);
+			const checkboxRoot = wrapper.find('[role="checkbox"]');
+			const checkboxIndicator = wrapper.find('.ds-checkbox__indicator');
+
+			expect(checkboxRoot.attributes('data-state')).toBe('checked');
+			expect(checkboxRoot.attributes('aria-checked')).toBe('true');
+			expect(checkboxIndicator.attributes('data-state')).toBe('checked');
 		});
 
 		it('should toggle from checked to unchecked when clicked', async () => {
@@ -199,7 +203,9 @@ describe('Checkbox', () => {
 
 			await wrapper.find('label').trigger('click');
 
-			expect(wrapper.emitted('update:modelValue')?.[0]?.[0]).toBe(CHECKBOX_VALUES.UNCHECKED);
+			const checkboxRoot = wrapper.find('[role="checkbox"]');
+			expect(checkboxRoot.attributes('data-state')).toBe('unchecked');
+			expect(checkboxRoot.attributes('aria-checked')).toBe('false');
 		});
 
 		it('should toggle from indeterminate to checked when clicked', async () => {
@@ -207,19 +213,25 @@ describe('Checkbox', () => {
 
 			await wrapper.find('label').trigger('click');
 
-			expect(wrapper.emitted('update:modelValue')?.[0]?.[0]).toBe(CHECKBOX_VALUES.CHECKED);
+			const checkboxRoot = wrapper.find('[role="checkbox"]');
+			expect(checkboxRoot.attributes('data-state')).toBe('checked');
+			expect(checkboxRoot.attributes('aria-checked')).toBe('true');
 		});
 
-		it('should not emit when disabled and clicked', async () => {
+		it('should not change state when disabled and clicked', async () => {
 			const wrapper = setup({
 				modelValue: CHECKBOX_VALUES.UNCHECKED,
 				state: CHECKBOX_STATES.DISABLED,
 			});
 
+			const checkboxRoot = wrapper.find('[role="checkbox"]');
+			const initialState = checkboxRoot.attributes('data-state');
+
 			await wrapper.find('label').trigger('click');
 
-			// Should not emit because checkbox is disabled
-			expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+			// Should not change state because checkbox is disabled
+			expect(checkboxRoot.attributes('data-state')).toBe(initialState);
+			expect(checkboxRoot.attributes('aria-checked')).toBe('false');
 		});
 	});
 

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

@@ -2,14 +2,13 @@ import Checkbox from './Checkbox.vue';
 
 import { Meta, StoryFn } from '@storybook/vue3';
 import {
+	CHECKBOX_ELEVATIONS,
 	CHECKBOX_SIZES,
 	CHECKBOX_STATES,
 	CHECKBOX_VALUES,
-	CHECKBOX_ELEVATIONS,
 } from './Checkbox.consts';
 import { withActions } from '@storybook/addon-actions/decorator';
 import { computed } from 'vue';
-import Banner from '../../Banner';
 import { useArgs } from '@storybook/preview-api';
 
 export default {
@@ -22,7 +21,7 @@ const StoryTemplate: StoryFn<typeof Checkbox> = (args) => {
 	const [_, updateArgs] = useArgs();
 
 	return {
-		components: { Checkbox, Banner },
+		components: { Checkbox },
 		setup() {
 			const props = computed(() => {
 				const { default: defaultSlot, modelValue, ...rest } = args;
@@ -43,7 +42,6 @@ const StoryTemplate: StoryFn<typeof Checkbox> = (args) => {
 			>
 				<span v-if="defaultSlot" v-html="defaultSlot" />
 			</Checkbox>
-			<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 />
 		`,
 	};
 };

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

@@ -6,13 +6,12 @@ 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 },
+		components: { CheckboxGroupField, Checkbox, HelpButton },
 		setup() {
 			const { help, labelAside, message, fieldStatus, field, ...restRefs } = toRefs(args);
 			const props = reactive({ ...restRefs });
@@ -51,7 +50,6 @@ const meta: Meta<typeof CheckboxGroupField> = {
 					<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,

package/lib/js/vue-custom.d.ts

@@ -0,0 +1,7 @@
+import { TranslateFunction, ValidI18nKey } from './i18n';
+
+declare module '@vue/runtime-core' {
+	interface ComponentCustomProperties {
+		$t: TranslateFunction<ValidI18nKey | string>;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "33.0.3",
+  "version": "33.0.4",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",
@@ -112,7 +112,7 @@
     "@vueuse/core": "14.1.0",
     "lodash-es": "4.17.22",
     "primevue": "4.0.0-rc.3",
-    "reka-ui": "2.6.0",
+    "reka-ui": "2.8.0",
     "vee-validate": "4.15.1",
     "vue-component-type-helpers": "2.2.10"
   },