@bethinkpl/design-system 25.0.10 → 26.0.1

package/jest.config.js

@@ -1,25 +1,28 @@
-module.exports = {
+export default {
 	verbose: true,
-	preset: '@vue/cli-plugin-unit-jest/presets/typescript',
-	testEnvironment: 'jsdom',
+	preset: 'ts-jest',
+	testEnvironment: 'jest-environment-jsdom',
 	moduleNameMapper: {
-		'^design-system/lib/(.*)$': '<rootDir>/lib/$1',
-		'^design-system/styles/(.*)$': '<rootDir>/lib/styles/$1',
-		'^design-system/images/(.*)$': '<rootDir>/lib/images/$1',
-		'^vue-popperjs/dist/vue-popper.css': '<rootDir>/lib/js/tests/emptyModule.ts',
+		'^vue-popperjs/dist/vue-popper.css': '<rootDir>/lib/js/tests/emptyModule.cjs',
 	},
 	testMatch: ['<rootDir>/lib/js/**/*.spec.ts', '<rootDir>/tools/importers/*.spec.ts'],
 	transform: {
 		'^.+\\.js$': 'babel-jest',
 		'^.+\\.ts$': 'ts-jest',
 		'.*\\.(vue)$': '@vue/vue3-jest',
-		'^.+\\.scss': '<rootDir>/lib/js/tests/emptyTransformer.ts',
-		'^.+\\.svg$': '<rootDir>/lib/js/tests/emptyTransformer.ts',
+		'^.+\\.scss': '<rootDir>/lib/js/tests/emptyTransformer.cjs',
+		'^.+\\.svg$': '<rootDir>/lib/js/tests/emptyTransformer.cjs',
 	},
-	moduleFileExtensions: ['js', 'vue', 'json', 'ts'],
-
+	moduleFileExtensions: ['js', 'mjs', 'ts', 'json', 'vue'],
 	setupFilesAfterEnv: ['<rootDir>/lib/js/typings.d.ts', '<rootDir>/lib/js/tests/globals.ts'],
 	testEnvironmentOptions: {
 		customExportConditions: ['node', 'node-addons'],
 	},
+	globals: {
+		'vue-jest': {
+			compilerOptions: {
+				whitespace: 'preserve',
+			},
+		},
+	},
 };

package/lib/js/components/BadgeScore/BadgeScore.stories.ts

@@ -20,7 +20,7 @@ const StoryTemplate: StoryFn<{
 }> = (args) => ({
 	components: { BadgeScore },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<badge-score :color="color" :suffix="suffix" :text="text" :size="size" :icon="ICONS[icon]" :fullWidth="fullWidth" />',
@@ -37,22 +37,25 @@ Interactive.args = {
 	text: '42',
 	suffix: '%',
 	fullWidth: false,
+	color: BADGE_SCORE_COLORS.SUCCESS,
+	icon: 'FA_LIGHTBULB',
+	size: BADGE_SCORE_SIZES.MEDIUM,
 };
 
 Interactive.argTypes = {
-	text: { control: { type: 'text' } },
-	suffix: { control: { type: 'text' } },
+	text: { control: 'text' },
+	suffix: { control: 'text' },
 	color: {
-		control: { type: 'select', options: Object.values(BADGE_SCORE_COLORS) },
-		defaultValue: BADGE_SCORE_COLORS.SUCCESS,
+		control: 'select',
+		options: Object.values(BADGE_SCORE_COLORS),
 	},
 	icon: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: 'FA_LIGHTBULB',
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	size: {
-		control: { type: 'select', options: Object.values(BADGE_SCORE_SIZES) },
-		defaultValue: BADGE_SCORE_SIZES.MEDIUM,
+		control: 'select',
+		options: Object.values(BADGE_SCORE_SIZES),
 	},
 };
 
@@ -67,7 +70,7 @@ Interactive.parameters = {
 const StaticStoryTemplate: StoryFn<{}> = (args) => ({
 	components: { BadgeScore },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<badge-score :color="BADGE_SCORE_COLORS.WARNING" suffix="%" text="1" :full-width="fullWidth" />',

package/lib/js/components/BadgeScore/BadgeScore.vue

@@ -160,9 +160,9 @@ $badge-score-colors: (
 <script lang="ts">
 import { BADGE_SCORE_COLORS, BADGE_SCORE_SIZES } from './BadgeScore.consts';
 import WnlIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'BadgeScore',
 	components: {
 		WnlIcon,
@@ -180,7 +180,7 @@ export default {
 		color: {
 			type: String,
 			required: true,
-			validator(color) {
+			validator(color: any) {
 				return Object.values(BADGE_SCORE_COLORS).includes(color);
 			},
 		},
@@ -194,7 +194,7 @@ export default {
 		size: {
 			type: String,
 			default: BADGE_SCORE_SIZES.MEDIUM,
-			validator(size) {
+			validator(size: any) {
 				return Object.values(BADGE_SCORE_SIZES).includes(size);
 			},
 		},
@@ -222,5 +222,5 @@ export default {
 			return ICON_SIZES.SMALL;
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Banner/Banner.stories.ts

@@ -3,56 +3,61 @@ import { BANNER_COLORS, BANNER_LAYOUTS } from './Banner.consts';
 import { ICONS } from '../Icons/Icon';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { useArgs } from '@storybook/preview-api';
 
 export default {
 	title: 'Components/Banner',
 	component: Banner,
 } as Meta<typeof Banner>;
 
-const StoryTemplate: StoryFn<typeof Banner> = (args, { updateArgs }) => ({
-	components: { Banner },
-	setup() {
-		return { ...args };
-	},
-	data() {
-		return {
-			ICONS: Object.freeze(ICONS),
-		};
-	},
-	methods: {
-		onIsExpandedUpdated(isExpanded) {
-			updateArgs({
-				isExpanded,
-			});
+const StoryTemplate: StoryFn<typeof Banner> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { Banner },
+		setup() {
+			return args;
 		},
-	},
-	template: `
-			<banner
-					:closable="closable"
-					:icon="ICONS[icon]"
-					:color="color"
-					:title="title"
-					:buttonText="buttonText"
-					:layout="layout"
-					:is-expanded="isExpanded"
-					:is-icon-hidden-on-mobile="isIconHiddenOnMobile"
-					@update:isExpanded="onIsExpandedUpdated"
-			>
-			<template #defaultText><span v-html="defaultText" /></template>
-			<template v-if="expandedText" #expandedText>
-				<div v-html="expandedText" />
-			</template>
-			<template v-if="rightSlot" #rightSlot>
-				<div v-html="rightSlot" />
-			</template>
-			</banner>`,
-});
+		data() {
+			return {
+				ICONS: Object.freeze(ICONS),
+			};
+		},
+		methods: {
+			onIsExpandedUpdated(isExpanded) {
+				updateArgs({
+					isExpanded,
+				});
+			},
+		},
+		template: `
+				<banner
+						:closable="closable"
+						:icon="ICONS[icon]"
+						:color="color"
+						:title="title"
+						:buttonText="buttonText"
+						:layout="layout"
+						:is-expanded="isExpanded"
+						:is-icon-hidden-on-mobile="isIconHiddenOnMobile"
+						@update:isExpanded="onIsExpandedUpdated"
+				>
+				<template #defaultText><span v-html="defaultText" /></template>
+				<template v-if="expandedText" #expandedText>
+					<div v-html="expandedText" />
+				</template>
+				<template v-if="rightSlot" #rightSlot>
+					<div v-html="rightSlot" />
+				</template>
+				</banner>`,
+	};
+};
 
 export const Interactive = StoryTemplate.bind({});
 
 const args = {
-	closable: true,
-	icon: ICONS.FA_CIRCLE_INFO,
+	closable: false,
+	icon: null,
 	color: BANNER_COLORS.DEFAULT,
 	title: 'Banner Title',
 	buttonText: '',
@@ -66,41 +71,39 @@ const args = {
 } as Args;
 
 const argTypes = {
-	closable: { control: { type: 'boolean' }, defaultValue: false },
+	closable: { control: 'boolean' },
 	icon: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	isIconHiddenOnMobile: {
-		control: { type: 'boolean' },
-		defaultValue: false,
+		control: 'boolean',
 	},
 	color: {
-		control: { type: 'select', options: Object.values(BANNER_COLORS) },
-		defaultValue: BANNER_COLORS.DEFAULT,
+		control: 'select',
+		options: Object.values(BANNER_COLORS),
 	},
 	title: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 	buttonText: {
-		control: { type: 'text' },
-		defaultValue: '',
+		control: 'text',
 	},
 	layout: {
-		control: { type: 'select', options: Object.values(BANNER_LAYOUTS) },
-		defaultValue: BANNER_LAYOUTS.HORIZONTAL,
+		control: 'select',
+		options: Object.values(BANNER_LAYOUTS),
 	},
 	defaultText: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 	expandedText: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 	rightSlot: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 	isExpanded: {
-		control: { type: 'boolean' },
+		control: 'boolean',
 	},
 } as ArgTypes;
 

package/lib/js/components/Banner/Banner.vue

@@ -294,9 +294,9 @@ import DsDivider, { DIVIDER_PROMINENCES } from '../Divider';
 import DsIcon, { ICONS } from '../Icons/Icon';
 import DsIconButton, { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../Buttons/IconButton';
 import { BANNER_COLORS, BANNER_LAYOUTS } from './Banner.consts';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'Banner',
 	components: {
 		DsButton,
@@ -389,5 +389,5 @@ export default {
 			this.$emit('update:isExpanded', this.isExpandedInternal);
 		},
 	},
-};
+});
 </script>

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

@@ -1,25 +1,27 @@
 import Button from './Button.vue';
 import {
-	BUTTON_SIZES,
-	BUTTON_TYPES,
 	BUTTON_COLORS,
-	BUTTON_STATES,
-	BUTTON_RADIUSES,
 	BUTTON_ELEVATIONS,
+	BUTTON_RADIUSES,
+	BUTTON_SIZES,
+	BUTTON_STATES,
+	BUTTON_TYPES,
 } from './Button.consts';
 import { ICONS } from '../../Icons/Icon';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
 	title: 'Components/Buttons/Button',
 	component: Button,
+	decorators: [withActions],
 } as Meta<typeof Button>;
 
 const StoryTemplate: StoryFn<typeof Button> = (args) => ({
 	components: { Button },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 			<div :class="{ contrastBackground: isInverted }">
@@ -52,40 +54,48 @@ export const Interactive = StoryTemplate.bind({});
 
 const args = {
 	slotText: 'Hello',
+	size: BUTTON_SIZES.MEDIUM,
+	type: BUTTON_TYPES.FILLED,
+	color: BUTTON_COLORS.PRIMARY,
+	radius: BUTTON_RADIUSES.CAPSULE,
+	state: BUTTON_STATES.DEFAULT,
+	elevation: BUTTON_ELEVATIONS.NONE,
+	iconLeft: 'FA_CHEVRON_LEFT',
+	iconRight: null,
 } as Args;
 
 const argTypes = {
 	size: {
-		control: { type: 'select', options: Object.values(BUTTON_SIZES) },
-		defaultValue: BUTTON_SIZES.MEDIUM,
+		control: 'select',
+		options: Object.values(BUTTON_SIZES),
 	},
 	type: {
-		control: { type: 'select', options: Object.values(BUTTON_TYPES) },
-		defaultValue: BUTTON_TYPES.FILLED,
+		control: 'select',
+		options: Object.values(BUTTON_TYPES),
 	},
 	color: {
-		control: { type: 'select', options: Object.values(BUTTON_COLORS) },
-		defaultValue: BUTTON_COLORS.PRIMARY,
+		control: 'select',
+		options: Object.values(BUTTON_COLORS),
 	},
 	radius: {
-		control: { type: 'select', options: Object.values(BUTTON_RADIUSES) },
-		defaultValue: BUTTON_RADIUSES.CAPSULE,
+		control: 'select',
+		options: Object.values(BUTTON_RADIUSES),
 	},
 	state: {
-		control: { type: 'select', options: Object.values(BUTTON_STATES) },
-		defaultValue: BUTTON_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(BUTTON_STATES),
 	},
 	elevation: {
-		control: { type: 'select', options: Object.values(BUTTON_ELEVATIONS) },
-		defaultValue: BUTTON_ELEVATIONS.NONE,
+		control: 'select',
+		options: Object.values(BUTTON_ELEVATIONS),
 	},
 	iconLeft: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: 'FA_CHEVRON_LEFT',
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	iconRight: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 } as ArgTypes;
 

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

@@ -45,9 +45,7 @@
 	</span>
 </template>
 
-<style lang="scss">
-@import '../../../../styles/components/buttons';
-</style>
+<!-- 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';
@@ -63,9 +61,9 @@ import {
 } from './Button.consts';
 
 import { ICON_BUTTON_COLORS } from '../IconButton/IconButton.consts';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 
-export default {
+export default defineComponent({
 	// eslint-disable-next-line vue/no-reserved-component-names
 	name: 'Button',
 	components: {
@@ -163,5 +161,5 @@ export default {
 			return ICON_SIZES.SMALL;
 		},
 	},
-};
+});
 </script>

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

@@ -1,25 +1,27 @@
 import IconButton from './IconButton.vue';
 import {
-	ICON_BUTTON_SIZES,
 	ICON_BUTTON_COLOR_SCHEMES,
-	ICON_BUTTON_TYPES,
 	ICON_BUTTON_COLORS,
+	ICON_BUTTON_SIZES,
 	ICON_BUTTON_STATES,
+	ICON_BUTTON_TYPES,
 } from './IconButton.consts';
 import { BUTTON_ELEVATIONS, BUTTON_RADIUSES } from '../Button';
 import { ICONS } from '../../Icons/Icon';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
 	title: 'Components/Buttons/IconButton',
 	component: IconButton,
+	decorators: [withActions],
 } as Meta<typeof IconButton>;
 
 const StoryTemplate: StoryFn<typeof IconButton> = (args) => ({
 	components: { IconButton },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	computed: {
 		isInverted() {
@@ -59,40 +61,41 @@ const args = {
 	elevation: BUTTON_ELEVATIONS.NONE,
 	color: 'primary',
 	state: ICON_BUTTON_STATES.DEFAULT,
+	icon: 'FA_XMARK',
 } as Args;
 
 const argTypes = {
 	size: {
-		control: { type: 'select', options: Object.values(ICON_BUTTON_SIZES) },
-		defaultValue: ICON_BUTTON_SIZES.LARGE,
+		control: 'select',
+		options: Object.values(ICON_BUTTON_SIZES),
 	},
 	type: {
-		control: { type: 'select', options: Object.values(ICON_BUTTON_TYPES) },
-		defaultValue: ICON_BUTTON_TYPES.ICON_ONLY,
+		control: 'select',
+		options: Object.values(ICON_BUTTON_TYPES),
 	},
 	radius: {
-		control: { type: 'select', options: Object.values(BUTTON_RADIUSES) },
-		defaultValue: BUTTON_RADIUSES.CAPSULE,
+		control: 'select',
+		options: Object.values(BUTTON_RADIUSES),
 	},
 	icon: {
-		control: { type: 'select', options: Object.keys(ICONS) },
-		defaultValue: 'FA_XMARK',
+		control: 'select',
+		options: Object.keys(ICONS),
 	},
 	color: {
-		control: { type: 'select', options: Object.values(ICON_BUTTON_COLORS) },
-		defaultValue: 'primary',
+		control: 'select',
+		options: Object.values(ICON_BUTTON_COLORS),
 	},
 	colorScheme: {
-		control: { type: 'select', options: Object.values(ICON_BUTTON_COLOR_SCHEMES) },
-		defaultValue: ICON_BUTTON_COLOR_SCHEMES.ALL_IN_COLOR,
+		control: 'select',
+		options: Object.values(ICON_BUTTON_COLOR_SCHEMES),
 	},
 	elevation: {
-		control: { type: 'select', options: Object.values(BUTTON_ELEVATIONS) },
-		defaultValue: BUTTON_ELEVATIONS.NONE,
+		control: 'select',
+		options: Object.values(BUTTON_ELEVATIONS),
 	},
 	state: {
-		control: { type: 'select', options: Object.values(ICON_BUTTON_STATES) },
-		defaultValue: ICON_BUTTON_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(ICON_BUTTON_STATES),
 	},
 } as ArgTypes;
 
@@ -111,41 +114,41 @@ Interactive.parameters = {
 
 const argTypesDisabled = {
 	size: {
-		control: { type: null },
+		disable: true,
 	},
 	type: {
-		control: { type: null },
+		disable: true,
 	},
 	radius: {
-		control: { type: null },
+		disable: true,
 	},
 	icon: {
-		control: { type: null },
+		disable: true,
 	},
 	color: {
-		control: { type: null },
+		disable: true,
 	},
 	colorScheme: {
-		control: { type: null },
+		disable: true,
 	},
 	elevation: {
-		control: { type: null },
+		disable: true,
 	},
 	state: {
-		control: { type: null },
+		disable: true,
 	},
 	touchable: {
-		control: { type: null },
+		disable: true,
 	},
 	default: {
-		control: { type: null },
+		disable: true,
 	},
 } as ArgTypes;
 
 const StoryFilledWithLabelTemplate: StoryFn<typeof IconButton> = (args) => ({
 	components: { IconButton },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<icon-button :icon="ICONS.FA_XMARK" :type="ICON_BUTTON_TYPES.FILLED" >Zamknij</icon-button>',
@@ -163,7 +166,7 @@ FilledWithLabel.argTypes = argTypesDisabled;
 const StoryOutlinedRoundedTemplate: StoryFn<typeof IconButton> = (args) => ({
 	components: { IconButton },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<icon-button :icon="ICONS.FA_CHEVRON_RIGHT" :type="ICON_BUTTON_TYPES.OUTLINED" :radius="BUTTON_RADIUSES.ROUNDED" />',
@@ -182,7 +185,7 @@ OutlinedRounded.argTypes = argTypesDisabled;
 const StoryFilledPrimaryTemplate: StoryFn<typeof IconButton> = (args) => ({
 	components: { IconButton },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<icon-button :icon="ICONS.FA_XMARK" :type="ICON_BUTTON_TYPES.FILLED" :color="ICON_BUTTON_COLORS.PRIMARY" :size="ICON_BUTTON_SIZES.X_SMALL" />',
@@ -202,7 +205,7 @@ FilledPrimary.argTypes = argTypesDisabled;
 const StoryIconOnlyInfoTemplate: StoryFn<typeof IconButton> = (args) => ({
 	components: { IconButton },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<icon-button :icon="ICONS.FA_FLAG" :color="ICON_BUTTON_COLORS.INFO" :size="ICON_BUTTON_SIZES.MEDIUM" />',
@@ -221,7 +224,7 @@ IconOnlyInfo.argTypes = argTypesDisabled;
 const StoryIconOnlyWarningTemplate: StoryFn<typeof IconButton> = (args) => ({
 	components: { IconButton },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<icon-button :icon="ICONS.HEAD_WITH_QUESTION_MARK" :color="ICON_BUTTON_COLORS.WARNING" :size="ICON_BUTTON_SIZES.MEDIUM" />',

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

@@ -17,8 +17,10 @@
 			'-ds-touchable': touchable,
 		}"
 		:style="{ color: computedColor }"
-		@mouseover="hovered = true"
-		@mouseleave="hovered = false"
+		@mouseover="mouseOver"
+		@mouseleave="mouseLeave"
+		@touchstart="touchStart"
+		@touchend="touchEnd"
 	>
 		<div
 			v-if="$slots.default && type !== ICON_BUTTON_TYPES.ICON_ONLY"
@@ -40,7 +42,7 @@
 			}"
 			:radius="radius"
 			:type="buttonType"
-			:state="hovered ? ICON_BUTTON_STATES.HOVERED : ICON_BUTTON_STATES.DEFAULT"
+			:state="isHovered ? ICON_BUTTON_STATES.HOVERED : ICON_BUTTON_STATES.DEFAULT"
 			:elevation="elevation"
 			:color="isButtonColor ? color : null"
 		>
@@ -273,7 +275,8 @@ import {
 	ICON_BUTTON_TYPES,
 } from './IconButton.consts';
 import { Value } from '../../../utils/type.utils';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
+import { useHoverState } from '../../../composables/hover-state';
 
 const ICON_ONLY_ICON_SIZES_MAP = {
 	[ICON_BUTTON_SIZES.XX_SMALL]: ICON_SIZES.XXX_SMALL,
@@ -283,7 +286,7 @@ const ICON_ONLY_ICON_SIZES_MAP = {
 	[ICON_BUTTON_SIZES.LARGE]: ICON_SIZES.MEDIUM,
 } as const;
 
-export default {
+export default defineComponent({
 	name: 'IconButton',
 	components: {
 		WnlIcon,
@@ -351,9 +354,13 @@ export default {
 			},
 		},
 	},
+	setup() {
+		return {
+			...useHoverState(),
+		};
+	},
 	data() {
 		return {
-			hovered: false,
 			ICONS: Object.freeze(ICONS),
 			ICON_SIZES: Object.freeze(ICON_SIZES),
 			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),
@@ -402,5 +409,5 @@ export default {
 			return `-ds-color-${this.color}`;
 		},
 	},
-};
+});
 </script>