@bethinkpl/design-system 33.0.3 → 33.0.5

package/lib/images/icons/ballot-check-time.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none"><path d="M41 0C45.375 0 49 3.625 49 8V20C49 21.6569 47.6569 23 46 23C44.3431 23 43 21.6569 43 20V8C43 6.875 42.125 6 41 6H9C7.875 6 7 6.875 7 8V56C7 57.125 7.875 58 9 58H26C27.6569 58 29 59.3431 29 61C29 62.6569 27.6569 64 26 64H9C4.625 64 1 60.375 1 56V8C1 3.625 4.625 0 9 0H41Z" fill="currentColor"/><path d="M44.5 35C45.9548 35 47.166 36.2112 47.166 37.666V44.0645L52.4902 47.6357C53.7414 48.432 54.0528 50.0998 53.2842 51.3076C52.488 52.5583 50.8209 52.8687 49.6133 52.1006L43.043 47.7197C42.2403 47.2291 41.834 46.3383 41.834 45.5V37.666C41.834 36.2112 43.0452 35 44.5 35Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M44.5 27C54.691 27 63 35.309 63 45.5C63 55.691 54.691 64 44.5 64C34.309 64 26 55.691 26 45.5C26 35.309 34.309 27 44.5 27ZM44.5 32.332C37.2188 32.332 31.332 38.2188 31.332 45.5C31.332 52.7812 37.2188 58.668 44.5 58.668C51.7812 58.668 57.668 52.7812 57.668 45.5C57.668 38.2188 51.7812 32.332 44.5 32.332Z" fill="currentColor"/><path d="M20 43C21.625 43 23 44.375 23 46C23 47.625 21.625 49 20 49H14C12.375 49 11 47.625 11 46C11 44.375 12.375 43 14 43H20Z" fill="currentColor"/><path d="M15 29C17.25 29 19 30.75 19 33C19 35.25 17.25 37 15 37C12.75 37 11 35.25 11 33C11 30.75 12.75 29 15 29Z" fill="currentColor"/><path d="M19.125 11.5C19.875 10.5 21.375 10.25 22.5 11.125C23.5 11.875 23.75 13.375 22.875 14.5L16.875 22.5C16.5 23 15.75 23.375 15 23.375C14.25 23.375 13.5 23 13.125 22.5L10.125 18.5C9.25 17.375 9.5 15.875 10.625 15.125C11.625 14.25 13.125 14.5 13.875 15.625L15 17L19.125 11.5Z" fill="currentColor"/><path d="M37 16C38.625 16 40 17.375 40 19C40 20.625 38.625 22 37 22H29C27.375 22 26 20.625 26 19C26 17.375 27.375 16 29 16H37Z" fill="currentColor"/></svg>

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/components/Icons/Icon/Icon.consts.ts

@@ -7,6 +7,7 @@ import HideAnswers from '../../../../images/icons/icon-hide-answers.svg';
 import SidebarFlipSolid from '../../../../images/icons/sidebar-flip-solid.svg';
 import Change from '../../../../images/icons/change.svg';
 import CloudDisconnected from '../../../../images/icons/cloud-disconnected.svg';
+import BallotCheckTime from '../../../../images/icons/ballot-check-time.svg';
 
 import { FONTAWESOME_ICONS } from '../../../icons/fontawesome';
 import { Value } from '../../../utils/type.utils';
@@ -52,6 +53,7 @@ const BETHINK_ICONS = {
 	SIDEBAR_FLIP_SOLID: SidebarFlipSolid,
 	SLIDERS_SEARCH: SlidersSearch,
 	CLOUD_DISCONNECTED: CloudDisconnected,
+	BALLOT_CHECK_TIME: BallotCheckTime,
 } as const;
 
 export const ICONS = {

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.5",
   "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"
   },