@bethinkpl/design-system 15.2.1 → 16.0.0

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

@@ -25,9 +25,9 @@
 <script lang="ts">
 import DsModal from '../Modal/Modal.vue';
 import { MODAL_SIZES, MODAL_HEADER_TITLE_SIZES } from '../Modal';
-import { VueConstructor } from 'vue';
 import { ICONS } from '../../Icons/Icon';
 import { FEATURE_ICON_COLOR } from '../../Icons/FeatureIcon';
+import { toRaw } from 'vue';
 
 export default {
 	name: 'ModalDialog',
@@ -48,8 +48,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: {
@@ -70,8 +70,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: {
@@ -81,8 +81,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));
 			},
 		},
 	},

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

@@ -1,16 +1,18 @@
 import NumberInCircle from './NumberInCircle.vue';
 import { NUMBER_IN_CIRCLE_COLORS } from './NumberInCircle.consts';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/NumberInCircle',
 	component: NumberInCircle,
 } as Meta<typeof NumberInCircle>;
 
-const StoryTemplate: StoryFn<typeof NumberInCircle> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof NumberInCircle> = (args) => ({
 	components: { NumberInCircle },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<number-in-circle :index="index" :color="color" :medium="medium">{{slotText}}</number-in-circle>',
 });

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

@@ -1,6 +1,6 @@
 import OverlayHeader from './OverlayHeader.vue';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import { OVERLAY_HEADER_BORDER_COLORS } from './OverlayHeader.consts';
 
 export default {
@@ -8,30 +8,32 @@ export default {
 	component: OverlayHeader,
 } as Meta<typeof OverlayHeader>;
 
-const StoryTemplate: StoryFn<typeof OverlayHeader> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof OverlayHeader> = (args) => ({
 	components: { OverlayHeader },
-	props: Object.keys(argTypes),
+	setup() {
+		return { args };
+	},
 	template: `
 			<div style="height: 300px">
-			<overlay-header v-bind=$props>
-				<template v-if="accessorySlot" #accessory>
-					<div style="background: var(--raw-gray-300); height: 100%">{{ accessorySlot }}</div>
+			<overlay-header v-bind=args>
+				<template v-if="args.accessorySlot" #accessory>
+					<div style="background: var(--raw-gray-300); height: 100%">{{ args.accessorySlot }}</div>
 				</template>
-				<template v-if="eyebrowAccessorySlot" #eyebrowAccessory>
-					<div style="background: var(--raw-gray-300); font-size: 10px">{{ eyebrowAccessorySlot }}</div>
+				<template v-if="args.eyebrowAccessorySlot" #eyebrowAccessory>
+					<div style="background: var(--raw-gray-300); font-size: 10px">{{ args.eyebrowAccessorySlot }}</div>
 				</template>
-				<template v-if="titleLeadingSlot" #titleLeading>
-					<div style="background: var(--raw-gray-300);">{{ titleLeadingSlot }}</div>
+				<template v-if="args.titleLeadingSlot" #titleLeading>
+					<div style="background: var(--raw-gray-300);">{{ args.titleLeadingSlot }}</div>
 				</template>
-				<template v-if="titleTrailingSlot" #titleTrailing>
-					<div style="background: var(--raw-gray-300); white-space: nowrap">{{ titleTrailingSlot }}</div>
+				<template v-if="args.titleTrailingSlot" #titleTrailing>
+					<div style="background: var(--raw-gray-300); white-space: nowrap">{{ args.titleTrailingSlot }}</div>
 				</template>
-				<template v-if="actionsSlot" #actions>
-					<div style="background: var(--raw-gray-300); height: 100%">{{ actionsSlot }}</div>
+				<template v-if="args.actionsSlot" #actions>
+					<div style="background: var(--raw-gray-300); height: 100%">{{ args.actionsSlot }}</div>
 				</template>
-				<template v-if="dropdownSlot" #dropdown="{ close }">
-					<div style="background: var(--raw-gray-300);">{{ dropdownSlot }}</div>
-					<div style="background: var(--raw-gray-300);">{{ dropdownSlot }}</div>
+				<template v-if="args.dropdownSlot" #dropdown="{ close }">
+					<div style="background: var(--raw-gray-300);">{{ args.dropdownSlot }}</div>
+					<div style="background: var(--raw-gray-300);">{{ args.dropdownSlot }}</div>
 				</template>
 			</overlay-header>
 			</div>`,

package/lib/js/components/OverlayHeader/OverlayHeader.vue

@@ -60,7 +60,7 @@
 				is-vertical
 			/>
 		</template>
-		<template v-if="$scopedSlots.dropdown">
+		<template v-if="$slots.dropdown">
 			<ds-dropdown
 				boundaries-selector="body"
 				:placement="DROPDOWN_PLACEMENTS.BOTTOM_END"

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

@@ -1,17 +1,14 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 import Pagination from './Pagination.vue';
 
 describe('Pagination', () => {
 	const createComponent = ({ currentPage = 1, itemsTotalAmount = 30 } = {}) => {
-		const localVue = createLocalVue();
-
 		return shallowMount(Pagination, {
-			localVue,
-			propsData: {
+			props: {
 				currentPage,
 				itemsTotalAmount,
-			},
+			} as any,
 		});
 	};
 
@@ -102,7 +99,7 @@ describe('Pagination', () => {
 	])('should calculate correct pagination for %o', ({ props, expected }) => {
 		const component = createComponent(props);
 		const elements: Array<string> = [];
-		component.findAll('.ds-pagination__itemWrapper').wrappers.forEach((element) => {
+		component.findAll('.ds-pagination__itemWrapper').forEach((element) => {
 			elements.push(element.text().trim());
 		});
 		expect(elements).toEqual(expected);

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

@@ -1,26 +1,28 @@
 import Pagination from './Pagination.vue';
 
-import { ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/Pagination',
 	component: Pagination,
 } as Meta<typeof Pagination>;
 
-const StoryTemplate: StoryFn<typeof Pagination> = (argTypes, { updateArgs }) => ({
+const StoryTemplate: StoryFn<typeof Pagination> = (args, { updateArgs }) => ({
 	components: { Pagination },
-	props: Object.keys(argTypes),
+	setup() {
+		return { args };
+	},
 	methods: {
 		onChangePage(currentPage) {
 			updateArgs({ currentPage });
 		},
 	},
 	template: `
-		<Pagination v-bind=$props @change-page="onChangePage">
+			<Pagination v-bind=args @change-page="onChangePage">
 			<template #accessory>
-				<div v-if="accessory" v-html="accessory" />
+				<div v-if="args.accessory" v-html="args.accessory" />
 			</template>
-		</Pagination>`,
+			</Pagination>`,
 });
 
 export const Interactive = StoryTemplate.bind({});

package/lib/js/components/Pagination/Pagination.vue

@@ -27,7 +27,7 @@
 							{{ navigationItem }}
 						</span>
 					</div>
-					<div v-else :key="index" class="ds-pagination__itemWrapper">
+					<div v-else :key="`ellipsis${index}`" class="ds-pagination__itemWrapper">
 						<span class="ds-pagination__ellipsis">&hellip;</span>
 					</div>
 				</template>
@@ -43,7 +43,7 @@
 							? ICON_BUTTON_STATES.DISABLED
 							: ICON_BUTTON_STATES.DEFAULT
 					"
-					@click.native="changePage(currentPage - 1)"
+					@click="changePage(currentPage - 1)"
 				/>
 
 				<div class="ds-pagination__compactItem">
@@ -69,7 +69,7 @@
 							? ICON_BUTTON_STATES.DISABLED
 							: ICON_BUTTON_STATES.DEFAULT
 					"
-					@click.native="changePage(currentPage + 1)"
+					@click="changePage(currentPage + 1)"
 				/>
 			</div>
 		</div>

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

@@ -22,13 +22,13 @@ describe('Pill', () => {
 		color = PILL_COLORS.NEUTRAL,
 	}: createComponentOptions = {}) => {
 		return shallowMount(Pill, {
-			propsData: {
+			props: {
 				label,
 				leftIcon,
 				hasDelete,
 				size,
 				color,
-			},
+			} as any,
 		});
 	};
 
@@ -52,10 +52,12 @@ describe('Pill', () => {
 	});
 
 	it('renders leftIcon', () => {
-		const component = createComponent({ leftIcon: ICONS.FA_TAG });
+		const component = createComponent({ leftIcon: Object.freeze(ICONS.FA_TAG) });
 
 		expect(component.find('.pill__leftIcon').exists()).toBe(true);
-		expect(component.find('.pill__leftIcon').props().icon).toBe(ICONS.FA_TAG);
+		expect(component.findComponent<typeof Pill>('.pill__leftIcon').props().icon).toEqual(
+			ICONS.FA_TAG,
+		);
 	});
 
 	it("doesn't render leftIcon by default", () => {
@@ -67,7 +69,7 @@ describe('Pill', () => {
 	it('renders delete', () => {
 		const component = createComponent({ hasDelete: true });
 
-		const deleteButton = component.find('.pill__delete');
+		const deleteButton = component.findComponent<typeof Pill>('.pill__delete');
 		expect(deleteButton.exists()).toBe(true);
 		expect(deleteButton.props().icon).toBe(ICONS.FA_XMARK);
 

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

@@ -2,16 +2,18 @@ import Pill from './Pill.vue';
 import { PILL_COLORS, PILL_SIZES, PILL_STATES } from './Pill.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/Pill',
 	component: Pill,
 } as Meta<typeof Pill>;
 
-const StoryTemplate: StoryFn<typeof Pill> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof Pill> = (args) => ({
 	components: { Pill },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<pill :label="label" :left-icon="ICONS[leftIcon]" :has-delete="hasDelete" :size="size" :color="color" :state="state"/>',
 	data() {

package/lib/js/components/Pill/Pill.vue

@@ -28,7 +28,7 @@
 			:size="ICON_BUTTON_SIZES.XX_SMALL"
 			:icon="ICONS.FA_XMARK"
 			:elevation="BUTTON_ELEVATIONS.X_SMALL"
-			@click.native="$emit('delete')"
+			@click="$emit('delete')"
 		/>
 	</div>
 </template>
@@ -199,8 +199,8 @@ import IconButton, {
 } from '../Buttons/IconButton';
 import Icon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 import { BUTTON_ELEVATIONS } from '../Buttons/Button';
-import { VueConstructor } from 'vue';
 import { Value } from '../../utils/type.utils';
+import { toRaw } from 'vue';
 
 const PILL_ICON_BUTTONS_COLOR_MAP = {
 	[PILL_COLORS.INVERTED]: ICON_BUTTON_COLORS.PRIMARY,
@@ -224,8 +224,8 @@ export default {
 		leftIcon: {
 			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/PopOver/PopOver.stories.ts

@@ -6,16 +6,18 @@ import {
 	POP_OVER_TRIGGER_ACTIONS,
 } from './PopOver.consts';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/PopOver',
 	component: PopOver,
 } as Meta<typeof PopOver>;
 
-const StoryTemplate: StoryFn<typeof PopOver> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof PopOver> = (args) => ({
 	components: { PopOver },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<div style="display: flex; align-items: center; justify-content: center; height: 800px">' +
 		'<pop-over :placement="placement" :color="color" :trigger-action="triggerAction" :title-text="titleText" :subtitle-text="subtitleText" :button-text="buttonText" :force-show="forceShow" :header-image-url="headerImageUrl" :size="size" :max-height="maxHeight" :is-pointer-visible="isPointerVisible">' +

package/lib/js/components/PopOver/PopOver.vue

@@ -62,7 +62,7 @@
 	flex-direction: column;
 	padding: 0;
 
-	&.-color-neutral ::v-deep .popper__arrow {
+	&.-color-neutral :deep(.popper__arrow) {
 		border-color: $color-neutral-background transparent !important;
 	}
 
@@ -97,7 +97,7 @@
 	&[x-placement^='bottom'] {
 		margin-top: $space-s;
 
-		::v-deep .popper__arrow {
+		:deep(.popper__arrow) {
 			border-color: transparent transparent $color-inverted-border transparent;
 			border-width: 0 $space-xs $space-s $space-xs;
 			left: calc(50% - #{$space-xs});
@@ -110,7 +110,7 @@
 	&[x-placement^='top'] {
 		margin-bottom: $space-s;
 
-		::v-deep .popper__arrow {
+		:deep(.popper__arrow) {
 			border-color: $color-inverted-border transparent transparent transparent;
 			border-width: $space-s $space-xs 0 $space-xs;
 			bottom: -$space-s;
@@ -123,7 +123,7 @@
 	&[x-placement^='right'] {
 		margin-left: $space-s;
 
-		::v-deep .popper__arrow {
+		:deep(.popper__arrow) {
 			border-color: transparent $color-inverted-border transparent transparent;
 			border-width: $space-xs $space-s $space-xs 0;
 			left: -$space-s;
@@ -136,7 +136,7 @@
 	&[x-placement^='left'] {
 		margin-right: $space-s;
 
-		::v-deep .popper__arrow {
+		:deep(.popper__arrow) {
 			border-color: transparent transparent transparent $color-inverted-border;
 			border-width: $space-xs 0 $space-xs $space-s;
 			margin-left: 0;

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

@@ -9,21 +9,20 @@ import {
 	ProgressBarRange,
 } from './ProgressBar.consts';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/ProgressBar',
 	component: ProgressBar,
 } as Meta<typeof ProgressBar>;
 
-const StoryTemplate: StoryFn<typeof ProgressBar> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof ProgressBar> = (args) => ({
 	components: { ProgressBar },
-	props: Object.keys(argTypes),
+	setup() {
+		return { args };
+	},
 	template: `
-			<ProgressBar
-					v-bind=$props
-					:badge-position="(typeof ($props.badgePosition) === 'undefined' || $props.badgePosition === '') ? null : parseInt($props.badgePosition, 10)"
-			/>`,
+			<progress-bar v-bind=args></progress-bar>`,
 });
 
 export const Interactive = StoryTemplate.bind({});

package/lib/js/components/ProgressBar/ProgressBar.vue

@@ -66,6 +66,8 @@
 </template>
 
 <style scoped lang="scss">
+@use 'sass:math';
+
 @import '../../../styles/settings/spacings';
 @import '../../../styles/settings/media-queries';
 @import '../../../styles/settings/colors/tokens';
@@ -287,16 +289,16 @@ $progress-bar-badge-colors: (
 		display: flex;
 		height: $progress-bar-badge-size;
 		justify-content: center;
-		margin-left: -$progress-bar-badge-size / 2;
-		margin-top: -$progress-bar-badge-size / 2;
+		margin-left: math.div(-$progress-bar-badge-size, 2);
+		margin-top: math.div(-$progress-bar-badge-size, 2);
 		position: absolute;
 		top: 50%;
 		width: $progress-bar-badge-size;
 
 		&.-small {
 			height: $progress-bar-badge-size-small;
-			margin-left: -$progress-bar-badge-size-small / 2;
-			margin-top: -$progress-bar-badge-size-small / 2;
+			margin-left: math.div(-$progress-bar-badge-size-small, 2);
+			margin-top: math.div(-$progress-bar-badge-size-small, 2);
 			width: $progress-bar-badge-size-small;
 		}
 	}

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

@@ -1,4 +1,4 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 import ProgressDonutChart from './ProgressDonutChart.vue';
 import {
@@ -8,14 +8,12 @@ import {
 	ProgressDonutChartState,
 } from './ProgressDonutChart.consts';
 
-const localVue = createLocalVue();
 const createComponent = function ({
 	label = '',
 	state = PROGRESS_DONUT_CHART_STATES.DEFAULT,
 	ranges = [],
 }: createComponentOptions) {
 	return shallowMount(ProgressDonutChart, {
-		localVue,
 		propsData: {
 			label,
 			state,
@@ -90,8 +88,8 @@ describe('ProgressDonutChart', () => {
 		});
 		const tracks = component.findAll('.progressDonutChart__track');
 		expect(tracks.length).toBe(3);
-		expect(tracks.at(0).attributes('style')).toBe('transform: rotate(90deg);');
-		expect(tracks.at(1).attributes('style')).toBe('transform: rotate(198deg);');
-		expect(tracks.at(2).attributes('style')).toBe('transform: rotate(288deg);');
+		expect(tracks.at(0)?.attributes('style')).toBe('--length: 30; transform: rotate(90deg);');
+		expect(tracks.at(1)?.attributes('style')).toBe('--length: 25; transform: rotate(198deg);');
+		expect(tracks.at(2)?.attributes('style')).toBe('--length: 25; transform: rotate(288deg);');
 	});
 });

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

@@ -1,6 +1,6 @@
 import ProgressDonutChart from './ProgressDonutChart.vue';
 
-import { ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import {
 	PROGRESS_DONUT_CHART_RANGE_COLORS,
 	PROGRESS_DONUT_CHART_STATES,
@@ -12,13 +12,15 @@ export default {
 	component: ProgressDonutChart,
 } as Meta<typeof ProgressDonutChart>;
 
-const StoryTemplate: StoryFn<typeof ProgressDonutChart> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof ProgressDonutChart> = (args) => ({
 	components: { ProgressDonutChart },
-	props: Object.keys(argTypes),
+	setup() {
+		return { args };
+	},
 	template: `
-		<ProgressDonutChart
-			v-bind=$props
-		/>`,
+			<ProgressDonutChart
+					v-bind=args
+			/>`,
 });
 
 export const Interactive = StoryTemplate.bind({});

package/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue

@@ -154,7 +154,7 @@ $progress-donut-chart-range-colors: (
 		animation: a-spinAround 2s infinite linear;
 		stroke: $color-neutral-background-strong;
 		stroke-dasharray: $circle-circumference;
-		stroke-dashoffset: #{$circle-circumference - ($circle-circumference * (25 / 100))};
+		stroke-dashoffset: #{$circle-circumference - ($circle-circumference * 0.25)};
 		transform: rotate(0deg);
 	}
 

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

@@ -1,16 +1,18 @@
 import Ripple from './Ripple.vue';
 import { RIPPLE_COLORS } from './Ripple.consts';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Utils/Ripple',
 	component: Ripple,
 } as Meta<typeof Ripple>;
 
-const StoryTemplate: StoryFn<typeof Ripple> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof Ripple> = (args) => ({
 	components: { Ripple },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template:
 		'<ripple :color="color" :disable="disable">' +
 		'<div style="background-color: #ccc; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 50px; width: 100%;">Click me</div>' +

package/lib/js/components/Ripple/Ripple.vue

@@ -11,43 +11,43 @@
 @import '../../../styles/settings/colors/tokens';
 
 .rippleWrapper {
-	&.-color-accent::v-deep .ripple {
+	&.-color-accent:deep(.ripple) {
 		background-color: $color-accent-ripple !important;
 	}
 
-	&.-color-danger::v-deep .ripple {
+	&.-color-danger:deep(.ripple) {
 		background-color: $color-danger-ripple !important;
 	}
 
-	&.-color-default::v-deep .ripple {
+	&.-color-default:deep(.ripple) {
 		background-color: $color-default-ripple !important;
 	}
 
-	&.-color-fail::v-deep .ripple {
+	&.-color-fail:deep(.ripple) {
 		background-color: $color-fail-ripple !important;
 	}
 
-	&.-color-info::v-deep .ripple {
+	&.-color-info:deep(.ripple) {
 		background-color: $color-info-ripple !important;
 	}
 
-	&.-color-inverted::v-deep .ripple {
+	&.-color-inverted:deep(.ripple) {
 		background-color: $color-inverted-ripple !important;
 	}
 
-	&.-color-neutral::v-deep .ripple {
+	&.-color-neutral:deep(.ripple) {
 		background-color: $color-neutral-ripple !important;
 	}
 
-	&.-color-primary::v-deep .ripple {
+	&.-color-primary:deep(.ripple) {
 		background-color: $color-primary-ripple !important;
 	}
 
-	&.-color-success::v-deep .ripple {
+	&.-color-success:deep(.ripple) {
 		background-color: $color-success-ripple !important;
 	}
 
-	&.-color-warning::v-deep .ripple {
+	&.-color-warning:deep(.ripple) {
 		background-color: $color-warning-ripple !important;
 	}
 }

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

@@ -2,16 +2,18 @@ import SectionHeader from './SectionHeader.vue';
 import { SECTION_HEADER_SIZES } from './SectionHeader.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/SectionHeader',
 	component: SectionHeader,
 } as Meta<typeof SectionHeader>;
 
-const StoryTemplate: StoryFn<typeof SectionHeader> = (argTypes, { updateArgs }) => ({
+const StoryTemplate: StoryFn<typeof SectionHeader> = (args, { updateArgs }) => ({
 	components: { SectionHeader },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),

package/lib/js/components/SectionHeader/SectionHeader.vue

@@ -158,6 +158,7 @@ $icons-and-slot-min-height-l: 50px;
 <script lang="ts">
 import { SECTION_HEADER_SIZES } from './SectionHeader.consts';
 import DsIcon, { IconItem, ICONS, ICON_SIZES } from '../Icons/Icon';
+import { toRaw } from 'vue';
 
 export default {
 	name: 'SectionHeader',
@@ -177,7 +178,7 @@ export default {
 			type: Object as () => IconItem,
 			default: null,
 			validator(iconLeft: IconItem) {
-				return Object.values(ICONS).includes(iconLeft);
+				return Object.values(ICONS).includes(toRaw(iconLeft));
 			},
 		},
 		isExpanded: {