@bethinkpl/design-system 30.1.2 → 30.3.0

package/lib/js/components/Cards/Card/Card.spec.ts

@@ -55,6 +55,29 @@ describe('Card', () => {
 		expect(component.text()).toContain(footer);
 	});
 
+	it('should render content slot with padding by default', () => {
+		const content = 'Wpłynąlem na suchego przestwór oceanu';
+		const component = createComponent({
+			slots: {
+				content: () => [h('span', content)],
+			},
+		});
+
+		expect(component.find('.ds-card__content').classes()).toContain('-ds-withPadding');
+	});
+
+	it('should render content slot without padding if contentHasPadding is false', () => {
+		const content = 'Wpłynąlem na suchego przestwór oceanu';
+		const component = createComponent({
+			props: { contentHasPadding: false },
+			slots: {
+				content: () => [h('span', content)],
+			},
+		});
+
+		expect(component.find('.ds-card__content').classes()).not.toContain('-ds-withPadding');
+	});
+
 	it('should render header slot with padding', () => {
 		const header = 'Wpłynąlem na suchego przestwór oceanu';
 		const component = createComponent({

package/lib/js/components/Cards/Card/Card.stories.ts

@@ -39,6 +39,7 @@ const args = {
 	header: 'header slot',
 	content: 'content slot that supports <b>HTML markup</b>',
 	footer: 'footer slot',
+	contentHasPadding: true,
 	headerHasPadding: false,
 	footerHasPadding: false,
 	paddingSize: CARD_PADDING_SIZES.SMALL,

package/lib/js/components/Cards/Card/Card.vue

@@ -45,7 +45,10 @@
 			<div
 				v-if="$slots.content"
 				class="ds-card__content"
-				:class="{ '-ds-scrollable': isContentScrollable }"
+				:class="{
+					'-ds-scrollable': isContentScrollable,
+					'-ds-withPadding': contentHasPadding,
+				}"
 			>
 				<slot name="content" />
 			</div>
@@ -118,10 +121,14 @@
 	}
 
 	&__content {
-		padding: $space-s;
+		padding: $space-s 0;
 
-		#{$root}.-ds-paddingLarge & {
-			padding: $space-s $space-l;
+		&.-ds-withPadding {
+			padding: $space-s;
+
+			#{$root}.-ds-paddingLarge & {
+				padding: $space-s $space-l;
+			}
 		}
 
 		&.-ds-scrollable {
@@ -157,6 +164,13 @@
 			border-top-left-radius: $card-border-radius;
 			border-top-right-radius: 0;
 		}
+
+		.-ds-leftBorder & {
+			height: 100%;
+			left: 0;
+			position: absolute;
+			top: 0;
+		}
 	}
 }
 </style>
@@ -180,6 +194,8 @@ import {
 } from './Card.consts';
 
 const {
+	// only contentHasPadding is true by default for backward compatibility
+	contentHasPadding = true,
 	headerHasPadding = false,
 	footerHasPadding = false,
 	paddingSize = CARD_PADDING_SIZES.SMALL,
@@ -195,6 +211,7 @@ const {
 	isFlat = false,
 	isContentScrollable = false,
 } = defineProps<{
+	contentHasPadding?: boolean;
 	headerHasPadding?: boolean;
 	footerHasPadding?: boolean;
 	paddingSize?: CardPaddingSize;

package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue

@@ -56,6 +56,7 @@
 			</div>
 			<icon-button
 				v-if="isClosable"
+				:color="ICON_COLORS.NEUTRAL"
 				:icon="ICONS.FA_XMARK"
 				:size="ICON_BUTTON_SIZES.MEDIUM"
 				:touchable="false"
@@ -71,7 +72,7 @@
 @import '../../../../styles/settings/typography/tokens';
 @import '../../../../styles/settings/colors/tokens';
 
-$minimal-drawer-header-height: 82px;
+$minimal-drawer-header-height: 58px;
 
 .ds-drawerHeader {
 	display: flex;
@@ -127,7 +128,7 @@ $minimal-drawer-header-height: 82px;
 	}
 
 	&__titleText {
-		@include heading-s-default-bold-uppercase;
+		@include heading-s-default-bold;
 
 		&.-ds-neutralStrong {
 			color: $color-neutral-text-strong;
@@ -150,7 +151,7 @@ $minimal-drawer-header-height: 82px;
 		display: flex;
 		justify-content: space-between;
 		min-height: $minimal-drawer-header-height;
-		padding: $space-m $space-xs;
+		padding: $space-xs;
 	}
 
 	&__actions {
@@ -168,7 +169,7 @@ import IconButton from '../../Buttons/IconButton/IconButton.vue';
 import Chip from '../../Chip/Chip.vue';
 import Icon from '../../Icons/Icon/Icon.vue';
 import { BUTTON_TYPES } from '../../Buttons/Button';
-import { ICON_SIZES, ICONS } from '../../Icons/Icon';
+import { ICON_COLORS, ICON_SIZES, ICONS } from '../../Icons/Icon';
 import { DIVIDER_PROMINENCES, DIVIDER_SIZES } from '../../Divider';
 import { ICON_BUTTON_SIZES } from '../../Buttons/IconButton';
 import { DRAWER_HEADER_TITLE_COLORS, DrawerHeaderTitleColor } from './DrawerHeader.consts';
@@ -239,16 +240,15 @@ export default defineComponent({
 	setup() {
 		const { t } = useLegacyI18n();
 
-		return { t };
-	},
-	data() {
 		return {
-			BUTTON_TYPES: Object.freeze(BUTTON_TYPES),
-			DIVIDER_SIZES: Object.freeze(DIVIDER_SIZES),
-			DIVIDER_PROMINENCES: Object.freeze(DIVIDER_PROMINENCES),
-			ICONS: Object.freeze(ICONS),
-			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),
-			ICON_SIZES: Object.freeze(ICON_SIZES),
+			t,
+			BUTTON_TYPES,
+			DIVIDER_SIZES,
+			DIVIDER_PROMINENCES,
+			ICONS,
+			ICON_BUTTON_SIZES,
+			ICON_SIZES,
+			ICON_COLORS,
 		};
 	},
 });

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

@@ -1,15 +1,32 @@
-import {
-	SELECTION_CONTROL_SIZE,
-	SELECTION_CONTROL_STATE,
-} from '../SelectionControl/SelectionControl.consts';
+import { Value } from '../../../utils/type.utils';
 
-export const CHECKBOX_SIZE = {
-	...SELECTION_CONTROL_SIZE,
+export const CHECKBOX_SIZES = {
+	X_SMALL: 'x-small',
+	SMALL: 'small',
+	MEDIUM: 'medium',
 } as const;
 
-export type CheckboxSize = (typeof CHECKBOX_SIZE)[keyof typeof CHECKBOX_SIZE];
-export const CHECKBOX_STATE = {
-	...SELECTION_CONTROL_STATE,
+export type CheckboxSize = Value<typeof CHECKBOX_SIZES>;
+
+export const CHECKBOX_STATES = {
+	DEFAULT: 'default',
+	DISABLED: 'disabled',
+	ERROR: 'error',
+} as const;
+
+export type CheckboxState = Value<typeof CHECKBOX_STATES>;
+
+export const CHECKBOX_VALUES = {
+	CHECKED: true,
+	UNCHECKED: false,
+	INDETERMINATE: 'indeterminate',
+} as const;
+
+export type CheckboxValue = Value<typeof CHECKBOX_VALUES>;
+
+export const CHECKBOX_ELEVATIONS = {
+	NONE: 'none',
+	X_SMALL: 'x-small',
 } as const;
 
-export type CheckboxState = (typeof CHECKBOX_STATE)[keyof typeof CHECKBOX_STATE];
+export type CheckboxElevation = Value<typeof CHECKBOX_ELEVATIONS>;

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

@@ -0,0 +1,294 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+import Checkbox from './Checkbox.vue';
+import { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
+import {
+	CHECKBOX_SIZES,
+	CHECKBOX_STATES,
+	CHECKBOX_VALUES,
+	CHECKBOX_ELEVATIONS,
+} from './Checkbox.consts';
+import { ICON_SIZES, ICONS } from '../../Icons/Icon';
+import Icon from '../../Icons/Icon/Icon.vue';
+
+function setup(
+	props: Partial<ComponentProps<typeof Checkbox>> = {},
+	slots: Partial<ComponentSlots<typeof Checkbox>> = {},
+) {
+	return mount(Checkbox, {
+		props: {
+			value: 'test',
+			...props,
+		},
+		// @ts-expect-error - it looks like a bug in vue-component-type-helpers or vue-test-utils
+		slots,
+		attachTo: 'body',
+	});
+}
+
+describe('Checkbox', () => {
+	it('should render', () => {
+		const wrapper = setup();
+
+		expect(wrapper.exists()).toBe(true);
+		expect(wrapper.find('.ds-checkbox').exists()).toBe(true);
+		expect(wrapper.find('.ds-checkbox__root').exists()).toBe(true);
+		expect(wrapper.find('.ds-checkbox__indicator').exists()).toBe(true);
+	});
+
+	it('should render with label', () => {
+		const wrapper = setup(
+			{},
+			{
+				default: () => [h('span', 'Test Label')],
+			},
+		);
+
+		expect(wrapper.find('.ds-formControlLabel').exists()).toBe(true);
+		expect(wrapper.find('.ds-formControlLabel').text()).toBe('Test Label');
+	});
+
+	it('should not render label when no slot content provided', () => {
+		const wrapper = setup();
+
+		expect(wrapper.find('.ds-checkbox__label').exists()).toBe(false);
+	});
+
+	describe('sizes', () => {
+		it.each([
+			{
+				size: CHECKBOX_SIZES.X_SMALL,
+				expectedClass: '-ds-x-small',
+				expectedIconSize: ICON_SIZES.XX_SMALL,
+			},
+			{
+				size: CHECKBOX_SIZES.SMALL,
+				expectedClass: '-ds-small',
+				expectedIconSize: ICON_SIZES.X_SMALL,
+			},
+			{
+				size: CHECKBOX_SIZES.MEDIUM,
+				expectedClass: '-ds-medium',
+				expectedIconSize: ICON_SIZES.SMALL,
+			},
+		])('should render $size size correctly', ({ size, expectedClass, expectedIconSize }) => {
+			const wrapper = setup({ size });
+
+			expect(wrapper.find('.ds-checkbox').classes()).toContain(expectedClass);
+
+			// Check that icon has correct size
+			const iconComponent = wrapper.findComponent({ name: 'Icon' });
+			if (iconComponent.exists()) {
+				expect(iconComponent.props('size')).toBe(expectedIconSize);
+			}
+		});
+
+		it('should default to small size', () => {
+			const wrapper = setup();
+
+			expect(wrapper.find('.ds-checkbox').classes()).toContain('-ds-small');
+		});
+	});
+
+	describe('states', () => {
+		it.each([
+			{
+				state: CHECKBOX_STATES.DISABLED,
+				expectedClass: '-ds-disabled',
+			},
+			{
+				state: CHECKBOX_STATES.ERROR,
+				expectedClass: '-ds-error',
+			},
+			{
+				state: CHECKBOX_STATES.DEFAULT,
+				expectedClass: null,
+			},
+		])('should render $state state correctly', ({ state, expectedClass }) => {
+			const wrapper = setup({ state });
+
+			if (expectedClass) {
+				expect(wrapper.find('.ds-checkbox').classes()).toContain(expectedClass);
+			} else {
+				expect(wrapper.find('.ds-checkbox').classes()).not.toContain('-ds-disabled');
+				expect(wrapper.find('.ds-checkbox').classes()).not.toContain('-ds-error');
+			}
+		});
+
+		it('should disable checkbox when state is disabled', () => {
+			const wrapper = setup({ state: CHECKBOX_STATES.DISABLED });
+
+			const checkboxRoot = wrapper.find('[role="checkbox"]');
+			expect(checkboxRoot.attributes('disabled')).toBeDefined();
+		});
+
+		it('should default to default state', () => {
+			const wrapper = setup();
+
+			expect(wrapper.find('.ds-checkbox').classes()).not.toContain('-ds-disabled');
+			expect(wrapper.find('.ds-checkbox').classes()).not.toContain('-ds-error');
+		});
+	});
+
+	describe('elevations', () => {
+		it.each([
+			{
+				elevation: CHECKBOX_ELEVATIONS.X_SMALL,
+				expectedClass: '-ds-elevation',
+			},
+			{
+				elevation: CHECKBOX_ELEVATIONS.NONE,
+				expectedClass: null,
+			},
+		])('should render $elevation elevation correctly', ({ elevation, expectedClass }) => {
+			const wrapper = setup({ elevation });
+
+			if (expectedClass) {
+				expect(wrapper.find('.ds-checkbox').classes()).toContain(expectedClass);
+			} else {
+				expect(wrapper.find('.ds-checkbox').classes()).not.toContain('-ds-elevation');
+			}
+		});
+
+		it('should default to x-small elevation', () => {
+			const wrapper = setup();
+
+			expect(wrapper.find('.ds-checkbox').classes()).toContain('-ds-elevation');
+		});
+	});
+
+	describe('checkbox values', () => {
+		it('should display checked icon when value is checked', () => {
+			const wrapper = setup({ modelValue: CHECKBOX_VALUES.CHECKED });
+
+			const icon = wrapper.findComponent(Icon);
+
+			expect(icon.props('icon')).toBe(ICONS.FAD_SQUARE_CHECK);
+		});
+
+		it('should display checked icon when value is unchecked', () => {
+			const wrapper = setup({ modelValue: CHECKBOX_VALUES.UNCHECKED });
+
+			const icon = wrapper.findComponent(Icon);
+
+			expect(icon.props('icon')).toBe(ICONS.FAD_SQUARE);
+		});
+
+		it('should display checked icon when value is indeterminate', () => {
+			const wrapper = setup({ modelValue: CHECKBOX_VALUES.INDETERMINATE });
+
+			const icon = wrapper.findComponent(Icon);
+
+			expect(icon.props('icon')).toBe(ICONS.FAD_SQUARE_MINUS);
+		});
+	});
+
+	describe('user interactions', () => {
+		it('should emit update:modelValue when clicked', 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);
+		});
+
+		it('should toggle from checked to unchecked when clicked', async () => {
+			const wrapper = setup({ modelValue: CHECKBOX_VALUES.CHECKED });
+
+			await wrapper.find('label').trigger('click');
+
+			expect(wrapper.emitted('update:modelValue')?.[0]?.[0]).toBe(CHECKBOX_VALUES.UNCHECKED);
+		});
+
+		it('should toggle from indeterminate to checked when clicked', async () => {
+			const wrapper = setup({ modelValue: CHECKBOX_VALUES.INDETERMINATE });
+
+			await wrapper.find('label').trigger('click');
+
+			expect(wrapper.emitted('update:modelValue')?.[0]?.[0]).toBe(CHECKBOX_VALUES.CHECKED);
+		});
+
+		it('should not emit when disabled and clicked', async () => {
+			const wrapper = setup({
+				modelValue: CHECKBOX_VALUES.UNCHECKED,
+				state: CHECKBOX_STATES.DISABLED,
+			});
+
+			await wrapper.find('label').trigger('click');
+
+			// Should not emit because checkbox is disabled
+			expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+		});
+	});
+
+	describe('accessibility', () => {
+		it('should have proper ARIA attributes', () => {
+			const wrapper = setup({ modelValue: CHECKBOX_VALUES.CHECKED });
+
+			const checkboxRoot = wrapper.find('[role="checkbox"]');
+			expect(checkboxRoot.attributes('role')).toBe('checkbox');
+			expect(checkboxRoot.attributes('aria-checked')).toBe('true');
+		});
+
+		it('should have aria-checked="false" when unchecked', () => {
+			const wrapper = setup({ modelValue: CHECKBOX_VALUES.UNCHECKED });
+
+			const checkboxRoot = wrapper.find('[role="checkbox"]');
+			expect(checkboxRoot.attributes('aria-checked')).toBe('false');
+		});
+
+		it('should have aria-checked="mixed" when indeterminate', () => {
+			const wrapper = setup({ modelValue: CHECKBOX_VALUES.INDETERMINATE });
+
+			const checkboxRoot = wrapper.find('[role="checkbox"]');
+			expect(checkboxRoot.attributes('aria-checked')).toBe('mixed');
+		});
+
+		it('should be focusable when not disabled', () => {
+			const wrapper = setup();
+
+			const checkboxRoot = wrapper.find('[role="checkbox"]');
+
+			expect(checkboxRoot.attributes('type')).toBe('button');
+			expect(checkboxRoot.attributes('disabled')).toBeUndefined();
+		});
+
+		it('should not be focusable when disabled', () => {
+			const wrapper = setup({ state: CHECKBOX_STATES.DISABLED });
+
+			const checkboxRoot = wrapper.find('[role="checkbox"]');
+			expect(checkboxRoot.attributes('disabled')).toBeDefined();
+		});
+	});
+
+	describe('styling classes', () => {
+		it('should apply multiple modifier classes correctly', () => {
+			const wrapper = setup({
+				size: CHECKBOX_SIZES.MEDIUM,
+				state: CHECKBOX_STATES.ERROR,
+				elevation: CHECKBOX_ELEVATIONS.X_SMALL,
+			});
+
+			const checkbox = wrapper.find('.ds-checkbox');
+			expect(checkbox.classes()).toContain('-ds-medium');
+			expect(checkbox.classes()).toContain('-ds-error');
+			expect(checkbox.classes()).toContain('-ds-elevation');
+		});
+	});
+
+	it('should work with v-model pattern', async () => {
+		const modelValue = CHECKBOX_VALUES.UNCHECKED;
+		const onUpdate = vi.fn();
+
+		const wrapper = setup({
+			modelValue,
+			'onUpdate:modelValue': onUpdate,
+		});
+
+		await wrapper.find('label').trigger('click');
+
+		expect(onUpdate).toHaveBeenCalledWith(CHECKBOX_VALUES.CHECKED);
+	});
+});

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

@@ -1,10 +1,16 @@
 import Checkbox from './Checkbox.vue';
 
 import { Meta, StoryFn } from '@storybook/vue3';
-import { args, argTypes, template } from '../SelectionControl/SelectionControl.sb.shared';
-import { CHECKBOX_SIZE, CHECKBOX_STATE } from './Checkbox.consts';
-import { useArgs } from '@storybook/preview-api';
+import {
+	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 {
 	title: 'Components/Form/Checkbox',
@@ -16,33 +22,68 @@ const StoryTemplate: StoryFn<typeof Checkbox> = (args) => {
 	const [_, updateArgs] = useArgs();
 
 	return {
-		components: { Checkbox },
+		components: { Checkbox, Banner },
 		setup() {
-			return { args };
-		},
-		methods: {
-			onIsSelectedUpdated(isSelected) {
-				updateArgs({
-					isSelected,
-				});
-			},
+			const props = computed(() => {
+				const { default: defaultSlot, modelValue, ...rest } = args;
+
+				return rest;
+			});
+
+			const defaultSlot = computed(() => args.default);
+			const modelValue = computed(() => args.modelValue);
+
+			return { defaultSlot, props, modelValue, updateArgs };
 		},
-		template: template('checkbox'),
+		template: `
+			<Checkbox 
+				v-bind="props"
+				:model-value="modelValue"
+				@update:model-value="(value) => updateArgs({ modelValue: value })"
+			>
+				<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 />
+		`,
 	};
 };
 
 export const Interactive = StoryTemplate.bind({});
 
-Interactive.argTypes = argTypes(CHECKBOX_SIZE, CHECKBOX_STATE);
+Interactive.argTypes = {
+	size: {
+		control: 'select',
+		options: Object.values(CHECKBOX_SIZES),
+	},
+	modelValue: {
+		control: 'select',
+		options: Object.values(CHECKBOX_VALUES),
+	},
+	state: {
+		control: 'select',
+		options: Object.values(CHECKBOX_STATES),
+	},
+	elevation: {
+		control: 'select',
+		options: Object.values(CHECKBOX_ELEVATIONS),
+	},
+	default: {
+		control: 'text',
+	},
+};
 
-Interactive.args = args(CHECKBOX_SIZE, CHECKBOX_STATE);
+Interactive.args = {
+	default: 'Example label',
+	modelValue: false,
+	size: CHECKBOX_SIZES.SMALL,
+	state: CHECKBOX_STATES.DEFAULT,
+	elevation: CHECKBOX_ELEVATIONS.X_SMALL,
+	value: 'example',
+};
 
 Interactive.parameters = {
-	actions: {
-		handles: ['click', 'toggle'],
-	},
 	design: {
 		type: 'figma',
-		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=1552-34962&t=Ui6dF84wekRpqsXb-0',
+		url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=7269-127863&m=dev',
 	},
 };