@bethinkpl/design-system 29.2.1 → 29.3.0

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

@@ -10,19 +10,37 @@ import {
 } from './ProgressBar.consts';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { ICONS } from '../Icons/Icon';
+import { PROGRESS_BAR_LEGEND_SIZES } from './ProgressBarLegend.consts';
+import DsBanner, { BANNER_COLORS } from '../Banner';
 
 export default {
-	title: 'Components/ProgressBar',
+	title: 'Components/ProgressBar/ProgressBar',
 	component: ProgressBar,
 } as Meta<typeof ProgressBar>;
 
+function wrapWithContainer(template: string): string {
+	return `<div style="display: inline-flex; flex-direction: column; width: 100%; gap: 20px;">${template}
+<ds-banner v-if="invalidUsage" :color="BANNER_COLORS.WARNING" title="Taka kombinacja jest niezgodna z design systemem!"  />
+</div>
+`;
+}
+
 const StoryTemplate: StoryFn<typeof ProgressBar> = (args) => ({
-	components: { ProgressBar },
+	components: { ProgressBar, DsBanner },
 	setup() {
-		return { args };
+		return { args, BANNER_COLORS };
+	},
+	computed: {
+		invalidUsage() {
+			return (
+				args.legendSize === PROGRESS_BAR_LEGEND_SIZES.MEDIUM &&
+				args.layout === PROGRESS_BAR_LAYOUTS.COMPACT &&
+				args.hasLegend === true
+			);
+		},
 	},
-	template: `
-		<progress-bar v-bind=args></progress-bar>`,
+	template: wrapWithContainer(`<progress-bar v-bind=args></progress-bar>`),
 });
 
 export const Interactive = StoryTemplate.bind({});
@@ -50,6 +68,9 @@ const argTypes = {
 	labelText: {
 		control: 'text',
 	},
+	labelTextEllipsis: {
+		control: 'boolean',
+	},
 	labelData: {
 		control: 'text',
 	},
@@ -67,7 +88,14 @@ const argTypes = {
 		control: 'select',
 		options: Object.values(PROGRESS_BAR_BADGE_COLORS),
 	},
-	labelTextEllipsis: {
+	hasLegend: {
+		control: 'boolean',
+	},
+	legendSize: {
+		control: 'select',
+		options: Object.values(PROGRESS_BAR_LEGEND_SIZES),
+	},
+	hasLegendPercentValue: {
 		control: 'boolean',
 	},
 } as ArgTypes;
@@ -81,27 +109,39 @@ Interactive.args = {
 			color: PROGRESS_BAR_RANGE_COLORS.INFO,
 			start: 0,
 			length: 30,
+			label: 'First Label',
+			data: 'First Data',
+			icon: ICONS.FA_ADDRESS_CARD,
 		} as ProgressBarRange,
 		{
 			color: PROGRESS_BAR_RANGE_COLORS.INFO_WEAK,
 			start: 30,
 			length: 10,
+			label: 'Second Label',
+			data: 'Second Data',
+			icon: ICONS.FA_CARDS_BLANK,
 		} as ProgressBarRange,
 		{
 			color: PROGRESS_BAR_RANGE_COLORS.INFO_GHOST,
 			start: 40,
 			length: 10,
+			label: 'Third Label',
+			data: 'Third Data',
+			icon: ICONS.FA_CIRCLE_ARROW_LEFT,
 		} as ProgressBarRange,
 	],
 	radius: PROGRESS_BAR_RADII.DEFAULT,
 	layout: PROGRESS_BAR_LAYOUTS.DEFAULT,
 	labelText: 'Label text',
+	labelTextEllipsis: false,
 	labelData: '30',
 	labelDataSupporting: '100',
 	labelDataSuffix: '(%)',
 	badgePosition: '50',
 	badgeColor: PROGRESS_BAR_BADGE_COLORS.INFO,
-	labelTextEllipsis: false,
+	hasLegend: false,
+	legendSize: PROGRESS_BAR_LEGEND_SIZES.SMALL,
+	hasLegendPercentValue: true,
 } as Args;
 
 Interactive.parameters = {
@@ -189,3 +229,34 @@ Compact.args = {
 	labelDataSuffix: '(%)',
 	labelTextEllipsis: false,
 } as Args;
+
+export const LegendWithoutIcons = StoryTemplate.bind({});
+
+LegendWithoutIcons.argTypes = argTypes;
+LegendWithoutIcons.args = {
+	layout: PROGRESS_BAR_LAYOUTS.DEFAULT,
+	ranges: [
+		{
+			color: PROGRESS_BAR_RANGE_COLORS.SUCCESS,
+			start: 0,
+			length: 30,
+			label: 'First Label',
+			data: 'First Data',
+		} as ProgressBarRange,
+		{
+			color: PROGRESS_BAR_RANGE_COLORS.WARNING,
+			start: 30,
+			length: 10,
+			label: 'Second Label',
+			data: 'Second Data',
+		} as ProgressBarRange,
+	],
+	labelText: 'Label text',
+	labelData: '30',
+	labelDataSupporting: '100',
+	labelDataSuffix: '(%)',
+	labelTextEllipsis: false,
+	hasLegend: true,
+	hasLegendPercentValue: true,
+	legendSize: PROGRESS_BAR_LEGEND_SIZES.SMALL,
+} as Args;

package/lib/js/components/ProgressBar/ProgressBar.vue

@@ -62,6 +62,14 @@
 				"
 			/>
 		</div>
+		<progress-bar-legend
+			v-if="hasLegend"
+			class="ds-progressBar__legend"
+			:ranges="ranges"
+			:layout="layout"
+			:size="legendSize"
+			:has-percent-value="hasLegendPercentValue"
+		/>
 	</div>
 </template>
 
@@ -321,10 +329,13 @@ import {
 } from './ProgressBar.consts';
 
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
+import ProgressBarLegend from './ProgressBarLegend.vue';
+import { PROGRESS_BAR_LEGEND_SIZES, ProgressBarLegendSize } from './ProgressBarLegend.consts';
 
 export default defineComponent({
 	name: 'ProgressBar',
 	components: {
+		ProgressBarLegend,
 		DsIcon,
 	},
 	props: {
@@ -360,7 +371,7 @@ export default defineComponent({
 			},
 		},
 		layout: {
-			type: String,
+			type: String as PropType<ProgressBarLayout>,
 			default: PROGRESS_BAR_LAYOUTS.DEFAULT,
 			validator(size: ProgressBarLayout) {
 				return Object.values(PROGRESS_BAR_LAYOUTS).includes(size);
@@ -400,6 +411,18 @@ export default defineComponent({
 				return Object.values(PROGRESS_BAR_BADGE_COLORS).includes(color);
 			},
 		},
+		hasLegend: {
+			type: Boolean,
+			default: false,
+		},
+		legendSize: {
+			type: String as PropType<ProgressBarLegendSize>,
+			default: PROGRESS_BAR_LEGEND_SIZES.SMALL,
+		},
+		hasLegendPercentValue: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

package/lib/js/components/ProgressBar/ProgressBarLegend.consts.ts

@@ -0,0 +1,15 @@
+import { Value } from '../../utils/type.utils';
+
+export const PROGRESS_BAR_LEGEND_LAYOUTS = {
+	DEFAULT: 'default',
+	COMPACT: 'compact',
+} as const;
+
+export type ProgressBarLegendLayout = Value<typeof PROGRESS_BAR_LEGEND_LAYOUTS>;
+
+export const PROGRESS_BAR_LEGEND_SIZES = {
+	SMALL: 'small',
+	MEDIUM: 'medium',
+} as const;
+
+export type ProgressBarLegendSize = Value<typeof PROGRESS_BAR_LEGEND_SIZES>;

package/lib/js/components/ProgressBar/ProgressBarLegend.stories.ts

@@ -0,0 +1,97 @@
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import ProgressBarLegend from './ProgressBarLegend.vue';
+import { PROGRESS_BAR_LEGEND_LAYOUTS, PROGRESS_BAR_LEGEND_SIZES } from './ProgressBarLegend.consts';
+import {
+	PROGRESS_BAR_LAYOUTS,
+	PROGRESS_BAR_RANGE_COLORS,
+	ProgressBarRange,
+} from './ProgressBar.consts';
+import { ICONS } from '../Icons/Icon';
+import DsBanner, { BANNER_COLORS } from '../Banner';
+
+export default {
+	title: 'Components/ProgressBar/ProgressBarLegend',
+	component: ProgressBarLegend,
+} as Meta<typeof ProgressBarLegend>;
+
+function wrapWithContainer(template: string): string {
+	return `<div style="display: inline-flex; flex-direction: column; width: 100%; gap: 20px;">${template}
+<ds-banner v-if="invalidUsage" :color="BANNER_COLORS.WARNING" title="Taka kombinacja jest niezgodna z design systemem!"  />
+</div>
+`;
+}
+
+const StoryTemplate: StoryFn<typeof ProgressBarLegend> = (args) => ({
+	components: { ProgressBarLegend, DsBanner },
+	setup() {
+		return { args, BANNER_COLORS };
+	},
+	computed: {
+		invalidUsage() {
+			return (
+				args.size === PROGRESS_BAR_LEGEND_SIZES.MEDIUM &&
+				args.layout === PROGRESS_BAR_LEGEND_LAYOUTS.COMPACT
+			);
+		},
+	},
+	template: wrapWithContainer(`<progress-bar-legend v-bind=args></progress-bar-legend>`),
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const argTypes = {
+	size: {
+		control: 'select',
+		options: Object.values(PROGRESS_BAR_LEGEND_SIZES),
+	},
+	ranges: {
+		control: 'object',
+	},
+	layout: {
+		control: 'select',
+		options: Object.values(PROGRESS_BAR_LEGEND_LAYOUTS),
+	},
+	hasPercentValue: {
+		control: 'boolean',
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = {
+	size: PROGRESS_BAR_LEGEND_SIZES.SMALL,
+	ranges: [
+		{
+			color: PROGRESS_BAR_RANGE_COLORS.INFO,
+			start: 0,
+			length: 30,
+			label: 'First Label',
+			data: 'First Data',
+			icon: ICONS.FA_ADDRESS_CARD,
+		} as ProgressBarRange,
+		{
+			color: PROGRESS_BAR_RANGE_COLORS.INFO_WEAK,
+			start: 30,
+			length: 10,
+			label: 'Second Label',
+			data: 'Second Data',
+			icon: ICONS.FA_CARDS_BLANK,
+		} as ProgressBarRange,
+		{
+			color: PROGRESS_BAR_RANGE_COLORS.INFO_GHOST,
+			start: 40,
+			length: 10,
+			label: 'Third Label',
+			data: 'Third Data',
+			icon: ICONS.FA_CIRCLE_ARROW_LEFT,
+		} as ProgressBarRange,
+	],
+	layout: PROGRESS_BAR_LAYOUTS.DEFAULT,
+	hasPercentValue: true,
+} as Args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=14650-3488&m=dev',
+	},
+};

package/lib/js/components/ProgressBar/ProgressBarLegend.vue

@@ -0,0 +1,62 @@
+<template>
+	<div
+		class="ds-progressBarLegend"
+		:class="{
+			'-ds-compact': layout === PROGRESS_BAR_LEGEND_LAYOUTS.COMPACT,
+			'-ds-small': size === PROGRESS_BAR_LEGEND_SIZES.SMALL,
+		}"
+	>
+		<progress-bar-legend-item
+			v-for="(data, index) in ranges"
+			:key="index"
+			:size="size"
+			:color="data.color"
+			:data="data.data"
+			:label="data.label"
+			:icon="data.icon"
+			:percent-value="hasPercentValue ? data.length?.toString() : undefined"
+		/>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../styles/settings/spacings';
+
+.ds-progressBarLegend {
+	display: flex;
+	flex-wrap: wrap;
+	gap: $space-xs $space-m;
+	padding-top: $space-xs;
+
+	&.-ds-compact {
+		gap: $space-2xs $space-s;
+	}
+
+	&.-ds-small {
+		padding-top: $space-2xs;
+	}
+}
+</style>
+
+<script setup lang="ts">
+import {
+	PROGRESS_BAR_LEGEND_LAYOUTS,
+	PROGRESS_BAR_LEGEND_SIZES,
+	ProgressBarLegendLayout,
+	ProgressBarLegendSize,
+} from './ProgressBarLegend.consts';
+import ProgressBarLegendItem from './ProgressBarLegendItem.vue';
+import { ProgressBarRange } from './ProgressBar.consts';
+
+const {
+	layout = PROGRESS_BAR_LEGEND_LAYOUTS.DEFAULT,
+	ranges,
+	size = PROGRESS_BAR_LEGEND_SIZES.SMALL,
+	hasPercentValue = true,
+} = defineProps<{
+	layout?: ProgressBarLegendLayout;
+	ranges: Array<ProgressBarRange>;
+	size?: ProgressBarLegendSize;
+	hasPercentValue?: boolean;
+}>();
+</script>

package/lib/js/components/ProgressBar/ProgressBarLegendItem.stories.ts

@@ -0,0 +1,76 @@
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import ProgressBarLegendItem from './ProgressBarLegendItem.vue';
+import { PROGRESS_BAR_LEGEND_SIZES } from './ProgressBarLegend.consts';
+import { ICONS } from '../Icons/Icon';
+import { PROGRESS_BAR_RANGE_COLORS } from './ProgressBar.consts';
+
+export default {
+	title: 'Components/ProgressBar/ProgressBarLegendItem',
+	component: ProgressBarLegendItem,
+} as Meta<typeof ProgressBarLegendItem>;
+
+const StoryTemplate: StoryFn<typeof ProgressBarLegendItem> = (args) => ({
+	components: { ProgressBarLegendItem },
+	setup() {
+		return { args };
+	},
+	template: `
+		<progress-bar-legend-item :label="args.label" :data="args.data" :percent-value="args.percentValue" :size="args.size" :color="args.color" :icon="icon"></progress-bar-legend-item>`,
+	data() {
+		return {
+			ICONS: Object.freeze(ICONS),
+		};
+	},
+	computed: {
+		icon: () => {
+			if (args.icon) {
+				return ICONS[args.icon];
+			}
+
+			return null;
+		},
+	},
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const argTypes = {
+	size: {
+		control: 'select',
+		options: Object.values(PROGRESS_BAR_LEGEND_SIZES),
+	},
+	color: {
+		control: 'select',
+		options: Object.values(PROGRESS_BAR_RANGE_COLORS),
+	},
+	icon: {
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
+	},
+	label: {
+		control: 'text',
+	},
+	data: {
+		control: 'text',
+	},
+	percentValue: {
+		control: 'text',
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = {
+	size: PROGRESS_BAR_LEGEND_SIZES.SMALL,
+	color: PROGRESS_BAR_RANGE_COLORS.PRIMARY,
+	icon: null,
+	label: 'Random label',
+	data: 'Some Data',
+	percentValue: '10',
+} as Args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=14650-1822&m=dev',
+	},
+};

package/lib/js/components/ProgressBar/ProgressBarLegendItem.vue

@@ -0,0 +1,263 @@
+<template>
+	<div
+		class="ds-progressBarLegendItem"
+		:class="{ '-ds-small': size === PROGRESS_BAR_LEGEND_SIZES.SMALL }"
+	>
+		<template v-if="size === PROGRESS_BAR_LEGEND_SIZES.MEDIUM">
+			<div class="ds-progressBarLegendItem__label">{{ label }}</div>
+			<div class="ds-progressBarLegendItem__wrapper">
+				<div
+					class="ds-progressBarLegendItem__dataIndicator"
+					:class="{ '-ds-hasIcon': !!icon, [`-ds-${color}`]: true }"
+				>
+					<ds-icon
+						v-if="icon"
+						class="ds-progressBarLegendItem__icon"
+						:size="ICON_SIZES.XX_SMALL"
+						:icon="icon"
+					/>
+				</div>
+				<div class="ds-progressBarLegendItem__dataWrapper">
+					<span class="ds-progressBarLegendItem__data">{{ data }}</span>
+					<span
+						v-if="renderedPercentValue"
+						class="ds-progressBarLegendItem__percentValue"
+					>
+						{{ renderedPercentValue }}
+					</span>
+				</div>
+			</div>
+		</template>
+		<template v-else>
+			<div class="ds-progressBarLegendItem__wrapper">
+				<div
+					class="ds-progressBarLegendItem__dataIndicator"
+					:class="{ '-ds-hasIcon': !!icon, [`-ds-${color}`]: true }"
+				>
+					<ds-icon
+						v-if="icon"
+						class="ds-progressBarLegendItem__icon"
+						:size="ICON_SIZES.XXX_SMALL"
+						:icon="icon"
+					/>
+				</div>
+				<div class="ds-progressBarLegendItem__label">{{ label }}</div>
+				<div class="ds-progressBarLegendItem__dataWrapper">
+					<span class="ds-progressBarLegendItem__data">{{ data }}</span>
+					<span
+						v-if="renderedPercentValue"
+						class="ds-progressBarLegendItem__percentValue"
+					>
+						{{ renderedPercentValue }}
+					</span>
+				</div>
+			</div>
+		</template>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../styles/settings/spacings';
+@import '../../../styles/settings/typography/tokens';
+@import '../../../styles/settings/colors/tokens';
+
+$progress-bar-legend-item-colors: (
+	'primaryMedium': (
+		'background': $color-primary-data-medium,
+		'iconColor': $color-inverted-icon,
+	),
+	'primary': (
+		'background': $color-primary-data,
+		'iconColor': $color-inverted-icon,
+	),
+	'primaryWeak': (
+		'background': $color-primary-data-weak,
+		'iconColor': $color-inverted-icon,
+	),
+	'primaryGhost': (
+		'background': $color-primary-data-ghost,
+		'iconColor': $color-primary-icon,
+	),
+	'neutralMedium': (
+		'background': $color-neutral-data-medium,
+		'iconColor': $color-inverted-icon,
+	),
+	'neutral': (
+		'background': $color-neutral-data,
+		'iconColor': $color-inverted-icon,
+	),
+	'neutralWeak': (
+		'background': $color-neutral-data-weak,
+		'iconColor': $color-inverted-icon,
+	),
+	'neutralGhost': (
+		'background': $color-neutral-data-ghost,
+		'iconColor': $color-neutral-icon,
+	),
+	'infoMedium': (
+		'background': $color-info-data-medium,
+		'iconColor': $color-inverted-icon,
+	),
+	'info': (
+		'background': $color-info-data,
+		'iconColor': $color-inverted-icon,
+	),
+	'infoWeak': (
+		'background': $color-info-data-weak,
+		'iconColor': $color-inverted-icon,
+	),
+	'infoGhost': (
+		'background': $color-info-data-ghost,
+		'iconColor': $color-info-icon,
+	),
+	'successMedium': (
+		'background': $color-success-data-medium,
+		'iconColor': $color-inverted-icon,
+	),
+	'success': (
+		'background': $color-success-data,
+		'iconColor': $color-inverted-icon,
+	),
+	'successWeak': (
+		'background': $color-success-data-weak,
+		'iconColor': $color-inverted-icon,
+	),
+	'successGhost': (
+		'background': $color-success-data-ghost,
+		'iconColor': $color-success-icon,
+	),
+	'warningMedium': (
+		'background': $color-warning-data-medium,
+		'iconColor': $color-inverted-icon,
+	),
+	'warning': (
+		'background': $color-warning-data,
+		'iconColor': $color-inverted-icon,
+	),
+	'warningWeak': (
+		'background': $color-warning-data-weak,
+		'iconColor': $color-inverted-icon,
+	),
+	'warningGhost': (
+		'background': $color-warning-data-ghost,
+		'iconColor': $color-warning-icon,
+	),
+	'failMedium': (
+		'background': $color-fail-data-medium,
+		'iconColor': $color-inverted-icon,
+	),
+	'fail': (
+		'background': $color-fail-data,
+		'iconColor': $color-inverted-icon,
+	),
+	'failWeak': (
+		'background': $color-fail-data-weak,
+		'iconColor': $color-inverted-icon,
+	),
+	'failGhost': (
+		'background': $color-fail-data-ghost,
+		'iconColor': $color-fail-icon,
+	),
+);
+
+.ds-progressBarLegendItem {
+	$self: &;
+
+	align-items: flex-start;
+	display: inline-flex;
+	flex-direction: column;
+	gap: $space-4xs;
+
+	&__label {
+		@include label-xs-extensive-bold-uppercase;
+
+		color: $color-neutral-text;
+	}
+
+	&__wrapper {
+		align-items: center;
+		display: flex;
+		gap: $space-4xs;
+	}
+
+	&__dataIndicator {
+		@each $class, $color-map in $progress-bar-legend-item-colors {
+			&.-ds-#{$class} {
+				background: map-get($color-map, 'background');
+				color: map-get($color-map, 'iconColor');
+				fill: map-get($color-map, 'iconColor');
+			}
+		}
+
+		align-items: center;
+		border-radius: 100px;
+		display: flex;
+		height: $space-m;
+		justify-content: center;
+		margin-right: $space-5xs;
+		width: $space-m;
+	}
+
+	&__dataWrapper {
+		align-items: baseline;
+		display: flex;
+		gap: $space-5xs;
+	}
+
+	&__data {
+		@include text-s-default-bold;
+
+		color: $color-neutral-text-strong;
+	}
+
+	&__percentValue {
+		@include info-s-default-regular;
+
+		color: $color-neutral-text;
+	}
+
+	&.-ds-small {
+		#{$self}__label {
+			@include label-m-default-regular;
+
+			color: $color-neutral-text-strong;
+		}
+
+		#{$self}__dataIndicator {
+			height: $space-s;
+			width: $space-s;
+		}
+	}
+}
+</style>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import DsIcon, { ICON_SIZES, IconItem } from '../Icons/Icon';
+import { ProgressBarRangeColor } from './ProgressBar.consts';
+import { PROGRESS_BAR_LEGEND_SIZES, ProgressBarLegendSize } from './ProgressBarLegend.consts';
+
+const {
+	size = PROGRESS_BAR_LEGEND_SIZES.SMALL,
+	color,
+	icon = null,
+	label = '',
+	data = '',
+	percentValue = '',
+} = defineProps<{
+	size?: ProgressBarLegendSize;
+	color: ProgressBarRangeColor;
+	icon?: IconItem | null;
+	label?: string;
+	data?: string;
+	percentValue?: string;
+}>();
+
+const renderedPercentValue = computed(() => {
+	if (!percentValue) {
+		return undefined;
+	}
+
+	return `(${percentValue}%)`;
+});
+</script>