Merge pull request #1064 from Sysvale/hotfix/progress-bar-alignment-11071333345092221231

Fix ProgressBar alignment and spacing in aside mode

Author: ezequias21

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.154.7",
+	"version": "3.154.8",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",

package.json

@@ -1,11 +1,15 @@
 <template>
 	<div
 		class="progress-bar"
-		:class="textLeft ? 'progress-bar__left' : ''"
+		:class="[
+			textLeft && !textAside ? 'progress-bar__left' : '',
+			textAside ? 'progress-bar--aside' : '',
+		]"
 	>
 		<span
 			v-if="showText"
 			class="progress-bar__text"
+			:class="textAside ? 'progress-bar__text--aside' : ''"
 		>
 			<!-- @slot Slot padrão da progressBar. Pode ser utilizado para sobrescrever o valor de progresso. -->
 			<slot>
@@ -132,6 +136,10 @@ watch(() => props.value, () => {
 	display: flex;
 	flex-direction: v-bind(textDirection);
 
+	&--aside {
+		gap: 4px;
+	}
+
 	&__content {
 		background-color: tokens.$n-40;
 		border-radius: tokens.$border-radius-extra-large;
@@ -150,7 +158,7 @@ watch(() => props.value, () => {
 
 	&__text--aside {
 		font-weight: tokens.$font-weight-semibold;
-		margin: tokens.ml(3);
+		margin: 0 !important;
 	}
 
 	&__text {

src/components/ProgressBar.vue

@@ -1,13 +1,18 @@
-import { describe, test, expect, beforeEach, vi } from 'vitest';
+import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import DateInput from '../components/DateInput.vue'; // Ajuste o caminho conforme necessário
 import CdsBaseInput from '../components/BaseInput.vue';
-import { DateTime } from 'luxon';
+import { DateTime, Settings } from 'luxon';
 
 describe('DateInput', () => {
 	let wrapper;
 
 	beforeEach(() => {
+		vi.useFakeTimers();
+		const mockDate = new Date(2026, 1, 1);
+		vi.setSystemTime(mockDate);
+		Settings.now = () => mockDate.getTime();
+
 		wrapper = mount(DateInput, {
 			props: {
 				label: 'Selecione uma data',
@@ -17,6 +22,11 @@ describe('DateInput', () => {
 		});
 	});
 
+	afterEach(() => {
+		vi.useRealTimers();
+		Settings.now = () => Date.now();
+	});
+
 	test('renders correctly', () => {
 		expect(wrapper.html()).toMatchSnapshot();
 	});

src/tests/DateInput.spec.js

@@ -47,4 +47,18 @@ describe('ProgressBar', () => {
 
 		expect(wrapper.html()).toMatchSnapshot();
 	});
+
+	test('applies aside classes when textAside is true', async () => {
+		const wrapper = mount(ProgressBar, {
+			props: {
+				value: 0.5,
+				showText: true,
+				textAside: true,
+			},
+		});
+
+		const textElement = wrapper.find('.progress-bar__text');
+		expect(textElement.classes()).toContain('progress-bar__text--aside');
+		expect(wrapper.classes()).toContain('progress-bar--aside');
+	});
 });