2016 design qa tweaks

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',

benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap

@@ -166,7 +166,10 @@ exports[`loads intro 1`] = `
                            with each agency.
                         </p>
                         <p>
-                          We do not share, save, or submit your information.
+                          <strong>
+                            We do not share, save, or submit
+                          </strong>
+                           your information.
                         </p>
                       </div>
                     </div>

benefit-finder/src/Routes/Intro/__tests__/__snapshots__/index.spec.jsx.snap

@@ -151,7 +151,10 @@ exports[`Intro > renders a match to the previous snapshot 1`] = `
                        with each agency.
                     </p>
                     <p>
-                      We do not share, save, or submit your information.
+                      <strong>
+                        We do not share, save, or submit
+                      </strong>
+                       your information.
                     </p>
                   </div>
                 </div>

benefit-finder/src/Routes/Intro/_index.scss

@@ -12,7 +12,7 @@
   .bf-cta-wrapper {
     display: flex;
     justify-content: center;
-    margin: rem(20px) 0 rem(56px);
+    margin: rem(20px) 0 rem(24px);
 
     @media (width >= $desktop) {
       margin: rem(32px) rem(32px) rem(64px);
@@ -32,7 +32,7 @@
       margin-left: rem(16px);
     }
 
-    .bf-intro-process-notices-heading  {
+    .bf-intro-process-notices-heading {
       width: 100;
       margin-bottom: rem(30px);
     }
@@ -59,14 +59,14 @@
     .bf-usa-process-list {
       margin-left: 0;
       margin-right: 0;
-      padding-top:rem(8px);
+      padding-top: rem(8px);
 
       .bf-usa-process-list__heading {
         font-size: rem(16px);
 
-          @media (width >= $desktop) {
-           font-size: rem(21px);
-          }
+        @media (width >= $desktop) {
+          font-size: rem(21px);
+        }
       }
     }
   }

benefit-finder/src/Routes/LifeEventSection/_index.scss

@@ -11,7 +11,7 @@
 
   .bf-grid-container.grid-container {
     max-width: $form-container-max-width;
-    padding: 0 rem(36px);
+    padding: 0 rem(20px);
 
     @media (width >= calc($form-container-max-width + rem(24px))) {
       padding-left: 0;

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>

benefit-finder/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>

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;
+  }
 }

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>
             {' '}

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;
+  }
 }

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;
   }
 

benefit-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>

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>

benefit-finder/src/shared/components/NoticesList/__tests__/__snapshots__/index.spec.jsx.snap

@@ -43,7 +43,10 @@ exports[`NoticesList > renders a match to the previous snapshot 1`] = `
                with each agency.
             </p>
             <p>
-              We do not share, save, or submit your information.
+              <strong>
+                We do not share, save, or submit
+              </strong>
+               your information.
             </p>
           </div>
         </div>

benefit-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>

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'}

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;