Layout, Secondary Nav, Breadcrumb updates

design-system-react.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

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/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/Header/responsive-menu.scss

@@ -23,6 +23,11 @@ $max-width: $breakpoint - 0.0625em;
         align-items: stretch;
         padding: 0;
         min-height: 60px;
+
+        &.wrapper.wrapper--match-content {
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+        }
       }
 
       @media (min-width: $breakpoint) {
@@ -92,7 +97,7 @@ $max-width: $breakpoint - 0.0625em;
       .nav-items {
         @media (max-width: $max-width) {
           position: absolute;
-          top: 54px;
+          top: 60px;
           left: -$menu-width - 15;
           width: $menu-width;
           background-color: var(--white);

src/components/Icon/icon.stories.tsx

@@ -102,8 +102,9 @@ export const DocumentIcons = (): ReactElement => (
   <IconTable>{makeRows(documentIcons)}</IconTable>
 );
 
-export const FinancialProductsServicesAndConceptIcons =
-  (): ReactElement => <IconTable>{makeRows(financialIcons)}</IconTable>;
+export const FinancialProductsServicesAndConceptIcons = (): ReactElement => (
+  <IconTable>{makeRows(financialIcons)}</IconTable>
+);
 
 export const ExpenseIcons = (): ReactElement => (
   <IconTable>{makeRows(expenseIcons)}</IconTable>
@@ -131,9 +132,11 @@ export const IconWithText: Story = {
     return (
       <table>
         <thead>
-          <th>Text element</th>
-          <th>Icon with background</th>
-          <th>Icon without background</th>
+          <tr>
+            <th>Text element</th>
+            <th>Icon with background</th>
+            <th>Icon without background</th>
+          </tr>
         </thead>
         <tbody>
           {acceptableLevels.map(({ type, text }) => (

src/components/Layout/layout-content.stories.tsx

@@ -52,8 +52,17 @@ export const Content: Story = {
     flushAllOnSmall: false,
   },
   render: (properties) => (
-    <Layout.Main>
+    <Layout.Main layout='2-1'>
       <Layout.Wrapper>
+        <Layout.Content {...properties}>
+          <h1>Layout.Content</h1>
+          <p>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat
+            alias eum ut officiis optio similique explicabo cupiditate
+            architecto voluptatem nostrum recusandae, eaque consectetur iure,
+            veritatis eos, mollitia possimus error earum?
+          </p>
+        </Layout.Content>
         <Layout.Sidebar>
           <div>
             <h2>Layout.Sidebar</h2>
@@ -62,17 +71,55 @@ export const Content: Story = {
               <li>Item 2</li>
               <li>Item 3</li>
             </ul>
+            <h2>Layout.Sidebar</h2>
+            <ul>
+              <li>Item 1</li>
+              <li>Item 2</li>
+              <li>Item 3</li>
+            </ul>
+            <h2>Layout.Sidebar</h2>
+            <ul>
+              <li>Item 1</li>
+              <li>Item 2</li>
+              <li>Item 3</li>
+            </ul><h2>Layout.Sidebar</h2>
+            <ul>
+              <li>Item 1</li>
+              <li>Item 2</li>
+              <li>Item 3</li>
+            </ul>
+            <h2>Layout.Sidebar</h2>
+            <ul>
+              <li>Item 1</li>
+              <li>Item 2</li>
+              <li>Item 3</li>
+            </ul>
+            <h2>Layout.Sidebar</h2>
+            <ul>
+              <li>Item 1</li>
+              <li>Item 2</li>
+              <li>Item 3</li>
+            </ul>
+            <h2>Layout.Sidebar</h2>
+            <ul>
+              <li>Item 1</li>
+              <li>Item 2</li>
+              <li>Item 3</li>
+            </ul>
+            <h2>Layout.Sidebar</h2>
+            <ul>
+              <li>Item 1</li>
+              <li>Item 2</li>
+              <li>Item 3</li>
+            </ul>
+            <h2>Layout.Sidebar</h2>
+            <ul>
+              <li>Item 1</li>
+              <li>Item 2</li>
+              <li>Item 3</li>
+            </ul>
           </div>
         </Layout.Sidebar>
-        <Layout.Content {...properties}>
-          <h1>Layout.Content</h1>
-          <p>
-            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat
-            alias eum ut officiis optio similique explicabo cupiditate
-            architecto voluptatem nostrum recusandae, eaque consectetur iure,
-            veritatis eos, mollitia possimus error earum?
-          </p>
-        </Layout.Content>
       </Layout.Wrapper>
     </Layout.Main>
   ),