Header, Layout, Secondary Nav, Breadcrumb updates

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 .DS_Store
+*.iml
 dist
 dist-storybook
 *.iml
@@ -17,4 +18,4 @@ coverage
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions

docs/local-cfpb-ds.md

@@ -0,0 +1,47 @@
+# Pointing design-system-react at a local `@cfpb/cfpb-design-system`
+
+Use this when you have the [cfpb/design-system](https://github.com/cfpb/design-system) repo cloned next to this repo and want Storybook/tests to use your branch (e.g. layout fixes) before a release.
+
+## Layout
+
+Assume sibling directories:
+
+```text
+projects/
+  design-system/          # monorepo root; package lives in packages/cfpb-design-system/
+  design-system-react/    # this repo
+```
+
+If your paths differ, adjust the `portal:` URL below.
+
+## Yarn (Berry)
+
+In **design-system-react** `package.json`, temporarily set the devDependency to the **portal** protocol (live symlink to source):
+
+```json
+"@cfpb/cfpb-design-system": "portal:../design-system/packages/cfpb-design-system"
+```
+
+Then from **design-system-react**:
+
+```bash
+yarn install
+yarn storybook
+# optional
+yarn test
+```
+
+`portal:` keeps the dependency wired to your clone so SCSS/JS changes in `design-system` show up after save (no publish step).
+
+## After you’re done
+
+1. Remove the `portal:` line and restore the published version (e.g. `"5.3.2"`).
+2. Run `yarn install` again.
+
+## Optional: trim duplicate Layout CSS here
+
+`src/components/Layout/layout.scss` in this repo duplicates some rules that belong in the DS once your PR ships. After you adopt a released `@cfpb/cfpb-design-system` that includes the layout fix, consider removing the overlapping blocks from `layout.scss` so overrides stay minimal.
+
+## Alternative: `yarn link`
+
+From `design-system/packages/cfpb-design-system` you can `yarn link`, then in design-system-react `yarn link @cfpb/cfpb-design-system`. Portal is usually simpler in a Yarn workspaces/monorepo workflow.

src/assets/styles/_shared.scss

@@ -63,6 +63,6 @@ pre,
 // Override DS wrapper match-content width to 1170px content with 30px gutters.
 .wrapper--match-content {
   @include respond-to-min($bp-sm-min) {
-    max-width: $grid-wrapper-width - ($grid-gutter-width * 2);
+    max-width: $grid-wrapper-width - ($grid-gutter-width * 2) !important;
   }
 }

src/components/Breadcrumb/breadcrumb.scss

@@ -1,37 +1,25 @@
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+
 .u-layout-grid__breadcrumbs {
+  grid-area: c-breadcrumbs;
+  padding: 1.875rem;
+
   .m-breadcrumbs {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    font-size: .875rem;
-    gap: .625rem;
+    font-size: 0.875rem;
+    gap: 0.625rem;
     min-height: 33px;
-    padding-bottom: .9375rem;
-    padding-top: .9375rem;
     position: relative;
   }
 }
 
-@media only screen and (width <= 56.25em) {
+@include respond-to-max($bp-sm-max) {
   .u-layout-grid__breadcrumbs {
-    background:var(--gray-5);
+    background: var(--gray-5);
     border-bottom: 1px solid var(--gray-40);
-    margin-left: -1.875rem;
-    margin-right: -1.875rem;
-    padding-left: 1.875rem;
-    padding-right: 1.875rem
+    margin-bottom: 1.875rem;
+    padding: 0.9375rem;
   }
 }
-
-@media only screen and (width >= 37.5625em)and (width <=56.25em) {
-  .u-layout-grid__breadcrumbs {
-    padding-left: .9375rem;
-    padding-right: .9375rem
-  }
-}
-
-@media only screen and (width >= 37.5625em) {
-  .u-layout-grid__breadcrumbs {
-    margin-top: 0
-  }
-}

src/components/Footer/back-to-top.tsx

@@ -1,15 +1,13 @@
 import { JSX } from 'react';
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { Icon } from '../Icon/icon';
-
+import Link from '~/src/components/Link/link';
 export const BackToTop = (): JSX.Element => (
-  <a
-    className='a-btn a-btn--secondary o-footer__top-button'
-    data-gtm_ignore='true'
-    data-js-hook='behavior_return-to-top'
-    href='#'
-  >
-    Back to top
-    <Icon name='arrow-up' isPresentational />
-  </a>
+  <Link label="Back to top" 
+        isButton
+        className='a-btn--secondary a-btn--full-on-xs o-footer__top-button u-show-on-mobile u-mb45'
+        data-gtm_ignore='true'
+        data-js-hook='behavior_return-to-top'
+        data-testid='back-to-top'
+        href='#'
+        iconRight='arrow-up'/>
 );

src/components/Footer/footer-cf-gov.tsx

@@ -1,6 +1,7 @@
 import { JSX } from 'react';
 import { Icon } from '../Icon/icon';
-import Footer from './footer';
+import Link from '../Link/link';
+import {WebsiteFooter} from './footer';
 
 interface FootCfGovProperties {
   cfLink?: string;
@@ -140,30 +141,25 @@ export const FooterCfGov = ({
   ];
 
   const linksCol3 = [
-    <a key='usa-gov' className='a-link a-link--icon' href='https://usa.gov/'>
-      <span className='a-link__text'>USA.gov</span>&nbsp;
-      <Icon
-        ariaLabel='External link'
-        name='external-link'
-        alt='External link'
-      />
-    </a>,
-    <a
+    <Link
+      key='usa-gov'
+      href='https://usa.gov/'
+      label='USA.gov'
+      iconRight='external-link'/>,
+    <Link
       key='inspector'
-      className='a-link a-link--icon'
       href='https://oig.federalreserve.gov/'
-    >
-      <span className='a-link__text'>Office of Inspector General</span>&nbsp;
-      <Icon
-        ariaLabel='External link'
-        name='external-link'
-        alt='External link'
-      />
-    </a>,
+      label='Office of Inspector General'
+      iconRight='external-link'/>,
+    <Link
+      key='archive'
+      href='https://archive-it.org/organizations/2800'
+      label='Public Archive'
+      iconRight='external-link'/>
   ];
 
   return (
-    <Footer
+    <WebsiteFooter
       {...properties}
       className={className}
       navLinks={navLinks}

src/components/Footer/footer-links.tsx

@@ -16,8 +16,8 @@ export const NavLinks = ({ children }: WrapperProperties): JSXElement => {
   if (isEmptyArray(children)) return null;
 
   return (
-    <List className='o-footer__nav-list m-list--links m-list--horizontal'>
-      <ListItemBuilder itemClassname='m-list__link'>{children}</ListItemBuilder>
+    <List className='o-footer__nav-list m-list'>
+      <ListItemBuilder itemClassname='m-list__link a-link--jump'>{children}</ListItemBuilder>
     </List>
   );
 };
@@ -51,11 +51,12 @@ export const FooterLinksColumn = ({
 
   return (
     <div className='o-footer__col'>
-      <List className='o-footer__list'>
-        <ListItemBuilder itemClassname='m-list__link'>
+      <List className='o-footer__list m-list'>
+        <ListItemBuilder itemClassname='m-list__link a-link--jump'>
           {children}
         </ListItemBuilder>
       </List>
     </div>
   );
 };
+