Merge pull request #219 from bethinkpl/IT-4439-fix-dropdown-and-popover

lib/js/components/Dropdown/Dropdown.stories.ts

@@ -0,0 +1,94 @@
+import Dropdown from './Dropdown.vue';
+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',
+	},
+};

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>
 

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',
+	},
+};

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>