feat: add required prop to ColorPicker

docs/.docgen/components-metadata.json

@@ -2867,6 +2867,17 @@
           "value": "'Label'"
         }
       },
+      {
+        "name": "required",
+        "description": "Exibe asterisco de obrigatório (obs.: não faz a validação)",
+        "type": {
+          "name": "boolean"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": "false"
+        }
+      },
       {
         "name": "inline",
         "description": "Quando true passa a mostrar as opções de cores fora do popover.",

docs/components/forms/color-picker.md

@@ -168,6 +168,7 @@ const argsInline = ref({
 	label: "Cor",
 	modelValue: '#2AC092',
 	state: 'default',
+	required: false,
 	errorMessage: 'Campo obrigatório',
 });
 
@@ -176,6 +177,7 @@ const argsWithPopover = ref({
 	popoverHeight: 190,
 	modelValue: '#2AC092',
 	state: 'default',
+	required: false,
 	errorMessage: 'Campo obrigatório',
 });
 

package.json

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

src/components/ColorPicker.vue

@@ -2,6 +2,7 @@
 	<div v-if="inline">
 		<div class="color-picker__label">
 			{{ label }}
+			<CdsRequiredIndicator v-if="required" />
 		</div>
 
 		<div
@@ -36,7 +37,7 @@
 			class="color-picker__trigger"
 			@click.stop="showPopover = !showPopover"
 		>
-			<div class="color-picker__preview" /> 
+			<div class="color-picker__preview" />
 		</div>
 
 		<CdsPopover
@@ -83,6 +84,7 @@
 <script>
 import CdsPopover from './Popover.vue';
 import CdsIcon from './Icon.vue';
+import CdsRequiredIndicator from './RequiredIndicator.vue';
 import sassColorVariables from '../assets/sass/tokens/colors.module.scss';
 import ContrastChecker from '../utils/methods/contrastChecker';
 import paleteBuilder from '../utils/methods/paleteBuilder.js';
@@ -92,6 +94,7 @@ export default {
 	components: {
 		CdsPopover,
 		CdsIcon,
+		CdsRequiredIndicator,
 	},
 
 	props: {
@@ -110,6 +113,13 @@ export default {
 			default: 'Label',
 		},
 		/**
+		* Exibe asterisco de obrigatório (obs.: não faz a validação)
+		*/
+		required: {
+			type: Boolean,
+			default: false,
+		},
+		/**
 		* Quando true passa a mostrar as opções de cores fora do popover.
 		*/
 		inline: {

src/tests/ColorPicker.spec.ts

@@ -15,4 +15,30 @@ describe('ColorPicker', () => {
 
 		expect(wrapper.html()).toMatchSnapshot();
 	});
+
+	test('renders the required indicator when the required prop is true', async () => {
+		const wrapper = mount(ColorPicker, {
+			props: {
+				modelValue: '#000000',
+				required: true,
+				inline: true,
+			},
+		});
+
+		const requiredIndicator = wrapper.findComponent({ name: 'CdsRequiredIndicator' });
+		expect(requiredIndicator.exists()).toBe(true);
+	});
+
+	test('does not render the required indicator in popover mode even if the required prop is true', async () => {
+		const wrapper = mount(ColorPicker, {
+			props: {
+				modelValue: '#000000',
+				required: true,
+				inline: false,
+			},
+		});
+
+		const requiredIndicator = wrapper.findComponent({ name: 'CdsRequiredIndicator' });
+		expect(requiredIndicator.exists()).toBe(false);
+	});
 });

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

@@ -2,7 +2,9 @@
 
 exports[`ColorPicker > renders correctly 1`] = `
 "<div data-v-2c841161="">
-  <div data-v-2c841161="" class="color-picker__label">Label</div>
+  <div data-v-2c841161="" class="color-picker__label">Label
+    <!--v-if-->
+  </div>
   <div data-v-2c841161="" class="color-picker__container">
     <div data-v-2c841161="">
       <div data-v-2c841161="" class="color-picker__swatch--#">