@bethinkpl/design-system 26.15.1 → 27.0.0

package/lib/js/components/Buttons/Button/Button.vue

@@ -1,24 +1,25 @@
 <template>
-	<span
+	<component
+		:is="as"
 		class="ds-button"
 		:class="{
 			'-ds-outlined': type === BUTTON_TYPES.OUTLINED,
 			'-ds-text': type === BUTTON_TYPES.TEXT,
 
-			'-ds-small': size === SIZES.SMALL,
-			'-ds-large': size === SIZES.LARGE,
+			'-ds-small': size === BUTTON_SIZES.SMALL,
+			'-ds-large': size === BUTTON_SIZES.LARGE,
 
-			'-ds-rounded': type !== BUTTON_TYPES.TEXT && radius === RADIUSES.ROUNDED,
+			'-ds-rounded': type !== BUTTON_TYPES.TEXT && radius === BUTTON_RADIUSES.ROUNDED,
 
-			'-ds-hovered': state === STATES.HOVERED,
-			'-ds-focused': state === STATES.FOCUSED,
-			'-ds-loading': state === STATES.LOADING,
-			'-ds-disabled': state === STATES.DISABLED,
+			'-ds-hovered': state === BUTTON_STATES.HOVERED,
+			'-ds-focused': state === BUTTON_STATES.FOCUSED,
+			'-ds-loading': state === BUTTON_STATES.LOADING,
+			'-ds-disabled': state === BUTTON_STATES.DISABLED,
 
 			[colorClassName]: true,
 
-			'-ds-elevation-x-small': elevation === ELEVATIONS.X_SMALL,
-			'-ds-elevation-small': elevation === ELEVATIONS.SMALL,
+			'-ds-elevation-x-small': elevation === BUTTON_ELEVATIONS.X_SMALL,
+			'-ds-elevation-small': elevation === BUTTON_ELEVATIONS.SMALL,
 		}"
 	>
 		<span class="ds-button__content">
@@ -37,20 +38,18 @@
 			/>
 		</span>
 		<wnl-icon
-			v-if="state === STATES.LOADING"
+			v-if="state === BUTTON_STATES.LOADING"
 			class="ds-button__loadingIcon"
 			:icon="ICONS.FAD_SPINNER_THIRD"
 			:size="loadingIconSize"
 		/>
-	</span>
+	</component>
 </template>
 
 <!-- Looking for styles? These are defined in the global styles file: design-system.scss > _buttons.scss -->
 
-<script lang="ts">
-import { Value } from '../../../utils/type.utils';
-
-import WnlIcon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
+<script lang="ts" setup>
+import WnlIcon, { ICON_SIZES, IconItem, ICONS, IconSize } from '../../Icons/Icon';
 import {
 	BUTTON_COLORS,
 	BUTTON_ELEVATIONS,
@@ -58,108 +57,58 @@ import {
 	BUTTON_SIZES,
 	BUTTON_STATES,
 	BUTTON_TYPES,
+	ButtonColor,
+	ButtonRadius,
+	ButtonSize,
+	ButtonState,
+	ButtonType,
+	ButtonElevation,
 } from './Button.consts';
+import { computed } from 'vue';
+
+const {
+	size = BUTTON_SIZES.MEDIUM,
+	type = BUTTON_TYPES.FILLED,
+	color = BUTTON_COLORS.PRIMARY,
+	radius = BUTTON_RADIUSES.CAPSULE,
+	state = BUTTON_STATES.DEFAULT,
+	iconLeft = null,
+	iconRight = null,
+	elevation = BUTTON_ELEVATIONS.NONE,
+	as = 'span',
+} = defineProps<{
+	// Fixme - remove `string` from types - it is used only to avoid breaking changes for now
+	size?: ButtonSize | string;
+	type?: ButtonType | string;
+	color?: ButtonColor | null | string;
+	radius?: ButtonRadius | string;
+	state?: ButtonState | string;
+	iconLeft?: IconItem | null;
+	iconRight?: IconItem | null;
+	elevation?: ButtonElevation | string;
+	as?: 'button' | 'a' | 'span';
+}>();
 
-import { ICON_BUTTON_COLORS } from '../IconButton/IconButton.consts';
-import { defineComponent, toRaw } from 'vue';
+const iconSize = computed((): IconSize => {
+	if (size === BUTTON_SIZES.SMALL || size === BUTTON_SIZES.MEDIUM) {
+		return ICON_SIZES.XX_SMALL;
+	}
+	return ICON_SIZES.X_SMALL;
+});
+
+const colorClassName = computed((): string => {
+	return `-ds-color-${color}`;
+});
 
-export default defineComponent({
-	// eslint-disable-next-line vue/no-reserved-component-names
-	name: 'Button',
-	components: {
-		WnlIcon,
-	},
-	props: {
-		size: {
-			type: String,
-			default: BUTTON_SIZES.MEDIUM,
-			validator(value: Value<typeof BUTTON_SIZES>) {
-				return Object.values(BUTTON_SIZES).includes(value);
-			},
-		},
-		type: {
-			type: String,
-			default: BUTTON_TYPES.FILLED,
-			validator(value: Value<typeof BUTTON_TYPES>) {
-				return Object.values(BUTTON_TYPES).includes(value);
-			},
-		},
-		color: {
-			type: [String, null],
-			default: BUTTON_COLORS.PRIMARY,
-			validator(value: Value<typeof ICON_BUTTON_COLORS>) {
-				return Object.values(ICON_BUTTON_COLORS).includes(value);
-			},
-		},
-		radius: {
-			type: String,
-			default: BUTTON_RADIUSES.CAPSULE,
-			validator(value: Value<typeof BUTTON_RADIUSES>) {
-				return Object.values(BUTTON_RADIUSES).includes(value);
-			},
-		},
-		state: {
-			type: String,
-			default: BUTTON_STATES.DEFAULT,
-			validator(value: Value<typeof BUTTON_STATES>) {
-				return Object.values(BUTTON_STATES).includes(value);
-			},
-		},
-		iconLeft: {
-			type: Object,
-			default: null,
-			validator(icon) {
-				return Object.values(ICONS).includes(toRaw(icon));
-			},
-		},
-		iconRight: {
-			type: Object,
-			default: null,
-			validator(icon) {
-				return Object.values(ICONS).includes(toRaw(icon));
-			},
-		},
-		elevation: {
-			type: String,
-			default: BUTTON_ELEVATIONS.NONE,
-			validator(value: Value<typeof BUTTON_ELEVATIONS>) {
-				return Object.values(BUTTON_ELEVATIONS).includes(value);
-			},
-		},
-	},
-	data() {
-		return {
-			ICONS: Object.freeze(ICONS),
-			ICON_SIZES: Object.freeze(ICON_SIZES),
-			BUTTON_TYPES: Object.freeze(BUTTON_TYPES),
-			COLORS: Object.freeze(BUTTON_COLORS),
-			RADIUSES: Object.freeze(BUTTON_RADIUSES),
-			SIZES: Object.freeze(BUTTON_SIZES),
-			STATES: Object.freeze(BUTTON_STATES),
-			ELEVATIONS: Object.freeze(BUTTON_ELEVATIONS),
-		};
-	},
-	computed: {
-		iconSize(): string {
-			if (this.size === this.SIZES.SMALL || this.size === this.SIZES.MEDIUM) {
-				return ICON_SIZES.XX_SMALL;
-			}
-			return ICON_SIZES.X_SMALL;
-		},
-		colorClassName(): string {
-			return `-ds-color-${this.color}`;
-		},
-		loadingIconSize(): string {
-			if (this.size === BUTTON_SIZES.LARGE) {
-				return ICON_SIZES.MEDIUM;
-			}
+const loadingIconSize = computed((): IconSize => {
+	if (size === BUTTON_SIZES.LARGE) {
+		return ICON_SIZES.MEDIUM;
+	}
 
-			if (this.size === BUTTON_SIZES.SMALL) {
-				return ICON_SIZES.X_SMALL;
-			}
+	if (size === BUTTON_SIZES.SMALL) {
+		return ICON_SIZES.X_SMALL;
+	}
 
-			return ICON_SIZES.SMALL;
-		},
-	},
+	return ICON_SIZES.SMALL;
 });
 </script>

package/lib/js/components/Buttons/HelpButton/HelpButton.spec.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+import HelpButton from './HelpButton.vue';
+import Modal from '../../Modals/Modal';
+import { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
+import Tooltip from '../../Tooltip';
+
+function setup(
+	props: ComponentProps<typeof HelpButton> = {},
+	slots: ComponentSlots<typeof HelpButton> = {
+		modal: ({ onClose }) => [h(Modal, { onCloseModal: onClose }, () => 'Test')],
+	},
+	attrs?: Record<string, unknown>,
+) {
+	return mount(HelpButton, {
+		props,
+		// @ts-expect-error - it looks like a bug in vue-component-type-helpers or vue-test-utils
+		slots,
+		attrs,
+		global: {
+			directives: {
+				pvTooltip: () => {},
+			},
+			stubs: {
+				teleport: true,
+			},
+		},
+	});
+}
+
+describe('HelpButton', () => {
+	it('should render', () => {
+		const wrapper = setup();
+
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('should pass attributes to the button', () => {
+		const wrapper = setup({}, undefined, {
+			class: 'customClass',
+			id: 'testId',
+		});
+
+		expect(wrapper.find('.ds-iconButton').classes()).toContain('customClass');
+		expect(wrapper.find('.ds-iconButton').attributes('id')).toContain('testId');
+	});
+
+	it('should open and close the modal', async () => {
+		const wrapper = setup();
+
+		expect(wrapper.find('.ds-modal').exists()).toBe(false);
+
+		await wrapper.find('.ds-iconButton').trigger('click');
+
+		expect(wrapper.find('.ds-modal').exists()).toBe(true);
+
+		const closeButton = wrapper.find('[data-test-selector="ds-modal__closeButton"]');
+		await closeButton.trigger('click');
+
+		expect(wrapper.find('.ds-modal').exists()).toBe(false);
+	});
+
+	it('renders with tooltip', () => {
+		const wrapper = setup({
+			tooltipText: 'Tooltip text',
+		});
+
+		expect(wrapper.findComponent(Tooltip).props().text).toBe('Tooltip text');
+	});
+
+	it('should accept modalTitle prop and modalContent slot', async () => {
+		const wrapper = setup(
+			{
+				modalTitle: 'Test Title',
+			},
+			{
+				modalContent: () => [h('div', 'Test Content')],
+			},
+		);
+
+		await wrapper.find('.ds-iconButton').trigger('click');
+
+		expect(wrapper.find('.ds-modal__headerTitle').text()).toBe('Test Title');
+		expect(wrapper.find('.ds-modal__slotContent').text()).toBe('Test Content');
+	});
+});

package/lib/js/components/Buttons/HelpButton/HelpButton.stories.ts

@@ -0,0 +1,70 @@
+import { toRefs } from 'vue';
+import { Meta, StoryObj } from '@storybook/vue3';
+import HelpButton from './HelpButton.vue';
+import Modal, { MODAL_SIZES } from '../../Modals/Modal';
+import { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
+import DsBanner, { BANNER_COLORS } from '../../Banner';
+
+const meta: Meta<ComponentProps<typeof HelpButton> & ComponentSlots<typeof HelpButton>> = {
+	title: 'Components/Buttons/HelpButton',
+	component: HelpButton,
+	render: (args) => ({
+		components: { HelpButton, Modal, DsBanner },
+		setup() {
+			const { tooltipText, modalTitle, modalContent, modalSize, isDisabled } = toRefs(args);
+
+			return {
+				tooltipText,
+				isDisabled,
+				modalTitle,
+				modalContent,
+				modalSize,
+				BANNER_COLORS,
+			};
+		},
+		template: `<HelpButton :tooltip-text="tooltipText" :modal-title="modalTitle" :modal-size="modalSize" :is-disabled="isDisabled">
+			<template v-if="modalContent || modalTitle" #modalContent>
+				<div v-html="modalContent" />
+			</template>
+			<template v-else #modal="{onClose}">
+				<modal @close-modal="onClose">test</modal>
+			</template>
+		</HelpButton>
+		<ds-banner style="margin-top: 20px;" :color="BANNER_COLORS.WARNING" title="Uwaga, z uwagi na brak lokalizacji w DS, na Modalu (tworzonym za pomocą propsa modalTitle i slota modalContent) nie wyświetla się Button w footerze do zamykania modala. Poprawimy to w ramach LMS-2762. Jako alternatywa można skorzystać ze slota modal i wstawić do modala co się chce ;)" />`,
+	}),
+	argTypes: {
+		modalTitle: {
+			control: 'text',
+		},
+		modalContent: {
+			control: 'text',
+		},
+		modalSize: {
+			control: 'select',
+			options: Object.values(MODAL_SIZES),
+		},
+		isDisabled: {
+			control: 'boolean',
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof HelpButton>;
+
+export const Interactive: Story = {
+	args: {
+		tooltipText: 'Tooltip text',
+		isDisabled: false,
+		modalContent: '',
+		modalTitle: '',
+		modalSize: MODAL_SIZES.MEDIUM,
+	},
+};
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=13519-192453',
+	},
+};

package/lib/js/components/Buttons/HelpButton/HelpButton.vue

@@ -0,0 +1,52 @@
+<template>
+	<tooltip :text="tooltipText" :inline="true">
+		<icon-button
+			:icon="ICONS.FA_CIRCLE_QUESTION"
+			:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
+			:size="ICON_BUTTON_SIZES.X_SMALL"
+			:state="isDisabled ? ICON_BUTTON_STATES.DISABLED : ICON_BUTTON_STATES.DEFAULT"
+			:touchable="false"
+			v-bind="$attrs"
+			@click="isOpen = true"
+		/>
+	</tooltip>
+	<slot v-if="isOpen" name="modal" :on-close="onClose">
+		<modal :header-title="modalTitle" :size="modalSize" @close-modal="onClose">
+			<slot name="modalContent" />
+		</modal>
+	</slot>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import IconButton, {
+	ICON_BUTTON_COLORS,
+	ICON_BUTTON_SIZES,
+	ICON_BUTTON_STATES,
+} from '../IconButton';
+import Tooltip from '../../Tooltip';
+import { ICONS } from '../../Icons/Icon';
+import Modal, { ModalSize } from '../../Modals/Modal';
+
+defineProps<{
+	tooltipText?: string;
+	isDisabled?: boolean;
+	modalTitle?: string;
+	modalSize?: ModalSize;
+}>();
+
+defineSlots<{
+	modal?: (props: { onClose: () => void }) => any;
+	modalContent?: () => any;
+}>();
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const isOpen = ref(false);
+
+const onClose = () => {
+	isOpen.value = false;
+};
+</script>

package/lib/js/components/Buttons/HelpButton/index.ts

@@ -0,0 +1,3 @@
+import HelpButton from './HelpButton.vue';
+
+export default HelpButton;

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

@@ -1,5 +1,12 @@
 import { Value } from '../../../utils/type.utils';
 
+export const CARD_PADDING_SIZES = {
+	SMALL: 'small',
+	LARGE: 'large',
+};
+
+export type CardPaddingSize = Value<typeof CARD_PADDING_SIZES>;
+
 export const CARD_BORDER_COLORS = {
 	NEUTRAL_HEAVY: 'neutralHeavy',
 	NEUTRAL_STRONG: 'neutralStrong',

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

@@ -1,36 +1,13 @@
 import { describe, expect, it } from 'vitest';
-import { shallowMount } from '@vue/test-utils';
+import { ComponentMountingOptions, mount } from '@vue/test-utils';
+import { h } from 'vue';
 
 import Card from './Card.vue';
-import { CARD_BORDER_COLORS, CARD_BORDER_POSITIONS, CARD_BORDER_SIZES } from './Card.consts';
-import { LOADING_BAR_COLORS } from '../../LoadingBar';
+import { CARD_PADDING_SIZES } from './Card.consts';
 
 describe('Card', () => {
-	const createComponent = ({
-		headerSlot = '',
-		contentSlot = '',
-		footerSlot = '',
-		headerHasPadding = false,
-		dividerUnderHeader = false,
-	} = {}) => {
-		return shallowMount(Card, {
-			props: {
-				headerHasPadding,
-				dividerUnderHeader,
-				hasBorder: false,
-				borderSize: CARD_BORDER_SIZES.MEDIUM,
-				borderColor: CARD_BORDER_COLORS.NEUTRAL_HEAVY,
-				borderPosition: CARD_BORDER_POSITIONS.TOP,
-				hasLoadingBar: false,
-				loadingBarColor: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
-				loadingBarTime: '0',
-			},
-			slots: {
-				...(headerSlot !== '' && { header: headerSlot }),
-				...(contentSlot !== '' && { content: contentSlot }),
-				...(footerSlot !== '' && { footer: footerSlot }),
-			},
-		});
+	const createComponent = (options: ComponentMountingOptions<typeof Card> = {}) => {
+		return mount(Card, options);
 	};
 
 	it('should create', () => {
@@ -47,51 +24,85 @@ describe('Card', () => {
 
 	it('should render content slot', () => {
 		const content = 'Wpłynąlem na suchego przestwór oceanu';
-		const component = createComponent({ contentSlot: content });
+		const component = createComponent({
+			slots: {
+				content: () => [h('span', content)],
+			},
+		});
 
 		expect(component.find('.ds-card__content').text()).toContain(content);
 	});
 
 	it('should render header slot', () => {
 		const header = 'Wpłynąlem na suchego przestwór oceanu';
-		const component = createComponent({ headerSlot: header });
+		const component = createComponent({
+			slots: {
+				header: () => [h('span', header)],
+			},
+		});
 
 		expect(component.text()).toContain(header);
 	});
 
 	it('should render footer slot', () => {
 		const footer = 'Wpłynąlem na suchego przestwór oceanu';
-		const component = createComponent({ footerSlot: footer });
+		const component = createComponent({
+			slots: {
+				footer: () => [h('span', footer)],
+			},
+		});
 
 		expect(component.text()).toContain(footer);
 	});
 
 	it('should render header slot with padding', () => {
 		const header = 'Wpłynąlem na suchego przestwór oceanu';
-		const component = createComponent({ headerSlot: header, headerHasPadding: true });
+		const component = createComponent({
+			props: { headerHasPadding: true },
+			slots: { header: () => [h('span', header)] },
+		});
 
 		expect(component.find('.ds-card__header').classes()).toContain('-ds-withPadding');
 	});
 
+	it('should render footer slot with padding', () => {
+		const footer = 'Wpłynąlem na suchego przestwór oceanu';
+		const component = createComponent({
+			props: { footerHasPadding: true },
+			slots: {
+				footer: () => [h('span', footer)],
+			},
+		});
+
+		expect(component.find('.ds-card__footer').classes()).toContain('-ds-withPadding');
+	});
+
 	it('should render divider', () => {
 		const header = 'Wpłynąlem na suchego przestwór oceanu';
 		const component = createComponent({
-			headerSlot: header,
-			contentSlot: 'asd',
-			dividerUnderHeader: true,
+			props: {
+				dividerUnderHeader: true,
+			},
+			slots: {
+				header: () => [h('span', header)],
+				content: () => [h('span', 'asd')],
+			},
 		});
 
 		expect(component.find('.ds-card__headerDivider').exists()).toBe(true);
 	});
 
 	it("doesn't render divider when no header", () => {
-		const component = createComponent({ dividerUnderHeader: true });
+		const component = createComponent({ props: { dividerUnderHeader: true } });
 
 		expect(component.find('.ds-card__headerDivider').exists()).toBe(false);
 	});
 
 	it("doesn't render divider when no content", () => {
-		const component = createComponent({ headerSlot: 'test', dividerUnderHeader: true });
+		const component = createComponent({
+			props: { dividerUnderHeader: true },
+			slots: { header: () => [h('span', 'test')] },
+		});
 
 		expect(component.find('.ds-card__headerDivider').exists()).toBe(false);
 	});
@@ -99,14 +110,48 @@ describe('Card', () => {
 	it('should render divider with margin if headerHasPadding', () => {
 		const header = 'Wpłynąlem na suchego przestwór oceanu';
 		const component = createComponent({
-			headerSlot: header,
-			contentSlot: 'asd',
-			dividerUnderHeader: true,
-			headerHasPadding: true,
+			props: {
+				dividerUnderHeader: true,
+				headerHasPadding: true,
+			},
+			slots: {
+				header: () => [h('span', header)],
+				content: () => [h('span', 'asd')],
+			},
 		});
 
 		expect(component.find('.ds-card__headerDivider').classes()).toContain(
 			'-ds-withHorizontalMargin',
 		);
 	});
+
+	it('should set large padding class', () => {
+		const component = createComponent({
+			props: { paddingSize: CARD_PADDING_SIZES.LARGE },
+		});
+
+		expect(component.find('.ds-card').classes()).toContain('-ds-paddingLarge');
+	});
+
+	it('should not set large padding class', () => {
+		const component = createComponent({
+			props: { paddingSize: CARD_PADDING_SIZES.SMALL },
+		});
+
+		expect(component.find('.ds-card').classes()).not.toContain('-ds-paddingLarge');
+	});
+
+	it('should not set flat class by default', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-card').classes()).not.toContain('-ds-flat');
+	});
+
+	it('should set flat class', () => {
+		const component = createComponent({
+			props: { isFlat: true },
+		});
+
+		expect(component.find('.ds-card').classes()).toContain('-ds-flat');
+	});
 });