@bethinkpl/design-system 25.0.10 → 26.0.0

package/lib/js/components/SelectList/SelectListSectionTitle/SelectListSectionTitle.stories.ts

@@ -1,7 +1,7 @@
 import SelectListSectionTitle from './SelectListSectionTitle.vue';
 
 import SelectList from './../SelectList.vue';
-import { ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/SelectList/SelectListSectionTitle',
@@ -11,26 +11,28 @@ export default {
 const StoryTemplate: StoryFn<typeof SelectListSectionTitle> = (args) => ({
 	components: { SelectList, SelectListSectionTitle },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
-			<select-list>
-				<select-list-section-title :label="label" :is-uppercase="isUppercase" /> 
-			</select-list>`,
+		<select-list>
+			<select-list-section-title :label="label" :is-uppercase="isUppercase" />
+		</select-list>`,
 });
 
 const argTypes = {
 	label: {
-		control: { type: 'text' },
-		defaultValue: 'Select List Section Title',
+		control: 'text',
 	},
 	isUppercase: {
-		control: { type: 'boolean' },
-		defaultValue: true,
+		control: 'boolean',
 	},
 } as ArgTypes;
 export const Interactive = StoryTemplate.bind({});
 
+Interactive.args = {
+	label: 'Select List Section Title',
+	isUppercase: true,
+} as Args;
 Interactive.argTypes = argTypes;
 Interactive.parameters = {
 	design: {

package/lib/js/components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue

@@ -27,7 +27,9 @@
 </style>
 
 <script lang="ts">
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'SelectListSectionTitle',
 	props: {
 		label: {
@@ -39,5 +41,5 @@ export default {
 			default: true,
 		},
 	},
-};
+});
 </script>

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

@@ -3,6 +3,8 @@ import SelectionTile from './SelectionTile.vue';
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import { SELECTION_TILE_STATE, SELECTION_TILE_TYPE } from './SelectionTile.consts';
 import { ICONS } from '../Icons/Icon';
+import { useArgs } from '@storybook/preview-api';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
 	title: 'Components/SelectionTile',
@@ -12,58 +14,64 @@ export default {
 			components: { story },
 			template: "<div style='display: flex; max-width: 300px;'><story /></div>",
 		}),
+		withActions,
 	],
 } as Meta<typeof SelectionTile>;
 
-const StoryTemplate: StoryFn<typeof SelectionTile> = (args, { updateArgs }) => ({
-	components: { SelectionTile },
-	setup() {
-		return { ...args };
-	},
-	methods: {
-		onIsSelectedUpdated(isSelected) {
-			updateArgs({
-				isSelected,
-			});
+const StoryTemplate: StoryFn<typeof SelectionTile> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { SelectionTile },
+		setup() {
+			return args;
 		},
-		onIconClick() {
-			alert('Klik w ikonę');
+		methods: {
+			onIsSelectedUpdated(isSelected) {
+				updateArgs({
+					isSelected,
+				});
+			},
+			onIconClick() {
+				alert('Klik w ikonę');
+			},
 		},
-	},
-	data() {
-		return {
-			ICONS: Object.freeze(ICONS),
-		};
-	},
-	template: `
-		<SelectionTile
-			:title="title"
-			:supporting-text="supportingText"
-			:type="type"
-			:icon="ICONS[icon]"
-			:is-selected="isSelected"
-			:state="state"
-			@icon-click="onIconClick"
-			@update:is-selected="onIsSelectedUpdated"
-		/>`,
-});
+		data() {
+			return {
+				ICONS: Object.freeze(ICONS),
+			};
+		},
+		template: `
+			<SelectionTile
+				:title="title"
+				:supporting-text="supportingText"
+				:type="type"
+				:icon="ICONS[icon]"
+				:is-selected="isSelected"
+				:state="state"
+				@icon-click="onIconClick"
+				@update:is-selected="onIsSelectedUpdated"
+			/>`,
+	};
+};
 
 export const Interactive = StoryTemplate.bind({});
 
 Interactive.argTypes = {
 	type: {
-		control: { type: 'select', options: Object.values(SELECTION_TILE_TYPE) },
-		defaultValue: SELECTION_TILE_TYPE.RADIO_BUTTON,
+		control: 'select',
+		options: Object.values(SELECTION_TILE_TYPE),
 	},
-	title: { control: { type: 'text' } },
-	supportingText: { control: { type: 'text' } },
+	title: { control: 'text' },
+	supportingText: { control: 'text' },
 	icon: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
-	isSelected: { control: { type: 'boolean' } },
+	isSelected: { control: 'boolean' },
 	state: {
-		control: { type: 'select', options: Object.values(SELECTION_TILE_STATE) },
-		defaultValue: SELECTION_TILE_STATE.DEFAULT,
+		control: 'select',
+		options: Object.values(SELECTION_TILE_STATE),
 	},
 } as ArgTypes;
 

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

@@ -1,4 +1,4 @@
-import { Args, Meta, StoryFn } from '@storybook/vue3';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import DsSkeleton from './Skeleton.vue';
 import { SKELETON_RADIUS_SIZES } from './Skeleton.consts';
 
@@ -10,7 +10,7 @@ export default {
 const StoryTemplate: StoryFn<typeof DsSkeleton> = (args) => ({
 	components: { DsSkeleton },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<div style="height: 200px; width: 300px;">
@@ -28,10 +28,10 @@ Interactive.args = {
 
 Interactive.argTypes = {
 	radius: {
-		control: { type: 'select', options: Object.values(SKELETON_RADIUS_SIZES) },
-		defaultValue: SKELETON_RADIUS_SIZES.MEDIUM,
+		control: 'select',
+		options: Object.values(SKELETON_RADIUS_SIZES),
 	},
-};
+} as ArgTypes;
 
 Interactive.parameters = {
 	design: {

package/lib/js/components/Statuses/AccessStatus/AccessStatus.stories.ts

@@ -11,7 +11,7 @@ export default {
 const StoryTemplate: StoryFn<typeof AccessStatus> = (args) => ({
 	components: { AccessStatus },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `<access-status :status="status" />`,
 });
@@ -24,8 +24,8 @@ const args = {
 
 const argTypes = {
 	status: {
-		control: { type: 'select', options: Object.values(COURSE_ACCESS_STATUS) },
-		defaultValue: COURSE_ACCESS_STATUS.ACTIVE,
+		control: 'select',
+		options: Object.values(COURSE_ACCESS_STATUS),
 	},
 } as ArgTypes;
 

package/lib/js/components/Statuses/AccessStatus/AccessStatus.vue

@@ -45,10 +45,11 @@
 </style>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import Icon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
 import { COURSE_ACCESS_STATUS } from '../../../consts/user';
 
-export default {
+export default defineComponent({
 	name: 'AccessStatus',
 	components: {
 		Icon,
@@ -97,5 +98,5 @@ export default {
 			return 'Zakończony';
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Statuses/BlockadeStatus/BlockadeStatus.vue

@@ -24,6 +24,7 @@
 
 	&.-ds-active {
 		color: $color-danger-text;
+
 		#{$self}__icon {
 			color: $color-danger-icon;
 		}
@@ -36,10 +37,11 @@
 </style>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import Icon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
 import { COURSE_BLOCKADE_ACCESS_STATUS } from '../../../consts/user';
 
-export default {
+export default defineComponent({
 	name: 'BlockadeStatus',
 	components: {
 		Icon,
@@ -76,5 +78,5 @@ export default {
 			return 'Blokada zakończona';
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Statuses/BlockadeStatus/BlockedeStatus.stories.ts

@@ -11,7 +11,7 @@ export default {
 const StoryTemplate: StoryFn<typeof BlockadeStatus> = (args) => ({
 	components: { BlockadeStatus },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `<blockade-status :status="status" />`,
 });
@@ -24,8 +24,8 @@ const args = {
 
 const argTypes = {
 	status: {
-		control: { type: 'select', options: Object.values(COURSE_BLOCKADE_ACCESS_STATUS) },
-		defaultValue: COURSE_BLOCKADE_ACCESS_STATUS.ACTIVE,
+		control: 'select',
+		options: Object.values(COURSE_BLOCKADE_ACCESS_STATUS),
 	},
 } as ArgTypes;
 

package/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.stories.ts

@@ -2,28 +2,33 @@ import SurveyQuestionOpenEnded from './SurveyQuestionOpenEnded.vue';
 import { SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { useArgs } from '@storybook/preview-api';
 
 export default {
 	title: 'Components/SurveyQuestions/SurveyQuestionOpenEnded',
 	component: SurveyQuestionOpenEnded,
 } as Meta<typeof SurveyQuestionOpenEnded>;
 
-const StoryTemplate: StoryFn<typeof SurveyQuestionOpenEnded> = (args, { updateArgs }) => ({
-	components: { SurveyQuestionOpenEnded },
-	setup() {
-		return { ...args };
-	},
-	// TODO typing in textarea looses focus
-	template:
-		'<survey-question-open-ended  :title="title" :value="value" :state="state" :placeholder="placeholder" @input="explanationUpdate">' +
-		'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
-		'</survey-question-open-ended>',
-	methods: {
-		explanationUpdate(value) {
-			updateArgs({ value });
+const StoryTemplate: StoryFn<typeof SurveyQuestionOpenEnded> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { SurveyQuestionOpenEnded },
+		setup() {
+			return args;
 		},
-	},
-});
+		// TODO typing in textarea looses focus
+		template:
+			'<survey-question-open-ended  :title="title" :value="value" :state="state" :placeholder="placeholder" @input="explanationUpdate">' +
+			'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
+			'</survey-question-open-ended>',
+		methods: {
+			explanationUpdate(value) {
+				updateArgs({ value });
+			},
+		},
+	};
+};
 
 export const Interactive = StoryTemplate.bind({});
 
@@ -37,8 +42,8 @@ const args = {
 } as Args;
 
 const argTypes = {
-	explanation: { control: { type: 'text' } },
-	state: { control: { type: 'select', options: Object.values(SURVEY_QUESTION_STATES) } },
+	explanation: { control: 'text' },
+	state: { control: 'select', options: Object.values(SURVEY_QUESTION_STATES) },
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

package/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue

@@ -91,7 +91,9 @@ import { SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
 import SurveyQuestionTextarea from '../SurveyQuestionTextarea.vue';
 import { randomString } from '../../../utils/string';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'SurveyQuestionOpenEnded',
 	components: {
 		SurveyQuestionTextarea,
@@ -135,5 +137,5 @@ export default {
 			SURVEY_QUESTION_STATES: Object.freeze(SURVEY_QUESTION_STATES),
 		};
 	},
-};
+});
 </script>

package/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts

@@ -3,30 +3,35 @@ import { SURVEY_TOGGLE_MEANINGS } from '../../SurveyToggle';
 import { SURVEY_QUESTION_SCALE_CONTAINERS, SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { useArgs } from '@storybook/preview-api';
 
 export default {
 	title: 'Components/SurveyQuestions/SurveyQuestionScale',
 	component: SurveyQuestionScale,
 } as Meta<typeof SurveyQuestionScale>;
 
-const StoryTemplate: StoryFn<typeof SurveyQuestionScale> = (args, { updateArgs }) => ({
-	components: { SurveyQuestionScale },
-	setup() {
-		return { ...args };
-	},
-	template:
-		'<survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :state="state" :containers="containers" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
-		'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
-		'</survey-question-scale>',
-	methods: {
-		elaborationUpdate(elaborationValue) {
-			updateArgs({ elaborationValue });
+const StoryTemplate: StoryFn<typeof SurveyQuestionScale> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { SurveyQuestionScale },
+		setup() {
+			return args;
 		},
-		selectedValueUpdate(selectedValue) {
-			updateArgs({ selectedValue });
+		template:
+			'<survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :state="state" :containers="containers" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
+			'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
+			'</survey-question-scale>',
+		methods: {
+			elaborationUpdate(elaborationValue) {
+				updateArgs({ elaborationValue });
+			},
+			selectedValueUpdate(selectedValue) {
+				updateArgs({ selectedValue });
+			},
 		},
-	},
-});
+	};
+};
 
 export const Interactive = StoryTemplate.bind({});
 
@@ -38,6 +43,7 @@ const args = {
 		'<h3 style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3>\n<div>Wyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>',
 	placeholder: 'Wpisz swoją odpowiedź',
 	containers: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
+	selectedValue: null,
 	scaleOptions: [
 		{
 			value: '1',
@@ -70,20 +76,21 @@ const args = {
 			standalone: true,
 		},
 	],
+	state: SURVEY_QUESTION_STATES.DEFAULT,
 } as Args;
 
 const argTypes = {
-	elaborationValue: { control: { type: 'text' } },
+	elaborationValue: { control: 'text' },
 	selectedValue: { control: false },
-	explanation: { control: { type: 'text' } },
+	explanation: { control: 'text' },
 	containers: {
-		control: { type: 'select' },
+		control: 'select',
 		options: Object.values(SURVEY_QUESTION_SCALE_CONTAINERS),
 	},
-	scaleOptions: { control: { type: 'object' } },
+	scaleOptions: { control: 'object' },
 	state: {
-		control: { type: 'select', options: Object.values(SURVEY_QUESTION_STATES) },
-		defaultValue: SURVEY_QUESTION_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(SURVEY_QUESTION_STATES),
 	},
 } as ArgTypes;
 
@@ -110,30 +117,34 @@ const argTypesDisabled = {
 	'select-change': { control: false },
 } as ArgTypes;
 
-const StoryLimitedWidthTemplate: StoryFn<typeof SurveyQuestionScale> = (args, { updateArgs }) => ({
-	components: { SurveyQuestionScale },
-	setup() {
-		return { ...args };
-	},
-	template:
-		'<div style="max-width: 600px"><survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :containers="containers" :state="state" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
-		'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
-		'</survey-question-scale></div>',
-	methods: {
-		elaborationUpdate(elaborationValue) {
-			updateArgs({ elaborationValue });
+const StoryLimitedWidthTemplate: StoryFn<typeof SurveyQuestionScale> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { SurveyQuestionScale },
+		setup() {
+			return args;
 		},
-		selectedValueUpdate(selectedValue) {
-			updateArgs({ selectedValue });
+		template:
+			'<div style="max-width: 600px"><survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :containers="containers" :state="state" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
+			'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
+			'</survey-question-scale></div>',
+		methods: {
+			elaborationUpdate(elaborationValue) {
+				updateArgs({ elaborationValue });
+			},
+			selectedValueUpdate(selectedValue) {
+				updateArgs({ selectedValue });
+			},
 		},
-	},
-});
+	};
+};
 
 export const LimitedWidth = StoryLimitedWidthTemplate.bind({});
 LimitedWidth.argTypes = {
 	...argTypesDisabled,
 	containers: {
-		control: { type: 'select' },
+		control: 'select',
 		options: Object.values(SURVEY_QUESTION_SCALE_CONTAINERS),
 	},
 } as ArgTypes;
@@ -146,6 +157,8 @@ LimitedWidth.args = {
 		'<h3 class="modalHeader" style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3>\n<div>Wyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>',
 	placeholder: 'Wpisz swoją odpowiedź',
 	containers: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
+	state: SURVEY_QUESTION_STATES.DEFAULT,
+	selectedValue: null,
 	scaleOptions: [
 		{
 			value: '1',
@@ -180,34 +193,39 @@ LimitedWidth.args = {
 	],
 } as Args;
 
-const StorySevenOptionsTemplate: StoryFn<typeof SurveyQuestionScale> = (args, { updateArgs }) => ({
-	components: { SurveyQuestionScale },
-	setup() {
-		return { ...args };
-	},
-	data() {
-		return { elaboration: '' };
-	},
-	template:
-		'<survey-question-scale title="title" :scale-options="scaleOptions" elaborationLabel="elaborationLabel" :elaboration-value="elaboration" :selected-value="selectedValue" :containers="containers" @select-change="selectedValueUpdate" />',
-	methods: {
-		selectedValueUpdate(selectedValue) {
-			updateArgs({ selectedValue });
+const StorySevenOptionsTemplate: StoryFn<typeof SurveyQuestionScale> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { SurveyQuestionScale },
+		setup() {
+			return args;
 		},
-	},
-});
+		data() {
+			return { elaboration: '' };
+		},
+		template:
+			'<survey-question-scale title="title" :scale-options="scaleOptions" elaborationLabel="elaborationLabel" :elaboration-value="elaboration" :selected-value="selectedValue" :containers="containers" @select-change="selectedValueUpdate" />',
+		methods: {
+			selectedValueUpdate(selectedValue) {
+				updateArgs({ selectedValue });
+			},
+		},
+	};
+};
 
 export const SevenOptions = StorySevenOptionsTemplate.bind({});
 SevenOptions.argTypes = {
 	...argTypesDisabled,
 	containers: {
-		control: { type: 'select' },
+		control: 'select',
 		options: Object.values(SURVEY_QUESTION_SCALE_CONTAINERS),
 	},
 } as ArgTypes;
 
 SevenOptions.args = {
 	containers: SURVEY_QUESTION_SCALE_CONTAINERS.ONE,
+	selectedValue: null,
 	scaleOptions: [
 		{
 			value: '1',

package/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue

@@ -244,7 +244,8 @@ import SurveyQuestionTextarea from '../';
 import { SurveyQuestionScaleOption } from '../SurveyQuestion.domain';
 import { randomString } from '../../../utils/string';
 
-export default {
+import { defineComponent } from 'vue';
+export default defineComponent({
 	name: 'SurveyQuestionScale',
 	components: {
 		SurveyQuestionTextarea,
@@ -327,5 +328,5 @@ export default {
 			this.$emit('select-change', this.selectedValue === value ? null : value);
 		},
 	},
-};
+});
 </script>

package/lib/js/components/SurveyQuestions/SurveyQuestionTextarea.vue

@@ -34,7 +34,9 @@
 </style>
 
 <script lang="ts">
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'SurveyQuestionTextarea',
 	props: {
 		value: {
@@ -67,5 +69,5 @@ export default {
 			this.$emit('input', evt.target.value);
 		},
 	},
-};
+});
 </script>

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

@@ -16,7 +16,7 @@ export default {
 const StoryTemplate: StoryFn<typeof SurveyToggle> = (args) => ({
 	components: { SurveyToggle },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<div style="background-color:#f6f6f8"><survey-toggle :label="label"  :meaning="meaning" :content-text="contentText" :selected-icon="ICONS[selectedIcon]" :status="status" :state="state" /></div>',
@@ -29,26 +29,33 @@ const StoryTemplate: StoryFn<typeof SurveyToggle> = (args) => ({
 
 export const Interactive = StoryTemplate.bind({});
 
-const args = {} as Args;
+const args = {
+	label: 'label',
+	contentText: '1',
+	meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+	status: SURVEY_TOGGLE_STATUSES.DEFAULT,
+	state: SURVEY_TOGGLE_STATES.DEFAULT,
+	selectedIcon: 'FA_CHECK_SOLID',
+} as Args;
 
 const argTypes = {
-	label: { control: { type: 'text' }, defaultValue: 'label' },
-	contentText: { control: { type: 'text' }, defaultValue: '1' },
+	label: { control: 'text' },
+	contentText: { control: 'text' },
 	meaning: {
-		control: { type: 'select', options: Object.values(SURVEY_TOGGLE_MEANINGS) },
-		defaultValue: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+		control: 'select',
+		options: Object.values(SURVEY_TOGGLE_MEANINGS),
 	},
 	status: {
-		control: { type: 'select', options: Object.values(SURVEY_TOGGLE_STATUSES) },
-		defaultValue: SURVEY_TOGGLE_STATUSES.DEFAULT,
+		control: 'select',
+		options: Object.values(SURVEY_TOGGLE_STATUSES),
 	},
 	state: {
-		control: { type: 'select', options: Object.values(SURVEY_TOGGLE_STATES) },
-		defaultValue: SURVEY_TOGGLE_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(SURVEY_TOGGLE_STATES),
 	},
 	selectedIcon: {
-		control: { type: 'select', options: Object.keys(ICONS) },
-		defaultValue: 'FA_CHECK_SOLID',
+		control: 'select',
+		options: Object.keys(ICONS),
 	},
 } as ArgTypes;