@bethinkpl/design-system 22.0.2 → 22.0.4

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1716793017337,"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":1717609800966,"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/Cards/Card/Card.consts.ts

@@ -0,0 +1,28 @@
+import { Value } from '../../../utils/type.utils';
+
+export const CARD_BORDER_COLORS = {
+	NEUTRAL_HEAVY: 'neutralHeavy',
+	NEUTRAL_STRONG: 'neutralStrong',
+	SUCCESS: 'success',
+	WARNING: 'warning',
+	DANGER: 'danger',
+	INFO: 'info',
+	TRANSPARENT: 'transparent',
+};
+
+export type CardBorderColors = Value<typeof CARD_BORDER_COLORS>;
+
+export const CARD_BORDER_SIZES = {
+	SMALL: 'small',
+	MEDIUM: 'medium',
+	LARGE: 'large',
+};
+
+export type CardBorderSizes = Value<typeof CARD_BORDER_SIZES>;
+
+export const CARD_BORDER_POSITIONS = {
+	TOP: 'top',
+	LEFT: 'left',
+};
+
+export type CardBorderPositions = Value<typeof CARD_BORDER_POSITIONS>;

package/lib/js/components/Cards/Card/Card.spec.ts

@@ -1,6 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
 
 import Card from './Card.vue';
+import { CARD_BORDER_COLORS, CARD_BORDER_POSITIONS, CARD_BORDER_SIZES } from './Card.consts';
+import { LOADING_BAR_COLORS } from '../../LoadingBar';
 
 describe('Card', () => {
 	const createComponent = ({
@@ -14,6 +16,13 @@ describe('Card', () => {
 			props: {
 				headerHasPadding,
 				dividerUnderHeader,
+				hasBorder: false,
+				borderSize: CARD_BORDER_SIZES.MEDIUM,
+				borderColor: CARD_BORDER_COLORS.NEUTRAL_HEAVY,
+				borderPosition: CARD_BORDER_POSITIONS.TOP,
+				hasLoadingBar: false,
+				loadingBarColor: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
+				loadingBarTime: '0',
 			},
 			slots: {
 				...(headerSlot !== '' && { header: headerSlot }),

package/lib/js/components/Cards/Card/Card.stories.ts

@@ -1,6 +1,8 @@
 import Card from './Card.vue';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { CARD_BORDER_COLORS, CARD_BORDER_POSITIONS, CARD_BORDER_SIZES } from './Card.consts';
+import { LOADING_BAR_COLORS } from '../../LoadingBar';
 
 export default {
 	title: 'Components/Cards/Card',
@@ -12,8 +14,16 @@ const StoryTemplate: StoryFn<typeof Card> = (args) => ({
 	setup() {
 		return { ...args };
 	},
-	template: `
-			<card :header-has-padding="headerHasPadding" :divider-under-header="dividerUnderHeader">
+	template: `<card :header-has-padding="headerHasPadding" 
+			  :divider-under-header="dividerUnderHeader"
+			  :has-border="hasBorder"
+			  :border-position="borderPosition"
+			  :border-size="borderSize"
+			  :border-color="borderColor"
+			  :has-loading-bar="hasLoadingBar"
+			  :loading-bar-color="loadingBarColor"
+			  :loading-bar-time="loadingBarTime"
+		>
 			<template v-if="header" #header>
 				<div v-html="header" />
 			</template>
@@ -23,7 +33,7 @@ const StoryTemplate: StoryFn<typeof Card> = (args) => ({
 			<template v-if="footer" #footer>
 				<div v-html="footer" />
 			</template>
-			</card>`,
+		</card>`,
 });
 
 export const Interactive = StoryTemplate.bind({});
@@ -31,6 +41,13 @@ export const Interactive = StoryTemplate.bind({});
 const args = {
 	headerHasPadding: false,
 	dividerUnderHeader: false,
+	hasBorder: false,
+	borderPosition: CARD_BORDER_POSITIONS.TOP,
+	borderSize: CARD_BORDER_SIZES.LARGE,
+	borderColor: CARD_BORDER_COLORS.NEUTRAL_HEAVY,
+	hasLoadingBar: false,
+	loadingBarColor: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
+	loadingBarTime: '0',
 } as Args;
 
 const argTypes = {
@@ -40,6 +57,22 @@ const argTypes = {
 		defaultValue: 'content slot that supports <b>HTML markup</b>',
 	},
 	footer: { control: { type: 'text' }, defaultValue: 'footer slot' },
+	borderPosition: {
+		control: { type: 'select', options: Object.values(CARD_BORDER_POSITIONS) },
+		defaultValue: CARD_BORDER_POSITIONS.TOP,
+	},
+	borderSize: {
+		control: { type: 'select', options: Object.values(CARD_BORDER_SIZES) },
+		defaultValue: CARD_BORDER_SIZES.LARGE,
+	},
+	borderColor: {
+		control: { type: 'select', options: Object.values(CARD_BORDER_COLORS) },
+		defaultValue: CARD_BORDER_COLORS.NEUTRAL_HEAVY,
+	},
+	loadingBarColor: {
+		control: { type: 'select', options: Object.values(LOADING_BAR_COLORS) },
+		defaultValue: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

package/lib/js/components/Cards/Card/Card.vue

@@ -1,5 +1,20 @@
 <template>
-	<div class="ds-card">
+	<div
+		:class="{
+			'ds-card': true,
+			[borderColorClass]: true,
+			[borderSizeClass]: true,
+			'-ds-top-border': hasTopBoarder,
+			'-ds-left-border': hasLeftBoarder,
+		}"
+	>
+		<ds-loading-bar
+			v-if="hasLoadingBar"
+			class="ds-card__loadingBar"
+			:time="loadingBarTime"
+			:color="loadingBarColor"
+			:size="borderSize"
+		/>
 		<div
 			v-if="$slots.header"
 			class="ds-card__header"
@@ -23,12 +38,85 @@
 @import '../../../../styles/settings/spacings';
 @import '../../../../styles/settings/shadows';
 @import '../../../../styles/settings/radiuses';
+@import '../../../../styles/settings/borders';
 @import '../../../../styles/settings/colors/tokens';
 
 .ds-card {
+	$root: &;
+
 	background-color: $color-default-background;
 	border-radius: $radius-m;
 	box-shadow: $shadow-s;
+	position: relative;
+	width: inherit;
+
+	&.-ds-top-border {
+		border-top: $border-l transparent solid;
+	}
+
+	&.-ds-left-border {
+		border-left: $border-l transparent solid;
+	}
+
+	&.-ds-border-size-small {
+		border-radius: $radius-xs;
+		border-width: $border-s;
+
+		#{$root}__loadingBar {
+			border-radius: $radius-xs $radius-xs 0 0;
+			top: -$border-s;
+		}
+	}
+
+	&.-ds-border-size-medium {
+		border-radius: $radius-s;
+		border-width: $border-m;
+
+		#{$root}__loadingBar {
+			border-radius: $radius-s $radius-s 0 0;
+			top: -$border-m;
+		}
+	}
+
+	&.-ds-border-size-large {
+		border-radius: $radius-m;
+		border-width: $border-l;
+
+		#{$root}__loadingBar {
+			border-radius: $radius-m $radius-m 0 0;
+			top: -$border-l;
+		}
+	}
+
+	&.-ds-border-color-neutralHeavy {
+		border-color: $color-neutral-border-heavy;
+	}
+
+	&.-ds-border-color-neutralStrong {
+		border-color: $color-neutral-border-strong;
+	}
+
+	&.-ds-border-color-success {
+		border-color: $color-success-border;
+	}
+
+	&.-ds-border-color-warning {
+		border-color: $color-warning-border;
+	}
+
+	&.-ds-border-color-danger {
+		border-color: $color-danger-border;
+	}
+
+	&.-ds-border-color-info {
+		border-color: $color-info-border;
+	}
+
+	&__loadingBar {
+		overflow: hidden;
+		position: absolute;
+		width: 100%;
+	}
 
 	&__header {
 		&.-ds-withPadding {
@@ -49,11 +137,21 @@
 </style>
 
 <script lang="ts">
-import DsDivider from '../../Divider/Divider.vue';
+import { PropType } from 'vue';
 
+import DsDivider from '../../Divider/Divider.vue';
+import DsLoadingBar, { LOADING_BAR_COLORS, LoadingBarColors } from '../../LoadingBar';
+import {
+	CARD_BORDER_COLORS,
+	CARD_BORDER_POSITIONS,
+	CARD_BORDER_SIZES,
+	CardBorderColors,
+	CardBorderPositions,
+	CardBorderSizes,
+} from './Card.consts';
 export default {
 	name: 'Card',
-	components: { DsDivider },
+	components: { DsDivider, DsLoadingBar },
 	props: {
 		headerHasPadding: {
 			type: Boolean,
@@ -63,6 +161,62 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		hasBorder: {
+			type: Boolean,
+			default: false,
+		},
+		borderPosition: {
+			type: String as PropType<CardBorderPositions>,
+			default: CARD_BORDER_POSITIONS.TOP,
+		},
+		borderSize: {
+			type: String as PropType<CardBorderSizes>,
+			default: CARD_BORDER_SIZES.LARGE,
+		},
+		borderColor: {
+			type: String as PropType<CardBorderColors>,
+			default: CARD_BORDER_COLORS.NEUTRAL_HEAVY,
+		},
+		hasLoadingBar: {
+			type: Boolean,
+			default: false,
+		},
+		loadingBarColor: {
+			type: String as PropType<LoadingBarColors>,
+			default: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
+		},
+		loadingBarTime: {
+			type: String,
+			default: '0',
+		},
+	},
+
+	computed: {
+		hasLeftBoarder() {
+			return (
+				this.hasBorder &&
+				this.borderPosition === CARD_BORDER_POSITIONS.LEFT &&
+				!this.hasLoadingBar
+			);
+		},
+		hasTopBoarder() {
+			return (
+				(this.hasBorder && this.borderPosition === CARD_BORDER_POSITIONS.TOP) ||
+				this.hasLoadingBar
+			);
+		},
+		borderColorClass() {
+			if (this.hasLoadingBar) {
+				return '-ds-border-color-transparent';
+			}
+			return `-ds-border-color-${this.borderColor}`;
+		},
+		borderSizeClass() {
+			if (!this.hasBorder && !this.hasLoadingBar) {
+				return '';
+			}
+			return `-ds-border-size-${this.borderSize}`;
+		},
 	},
 };
 </script>

package/lib/js/components/Cards/CardExpandable/CardExpandable.vue

@@ -104,9 +104,7 @@ export default {
 			default: false,
 		},
 	},
-	// TODO fix me when touching this file
-	// eslint-disable-next-line vue/require-emit-validator
-	emits: ['update:isExpanded'],
+	emits: { 'update:isExpanded': (payload: Boolean) => true },
 	data() {
 		return {
 			isExpandedInternal: false,

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

@@ -0,0 +1,20 @@
+import { Value } from '../../utils/type.utils';
+
+export const LOADING_BAR_COLORS = {
+	NEUTRAL_HEAVY: 'neutralHeavy',
+	NEUTRAL_STRONG: 'neutralStrong',
+	SUCCESS: 'success',
+	WARNING: 'warning',
+	DANGER: 'danger',
+	INFO: 'info',
+};
+
+export type LoadingBarColors = Value<typeof LOADING_BAR_COLORS>;
+
+export const LOADING_BAR_SIZES = {
+	SMALL: 'small',
+	MEDIUM: 'medium',
+	LARGE: 'large',
+};
+
+export type LoadingBarSizes = Value<typeof LOADING_BAR_SIZES>;

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

@@ -0,0 +1,45 @@
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import LoadingBar from './LoadingBar.vue';
+import { LOADING_BAR_COLORS, LOADING_BAR_SIZES } from './LoadingBar.consts';
+
+export default {
+	title: 'Components/LoadingBar',
+	component: LoadingBar,
+} as Meta<typeof LoadingBar>;
+
+const StoryTemplate: StoryFn<typeof LoadingBar> = (args) => ({
+	components: { DsLoadingBar: LoadingBar },
+	setup() {
+		return { ...args };
+	},
+	template: `<ds-loading-bar :size="size" :color="color" :time="time" />`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {
+	size: LOADING_BAR_SIZES.LARGE,
+	color: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
+	time: '5',
+} as Args;
+
+const argTypes = {
+	size: {
+		control: { type: 'select', options: Object.values(LOADING_BAR_SIZES) },
+		defaultValue: LOADING_BAR_SIZES.LARGE,
+	},
+	color: {
+		control: { type: 'select', options: Object.values(LOADING_BAR_COLORS) },
+		defaultValue: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
+	},
+} 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=8375-32853',
+	},
+};

package/lib/js/components/LoadingBar/LoadingBar.vue

@@ -0,0 +1,114 @@
+<template>
+	<div class="ds-loadingBar" :class="[sizeClassName]">
+		<span
+			:class="['ds-loadingBar__loader', `-ds-border-color-${color}`]"
+			:style="loadingBarStyles"
+		/>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../styles/settings/colors/tokens';
+@import '../../../styles/settings/borders';
+
+.ds-loadingBar {
+	background-color: $color-neutral-background;
+	display: flex;
+
+	&.-ds-size-small {
+		height: $border-s;
+	}
+
+	&.-ds-size-medium {
+		height: $border-m;
+	}
+
+	&.-ds-size-large {
+		height: $border-l;
+	}
+
+	&__loader {
+		width: 0;
+
+		&.-ds-border-color-neutralHeavy {
+			background-color: $color-neutral-border-heavy;
+		}
+
+		&.-ds-border-color-neutralStrong {
+			background-color: $color-neutral-border-strong;
+		}
+
+		&.-ds-border-color-success {
+			background-color: $color-success-border;
+		}
+
+		&.-ds-border-color-warning {
+			background-color: $color-warning-border;
+		}
+
+		&.-ds-border-color-danger {
+			background-color: $color-danger-border;
+		}
+
+		&.-ds-border-color-info {
+			background-color: $color-info-border;
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { PropType } from 'vue';
+import {
+	LOADING_BAR_COLORS,
+	LOADING_BAR_SIZES,
+	LoadingBarColors,
+	LoadingBarSizes,
+} from './LoadingBar.consts';
+
+export default {
+	name: 'LoadingBar',
+	props: {
+		color: {
+			type: String as PropType<LoadingBarColors>,
+			default: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
+		},
+		size: {
+			type: String as PropType<LoadingBarSizes>,
+			default: LOADING_BAR_SIZES.LARGE,
+		},
+		time: {
+			type: String,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			intervalId: 0,
+			width: 0,
+		};
+	},
+	computed: {
+		sizeClassName() {
+			return `-ds-size-${this.size}`;
+		},
+		loadingBarStyles() {
+			return {
+				width: `${this.width}%`,
+				transition: `width ${this.time}s linear`,
+			};
+		},
+	},
+	mounted() {
+		if (this.time === '0') {
+			this.width = 100;
+			return;
+		}
+		// without postponing the width change, the transition won't work,
+		// and the loading bar is 100% width right away
+		setTimeout(() => {
+			this.width = 100;
+		}, 0);
+	},
+};
+</script>

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

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

package/lib/js/icons/fontawesome.ts

@@ -56,6 +56,7 @@ import { faCommentDots } from '@fortawesome/pro-regular-svg-icons/faCommentDots'
 import { faComments } from '@fortawesome/pro-regular-svg-icons/faComments';
 import { faCompress } from '@fortawesome/pro-regular-svg-icons/faCompress';
 import { faCopy } from '@fortawesome/pro-regular-svg-icons/faCopy';
+import { faCreditCard } from '@fortawesome/pro-regular-svg-icons/faCreditCard';
 import { faEarthAmericas } from '@fortawesome/pro-regular-svg-icons/faEarthAmericas';
 import { faEllipsis } from '@fortawesome/pro-regular-svg-icons/faEllipsis';
 import { faEllipsisVertical } from '@fortawesome/pro-regular-svg-icons/faEllipsisVertical';
@@ -259,6 +260,7 @@ export const FONTAWESOME_ICONS = {
 	FA_COMMENTS_QUESTION_CHECK: faCommentsQuestionCheck,
 	FA_COMPRESS: faCompress,
 	FA_COPY: faCopy,
+	FA_CREDIT_CARD: faCreditCard,
 	FA_DOT_CIRCLE_SOLID: fasCircleDot,
 	FA_EARTH_AMERICAS: faEarthAmericas,
 	FA_ELLIPSIS: faEllipsis,

package/lib/js/index.ts

@@ -69,6 +69,8 @@ export { default as SelectListSectionTitle } from './components/SelectList/Selec
 export * from './components/SelectList/SelectListItem/SelectListItem.consts';
 export { default as SelectionTile } from './components/SelectionTile';
 export * from './components/SelectionTile';
+export { default as LoadingBar } from './components/LoadingBar';
+export * from './components/LoadingBar';
 export { default as PopOver } from './components/PopOver';
 export * from './components/PopOver/PopOver.consts';
 export { default as Dropdown } from './components/Dropdown';

package/lib/styles/settings/_borders.scss

@@ -0,0 +1,5 @@
+$border-xs: 1px;
+$border-s: 2px;
+$border-m: 4px;
+$border-l: 6px;
+$border-xl: 8px;

package/package.json

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