@bethinkpl/design-system 35.0.3 → 35.1.0

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

@@ -83,3 +83,10 @@ export interface ProgressBarRange {
 	icon?: IconItem;
 	data?: string;
 }
+
+export const PROGRESS_BAR_LABEL_DATA_POSITIONS = {
+	TOP: 'top',
+	BOTTOM: 'bottom',
+} as const;
+
+export type ProgressBarLabelDataPositions = Value<typeof PROGRESS_BAR_LABEL_DATA_POSITIONS>;

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

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
 import { mount } from '@vue/test-utils';
 import ProgressBar from './ProgressBar.vue';
 import {
+	PROGRESS_BAR_LABEL_DATA_POSITIONS,
 	PROGRESS_BAR_LAYOUTS,
 	PROGRESS_BAR_RANGE_COLORS,
 	ProgressBarRange,
@@ -33,6 +34,7 @@ const defaultProps = {
 	labelDataSuffix: '(%)',
 	labelTextEllipsis: false,
 	hasLegend: false,
+	labelDataPosition: PROGRESS_BAR_LABEL_DATA_POSITIONS.TOP,
 };
 
 const createComponent = (props = defaultProps) => {

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

@@ -1,6 +1,7 @@
 import ProgressBar from './ProgressBar.vue';
 import {
 	PROGRESS_BAR_BADGE_COLORS,
+	PROGRESS_BAR_LABEL_DATA_POSITIONS,
 	PROGRESS_BAR_LABEL_TEXT_SIZES,
 	PROGRESS_BAR_LAYOUTS,
 	PROGRESS_BAR_RADII,
@@ -98,6 +99,10 @@ const argTypes = {
 	hasLegendPercentValue: {
 		control: 'boolean',
 	},
+	labelDataPosition: {
+		control: 'select',
+		options: Object.values(PROGRESS_BAR_LABEL_DATA_POSITIONS),
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;
@@ -142,6 +147,7 @@ Interactive.args = {
 	hasLegend: false,
 	legendSize: PROGRESS_BAR_LEGEND_SIZES.SMALL,
 	hasLegendPercentValue: true,
+	labelDataPosition: PROGRESS_BAR_LABEL_DATA_POSITIONS.TOP,
 } as Args;
 
 Interactive.parameters = {
@@ -228,6 +234,7 @@ Compact.args = {
 	labelDataSupporting: '100',
 	labelDataSuffix: '(%)',
 	labelTextEllipsis: false,
+	labelDataPosition: PROGRESS_BAR_LABEL_DATA_POSITIONS.TOP,
 } as Args;
 
 export const LegendWithoutIcons = StoryTemplate.bind({});
@@ -259,4 +266,5 @@ LegendWithoutIcons.args = {
 	hasLegend: true,
 	hasLegendPercentValue: true,
 	legendSize: PROGRESS_BAR_LEGEND_SIZES.SMALL,
+	labelDataPosition: PROGRESS_BAR_LABEL_DATA_POSITIONS.TOP,
 } as Args;

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

@@ -16,16 +16,16 @@
 			>
 				{{ labelText }}
 			</div>
-			<div v-if="labelDataExists" class="ds-progressBar__labelDataWrapper">
-				<span v-if="labelData" class="ds-progressBar__labelData">{{ labelData }}</span>
-				<span v-if="labelDataSupporting" class="ds-progressBar__labelDataSupporting">
-					<span class="ds-progressBar__labelDataSeparator">/</span>
-					{{ labelDataSupporting }}
-				</span>
-				<span v-if="labelDataSuffix" class="ds-progressBar__labelDataSuffix">{{
-					labelDataSuffix
-				}}</span>
-			</div>
+
+			<progress-bar-label-data-wrapper
+				v-if="
+					labelDataExists && labelDataPosition === PROGRESS_BAR_LABEL_DATA_POSITIONS.TOP
+				"
+				class="ds-progressBar__labelDataWrapperTop"
+				:label-data="labelData"
+				:label-data-supporting="labelDataSupporting"
+				:label-data-suffix="labelDataSuffix"
+			/>
 		</div>
 		<div
 			class="ds-progressBar__barWrapper"
@@ -62,14 +62,32 @@
 				"
 			/>
 		</div>
-		<progress-bar-legend
-			v-if="hasLegend"
-			class="ds-progressBar__legend"
-			:ranges="ranges"
-			:layout="layout"
-			:size="legendSize"
-			:has-percent-value="hasLegendPercentValue"
-		/>
+		<div class="ds-progressBar__bottomWrapper">
+			<progress-bar-legend
+				v-if="hasLegend"
+				class="ds-progressBar__legend"
+				:ranges="ranges"
+				:layout="layout"
+				:size="legendSize"
+				:has-percent-value="hasLegendPercentValue"
+			/>
+
+			<template
+				v-if="
+					labelDataExists &&
+					labelDataPosition === PROGRESS_BAR_LABEL_DATA_POSITIONS.BOTTOM
+				"
+			>
+				<div v-if="!hasLegend" />
+
+				<progress-bar-label-data-wrapper
+					class="ds-progressBar__labelDataWrapperBottom"
+					:label-data="labelData"
+					:label-data-supporting="labelDataSupporting"
+					:label-data-suffix="labelDataSuffix"
+				/>
+			</template>
+		</div>
 	</div>
 </template>
 
@@ -88,7 +106,6 @@ $progress-bar-xs-height: 4px;
 $progress-bar-border-radius: 8px;
 
 $progress-bar-label-text-max-width: 70%;
-$progress-bar-label-data-max-width: 30%;
 
 $progress-bar-badge-size: 24px;
 $progress-bar-badge-size-small: 16px;
@@ -240,36 +257,6 @@ $progress-bar-badge-colors: (
 		}
 	}
 
-	&__labelDataWrapper {
-		@include label-m-default-bold;
-
-		align-items: baseline;
-		color: $color-neutral-text-heavy;
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: right;
-		margin-bottom: $space-5xs;
-		margin-left: $space-2xs;
-		max-width: $progress-bar-label-data-max-width;
-	}
-
-	&__labelDataSupporting {
-		color: $color-neutral-text;
-		display: flex;
-		margin-left: $space-5xs;
-	}
-
-	&__labelDataSeparator {
-		margin-right: $space-5xs;
-	}
-
-	&__labelDataSuffix {
-		@include label-s-default-regular;
-
-		color: $color-neutral-text-weak;
-		margin-left: $space-4xs;
-	}
-
 	&__range {
 		@each $class, $color-name in $progress-bar-range-colors {
 			&.-ds-#{$class} {
@@ -309,6 +296,21 @@ $progress-bar-badge-colors: (
 			width: $progress-bar-badge-size-small;
 		}
 	}
+
+	&__bottomWrapper {
+		align-items: center;
+		display: flex;
+		gap: $space-4xs;
+		justify-content: space-between;
+	}
+
+	&__labelDataWrapperTop {
+		margin-bottom: $space-5xs;
+	}
+
+	&__labelDataWrapperBottom {
+		padding-top: 10px;
+	}
 }
 </style>
 
@@ -316,11 +318,13 @@ $progress-bar-badge-colors: (
 import { defineComponent, PropType } from 'vue';
 import {
 	PROGRESS_BAR_BADGE_COLORS,
+	PROGRESS_BAR_LABEL_DATA_POSITIONS,
 	PROGRESS_BAR_LABEL_TEXT_SIZES,
 	PROGRESS_BAR_LAYOUTS,
 	PROGRESS_BAR_RADII,
 	PROGRESS_BAR_SIZES,
 	ProgressBarBadgeColor,
+	ProgressBarLabelDataPositions,
 	ProgressBarLabelTextSize,
 	ProgressBarLayout,
 	ProgressBarRadius,
@@ -331,10 +335,12 @@ import {
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 import ProgressBarLegend from './ProgressBarLegend.vue';
 import { PROGRESS_BAR_LEGEND_SIZES, ProgressBarLegendSize } from './ProgressBarLegend.consts';
+import ProgressBarLabelDataWrapper from './ProgressBarLabelDataWrapper.vue';
 
 export default defineComponent({
 	name: 'ProgressBar',
 	components: {
+		ProgressBarLabelDataWrapper,
 		ProgressBarLegend,
 		DsIcon,
 	},
@@ -423,15 +429,20 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		labelDataPosition: {
+			type: String as PropType<ProgressBarLabelDataPositions>,
+			default: PROGRESS_BAR_LABEL_DATA_POSITIONS.TOP,
+		},
 	},
-	data() {
+	setup() {
 		return {
-			PROGRESS_BAR_SIZES: Object.freeze(PROGRESS_BAR_SIZES),
-			PROGRESS_BAR_RADII: Object.freeze(PROGRESS_BAR_RADII),
-			PROGRESS_BAR_LAYOUTS: Object.freeze(PROGRESS_BAR_LAYOUTS),
-			PROGRESS_BAR_LABEL_TEXT_SIZES: Object.freeze(PROGRESS_BAR_LABEL_TEXT_SIZES),
-			ICONS: Object.freeze(ICONS),
-			ICON_SIZES: Object.freeze(ICON_SIZES),
+			PROGRESS_BAR_SIZES,
+			PROGRESS_BAR_RADII,
+			PROGRESS_BAR_LAYOUTS,
+			PROGRESS_BAR_LABEL_TEXT_SIZES,
+			ICONS,
+			ICON_SIZES,
+			PROGRESS_BAR_LABEL_DATA_POSITIONS,
 		};
 	},
 	computed: {

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

@@ -0,0 +1,62 @@
+<template>
+	<div class="ds-progressBarLabelDataWrapper">
+		<span v-if="labelData" class="ds-progressBarLabelDataWrapper__labelData">{{
+			labelData
+		}}</span>
+		<span
+			v-if="labelDataSupporting"
+			class="ds-progressBarLabelDataWrapper__labelDataSupporting"
+		>
+			<span class="ds-progressBarLabelDataWrapper__labelDataSeparator">/</span>
+			{{ labelDataSupporting }}
+		</span>
+		<span v-if="labelDataSuffix" class="ds-progressBarLabelDataWrapper__labelDataSuffix">{{
+			labelDataSuffix
+		}}</span>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../styles/settings/spacings';
+@import '../../../styles/settings/colors/tokens';
+@import '../../../styles/settings/typography/tokens';
+
+$progress-bar-label-data-max-width: 30%;
+
+.ds-progressBarLabelDataWrapper {
+	@include label-m-default-bold;
+
+	align-items: baseline;
+	color: $color-neutral-text-heavy;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: right;
+	margin-left: $space-2xs;
+	max-width: $progress-bar-label-data-max-width;
+
+	&__labelDataSupporting {
+		color: $color-neutral-text;
+		display: flex;
+		margin-left: $space-5xs;
+	}
+
+	&__labelDataSeparator {
+		margin-right: $space-5xs;
+	}
+
+	&__labelDataSuffix {
+		@include label-s-default-regular;
+
+		color: $color-neutral-text-weak;
+		margin-left: $space-4xs;
+	}
+}
+</style>
+
+<script lang="ts" setup>
+defineProps<{
+	labelData?: string;
+	labelDataSupporting?: string;
+	labelDataSuffix?: string;
+}>();
+</script>

package/lib/js/icons/fontawesome.ts

@@ -188,6 +188,7 @@ import { faFileCheck } from '@fortawesome/pro-regular-svg-icons/faFileCheck';
 import { faFileArrowDown } from '@fortawesome/pro-regular-svg-icons/faFileArrowDown';
 import { faArrowDown as fasArrowDown } from '@fortawesome/pro-solid-svg-icons/faArrowDown';
 import { faArrowLeft as fasArrowLeft } from '@fortawesome/pro-solid-svg-icons/faArrowLeft';
+import { faArrowLeftArrowRight as fasArrowLeftArrowRight } from '@fortawesome/pro-solid-svg-icons/faArrowLeftArrowRight';
 import { faArrowRight as fasArrowRight } from '@fortawesome/pro-solid-svg-icons/faArrowRight';
 import { faArrowsLeftRight as fasArrowsLeftRight } from '@fortawesome/pro-solid-svg-icons/faArrowsLeftRight';
 import { faArrowUp as fasArrowUp } from '@fortawesome/pro-solid-svg-icons/faArrowUp';
@@ -285,6 +286,7 @@ export const FONTAWESOME_ICONS = {
 	FA_ARROW_UP_RIGHT_FROM_SQUARE: faArrowUpRightFromSquare,
 	FA_ARROW_UP_SOLID: fasArrowUp,
 	FA_ARROWS_LEFT_RIGHT_SOLID: fasArrowsLeftRight,
+	FA_ARROW_LEFT_ARROW_RIGHT: fasArrowLeftArrowRight,
 	FA_ARROWS_FROM_DOTTED_LINE: faArrowsFromDottedLine,
 	FA_ARROWS_MAXIMIZE: faArrowsMaximize,
 	FA_ARROWS_ROTATE: faArrowsRotate,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "35.0.3",
+  "version": "35.1.0",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",