@bethinkpl/design-system 15.2.1 → 16.0.1

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

@@ -5,7 +5,7 @@ import {
 } from './SelectListItem/SelectListItem.consts';
 import { ICONS } from '../Icons/Icon';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import { Meta, StoryFn } from '@storybook/vue3';
 import SelectListItem from './SelectListItem/SelectListItem.vue';
 import SelectListItemDivider from './SelectListItemDivider/SelectListItemDivider.vue';
 import SelectListItemToggle from './SelectListItemToggle/SelectListItemToggle.vue';
@@ -15,17 +15,25 @@ export default {
 	component: SelectList,
 } as Meta<typeof SelectList>;
 
-export const Mix: StoryFn<typeof SelectList> = (argTypes) => ({
+export const Mix: StoryFn<typeof SelectList> = (args) => ({
 	components: { SelectList, SelectListItem, SelectListItemDivider, SelectListItemToggle },
-	props: Object.keys(argTypes),
-	template: `<select-list>
-		<select-list-item label="Small" :size="SELECT_LIST_ITEM_SIZES.SMALL" :selection-mode="SELECT_LIST_ITEM_SELECTION_MODE.TOGGLE" />
-		<select-list-item :icon-left="ICONS.FA_BAN" label="Medium" :size="SELECT_LIST_ITEM_SIZES.MEDIUM" is-selected :selection-mode="SELECT_LIST_ITEM_SELECTION_MODE.SELECT_ONLY" />
-		<select-list-item-divider />
-		<select-list-item-toggle :icon-off="ICONS.FA_STAR" :icon-on="ICONS.FA_STAR_SOLID" is-on label-on="Usuń z kolekcji" label-off="Dodaj do kolekcji" />
-		<select-list-item-toggle :icon-off="ICONS.FA_STAR" :icon-on="ICONS.FA_STAR_SOLID" label-on="Usuń z kolekcji" label-off="Dodaj do kolekcji" />
-		<select-list-item-toggle :icon-off="ICONS.FA_STAR" :icon-on="ICONS.FA_STAR_SOLID" is-loading label-on="Usuń z kolekcji" label-off="Dodaj do kolekcji" />
-	</select-list>`,
+	setup() {
+		return { ...args };
+	},
+	template: `
+			<select-list>
+			<select-list-item label="Small" :size="SELECT_LIST_ITEM_SIZES.SMALL"
+												:selection-mode="SELECT_LIST_ITEM_SELECTION_MODE.TOGGLE" />
+			<select-list-item :icon-left="ICONS.FA_BAN" label="Medium" :size="SELECT_LIST_ITEM_SIZES.MEDIUM" is-selected
+												:selection-mode="SELECT_LIST_ITEM_SELECTION_MODE.SELECT_ONLY" />
+			<select-list-item-divider />
+			<select-list-item-toggle :icon-off="ICONS.FA_STAR" :icon-on="ICONS.FA_STAR_SOLID" is-on label-on="Usuń z kolekcji"
+															 label-off="Dodaj do kolekcji" />
+			<select-list-item-toggle :icon-off="ICONS.FA_STAR" :icon-on="ICONS.FA_STAR_SOLID" label-on="Usuń z kolekcji"
+															 label-off="Dodaj do kolekcji" />
+			<select-list-item-toggle :icon-off="ICONS.FA_STAR" :icon-on="ICONS.FA_STAR_SOLID" is-loading
+															 label-on="Usuń z kolekcji" label-off="Dodaj do kolekcji" />
+			</select-list>`,
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),
@@ -45,18 +53,19 @@ Mix.parameters = {
 export const SelectableList: StoryFn<typeof SelectList> = (argTypes) => ({
 	components: { SelectList, SelectListItem },
 	props: Object.keys(argTypes),
-	template: `<select-list>
-		<select-list-item
-			:is-selected="selected === 0"
-			label="Short text"
-			@click.native="selected = 0"
-		/>
-		<select-list-item
-			:is-selected="selected === 1"
-			label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada commodo diam, a venenatis ipsum. Praesent vitae bibendum dolor."
-			@click.native="selected = 1"
-		/>
-	</select-list>`,
+	template: `
+			<select-list>
+			<select-list-item
+					:is-selected="selected === 0"
+					label="Short text"
+					@click.native="selected = 0"
+			/>
+			<select-list-item
+					:is-selected="selected === 1"
+					label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada commodo diam, a venenatis ipsum. Praesent vitae bibendum dolor."
+					@click.native="selected = 1"
+			/>
+			</select-list>`,
 	data() {
 		return {
 			selected: 0,

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

@@ -1,7 +1,7 @@
 import SelectListItem from './SelectListItem.vue';
 import { ICONS } from '../../Icons/Icon';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import {
 	SELECT_LIST_ITEM_STATES,
 	SELECT_LIST_ITEM_SIZES,
@@ -13,19 +13,21 @@ export default {
 	component: SelectListItem,
 } as Meta<typeof SelectListItem>;
 
-const StoryTemplate: StoryFn<typeof SelectListItem> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof SelectListItem> = (args) => ({
 	components: { SelectListItem },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template: `
-		<select-list-item
-			:icon-left="ICONS[iconLeft]"
-			:label="label"
-			:is-selected="isSelected"
-			:selection-mode="selectionMode"
-			:size="size"
-			:state="state"
-		/>
-		`,
+			<select-list-item
+					:icon-left="ICONS[iconLeft]"
+					:label="label"
+					:is-selected="isSelected"
+					:selection-mode="selectionMode"
+					:size="size"
+					:state="state"
+			/>
+    `,
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),

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

@@ -81,7 +81,7 @@
 		@include label-xl-default-regular;
 	}
 
-	&::v-deep .ripple {
+	&:deep(.ripple) {
 		background-color: $color-neutral-ripple !important;
 	}
 
@@ -119,6 +119,7 @@ import {
 	SELECT_LIST_ITEM_SELECTION_MODE,
 } from './SelectListItem.consts';
 import DsIcon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
+import { toRaw } from 'vue';
 
 export default {
 	name: 'SelectListItem',
@@ -133,7 +134,7 @@ export default {
 			type: Object,
 			default: null,
 			validator(icon) {
-				return Object.values(ICONS).includes(icon);
+				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
 		isSelected: {

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

@@ -1,6 +1,6 @@
 import SelectListItemDivider from './SelectListItemDivider.vue';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import { Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/SelectList/SelectListItemDivider',
@@ -9,7 +9,8 @@ export default {
 
 const StoryTemplate: StoryFn<typeof SelectListItemDivider> = () => ({
 	components: { SelectListItemDivider },
-	template: `<select-list-item-divider />`,
+	template: `
+			<select-list-item-divider />`,
 });
 
 export const Static = StoryTemplate.bind({});

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

@@ -1,7 +1,7 @@
 import SelectListItemToggle from './SelectListItemToggle.vue';
 import { ICONS } from '../../Icons/Icon';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import {
 	SELECT_LIST_ITEM_SIZES,
 	SELECT_LIST_ITEM_STATES,
@@ -12,21 +12,23 @@ export default {
 	component: SelectListItemToggle,
 } as Meta<typeof SelectListItemToggle>;
 
-const StoryTemplate: StoryFn<typeof SelectListItemToggle> = (argTypes, { updateArgs }) => ({
+const StoryTemplate: StoryFn<typeof SelectListItemToggle> = (args, { updateArgs }) => ({
 	components: { SelectListItemToggle },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template: `
-		<select-list-item-toggle
-			:icon-off="ICONS[iconOff]"
-			:icon-on="ICONS[iconOn]"
-			:is-on="isOn"
-			:label-off="labelOff"
-			:label-on="labelOn"
-			:size="size"
-			:state="state"
-			@click.native="onClick"
-		/>
-		`,
+			<select-list-item-toggle
+					:icon-off="ICONS[iconOff]"
+					:icon-on="ICONS[iconOn]"
+					:is-on="isOn"
+					:label-off="labelOff"
+					:label-on="labelOn"
+					:size="size"
+					:state="state"
+					@click.native="onClick"
+			/>
+    `,
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),

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

@@ -17,6 +17,7 @@ import {
 } from '../SelectListItem/SelectListItem.consts';
 import { IconItem, ICONS } from '../../Icons/Icon';
 import SelectListItem from '../SelectListItem/SelectListItem.vue';
+import { toRaw } from 'vue';
 
 export default {
 	name: 'SelectListItemToggle',
@@ -28,14 +29,14 @@ export default {
 			type: Object,
 			default: null,
 			validator(icon) {
-				return Object.values(ICONS).includes(icon);
+				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
 		iconOn: {
 			type: Object,
 			default: null,
 			validator(icon) {
-				return Object.values(ICONS).includes(icon);
+				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
 		isOn: {

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

@@ -1,20 +1,16 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 import AccessStatus from './AccessStatus.vue';
 import { COURSE_ACCESS_STATUS } from '../../../consts/user';
 import { ICONS } from '../../Icons/Icon';
+import Icon from '../../Icons/Icon/Icon.vue';
 
 describe('AccessStatus', () => {
 	const createComponent = (status) => {
-		const localVue = createLocalVue();
-
 		return shallowMount(AccessStatus, {
-			localVue,
-			mocks: {},
-			propsData: {
+			props: {
 				status,
 			},
-			stubs: {},
 		});
 	};
 
@@ -43,6 +39,6 @@ describe('AccessStatus', () => {
 		const component = createComponent(status);
 
 		expect(component.text()).toBe(expectedText);
-		expect(component.find('icon-stub').props().icon).toBe(expectedIcon);
+		expect(component.findComponent(Icon).props().icon).toBe(expectedIcon);
 	});
 });

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

@@ -1,16 +1,18 @@
 import AccessStatus from './AccessStatus.vue';
 import { COURSE_ACCESS_STATUS } from '../../../consts/user';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/Statuses/AccessStatus',
 	component: AccessStatus,
 } as Meta<typeof AccessStatus>;
 
-const StoryTemplate: StoryFn<typeof AccessStatus> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof AccessStatus> = (args) => ({
 	components: { AccessStatus },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template: `<access-status :status="status" />`,
 });
 

package/lib/js/components/Statuses/BlockadeStatus/BlockadeStatus.spec.ts

@@ -1,20 +1,16 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 import BlockadeStatus from './BlockadeStatus.vue';
 import { COURSE_ACCESS_STATUS } from '../../../consts/user';
 import { ICONS } from '../../Icons/Icon';
+import Icon from '../../Icons/Icon/Icon.vue';
 
 describe('BlockadeStatus', () => {
 	const createComponent = (status) => {
-		const localVue = createLocalVue();
-
 		return shallowMount(BlockadeStatus, {
-			localVue,
-			mocks: {},
-			propsData: {
+			props: {
 				status,
 			},
-			stubs: {},
 		});
 	};
 
@@ -33,6 +29,6 @@ describe('BlockadeStatus', () => {
 		const component = createComponent(status);
 
 		expect(component.text()).toBe(expectedText);
-		expect(component.find('icon-stub').props().icon).toBe(expectedIcon);
+		expect(component.findComponent(Icon).props().icon).toBe(expectedIcon);
 	});
 });

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

@@ -1,16 +1,18 @@
 import BlockadeStatus from './BlockadeStatus.vue';
 import { COURSE_BLOCKADE_ACCESS_STATUS } from '../../../consts/user';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/Statuses/BlockadeStatus',
 	component: BlockadeStatus,
 } as Meta<typeof BlockadeStatus>;
 
-const StoryTemplate: StoryFn<typeof BlockadeStatus> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof BlockadeStatus> = (args) => ({
 	components: { BlockadeStatus },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template: `<blockade-status :status="status" />`,
 });
 

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

@@ -1,22 +1,22 @@
 import SurveyQuestionOpenEnded from './SurveyQuestionOpenEnded.vue';
 import { SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/SurveyQuestions/SurveyQuestionOpenEnded',
 	component: SurveyQuestionOpenEnded,
 } as Meta<typeof SurveyQuestionOpenEnded>;
 
-const StoryTemplate: StoryFn<typeof SurveyQuestionOpenEnded> = (argTypes, { updateArgs }) => ({
+const StoryTemplate: StoryFn<typeof SurveyQuestionOpenEnded> = (args, { updateArgs }) => ({
 	components: { SurveyQuestionOpenEnded },
-	props: Object.keys(argTypes),
 	setup() {
-		return { args };
+		return { ...args };
 	},
+	// TODO typing in textarea looses focus
 	template:
 		'<survey-question-open-ended  :title="title" :value="value" :state="state" :placeholder="placeholder" @input="explanationUpdate">' +
-		'<div v-if="explanation" slot="explanation" v-html="explanation" />' +
+		'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
 		'</survey-question-open-ended>',
 	methods: {
 		explanationUpdate(value) {

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

@@ -7,7 +7,7 @@
 			<slot name="explanation" />
 			<template #footer>
 				<div>
-					<ds-button :type="BUTTON_TYPES.OUTLINED" @click.native="showModal = false">
+					<ds-button :type="BUTTON_TYPES.OUTLINED" @click="showModal = false">
 						OK, rozumiem
 					</ds-button>
 				</div>
@@ -26,7 +26,7 @@
 						:icon="ICONS.FA_CIRCLE_QUESTION"
 						:size="ICON_SIZES.MEDIUM"
 						:touchable="false"
-						@click.native="showModal = true"
+						@click="showModal = true"
 					/>
 				</div>
 				<div class="surveyQuestionOpenEnded__content">
@@ -121,6 +121,7 @@ export default {
 			},
 		},
 	},
+	emits: ['input'],
 	data() {
 		return {
 			showModal: false,

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

@@ -1,4 +1,4 @@
-import { createLocalVue, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 
 import SurveyQuestionScale from './SurveyQuestionScale.vue';
 import { SURVEY_TOGGLE_MEANINGS } from '../../SurveyToggle';
@@ -9,24 +9,18 @@ describe('SurveyQuestionScale', () => {
 		elaborationLabel = '',
 		elaborationValue = '',
 		title = '',
-		content = '',
-		scaleOptions = [] as Array<unknown>,
+		scaleOptions = [] as Array<SurveyQuestionScaleOption>,
 		explanation = '',
 	} = {}) => {
-		const localVue = createLocalVue();
-
 		return mount(SurveyQuestionScale, {
-			localVue,
-			mocks: {},
-			propsData: {
-				content,
+			props: {
 				scaleOptions,
 				title,
 				elaborationLabel,
 				elaborationValue,
-			},
+			} as any,
 			slots: {
-				explanation,
+				...(explanation !== '' && { explanation }),
 			},
 		});
 	};
@@ -36,19 +30,16 @@ describe('SurveyQuestionScale', () => {
 			value: '1',
 			label: 'Nie zgadzam się',
 			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-			content: '1',
 		},
 		{
 			value: '2',
 			label: 'Trochę się nie zgadzam',
 			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-			content: '2',
 		},
 		{
 			value: '3',
 			label: 'Trochę się zgadzam',
 			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-			content: '3',
 		},
 		{
 			value: '4',

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

@@ -2,27 +2,29 @@ import SurveyQuestionScale from './SurveyQuestionScale.vue';
 import { SURVEY_TOGGLE_MEANINGS } from '../../SurveyToggle';
 import { SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/SurveyQuestions/SurveyQuestionScale',
 	component: SurveyQuestionScale,
 } as Meta<typeof SurveyQuestionScale>;
 
-const StoryTemplate: StoryFn<typeof SurveyQuestionScale> = (argTypes, { updateArgs }) => ({
+const StoryTemplate: StoryFn<typeof SurveyQuestionScale> = (args, { updateArgs }) => ({
 	components: { SurveyQuestionScale },
-	props: Object.keys(argTypes),
-	data() {
-		return { selectedValue: null };
+	setup() {
+		return { ...args };
 	},
 	template:
-		'<survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :state="state" @select-change="selectedValue = $event" @elaboration-change="elaborationUpdate">' +
-		'<div v-if="explanation" slot="explanation" v-html="explanation" />' +
+		'<survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :state="state" @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 });
+		},
 	},
 });
 
@@ -71,8 +73,8 @@ const args = {
 
 const argTypes = {
 	elaborationValue: { control: { type: 'text' } },
-	explanation: { control: { type: 'text' } },
 	selectedValue: { control: false },
+	explanation: { control: { type: 'text' } },
 	scaleOptions: { control: { type: 'object' } },
 	state: {
 		control: { type: 'select', options: Object.values(SURVEY_QUESTION_STATES) },
@@ -103,23 +105,22 @@ const argTypesDisabled = {
 	'select-change': { control: false },
 } as ArgTypes;
 
-const StoryLimitedWidthTemplate: StoryFn<typeof SurveyQuestionScale> = (
-	argTypes,
-	{ updateArgs },
-) => ({
+const StoryLimitedWidthTemplate: StoryFn<typeof SurveyQuestionScale> = (args, { updateArgs }) => ({
 	components: { SurveyQuestionScale },
-	props: Object.keys(argTypes),
-	data() {
-		return { selectedValue: null };
+	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" :state="state" @select-change="selectedValue = $event" @elaboration-change="elaborationUpdate">' +
-		'<div v-if="explanation" slot="explanation" v-html="explanation" />' +
+		'<div style="max-width: 600px"><survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :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 });
+		},
 	},
 });
 
@@ -167,11 +168,13 @@ LimitedWidth.args = {
 	],
 } as Args;
 
-const StorySevenOptionsTemplate: StoryFn<typeof SurveyQuestionScale> = (argTypes) => ({
+const StorySevenOptionsTemplate: StoryFn<typeof SurveyQuestionScale> = (args, { updateArgs }) => ({
 	components: { SurveyQuestionScale },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	data() {
-		return { selectedValue: '', elaboration: '' };
+		return { elaboration: '' };
 	},
 	created() {
 		this.scaleOptions = [
@@ -220,7 +223,12 @@ const StorySevenOptionsTemplate: StoryFn<typeof SurveyQuestionScale> = (argTypes
 		];
 	},
 	template:
-		'<survey-question-scale title="title" :scale-options="scaleOptions" elaborationLabel="elaborationLabel" :elaboration-value="elaboration" :selected-value="selectedValue" @select-change="selectedValue = $event" />',
+		'<survey-question-scale title="title" :scale-options="scaleOptions" elaborationLabel="elaborationLabel" :elaboration-value="elaboration" :selected-value="selectedValue" @select-change="selectedValueUpdate" />',
+	methods: {
+		selectedValueUpdate(selectedValue) {
+			updateArgs({ selectedValue });
+		},
+	},
 });
 
 export const SevenOptions = StorySevenOptionsTemplate.bind({});

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

@@ -4,7 +4,7 @@
 			<slot name="explanation" />
 			<template #footer>
 				<div>
-					<ds-button :type="BUTTON_TYPES.OUTLINED" @click.native="showModal = false">
+					<ds-button :type="BUTTON_TYPES.OUTLINED" @click="showModal = false">
 						OK, rozumiem
 					</ds-button>
 				</div>
@@ -21,20 +21,19 @@
 						:icon="ICONS.FA_CIRCLE_QUESTION"
 						:size="ICON_SIZES.MEDIUM"
 						:touchable="false"
-						@click.native="showModal = true"
+						@click="showModal = true"
 					/>
 				</div>
 				<div class="surveyQuestionScale__content">
-					<template v-for="(option, index) in scaleOptions">
+					<template
+						v-for="(option, index) in scaleOptions"
+						:key="`surveyQuestionScale-${index}`"
+					>
 						<div
 							v-if="option.standalone"
-							:key="`surveyQuestionScale__toggleSeparator-${index}`"
 							class="surveyQuestionScale__toggleSeparator"
 						/>
-						<div
-							:key="`surveyQuestionScale__toggle${index}`"
-							class="surveyQuestionScale__toggle"
-						>
+						<div class="surveyQuestionScale__toggle">
 							<survey-toggle
 								:meaning="option.meaning"
 								:content-text="option.content"
@@ -159,8 +158,6 @@
 </style>
 
 <script lang="ts">
-import { Prop } from 'vue/types/options';
-
 import DsCard from '../../Cards/Card';
 import IconButton from '../../Buttons/IconButton';
 import { ICON_SIZES, ICONS } from '../../Icons/Icon';
@@ -200,7 +197,7 @@ export default {
 			},
 		},
 		scaleOptions: {
-			type: Array as Prop<Array<SurveyQuestionScaleOption>>,
+			type: Array as () => Array<SurveyQuestionScaleOption>,
 			required: true,
 			validator(scaleOptions) {
 				return scaleOptions.every((option) => typeof option === 'object');

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

@@ -50,6 +50,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['input'],
 	watch: {
 		value() {
 			// we want to update height of textarea based on content that is inside

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

@@ -1,4 +1,4 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 import SurveyToggle from './SurveyToggle.vue';
 import {
@@ -15,19 +15,14 @@ describe('SurveyToggle', () => {
 		state = SURVEY_TOGGLE_STATES.DEFAULT,
 		status = SURVEY_TOGGLE_STATUSES.DEFAULT as typeof SURVEY_TOGGLE_STATUSES[keyof typeof SURVEY_TOGGLE_STATUSES], // TODO: make an util
 	} = {}) => {
-		const localVue = createLocalVue();
-
 		return shallowMount(SurveyToggle, {
-			localVue,
-			mocks: {},
-			propsData: {
+			props: {
 				label,
 				color,
 				contentText,
 				state,
 				status,
-			},
-			stubs: {},
+			} as any,
 		});
 	};