@bethinkpl/design-system 25.0.2 → 25.0.4

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1725275423820,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}
+{"generatedAt":1725357978526,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}

package/lib/js/components/Headers/OverlayHeader/OverlayHeader.stories.ts

@@ -2,7 +2,6 @@ import OverlayHeader from './OverlayHeader.vue';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import { OVERLAY_HEADER_BORDER_COLORS, OVERLAY_HEADER_STATES } from './OverlayHeader.consts';
-import { BUTTON_STATES } from '../../Buttons/Button';
 
 export default {
 	title: 'Components/Headers/OverlayHeader',
@@ -14,9 +13,14 @@ const StoryTemplate: StoryFn<typeof OverlayHeader> = (args) => ({
 	setup() {
 		return { args };
 	},
+	methods: {
+		onClose() {
+			console.log('OverlayHeader emitted close event');
+		},
+	},
 	template: `
 			<div style="height: 300px">
-			<overlay-header v-bind=args>
+			<overlay-header v-bind=args @close="onClose">
 				<template v-if="args.accessorySlot" #accessory>
 					<div style="background: var(--raw-gray-300); height: 100%">{{ args.accessorySlot }}</div>
 				</template>

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

@@ -327,6 +327,7 @@ import {
 import { ICONS } from '../../Icons/Icon';
 import { OVERLAY_HEADER_BORDER_COLORS, OVERLAY_HEADER_STATES } from './OverlayHeader.consts';
 import { Value } from '../../../utils/type.utils';
+import { isElementEditable } from '../../../utils/shortcut-keys';
 
 export default {
 	name: 'OverlayHeader',
@@ -391,9 +392,13 @@ export default {
 		window.addEventListener('keydown', this.onKeydown);
 	},
 	methods: {
-		onKeydown(e) {
-			switch (e.keyCode) {
-				case 81: // "Q" key
+		onKeydown(e: KeyboardEvent) {
+			if (isElementEditable(e.target as HTMLElement | null)) {
+				return;
+			}
+			switch (e.key) {
+				case 'q':
+				case 'Q':
 					e.stopPropagation();
 					this.$emit('close');
 					break;

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

@@ -19,9 +19,9 @@ const StoryTemplate: StoryFn<typeof PopOver> = (args) => ({
 		return { ...args };
 	},
 	template:
-		'<div style="display: flex; align-items: center; justify-content: center; height: 800px">' +
+		'<div style="display: flex; align-items: center; justify-content: center; height: 800px; background: var(--raw-gray-50);">' +
 		'<pop-over :placement="placement" :color="color" :trigger-action="triggerAction" :title-text="titleText" :subtitle-text="subtitleText" :button-text="buttonText" :force-show="forceShow" :header-image-url="headerImageUrl" :size="size" :max-height="maxHeight" :is-pointer-visible="isPointerVisible">' +
-		'<template #reference><span>click me!</span></template>' +
+		'<template #reference><span style="background: var(--theme-100); border-radius: 4px; padding: 4px 8px;">click me!</span></template>' +
 		'<div>{{ definitionSlot }}</div>' +
 		'</pop-over>' +
 		'</div>',

package/lib/js/components/PopOver/PopOver.vue

@@ -21,6 +21,7 @@
 					'-ds-color-neutral': color === POP_OVER_COLORS.NEUTRAL,
 					'-ds-small': size === POP_OVER_SIZES.SMALL,
 					'-ds-medium': size === POP_OVER_SIZES.MEDIUM,
+					'-ds-visible-arrow': isPointerVisible,
 				}"
 			>
 				<img v-if="headerImageUrl" class="ds-popOver__image" :src="headerImageUrl" alt="" />
@@ -102,7 +103,11 @@
 	}
 
 	&[x-placement^='bottom'] {
-		margin-top: $space-s;
+		margin-top: $space-4xs;
+
+		&.-ds-visible-arrow {
+			margin-top: $space-s + $space-4xs;
+		}
 
 		/* stylelint-disable-next-line selector-class-pattern */
 		:deep(.popper__arrow) {
@@ -116,7 +121,11 @@
 	}
 
 	&[x-placement^='top'] {
-		margin-bottom: $space-s;
+		margin-bottom: $space-4xs;
+
+		&.-ds-visible-arrow {
+			margin-bottom: $space-s + $space-4xs;
+		}
 
 		/* stylelint-disable-next-line selector-class-pattern */
 		:deep(.popper__arrow) {
@@ -130,7 +139,11 @@
 	}
 
 	&[x-placement^='right'] {
-		margin-left: $space-s;
+		margin-left: $space-4xs;
+
+		&.-ds-visible-arrow {
+			margin-left: $space-s + $space-4xs;
+		}
 
 		/* stylelint-disable-next-line selector-class-pattern */
 		:deep(.popper__arrow) {
@@ -144,7 +157,11 @@
 	}
 
 	&[x-placement^='left'] {
-		margin-right: $space-s;
+		margin-right: $space-4xs;
+
+		&.-ds-visible-arrow {
+			margin-right: $space-s + $space-4xs;
+		}
 
 		/* stylelint-disable-next-line selector-class-pattern */
 		:deep(.popper__arrow) {

package/lib/js/utils/shortcut-keys.ts

@@ -0,0 +1,8 @@
+export const isElementEditable = (element: HTMLElement | null): boolean => {
+	return (
+		element?.tagName === 'INPUT' ||
+		element?.tagName === 'SELECT' ||
+		element?.tagName === 'TEXTAREA' ||
+		!!element?.isContentEditable
+	);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "25.0.2",
+  "version": "25.0.4",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",