From c93d9a8bdcd71e303a8c8506a8189c64d1363c8b Mon Sep 17 00:00:00 2001
From: E De Los Reyes <28296624+dredmonds@users.noreply.github.com>
Date: Thu, 16 May 2024 14:40:30 +0100
Subject: [PATCH] Added field checkboxes option link props to render type of
 win summary details (#6798)

* Added option link parameter to render at FieldCheckboxes component

* Added link props storybook for checkboxes exclusive component

* Added test for type of win summary link name
---
 .../Form/elements/FieldCheckboxes/index.jsx   |  8 +++++-
 .../__stories__/FieldCheckboxes.stories.jsx   | 26 +++++++++++++++++++
 .../specs/export-win/win-details-spec.js      | 25 +++++++++++++++++-
 test/functional/cypress/support/assertions.js |  8 ++++--
 4 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/src/client/components/Form/elements/FieldCheckboxes/index.jsx b/src/client/components/Form/elements/FieldCheckboxes/index.jsx
index 4bd26706f1d..2ef8f966750 100644
--- a/src/client/components/Form/elements/FieldCheckboxes/index.jsx
+++ b/src/client/components/Form/elements/FieldCheckboxes/index.jsx
@@ -97,6 +97,7 @@ const FieldCheckboxes = ({
               value: optionValue,
               label: optionLabel,
               children,
+              link: optionLink,
               ...optionProps
             },
             index
@@ -116,7 +117,12 @@ const FieldCheckboxes = ({
                 {boldLabel ? (
                   <StyledLabel>{optionLabel}</StyledLabel>
                 ) : (
-                  optionLabel
+                  <Fragment key={optionLabel}>
+                    {optionLabel}
+                    {optionLink && (
+                      <Fragment key={optionLink}>{optionLink}</Fragment>
+                    )}
+                  </Fragment>
                 )}
               </Checkbox>
               {value.includes(optionValue) && !!children ? children : null}
diff --git a/src/client/components/Form/elements/__stories__/FieldCheckboxes.stories.jsx b/src/client/components/Form/elements/__stories__/FieldCheckboxes.stories.jsx
index 9e16c3928d2..f7c18ba51ab 100644
--- a/src/client/components/Form/elements/__stories__/FieldCheckboxes.stories.jsx
+++ b/src/client/components/Form/elements/__stories__/FieldCheckboxes.stories.jsx
@@ -1,9 +1,15 @@
 import React from 'react'
 import { H1 } from '@govuk-react/heading'
+import { Details, ListItem, UnorderedList } from 'govuk-react'
+import styled from 'styled-components'
 
 import FieldCheckboxes from '../FieldCheckboxes'
 import Form from '../../../Form'
 
+const StyledDetails = styled(Details)({
+  margin: 0,
+})
+
 const options = [
   {
     label: 'Italy',
@@ -134,6 +140,26 @@ export const CheckboxesExclusive = () => (
               label: 'No, I will not be travelling to any of these countries',
               value: 'no',
             },
+            {
+              label: 'Yes, I will travelling to any of these countries',
+              value: 'yes',
+              link: (
+                <StyledDetails
+                  summary="Is included a territorial independent countries?"
+                  data-test="some-list-of-territorial-countries"
+                >
+                  <p>List of territorial countries:</p>
+                  <UnorderedList listStyleType="bullet">
+                    <ListItem>French Guiana</ListItem>
+                    <ListItem>Madeira and Azores</ListItem>
+                    <ListItem>
+                      Balearic Islands(Ibiza, Formentera, Mallorca and Canary
+                      Islands)
+                    </ListItem>
+                  </UnorderedList>
+                </StyledDetails>
+              ),
+            },
           ]}
         />
         <pre>{JSON.stringify(form, null, 2)}</pre>
diff --git a/test/functional/cypress/specs/export-win/win-details-spec.js b/test/functional/cypress/specs/export-win/win-details-spec.js
index 9ff34ebf1f6..69fa737f592 100644
--- a/test/functional/cypress/specs/export-win/win-details-spec.js
+++ b/test/functional/cypress/specs/export-win/win-details-spec.js
@@ -111,7 +111,7 @@ describe('Win details', () => {
     })
   })
 
-  it('should render Type of win ', () => {
+  it('should render Type of win checkbox options', () => {
     assertFieldCheckboxes({
       element: winDetails.winType,
       legend: 'Type of win',
@@ -132,6 +132,29 @@ describe('Win details', () => {
     })
   })
 
+  it('should render Type of win detailed summary name', () => {
+    assertFieldCheckboxes({
+      element: winDetails.winType,
+      legend: 'Type of win',
+      options: [
+        {
+          label: 'Export',
+          checked: false,
+        },
+        {
+          label: 'Business success',
+          checked: false,
+          link: 'What is business success?',
+        },
+        {
+          label: 'Outward Direct Investment (ODI)',
+          checked: false,
+          link: 'What is an ODI?',
+        },
+      ],
+    })
+  })
+
   it('should render the Breakdowns component for each win type', () => {
     cy.get(winDetails.winType).as('winType')
 
diff --git a/test/functional/cypress/support/assertions.js b/test/functional/cypress/support/assertions.js
index 5bf3372453c..9dc775c662a 100644
--- a/test/functional/cypress/support/assertions.js
+++ b/test/functional/cypress/support/assertions.js
@@ -368,10 +368,14 @@ const assertFieldCheckboxes = ({ element, legend, hint, options = [] }) => {
     .each((label, index) => {
       // Each label wraps an input
       cy.get(label)
-        .should('have.text', options[index].label)
+        .should('contain', options[index].label)
         .find('input[type="checkbox"]')
-        .should(options[index].checked ? 'be.checked' : 'not.be.checked')
         .should('have.attr', 'aria-label', options[index].label)
+        .should(options[index].checked ? 'be.checked' : 'not.be.checked')
+
+      const link = options[index].link
+      // Optional options field parameter
+      link && cy.get(label).find('summary').should('contain', link)
     })
 }