Merge branch 'main' into feat/update-node-compat

package.json

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

src/components/GaugeChart.vue

@@ -113,6 +113,10 @@ export default {
 			};
 		},
 
+		chartProgressValue() {
+			return 198 * (1 - this.value / 100);
+		},
+
 		formatedValue() {
 			return `${this.value.toLocaleString('pt-br', {minimumFractionDigits: 1})}%`;
 		},
@@ -123,7 +127,7 @@ export default {
 <style lang="scss" scoped>
 @import './../assets/sass/tokens.scss';
 
-$stroke-progress: calc(198 * (1 - var(--value) / 100));
+$stroke-progress: v-bind(chartProgressValue);
 
 .responsive-container {
 	height: 100%;

src/components/Link.vue

@@ -70,7 +70,7 @@ export default {
 	width: auto;
 
 	a {
-		color: $bn-500;
+		color: $bn-400;
 		text-decoration: none;
 		transition: $interaction;
 		border-bottom: 1px solid transparent;
@@ -100,7 +100,7 @@ export default {
 	}
 
 	&--bold > a {
-		font-weight: $font-weight-semibold;
+		font-weight: $font-weight-bold;
 	}
 }
 </style>

src/components/PageHeader.vue

@@ -7,11 +7,31 @@
 				{{ title }}
 			</p>
 
-			<p
+			<div
+				v-if="splitedSubtitle.length > 0"
+				class="d-flex"
+			>
+				<span
+					class="page-header__subtitle"
+				>
+					{{ splitedSubtitle[0] }}
+
+					<cds-link
+						:href="url"
+						bold
+					>
+						{{ fancyUrl }}
+					</cds-link>
+
+					{{ splitedSubtitle[1] }}
+				</span>
+			</div>
+			<div
+				v-else
 				class="page-header__subtitle"
 			>
 				{{ subtitle }}
-			</p>
+			</div>
 		</div>
 
 		<div class="page-header__aside-slot">
@@ -22,21 +42,67 @@
 	</header>
 </template>
 <script>
+import CdsLink from '../components/Link.vue';
+
 export default {
+	components: {
+		CdsLink,
+	},
+
 	props: {
+		/**
+		* O título das páginas nas quais o PageHeader será utilizado.
+		*/
 		title: {
 			type: String,
 			required: true,
 		},
+		/**
+		* O subtítulo das páginas nas quais o PageHeader será utilizado.
+		*/
 		subtitle: {
 			type: String,
 			default: null,
 		},
+		/**
+		* Quando ativa, define a largura do PageHeader como 50% do container.
+		*/
 		compact: {
 			type: Boolean,
 			default: false,
 		},
 	},
+
+	data() {
+		return {
+			hasURL: false,
+			url: '',
+			splitedSubtitle: [],
+		};
+	},
+
+	computed:{
+		fancyUrl() {
+			return this.url.split(/http:\/\/|https:\/\//)[1];
+		},
+	},
+
+	mounted() {
+		this.computedSubtitle();
+	},
+
+	methods: {
+		computedSubtitle() {
+			const urlRegex = /\b(?:http:\/\/|https:\/\/)?[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,}(?:\/\S*)?/g;
+
+			const urls = this.subtitle.match(urlRegex);
+
+			if (urls && urls.length > 0) {
+				this.splitedSubtitle = this.subtitle.split(urls[0]);
+				this.url = urls[0];
+			}
+		}
+	}
 };
 </script>
 <style lang="scss">
@@ -56,6 +122,7 @@ export default {
 		&__aside-slot {
 			display: flex;
 			align-items: flex-end;
+			padding: pl(4);
 		}
 
 		&__title {

src/stories/components/PageHeader.stories.mdx

@@ -87,14 +87,19 @@ export const Template = (args) => ({
 
 <br />
 
+## Observações:
+- ⚠️ Quando uma URL é colocada como parte do subtítulo, ela é renderizada como link no componente. Para tanto, a URL deve ser precedidada de http:// ou https://.
+
+<br />
+
 ## Preview
 
 <Canvas>
 	<Story
 		name="PageHeader"
 		args={{
 			title:"Procedimentos",
-			subtitle:"Gerencie os procedimentos cadastrados"
+			subtitle:"Crie painéis e os associe a serviços. Para acessar os painéis de modo externo, acesse https://short.sysvale.com/totem e insira a chave correspondente."
 		}}
 	>
 		{ Template.bind({}) }