From 31eaba9cd768a4f5673d4861f61bde77fb93db11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damian=20J=C3=B3=C5=BAwiak?= <damian.jozwiak@bethink.pl>
Date: Mon, 31 Oct 2022 13:32:05 +0100
Subject: [PATCH 1/4] IT-4439 | Revert old slot syntax for popperjs

---
 lib/js/components/Dropdown/Dropdown.stories.mdx | 2 +-
 lib/js/components/Dropdown/Dropdown.vue         | 6 +++---
 lib/js/components/PopOver/PopOver.vue           | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/lib/js/components/Dropdown/Dropdown.stories.mdx b/lib/js/components/Dropdown/Dropdown.stories.mdx
index 1493ad37e..5ba4b95cc 100644
--- a/lib/js/components/Dropdown/Dropdown.stories.mdx
+++ b/lib/js/components/Dropdown/Dropdown.stories.mdx
@@ -79,7 +79,7 @@ import { ICONS } from '../Icon';
 			template:
 				'<div style="position: relative">' +
 				'<dropdown :trigger-action="triggerAction" :force-show="forceShow" :same-width="sameWidth">' +
-				'<span slot="reference">Dropdown entry point</span>' +
+				'<template #reference><span>Dropdown entry point</span></template>' +
 				'<template v-slot="{ close }">' +
 				'<select-list v-model="value" :items="items" :size="SELECT_LIST_SIZES.MEDIUM" @input="close" />' +
 				'</template>' +
diff --git a/lib/js/components/Dropdown/Dropdown.vue b/lib/js/components/Dropdown/Dropdown.vue
index bf8d02102..261f371f1 100644
--- a/lib/js/components/Dropdown/Dropdown.vue
+++ b/lib/js/components/Dropdown/Dropdown.vue
@@ -16,9 +16,9 @@
 			<slot :close="close" />
 		</div>
 
-		<template #reference>
-			<slot name="reference" />
-		</template>
+		<!-- TODO IT-4909 -->
+		<!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
+		<slot slot="reference" name="reference" />
 	</vue-popper>
 </template>
 
diff --git a/lib/js/components/PopOver/PopOver.vue b/lib/js/components/PopOver/PopOver.vue
index d00783d11..1aaf480c2 100644
--- a/lib/js/components/PopOver/PopOver.vue
+++ b/lib/js/components/PopOver/PopOver.vue
@@ -29,9 +29,9 @@
 			</ds-button>
 		</div>
 
-		<template #reference>
-			<slot name="reference" />
-		</template>
+		<!-- TODO IT-4909 -->
+		<!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
+		<slot slot="reference" name="reference" />
 	</vue-popper>
 </template>
 

From a1ed77b30d3c307a0957602ff296cf6bd907094e Mon Sep 17 00:00:00 2001
From: rogatty <7030884+rogatty@users.noreply.github.com>
Date: Wed, 2 Nov 2022 11:00:15 +0100
Subject: [PATCH 2/4] IT-4439 | migrate dropdown story to TS

---
 .../components/Dropdown/Dropdown.stories.mdx  | 94 -------------------
 .../components/Dropdown/Dropdown.stories.ts   | 94 +++++++++++++++++++
 2 files changed, 94 insertions(+), 94 deletions(-)
 delete mode 100644 lib/js/components/Dropdown/Dropdown.stories.mdx
 create mode 100644 lib/js/components/Dropdown/Dropdown.stories.ts

diff --git a/lib/js/components/Dropdown/Dropdown.stories.mdx b/lib/js/components/Dropdown/Dropdown.stories.mdx
deleted file mode 100644
index 5ba4b95cc..000000000
--- a/lib/js/components/Dropdown/Dropdown.stories.mdx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Meta, Story, Props } from '@storybook/addon-docs';
-import Dropdown from './Dropdown';
-import { DROPDOWN_TRIGGER_ACTIONS } from './Dropdown.consts';
-import SelectList, { SELECT_LIST_SIZES } from '../SelectList';
-import { ICONS } from '../Icon';
-
-<Meta title="components/Dropdown" component={Dropdown} />
-
-# Dropdown
-
-<Story
-	name="interactive"
-	parameters={{
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=4010%3A69857',
-		},
-	}}
-	argTypes={{
-		triggerAction: {
-			control: { type: 'select', options: Object.values(DROPDOWN_TRIGGER_ACTIONS) },
-			defaultValue: DROPDOWN_TRIGGER_ACTIONS.CLICK,
-		},
-	}}
-	args={{
-		triggerAction: DROPDOWN_TRIGGER_ACTIONS.CLICK,
-		forceShow: false,
-		sameWidth: false,
-	}}
->
-	{(args) => {
-		return {
-			components: { Dropdown, SelectList },
-			props: Object.keys(args),
-			data() {
-				return {
-					items: [
-						{
-							type: 'text',
-							label: 'Wróć do listy poleceń',
-							value: 'go-back',
-							icon: null,
-						},
-						{
-							type: 'divider',
-						},
-						{
-							type: 'text',
-							label: 'POLECENIE 1 / 3',
-							value: 'part-1',
-							icon: ICONS.FA_CIRCLE,
-						},
-						{
-							type: 'text',
-							label: 'POLECENIE 2 / 3',
-							value: 'part-2',
-							icon: ICONS.FA_CIRCLE,
-						},
-						{
-							type: 'text',
-							label: 'POLECENIE 3 / 3',
-							value: 'part-3',
-							icon: ICONS.FA_CIRCLE_CHECK,
-						},
-						{
-							type: 'divider',
-						},
-						{
-							type: 'text',
-							label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
-							value: 'lipsum',
-							icon: null,
-						},
-					],
-					value: 'part-2',
-					SELECT_LIST_SIZES: Object.freeze(SELECT_LIST_SIZES),
-				};
-			},
-			template:
-				'<div style="position: relative">' +
-				'<dropdown :trigger-action="triggerAction" :force-show="forceShow" :same-width="sameWidth">' +
-				'<template #reference><span>Dropdown entry point</span></template>' +
-				'<template v-slot="{ close }">' +
-				'<select-list v-model="value" :items="items" :size="SELECT_LIST_SIZES.MEDIUM" @input="close" />' +
-				'</template>' +
-				'</dropdown>' +
-				'</div>',
-		};
-	}}
-</Story>
-
-## Props
-
-<Props of={Dropdown} />
diff --git a/lib/js/components/Dropdown/Dropdown.stories.ts b/lib/js/components/Dropdown/Dropdown.stories.ts
new file mode 100644
index 000000000..35f214fc1
--- /dev/null
+++ b/lib/js/components/Dropdown/Dropdown.stories.ts
@@ -0,0 +1,94 @@
+import Dropdown from './Dropdown';
+import { DROPDOWN_TRIGGER_ACTIONS } from './Dropdown.consts';
+import SelectList, { SELECT_LIST_SIZES } from '../SelectList';
+import { ICONS } from '../Icon';
+
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+
+export default {
+	title: 'Components/Dropdown',
+	component: Dropdown,
+} as Meta<typeof Dropdown>;
+
+const StoryTemplate: StoryFn<typeof Dropdown> = (argTypes) => ({
+	components: { Dropdown, SelectList },
+	data() {
+		return {
+			items: [
+				{
+					type: 'text',
+					label: 'Wróć do listy poleceń',
+					value: 'go-back',
+					icon: null,
+				},
+				{
+					type: 'divider',
+				},
+				{
+					type: 'text',
+					label: 'POLECENIE 1 / 3',
+					value: 'part-1',
+					icon: ICONS.FA_CIRCLE,
+				},
+				{
+					type: 'text',
+					label: 'POLECENIE 2 / 3',
+					value: 'part-2',
+					icon: ICONS.FA_CIRCLE,
+				},
+				{
+					type: 'text',
+					label: 'POLECENIE 3 / 3',
+					value: 'part-3',
+					icon: ICONS.FA_CIRCLE_CHECK,
+				},
+				{
+					type: 'divider',
+				},
+				{
+					type: 'text',
+					label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+					value: 'lipsum',
+					icon: null,
+				},
+			],
+			value: 'part-2',
+			SELECT_LIST_SIZES: Object.freeze(SELECT_LIST_SIZES),
+		};
+	},
+	props: Object.keys(argTypes),
+	template:
+		'<div style="position: relative">' +
+		'<dropdown :trigger-action="triggerAction" :force-show="forceShow" :same-width="sameWidth">' +
+		'<template #reference><span>Dropdown entry point</span></template>' +
+		'<template #default="{ close }">' +
+		'<select-list v-model="value" :items="items" :size="SELECT_LIST_SIZES.MEDIUM" @input="close" />' +
+		'</template>' +
+		'</dropdown>' +
+		'</div>',
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {
+	triggerAction: DROPDOWN_TRIGGER_ACTIONS.CLICK,
+	forceShow: false,
+	sameWidth: false,
+} as Args;
+
+const argTypes = {
+	triggerAction: {
+		control: { type: 'select', options: Object.values(DROPDOWN_TRIGGER_ACTIONS) },
+		defaultValue: DROPDOWN_TRIGGER_ACTIONS.CLICK,
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=4010%3A69857',
+	},
+};

From a19d1b07596a5ed8976c2ae49298819b0fa14281 Mon Sep 17 00:00:00 2001
From: rogatty <7030884+rogatty@users.noreply.github.com>
Date: Wed, 2 Nov 2022 11:04:47 +0100
Subject: [PATCH 3/4] IT-4439 | add .vue in import

---
 lib/js/components/Dropdown/Dropdown.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/js/components/Dropdown/Dropdown.stories.ts b/lib/js/components/Dropdown/Dropdown.stories.ts
index 35f214fc1..b17747652 100644
--- a/lib/js/components/Dropdown/Dropdown.stories.ts
+++ b/lib/js/components/Dropdown/Dropdown.stories.ts
@@ -1,4 +1,4 @@
-import Dropdown from './Dropdown';
+import Dropdown from './Dropdown.vue';
 import { DROPDOWN_TRIGGER_ACTIONS } from './Dropdown.consts';
 import SelectList, { SELECT_LIST_SIZES } from '../SelectList';
 import { ICONS } from '../Icon';

From 3ace318576ef3179601b78f73666e7ca276a01fa Mon Sep 17 00:00:00 2001
From: rogatty <7030884+rogatty@users.noreply.github.com>
Date: Wed, 2 Nov 2022 11:08:39 +0100
Subject: [PATCH 4/4] IT-4439 | migrate PopOver story to TS

---
 lib/js/components/PopOver/PopOver.stories.mdx | 58 -------------------
 lib/js/components/PopOver/PopOver.stories.ts  | 58 +++++++++++++++++++
 2 files changed, 58 insertions(+), 58 deletions(-)
 delete mode 100644 lib/js/components/PopOver/PopOver.stories.mdx
 create mode 100644 lib/js/components/PopOver/PopOver.stories.ts

diff --git a/lib/js/components/PopOver/PopOver.stories.mdx b/lib/js/components/PopOver/PopOver.stories.mdx
deleted file mode 100644
index 59b15b332..000000000
--- a/lib/js/components/PopOver/PopOver.stories.mdx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Meta, Story, Props } from '@storybook/addon-docs';
-import PopOver from './PopOver';
-import { POP_OVER_COLORS, POP_OVER_PLACEMENTS, POP_OVER_TRIGGER_ACTIONS } from './PopOver.consts';
-
-<Meta title="components/PopOver" component={PopOver} />
-
-# PopOver
-
-<Story
-	name="interactive"
-	parameters={{
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=3590%3A67741',
-		},
-	}}
-	argTypes={{
-		placement: {
-			control: { type: 'select', options: Object.values(POP_OVER_PLACEMENTS) },
-			defaultValue: POP_OVER_PLACEMENTS.BOTTOM,
-		},
-		color: {
-			control: { type: 'select', options: Object.values(POP_OVER_COLORS) },
-			defaultValue: POP_OVER_COLORS.DEFAULT,
-		},
-		triggerAction: {
-			control: { type: 'select', options: Object.values(POP_OVER_TRIGGER_ACTIONS) },
-			defaultValue: POP_OVER_TRIGGER_ACTIONS.CLICK,
-		},
-	}}
-	args={{
-		placement: POP_OVER_PLACEMENTS.BOTTOM,
-		color: POP_OVER_COLORS.DEFAULT,
-		triggerAction: POP_OVER_TRIGGER_ACTIONS.CLICK,
-		titleText: 'Lorem ipsum',
-		buttonText: 'button text',
-		forceShow: false,
-		headerImageUrl: 'https://lek.wiecejnizlek.pl/images/lesson-status-onboarding-inprogress.png',
-	}}
->
-	{(args) => {
-		return {
-			components: { PopOver },
-			props: Object.keys(args),
-			template:
-				'<div style="display: flex; align-items: center; justify-content: center; height: 600px">' +
-				'<pop-over :placement="placement" :color="color" :trigger-action="triggerAction" :title-text="titleText" :button-text="buttonText" :force-show="forceShow" :header-image-url="headerImageUrl">' +
-				'<span slot="reference">click me!</span>' +
-				'<div>Bacon ipsum dolor amet t-bone meatball ground round turducken buffalo pork. </div>' +
-				'</pop-over>'
-				+ '</div>',
-		};
-	}}
-</Story>
-
-## Props
-
-<Props of={PopOver} />
diff --git a/lib/js/components/PopOver/PopOver.stories.ts b/lib/js/components/PopOver/PopOver.stories.ts
new file mode 100644
index 000000000..9675db3f8
--- /dev/null
+++ b/lib/js/components/PopOver/PopOver.stories.ts
@@ -0,0 +1,58 @@
+import PopOver from './PopOver.vue';
+import { POP_OVER_COLORS, POP_OVER_PLACEMENTS, POP_OVER_TRIGGER_ACTIONS } from './PopOver.consts';
+
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+
+export default {
+	title: 'Components/PopOver',
+	component: PopOver,
+} as Meta<typeof PopOver>;
+
+const StoryTemplate: StoryFn<typeof PopOver> = (argTypes) => ({
+	components: { PopOver },
+	props: Object.keys(argTypes),
+	template:
+		'<div style="display: flex; align-items: center; justify-content: center; height: 600px">' +
+		'<pop-over :placement="placement" :color="color" :trigger-action="triggerAction" :title-text="titleText" :button-text="buttonText" :force-show="forceShow" :header-image-url="headerImageUrl">' +
+		'<template #reference><span>click me!</span></template>' +
+		'<div>Bacon ipsum dolor amet t-bone meatball ground round turducken buffalo pork. </div>' +
+		'</pop-over>' +
+		'</div>',
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {
+	placement: POP_OVER_PLACEMENTS.BOTTOM,
+	color: POP_OVER_COLORS.DEFAULT,
+	triggerAction: POP_OVER_TRIGGER_ACTIONS.CLICK,
+	titleText: 'Lorem ipsum',
+	buttonText: 'button text',
+	forceShow: false,
+	headerImageUrl: 'https://lek.wiecejnizlek.pl/images/lesson-status-onboarding-inprogress.png',
+} as Args;
+
+const argTypes = {
+	placement: {
+		control: { type: 'select', options: Object.values(POP_OVER_PLACEMENTS) },
+		defaultValue: POP_OVER_PLACEMENTS.BOTTOM,
+	},
+	color: {
+		control: { type: 'select', options: Object.values(POP_OVER_COLORS) },
+		defaultValue: POP_OVER_COLORS.DEFAULT,
+	},
+	triggerAction: {
+		control: { type: 'select', options: Object.values(POP_OVER_TRIGGER_ACTIONS) },
+		defaultValue: POP_OVER_TRIGGER_ACTIONS.CLICK,
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=3590%3A67741',
+	},
+};