Merge pull request #420 from DTS-STN/sch-140619-ptc

Sch 140619 ptc
DTS-STN · Oct 31, 2023 · b40fb9a · b40fb9a
2 parents 451bef3 + c48f963
commit b40fb9a
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 55 deletions.
diff --git a/__tests__/components/PhaseBanner.test.js b/__tests__/components/PhaseBanner.test.js
@@ -36,11 +36,10 @@ describe('PhaseBanner', () => {
       <PhaseBanner
         bannerBoldText={'bannerBoldText'}
         bannerText={'bannerText'}
-        bannerLink={'bannerLink'}
-        bannerLinkHref={'bannerLinkHref'}
+        bannerSummaryTitle={'bannerSummaryTitle'}
+        bannerSummaryContent={'bannerSummaryContent'}
         bannerButtonText={'bannerButtonText'}
         bannerButtonLink={'bannerButtonLink'}
-        icon={'bell'}
         popupContent={{
           popupId: 'popup id',
           popupTitle: 'pop up title',
@@ -51,12 +50,12 @@ describe('PhaseBanner', () => {
       ></PhaseBanner>
     )
     const bannerBoldText = screen.getByText('bannerBoldText')
-    const bannerText = screen.getByText('bannerText')
-    const bannerLink = screen.getByText('bannerLink')
+    const bannerSummaryTitle = screen.getByText('bannerSummaryTitle')
+    const bannerSummaryContent = screen.getByText('bannerSummaryContent')
     const bannerButtonText = screen.getByText('bannerButtonText')
     expect(bannerBoldText).toBeInTheDocument()
-    expect(bannerText).toBeInTheDocument()
-    expect(bannerLink).toBeInTheDocument()
+    expect(bannerSummaryTitle).toBeInTheDocument()
+    expect(bannerSummaryContent).toBeInTheDocument()
     expect(bannerButtonText).toBeInTheDocument()
   })
 
@@ -65,11 +64,10 @@ describe('PhaseBanner', () => {
       <PhaseBanner
         bannerBoldText={'bannerBoldText'}
         bannerText={'bannerText'}
-        bannerLink={'bannerLink'}
-        bannerLinkHref={'bannerLinkHref'}
+        bannerSummaryTitle={'bannerSummaryTitle'}
+        bannerSummaryContent={'bannerSummaryContent'}
         bannerButtonText={'bannerButtonText'}
         bannerButtonLink={'bannerButtonLink'}
-        icon={'bell'}
         popupContent={{
           popupId: 'popup id',
           popupTitle: 'pop up title',

diff --git a/components/ContextualAlert.js b/components/ContextualAlert.js
@@ -87,8 +87,7 @@ ContextualAlert.propTypes = {
   /**
    * heading text
    */
-  message_heading: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
-    .isRequired,
+  message_heading: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   /**
    * body text
    */

diff --git a/components/Layout.js b/components/Layout.js
@@ -56,8 +56,8 @@ export default function Layout(props) {
         <PhaseBanner
           bannerBoldText={props.bannerContent.bannerBoldText || ''}
           bannerText={props.bannerContent.bannerText || ''}
-          bannerLink={props.bannerContent.bannerLink || ''}
-          bannerLinkHref={props.bannerContent.bannerLinkHref || ''}
+          bannerSummaryTitle={props.bannerContent.bannerSummaryTitle || ''}
+          bannerSummaryContent={props.bannerContent.bannerSummaryContent || ''}
           bannerButtonText={props.bannerContent.bannerButtonText || ''}
           bannerButtonLink={props.bannerContent.bannerButtonLink || ''}
           id={props.bannerContent.id || ''}
@@ -188,8 +188,8 @@ Layout.defaultProps = {
   bannerContent: {
     bannerBoldText: '',
     bannerText: '',
-    bannerLink: '',
-    bannerLinkHref: '',
+    bannerSummaryTitle: '',
+    bannerSummaryContent: '',
     bannerButtonText: '',
     bannerButtonLink: '',
     icon: '',
@@ -239,11 +239,10 @@ Layout.propTypes = {
   bannerContent: PropTypes.shape({
     bannerBoldText: PropTypes.string.isRequired,
     bannerText: PropTypes.string.isRequired,
-    bannerLink: PropTypes.string.isRequired,
-    bannerLinkHref: PropTypes.string.isRequired,
+    bannerSummaryTitle: PropTypes.string.isRequired,
+    bannerSummaryContent: PropTypes.string.isRequired,
     bannerButtonText: PropTypes.string.isRequired,
     bannerButtonLink: PropTypes.string.isRequired,
-    icon: PropTypes.string.isRequired,
   }),
   /*
    * popupContent

diff --git a/components/PhaseBanner.js b/components/PhaseBanner.js
@@ -1,9 +1,9 @@
 import propTypes from 'prop-types'
 import Button from '../components/Button'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { icon } from '../lib/loadIcons'
 import React from 'react'
 
+import Markdown from 'markdown-to-jsx'
+
 /**
  * Displays the PhaseBanner on the page
  */
@@ -20,24 +20,42 @@ export default function PhaseBanner(props) {
             <span className="font-bold">{props.bannerBoldText || ''} </span>
             {props.bannerText}
           </p>
-          <a
-            href={props.bannerLinkHref}
-            className="text-xl text-deep-blue-dark hover:text-blue-hover"
-            target={props.bannerButtonExternalLink ? '_blank' : undefined}
-            rel={
-              props.bannerButtonExternalLink ? 'noopener noreferrer' : undefined
-            }
-            data-gc-analytics-customclick={`ESDC-EDSC:${props.refPageAA}:${props.id}`}
+          <details
+            key={props.id}
+            id={props.id}
+            className="mb-5px text-gray-darker text-20px font-body"
+            data-testid="learn-more"
           >
-            <span className="mr-2 underline">{props.bannerLink}</span>
-            {props.bannerButtonExternalLink && (
-              <span className="sr-only">{props.bannerButtonExternalText} </span>
-            )}
-            <FontAwesomeIcon
-              width="14"
-              icon={icon[props.icon]}
-            ></FontAwesomeIcon>
-          </a>
+            <summary
+              key={`summary-${props.id}`}
+              className=" text-deep-blue-60d hover:text-blue-hover hover:underline border border-gray-40 rounded px-15px py-5px cursor-pointer select-none outline-none"
+            >
+              {props.bannerSummaryTitle}
+            </summary>
+            <div
+              className="border border-gray-40 rounded-b px-18px py-5px cursor-pointer select-none outline-none"
+              data-gc-analytics-customclick={`ESDC-EDSC:${props.refPageAA}:${props.id}`}
+            >
+              <Markdown
+                options={{
+                  overrides: {
+                    p: {
+                      props: {
+                        className: ' mb-3',
+                      },
+                    },
+                    ul: {
+                      props: {
+                        className: ' list-disc ml-2 sm:mx-8 mb-3',
+                      },
+                    },
+                  },
+                }}
+              >
+                {props.bannerSummaryContent}
+              </Markdown>
+            </div>
+          </details>
         </div>
         <Button
           id="bannerButton"
@@ -66,11 +84,11 @@ PhaseBanner.propTypes = {
   /**
    * Phasebanner Link text
    */
-  bannerLink: propTypes.string,
+  bannerSummaryTitle: propTypes.string,
   /**
    * Phasebanner Link href
    */
-  bannerLinkHref: propTypes.string,
+  bannerSummaryContent: propTypes.string,
   /**
    * Phasebanner Button Text
    */

diff --git a/graphql/mappers/beta-banner-opt-out.js b/graphql/mappers/beta-banner-opt-out.js
@@ -6,44 +6,45 @@ export async function getBetaBannerContent() {
   const queryDictionary = require('../queries/dictionary.graphql')
   const resOptOut = await clientQuery(queryOptOut)
   const resDictionary = await clientQuery(queryDictionary)
-
   const resOptOutContent = resOptOut.data.schContentV1ByPath.item || {}
   const resDictionaryContent = resDictionary.data.dictionaryV1List.items || {}
 
   const mappedBanner = {
     en: {
       bannerBoldText: resOptOutContent.scContentEn.json[0].content[0].value,
       bannerText: resOptOutContent.scContentEn.json[0].content[1].value,
-      bannerLink: resOptOutContent.scFragments[0].scLinkTextEn,
-      bannerLinkHref: resOptOutContent.scFragments[0].scDestinationURLEn,
-      bannerButtonText: resOptOutContent.scFragments[1].scLinkTextEn,
+      bannerButtonText: resOptOutContent.scFragments[0].scLinkTextEn,
       bannerButtonExternalText: resDictionaryContent.find(
         (entry) => entry.scId === 'opens-in-a-new-tab'
       ).scTermEn,
       bannerButtonLink:
         buildLink(
-          resOptOutContent.scFragments[1].schURLType,
-          resOptOutContent.scFragments[1].scDestinationURLEn
+          resOptOutContent.scFragments[0].schURLType,
+          resOptOutContent.scFragments[0].scDestinationURLEn
         ) || '/',
-      icon: resOptOutContent.scFragments[0].scIconCSS,
       id: resOptOutContent.scFragments[0].scId,
+      id: resOptOutContent.scFragments[1].scId,
+      bannerSummaryTitle: resOptOutContent.scFragments[1].scHeadingEn,
+      bannerSummaryContent:
+        resOptOutContent.scFragments[1].scContentEn.markdown,
     },
     fr: {
       bannerBoldText: resOptOutContent.scContentFr.json[0].content[0].value,
       bannerText: resOptOutContent.scContentFr.json[0].content[1].value,
-      bannerLink: resOptOutContent.scFragments[0].scLinkTextFr,
-      bannerLinkHref: resOptOutContent.scFragments[0].scDestinationURLFr,
-      bannerButtonText: resOptOutContent.scFragments[1].scLinkTextFr,
+      bannerButtonText: resOptOutContent.scFragments[0].scLinkTextFr,
       bannerButtonExternalText: resDictionaryContent.find(
         (entry) => entry.scId === 'opens-in-a-new-tab'
       ).scTermFr,
       bannerButtonLink:
         buildLink(
-          resOptOutContent.scFragments[1].schURLType,
-          resOptOutContent.scFragments[1].scDestinationURLFr
+          resOptOutContent.scFragments[0].schURLType,
+          resOptOutContent.scFragments[0].scDestinationURLFr
         ) || '/',
-      icon: resOptOutContent.scFragments[0].scIconCSS,
       id: resOptOutContent.scFragments[0].scId,
+      id: resOptOutContent.scFragments[1].scId,
+      bannerSummaryTitle: resOptOutContent.scFragments[1].scHeadingFr,
+      bannerSummaryContent:
+        resOptOutContent.scFragments[1].scContentFr.markdown,
     },
   }
 

diff --git a/graphql/queries/beta-banner-opt-out.graphql b/graphql/queries/beta-banner-opt-out.graphql
@@ -23,6 +23,17 @@
           scLinkTextAssistiveEn
           scLinkTextAssistiveFr      
         }
+        ... on SchContentV1Model {
+          scId
+          scHeadingEn
+          scHeadingFr
+          scContentEn {  
+            markdown
+          }
+          scContentFr {
+            markdown 
+          }
+        }
       }
     }
   }

diff --git a/pages/privacy-notice-terms-conditions.js b/pages/privacy-notice-terms-conditions.js
@@ -32,7 +32,6 @@ export default function PrivacyCondition(props) {
       <ContextualAlert
         id="PrivacyCondition-alert"
         type={props.content.alert.type}
-        message_heading={<h2>Information</h2>}
         message_body={props.content.alert.text}
         alert_icon_alt_text="info icon"
         alert_icon_id="info-icon"
@@ -54,7 +53,7 @@ export default function PrivacyCondition(props) {
               ol: {
                 props: {
                   className:
-                    'list-[lower-decimal] [&>li>ol]:list-[lower-latin] [&>li>ol>li>ol]:list-[lower-roman] ml-2 sm:mx-8 mb-3',
+                    'list-[lower-latin] [&>li>ol]:list-[lower-latin] [&>li>ol>li]:list-[lower-roman] [&>li>ol>li>ol]:list-[lower-roman] ml-2 sm:mx-8 mb-3',
                 },
               },
               a: {