fix(footer): Fix layout issues with Footer in Mako (part 1 of 2) (#269)

* Remove hard-coded logo width * Refactor footer text * Clean up footer grid styles * Fix spacing issues at bottom of footer * Adjust layout and styles for compatability w/ other CSS systems * Fix minor spacing issue * Ensure typefaces from other CSS systems replace USWDS typefaces in footer * Update snapshots
Enterprise-CMCS · Sep 8, 2023 · aa42e89 · aa42e89
1 parent 6b79837
commit aa42e89
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 50 deletions.
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
@@ -1,4 +1,14 @@
 .usa-footer {
+  &.usa-footer__secondary-section,
+  &.usa-footer--slim {
+    font-family: inherit;
+    font-size: inherit;
+  }
+
+  .font-sans-2xs {
+    font-family: inherit;
+  }
+
   a {
     color: white;
 

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -30,6 +30,9 @@ export interface FooterProps extends IntrinsicElements {
  * @param {Link[]}                        [navigationLinks]  Array of navigation links to render in the alternative footer.
  */
 
+const footerText =
+  "A federal government website managed and paid for by the U.S. Centers for Medicare and Medicaid Services and part of the MACPro suite.";
+
 export const Footer: React.FC<FooterProps> = ({
   altFooter = false,
   emailAddress,
@@ -84,11 +87,7 @@ export const Footer: React.FC<FooterProps> = ({
                 height={80}
               />
             </div>
-            <div className="font-sans-xs">
-              A federal government website managed and paid for by the U.S.
-              Centers for Medicare and Medicaid Services and part of the MACPro
-              suite.
-            </div>
+            <div className="font-sans-xs">{footerText}</div>
           </div>
         </div>
       </div>
@@ -110,35 +109,37 @@ export const Footer: React.FC<FooterProps> = ({
     </footer>
   ) : (
     <footer className="usa-footer usa-footer--slim" {...rest}>
-      <div className="usa-footer__primary-section bg-accent-cool-lighter flex-justify-end">
-        <div className="grid-row padding-x-5 padding-y-2 flex-align-center">
-          <div className="tablet:grid-col mobile-text-center">
+      <div className="usa-footer__primary-section bg-accent-cool-lighter">
+        <div className="grid-row padding-x-5 padding-y-2 flex-align-center flex-justify-center">
+          <div className="grid-col-auto tablet:grid-col-6">
             <Logo
               ariaLabel="Medicaid Logo"
               altText="Medicaid Logo"
               source={medicaidLogoBlack}
             />
           </div>
 
-          <div className="grid-row tablet:grid-col-5 flex-align-center">
-            <Logo
-              ariaLabel="Department of Health and Human Services"
-              altText="Department of Health and Human Services Logo"
-              source={depHealthHumanServicesBlack}
-              className="grid-col tablet:grid-col-3 text-center"
-              height={80}
-            />
-            <p className="grid-col-12 tablet:grid-col-9 font-sans-xs">
-              A federal government website managed and paid for by the U.S.
-              Centers for Medicare and Medicaid Services and part of the MACPro
-              suite.
-            </p>
+          <div className="grid-col-auto tablet:grid-col-6">
+            <div className="grid-row flex-align-center flex-justify-center tablet:grid-gap-lg">
+              <div className="grid-col-auto">
+                <Logo
+                  ariaLabel="Department of Health and Human Services"
+                  altText="Department of Health and Human Services Logo"
+                  source={depHealthHumanServicesBlack}
+                  height={80}
+                />
+              </div>
+              <p className="grid-col-auto font-sans-xs tablet:grid-col">
+                {footerText}
+              </p>
+            </div>
           </div>
         </div>
       </div>
+
       <div className="usa-footer__secondary-section bg-primary text-white font-sans-2xs padding-x-4">
         <div className="grid-row">
-          <p className="tablet:grid-col-9 mobile-text-center">
+          <p className="mobile-text-center margin-y-1 tablet:grid-col-6">
             Email{" "}
             {
               <a href={`mailto:${emailAddress}`}>
@@ -147,7 +148,9 @@ export const Footer: React.FC<FooterProps> = ({
             }{" "}
             for help or feedback.
           </p>
-          <p className="tablet:grid-col-3 mobile-text-center">{address}</p>
+          <p className="mobile-text-center margin-y-1 tablet:grid-col-6 text-right">
+            {address}
+          </p>
         </div>
       </div>
     </footer>

diff --git a/src/components/Footer/__snapshots__/Footer.test.tsx.snap b/src/components/Footer/__snapshots__/Footer.test.tsx.snap
@@ -66,7 +66,6 @@ exports[`compontent snapshots Alternative Footer 1`] = `
                 alt="Medicaid Logo"
                 aria-hidden="false"
                 src="[object Object]"
-                width="200"
               />
             </div>
             <div
@@ -79,7 +78,6 @@ exports[`compontent snapshots Alternative Footer 1`] = `
                 aria-hidden="false"
                 height="80"
                 src="[object Object]"
-                width="200"
               />
             </div>
           </div>
@@ -129,13 +127,13 @@ exports[`compontent snapshots Basic Footer 1`] = `
     class="usa-footer usa-footer--slim"
   >
     <div
-      class="usa-footer__primary-section bg-accent-cool-lighter flex-justify-end"
+      class="usa-footer__primary-section bg-accent-cool-lighter"
     >
       <div
-        class="grid-row padding-x-5 padding-y-2 flex-align-center"
+        class="grid-row padding-x-5 padding-y-2 flex-align-center flex-justify-center"
       >
         <div
-          class="tablet:grid-col mobile-text-center"
+          class="grid-col-auto tablet:grid-col-6"
         >
           <div
             aria-label="Medicaid Logo"
@@ -146,31 +144,37 @@ exports[`compontent snapshots Basic Footer 1`] = `
               alt="Medicaid Logo"
               aria-hidden="false"
               src="[object Object]"
-              width="200"
             />
           </div>
         </div>
         <div
-          class="grid-row tablet:grid-col-5 flex-align-center"
+          class="grid-col-auto tablet:grid-col-6"
         >
           <div
-            aria-label="Department of Health and Human Services"
-            class="application-logo-container grid-col tablet:grid-col-3 text-center"
-            role="img"
+            class="grid-row flex-align-center flex-justify-center tablet:grid-gap-lg"
           >
-            <img
-              alt="Department of Health and Human Services Logo"
-              aria-hidden="false"
-              height="80"
-              src="[object Object]"
-              width="200"
-            />
+            <div
+              class="grid-col-auto"
+            >
+              <div
+                aria-label="Department of Health and Human Services"
+                class="application-logo-container "
+                role="img"
+              >
+                <img
+                  alt="Department of Health and Human Services Logo"
+                  aria-hidden="false"
+                  height="80"
+                  src="[object Object]"
+                />
+              </div>
+            </div>
+            <p
+              class="grid-col-auto font-sans-xs tablet:grid-col"
+            >
+              A federal government website managed and paid for by the U.S. Centers for Medicare and Medicaid Services and part of the MACPro suite.
+            </p>
           </div>
-          <p
-            class="grid-col-12 tablet:grid-col-9 font-sans-xs"
-          >
-            A federal government website managed and paid for by the U.S. Centers for Medicare and Medicaid Services and part of the MACPro suite.
-          </p>
         </div>
       </div>
     </div>
@@ -181,7 +185,7 @@ exports[`compontent snapshots Basic Footer 1`] = `
         class="grid-row"
       >
         <p
-          class="tablet:grid-col-9 mobile-text-center"
+          class="mobile-text-center margin-y-1 tablet:grid-col-6"
         >
           Email
            
@@ -196,7 +200,7 @@ exports[`compontent snapshots Basic Footer 1`] = `
           for help or feedback.
         </p>
         <p
-          class="tablet:grid-col-3 mobile-text-center"
+          class="mobile-text-center margin-y-1 tablet:grid-col-6 text-right"
         >
           7500 Security Boulevard Baltimore, MD 21244
         </p>

diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
@@ -34,7 +34,7 @@ export const Logo: React.FC<LogoProps> = ({
   height,
   role = "img",
   source,
-  width = 200,
+  width,
   ...rest
 }) => {
   return (

diff --git a/src/components/Logo/__snapshots__/Logo.test.tsx.snap b/src/components/Logo/__snapshots__/Logo.test.tsx.snap
@@ -11,7 +11,6 @@ exports[`Tests for the Logo component Should render a png and have unique classN
       alt="CMS.gov Logo"
       aria-hidden="false"
       src="[object Object]"
-      width="200"
     />
   </div>
 </div>
@@ -28,7 +27,6 @@ exports[`Tests for the Logo component Should render an svg 1`] = `
       alt="CMS.gov Logo"
       aria-hidden="false"
       src="[object Object]"
-      width="200"
     />
   </div>
 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,7 +34,7 @@ export const Logo: React.FC<LogoProps> = ({ @@
       height,
       role = "img",
       source,
-      width = 200,
+      width,
       ...rest
     }) => {
       return (
@@ Expand Down @@