@bethinkpl/design-system 25.0.10 → 26.0.0

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

@@ -14,7 +14,7 @@ export default {
 const StoryTemplate: StoryFn<typeof Modal> = (args) => ({
 	components: { Modal },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' +
@@ -44,7 +44,7 @@ const args = {
 	headerTitleSize: MODAL_HEADER_TITLE_SIZES.MEDIUM,
 	headerTitle: 'Modal Title Accusantium occaecati atque similique gg provident nobis.',
 	headerSubtitle: 'Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.',
-	headerFeatureIcon: 'FA_CIRCLE_EXCLAMATION',
+	headerFeatureIcon: 'FA_CIRCLE_QUESTION',
 	headerFeatureIconColor: FEATURE_ICON_COLOR.NEUTRAL,
 	footerPrimaryButtonText: 'Primary M',
 	footerPrimaryButtonIcon: null,
@@ -60,54 +60,54 @@ const args = {
 
 const argTypes = {
 	size: {
-		control: { type: 'select', options: Object.values(MODAL_SIZES) },
-		defaultValue: MODAL_SIZES.MEDIUM,
+		control: 'select',
+		options: Object.values(MODAL_SIZES),
 	},
-	danger: { control: { type: 'boolean' }, defaultValue: false },
+	danger: { control: 'boolean' },
 	headerTitleSize: {
-		control: { type: 'select', options: Object.values(MODAL_HEADER_TITLE_SIZES) },
-		defaultValue: MODAL_SIZES.MEDIUM,
+		control: 'select',
+		options: Object.values(MODAL_HEADER_TITLE_SIZES),
 	},
-	headerTitle: { control: { type: 'text' } },
-	headerImage: { control: { type: 'text' } },
-	headerSubtitle: { control: { type: 'text' } },
+	headerTitle: { control: 'text' },
+	headerImage: { control: 'text' },
+	headerSubtitle: { control: 'text' },
 	headerFeatureIcon: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: 'FA_CIRCLE_QUESTION',
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	headerFeatureIconColor: {
-		control: { type: 'select', options: Object.values(FEATURE_ICON_COLOR) },
-		defaultValue: FEATURE_ICON_COLOR.NEUTRAL,
+		control: 'select',
+		options: Object.values(FEATURE_ICON_COLOR),
 	},
-	contentCentered: { control: { type: 'boolean' }, defaultValue: false },
-	footerPrimaryButtonText: { control: { type: 'text' } },
+	contentCentered: { control: 'boolean' },
+	footerPrimaryButtonText: { control: 'text' },
 	footerPrimaryButtonIcon: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	footerPrimaryButtonState: {
-		control: { type: 'select', options: Object.values(BUTTON_STATES) },
-		defaultValue: BUTTON_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(BUTTON_STATES),
 	},
-	footerSecondaryButtonText: { control: { type: 'text' } },
+	footerSecondaryButtonText: { control: 'text' },
 	footerSecondaryButtonIcon: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	footerSecondaryButtonState: {
-		control: { type: 'select', options: Object.values(BUTTON_STATES) },
-		defaultValue: BUTTON_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(BUTTON_STATES),
 	},
-	footerTertiaryButtonText: { control: { type: 'text' } },
+	footerTertiaryButtonText: { control: 'text' },
 	footerTertiaryButtonIcon: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: ICONS.FA_CHART_COLUMN,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	footerTertiaryButtonState: {
-		control: { type: 'select', options: Object.values(BUTTON_STATES) },
-		defaultValue: BUTTON_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(BUTTON_STATES),
 	},
-	footerCheckboxText: { control: { type: 'text' } },
+	footerCheckboxText: { control: 'text' },
 	onCloseModal: { action: 'close-modal' },
 	onCheckboxChange: { action: 'checkbox-change' },
 	onPrimaryButtonClick: { action: 'primary-button-click' },

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

@@ -325,9 +325,9 @@ import WnlButton, {
 	BUTTON_TYPES,
 } from '../../Buttons/Button';
 import WnlIconButton, { ICON_BUTTON_COLORS } from '../../Buttons/IconButton';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'Modal',
 	components: { FeatureIcon, WnlButton, WnlIconButton },
 	props: {
@@ -493,5 +493,5 @@ export default {
 			);
 		},
 	},
-};
+});
 </script>

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

@@ -13,7 +13,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ModalDialog> = (args) => ({
 	components: { ModalDialog },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" ' +
@@ -40,7 +40,7 @@ const args = {
 	headerImage: '',
 	headerTitle: 'Modal Title Accusantium occaecati atque similique gg provident nobis.',
 	headerSubtitle: 'Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.',
-	headerFeatureIcon: 'FA_CIRCLE_EXCLAMATION',
+	headerFeatureIcon: 'FA_CIRCLE_QUESTION',
 	headerFeatureIconColor: FEATURE_ICON_COLOR.NEUTRAL,
 	footerPrimaryButtonText: 'Primary M',
 	footerPrimaryButtonIcon: null,
@@ -51,41 +51,41 @@ const args = {
 } as Args;
 
 const argTypes = {
-	danger: { control: { type: 'boolean' }, defaultValue: false },
+	danger: { control: 'boolean' },
 	headerImage: {
-		control: { type: 'text' },
+		control: 'text',
 		table: {
 			type: { summary: 'string' },
 			defaultValue: { summary: 'Hello' },
 		},
 	},
-	headerTitle: { control: { type: 'text' } },
-	headerSubtitle: { control: { type: 'text' } },
+	headerTitle: { control: 'text' },
+	headerSubtitle: { control: 'text' },
 	headerFeatureIcon: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: 'FA_CIRCLE_QUESTION',
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	headerFeatureIconColor: {
-		control: { type: 'select', options: Object.values(FEATURE_ICON_COLOR) },
-		defaultValue: FEATURE_ICON_COLOR.NEUTRAL,
+		control: 'select',
+		options: Object.values(FEATURE_ICON_COLOR),
 	},
-	footerPrimaryButtonText: { control: { type: 'text' } },
+	footerPrimaryButtonText: { control: 'text' },
 	footerPrimaryButtonIcon: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	footerPrimaryButtonState: {
-		control: { type: 'select', options: Object.values(BUTTON_STATES) },
-		defaultValue: BUTTON_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(BUTTON_STATES),
 	},
-	footerSecondaryButtonText: { control: { type: 'text' } },
+	footerSecondaryButtonText: { control: 'text' },
 	footerSecondaryButtonIcon: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	footerSecondaryButtonState: {
-		control: { type: 'select', options: Object.values(BUTTON_STATES) },
-		defaultValue: BUTTON_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(BUTTON_STATES),
 	},
 } as ArgTypes;
 

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

@@ -29,10 +29,10 @@ import DsModal from '../Modal/Modal.vue';
 import { MODAL_HEADER_TITLE_SIZES, MODAL_SIZES } from '../Modal';
 import { ICONS } from '../../Icons/Icon';
 import { FEATURE_ICON_COLOR } from '../../Icons/FeatureIcon';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 import { BUTTON_STATES } from '../../Buttons/Button';
 
-export default {
+export default defineComponent({
 	name: 'ModalDialog',
 	components: { DsModal },
 	props: {
@@ -112,5 +112,5 @@ export default {
 			MODAL_HEADER_TITLE_SIZES: Object.freeze(MODAL_HEADER_TITLE_SIZES),
 		};
 	},
-};
+});
 </script>

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

@@ -11,7 +11,7 @@ export default {
 const StoryTemplate: StoryFn<typeof NumberInCircle> = (args) => ({
 	components: { NumberInCircle },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<number-in-circle :index="index" :color="color" :medium="medium">{{slotText}}</number-in-circle>',
@@ -22,16 +22,16 @@ export const Interactive = StoryTemplate.bind({});
 const args = {
 	slotText: '1',
 	index: 1,
-	color: NUMBER_IN_CIRCLE_COLORS.PRIMARY,
+	color: NUMBER_IN_CIRCLE_COLORS.DEFAULT,
 	medium: false,
 } as Args;
 
 const argTypes = {
 	color: {
-		control: { type: 'select', options: Object.values(NUMBER_IN_CIRCLE_COLORS) },
-		defaultValue: NUMBER_IN_CIRCLE_COLORS.DEFAULT,
+		control: 'select',
+		options: Object.values(NUMBER_IN_CIRCLE_COLORS),
 	},
-	slotText: { control: { type: 'text' } },
+	slotText: { control: 'text' },
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

package/lib/js/components/NumberInCircle/NumberInCircle.vue

@@ -88,7 +88,9 @@
 <script>
 import { NUMBER_IN_CIRCLE_COLORS } from './NumberInCircle.consts';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'NumberInCircle',
 	props: {
 		index: {
@@ -121,5 +123,5 @@ export default {
 			return colorToClassMap[this.color];
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Outline/OutlineDivider/OutlineDivider.stories.ts

@@ -1,5 +1,5 @@
 import OutlineDivider from './OutlineDivider.vue';
-import { ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import { DIVIDER_PROMINENCES, DIVIDER_SIZES } from '../../Divider';
 
 export default {
@@ -10,24 +10,29 @@ export default {
 const StoryTemplate: StoryFn<typeof OutlineDivider> = (args) => ({
 	components: { OutlineDivider },
 	setup() {
-		return { ...args };
+		return args;
 	},
-	template: `<outline-divider :prominence="prominence" :size="size" />`,
+	template: `
+		<outline-divider :prominence="prominence" :size="size" />`,
 });
 
 export const Interactive = StoryTemplate.bind({});
 
 const argTypes = {
 	prominence: {
-		control: { type: 'select', options: Object.values(DIVIDER_PROMINENCES) },
-		defaultValue: DIVIDER_PROMINENCES.DEFAULT,
+		control: 'select',
+		options: Object.values(DIVIDER_PROMINENCES),
 	},
 	size: {
-		control: { type: 'select', options: Object.values(DIVIDER_SIZES) },
-		defaultValue: DIVIDER_SIZES.S,
+		control: 'select',
+		options: Object.values(DIVIDER_SIZES),
 	},
 } as ArgTypes;
 
+Interactive.args = {
+	prominence: DIVIDER_PROMINENCES.DEFAULT,
+	size: DIVIDER_SIZES.S,
+} as Args;
 Interactive.argTypes = argTypes;
 
 Interactive.parameters = {

package/lib/js/components/Outline/OutlineDivider/OutlineDivider.vue

@@ -15,7 +15,9 @@
 <script lang="ts">
 import DsDivider, { DIVIDER_PROMINENCES, DIVIDER_SIZES } from '../../Divider';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'OutlineDivider',
 	components: {
 		DsDivider,
@@ -32,5 +34,5 @@ export default {
 			validator: (value: string) => Object.values(DIVIDER_SIZES).includes(value),
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Outline/OutlineItem/OutlineItem.stories.ts

@@ -16,7 +16,7 @@ export default {
 const StoryTemplate: StoryFn<typeof OutlineItem> = (args) => ({
 	components: { OutlineItem, DsChip },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	data() {
 		return {
@@ -41,60 +41,71 @@ const StoryTemplate: StoryFn<typeof OutlineItem> = (args) => ({
 
 export const Interactive = StoryTemplate.bind({});
 
-const args = {} as Args;
+const args = {
+	additionalText: '',
+	defaultSlot: '10 / 20',
+	labelSlot: 'Outline Item label in slot',
+	size: OUTLINE_ITEM_SIZES.SMALL,
+	backgroundColor: OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL_WEAK,
+	iconLeft: null,
+	iconRight: null,
+	iconRightRotation: null,
+	index: null,
+	label: 'Outline Item label',
+	isLabelUppercase: false,
+	state: OUTLINE_ITEM_STATES.DEFAULT,
+	isSelected: false,
+	isDone: false,
+	hasSelectedIconsColorPrimary: true,
+	isSelectedInteractive: false,
+} as Args;
 
 const argTypes = {
-	defaultSlot: { control: { type: 'text' }, defaultValue: '10 / 20' },
-	labelSlot: { control: { type: 'text' }, defaultValue: 'Outline Item label in slot' },
+	defaultSlot: { control: 'text' },
+	labelSlot: { control: 'text' },
 	size: {
-		control: { type: 'select', options: Object.values(OUTLINE_ITEM_SIZES) },
-		defaultValue: OUTLINE_ITEM_SIZES.SMALL,
+		control: 'select',
+		options: Object.values(OUTLINE_ITEM_SIZES),
 	},
 	backgroundColor: {
-		control: { type: 'select', options: Object.values(OUTLINE_ITEM_BACKGROUND_COLORS) },
-		defaultValue: OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL_WEAK,
+		control: 'select',
+		options: Object.values(OUTLINE_ITEM_BACKGROUND_COLORS),
 	},
 	iconLeft: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	iconRight: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	iconRightRotation: {
-		control: { type: 'select', options: [null, 90, 180, 270] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, 90, 180, 270],
 	},
 	index: {
 		control: { type: 'number' },
-		defaultValue: null,
 	},
-	label: { control: { type: 'text' }, defaultValue: 'Outline Item label' },
+	label: { control: 'text' },
 	isLabelUppercase: {
-		control: { type: 'boolean' },
-		defaultValue: false,
+		control: 'boolean',
 	},
-	additionalText: { control: { type: 'text' }, defaultValue: '' },
+	additionalText: { control: 'text' },
 	state: {
-		control: { type: 'select', options: Object.values(OUTLINE_ITEM_STATES) },
-		defaultValue: OUTLINE_ITEM_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(OUTLINE_ITEM_STATES),
 	},
 	isSelected: {
-		control: { type: 'boolean' },
-		defaultValue: false,
+		control: 'boolean',
 	},
 	isDone: {
-		control: { type: 'boolean' },
-		defaultValue: false,
+		control: 'boolean',
 	},
 	hasSelectedIconsColorPrimary: {
-		control: { type: 'boolean' },
-		defaultValue: true,
+		control: 'boolean',
 	},
 	isSelectedInteractive: {
-		control: { type: 'boolean' },
-		defaultValue: false,
+		control: 'boolean',
 	},
 } as ArgTypes;
 

package/lib/js/components/Outline/OutlineItem/OutlineItem.vue

@@ -216,14 +216,14 @@
 
 <script lang="ts">
 import DsIcon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 import {
 	OUTLINE_ITEM_BACKGROUND_COLORS,
 	OUTLINE_ITEM_SIZES,
 	OUTLINE_ITEM_STATES,
 } from './OutlineItem.consts';
 
-export default {
+export default defineComponent({
 	name: 'OutlineItem',
 	components: {
 		DsIcon,
@@ -317,5 +317,5 @@ export default {
 			return this.state === OUTLINE_ITEM_STATES.DISABLED;
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Outline/OutlineSectionHeader/OutlineSectionHeader.stories.ts

@@ -1,5 +1,5 @@
 import OutlineSectionHeader from './OutlineSectionHeader.vue';
-import { ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/Outline/OutlineSectionHeader',
@@ -9,7 +9,7 @@ export default {
 const StoryTemplate: StoryFn<typeof OutlineSectionHeader> = (args) => ({
 	components: { OutlineSectionHeader },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `<outline-section-header :title="title" />`,
 });
@@ -18,12 +18,14 @@ export const Interactive = StoryTemplate.bind({});
 
 const argTypes = {
 	title: {
-		control: { type: 'text' },
-		defaultValue: 'section header all caps',
+		control: 'text',
 	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;
+Interactive.args = {
+	title: 'section header all caps',
+} as Args;
 
 Interactive.parameters = {
 	design: {

package/lib/js/components/Outline/OutlineSectionHeader/OutlineSectionHeader.vue

@@ -16,7 +16,9 @@
 </style>
 
 <script lang="ts">
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'OutlineSectionHeader',
 	props: {
 		title: {
@@ -24,5 +26,5 @@ export default {
 			required: true,
 		},
 	},
-};
+});
 </script>

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

@@ -1,42 +1,55 @@
 import Pagination from './Pagination.vue';
+import { useArgs } from '@storybook/preview-api';
 
-import { ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/Pagination',
 	component: Pagination,
 } as Meta<typeof Pagination>;
 
-const StoryTemplate: StoryFn<typeof Pagination> = (args, { updateArgs }) => ({
-	components: { Pagination },
-	setup() {
-		return { args };
-	},
-	methods: {
-		onChangePage(currentPage) {
-			updateArgs({ currentPage });
+const StoryTemplate: StoryFn<typeof Pagination> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { Pagination },
+		setup() {
+			return { args };
 		},
-	},
-	template: `
+		methods: {
+			onChangePage(currentPage) {
+				updateArgs({ currentPage });
+			},
+		},
+		template: `
 			<Pagination v-bind=args @change-page="onChangePage">
-			<template #accessory>
-				<div v-if="args.accessory" v-html="args.accessory" />
-			</template>
+				<template #accessory>
+					<div v-if="args.accessory" v-html="args.accessory" />
+				</template>
 			</Pagination>`,
-});
+	};
+};
 
 export const Interactive = StoryTemplate.bind({});
 
 const argTypes = {
-	currentPage: { control: { type: 'number', min: 1 }, defaultValue: 1 },
-	forceCompact: { control: { type: 'boolean' }, defaultValue: false },
-	isCentered: { control: { type: 'boolean' }, defaultValue: false },
-	itemsPerPage: { control: { type: 'number', min: 1 }, defaultValue: 30 },
-	itemsTotalAmount: { control: { type: 'number', min: 1 }, defaultValue: 600 },
-	accessory: { control: { type: 'text' }, defaultValue: 'accessory slot' },
+	currentPage: { control: { type: 'number', min: 1 } },
+	forceCompact: { control: 'boolean' },
+	isCentered: { control: 'boolean' },
+	itemsPerPage: { control: { type: 'number', min: 1 } },
+	itemsTotalAmount: { control: { type: 'number', min: 1 } },
+	accessory: { control: 'text' },
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;
+Interactive.args = {
+	currentPage: 1,
+	forceCompact: false,
+	isCentered: false,
+	itemsPerPage: 30,
+	itemsTotalAmount: 600,
+	accessory: 'accessory slot',
+} as Args;
 
 Interactive.parameters = {
 	design: {

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

@@ -270,12 +270,13 @@ import Dropdown from '../Dropdown/Dropdown.vue';
 
 import SelectList from '../SelectList/SelectList.vue';
 import SelectListItem from '../SelectList/SelectListItem/SelectListItem.vue';
+import { defineComponent } from 'vue';
 
 const MAX_NAVIGATION_ITEMS = 7;
 const ELLIPSIS_FILL = 'ellipsis';
 const FIRST_PAGE_NUMBER = 1;
 
-export default {
+export default defineComponent({
 	name: 'Pagination',
 	components: { IconButton, Dropdown, SelectListItem, SelectList },
 	props: {
@@ -412,5 +413,5 @@ export default {
 			close();
 		},
 	},
-};
+});
 </script>

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

@@ -16,7 +16,7 @@ export default {
 const StoryTemplate: StoryFn<typeof PopOver> = (args) => ({
 	components: { PopOver },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<div style="display: flex; align-items: center; justify-content: center; height: 800px; background: var(--raw-gray-50);">' +
@@ -47,20 +47,20 @@ Interactive.args = {
 
 const argTypes = {
 	size: {
-		control: { type: 'select', options: Object.values(POP_OVER_SIZES) },
-		defaultValue: POP_OVER_SIZES.SMALL,
+		control: 'select',
+		options: Object.values(POP_OVER_SIZES),
 	},
 	placement: {
-		control: { type: 'select', options: Object.values(POP_OVER_PLACEMENTS) },
-		defaultValue: POP_OVER_PLACEMENTS.BOTTOM,
+		control: 'select',
+		options: Object.values(POP_OVER_PLACEMENTS),
 	},
 	color: {
-		control: { type: 'select', options: Object.values(POP_OVER_COLORS) },
-		defaultValue: POP_OVER_COLORS.DEFAULT,
+		control: 'select',
+		options: Object.values(POP_OVER_COLORS),
 	},
 	triggerAction: {
-		control: { type: 'select', options: Object.values(POP_OVER_TRIGGER_ACTIONS) },
-		defaultValue: POP_OVER_TRIGGER_ACTIONS.CLICK,
+		control: 'select',
+		options: Object.values(POP_OVER_TRIGGER_ACTIONS),
 	},
 } as ArgTypes;