@bethinkpl/design-system 15.2.1 → 16.0.0

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1681907031126,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"4.5.13"},"packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/vue":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue"},"addons":{"@storybook/addon-docs":{"version":"6.5.13"},"@storybook/addon-controls":{"version":"6.5.13"},"@storybook/addon-actions":{"version":"6.5.13"},"@storybook/addon-storysource":{"version":"6.5.13"},"@storybook/addon-viewport":{"version":"6.5.13"},"storybook-addon-designs":{"version":"6.3.1"}}}
+{"generatedAt":1681981500842,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.4"},"packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}

package/docs/runtime~main.8a21756dfcf63c109f1d.manager.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(!1&priority||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();void 0!==r&&(result=r)}}return result}priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>chunkId+"."+{117:"1156a7c503a067ad8241",255:"721b3744029f102ac772",295:"4e52f65e605e88f7b915",317:"bb9fa3422a439c11ef07",363:"5eecfb3735eae61195ab",407:"e7bfe1ea814fec553911",600:"5586e4df861d64de85f8",977:"a265714880f883237672"}[chunkId]+".manager.bundle.js",__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.hmd=module=>((module=Object.create(module)).children||(module.children=[]),Object.defineProperty(module,"exports",{enumerable:!0,set:()=>{throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+module.id)}}),module),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i<scripts.length;i++){var s=scripts[i];if(s.getAttribute("src")==url||s.getAttribute("data-webpack")=="@bethinkpl/design-system:"+key){script=s;break}}script||(needAttach=!0,(script=document.createElement("script")).charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.setAttribute("data-webpack","@bethinkpl/design-system:"+key),script.src=url),inProgress[url]=[done];var onScriptComplete=(prev,event)=>{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunk_bethinkpl_design_system=self.webpackChunk_bethinkpl_design_system||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})(),__webpack_require__.nc=void 0})();

package/docs/runtime~main.b2826aa6.iframe.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(!1&priority||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();void 0!==r&&(result=r)}}return result}priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>chunkId+"."+{39:"bfc720d8",247:"6eaf240e",286:"23828fb3",594:"bb1a9f64",651:"3a01b956",690:"46a1e07a",701:"691b9947",935:"19d3d944",962:"ec348c19"}[chunkId]+".iframe.bundle.js",__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.hmd=module=>((module=Object.create(module)).children||(module.children=[]),Object.defineProperty(module,"exports",{enumerable:!0,set:()=>{throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+module.id)}}),module),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i<scripts.length;i++){var s=scripts[i];if(s.getAttribute("src")==url||s.getAttribute("data-webpack")=="@bethinkpl/design-system:"+key){script=s;break}}script||(needAttach=!0,(script=document.createElement("script")).charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.setAttribute("data-webpack","@bethinkpl/design-system:"+key),script.src=url),inProgress[url]=[done];var onScriptComplete=(prev,event)=>{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunk_bethinkpl_design_system=self.webpackChunk_bethinkpl_design_system||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})(),__webpack_require__.nc=void 0})();

package/jest.config.js

@@ -12,17 +12,14 @@ module.exports = {
 	transform: {
 		'^.+\\.js$': 'babel-jest',
 		'^.+\\.ts$': 'ts-jest',
-		'.*\\.(vue)$': 'vue-jest',
+		'.*\\.(vue)$': '@vue/vue3-jest',
 		'^.+\\.scss': '<rootDir>/lib/js/tests/emptyTransformer.ts',
 		'^.+\\.svg$': '<rootDir>/lib/js/tests/emptyTransformer.ts',
 	},
 	moduleFileExtensions: ['js', 'vue', 'json', 'ts'],
 
 	setupFilesAfterEnv: ['<rootDir>/lib/js/typings.d.ts', '<rootDir>/lib/js/tests/globals.ts'],
-	globals: {
-		'ts-jest': {
-			tsconfig: './tsconfig.json',
-			isolatedModules: true,
-		},
+	testEnvironmentOptions: {
+		customExportConditions: ['node', 'node-addons'],
 	},
 };

package/lib/js/components/Badges/Badge/Badge.spec.ts

@@ -1,20 +1,15 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 import Badge from './Badge.vue';
 import { BADGE_COLORS } from './Badge.consts';
 
 describe('Badge', () => {
 	const createComponent = ({ label = '' } = {}) => {
-		const localVue = createLocalVue();
-
 		return shallowMount(Badge, {
-			localVue,
-			mocks: {},
-			propsData: {
+			props: {
 				label,
 				color: BADGE_COLORS.NEUTRAL,
-			},
-			stubs: {},
+			} as any,
 		});
 	};
 

package/lib/js/components/Badges/Badge/Badge.stories.ts

@@ -1,16 +1,18 @@
 import Badge from './Badge.vue';
 import { BADGE_COLORS } from './Badge.consts';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/Badges/Badge',
 	component: Badge,
 } as Meta<typeof Badge>;
 
-const StoryTemplate: StoryFn<typeof Badge> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof Badge> = (args) => ({
 	components: { Badge },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<div style="display: flex"><Badge :color="color" :label="label"><img alt="Badge" style="width: 100%; height: 100%" :src="iconUrl" /></Badge></div>',
 });

package/lib/js/components/Badges/BadgeScore/BadgeScore.spec.ts

@@ -1,4 +1,4 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 import BadgeScore from './BadgeScore.vue';
 import { BADGE_SCORE_COLORS, BADGE_SCORE_SIZES } from './BadgeScore.consts';
@@ -9,16 +9,12 @@ describe('BadgeScore', () => {
 		color = BADGE_SCORE_COLORS.SUCCESS as string,
 		size = BADGE_SCORE_SIZES.MEDIUM as string,
 	} = {}) => {
-		const localVue = createLocalVue();
-
 		return shallowMount(BadgeScore, {
-			localVue,
-			mocks: {},
-			propsData: {
+			props: {
 				color,
 				size,
 				text,
-			},
+			} as any,
 		});
 	};
 

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

@@ -2,7 +2,7 @@ import BadgeScore from './BadgeScore.vue';
 import { BADGE_SCORE_COLORS, BADGE_SCORE_SIZES } from './BadgeScore.consts';
 import { ICONS } from '../../Icons/Icon';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import { Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/Badges/BadgeScore',
@@ -17,9 +17,11 @@ const StoryTemplate: StoryFn<{
 	size: string;
 	icon: string;
 	fullWidth: boolean;
-}> = (argTypes) => ({
+}> = (args) => ({
 	components: { BadgeScore },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<badge-score :color="color" :suffix="suffix" :text="text" :size="size" :icon="ICONS[icon]" :fullWidth="fullWidth" />',
 	data() {
@@ -62,9 +64,11 @@ Interactive.parameters = {
 };
 
 /* STATIC STORIES */
-const StaticStoryTemplate: StoryFn<{}> = (argTypes) => ({
+const StaticStoryTemplate: StoryFn<{}> = (args) => ({
 	components: { BadgeScore },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<badge-score :color="BADGE_SCORE_COLORS.WARNING" suffix="%" text="1" :full-width="fullWidth" />',
 	data() {

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

@@ -134,6 +134,7 @@ $badge-score-colors: (
 
 		min-width: $badge-score-small-min-width;
 		padding: $space-xxs $space-xxs;
+
 		#{$self}__suffix {
 			@include label-l-default-bold;
 		}
@@ -159,7 +160,7 @@ $badge-score-colors: (
 <script lang="ts">
 import { BADGE_SCORE_COLORS, BADGE_SCORE_SIZES } from './BadgeScore.consts';
 import WnlIcon, { ICONS, ICON_SIZES } from '../../Icons/Icon';
-import { VueConstructor } from 'vue';
+import { toRaw } from 'vue';
 
 export default {
 	name: 'BadgeScore',
@@ -186,8 +187,8 @@ export default {
 		icon: {
 			type: Object,
 			default: null,
-			validator(icon: VueConstructor) {
-				return Object.values(ICONS).includes(icon);
+			validator(icon) {
+				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
 		size: {

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

@@ -2,16 +2,18 @@ import Banner from './Banner.vue';
 import { BANNER_COLORS, BANNER_LAYOUTS } from './Banner.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/Banner',
 	component: Banner,
 } as Meta<typeof Banner>;
 
-const StoryTemplate: StoryFn<typeof Banner> = (argTypes, { updateArgs }) => ({
+const StoryTemplate: StoryFn<typeof Banner> = (args, { updateArgs }) => ({
 	components: { Banner },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),
@@ -24,25 +26,26 @@ const StoryTemplate: StoryFn<typeof Banner> = (argTypes, { updateArgs }) => ({
 			});
 		},
 	},
-	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 v-slot:defaultText><span v-if='defaultText' v-html='defaultText'/></template>
-          <template v-slot:expandedText>
-            <div v-if='expandedText' v-html='expandedText'/>
-          </template>
-          <template v-slot:rightSlot>
-            <div v-if='rightSlot' v-html='rightSlot'/>
-          </template>
-          </banner>`,
+	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({});

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

@@ -14,10 +14,7 @@
 				<div class="ds-banner__textWrapper">
 					<div class="ds-banner__titleWrapper">
 						<div class="ds-banner__title" v-text="title" />
-						<div
-							v-if="$slots.defaultText && $slots.defaultText.length > 0"
-							class="ds-banner__defaultText"
-						>
+						<div v-if="$slots.defaultText" class="ds-banner__defaultText">
 							<slot name="defaultText" />
 						</div>
 					</div>
@@ -28,50 +25,38 @@
 								:color="BUTTON_COLORS.NEUTRAL"
 								:type="BUTTON_TYPES.OUTLINED"
 								:size="BUTTON_SIZES.SMALL"
-								@click.native="$emit('button-clicked')"
+								@click="$emit('button-clicked')"
 								>{{ buttonText }}
 							</ds-button>
 						</div>
-						<div
-							v-if="$slots.rightSlot && $slots.rightSlot.length > 0"
-							class="ds-banner__rightSlot"
-						>
+						<div v-if="$slots.rightSlot" class="ds-banner__rightSlot">
 							<slot name="rightSlot" />
 						</div>
 					</div>
 				</div>
 			</div>
-			<div
-				v-if="$slots.expandedText && $slots.expandedText.length > 0"
-				class="ds-banner__expander"
-			>
+			<div v-if="$slots.expandedText" class="ds-banner__expander">
 				<ds-icon-button
 					:size="ICON_BUTTON_SIZES.SMALL"
 					:icon="isExpandedInternal ? ICONS.FA_CHEVRON_UP : ICONS.FA_CHEVRON_DOWN"
 					:color="ICON_BUTTON_COLORS.NEUTRAL"
 					:radius="BUTTON_RADIUSES.CAPSULE"
 					:touchable="false"
-					@click.native="toggleExpandedText"
+					@click="toggleExpandedText"
 				/>
 			</div>
-			<div
-				v-if="!($slots.expandedText && $slots.expandedText.length > 0) && closable"
-				class="ds-banner__close"
-			>
+			<div v-if="!$slots.expandedText && closable" class="ds-banner__close">
 				<ds-icon-button
 					:size="ICON_BUTTON_SIZES.SMALL"
 					:icon="ICONS.FA_XMARK"
 					:color="ICON_BUTTON_COLORS.NEUTRAL"
 					:radius="BUTTON_RADIUSES.CAPSULE"
 					:touchable="false"
-					@click.native="$emit('close')"
+					@click="$emit('close')"
 				/>
 			</div>
 		</div>
-		<div
-			v-if="$slots.expandedText && $slots.expandedText.length > 0 && isExpandedInternal"
-			class="ds-banner__expandedContainer"
-		>
+		<div v-if="$slots.expandedText && isExpandedInternal" class="ds-banner__expandedContainer">
 			<ds-divider :prominence="DIVIDER_PROMINENCES.STRONG" />
 			<div class="ds-banner__expandedText">
 				<slot name="expandedText" />
@@ -299,9 +284,6 @@
 </style>
 
 <script lang="ts">
-import { VueConstructor } from 'vue';
-
-import { Prop } from 'vue/types/options';
 import DsButton, {
 	BUTTON_RADIUSES,
 	BUTTON_TYPES,
@@ -313,6 +295,7 @@ import DsIcon from '../Icons/Icon';
 import DsIconButton, { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../Buttons/IconButton';
 import { ICONS } from '../Icons/Icon';
 import { BANNER_COLORS, BANNER_LAYOUTS } from './Banner.consts';
+import { toRaw } from 'vue';
 
 export default {
 	name: 'Banner',
@@ -324,9 +307,9 @@ export default {
 	},
 	props: {
 		icon: {
-			type: Object as Prop<VueConstructor>,
+			type: Object,
 			default: null,
-			validator: (icon: VueConstructor) => Object.values(ICONS).includes(icon),
+			validator: (icon) => Object.values(ICONS).includes(toRaw(icon)),
 		},
 		buttonText: {
 			type: String,

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

@@ -11,9 +11,9 @@ import {
 import { ICONS } from '../../Icons/Icon';
 
 describe('Button', () => {
-	const createComponent = (props = {}) => {
+	const createComponent = (props = {} as any) => {
 		return shallowMount(Button, {
-			propsData: props,
+			props,
 			slots: {
 				default: 'Hello',
 			},
@@ -52,13 +52,17 @@ describe('Button', () => {
 	});
 
 	it('should render icon', () => {
-		const leftIcon = createComponent({ 'icon-left': ICONS.FA_XMARK });
+		const leftIcon = createComponent({ 'icon-left': Object.freeze(ICONS.FA_XMARK) });
 		expect(leftIcon.find('.a-button__icon.-left').exists()).toBe(true);
-		expect(leftIcon.find('.a-button__icon.-left').props().icon).toBe(ICONS.FA_XMARK);
+		expect(leftIcon.findComponent<typeof Button>('.a-button__icon.-left').props().icon).toEqual(
+			ICONS.FA_XMARK,
+		);
 
-		const rightIcon = createComponent({ 'icon-right': ICONS.FA_CLOCK });
+		const rightIcon = createComponent({ 'icon-right': Object.freeze(ICONS.FA_CLOCK) });
 		expect(rightIcon.find('.a-button__icon.-right').exists()).toBe(true);
-		expect(rightIcon.find('.a-button__icon.-right').props().icon).toBe(ICONS.FA_CLOCK);
+		expect(
+			rightIcon.findComponent<typeof Button>('.a-button__icon.-right').props().icon,
+		).toEqual(ICONS.FA_CLOCK);
 	});
 
 	it('correct slot content', () => {

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

@@ -9,30 +9,33 @@ import {
 } from './Button.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/Buttons/Button',
 	component: Button,
 } as Meta<typeof Button>;
 
-const StoryTemplate: StoryFn<typeof Button> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof Button> = (args) => ({
 	components: { Button },
-	props: Object.keys(argTypes),
-	template: `<div :class="{ contrastBackground: isInverted }">
-		<Button
-			:size="size"
-			:type="type"
-			:state="state"
-			:radius="radius"
-			:color="color"
-			:elevation="elevation"
-			:icon-left="ICONS[iconLeft]"
-			:icon-right="ICONS[iconRight]"
-		>
-			{{slotText}}
-		</Button>
-	</div>`,
+	setup() {
+		return { ...args };
+	},
+	template: `
+			<div :class="{ contrastBackground: isInverted }">
+			<Button
+					:size="size"
+					:type="type"
+					:state="state"
+					:radius="radius"
+					:color="color"
+					:elevation="elevation"
+					:icon-left="ICONS[iconLeft]"
+					:icon-right="ICONS[iconRight]"
+			>
+				{{ slotText }}
+			</Button>
+			</div>`,
 	computed: {
 		isInverted() {
 			return this.color === 'inverted';
@@ -90,6 +93,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=138%3A2373',

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

@@ -21,7 +21,6 @@
 			'-elevation-x-small': elevation === ELEVATIONS.X_SMALL,
 			'-elevation-small': elevation === ELEVATIONS.SMALL,
 		}"
-		@click="$emit('click')"
 	>
 		<span class="a-button__content">
 			<wnl-icon
@@ -52,9 +51,7 @@
 </style>
 
 <script lang="ts">
-import { VueConstructor } from 'vue';
 import Ripple from 'vue-ripple-directive';
-
 import { Value } from '../../../utils/type.utils';
 
 import WnlIcon, { ICONS, ICON_SIZES } from '../../Icons/Icon';
@@ -68,6 +65,7 @@ import {
 } from './Button.consts';
 
 import { ICON_BUTTON_COLORS } from '../IconButton/IconButton.consts';
+import { toRaw } from 'vue';
 
 export default {
 	// eslint-disable-next-line vue/no-reserved-component-names
@@ -117,15 +115,15 @@ export default {
 		iconLeft: {
 			type: Object,
 			default: null,
-			validator(icon: VueConstructor) {
-				return Object.values(ICONS).includes(icon);
+			validator(icon) {
+				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
 		iconRight: {
 			type: Object,
 			default: null,
-			validator(icon: VueConstructor) {
-				return Object.values(ICONS).includes(icon);
+			validator(icon) {
+				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
 		elevation: {

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

@@ -9,16 +9,18 @@ import {
 import { BUTTON_ELEVATIONS, BUTTON_RADIUSES } from '../Button';
 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/Buttons/IconButton',
 	component: IconButton,
 } as Meta<typeof IconButton>;
 
-const StoryTemplate: StoryFn<typeof IconButton> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof IconButton> = (args) => ({
 	components: { IconButton },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	computed: {
 		isInverted() {
 			return this.color === 'inverted';
@@ -98,6 +100,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=180%3A2709',
@@ -137,9 +142,11 @@ const argTypesDisabled = {
 	},
 } as ArgTypes;
 
-const StoryFilledWithLabelTemplate: StoryFn<typeof IconButton> = (argTypes) => ({
+const StoryFilledWithLabelTemplate: StoryFn<typeof IconButton> = (args) => ({
 	components: { IconButton },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<icon-button :icon="ICONS.FA_XMARK" :type="ICON_BUTTON_TYPES.FILLED" >Zamknij</icon-button>',
 	data() {
@@ -153,9 +160,11 @@ const StoryFilledWithLabelTemplate: StoryFn<typeof IconButton> = (argTypes) => (
 export const FilledWithLabel = StoryFilledWithLabelTemplate.bind({});
 FilledWithLabel.argTypes = argTypesDisabled;
 
-const StoryOutlinedRoundedTemplate: StoryFn<typeof IconButton> = (argTypes) => ({
+const StoryOutlinedRoundedTemplate: StoryFn<typeof IconButton> = (args) => ({
 	components: { IconButton },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<icon-button :icon="ICONS.FA_CHEVRON_RIGHT" :type="ICON_BUTTON_TYPES.OUTLINED" :radius="BUTTON_RADIUSES.ROUNDED" />',
 	data() {
@@ -170,9 +179,11 @@ const StoryOutlinedRoundedTemplate: StoryFn<typeof IconButton> = (argTypes) => (
 export const OutlinedRounded = StoryOutlinedRoundedTemplate.bind({});
 OutlinedRounded.argTypes = argTypesDisabled;
 
-const StoryFilledPrimaryTemplate: StoryFn<typeof IconButton> = (argTypes) => ({
+const StoryFilledPrimaryTemplate: StoryFn<typeof IconButton> = (args) => ({
 	components: { IconButton },
-	props: Object.keys(argTypes),
+	setup() {
+		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" />',
 	data() {
@@ -188,9 +199,11 @@ const StoryFilledPrimaryTemplate: StoryFn<typeof IconButton> = (argTypes) => ({
 export const FilledPrimary = StoryFilledPrimaryTemplate.bind({});
 FilledPrimary.argTypes = argTypesDisabled;
 
-const StoryIconOnlyInfoTemplate: StoryFn<typeof IconButton> = (argTypes) => ({
+const StoryIconOnlyInfoTemplate: StoryFn<typeof IconButton> = (args) => ({
 	components: { IconButton },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<icon-button :icon="ICONS.FA_FLAG" :color="ICON_BUTTON_COLORS.INFO" :size="ICON_BUTTON_SIZES.MEDIUM" />',
 	data() {
@@ -205,9 +218,11 @@ const StoryIconOnlyInfoTemplate: StoryFn<typeof IconButton> = (argTypes) => ({
 export const IconOnlyInfo = StoryIconOnlyInfoTemplate.bind({});
 IconOnlyInfo.argTypes = argTypesDisabled;
 
-const StoryIconOnlyWarningTemplate: StoryFn<typeof IconButton> = (argTypes) => ({
+const StoryIconOnlyWarningTemplate: StoryFn<typeof IconButton> = (args) => ({
 	components: { IconButton },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<icon-button :icon="ICONS.HEAD_WITH_QUESTION_MARK" :color="ICON_BUTTON_COLORS.WARNING" :size="ICON_BUTTON_SIZES.MEDIUM" />',
 	data() {