@bethinkpl/design-system 24.2.0 → 25.0.0

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1723188378416,"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":1724912280840,"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.vue

@@ -82,7 +82,7 @@
 				@hide="isDropdownOpen = false"
 			>
 				<template #reference>
-					<icon-button
+					<ds-icon-button
 						:icon="ICONS.FA_ELLIPSIS_VERTICAL"
 						:size="ICON_BUTTON_SIZES.MEDIUM"
 						:color="ICON_BUTTON_COLORS.NEUTRAL"
@@ -101,12 +101,18 @@
 				is-vertical
 			/>
 		</template>
-		<icon-button
-			:icon="ICONS.FA_XMARK"
-			:size="ICON_BUTTON_SIZES.MEDIUM"
-			:color="ICON_BUTTON_COLORS.NEUTRAL"
-			@click="$emit('close')"
-		/>
+		<ds-tooltip
+			:is-pointer-visible="false"
+			:placement="TOOLTIP_PLACEMENTS.LEFT"
+			text="Zamknij - Q"
+		>
+			<ds-icon-button
+				:icon="ICONS.FA_XMARK"
+				:size="ICON_BUTTON_SIZES.MEDIUM"
+				:color="ICON_BUTTON_COLORS.NEUTRAL"
+				@click="$emit('close')"
+			/>
+		</ds-tooltip>
 	</div>
 </template>
 
@@ -307,10 +313,11 @@
 </style>
 
 <script lang="ts">
-import IconButton from '../../Buttons/IconButton/IconButton.vue';
+import DsIconButton from '../../Buttons/IconButton/IconButton.vue';
 import DsDivider, { DIVIDER_PROMINENCES } from '../../Divider';
 import DsDropdown, { DROPDOWN_PLACEMENTS } from '../../Dropdown';
 import DsSkeleton from '../../Skeleton';
+import DsTooltip, { TOOLTIP_PLACEMENTS } from '../../Tooltip';
 import {
 	ICON_BUTTON_COLORS,
 	ICON_BUTTON_SIZES,
@@ -322,7 +329,7 @@ import { Value } from '../../../utils/type.utils';
 
 export default {
 	name: 'OverlayHeader',
-	components: { IconButton, DsDivider, DsDropdown, DsSkeleton },
+	components: { DsIconButton, DsDivider, DsDropdown, DsSkeleton, DsTooltip },
 	props: {
 		title: {
 			type: String,
@@ -353,9 +360,10 @@ export default {
 			},
 		},
 	},
-	// TODO fix me when touching this file
-	// eslint-disable-next-line vue/require-emit-validator
-	emits: ['close', 'titleClick'],
+	emits: {
+		close: () => true,
+		titleClick: () => true,
+	},
 	data() {
 		return {
 			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),
@@ -367,6 +375,7 @@ export default {
 			OVERLAY_HEADER_STATES: Object.freeze(OVERLAY_HEADER_STATES),
 			DROPDOWN_PLACEMENTS: Object.freeze(DROPDOWN_PLACEMENTS),
 			isDropdownOpen: false,
+			TOOLTIP_PLACEMENTS: Object.freeze(TOOLTIP_PLACEMENTS),
 		};
 	},
 	computed: {
@@ -374,7 +383,21 @@ export default {
 			return this.state === OVERLAY_HEADER_STATES.LOADING;
 		},
 	},
+	beforeUnmount() {
+		window.removeEventListener('keydown', this.onKeydown);
+	},
+	mounted() {
+		window.addEventListener('keydown', this.onKeydown);
+	},
 	methods: {
+		onKeydown(e) {
+			switch (e.keyCode) {
+				case 81: // "Q" key
+					e.stopPropagation();
+					this.$emit('close');
+					break;
+			}
+		},
 		onTitleClick() {
 			if (this.isTitleInteractive) {
 				this.$emit('titleClick');

package/lib/js/components/Tooltip/Tooltip.vue

@@ -67,6 +67,7 @@ export default defineComponent({
 					background: 'var(--neutral-background-medium, #E5E7ED)',
 					color: 'var(--neutral-text-heavy, #343C50)',
 					borderRadius: '4px',
+					maxWidth: '240px',
 				},
 				ptOptions: {
 					mergeProps: true,

package/lib/js/icons/fontawesome.ts

@@ -180,6 +180,7 @@ import { faSitemap as fasSitemap } from '@fortawesome/pro-solid-svg-icons/faSite
 import { faSquareCheck as fasSquareCheck } from '@fortawesome/pro-solid-svg-icons/faSquareCheck';
 import { faSquareList as fasSquareList } from '@fortawesome/pro-solid-svg-icons/faSquareList';
 import { faStar as fasStar } from '@fortawesome/pro-solid-svg-icons/faStar';
+import { faStethoscope } from '@fortawesome/pro-regular-svg-icons/faStethoscope';
 import { faStopwatch as fasStopwach } from '@fortawesome/pro-solid-svg-icons/faStopwatch';
 import { faThumbsUp as fasThumbsUp } from '@fortawesome/pro-solid-svg-icons/faThumbsUp';
 import { faThumbtack as fasThumbtack } from '@fortawesome/pro-solid-svg-icons/faThumbtack';
@@ -366,6 +367,7 @@ export const FONTAWESOME_ICONS = {
 	FA_SQUARE_LIST_SOLID: fasSquareList,
 	FA_STAR: faStar,
 	FA_STAR_SOLID: fasStar,
+	FA_STETHOSCOPE: faStethoscope,
 	FA_STOPWATCH_SOLID: fasStopwach,
 	FA_TAG: faTag,
 	FA_TAGS: faTags,

package/lib/js/primevue.ts

@@ -10,6 +10,9 @@ export const initializePrimeVue = (app) => {
 				darkModeSelector: '.app-dark', // enabling dark mode in storybook makes all components canvas black
 			},
 		},
+		zIndex: {
+			tooltip: 16777271, // keep above $z-index-modal
+		},
 	});
 
 	app.directive('pv-tooltip', Tooltip);

package/lib/styles/settings/_z-indexes.scss

@@ -1,4 +1,5 @@
 // z-index positioning
 // hardcoded
+// Keep in sync with zIndex.tooltip in primevue.ts
 $z-index-modal: 16777270; // 16777271 is the highest possible value in Safari, we need to make space for elements that above modal, so -1
 $z-index-overlay: 51;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "24.2.0",
+  "version": "25.0.0",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",
@@ -40,7 +40,6 @@
     "@fortawesome/pro-regular-svg-icons": "6.4.2",
     "@fortawesome/pro-solid-svg-icons": "6.4.2",
     "@fortawesome/vue-fontawesome": "3.0.3",
-    "@primevue/themes": "4.0.0-rc.3",
     "@storybook/addon-actions": "^6.5.13",
     "@storybook/addon-controls": "^6.5.13",
     "@storybook/addon-docs": "^6.5.13",
@@ -73,7 +72,6 @@
     "jsdom-global": "^3.0.2",
     "postcss-prefix-selector": "^1.9.0",
     "prettier": "2.7.1",
-    "primevue": "4.0.0-rc.3",
     "sass": "^1.28.0",
     "sass-loader": "^7.1.0",
     "storybook-addon-designs": "^6.3.1",
@@ -88,5 +86,9 @@
     "vue-loader": "17.0.0",
     "vue-popperjs": "github:bethinkpl/vue-popper#03c7912c4729386743b0cca8f39b35448cc3db7f",
     "vue-svg-loader": "0.17.0-beta.2"
+  },
+  "dependencies": {
+    "@primevue/themes": "4.0.0-rc.3",
+    "primevue": "4.0.0-rc.3"
   }
 }

package/vue.config.js

@@ -18,6 +18,9 @@ module.exports = {
 	css: {
 		extract: false,
 	},
+	configureWebpack: (config) => {
+		config.externals = [/^@?primevue\/.*$/];
+	},
 	chainWebpack: (config) => {
 		/**
 		 * These are some necessary steps changing the default webpack config of the Vue CLI