@bethinkpl/design-system 22.1.0 → 22.2.0

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1719584425466,"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":1720449439347,"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/PopOver/PopOver.vue

@@ -1,50 +1,52 @@
 <template>
-	<slot v-if="triggerAction === POP_OVER_TRIGGER_ACTIONS.NONE" name="reference" />
-	<vue-popper
-		v-else
-		ref="popper"
-		:key="key"
-		:boundaries-selector="boundariesSelector"
-		:force-show="forceShow"
-		:options="{ placement, modifiers }"
-		:trigger="triggerAction"
-		:delay-on-mouse-over="300"
-		:delay-on-mouse-out="300"
-		:append-to-body="appendToBody"
-		:visible-arrow="isPointerVisible"
-		:root-class="rootClass"
-	>
-		<div
-			class="popper ds-popOver"
-			:class="{
-				'-ds-color-neutral': color === POP_OVER_COLORS.NEUTRAL,
-				'-ds-small': size === POP_OVER_SIZES.SMALL,
-				'-ds-medium': size === POP_OVER_SIZES.MEDIUM,
-			}"
+	<span>
+		<slot v-if="triggerAction === POP_OVER_TRIGGER_ACTIONS.NONE" name="reference" />
+		<vue-popper
+			v-else
+			ref="popper"
+			:key="key"
+			:boundaries-selector="boundariesSelector"
+			:force-show="forceShow"
+			:options="{ placement, modifiers }"
+			:trigger="triggerAction"
+			:delay-on-mouse-over="300"
+			:delay-on-mouse-out="300"
+			:append-to-body="appendToBody"
+			:visible-arrow="isPointerVisible"
+			:root-class="rootClass"
 		>
-			<img v-if="headerImageUrl" class="ds-popOver__image" :src="headerImageUrl" alt="" />
-			<div class="ds-popOver__content">
-				<div v-if="titleText" class="ds-popOver__title"> {{ titleText }} </div>
-				<div v-if="subtitleText" class="ds-popOver__subtitle"> {{ subtitleText }} </div>
-				<div class="ds-popOver__contentSlot" :class="{ '-ds-maxHeight': maxHeight }">
-					<slot :close="close" />
+			<div
+				class="popper ds-popOver"
+				:class="{
+					'-ds-color-neutral': color === POP_OVER_COLORS.NEUTRAL,
+					'-ds-small': size === POP_OVER_SIZES.SMALL,
+					'-ds-medium': size === POP_OVER_SIZES.MEDIUM,
+				}"
+			>
+				<img v-if="headerImageUrl" class="ds-popOver__image" :src="headerImageUrl" alt="" />
+				<div class="ds-popOver__content">
+					<div v-if="titleText" class="ds-popOver__title"> {{ titleText }} </div>
+					<div v-if="subtitleText" class="ds-popOver__subtitle"> {{ subtitleText }} </div>
+					<div class="ds-popOver__contentSlot" :class="{ '-ds-maxHeight': maxHeight }">
+						<slot :close="close" />
+					</div>
 				</div>
+				<ds-button
+					v-if="buttonText"
+					class="ds-popOver__button"
+					:type="BUTTON_TYPES.TEXT"
+					:size="BUTTON_SIZES.LARGE"
+					@click="$emit('button-click')"
+				>
+					{{ buttonText }}
+				</ds-button>
 			</div>
-			<ds-button
-				v-if="buttonText"
-				class="ds-popOver__button"
-				:type="BUTTON_TYPES.TEXT"
-				:size="BUTTON_SIZES.LARGE"
-				@click="$emit('button-click')"
-			>
-				{{ buttonText }}
-			</ds-button>
-		</div>
 
-		<template #reference>
-			<slot name="reference" />
-		</template>
-	</vue-popper>
+			<template #reference>
+				<slot name="reference" />
+			</template>
+		</vue-popper>
+	</span>
 </template>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,7 @@
+export const TOOLTIP_PLACEMENTS = {
+	TOP: 'top',
+	BOTTOM: 'bottom',
+	LEFT: 'left',
+	RIGHT: 'right',
+} as const;
+export type TooltipPlacement = typeof TOOLTIP_PLACEMENTS[keyof typeof TOOLTIP_PLACEMENTS];

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

@@ -0,0 +1,118 @@
+import Tooltip from './Tooltip.vue';
+
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { TOOLTIP_PLACEMENTS } from './Tooltip.consts';
+import DsSwitch from '../Switch/Switch.vue';
+import DsButton from '../Buttons/Button/Button.vue';
+
+export default {
+	title: 'Components/Tooltip',
+	component: Tooltip,
+} as Meta<typeof Tooltip>;
+
+const StoryTemplate: StoryFn<typeof Tooltip> = (args) => ({
+	components: { Tooltip },
+	setup() {
+		return { ...args };
+	},
+	template: `
+		<div style="padding: 60px; width: 100%;display: flex;  justify-content: center">
+			<div style="padding: 60px;">
+				<span>This is a text with </span>
+				<tooltip
+					:text="text"
+					:inline="inline"
+					:is-disabled="isDisabled"
+					:placement="placement"
+					:is-pointer-visible="isPointerVisible">
+					<b>inline tooltip trigger</b>
+				</tooltip>
+			</div>
+		</div>
+	`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {
+	text: 'Lorem ipsum dolor sit amet.',
+	isDisabled: false,
+	placement: TOOLTIP_PLACEMENTS.BOTTOM,
+	isPointerVisible: true,
+	inline: true,
+} as Args;
+
+const argTypes = {
+	placement: {
+		control: { type: 'select', options: Object.values(TOOLTIP_PLACEMENTS) },
+		defaultValue: TOOLTIP_PLACEMENTS.BOTTOM,
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=8238-6888&m=dev',
+	},
+};
+
+const OnDsSwitchTemplate: StoryFn<typeof Tooltip> = (args) => ({
+	components: { Tooltip, DsSwitch },
+	setup() {
+		return { ...args };
+	},
+	template: `
+		<div style="padding: 60px; width: 100%;display: flex;  justify-content: center">
+			<div style="padding: 60px;">
+				<tooltip
+					:text="text"
+					:is-disabled="isDisabled"
+					:placement="placement"
+					:is-pointer-visible="isPointerVisible">
+					<ds-switch
+						label-left="labelLeft"
+						label-right="labelRight"
+						:state="switchDisabled ? 'disabled' : 'default'"
+					/>
+				</tooltip>
+			</div>
+		</div>
+	`,
+});
+
+export const OnDsSwitch = OnDsSwitchTemplate.bind({});
+
+OnDsSwitch.argTypes = argTypes;
+OnDsSwitch.args = { ...args, switchDisabled: true, inline: false };
+
+const OnDsButtonTemplate: StoryFn<typeof Tooltip> = (args) => ({
+	components: { Tooltip, DsButton },
+	setup() {
+		return { ...args };
+	},
+	template: `
+		<div style="padding: 60px; width: 100%;display: flex;  justify-content: center">
+			<div style="padding: 60px;">
+				<tooltip
+					:text="text"
+					:is-disabled="isDisabled"
+					:placement="placement"
+					:is-pointer-visible="isPointerVisible">
+					<ds-button
+						:state="buttonDisabled ? 'disabled': 'default'"
+					>
+						Test button
+					</ds-button>
+				</tooltip>
+			</div>
+		</div>
+	`,
+});
+
+export const OnDsButton = OnDsButtonTemplate.bind({});
+
+OnDsButton.argTypes = argTypes;
+OnDsButton.args = { ...args, buttonDisabled: true, inline: false };

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

@@ -0,0 +1,91 @@
+<template>
+	<span v-if="inline" v-pv-tooltip:[tooltipParams]="options" tabindex="-1">
+		<slot />
+	</span>
+	<div v-else v-pv-tooltip:[tooltipParams]="options" tabindex="-1">
+		<slot />
+	</div>
+</template>
+
+<style lang="scss">
+@import '../../../styles/settings/typography/tokens';
+
+.ds-tooltip-text {
+	@include text-s-compact-bold;
+}
+
+.ds-tooltip-arrow-hide {
+	display: none;
+}
+</style>
+
+<script lang="ts">
+import { TOOLTIP_PLACEMENTS, TooltipPlacement } from './Tooltip.consts';
+import { defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+	name: 'Tooltip',
+	props: {
+		placement: {
+			type: String as PropType<TooltipPlacement>,
+			default: TOOLTIP_PLACEMENTS.BOTTOM,
+			validator(placement: TooltipPlacement) {
+				return Object.values(TOOLTIP_PLACEMENTS).includes(placement);
+			},
+		},
+		text: {
+			type: String,
+			default: '',
+		},
+		isDisabled: {
+			type: Boolean,
+			default: false,
+		},
+		isPointerVisible: {
+			type: Boolean,
+			default: true,
+		},
+		inline: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		tooltipParams() {
+			return {
+				position: this.placement,
+				event: this.isTouchDevice() ? 'focus' : 'hover',
+			};
+		},
+		options() {
+			return {
+				value: this.text,
+				disabled: this.isDisabled,
+				dt: {
+					shadow: '0px 0px 4px 0px rgba(12, 23, 38, 0.08), 0px 6px 12px 0px rgba(12, 23, 38, 0.12), 0px 2px 4px 0px rgba(12, 23, 38, 0.06)',
+					padding: 'var(--spacing-space-3xs, 6px) var(--spacing-space-2xs, 8px)',
+					background: 'var(--neutral-background-medium, #E5E7ED)',
+					color: 'var(--neutral-text-heavy, #343C50)',
+					borderRadius: '4px',
+				},
+				ptOptions: {
+					mergeProps: true,
+				},
+				pt: {
+					text: 'ds-tooltip-text',
+					arrow: this.isPointerVisible ? '' : 'ds-tooltip-arrow-hide',
+				},
+			};
+		},
+	},
+	methods: {
+		isTouchDevice() {
+			return (
+				'ontouchstart' in window ||
+				navigator.maxTouchPoints > 0 ||
+				(navigator as any).msMaxTouchPoints > 0
+			);
+		},
+	},
+});
+</script>

package/lib/js/components/Tooltip/index.ts

@@ -0,0 +1,4 @@
+import Tooltip from './Tooltip.vue';
+
+export default Tooltip;
+export * from './Tooltip.consts';

package/lib/js/icons/fontawesome.ts

@@ -11,6 +11,7 @@ import { faArrowRightFromBracket } from '@fortawesome/pro-regular-svg-icons/faAr
 import { faArrowRotateLeft } from '@fortawesome/pro-regular-svg-icons/faArrowRotateLeft';
 import { faArrowsMaximize } from '@fortawesome/pro-regular-svg-icons/faArrowsMaximize';
 import { faArrowsRotate } from '@fortawesome/pro-regular-svg-icons/faArrowsRotate';
+import { faArrowUpRightAndArrowDownLeftFromCenter } from '@fortawesome/pro-regular-svg-icons/faArrowUpRightAndArrowDownLeftFromCenter';
 import { faArrowUpRightFromSquare } from '@fortawesome/pro-regular-svg-icons/faArrowUpRightFromSquare';
 import { faBadgePercent } from '@fortawesome/pro-regular-svg-icons/faBadgePercent';
 import { faBan } from '@fortawesome/pro-regular-svg-icons/faBan';
@@ -202,6 +203,7 @@ export const FONTAWESOME_ICONS = {
 	FA_ARROW_RIGHT_SOLID: fasArrowRight,
 	FA_ARROW_ROTATE_LEFT: faArrowRotateLeft,
 	FA_ARROW_UP_SOLID: fasArrowUp,
+	FA_ARROW_UP_RIGHT_AND_ARROW_DOWN_LEFT_FROM_CENTER: faArrowUpRightAndArrowDownLeftFromCenter,
 	FA_ARROW_UP_RIGHT_FROM_SQUARE: faArrowUpRightFromSquare,
 	FA_ARROWS_LEFT_RIGHT_SOLID: fasArrowsLeftRight,
 	FA_ARROWS_MAXIMIZE: faArrowsMaximize,

package/lib/js/index.ts

@@ -95,6 +95,10 @@ export { default as BasicRichListItem } from './components/RichList/BasicRichLis
 export { default as GroupRichListItem } from './components/RichList/GroupRichListItem';
 export { default as Switch } from './components/Switch';
 export * from './components/Switch/Switch.consts';
+export { default as DsTooltip } from './components/Tooltip';
+export * from './components/Tooltip/Tooltip.consts';
+
+export { initializePrimeVue } from './primevue';
 
 export {
 	initialize as initializeIcons,

package/lib/js/primevue.ts

@@ -0,0 +1,16 @@
+import PrimeVue from 'primevue/config';
+import Aura from '@primevue/themes/aura';
+import Tooltip from 'primevue/tooltip';
+
+export const initializePrimeVue = (app) => {
+	app.use(PrimeVue, {
+		theme: {
+			preset: Aura,
+			options: {
+				darkModeSelector: '.app-dark', // enabling dark mode in storybook makes all components canvas black
+			},
+		},
+	});
+
+	app.directive('pv-tooltip', Tooltip);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "22.1.0",
+  "version": "22.2.0",
   "description": "Bethink universe design-system",
   "repository": "git@github.com:bethinkpl/design-system.git",
   "author": "nerdy@bethink.pl",
@@ -37,6 +37,7 @@
     "@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",
@@ -68,6 +69,7 @@
     "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",

package/vue.config.js

@@ -1,3 +1,12 @@
+const path = require('path');
+const fs = require('fs');
+
+function getDirectories(module) {
+	return fs
+		.readdirSync(module)
+		.filter((file) => fs.statSync(path.join(module, file)).isDirectory());
+}
+
 module.exports = {
 	/**
 	 * we disable parallel for production, because if we use ts-loader the Thread Loader does
@@ -27,6 +36,14 @@ module.exports = {
 					transpileOnly: false,
 					happyPackMode: false,
 				}));
+
+			const primePackages = ['primevue', '@primevue/themes'];
+			primePackages.forEach((pkg) => {
+				const modulePath = path.resolve(__dirname, `node_modules/${pkg}`);
+				getDirectories(modulePath).forEach((dir) => {
+					config.resolve.alias.set(`${pkg}/${dir}`, path.join(modulePath, dir));
+				});
+			});
 		}
 
 		const svgRule = config.module.rule('svg');