@bethinkpl/design-system 15.2.1 → 16.0.1

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

@@ -27,8 +27,9 @@
 			:class="{
 				'-neutral': colorScheme === ICON_BUTTON_COLOR_SCHEMES.NEUTRAL_LABEL,
 			}"
-			><slot
-		/></div>
+		>
+			<slot />
+		</div>
 		<wnl-button
 			ref="button"
 			class="a-iconButton__button"
@@ -128,6 +129,7 @@
 						}
 					}
 				}
+
 				#{$self}__label {
 					color: map-get($color-map, 'outlined', 'disabled', 'color');
 				}
@@ -258,6 +260,7 @@
 			height: $icon-button-large-size;
 			width: $icon-button-large-size;
 		}
+
 		#{$self}__label {
 			@include button-l-default-bold-uppercase;
 		}
@@ -273,8 +276,6 @@
 </style>
 
 <script lang="ts">
-import { VueConstructor } from 'vue';
-
 import WnlIcon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
 import WnlButton, {
 	BUTTON_COLORS,
@@ -290,6 +291,7 @@ import {
 	ICON_BUTTON_TYPES,
 } from './IconButton.consts';
 import { Value } from '../../../utils/type.utils';
+import { toRaw } from 'vue';
 
 const ICON_ONLY_ICON_SIZES_MAP = {
 	[ICON_BUTTON_SIZES.XX_SMALL]: ICON_SIZES.XXX_SMALL,
@@ -330,8 +332,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));
 			},
 		},
 		color: {

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

@@ -1,4 +1,4 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 import Card from './Card.vue';
 
@@ -10,20 +10,15 @@ describe('Card', () => {
 		headerHasPadding = false,
 		dividerUnderHeader = false,
 	} = {}) => {
-		const localVue = createLocalVue();
-
 		return shallowMount(Card, {
-			localVue,
-			mocks: {},
-			propsData: {
+			props: {
 				headerHasPadding,
 				dividerUnderHeader,
 			},
-			stubs: {},
 			slots: {
-				header: headerSlot,
-				content: contentSlot,
-				footer: footerSlot,
+				...(headerSlot !== '' && { header: headerSlot }),
+				...(contentSlot !== '' && { content: contentSlot }),
+				...(footerSlot !== '' && { footer: footerSlot }),
 			},
 		});
 	};

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

@@ -1,17 +1,29 @@
 import Card from './Card.vue';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/Cards/Card',
 	component: Card,
 } as Meta<typeof Card>;
 
-const StoryTemplate: StoryFn<typeof Card> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof Card> = (args) => ({
 	components: { Card },
-	props: Object.keys(argTypes),
-	template:
-		'<card :header-has-padding="headerHasPadding" :divider-under-header="dividerUnderHeader"><div v-if="header" slot="header" v-html="header" /><div v-if="content" slot="content" v-html="content" /><div slot="footer" v-html="footer" /></card>',
+	setup() {
+		return { ...args };
+	},
+	template: `
+			<card :header-has-padding="headerHasPadding" :divider-under-header="dividerUnderHeader">
+			<template v-if="header" #header>
+				<div v-html="header" />
+			</template>
+			<template v-if="content" #content>
+				<div v-html="content" />
+			</template>
+			<template v-if="footer" #footer>
+				<div v-html="footer" />
+			</template>
+			</card>`,
 });
 
 export const Interactive = StoryTemplate.bind({});

package/lib/js/components/Cards/CardExpandable/CardExpandable.spec.ts

@@ -1,4 +1,4 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 
 import CardExpandable from './CardExpandable.vue';
 
@@ -20,21 +20,16 @@ describe('CardExpandable', () => {
 		contentSlot = '',
 		expandedContentSlot = '',
 	}: createComponentOptions = {}) => {
-		const localVue = createLocalVue();
-
-		return shallowMount(CardExpandable, {
-			localVue,
-			mocks: {},
-			propsData: {
+		return mount(CardExpandable, {
+			props: {
 				isExpanded,
 				...(expanderTextExpanded && { expanderTextExpanded }),
 				...(expanderTextCollapsed && { expanderTextCollapsed }),
-			},
-			stubs: {},
+			} as any,
 			slots: {
-				header: headerSlot,
-				content: contentSlot,
-				expandedContent: expandedContentSlot,
+				...(headerSlot !== '' && { header: headerSlot }),
+				...(contentSlot !== '' && { content: contentSlot }),
+				...(expandedContentSlot !== '' && { expandedContent: expandedContentSlot }),
 			},
 		});
 	};

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

@@ -1,22 +1,32 @@
 import CardExpandable from './CardExpandable.vue';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/Cards/CardExpandable',
 	component: CardExpandable,
 } as Meta<typeof CardExpandable>;
 
-const StoryTemplate: StoryFn<typeof CardExpandable> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof CardExpandable> = (args) => ({
 	components: { CardExpandable },
-	props: Object.keys(argTypes),
-	template: `<card-expandable :is-expander-visible="isExpanderVisible" :expander-text-collapsed="expanderTextCollapsed" :expander-text-expanded="expanderTextExpanded" :is-expanded="isExpanded" :header-has-padding="headerHasPadding" :divider-under-header="dividerUnderHeader">
-		    <div v-if="header" slot="header" v-html="header" />
-		    <template #content="{ isExpanded: isExpandedInternal }">
-		        <div v-html="content" /><div v-if="isExpandedInternal">Dodatkowa treść w slocie <code>content</code> widoczna po rozwinięciu</div>
-		    </template>
-		    <template #expandedContent><div v-html="expandedContent"></div></template>
-		</card-expandable>`,
+	setup() {
+		return { ...args };
+	},
+	template: `
+			<card-expandable :is-expander-visible="isExpanderVisible" :expander-text-collapsed="expanderTextCollapsed"
+											 :expander-text-expanded="expanderTextExpanded" :is-expanded="isExpanded"
+											 :header-has-padding="headerHasPadding" :divider-under-header="dividerUnderHeader">
+			<template v-if="header" #header>
+				<div v-html="header" />
+			</template>
+			<template #content="{ isExpanded: isExpandedInternal }">
+				<div v-html="content" />
+				<div v-if="isExpandedInternal">Dodatkowa treść w slocie <code>content</code> widoczna po rozwinięciu</div>
+			</template>
+			<template #expandedContent>
+				<div v-html="expandedContent"></div>
+			</template>
+			</card-expandable>`,
 });
 
 export const Interactive = StoryTemplate.bind({});

package/lib/js/components/Cards/CardExpandable/CardExpandable.vue

@@ -4,7 +4,9 @@
 		:header-has-padding="headerHasPadding"
 		:divider-under-header="dividerUnderHeader"
 	>
-		<template #header><slot name="header" /></template>
+		<template #header>
+			<slot name="header" />
+		</template>
 		<template #content>
 			<slot name="content" :is-expanded="isExpandedInternal" />
 			<div v-if="isExpandedInternal" class="cardExpandable__expandedContent">
@@ -52,7 +54,7 @@
 			background-color: $color-neutral-background-hovered;
 		}
 
-		&::v-deep .ripple {
+		&:deep(.ripple) {
 			background-color: $color-default-ripple !important;
 		}
 	}
@@ -71,9 +73,9 @@
 </style>
 
 <script lang="ts">
+import Ripple from 'vue-ripple-directive';
 import DsCard from '../Card/';
 import DsIcon, { ICONS, ICON_SIZES } from '../../../components/Icons/Icon';
-import Ripple from 'vue-ripple-directive';
 
 export default {
 	name: 'CardExpandable',

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

@@ -1,17 +1,22 @@
 import Divider from './Divider.vue';
 import { DIVIDER_PROMINENCES, DIVIDER_SIZES } from './Divider.consts';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/Divider',
 	component: Divider,
 } as Meta<typeof Divider>;
 
-const StoryTemplate: StoryFn<typeof Divider> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof Divider> = (args) => ({
 	components: { Divider },
-	props: Object.keys(argTypes),
-	template: `<div style="height: 200px; width: 200px;"><divider :is-vertical="isVertical" :prominence="prominence" :size="size" /></div>`,
+	setup() {
+		return { ...args };
+	},
+	template: `
+		<div style="height: 200px; width: 200px;">
+		<divider :is-vertical="isVertical" :prominence="prominence" :size="size" />
+		</div>`,
 });
 
 export const Interactive = StoryTemplate.bind({});

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

@@ -1,16 +1,18 @@
 import Drawer from './Drawer.vue';
 import { DRAWER_POSITIONS } from './Drawer.consts';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/Drawer',
 	component: Drawer,
 } as Meta<typeof Drawer>;
 
-const StoryTemplate: StoryFn<typeof Drawer> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof Drawer> = (args) => ({
 	components: { Drawer },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template: `<div style="height: 300px; width: 200px;">
 		<drawer :position="position" :sticky-header="stickyHeader" :sticky-footer="stickyFooter">
 		<template v-slot:header><div style="background-color: var(--raw-gray-100)">Header<br><br></div></template>

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

@@ -6,7 +6,7 @@ import {
 } from './Dropdown.consts';
 import SelectList from '../SelectList/SelectList.vue';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import SelectListItem from '../SelectList/SelectListItem/SelectListItem.vue';
 
 export default {
@@ -14,9 +14,11 @@ export default {
 	component: Dropdown,
 } as Meta<typeof Dropdown>;
 
-const StoryTemplate: StoryFn<typeof Dropdown> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof Dropdown> = (args) => ({
 	components: { Dropdown, SelectList, SelectListItem },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template: `
 			<div style="position: relative">
 			<dropdown :trigger-action="triggerAction" :force-show="forceShow" :same-width="sameWidth" :radius="radius"

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

@@ -1,4 +1,4 @@
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import IconText from './IconText.vue';
 import { ICON_TEXT_COLORS, ICON_TEXT_SIZES, ICON_TEXT_STATES } from './IconText.consts';
 import { ICONS } from '../Icons/Icon';
@@ -8,19 +8,21 @@ export default {
 	component: IconText,
 } as Meta<typeof IconText>;
 
-const StoryTemplate: StoryFn<typeof IconText> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof IconText> = (args) => ({
 	components: { IconText },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template: `
-		<icon-text
-			:color="color"
-			:icon="ICONS[icon]"
-			:label="label"
-			:is-interactive="isInteractive"
-			:is-label-bold="isLabelBold"
-			:size="size"
-			:state="state"
-		/>`,
+			<icon-text
+					:color="color"
+					:icon="ICONS[icon]"
+					:label="label"
+					:is-interactive="isInteractive"
+					:is-label-bold="isLabelBold"
+					:size="size"
+					:state="state"
+			/>`,
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),

package/lib/js/components/IconText/IconText.vue

@@ -124,6 +124,7 @@
 import Icon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 import { ICON_TEXT_COLORS, ICON_TEXT_SIZES, ICON_TEXT_STATES } from './IconText.consts';
 import { Value } from '../../utils/type.utils';
+import { toRaw } from 'vue';
 
 export default {
 	name: 'IconText',
@@ -141,7 +142,7 @@ export default {
 		icon: {
 			type: Object,
 			required: true,
-			validate: (icon) => Object.values(ICONS).includes(icon),
+			validate: (icon) => Object.values(ICONS).includes(toRaw(icon)),
 		},
 		isInteractive: {
 			type: Boolean,

package/lib/js/components/Icons/FeatureIcon/FeatureIcon.stories.ts

@@ -1,17 +1,19 @@
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+
 import FeatureIcon from './FeatureIcon.vue';
 import { ICONS } from '../Icon';
 import { FEATURE_ICON_SIZES, FEATURE_ICON_COLOR } from './FeatureIcon.consts';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
-
 export default {
 	title: 'Components/Icons/FeatureIcon',
 	component: FeatureIcon,
 } as Meta<typeof FeatureIcon>;
 
-const StoryTemplate: StoryFn<typeof FeatureIcon> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof FeatureIcon> = (args) => ({
 	components: { FeatureIcon },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<feature-icon :icon="ICONS[icon]" :size="size" :color="color" :doubleBackground="doubleBackground" />',
 	data() {

package/lib/js/components/Icons/FeatureIcon/FeatureIcon.vue

@@ -118,9 +118,9 @@ $feature-icon-padding-large: 10px;
 </style>
 
 <script lang="ts">
-import { VueConstructor } from 'vue';
 import WnlIcon, { ICONS, ICON_SIZES } from '../Icon';
 import { FEATURE_ICON_SIZES, FEATURE_ICON_COLOR } from './FeatureIcon.consts';
+import { toRaw } from 'vue';
 
 export default {
 	name: 'FeatureIcon',
@@ -131,8 +131,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/Icons/Icon/Icon.stories.ts

@@ -1,16 +1,18 @@
 import Icon from './Icon.vue';
 import { ICON_SIZES, ICONS } from './Icon.consts';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/Icons/Icon',
 	component: Icon,
 } as Meta<typeof Icon>;
 
-const StoryTemplate: StoryFn<typeof Icon> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof Icon> = (args) => ({
 	components: { Icon },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<div class="sbIconList__singleIcon"><icon :icon="ICONS[icon]" :size="size" :touchable="touchable" :spinning="spinning" :rotation="rotation" :flipped-vertical="flippedVertical" :flipped-horizontal="flippedHorizontal" /></div>',
 	data() {
@@ -51,15 +53,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=1552%3A34963',
 	},
 };
 
-const StoryAllIconsTemplate: StoryFn<typeof Icon> = (argTypes) => ({
+const StoryAllIconsTemplate: StoryFn<typeof Icon> = (args) => ({
 	components: { Icon },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<div class="sbIconList">' +
 		'<div v-for="(icon, iconName) in ICONS" :key="iconName" class="sbIconList__icon">' +

package/lib/js/components/Icons/Icon/Icon.vue

@@ -20,10 +20,10 @@
 </style>
 
 <script lang="ts">
-import { VueConstructor } from 'vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 import { ICON_SIZES, ICONS } from './Icon.consts';
+import { toRaw } from 'vue';
 
 export default {
 	name: 'Icon',
@@ -34,8 +34,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));
 			},
 		},
 		size: {

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

@@ -1,18 +1,13 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 import Modal from './Modal.vue';
 
 describe('Modal', () => {
 	const createComponent = ({ headerSlot = '', slot = '', showHeader = true } = {}) => {
-		const localVue = createLocalVue();
-
 		return shallowMount(Modal, {
-			localVue,
-			mocks: {},
-			propsData: {
+			props: {
 				showHeader,
-			},
-			stubs: {},
+			} as any,
 			slots: {
 				header: headerSlot,
 				slot,

package/lib/js/components/Modal/Modal.vue

@@ -8,7 +8,7 @@
 					:icon="ICONS.FA_XMARK"
 					class="m-modal__header__close"
 					:size="ICON_SIZES.SMALL"
-					@click.native.stop="$emit('close-modal')"
+					@click.stop="$emit('close-modal')"
 				/>
 			</div>
 			<div

package/lib/js/components/Modals/Modal/Modal.stories.ts

@@ -1,43 +1,29 @@
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+
 import Modal from './Modal.vue';
 import { ICONS } from '../../Icons/Icon';
 import { FEATURE_ICON_COLOR } from '../../Icons/FeatureIcon';
 import { MODAL_SIZES, MODAL_HEADER_TITLE_SIZES } from './Modal.consts';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
-
 export default {
 	title: 'Components/Modals/Modal',
 	component: Modal,
 } as Meta<typeof Modal>;
 
-const StoryTemplate: StoryFn<typeof Modal> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof Modal> = (args) => ({
 	components: { Modal },
-	props: Object.keys(argTypes),
-	template: `
-		<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" 
-					 :size="size" 
-					 :danger="danger"
-					 :headerTitleSize="headerTitleSize" 
-					 :headerTitle="headerTitle" 
-					 :headerSubtitle="headerSubtitle"
-					 :contentCentered="contentCentered" 
-					 :headerFeatureIconColor="headerFeatureIconColor"
-					 :footerPrimaryButtonText="footerPrimaryButtonText" 
-					 :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]"
-					 :footerSecondaryButtonText="footerSecondaryButtonText"
-					 :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]"
-					 :footerTertiaryButtonText="footerTertiaryButtonText"
-					 :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" 
-					 :footerCheckboxText="footerCheckboxText"
-					 :headerImage="headerImage"
-					 @close-modal="onCloseModal"
-					 @checkbox-change="onCheckboxChange"
-					 @primary-button-click="onPrimaryButtonClick"
-					 @secondary-button-click="onSecondaryButtonClick"
-					 @tertiary-button-click="onTertiaryButtonClick"
-		>
-			<div v-html="defaultSlot" />
-		</modal>`,
+	setup() {
+		return { ...args };
+	},
+	template:
+		'<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' +
+		':headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" ' +
+		':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" ' +
+		':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" ' +
+		':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" ' +
+		':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' +
+		'<div v-html="defaultSlot" />' +
+		'</modal>',
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),

package/lib/js/components/Modals/Modal/Modal.vue

@@ -8,7 +8,7 @@
 				:size="ICON_SIZES.SMALL"
 				:elevation="BUTTON_ELEVATIONS.X_SMALL"
 				:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
-				@click.native.stop="$emit('close-modal')"
+				@click.stop="$emit('close-modal')"
 			/>
 			<div class="ds-modal__scrollableWrapper">
 				<img v-if="headerImage" class="ds-modal__image" :src="headerImage" alt="" />
@@ -312,11 +312,11 @@ $image-height-small: 140px;
 <script lang="ts">
 import FeatureIcon from '../../Icons/FeatureIcon/FeatureIcon.vue';
 import { MODAL_SIZES, MODAL_HEADER_TITLE_SIZES } from './Modal.consts';
-import { VueConstructor } from 'vue';
 import { ICONS, ICON_SIZES } from '../../Icons/Icon';
 import { FEATURE_ICON_COLOR, FEATURE_ICON_SIZES } from '../../Icons/FeatureIcon';
 import WnlButton, { BUTTON_COLORS, BUTTON_TYPES, BUTTON_ELEVATIONS } from '../../Buttons/Button';
 import WnlIconButton, { ICON_BUTTON_COLORS } from '../../Buttons/IconButton';
+import { toRaw } from 'vue';
 
 export default {
 	name: 'Modal',
@@ -347,8 +347,8 @@ export default {
 		headerFeatureIcon: {
 			type: Object,
 			default: null,
-			validator(icon: VueConstructor) {
-				return Object.values(ICONS).includes(icon);
+			validator(icon) {
+				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
 		headerFeatureIconColor: {
@@ -373,8 +373,8 @@ export default {
 		footerPrimaryButtonIcon: {
 			type: Object,
 			default: null,
-			validator(icon: VueConstructor) {
-				return Object.values(ICONS).includes(icon);
+			validator(icon) {
+				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
 		footerSecondaryButtonText: {
@@ -384,8 +384,8 @@ export default {
 		footerSecondaryButtonIcon: {
 			type: Object,
 			default: null,
-			validator(icon: VueConstructor) {
-				return Object.values(ICONS).includes(icon);
+			validator(icon) {
+				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
 		footerTertiaryButtonText: {
@@ -395,8 +395,8 @@ export default {
 		footerTertiaryButtonIcon: {
 			type: Object,
 			default: null,
-			validator(icon: VueConstructor) {
-				return Object.values(ICONS).includes(icon);
+			validator(icon) {
+				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
 		footerCheckboxText: {

package/lib/js/components/Modals/ModalDialog/ModalDialog.stories.ts

@@ -1,17 +1,19 @@
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+
 import ModalDialog from './ModalDialog.vue';
 import { ICONS } from '../../Icons/Icon';
 import { FEATURE_ICON_COLOR } from '../../Icons/FeatureIcon';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
-
 export default {
 	title: 'Components/Modals/ModalDialog',
 	component: ModalDialog,
 } as Meta<typeof ModalDialog>;
 
-const StoryTemplate: StoryFn<typeof ModalDialog> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof ModalDialog> = (args) => ({
 	components: { ModalDialog },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" ' +
 		':headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :headerFeatureIconColor="headerFeatureIconColor" ' +