@bethinkpl/design-system 22.0.4 → 22.1.0

package/lib/js/components/Toast/Toast.vue

@@ -0,0 +1,283 @@
+<template>
+	<div :style="styles" :class="['ds-toast', toastSize, toastPosition]">
+		<ds-card :loading-bar-color="color" has-loading-bar :loading-bar-time="disappearingTimeout">
+			<template #content>
+				<div class="ds-toast__content">
+					<slot name="content" />
+				</div>
+			</template>
+			<template
+				v-if="footerPrimaryButtonText.length > 0 || footerSecondaryButtonText.length > 0"
+				#footer
+			>
+				<div class="ds-toast__footerButtons">
+					<ds-button
+						v-if="footerSecondaryButtonText.length"
+						:color="buttonSecondaryColor"
+						:icon-right="footerSecondaryButtonIcon"
+						:type="BUTTON_TYPES.OUTLINED"
+						:radius="BUTTON_RADIUSES.ROUNDED"
+						@click="$emit('secondary-button-click')"
+						>{{ footerSecondaryButtonText }}
+					</ds-button>
+					<ds-button
+						v-if="footerPrimaryButtonText.length"
+						:color="buttonPrimaryColor"
+						:icon-right="footerPrimaryButtonIcon"
+						:radius="BUTTON_RADIUSES.ROUNDED"
+						@click="$emit('primary-button-click')"
+						>{{ footerPrimaryButtonText }}
+					</ds-button>
+				</div>
+			</template>
+		</ds-card>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../styles/settings/spacings';
+@import '../../../styles/settings/typography/tokens';
+@import '../../../styles/settings/media-queries';
+
+.ds-toast {
+	position: fixed;
+	width: 100%;
+
+	&.-ds-size-small {
+		max-width: 320px + $space-s * 2;
+		padding: $space-s;
+	}
+
+	&.-ds-size-medium {
+		max-width: 500px + $space-s * 2;
+		padding: $space-s;
+
+		@media (#{breakpoint-s()}) {
+			max-width: 500px + $space-m * 2;
+			padding: $space-m;
+		}
+	}
+
+	&.-ds-position-left {
+		bottom: 0;
+		left: 0;
+	}
+
+	&.-ds-position-right {
+		bottom: 0;
+		right: 0;
+	}
+
+	&.-ds-position-center {
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	&__content {
+		@include text-m-default-regular;
+	}
+
+	&__footerButtons {
+		column-gap: $space-xs;
+		display: flex;
+		justify-content: flex-end;
+		padding: 0 $space-s $space-s;
+	}
+}
+</style>
+
+<script lang="ts">
+import DsButton, { BUTTON_COLORS, BUTTON_RADIUSES, BUTTON_TYPES } from '../Buttons/Button';
+import DsCard from '../Cards/Card';
+import {
+	TOAST_COLORS,
+	TOAST_POSITIONS,
+	TOAST_SIZES,
+	ToastColors,
+	ToastPositions,
+	ToastSizes,
+} from './Toast.consts';
+import { PropType, toRaw } from 'vue';
+import { ICONS } from '../Icons/Icon';
+
+const TOAST_OFFSET = 24;
+
+function calculateBoundariesOffset(boundariesElement: HTMLElement) {
+	const borderLeftWidth = window.getComputedStyle(boundariesElement).borderLeftWidth;
+	const borderRightWidth = window.getComputedStyle(boundariesElement).borderRightWidth;
+	const boundingClientRect = boundariesElement.getBoundingClientRect();
+	const boundariesOffsetLeft = boundingClientRect.left + parseInt(borderLeftWidth, 10);
+	const boundariesOffsetRight =
+		boundingClientRect.right - parseInt(borderRightWidth, 10) - parseInt(borderLeftWidth, 10);
+	const boundariesOffsetWidth = boundingClientRect.width;
+	return {
+		left: {
+			left: `${boundariesOffsetLeft}px`,
+		},
+		right: {
+			left: `${boundariesOffsetRight}px`,
+			transform: 'translateX(-100%)',
+		},
+		center: {
+			left: `${boundariesOffsetLeft + boundariesOffsetWidth / 2}px`,
+			transform: 'translateX(-50%)',
+		},
+	};
+}
+
+export default {
+	name: 'Toast',
+	components: {
+		DsButton,
+		DsCard,
+	},
+	props: {
+		size: {
+			type: String as PropType<ToastSizes>,
+			default: TOAST_SIZES.MEDIUM,
+		},
+		position: {
+			type: String as PropType<ToastPositions>,
+			default: TOAST_POSITIONS.CENTER,
+		},
+		boundariesSelector: {
+			type: [String, HTMLElement],
+			default: null,
+		},
+		color: {
+			type: String as PropType<ToastColors>,
+			default: TOAST_COLORS.INFO,
+		},
+		footerPrimaryButtonText: {
+			type: String,
+			default: '',
+		},
+		footerPrimaryButtonIcon: {
+			type: Object,
+			default: null,
+			validator(footerPrimaryButtonIcon: any) {
+				return (
+					footerPrimaryButtonIcon == null ||
+					Object.values(ICONS).includes(toRaw(footerPrimaryButtonIcon))
+				);
+			},
+		},
+		footerSecondaryButtonText: {
+			type: String,
+			default: '',
+		},
+		footerSecondaryButtonIcon: {
+			type: Object,
+			default: null,
+			validator(footerSecondaryButtonIcon: any) {
+				return (
+					footerSecondaryButtonIcon == null ||
+					Object.values(ICONS).includes(toRaw(footerSecondaryButtonIcon))
+				);
+			},
+		},
+		isDisappearing: {
+			type: Boolean,
+			default: true,
+		},
+		disappearingTimeout: {
+			type: String,
+			default: '0',
+			validator(disappearingTimeout: string) {
+				return (
+					(disappearingTimeout === '0' || !isNaN(parseInt(disappearingTimeout, 10))) &&
+					parseInt(disappearingTimeout, 10) >= 0
+				);
+			},
+		},
+	},
+	emits: {
+		close: () => true,
+		'primary-button-click': () => true,
+		'secondary-button-click': () => true,
+	},
+	data() {
+		return {
+			boundariesSelectorElement: null,
+			boundariesSelectorElementResizeObserver: null,
+			styles: {},
+			BUTTON_COLORS: Object.freeze(BUTTON_COLORS),
+			BUTTON_RADIUSES: Object.freeze(BUTTON_RADIUSES),
+			BUTTON_TYPES: Object.freeze(BUTTON_TYPES),
+			TOAST_SIZES: Object.freeze(TOAST_SIZES),
+			TOAST_POSITIONS: Object.freeze(TOAST_POSITIONS),
+		};
+	},
+	computed: {
+		buttonPrimaryColor() {
+			return this.color === TOAST_COLORS.DANGER
+				? BUTTON_COLORS.NEUTRAL
+				: BUTTON_COLORS.PRIMARY;
+		},
+		buttonSecondaryColor() {
+			return this.color === TOAST_COLORS.DANGER
+				? BUTTON_COLORS.DANGER
+				: BUTTON_COLORS.NEUTRAL;
+		},
+		toastPosition() {
+			return `-ds-position-${this.position.toLowerCase()}`;
+		},
+		toastSize() {
+			return `-ds-size-${this.size.toLowerCase()}`;
+		},
+	},
+	mounted() {
+		this.setBoundariesSelectorElement();
+		this.calculateStyles();
+		this.boundariesSelectorElementResizeObserver?.disconnect();
+		this.boundariesSelectorElementResizeObserver = new ResizeObserver(() => {
+			this.calculateStyles();
+		});
+		if (this.boundariesSelectorElement) {
+			this.boundariesSelectorElementResizeObserver.observe(this.boundariesSelectorElement);
+		} else {
+			//window resize does not work for some reason, so we observe body
+			this.boundariesSelectorElementResizeObserver.observe(document.querySelector('body'));
+		}
+		if (this.isDisappearing && this.disappearingTimeout !== '0') {
+			setTimeout(
+				() => this.$emit('close'),
+				parseInt(this.disappearingTimeout, 10) * 1000 + 100, // 100 ms is to let loading bar animation to finish
+			);
+		}
+	},
+	beforeUnmount() {
+		this.boundariesSelectorElementResizeObserver.disconnect();
+		this.boundariesSelectorElementResizeObserver = null;
+	},
+	updated() {
+		const { right, left } = this.$el.getClientRects()[0];
+		if (parseInt(left, 10) < 0 || right > document.documentElement.clientWidth) {
+			this.styles = {
+				left: '50%',
+				transform: 'translateX(-50%)',
+			};
+		}
+	},
+	methods: {
+		calculateStyles() {
+			if (this.boundariesSelectorElement) {
+				this.styles = calculateBoundariesOffset(this.boundariesSelectorElement)[
+					this.position
+				];
+			} else {
+				this.styles = {};
+			}
+		},
+		setBoundariesSelectorElement() {
+			if (typeof this.boundariesSelector === 'string') {
+				this.boundariesSelectorElement =
+					document.querySelector(this.boundariesSelector) || null;
+			} else if (this.boundariesSelector instanceof HTMLElement) {
+				this.boundariesSelectorElement = this.boundariesSelector;
+			}
+		},
+	},
+};
+</script>

package/lib/js/icons/fontawesome.ts

@@ -86,6 +86,7 @@ import { faHourglass } from '@fortawesome/pro-regular-svg-icons/faHourglass';
 import { faHourglassEnd } from '@fortawesome/pro-regular-svg-icons/faHourglassEnd';
 import { faHourglassStart } from '@fortawesome/pro-regular-svg-icons/faHourglassStart';
 import { faHouse } from '@fortawesome/pro-regular-svg-icons/faHouse';
+import { faImages as fasImages } from '@fortawesome/pro-solid-svg-icons/faImages';
 import { faKey } from '@fortawesome/pro-regular-svg-icons/faKey';
 import { faKeyboard } from '@fortawesome/pro-regular-svg-icons/faKeyboard';
 import { faLightbulb } from '@fortawesome/pro-regular-svg-icons/faLightbulb';
@@ -116,6 +117,7 @@ import { faRotateLeft } from '@fortawesome/pro-regular-svg-icons/faRotateLeft';
 import { faShare } from '@fortawesome/pro-regular-svg-icons/faShare';
 import { faShareNodes } from '@fortawesome/pro-regular-svg-icons/faShareNodes';
 import { faShieldHalved } from '@fortawesome/pro-regular-svg-icons/faShieldHalved';
+import { faSidebar } from '@fortawesome/pro-regular-svg-icons/faSidebar';
 import { faSignal } from '@fortawesome/pro-regular-svg-icons/faSignal';
 import { faSitemap } from '@fortawesome/pro-regular-svg-icons/faSitemap';
 import { faSliders } from '@fortawesome/pro-regular-svg-icons/faSliders';
@@ -302,6 +304,7 @@ export const FONTAWESOME_ICONS = {
 	FA_HOURGLASS_END: faHourglassEnd,
 	FA_HOURGLASS_START: faHourglassStart,
 	FA_HOUSE: faHouse,
+	FA_IMAGES_SOLID: fasImages,
 	FA_INFO_SOLID: fasInfo,
 	FA_KEY: faKey,
 	FA_KEYBOARD: faKeyboard,
@@ -336,6 +339,7 @@ export const FONTAWESOME_ICONS = {
 	FA_SHARE: faShare,
 	FA_SHARE_NODES: faShareNodes,
 	FA_SHIELD_HALVED: faShieldHalved,
+	FA_SIDEBAR: faSidebar,
 	FA_SIGNAL: faSignal,
 	FA_SITEMAP: faSitemap,
 	FA_SITEMAP_SOLID: fasSitemap,

package/lib/js/styles/Borders/BorderSizes.stories.ts

@@ -0,0 +1,44 @@
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+	title: 'foundations/Borders',
+} as Meta;
+
+const borderSizes = [
+	{ name: 'border-xs', value: 1 },
+	{ name: 'border-s', value: 2 },
+	{ name: 'border-m', value: 4 },
+	{ name: 'border-l', value: 6 },
+	{ name: 'border-xl', value: 8 },
+];
+
+const StoryTemplate: StoryFn = () => ({
+	data() {
+		return {
+			spacings: Object.freeze(borderSizes),
+		};
+	},
+	methods: {
+		getStyles(spacing) {
+			return `border: black solid ${spacing.value}px;`;
+		},
+	},
+	template: `
+		<div>
+			<div v-for="spacing in spacings" style="margin-bottom: 24px;">
+				<code>
+					\${{ spacing.name }}: {{ spacing.value }}px
+				</code>
+				<div :style="getStyles(spacing)">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+			</div>
+		</div>
+	`,
+});
+
+export const Static = StoryTemplate.bind({});
+Static.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=8375-32903&t=ItmVGTyxKahcKsdh-4',
+	},
+};

package/lib/js/typings.d.ts

@@ -1,15 +1,12 @@
 // TypeScript compiler doesn't read webpack config so we need to tell him how interpret import Vue files
 
 declare module '*.vue' {
-	import { ConcreteComponent } from '@vue/runtime-dom';
+	import { ConcreteComponent } from 'vue';
 	export { ConcreteComponent };
 }
 
 declare module '*.svg' {
-	import { CompatVue } from '@vue/runtime-dom';
-	const Vue: CompatVue;
-	export default Vue;
-	export * from '@vue/runtime-dom';
-	const { configureCompat } = Vue;
-	export { configureCompat };
+	import Vue, { VueConstructor } from 'vue';
+	const content: VueConstructor<Vue>;
+	export default content;
 }

package/package.json

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