@bethinkpl/design-system 14.1.1 → 14.1.2

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1678262897887,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"4.5.13"},"packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/vue":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue"},"addons":{"@storybook/addon-docs":{"version":"6.5.13"},"@storybook/addon-controls":{"version":"6.5.13"},"@storybook/addon-storysource":{"version":"6.5.13"},"@storybook/addon-viewport":{"version":"6.5.13"},"storybook-addon-designs":{"version":"6.3.1"}}}
+{"generatedAt":1678350376732,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"4.5.13"},"packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/vue":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue"},"addons":{"@storybook/addon-docs":{"version":"6.5.13"},"@storybook/addon-controls":{"version":"6.5.13"},"@storybook/addon-storysource":{"version":"6.5.13"},"@storybook/addon-viewport":{"version":"6.5.13"},"storybook-addon-designs":{"version":"6.3.1"}}}

package/lib/js/components/Dropdown/Dropdown.consts.ts

@@ -8,3 +8,8 @@ export const DROPDOWN_RADIUSES = {
 	BOTTOM: 'bottom',
 	BOTH: 'both',
 } as const;
+
+export const DROPDOWN_PLACEMENTS = {
+	BOTTOM_START: 'bottom-start',
+	BOTTOM_END: 'bottom-end',
+} as const;

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

@@ -1,5 +1,9 @@
 import Dropdown from './Dropdown.vue';
-import { DROPDOWN_RADIUSES, DROPDOWN_TRIGGER_ACTIONS } from './Dropdown.consts';
+import {
+	DROPDOWN_PLACEMENTS,
+	DROPDOWN_RADIUSES,
+	DROPDOWN_TRIGGER_ACTIONS,
+} from './Dropdown.consts';
 import SelectList from '../SelectList/SelectList.vue';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
@@ -13,8 +17,10 @@ export default {
 const StoryTemplate: StoryFn<typeof Dropdown> = (argTypes) => ({
 	components: { Dropdown, SelectList, SelectListItem },
 	props: Object.keys(argTypes),
-	template: `<div style="position: relative">
-			<dropdown :trigger-action="triggerAction" :force-show="forceShow" :same-width="sameWidth" :radius="radius">
+	template: `
+			<div style="position: relative">
+			<dropdown :trigger-action="triggerAction" :force-show="forceShow" :same-width="sameWidth" :radius="radius"
+								:placement="placement">
 				<template #reference><span>Dropdown entry point</span></template>
 				<template #default="{ close }">
 					<select-list>
@@ -23,7 +29,7 @@ const StoryTemplate: StoryFn<typeof Dropdown> = (argTypes) => ({
 					</select-list>
 				</template>
 			</dropdown>
-		</div>`,
+			</div>`,
 });
 
 export const Interactive = StoryTemplate.bind({});
@@ -44,6 +50,10 @@ const argTypes = {
 		control: { type: 'select', options: Object.values(DROPDOWN_RADIUSES) },
 		defaultValue: DROPDOWN_RADIUSES.BOTH,
 	},
+	placement: {
+		control: { type: 'select', options: Object.values(DROPDOWN_PLACEMENTS) },
+		defaultValue: DROPDOWN_PLACEMENTS.BOTTOM_START,
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

package/lib/js/components/Dropdown/Dropdown.vue

@@ -68,7 +68,11 @@
 <script lang="ts">
 import VuePopper from 'vue-popperjs';
 import 'vue-popperjs/dist/vue-popper.css';
-import { DROPDOWN_RADIUSES, DROPDOWN_TRIGGER_ACTIONS } from './Dropdown.consts';
+import {
+	DROPDOWN_PLACEMENTS,
+	DROPDOWN_RADIUSES,
+	DROPDOWN_TRIGGER_ACTIONS,
+} from './Dropdown.consts';
 
 export default {
 	name: 'Dropdown',
@@ -102,6 +106,13 @@ export default {
 				return Object.values(DROPDOWN_RADIUSES).includes(radius);
 			},
 		},
+		placement: {
+			type: String,
+			default: DROPDOWN_PLACEMENTS.BOTTOM_START,
+			validate(placement) {
+				return Object.values(DROPDOWN_PLACEMENTS).includes(placement);
+			},
+		},
 	},
 	data() {
 		return {
@@ -113,7 +124,7 @@ export default {
 		options() {
 			return {
 				modifiers: { preventOverflow: { padding: 0 } },
-				placement: 'bottom-start',
+				placement: this.placement,
 				...(this.sameWidth && {
 					// See https://github.com/floating-ui/floating-ui/issues/794
 					// We can't use onCreate because vue-popper overrides it.
@@ -135,6 +146,9 @@ export default {
 		boundariesSelector() {
 			this.updateKey();
 		},
+		placement() {
+			this.updateKey();
+		},
 	},
 	methods: {
 		close() {

package/lib/js/components/OverlayHeader/OverlayHeader.vue

@@ -61,12 +61,20 @@
 			/>
 		</template>
 		<template v-if="$scopedSlots.dropdown">
-			<ds-dropdown boundaries-selector="body">
+			<ds-dropdown
+				boundaries-selector="body"
+				:placement="DROPDOWN_PLACEMENTS.BOTTOM_END"
+				@show="isDropdownOpen = true"
+				@hide="isDropdownOpen = false"
+			>
 				<template #reference>
 					<icon-button
 						:icon="ICONS.FA_ELLIPSIS_VERTICAL"
 						:size="ICON_BUTTON_SIZES.MEDIUM"
 						:color="ICON_BUTTON_COLORS.NEUTRAL"
+						:state="
+							isDropdownOpen ? ICON_BUTTON_STATES.HOVERED : ICON_BUTTON_STATES.DEFAULT
+						"
 					/>
 				</template>
 				<template #default="{ close }">
@@ -255,8 +263,8 @@
 <script lang="ts">
 import IconButton from '../Buttons/IconButton/IconButton.vue';
 import DsDivider, { DIVIDER_PROMINENCES } from '../Divider';
-import DsDropdown from '../Dropdown';
-import { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../Buttons/IconButton';
+import DsDropdown, { DROPDOWN_PLACEMENTS } from '../Dropdown';
+import { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES, ICON_BUTTON_STATES } from '../Buttons/IconButton';
 import { ICONS } from '../Icons/Icon';
 import { OVERLAY_HEADER_BORDER_COLORS } from './OverlayHeader.consts';
 
@@ -290,9 +298,12 @@ export default {
 		return {
 			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),
 			ICON_BUTTON_COLORS: Object.freeze(ICON_BUTTON_COLORS),
+			ICON_BUTTON_STATES: Object.freeze(ICON_BUTTON_STATES),
 			ICONS: Object.freeze(ICONS),
 			DIVIDER_PROMINENCES: Object.freeze(DIVIDER_PROMINENCES),
 			OVERLAY_HEADER_BORDER_COLORS: Object.freeze(OVERLAY_HEADER_BORDER_COLORS),
+			DROPDOWN_PLACEMENTS: Object.freeze(DROPDOWN_PLACEMENTS),
+			isDropdownOpen: false,
 		};
 	},
 	methods: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "14.1.1",
+  "version": "14.1.2",
   "description": "Bethink universe design-system",
   "repository": "git@github.com:bethinkpl/design-system.git",
   "author": "nerdy@bethink.pl",