diff --git a/package.json b/package.json index cf403a48..ccd6a14c 100644 --- a/package.json +++ b/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", diff --git a/src/components/RadioButtonGroup.vue b/src/components/RadioButtonGroup.vue index b9c94442..b284bc4d 100644 --- a/src/components/RadioButtonGroup.vue +++ b/src/components/RadioButtonGroup.vue @@ -3,6 +3,17 @@ class="radio__button" :style="cssVars" > +
+ {{ label }} + + + * + +
+
@@ -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 { diff --git a/src/stories/components/RadioButtonGroup.stories.mdx b/src/stories/components/RadioButtonGroup.stories.mdx index 4619097c..7cfdd54d 100644 --- a/src/stories/components/RadioButtonGroup.stories.mdx +++ b/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.
@@ -104,6 +104,7 @@ export const options = [ disabled: false, variant: 'green', inline: false, + label: 'Label' }} > { Template.bind({}) } diff --git a/src/tests/__snapshots__/RadioButtonGroup.spec.ts.snap b/src/tests/__snapshots__/RadioButtonGroup.spec.ts.snap index f3c3f5d4..88c3de6e 100644 --- a/src/tests/__snapshots__/RadioButtonGroup.spec.ts.snap +++ b/src/tests/__snapshots__/RadioButtonGroup.spec.ts.snap @@ -1,3 +1,21 @@ // Vitest Snapshot v1 -exports[`RadioButtonGroup > renders correctly 1`] = `"
"`; +exports[`RadioButtonGroup > renders correctly 1`] = ` +"
Label + +
+
+
+
+
+
" +`;