Merge branch 'master' into FDG-9447

Author: ntsim99

src/components/masthead/masthead.spec.js

@@ -1,11 +1,19 @@
 import React from 'react';
 import Masthead from './masthead';
-import { render, within } from '@testing-library/react';
+import { fireEvent, render, within } from '@testing-library/react';
 
 describe('Masthead component', () => {
   it('displays the dataset name in an H1 element', () => {
     const { getByRole } = render(<Masthead title="Debt to the Nickel" techSpecs={{}} tagLine="All the debt, to the nickel." />);
     const titleDisplayed = getByRole('heading', { level: 1 }); // will fail if not exactly 1 <h1 />
     expect(within(titleDisplayed).getByText('Debt to the Nickel')).toBeInTheDocument();
   });
+
+  it('applies stickyView class to the title once the position exceeds the breakpoint', () => {
+    const { getByRole } = render(<Masthead title="Debt to the Nickel" />);
+    window.pageYOffset = 150;
+    fireEvent.scroll(window);
+    const titleDisplayed = getByRole('heading', { level: 1 });
+    expect(titleDisplayed).toHaveClass('stickyHeader');
+  });
 });

src/components/site-footer/site-footer.jsx

@@ -11,13 +11,20 @@ import {
   footerMain,
   logo,
   pageLinks,
+  topRow,
+  socialIcons,
+  socialIconLink,
 } from './site-footer.module.scss';
 import globalConstants from '../../helpers/constants';
 import DownloadSticky from '../download-sticky/download-sticky';
 import ResumeDownloadModal from '../download-modal/resume-download-modal/resume-download-modal';
 import { StaticImage } from 'gatsby-plugin-image';
 import Analytics from '../../utils/analytics/analytics';
 import CustomLink from '../links/custom-link/custom-link';
+import LinkedInIcon from '@mui/icons-material/LinkedIn';
+import FacebookIcon from '@mui/icons-material/Facebook';
+import XIcon from '@mui/icons-material/X';
+import YouTubeIcon from '@mui/icons-material/YouTube';
 
 export const siteFooterColumns = [
   {
@@ -99,6 +106,7 @@ const SiteFooter = () => {
       <footer>
         <div className={footerMain}>
           <div className={content}>
+            <div className={topRow}>
             <Link data-testid="logo" className={logo} to="/" onClick={() => clickHandler('Logo')} aria-label={'Redirect to Fiscal Data homepage'}>
               <StaticImage
                 src="../../images/logos/fd-logo-ko.svg"
@@ -110,6 +118,45 @@ const SiteFooter = () => {
                 aria-label="Fiscal Data logo"
               />
             </Link>
+              <div className={socialIcons}>
+                <a
+                  href="https://www.facebook.com/fiscalservice"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="facebook"
+                  className={socialIconLink}
+                >
+                  <FacebookIcon  />
+                </a>
+                <a
+                  href="https://x.com/FiscalService"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="x"
+                  className={ socialIconLink }
+                >
+                  <XIcon  fontSize="small" />
+                </a>
+                <a
+                  href="https://www.linkedin.com/company/1722850/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="linkedin"
+                  className={socialIconLink}
+                >
+                  <LinkedInIcon />
+                </a>
+                <a
+                  href="https://www.youtube.com/channel/UCrezr4h8sW9zB6IEoKwBqRQ/videos"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="youtube"
+                  className={ socialIconLink }
+                >
+                  <YouTubeIcon />
+                </a>
+              </div>
+            </div>
             <div className={pageLinks}>
               {siteFooterColumns.map(columnContent => {
                 return (

src/components/site-footer/site-footer.module.scss

@@ -8,6 +8,26 @@
   z-index: $main-sticky-footer; // positioned to overlap sticky footer during its exit transition
 }
 
+.topRow {
+  display: flex;
+  align-items: center;
+}
+
+.socialIcons {
+  margin-left: 200px;
+  display: flex;
+  gap: 1rem;
+  position: relative;
+  bottom: 20px;
+}
+
+.socialIconLink {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
 .content {
   max-width: $main-width;
   margin: 0 auto;
@@ -131,8 +151,17 @@
   }
 }
 
-@media screen and (min-width: $breakpoint-lg) {
+@media screen and (max-width: $breakpoint-lg) {
   .content {
     padding-bottom: 6.75rem;
   }
+  .topRow {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .socialIcons {
+    margin-left: 0;
+  }
 }

src/components/site-footer/site-footer.spec.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { getByLabelText, render, screen } from '@testing-library/react';
 import SiteFooter, { siteFooterColumns } from './site-footer';
 import Analytics from '../../utils/analytics/analytics';
 import { RecoilRoot } from 'recoil';
 
+
 jest.mock('../download-sticky/download-sticky', () => () => <div data-testid="download-sticky" />);
 jest.mock('../download-modal/resume-download-modal/resume-download-modal', () => () => <div data-testid="resume-download-modal" />);
 
@@ -227,4 +228,26 @@ describe('SiteFooter', () => {
     });
     spy.mockClear();
   });
+
+  it('contains social links and navigates to profile', () => {
+    const { getByLabelText } = render(
+      <RecoilRoot>
+        <SiteFooter />
+      </RecoilRoot>
+    );
+    const socialLinks= [
+      { label: 'facebook', href: 'https://www.facebook.com/fiscalservice'},
+      { label: 'x', href: 'https://x.com/FiscalService'},
+      { label: 'linkedin', href:  'https://www.linkedin.com/company/1722850/'},
+      { label: 'youtube', href: 'https://www.youtube.com/channel/UCrezr4h8sW9zB6IEoKwBqRQ/videos'}
+    ]
+    socialLinks.forEach(({label, href }) => {
+      const element = getByLabelText(label);
+      expect(element).toBeInTheDocument();
+      expect(element).toHaveAttribute('href', href);
+      expect(element).toHaveAttribute('target', '_blank');
+    });
+  });
 });
+
+

src/components/topics-section/homepage-tile/homepage-tile-helper.js

@@ -183,10 +183,10 @@ export const pageTileMap = {
   'state-and-local-government-series': {
     title: 'Explore How State and Local Governments invest in U.S. Treasury Securities',
     body:
-      'State and Local Government Series (SLGS) are non-marketable securities that help state and local '+
+      'State and Local Government Series (SLGS) are non-marketable securities that help state and local ' +
       'governments meet their financing needs. Learn more and explore monthly trends in outstanding SLGS securities. ',
     altText:
-      'Illustration with images including three buildings with the text, “Why do we invest in '+
+      'Illustration with images including three buildings with the text, “Why do we invest in ' +
       'State and Local Government Series Securities? Fiscal Data Explains”, and the Fiscal Data logo in the bottom right corner. ',
     desktopImage: 'State-and-local-government-series-1200_630',
     mobileImage: 'State-and-local-government-series-1200_630',
@@ -200,7 +200,7 @@ export const pageTileMap = {
       'In {YYYY (latest complete FY)}, U.S. citizens invested {$XXX million (total savings bonds purchased in latest ' +
       'complete FY)} in savings bonds. Discover how savings bonds help finance the federal government and the benefits ' +
       'these bonds offer to citizens who choose to invest in them.',
-    altText: 'Images of savings bonds, including Series H and Series EE, surrounding the text “Fiscal Data Explains: Savings Bonds.”',
+    altText: 'Savings bonds, including Series H and Series EE, surrounding the text “Fiscal Data Explains: Savings Bonds.”',
     desktopImage: 'Savings-Bonds-Homepage-Tile_1200x630',
     mobileImage: 'Savings-Bonds-Homepage-Tile_1200x630',
     path: '/treasury-savings-bonds/',

src/layouts/explainer/sections/national-debt/national-debt-explained/national-debt-explained-table/national-debt-explained-table.jsx

@@ -25,7 +25,13 @@ const NationalDebtExplainedTable = () => {
       <div
         className={nationalDebtExplainedTable}
         role="img"
-        aria-label="Image displays fictional data to show the connection of revenue, spending, deficit, and debt for two years."
+        aria-label={
+          'A financial diagram showing fictional budget information with purple icons and text. The image has three columns ' +
+          'labeled "Revenue" (with a stacked coins icon), "Spending" (with a funnel and dollar sign icon), and "Deficit" (with a document ' +
+          'and dollar sign icon). The data shows Year 1 with $400 revenue and $500 spending resulting in a -$100 deficit. Year 2 ' +
+          'shows $600 revenue and $800 spending resulting in a -$200 deficit. At the bottom, these deficits sum to -$300, labeled ' +
+          'as "Debt" with a curved arrow pointing to it.'
+        }
       >
         <table>
           <thead>