Enable description for checkboxes and radiobuttons (#1101)

* enable description for checboxes and radiobuttons * remove redundant nullchecks * add layout schema for description and helptext * add cypress test * add checkbox test
Altinn · Apr 21, 2023 · 8470e7c · 8470e7c
1 parent 302555a
commit 8470e7c
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 2 deletions.
diff --git a/schemas/json/layout/layout.schema.v1.json b/schemas/json/layout/layout.schema.v1.json
@@ -662,6 +662,16 @@
           "type": "string",
           "title": "Value",
           "description": "The option value."
+        },
+        "description": {
+          "type": "string",
+          "title": "Description",
+          "description": "A description of the option displayed in Radio- and Checkbox groups. Can be plain text or a text resource binding."
+        },
+        "helpText": {
+          "type": "string",
+          "title": "Help Text",
+          "description": "A help text for the option displayed in Radio- and Checkbox groups. Can be plain text or a text resource binding."
         }
       },
       "required": ["label", "value"]

diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
@@ -132,7 +132,8 @@ export const CheckboxContainerComponent = ({
           checkboxId: `${id}-${option.label.replace(/\s/g, '-')}`,
           checked: selected.includes(option.value),
           label: getTextResource(option.label),
-          helpText: option.helpText && getTextResource(option.helpText),
+          description: getTextResource(option.description),
+          helpText: getTextResource(option.helpText),
         }))}
       />
     </div>

diff --git a/src/layout/RadioButtons/ControlledRadioGroup.tsx b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -79,7 +79,8 @@ export const ControlledRadioGroup = ({
               value: option.value,
               checkboxId: `${id}-${option.label.replace(/\s/g, '-')}`,
               label: getTextResource(option.label),
-              helpText: option.helpText && getTextResource(option.helpText),
+              description: getTextResource(option.description),
+              helpText: getTextResource(option.helpText),
             }))}
           />
         </div>

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -89,6 +89,7 @@ export interface INavigationConfig {
 export interface IOption {
   label: string;
   value: any;
+  description?: string;
   helpText?: string;
 }
 

diff --git a/test/e2e/integration/app-frontend/components.ts b/test/e2e/integration/app-frontend/components.ts
@@ -138,4 +138,23 @@ describe('UI Components', () => {
     // Assert the last click had no effect
     cy.get('#form-content-reasonFarm3').should('be.visible');
   });
+
+  it('description and helptext for options in radio and checkbox groups', () => {
+    cy.goto('changename');
+    cy.get(appFrontend.changeOfName.newFirstName).type('Per');
+    cy.get(appFrontend.changeOfName.newFirstName).blur();
+    cy.get(appFrontend.changeOfName.newLastName).type('Hansen');
+    cy.get(appFrontend.changeOfName.newLastName).blur();
+
+    cy.get(appFrontend.changeOfName.confirmChangeName).findByText('Dette er en beskrivelse.').should('be.visible');
+    cy.get(appFrontend.changeOfName.confirmChangeName).findByRole('button').click();
+    cy.get(appFrontend.changeOfName.confirmChangeName).findByText('Dette er en hjelpetekst.').should('be.visible');
+
+    cy.get(appFrontend.changeOfName.confirmChangeName).find('label').click();
+    cy.get(appFrontend.changeOfName.reasons).should('be.visible');
+
+    cy.get(appFrontend.changeOfName.reasons).findByText('Dette er en beskrivelse.').should('be.visible');
+    cy.get(appFrontend.changeOfName.reasons).findByRole('button').click();
+    cy.get(appFrontend.changeOfName.reasons).findByText('Dette er en hjelpetekst.').should('be.visible');
+  });
 });