@bethinkpl/design-system 15.2.1 → 16.0.0

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

@@ -6,16 +6,18 @@ import {
 } from './SurveyToggle.consts';
 import { ICONS } from '../Icons/Icon';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/SurveyToggle',
 	component: SurveyToggle,
 } as Meta<typeof SurveyToggle>;
 
-const StoryTemplate: StoryFn<typeof SurveyToggle> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof SurveyToggle> = (args) => ({
 	components: { SurveyToggle },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<div style="background-color:#f6f6f8"><survey-toggle :label="label"  :meaning="meaning" :content-text="contentText" :selected-icon="ICONS[selectedIcon]" :status="status" :state="state" /></div>',
 	data() {

package/lib/js/components/SurveyToggle/SurveyToggle.vue

@@ -9,7 +9,6 @@
 			'-disabled': state === SURVEY_TOGGLE_STATES.DISABLED,
 			'-hovered': isHoveredState,
 		}"
-		@click="onClick"
 	>
 		<div
 			v-ripple
@@ -99,7 +98,7 @@ $survey-toggle-colors: (
 	#{$self}__toggle {
 		background-color: $background;
 
-		&::v-deep .ripple {
+		&:deep(.ripple) {
 			background-color: $ripple !important;
 		}
 	}
@@ -120,6 +119,7 @@ $survey-toggle-colors: (
 				map-get($color-map, 'color'),
 				map-get($color-map, 'ripple')
 			);
+
 			#{$self}__ring {
 				border-color: map-get($color-map, 'border');
 			}
@@ -138,9 +138,11 @@ $survey-toggle-colors: (
 						map-get($color-map, 'disabled', 'icon')
 					);
 				}
+
 				#{$self}__content {
 					color: map-get($color-map, 'disabled', 'color');
 				}
+
 				#{$self}__ring {
 					border-color: map-get($color-map, 'disabled', 'border');
 				}
@@ -226,13 +228,13 @@ $survey-toggle-colors: (
 </style>
 
 <script lang="ts">
+import Ripple from 'vue-ripple-directive';
 import {
 	SURVEY_TOGGLE_MEANINGS,
 	SURVEY_TOGGLE_STATES,
 	SURVEY_TOGGLE_STATUSES,
 } from './SurveyToggle.consts';
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
-import Ripple from 'vue-ripple-directive';
 
 export default {
 	name: 'SurveyToggle',
@@ -240,7 +242,7 @@ export default {
 		DsIcon,
 	},
 	directives: {
-		ripple: Ripple,
+		Ripple,
 	},
 	props: {
 		label: {
@@ -327,10 +329,5 @@ export default {
 			return this.hovered;
 		},
 	},
-	methods: {
-		onClick() {
-			this.$emit('click');
-		},
-	},
 };
 </script>

package/lib/js/components/TabItem/TabItem.spec.ts

@@ -1,17 +1,13 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 import TabItem from './TabItem.vue';
 import { ICONS } from '../Icons/Icon';
 
 describe('TabItem', () => {
 	const createComponent = ({ isActive = false } = {}) => {
-		const localVue = createLocalVue();
-
 		return shallowMount(TabItem, {
-			localVue,
-			mocks: {},
-			propsData: {
-				icon: ICONS.FA_CALENDAR_DAYS,
+			props: {
+				icon: Object.freeze(ICONS.FA_CALENDAR_DAYS),
 				isActive,
 				title: 'Lorem ipsum dolor sit amet',
 			},

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

@@ -1,16 +1,18 @@
 import TabItem from './TabItem.vue';
 import { ICONS } from '../Icons/Icon';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/TabItem',
 	component: TabItem,
 } as Meta<typeof TabItem>;
 
-const StoryTemplate: StoryFn<typeof TabItem> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof TabItem> = (args) => ({
 	components: { TabItem },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template: '<tab-item :icon="ICONS[icon]" :is-active="isActive" :title="title" />',
 	data() {
 		return {

package/lib/js/components/TabItem/TabItem.vue

@@ -1,10 +1,5 @@
 <template>
-	<div
-		class="a-tabItem"
-		:title="title"
-		:class="{ '-isActive': isActive }"
-		@click="$emit('click')"
-	>
+	<div class="a-tabItem" :title="title" :class="{ '-isActive': isActive }">
 		<wnl-icon :icon="icon" :size="ICON_SIZES.X_SMALL" />
 	</div>
 </template>
@@ -38,9 +33,8 @@ $tab-item-width: (2 * $space-s) + $icon-xs;
 </style>
 
 <script lang="ts">
-import { VueConstructor } from 'vue';
-
 import WnlIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
+import { toRaw } from 'vue';
 
 export default {
 	name: 'TabItem',
@@ -51,8 +45,8 @@ export default {
 		icon: {
 			type: Object,
 			required: true,
-			validator(icon: VueConstructor) {
-				return Object.values(ICONS).includes(icon);
+			validator(icon) {
+				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
 		isActive: {

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

@@ -1,4 +1,4 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 
 import Tile from './Tile.vue';
 import { ICONS } from '../Icons/Icon';
@@ -13,11 +13,8 @@ const createComponent = function ({
 	iconRight = null,
 	isEyebrowTextUppercase = false,
 }: createComponentOptions) {
-	const localVue = createLocalVue();
-	return shallowMount(Tile, {
-		localVue,
-		mocks: {},
-		propsData: {
+	return mount(Tile, {
+		props: {
 			text,
 			eyebrowText,
 			interactive,
@@ -25,8 +22,7 @@ const createComponent = function ({
 			iconLeft,
 			iconRight,
 			isEyebrowTextUppercase,
-		},
-		stubs: {},
+		} as any,
 	});
 };
 
@@ -62,7 +58,7 @@ describe('Tile', () => {
 			eyebrowText: 'eyebrowText text',
 			additionalText: 'additionalText text',
 			interactive: true,
-			iconRight: ICONS.FA_CHEVRON_RIGHT,
+			iconRight: Object.freeze(ICONS.FA_CHEVRON_RIGHT),
 		};
 		const component = createComponent(props);
 		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
@@ -78,8 +74,8 @@ describe('Tile', () => {
 			eyebrowText: 'eyebrowText text',
 			additionalText: 'additionalText text',
 			interactive: true,
-			iconRight: ICONS.FA_CHEVRON_RIGHT,
-			iconLeft: ICONS.FA_BOX_ARCHIVE,
+			iconRight: Object.freeze(ICONS.FA_CHEVRON_RIGHT),
+			iconLeft: Object.freeze(ICONS.FA_BOX_ARCHIVE),
 		};
 		const component = createComponent(props);
 		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
@@ -95,7 +91,7 @@ describe('Tile', () => {
 			eyebrowText: 'eyebrowText text',
 			additionalText: 'additionalText text',
 			interactive: true,
-			iconLeft: ICONS.FA_BOX_ARCHIVE,
+			iconLeft: Object.freeze(ICONS.FA_BOX_ARCHIVE),
 		});
 		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
 		expect(component.find('.a-tile__text').text()).toBe('text text');
@@ -108,7 +104,7 @@ describe('Tile', () => {
 		const component = createComponent({
 			text: 'text text',
 			eyebrowText: 'eyebrowText text',
-			iconLeft: ICONS.FA_BOX_ARCHIVE,
+			iconLeft: Object.freeze(ICONS.FA_BOX_ARCHIVE),
 		});
 		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
 		expect(component.find('.a-tile__text').text()).toBe('text text');
@@ -121,8 +117,8 @@ describe('Tile', () => {
 		const component = createComponent({
 			text: 'text text',
 			eyebrowText: 'eyebrowText text',
-			iconRight: ICONS.FA_ANGLE_RIGHT,
-			iconLeft: ICONS.FA_BOX_ARCHIVE,
+			iconRight: Object.freeze(ICONS.FA_ANGLE_RIGHT),
+			iconLeft: Object.freeze(ICONS.FA_BOX_ARCHIVE),
 		});
 		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
 		expect(component.find('.a-tile__text').text()).toBe('text text');
@@ -136,7 +132,7 @@ describe('Tile', () => {
 			text: 'text text',
 			eyebrowText: 'eyebrowText text',
 			additionalText: 'additionalText text',
-			iconLeft: ICONS.FA_BOX_ARCHIVE,
+			iconLeft: Object.freeze(ICONS.FA_BOX_ARCHIVE),
 		});
 		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
 		expect(component.find('.a-tile__text').text()).toBe('text text');
@@ -150,8 +146,8 @@ describe('Tile', () => {
 			text: 'text text',
 			eyebrowText: 'eyebrowText text',
 			additionalText: 'additionalText text',
-			iconRight: ICONS.FA_ANGLE_RIGHT,
-			iconLeft: ICONS.FA_BOX_ARCHIVE,
+			iconRight: Object.freeze(ICONS.FA_ANGLE_RIGHT),
+			iconLeft: Object.freeze(ICONS.FA_BOX_ARCHIVE),
 		});
 		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
 		expect(component.find('.a-tile__text').text()).toBe('text text');

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

@@ -2,16 +2,18 @@ import Tile from './Tile.vue';
 import { TILE_COLORS, TILE_STATES } from './Tile.consts';
 import { ICONS } from '../Icons/Icon';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/Tile',
 	component: Tile,
 } as Meta<typeof Tile>;
 
-const StoryTemplate: StoryFn<typeof Tile> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof Tile> = (args) => ({
 	components: { Tile },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<tile :text="text" :eyebrowText="eyebrowText" :interactive="interactive" :iconLeft="ICONS[iconLeft]" :additionalText="additionalText" :iconRight="ICONS[iconRight]" :color="color" :is-eyebrow-text-uppercase="isEyebrowTextUppercase" :state="state" :eyebrow-ellipsis="eyebrowEllipsis" :text-ellipsis="textEllipsis"/>',
 	data() {
@@ -59,15 +61,20 @@ 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',
 	},
 };
 
-const StoryStaticTemplate: StoryFn<typeof Tile> = (argTypes) => ({
+const StoryStaticTemplate: StoryFn<typeof Tile> = (args) => ({
 	components: { Tile },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<tile :text="text" :eyebrowText="eyebrowText" :interactive="interactive" :iconLeft="ICONS[iconLeft]" :additionalText="additionalText" :iconRight="ICONS[iconRight]" :color="color" :state="state" />',
 	data() {

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

@@ -238,9 +238,9 @@ $tile-colors: (
 <script lang="ts">
 import DsRipple, { RIPPLE_COLORS } from '../Ripple';
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
-import { VueConstructor } from 'vue';
 import { TILE_COLORS, TILE_STATES } from './Tile.consts';
 import { Value } from '../../utils/type.utils';
+import { toRaw } from 'vue';
 
 export default {
 	name: 'Tile',
@@ -256,15 +256,15 @@ export default {
 		iconLeft: {
 			type: Object,
 			default: null,
-			validator(iconLeft: VueConstructor) {
-				return Object.values(ICONS).includes(iconLeft);
+			validator(iconLeft) {
+				return Object.values(ICONS).includes(toRaw(iconLeft));
 			},
 		},
 		iconRight: {
 			type: Object,
 			default: null,
-			validator(iconRight: VueConstructor) {
-				return Object.values(ICONS).includes(iconRight);
+			validator(iconRight) {
+				return Object.values(ICONS).includes(toRaw(iconRight));
 			},
 		},
 		text: {

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

@@ -4,12 +4,12 @@ import CounterToggle from './CounterToggle.vue';
 import { COUNTER_TOGGLE_COLORS } from './CounterToggle.consts';
 import { ICONS } from '../../Icons/Icon';
 
-const DEFAULT_ICON = ICONS.FA_XMARK;
+const DEFAULT_ICON = Object.freeze(ICONS.FA_XMARK);
 
 describe('CounterToggle', () => {
 	const createComponent = (props = {}) => {
 		return shallowMount(CounterToggle, {
-			propsData: { icon: DEFAULT_ICON, ...props },
+			props: { icon: DEFAULT_ICON, ...props } as any,
 		});
 	};
 
@@ -37,10 +37,10 @@ describe('CounterToggle', () => {
 	});
 
 	it('should render icon', () => {
-		const icon = createComponent({ icon: ICONS.FA_XMARK });
-		let iconElement = icon.find('.counterToggle__icon');
+		const icon = createComponent({ icon: Object.freeze(ICONS.FA_XMARK) });
+		let iconElement = icon.findComponent<typeof CounterToggle>('.counterToggle__icon');
 		expect(iconElement.exists()).toBe(true);
-		expect(iconElement.props().icon).toBe(ICONS.FA_XMARK);
+		expect(iconElement.props().icon).toEqual(Object.freeze(ICONS.FA_XMARK));
 	});
 
 	test.each([

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

@@ -2,16 +2,18 @@ import CounterToggle from './CounterToggle.vue';
 import { COUNTER_TOGGLE_COLORS } from './CounterToggle.consts';
 import { ICONS } from '../../Icons/Icon';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/Toggles/CounterToggle',
 	component: CounterToggle,
 } as Meta<typeof CounterToggle>;
 
-const StoryTemplate: StoryFn<typeof CounterToggle> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof CounterToggle> = (args) => ({
 	components: { CounterToggle },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<div :class="{ contrastBackground: isInverted }">' +
 		'<counter-toggle :color="color" :counter="counter" :icon="ICONS[icon]" :isSelected="isSelected" :isDisabled="isDisabled" />' +
@@ -64,6 +66,9 @@ 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=3693%3A70976',

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

@@ -3,7 +3,6 @@
 		v-ripple
 		class="counterToggle"
 		:class="[{ '-selected': isSelected, '-disabled': isDisabled }, colorClass]"
-		@click="$emit('click')"
 	>
 		<icon class="counterToggle__icon" :icon="icon" :size="ICON_SIZES.X_SMALL" />
 		<span v-if="hasCounter" class="counterToggle__counter">{{ counter }}</span>
@@ -181,7 +180,7 @@ $counter-toggle-colors: (
 }
 
 @mixin setCounterToggleAdditions($ripple, $icon) {
-	&::v-deep .ripple {
+	&:deep(.ripple) {
 		background-color: $ripple !important;
 	}
 
@@ -271,11 +270,10 @@ $counter-toggle-colors: (
 </style>
 
 <script lang="ts">
-import { VueConstructor } from 'vue';
 import Ripple from 'vue-ripple-directive';
-
 import { COUNTER_TOGGLE_COLORS } from './CounterToggle.consts';
 import Icon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
+import { toRaw } from 'vue';
 
 export default {
 	name: 'CounterToggle',
@@ -283,7 +281,7 @@ export default {
 		Icon,
 	},
 	directives: {
-		ripple: Ripple,
+		Ripple,
 	},
 	props: {
 		counter: {
@@ -300,8 +298,8 @@ export default {
 		icon: {
 			type: Object,
 			required: true,
-			validator(icon: VueConstructor) {
-				return Object.values(ICONS).includes(icon);
+			validator(icon) {
+				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
 		isSelected: {

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

@@ -7,26 +7,29 @@ import {
 	TOGGLE_BUTTON_ELEVATIONS,
 } from './ToggleButton.consts';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/Toggles/ToggleButton',
 	component: ToggleButton,
 } as Meta<typeof ToggleButton>;
 
-const StoryTemplate: StoryFn<typeof ToggleButton> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof ToggleButton> = (args) => ({
 	components: { ToggleButton },
-	props: Object.keys(argTypes),
-	template: `<toggle-button
-			  :size="size"
-			  :type="type"
-			  :radius="radius"
-			  :color="color"
-			  :elevation="elevation"
-			  :text="text"
-			  :is-selected="isSelected"
-			  :is-interactive="isInteractive"
-			/>`,
+	setup() {
+		return { ...args };
+	},
+	template: `
+		<toggle-button
+			:size="size"
+			:type="type"
+			:radius="radius"
+			:color="color"
+			:elevation="elevation"
+			:text="text"
+			:is-selected="isSelected"
+			:is-interactive="isInteractive"
+		/>`,
 });
 
 export const Interactive = StoryTemplate.bind({});

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

@@ -93,11 +93,11 @@ $toggle-button-colors: (
 .toggleButtonWrapper {
 	display: inline-block;
 
-	&::v-deep .ripple-container {
+	&:deep(.ripple-container) {
 		border-radius: 100px !important;
 	}
 
-	&.-rounded::v-deep .ripple-container {
+	&.-rounded:deep(.ripple-container) {
 		border-radius: $radius-s !important;
 	}
 }
@@ -299,21 +299,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		// TODO implement me in future
-		// iconLeft: {
-		// 	type: Object,
-		// 	default: null,
-		// 	validator(icon: VueConstructor) {
-		// 		return Object.values(ICONS).includes(icon);
-		// 	},
-		// },
-		// iconRight: {
-		// 	type: Object,
-		// 	default: null,
-		// 	validator(icon: VueConstructor) {
-		// 		return Object.values(ICONS).includes(icon);
-		// 	},
-		// },
 		elevation: {
 			type: String,
 			default: TOGGLE_BUTTON_ELEVATIONS.NONE,
@@ -322,6 +307,7 @@ export default {
 			},
 		},
 	},
+	emits: ['click'],
 	data() {
 		return {
 			TOGGLE_BUTTON_COLORS: Object.freeze(TOGGLE_BUTTON_COLORS),

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

@@ -1,4 +1,4 @@
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import Well from './Well.vue';
 import { WELL_PADDINGS } from './Well.consts';
 
@@ -7,18 +7,16 @@ export default {
 	component: Well,
 } as Meta<typeof Well>;
 
-const StoryTemplate: StoryFn<typeof Well> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof Well> = (args) => ({
 	components: { Well },
-	props: Object.keys(argTypes),
-	template: '<well :padding="padding"><div v-html="content" /></well>',
+	setup() {
+		return { args };
+	},
+	template: '<well v-bind="args"><div v-html="args.content" /></well>',
 });
 
 export const Interactive = StoryTemplate.bind({});
 
-const args = {
-	size: null,
-} as Args;
-
 const argTypes = {
 	padding: {
 		control: { type: 'select', options: [null, ...Object.values(WELL_PADDINGS)] },
@@ -33,7 +31,6 @@ const argTypes = {
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;
-Interactive.args = args;
 
 Interactive.parameters = {
 	design: {

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

@@ -1,4 +1,4 @@
-import { Args, Meta, StoryFn } from '@storybook/vue';
+import { Args, Meta, StoryFn } from '@storybook/vue3';
 
 import ItemsList from './../ItemsList.vue';
 import rawColorsList from '../../../styles/settings/colors/_raw.json';
@@ -9,9 +9,11 @@ export default {
 	component: ItemsList,
 } as Meta<typeof ItemsList>;
 
-const StoryTemplate: StoryFn<typeof ItemsList> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,
 });

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

@@ -1,4 +1,4 @@
-import { Args, Meta, StoryFn } from '@storybook/vue';
+import { Args, Meta, StoryFn } from '@storybook/vue3';
 
 import ItemsList from './../ItemsList.vue';
 import rawWnlColorsList from '../../../styles/settings/colors/_raw-wnl.json';
@@ -10,9 +10,11 @@ export default {
 	component: ItemsList,
 } as Meta<typeof ItemsList>;
 
-const StoryTemplate: StoryFn<typeof ItemsList> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,
 });

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

@@ -1,4 +1,4 @@
-import { Args, Meta, StoryFn } from '@storybook/vue';
+import { Args, Meta, StoryFn } from '@storybook/vue3';
 
 import ItemsList from './../ItemsList.vue';
 import tokensList from '../../../styles/settings/colors/_tokens.json';
@@ -9,9 +9,11 @@ export default {
 	component: ItemsList,
 } as Meta<typeof ItemsList>;
 
-const StoryTemplate: StoryFn<typeof ItemsList> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,
 });

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

@@ -1,4 +1,4 @@
-import { Args, Meta, StoryFn } from '@storybook/vue';
+import { Args, Meta, StoryFn } from '@storybook/vue3';
 
 import ItemsList from './../ItemsList.vue';
 import tokensList from '../../../styles/settings/colors/_tokens-bodywork.json';
@@ -9,9 +9,11 @@ export default {
 	component: ItemsList,
 } as Meta<typeof ItemsList>;
 
-const StoryTemplate: StoryFn<typeof ItemsList> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,
 });