Merge pull request #993 from Sysvale/feature/support-link-event

feature/support-link-event

Author: jvictordev1

package.json

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

src/components/BaseInput.vue

@@ -38,6 +38,7 @@
 				:tooltip-icon="tooltipIcon"
 				:support-link="supportLink"
 				:support-link-url="supportLinkUrl"
+				@support-link-click="emits('supportLinkClick')"
 			/>
 
 			<div
@@ -380,7 +381,8 @@ const props = defineProps({
 });
 
 const emits = defineEmits({
-	...nativeEvents
+	...nativeEvents,
+	'supportLinkClick': null,
 });
 
 /* REACTIVE DATA */

src/components/Label.vue

@@ -25,12 +25,20 @@
 		</span>
 
 		<CdsLink
-			v-if="supportLink"
+			v-if="supportLink && supportLinkUrl"
 			:href="supportLinkUrl"
 			:text="supportLink"
 			class="label__link"
 			new-tab
 		/>
+
+		<CdsText
+			v-else
+			class="label__link"
+			@click="emits('supportLinkClick')"
+		>
+			{{ supportLink }}
+		</CdsText>
 	</label>
 </template>
 
@@ -80,8 +88,8 @@ defineProps({
 	* Define a url a ser acessada no clique do link de suporte.
 	*/
 	supportLinkUrl: {
-		type: String,
-		default: 'https://cuida.framer.wiki/',
+		type: [String, null],
+		default: null,
 	},
 	/**
 	* Exibe asterisco de obrigatório (obs.: não faz a validação)
@@ -99,6 +107,8 @@ defineProps({
 		required: false,
 	},
 });
+
+const emits = defineEmits(['supportLinkClick']);
 </script>
 
 <style lang="scss" scoped>
@@ -125,6 +135,11 @@ defineProps({
 
 	&__link {
 		justify-self: end;
+		color: tokens.$bn-400;
+		text-decoration: none;
+		transition: tokens.$interaction;
+		border-bottom: 1px solid transparent;
+		cursor: pointer;
 	}
 
 	&__content {

src/stories/components/BaseInput.stories.mdx

@@ -55,6 +55,7 @@ export const Template = (args) => ({
 			@focus="logFocus"
 			@blur="logBlur"
 			@keydown="logKeydown"
+			@supportLinkClick="logLinkClick"
 		>
 			<template #trailing-icon2>
 				OPA
@@ -76,6 +77,9 @@ export const Template = (args) => ({
 		logKeydown(event) {
 			console.info('⚡ %cKeydown emitted: ', 'color: hsl(152, 77.20%, 51.80%);', event);
 		},
+		logLinkClick(event) {
+			console.info('⚡ %clogLinkClick emitted: ', 'color: hsl(152, 77.20%, 51.80%);', event);
+		},
 	},
 	updated() {
 		console.info('%cv-model: ', 'color: #2C70CD;', this.value);

src/tests/__snapshots__/BaseInput.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`BaseInput > renders correctly 1`] = `
 "<div data-v-82c69faf="">
   <!--v-if--><label data-v-c1eb01da="" data-v-82c69faf="" class="label"><span data-v-c1eb01da="" class="label__content">Label <!--v-if--><!--v-if--></span>
-    <!--v-if-->
+    <cdstext data-v-c1eb01da="" class="label__link"></cdstext>
   </label>
   <div data-v-82c69faf="" class="base-input base-input--default">
     <!--v-if-->

src/tests/__snapshots__/DateInput.spec.js.snap

@@ -5,7 +5,7 @@ exports[`DateInput > renders correctly 1`] = `
   <!--v-if-->
   <div data-v-82c69faf="" data-v-fcd39cd1="" variant="green" range="false" mobile="false" showtodaydot="false" highlighttoday="false" mindate="" maxdate="" mode="picking">
     <!--v-if--><label data-v-c1eb01da="" data-v-82c69faf="" class="label"><span data-v-c1eb01da="" class="label__content">Selecione uma data <!--v-if--><!--v-if--></span>
-      <!--v-if-->
+      <cdstext data-v-c1eb01da="" class="label__link"></cdstext>
     </label>
     <div data-v-82c69faf="" class="base-input base-input--default">
       <!--v-if-->

src/tests/__snapshots__/NumberInput.spec.js.snap

@@ -4,7 +4,7 @@ exports[`CdsNumberInput > renders correctly 1`] = `
 "<div id="number-input">
   <div data-v-82c69faf="" money="false" linkurl="https://cuida.framer.wiki/" mobile="false">
     <!--v-if--><label data-v-c1eb01da="" data-v-82c69faf="" class="label"><span data-v-c1eb01da="" class="label__content">Valor <!--v-if--><!--v-if--></span>
-      <!--v-if-->
+      <cdstext data-v-c1eb01da="" class="label__link"></cdstext>
     </label>
     <div data-v-82c69faf="" class="base-input base-input--default">
       <!--v-if-->

src/tests/__snapshots__/RadioButtonGroup.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`RadioButtonGroup > renders correctly 1`] = `
 "<div data-v-575576ed="" class="radio__button" style="--border-color-selected: #377EE1; --background-color: #f6f9fe; --display-vertical: inline-flex;" id="radio-button" value=""><label data-v-c1eb01da="" data-v-575576ed="" class="label"><span data-v-c1eb01da="" class="label__content">Label <!--v-if--><!--v-if--></span>
-    <!--v-if-->
+    <cdstext data-v-c1eb01da="" class="label__link"></cdstext>
   </label>
   <div data-v-575576ed="" class="">
     <div data-v-575576ed="" class="" style=""><label data-v-575576ed="" class="radio-button" disabled="true" for="radio-button-value1"><input data-v-575576ed="" id="radio-button-value1" type="radio" disabled="" value="value1"><label data-v-575576ed="" class="radio-button__content" for="radio-button-value1">

src/tests/__snapshots__/Select.spec.js.snap

@@ -5,7 +5,7 @@ exports[`Select > renders correctly 1`] = `
   <div data-v-96b70cc4="" class="select__container select__container--fit">
     <div data-v-82c69faf="" data-v-96b70cc4="" options="[object Object],[object Object]" searchable="false" width="" optionsfield="value" returnvalue="false" linkurl="https://cuida.framer.wiki/" mobile="false" addable="false" onkeypress="return false;" class="select__input--undefined select__input--fit">
       <!--v-if--><label data-v-c1eb01da="" data-v-82c69faf="" class="label"><span data-v-c1eb01da="" class="label__content">label <!--v-if--><!--v-if--></span>
-        <!--v-if-->
+        <cdstext data-v-c1eb01da="" class="label__link"></cdstext>
       </label>
       <div data-v-82c69faf="" class="base-input base-input--default">
         <!--v-if-->

src/tests/__snapshots__/TextInput.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`TextInput > renders correctly 1`] = `
 "<div data-v-82c69faf="" inputtype="text" linkurl="https://cuida.framer.wiki/" mobile="false" disableautocomplete="false">
   <!--v-if--><label data-v-c1eb01da="" data-v-82c69faf="" class="label"><span data-v-c1eb01da="" class="label__content">Label <!--v-if--><!--v-if--></span>
-    <!--v-if-->
+    <cdstext data-v-c1eb01da="" class="label__link"></cdstext>
   </label>
   <div data-v-82c69faf="" class="base-input base-input--default">
     <!--v-if-->