@bethinkpl/design-system 25.0.10 → 26.0.1

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

@@ -1,57 +1,55 @@
+// SB8.0 Good code to copy when creating a new story - this code use new API
+
 import Tile from './Tile.vue';
 import { TILE_STATES } from './Tile.consts';
 
-import { Args, Meta, StoryFn } from '@storybook/vue3';
+import type { Args, Meta, StoryObj } from '@storybook/vue3';
 import { args, argTypes, data, template } from './Tile.sb.shared';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+type TileProps = ComponentProps<typeof Tile>;
 
-export default {
+const meta: Meta<TileProps> = {
 	title: 'Components/Tile',
 	component: Tile,
-} as Meta<typeof Tile>;
-
-const StoryTemplate: StoryFn<typeof Tile> = (args) => ({
-	components: { Tile },
-	setup() {
-		return { ...args };
-	},
-	template: template('tile'),
-	data,
-});
-
-export const Interactive = StoryTemplate.bind({});
-
-Interactive.argTypes = argTypes;
-Interactive.args = args;
-
-Interactive.parameters = {
-	actions: {
-		handles: ['click'],
-	},
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=1923%3A34378',
+	decorators: [withActions],
+	render: (args) => ({
+		components: { Tile },
+		setup() {
+			return args;
+		},
+		data,
+		template: template('tile'),
+	}),
+	argTypes,
+	parameters: {
+		actions: {
+			handles: ['click'],
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=1923%3A34378',
+		},
 	},
 };
+export default meta;
 
-const StoryStaticTemplate: StoryFn<typeof Tile> = (args) => ({
-	components: { Tile },
-	setup() {
-		return { ...args };
-	},
-	template: template('tile'),
-	data,
-});
-
-export const Static = StoryStaticTemplate.bind({});
+type Story = StoryObj<TileProps>;
 
-Static.argTypes = argTypes;
+export const Interactive: Story = {
+	args,
+};
 
-Static.args = {
-	interactive: false,
-	iconLeft: null,
-	iconRight: null,
-	text: 'this is a text text',
-	eyebrowText: 'this is an eyebrowText text',
-	additionalText: 'this is some additionalText',
-	state: TILE_STATES.DEFAULT,
-} as Args;
+export const Static: Story = {
+	args: {
+		...args,
+		interactive: false,
+		iconLeft: null,
+		iconRight: null,
+		text: 'this is a text text',
+		eyebrowText: 'this is an eyebrowText text',
+		additionalText: 'this is some additionalText',
+		state: TILE_STATES.DEFAULT,
+	} as Args,
+};

package/lib/js/components/Tile/Tile.vue

@@ -285,8 +285,9 @@ $tile-colors: (
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 import { TILE_COLORS, TILE_STATES } from './Tile.consts';
 import { props } from './Tile.shared';
+import { defineComponent } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'Tile',
 	components: {
 		DsIcon,
@@ -319,5 +320,5 @@ export default {
 			}[this.state];
 		},
 	},
-};
+});
 </script>

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

@@ -2,16 +2,18 @@ import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import DsToast from './Toast.vue';
 import { TOAST_COLORS, TOAST_POSITIONS, TOAST_SIZES } from './Toast.consts';
 import { ICONS } from '../Icons/Icon';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
 	title: 'Components/Toast',
 	component: DsToast,
+	decorators: [withActions],
 } as Meta<typeof DsToast>;
 
 const StoryTemplate: StoryFn<typeof DsToast> = (args) => ({
 	components: { DsToast },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	data() {
 		return {
@@ -63,35 +65,31 @@ const args = {
 
 const argTypes = {
 	size: {
-		control: { type: 'select' },
+		control: 'select',
 		options: Object.values(TOAST_SIZES),
-		defaultValue: TOAST_SIZES.MEDIUM,
 	},
 	position: {
-		control: { type: 'select' },
+		control: 'select',
 		options: Object.values(TOAST_POSITIONS),
-		defaultValue: TOAST_POSITIONS.CENTER,
 	},
 	boundariesSelector: {
-		control: { type: 'select' },
+		control: 'select',
 		options: [null, 'left', 'right'],
-		defaultValue: null,
 	},
 	color: {
-		control: { type: 'select' },
+		control: 'select',
 		options: Object.values(TOAST_COLORS),
-		defaultValue: TOAST_COLORS.INFO,
 	},
 	footerPrimaryButtonIcon: {
-		control: { type: 'select' },
+		control: 'select',
 		options: [null, ...Object.keys(ICONS)],
 	},
 	footerSecondaryButtonIcon: {
-		control: { type: 'select' },
+		control: 'select',
 		options: [null, ...Object.keys(ICONS)],
 	},
 	content: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 } as ArgTypes;
 

package/lib/js/components/Toast/Toast.vue

@@ -98,7 +98,7 @@ import {
 	ToastPositions,
 	ToastSizes,
 } from './Toast.consts';
-import { PropType, toRaw } from 'vue';
+import { defineComponent, PropType, toRaw } from 'vue';
 import { ICONS } from '../Icons/Icon';
 
 const TOAST_OFFSET = 24;
@@ -126,7 +126,7 @@ function calculateBoundariesOffset(boundariesElement: HTMLElement) {
 	};
 }
 
-export default {
+export default defineComponent({
 	name: 'Toast',
 	components: {
 		DsButton,
@@ -279,5 +279,5 @@ export default {
 			}
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Toggles/CounterToggle/CounterToggle.stories.ts

@@ -3,16 +3,18 @@ import { COUNTER_TOGGLE_COLORS } from './CounterToggle.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/Toggles/CounterToggle',
 	component: CounterToggle,
+	decorators: [withActions],
 } as Meta<typeof CounterToggle>;
 
 const StoryTemplate: StoryFn<typeof CounterToggle> = (args) => ({
 	components: { CounterToggle },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<div :class="{ contrastBackground: isInverted }">' +
@@ -42,23 +44,21 @@ const args = {
 
 const argTypes = {
 	color: {
-		control: { type: 'select', options: Object.values(COUNTER_TOGGLE_COLORS) },
-		defaultValue: COUNTER_TOGGLE_COLORS.NEUTRAL_STRONG,
+		control: 'select',
+		options: Object.values(COUNTER_TOGGLE_COLORS),
 	},
 	icon: {
-		control: { type: 'select', options: Object.keys(ICONS) },
+		control: 'select',
+		options: Object.keys(ICONS),
 	},
 	counter: {
-		control: { type: 'text' },
-		defaultValue: null,
+		control: 'text',
 	},
 	isSelected: {
-		control: { type: 'boolean' },
-		defaultValue: false,
+		control: 'boolean',
 	},
 	isDisabled: {
-		control: { type: 'boolean' },
-		defaultValue: false,
+		control: 'boolean',
 	},
 } as ArgTypes;
 

package/lib/js/components/Toggles/CounterToggle/CounterToggle.vue

@@ -253,9 +253,9 @@ $counter-toggle-colors: (
 <script lang="ts">
 import { COUNTER_TOGGLE_COLORS } from './CounterToggle.consts';
 import Icon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'CounterToggle',
 	components: {
 		Icon,
@@ -301,5 +301,5 @@ export default {
 			return this.counter !== null && this.counter !== '' && this.counter !== undefined;
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Toggles/ToggleButton/ToggleButton.stories.ts

@@ -1,9 +1,9 @@
 import ToggleButton from './ToggleButton.vue';
 import {
-	TOGGLE_BUTTON_SIZES,
 	TOGGLE_BUTTON_COLORS,
-	TOGGLE_BUTTON_RADIUSES,
 	TOGGLE_BUTTON_LABEL_SIZES,
+	TOGGLE_BUTTON_RADIUSES,
+	TOGGLE_BUTTON_SIZES,
 	TOGGLE_BUTTON_STATES,
 } from './ToggleButton.consts';
 
@@ -18,7 +18,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ToggleButton> = (args) => ({
 	components: { ToggleButton },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	data() {
 		return {
@@ -61,32 +61,32 @@ const args = {
 
 const argTypes = {
 	size: {
-		control: { type: 'select', options: Object.values(TOGGLE_BUTTON_SIZES) },
-		defaultValue: TOGGLE_BUTTON_SIZES.MEDIUM,
+		control: 'select',
+		options: Object.values(TOGGLE_BUTTON_SIZES),
 	},
 	color: {
-		control: { type: 'select', options: Object.values(TOGGLE_BUTTON_COLORS) },
-		defaultValue: TOGGLE_BUTTON_COLORS.NEUTRAL,
+		control: 'select',
+		options: Object.values(TOGGLE_BUTTON_COLORS),
 	},
 	radius: {
-		control: { type: 'select', options: Object.values(TOGGLE_BUTTON_RADIUSES) },
-		defaultValue: TOGGLE_BUTTON_RADIUSES.CAPSULE,
+		control: 'select',
+		options: Object.values(TOGGLE_BUTTON_RADIUSES),
 	},
 	labelSize: {
-		control: { type: 'select', options: Object.values(TOGGLE_BUTTON_LABEL_SIZES) },
-		defaultValue: TOGGLE_BUTTON_LABEL_SIZES.MEDIUM,
+		control: 'select',
+		options: Object.values(TOGGLE_BUTTON_LABEL_SIZES),
 	},
 	state: {
-		control: { type: 'select', options: Object.values(TOGGLE_BUTTON_STATES) },
-		defaultValue: TOGGLE_BUTTON_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(TOGGLE_BUTTON_STATES),
 	},
 	iconLeft: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		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/Toggles/ToggleButton/ToggleButton.vue

@@ -410,7 +410,7 @@ $toggle-button-colors: (
 
 <script lang="ts">
 import { Value } from '../../../utils/type.utils';
-import { PropType, toRaw } from 'vue';
+import { defineComponent, PropType, toRaw } from 'vue';
 
 import {
 	TOGGLE_BUTTON_COLORS,
@@ -427,7 +427,7 @@ import {
 import { ICON_SIZES, IconItem, ICONS, IconSize } from '../../Icons/Icon';
 import DsIcon from '../../Icons/Icon/Icon.vue';
 
-export default {
+export default defineComponent({
 	name: 'ToggleButton',
 	components: {
 		DsIcon,
@@ -530,5 +530,5 @@ export default {
 			return this.isInteractive;
 		},
 	},
-};
+});
 </script>

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

@@ -13,7 +13,7 @@ export default {
 const StoryTemplate: StoryFn<typeof Tooltip> = (args) => ({
 	components: { Tooltip },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<div style="padding: 60px; width: 100%;display: flex;  justify-content: center">
@@ -44,8 +44,8 @@ const args = {
 
 const argTypes = {
 	placement: {
-		control: { type: 'select', options: Object.values(TOOLTIP_PLACEMENTS) },
-		defaultValue: TOOLTIP_PLACEMENTS.BOTTOM,
+		control: 'select',
+		options: Object.values(TOOLTIP_PLACEMENTS),
 	},
 } as ArgTypes;
 
@@ -62,7 +62,7 @@ Interactive.parameters = {
 const OnDsSwitchTemplate: StoryFn<typeof Tooltip> = (args) => ({
 	components: { Tooltip, DsSwitch },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<div style="padding: 60px; width: 100%;display: flex;  justify-content: center">
@@ -85,13 +85,13 @@ const OnDsSwitchTemplate: StoryFn<typeof Tooltip> = (args) => ({
 
 export const OnDsSwitch = OnDsSwitchTemplate.bind({});
 
-OnDsSwitch.argTypes = argTypes;
-OnDsSwitch.args = { ...args, switchDisabled: true, inline: false };
+OnDsSwitch.argTypes = { ...argTypes, switchDisabled: { control: 'boolean' } } as ArgTypes;
+OnDsSwitch.args = { ...args, switchDisabled: true, inline: false } as Args;
 
 const OnDsButtonTemplate: StoryFn<typeof Tooltip> = (args) => ({
 	components: { Tooltip, DsButton },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<div style="padding: 60px; width: 100%;display: flex;  justify-content: center">
@@ -114,5 +114,5 @@ const OnDsButtonTemplate: StoryFn<typeof Tooltip> = (args) => ({
 
 export const OnDsButton = OnDsButtonTemplate.bind({});
 
-OnDsButton.argTypes = argTypes;
-OnDsButton.args = { ...args, buttonDisabled: true, inline: false };
+OnDsButton.argTypes = { ...argTypes, buttonDisabled: { control: 'boolean' } } as ArgTypes;
+OnDsButton.args = { ...args, buttonDisabled: true, inline: false } as Args;

package/lib/js/components/Tooltip/Tooltip.vue

@@ -22,6 +22,7 @@
 <script lang="ts">
 import { TOOLTIP_PLACEMENTS, TooltipPlacement } from './Tooltip.consts';
 import { defineComponent, PropType } from 'vue';
+import { isTouchDevice } from '../../utils/device';
 
 export default defineComponent({
 	name: 'Tooltip',
@@ -54,7 +55,7 @@ export default defineComponent({
 		tooltipParams() {
 			return {
 				position: this.placement,
-				event: this.isTouchDevice() ? 'focus' : 'hover',
+				event: isTouchDevice() ? 'focus' : 'hover',
 			};
 		},
 		options() {
@@ -79,14 +80,5 @@ export default defineComponent({
 			};
 		},
 	},
-	methods: {
-		isTouchDevice() {
-			return (
-				'ontouchstart' in window ||
-				navigator.maxTouchPoints > 0 ||
-				(navigator as any).msMaxTouchPoints > 0
-			);
-		},
-	},
 });
 </script>

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

@@ -1,40 +1,47 @@
-import { ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+// SB8.0 Good code to copy when creating a new story - this code use new API
+
+import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
 import Well from './Well.vue';
 import { WELL_PADDINGS } from './Well.consts';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+type WellProps = ComponentProps<typeof Well>;
 
-export default {
+const meta: Meta<WellProps> = {
 	title: 'Components/Well',
 	component: Well,
-} as Meta<typeof Well>;
-
-const StoryTemplate: StoryFn<typeof Well> = (args) => ({
-	components: { Well },
-	setup() {
-		return { args };
+	render: (args) => ({
+		components: { Well },
+		setup() {
+			return { args };
+		},
+		template: '<well v-bind="args"><div v-html="args.content" /></well>',
+	}),
+	argTypes: {
+		padding: {
+			control: 'select',
+			options: [null, ...Object.values(WELL_PADDINGS)],
+		},
+		content: {
+			control: 'text',
+		},
+	} as ArgTypes,
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/oqNhXXGdc4ZnNQ6YNpkLEK/INI-152-Baza-v3---planowanie?node-id=1807-518161&t=sQ5nflpPY2YcPKNc-4',
+		},
 	},
-	template: '<well v-bind="args"><div v-html="args.content" /></well>',
-});
+};
+export default meta;
 
-export const Interactive = StoryTemplate.bind({});
+type Story = StoryObj<WellProps>;
 
-const argTypes = {
-	padding: {
-		control: { type: 'select', options: [null, ...Object.values(WELL_PADDINGS)] },
-		defaultValue: null,
-	},
-	content: {
-		control: { type: 'text' },
-		defaultValue:
+export const Interactive: Story = {
+	args: {
+		padding: null,
+		content:
 			'<h3 style="margin-top: 0">Content</h3>' +
 			'Voluptatem saepe suscipit optio et delectus esse sed velit. Autem maxime soluta aliquam perspiciatis quidem dolor saepe rerum.',
-	},
-} as ArgTypes;
-
-Interactive.argTypes = argTypes;
-
-Interactive.parameters = {
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/file/oqNhXXGdc4ZnNQ6YNpkLEK/INI-152-Baza-v3---planowanie?node-id=1807-518161&t=sQ5nflpPY2YcPKNc-4',
-	},
+	} as Args,
 };

package/lib/js/components/Well/Well.vue

@@ -32,7 +32,9 @@
 <script>
 import { WELL_PADDINGS } from './Well.consts';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'Well',
 	props: {
 		padding: {
@@ -48,5 +50,5 @@ export default {
 			WELL_PADDINGS: Object.freeze(WELL_PADDINGS),
 		};
 	},
-};
+});
 </script>

package/lib/js/composables/hover-state.ts

@@ -0,0 +1,39 @@
+import { Ref, ref } from 'vue';
+import { isTouchDevice } from '../utils/device';
+
+interface HoverState {
+	isHovered: Ref<boolean>;
+	mouseOver: () => void;
+	mouseLeave: () => void;
+	touchStart: () => void;
+	touchEnd: () => void;
+}
+
+export function useHoverState(): HoverState {
+	const isHovered = ref(false);
+	const isTouchDeviceDetected = isTouchDevice();
+
+	return {
+		isHovered,
+		mouseOver() {
+			if (!isTouchDeviceDetected) {
+				isHovered.value = true;
+			}
+		},
+		mouseLeave() {
+			if (!isTouchDeviceDetected) {
+				isHovered.value = false;
+			}
+		},
+		touchStart() {
+			if (isTouchDeviceDetected) {
+				isHovered.value = true;
+			}
+		},
+		touchEnd() {
+			if (isTouchDeviceDetected) {
+				isHovered.value = false;
+			}
+		},
+	};
+}

package/lib/js/icons/fontawesome.ts

@@ -406,4 +406,4 @@ export function initializeWithDomWatcher() {
 	dom.watch();
 }
 
-export { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+export type { IconDefinition } from '@fortawesome/fontawesome-svg-core';

package/lib/js/index.ts

@@ -166,5 +166,6 @@ export { initializePrimeVue } from './primevue';
 export {
 	initialize as initializeIcons,
 	initializeWithDomWatcher as initializeIconsWithDomWatcher,
-	IconDefinition,
 } from './icons/fontawesome';
+
+export type { IconDefinition } from './icons/fontawesome';

package/lib/js/styles/Colors/Colors.stories.ts

@@ -12,7 +12,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,

package/lib/js/styles/ColorsThemes/ColorsThemes.stories.ts

@@ -13,7 +13,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,

package/lib/js/styles/ColorsTokensLms/ColorsTokensLms.stories.ts

@@ -12,7 +12,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,

package/lib/js/styles/ColorsTokensPrimaryBodywork/ColorsTokensPrimaryBodywork.stories.ts

@@ -12,7 +12,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,

package/lib/js/styles/ColorsTokensPrimaryWnl/ColorsTokensPrimaryWnl.stories.ts

@@ -12,7 +12,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,