Merge pull request #790 from Sysvale/bugfix/radio-button-group-label

Bugfix/radio button group label

Author: RafaelGondi

package.json

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

src/components/RadioButtonGroup.vue

@@ -3,6 +3,17 @@
 		class="radio__button"
 		:style="cssVars"
 	>
+		<div class="radio-button__label">
+			<span>{{ label }}</span>
+
+			<span
+				v-if="required && label"
+				class="radio-button__required"
+			>
+				*
+			</span>
+		</div>
+
 		<div
 			:class="{'button-group': inline }"
 		>
@@ -58,6 +69,20 @@ export default {
 			default: null,
 			required: true,
 		},
+		/**
+		 * Especifica o título do grupo de radio buttons
+		 */
+		label: {
+			type: String,
+			default: 'Label',
+		},
+		/**
+		 * Especifica se o grupo de radio buttons é obrigatório
+		 */
+		required: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * O número de radio buttons a ser renderizado no grupo
 		 */
@@ -211,6 +236,16 @@ export default {
 	gap: 20px;
 	margin: mb(2);
 
+	&__label {
+		@include label;
+		margin: mb(3);
+		color: $n-700;
+	}
+
+	&__required {
+		color: $rc-600;
+	}
+
 	&__container--vertical {
 		margin: mr(4);
 		&:last-child {

src/stories/components/RadioButtonGroup.stories.mdx

@@ -70,8 +70,8 @@ export const Template = (args) => ({
 - Houver 4 ou mais opções. Prefira Dropdowns nesses casos.
 
 ## Obs.:
-- Você pode disabilitar cada um dos radio buttons passando a propriedade ```disable: true```, no respectivo objeto
-no array de opções. Caso você queira disabilitar todo o grupo, você pode setar a prop ```disabled``` como true no componente.
+- Você pode desabilitar cada um dos radio buttons passando a propriedade ```disable: true```, no respectivo objeto
+no array de opções. Caso você queira desabilitar todo o grupo, você pode setar a prop ```disabled``` como true no componente.
 
 <br />
 
@@ -104,6 +104,7 @@ export const options = [
 			disabled: false,
 			variant: 'green',
 			inline: false,
+			label: 'Label'
 		}}
 	>
 		{ Template.bind({}) }

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

@@ -1,3 +1,21 @@
 // Vitest Snapshot v1
 
-exports[`RadioButtonGroup > renders correctly 1`] = `"<span data-v-575576ed=\\"\\" class=\\"radio__button\\" style=\\"--border-color-selected: #377EE1; --background-color: #f6f9fe; --display-vertical: inline-flex;\\" id=\\"radio-button\\" value=\\"\\"><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\\"><div data-v-575576ed=\\"\\" class=\\"content-title\\">Component1</div><!--v-if--></label></label></div><div data-v-575576ed=\\"\\" class=\\"\\" style=\\"\\"><label data-v-575576ed=\\"\\" class=\\"radio-button\\" disabled=\\"false\\" for=\\"radio-button-value2\\"><input data-v-575576ed=\\"\\" id=\\"radio-button-value2\\" type=\\"radio\\" value=\\"value2\\"><label data-v-575576ed=\\"\\" class=\\"radio-button__content\\" for=\\"radio-button-value2\\"><div data-v-575576ed=\\"\\" class=\\"content-title\\">Component2</div><!--v-if--></label></label></div><div data-v-575576ed=\\"\\" class=\\"\\" style=\\"\\"><label data-v-575576ed=\\"\\" class=\\"radio-button\\" disabled=\\"false\\" for=\\"radio-button-value3\\"><input data-v-575576ed=\\"\\" id=\\"radio-button-value3\\" type=\\"radio\\" value=\\"value3\\"><label data-v-575576ed=\\"\\" class=\\"radio-button__content\\" for=\\"radio-button-value3\\"><div data-v-575576ed=\\"\\" class=\\"content-title\\">Component3</div><!--v-if--></label></label></div></div></span>"`;
+exports[`RadioButtonGroup > renders correctly 1`] = `
+"<span data-v-575576ed=\\"\\" class=\\"radio__button\\" style=\\"--border-color-selected: #377EE1; --background-color: #f6f9fe; --display-vertical: inline-flex;\\" id=\\"radio-button\\" value=\\"\\"><div data-v-575576ed=\\"\\" class=\\"radio-button__label\\"><span data-v-575576ed=\\"\\">Label</span>
+<!--v-if-->
+</div>
+<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\\">
+        <div data-v-575576ed=\\"\\" class=\\"content-title\\">Component1</div>
+        <!--v-if-->
+      </label></label></div>
+  <div data-v-575576ed=\\"\\" class=\\"\\" style=\\"\\"><label data-v-575576ed=\\"\\" class=\\"radio-button\\" disabled=\\"false\\" for=\\"radio-button-value2\\"><input data-v-575576ed=\\"\\" id=\\"radio-button-value2\\" type=\\"radio\\" value=\\"value2\\"><label data-v-575576ed=\\"\\" class=\\"radio-button__content\\" for=\\"radio-button-value2\\">
+        <div data-v-575576ed=\\"\\" class=\\"content-title\\">Component2</div>
+        <!--v-if-->
+      </label></label></div>
+  <div data-v-575576ed=\\"\\" class=\\"\\" style=\\"\\"><label data-v-575576ed=\\"\\" class=\\"radio-button\\" disabled=\\"false\\" for=\\"radio-button-value3\\"><input data-v-575576ed=\\"\\" id=\\"radio-button-value3\\" type=\\"radio\\" value=\\"value3\\"><label data-v-575576ed=\\"\\" class=\\"radio-button__content\\" for=\\"radio-button-value3\\">
+        <div data-v-575576ed=\\"\\" class=\\"content-title\\">Component3</div>
+        <!--v-if-->
+      </label></label></div>
+</div></span>"
+`;