Merge pull request #2022 from GSA/2016-design-qa-tweaks

2016 design qa tweaks
GSA · Dec 23, 2024 · faa7e9b · faa7e9b
2 parents 4ca9589 + 0d27aa3
commit faa7e9b
Show file tree

Hide file tree

Showing 14 changed files with 97 additions and 25 deletions.
diff --git a/benefit-finder/cypress.config.js b/benefit-finder/cypress.config.js
@@ -6,6 +6,7 @@ module.exports = defineConfig({
     runMode: 2,
     openMode: 0,
   },
+  viewportWidth: 1050,
   e2e: {
     baseUrl: 'http://localhost:6006',
     excludeSpecPattern: 'cypress/e2e/usagov-public-site/*.cy.js',

diff --git a/benefit-finder/src/Routes/ResultsView/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/Routes/ResultsView/__tests__/__snapshots__/index.spec.jsx.snap
@@ -6215,7 +6215,7 @@ exports[`loads view 1`] = `
                 data-testid="bf-result-view-unmet-button"
                 type="button"
               >
-                Explore benefits you did not qualify for
+                See benefits you didn't qualify for
               </button>
             </div>
           </div>
@@ -6303,7 +6303,12 @@ exports[`loads view 1`] = `
               Share results
             </h3>
             <p>
-              Copy or email these results. Your answers will be visible. Only share with those you trust.
+              Copy or email these results. Your answers will be visible. 
+              <strong>
+                Only share with those you trust
+                <!--&lt;strong-->
+                .
+              </strong>
             </p>
             <ul
               class="bf-result-view-share-results-button-group"
@@ -6313,7 +6318,8 @@ exports[`loads view 1`] = `
                 <a
                   class="bf-share-trigger bf-usa-link usa-link"
                   data-testid="bf-share-trigger"
-                  href=""
+                  role="link"
+                  tabindex="0"
                 >
                   Share link
                 </a>
@@ -6322,7 +6328,8 @@ exports[`loads view 1`] = `
 
                 <a
                   class="bf-email-trigger bf-usa-link usa-link"
-                  href=""
+                  role="link"
+                  tabindex="0"
                 >
                   Email results
                 </a>
@@ -12554,7 +12561,7 @@ exports[`scenario 1 loads in view with the correct amount of likely eligible ite
                 data-testid="bf-result-view-unmet-button"
                 type="button"
               >
-                Explore benefits you did not qualify for
+                See benefits you didn't qualify for
               </button>
             </div>
           </div>
@@ -12642,7 +12649,12 @@ exports[`scenario 1 loads in view with the correct amount of likely eligible ite
               Share results
             </h3>
             <p>
-              Copy or email these results. Your answers will be visible. Only share with those you trust.
+              Copy or email these results. Your answers will be visible. 
+              <strong>
+                Only share with those you trust
+                <!--&lt;strong-->
+                .
+              </strong>
             </p>
             <ul
               class="bf-result-view-share-results-button-group"
@@ -12652,7 +12664,8 @@ exports[`scenario 1 loads in view with the correct amount of likely eligible ite
                 <a
                   class="bf-share-trigger bf-usa-link usa-link"
                   data-testid="bf-share-trigger"
-                  href=""
+                  role="link"
+                  tabindex="0"
                 >
                   Share link
                 </a>
@@ -12661,7 +12674,8 @@ exports[`scenario 1 loads in view with the correct amount of likely eligible ite
 
                 <a
                   class="bf-email-trigger bf-usa-link usa-link"
-                  href=""
+                  role="link"
+                  tabindex="0"
                 >
                   Email results
                 </a>

diff --git a/...der/src/Routes/ResultsView/components/Results/__tests__/__snapshots__/index.spec.jsx.snap b/...der/src/Routes/ResultsView/components/Results/__tests__/__snapshots__/index.spec.jsx.snap
@@ -111,7 +111,12 @@ exports[`Results > renders a match to the previous snapshot 1`] = `
           Share results
         </h3>
         <p>
-          Copy or email these results. Your answers will be visible. Only share with those you trust.
+          Copy or email these results. Your answers will be visible. 
+          <strong>
+            Only share with those you trust
+            <!--&lt;strong-->
+            .
+          </strong>
         </p>
         <ul
           class="bf-result-view-share-results-button-group"
@@ -121,7 +126,8 @@ exports[`Results > renders a match to the previous snapshot 1`] = `
             <a
               class="bf-share-trigger bf-usa-link usa-link"
               data-testid="bf-share-trigger"
-              href=""
+              role="link"
+              tabindex="0"
             >
               Share link
             </a>
@@ -130,7 +136,8 @@ exports[`Results > renders a match to the previous snapshot 1`] = `
              
             <a
               class="bf-email-trigger bf-usa-link usa-link"
-              href=""
+              role="link"
+              tabindex="0"
             >
               Email results
             </a>

diff --git a/benefit-finder/src/Routes/ResultsView/components/Results/_index.scss b/benefit-finder/src/Routes/ResultsView/components/Results/_index.scss
@@ -4,9 +4,9 @@
 @use '@styles/functions' as *;
 
 .bf-result-view {
- .bf-grid-container.grid-container {
-  padding: rem(20px);
- }
+  .bf-grid-container.grid-container {
+    padding: rem(20px);
+  }
 }
 
 .bf-result-view-benefits,
@@ -20,6 +20,24 @@
   .bf-result-view-relevant-benefits-heading,
   .bf-result-view-share-results-heading {
     @include h3;
+
+    margin-left: rem(15px);
+
+    @media (width > $desktop) {
+      margin-left: 0;
+    }
+  }
+
+  > p {
+    margin-left: rem(15px);
+
+    @media (width > $desktop) {
+      margin-left: 0;
+    }
+  }
+
+  .bf-expand-all {
+    display: none;
   }
 }
 
@@ -32,6 +50,10 @@
     display: flex;
     justify-content: center;
   }
+
+  @media (width > $desktop) {
+    margin-left: 0;
+  }
 }
 
 .bf-result-view-share-results-trigger-group {
@@ -48,4 +70,8 @@
   .bf-result-view-details {
     padding: rem(24px) 5.4rem;
   }
+
+  .bf-result-view-benefits .bf-expand-all {
+    display: block;
+  }
 }
diff --git a/benefit-finder/src/Routes/ResultsView/components/Results/index.jsx b/benefit-finder/src/Routes/ResultsView/components/Results/index.jsx
@@ -110,7 +110,7 @@ const Results = ({
         >
           {shareResults?.heading}
         </Heading>
-        <p>{shareResults?.description}</p>
+        <p dangerouslySetInnerHTML={createMarkup(shareResults?.description)} />
         <ul className="bf-result-view-share-results-button-group">
           <li>
             {' '}

diff --git a/benefit-finder/src/Routes/ResultsView/components/blocks/EligibleBenefitsHeading/_index.scss b/benefit-finder/src/Routes/ResultsView/components/blocks/EligibleBenefitsHeading/_index.scss
@@ -1,9 +1,23 @@
 @use '@styles/mixins' as *;
+@use '@styles/functions' as *;
+@use '@styles/breakpoints' as *;
 
 .bf-eligible-view-heading {
   @include h2;
+
+  margin-left: rem(15px);
+
+  @media (width > $desktop) {
+    margin-left: 0;
+  }
 }
 
 .bf-eligible-view-description {
   @include h6;
+
+  margin-left: rem(15px);
+
+  @media (width > $desktop) {
+    margin-left: 0;
+  }
 }
diff --git a/benefit-finder/src/shared/components/Alert/_index.scss b/benefit-finder/src/shared/components/Alert/_index.scss
@@ -3,7 +3,6 @@
 @use '@styles/breakpoints' as *;
 @use '@styles/functions' as *;
 
-
 h2.bf-usa-alert__heading {
   @include h5($font-family: 'sans');
 
@@ -31,7 +30,7 @@ h2.bf-usa-alert__heading {
     padding-left: rem(32px);
   }
 
-  ul {
+  .bf-usa-alert ul {
     padding-left: 0;
   }
 

diff --git a/...fit-finder/src/shared/components/EmailTrigger/__tests__/__snapshots__/index.spec.jsx.snap b/...fit-finder/src/shared/components/EmailTrigger/__tests__/__snapshots__/index.spec.jsx.snap
@@ -4,7 +4,8 @@ exports[`Email > renders a match to the previous snapshot 1`] = `
 <DocumentFragment>
   <a
     class="bf-email-trigger bf-usa-link usa-link"
-    href=""
+    role="link"
+    tabindex="0"
   >
     Email
   </a>

diff --git a/benefit-finder/src/shared/components/EmailTrigger/index.jsx b/benefit-finder/src/shared/components/EmailTrigger/index.jsx
@@ -38,9 +38,11 @@ const EmailTrigger = ({ ui, data }) => {
 
   return (
     <a
-      href=""
+      tabIndex={0}
+      role="link"
       className="bf-email-trigger bf-usa-link usa-link"
       onClick={e => handleClick(e)}
+      onKeyDown={e => handleClick(e)}
     >
       {ui?.emailTrigger || 'Email'}
     </a>

diff --git a/...fit-finder/src/shared/components/ShareTrigger/__tests__/__snapshots__/index.spec.jsx.snap b/...fit-finder/src/shared/components/ShareTrigger/__tests__/__snapshots__/index.spec.jsx.snap
@@ -5,7 +5,8 @@ exports[`Share > renders a match to the previous snapshot 1`] = `
   <a
     class="bf-share-trigger bf-usa-link usa-link"
     data-testid="bf-share-trigger"
-    href=""
+    role="link"
+    tabindex="0"
   >
     Share
   </a>

diff --git a/benefit-finder/src/shared/components/ShareTrigger/index.jsx b/benefit-finder/src/shared/components/ShareTrigger/index.jsx
@@ -40,9 +40,11 @@ const ShareTrigger = ({ ui, data }) => {
 
   return (
     <a
-      href=""
+      tabIndex={0}
+      role="link"
       className="bf-share-trigger bf-usa-link usa-link"
       onClick={e => handleClick(e)}
+      onKeyDown={e => handleClick(e)}
       data-testid="bf-share-trigger"
     >
       {ui?.shareTrigger || 'Share'}

diff --git a/benefit-finder/src/shared/components/Summary/_index.scss b/benefit-finder/src/shared/components/Summary/_index.scss
@@ -1,13 +1,18 @@
 @use '@styles/mixins' as *;
 @use '@styles/colors' as color;
 @use '@styles/functions' as *;
+@use '@styles/breakpoints' as *;
 
 .bf-usa-summary-box {
   @include h5($font-family: 'sans');
 
-  margin-bottom: rem(16px);
+  margin: rem(16px) rem(15px);
   border-color: color.$teal;
 
+  @media (width > $desktop) {
+    margin: rem(16px) 0;
+  }
+
   .bf-usa-list {
     li {
       @include list-items;

diff --git a/benefit-finder/src/shared/locales/en/en.json b/benefit-finder/src/shared/locales/en/en.json
@@ -153,7 +153,7 @@
     "notEligibleResults": {
       "heading": "Benefits you did not qualify for",
       "description": "<div>Based on your answers you are not eligible for these benefits. <strong>You may become eligible if you enter additional information or your situation changes.</strong></div>",
-      "cta": "Explore benefits you did not qualify for"
+      "cta": "See benefits you didn't qualify for"
     },
     "resultsRelativeBenefits": {
       "heading": "More benefits"
@@ -164,7 +164,7 @@
       "shareLinkContent": "Copied",
       "emailTrigger": "Email results",
       "emailSubject": "Results from USAGov’s benefit finder",
-      "description": "Copy or email these results. Your answers will be visible. Only share with those you trust."
+      "description": "Copy or email these results. Your answers will be visible. <strong>Only share with those you trust</<strong>."
     }
   },
   "shareResults": {

diff --git a/benefit-finder/src/shared/locales/es/es.json b/benefit-finder/src/shared/locales/es/es.json
@@ -165,7 +165,7 @@
       "emailTrigger": "Envie sus resultados por correo electrónico",
       "shareLinkContent": "Copiado",
       "emailSubject": "Resultados del buscador de beneficios de USAGov",
-      "description": "Copie o envíe sus resultados. Sus respuestas serán visibles. Solo comparta con quienes usted confíe."
+      "description": "Copie o envíe sus resultados. Sus respuestas serán visibles. <strong>Solo comparta con quienes usted confíe</strong>."
     }
   },
   "shareResults": {