@bethinkpl/design-system 26.16.0 → 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/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');
+	});
 });

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

@@ -1,7 +1,12 @@
 import Card from './Card.vue';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
-import { CARD_BORDER_COLORS, CARD_BORDER_POSITIONS, CARD_BORDER_SIZES } from './Card.consts';
+import {
+	CARD_BORDER_COLORS,
+	CARD_BORDER_POSITIONS,
+	CARD_BORDER_SIZES,
+	CARD_PADDING_SIZES,
+} from './Card.consts';
 import { LOADING_BAR_COLORS } from '../../LoadingBar';
 
 export default {
@@ -12,27 +17,18 @@ export default {
 const StoryTemplate: StoryFn<typeof Card> = (args) => ({
 	components: { Card },
 	setup() {
-		return args;
+		return { args };
 	},
 	template: `
-		<card :header-has-padding="headerHasPadding"
-			  :divider-under-header="dividerUnderHeader"
-			  :has-border="hasBorder"
-			  :border-position="borderPosition"
-			  :border-size="borderSize"
-			  :border-color="borderColor"
-			  :has-loading-bar="hasLoadingBar"
-			  :loading-bar-color="loadingBarColor"
-			  :loading-bar-time="loadingBarTime"
-		>
-			<template v-if="header" #header>
-				<div v-html="header" />
+		<card v-bind="args">
+			<template v-if="args.header" #header>
+				<div v-html="args.header" />
 			</template>
-			<template v-if="content" #content>
-				<div v-html="content" />
+			<template v-if="args.content" #content>
+				<div v-html="args.content" />
 			</template>
-			<template v-if="footer" #footer>
-				<div v-html="footer" />
+			<template v-if="args.footer" #footer>
+				<div v-html="args.footer" />
 			</template>
 		</card>`,
 });
@@ -44,6 +40,8 @@ const args = {
 	content: 'content slot that supports <b>HTML markup</b>',
 	footer: 'footer slot',
 	headerHasPadding: false,
+	footerHasPadding: false,
+	paddingSize: CARD_PADDING_SIZES.SMALL,
 	dividerUnderHeader: false,
 	hasBorder: false,
 	borderPosition: CARD_BORDER_POSITIONS.TOP,
@@ -52,6 +50,7 @@ const args = {
 	hasLoadingBar: false,
 	loadingBarColor: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
 	loadingBarTime: '0',
+	isFlat: false,
 } as Args;
 
 const argTypes = {
@@ -76,6 +75,10 @@ const argTypes = {
 		control: 'select',
 		options: Object.values(LOADING_BAR_COLORS),
 	},
+	paddingSize: {
+		control: 'select',
+		options: Object.values(CARD_PADDING_SIZES),
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;