Update Layout

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/Layout/layout-main.tsx

@@ -11,13 +11,13 @@ export const LayoutMain = ({
   children,
   classes = '',
   id = 'main',
-  layout = '2-1',
-}: LayoutMainProperties): JSX.Element => {
-  const cnames = ['content', `content--${layout}`, classes];
-
-  return (
-    <main id={id} className={classnames(cnames)} role='main'>
-      {children}
-    </main>
-  );
-};
+  layout,
+}: LayoutMainProperties): JSX.Element => (
+  <main
+    id={id}
+    className={classnames('content', layout && `content--${layout}`, classes)}
+    role='main'
+  >
+    {children}
+  </main>
+);

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

@@ -0,0 +1,30 @@
+import type { ReactElement } from 'react';
+
+export const LAYOUT_DOCS_SOURCE =
+  'https://cfpb.github.io/design-system/development/main-content-and-sidebars';
+
+export const LAYOUT_DOCS = {
+  component: `Layout is a **composition API** that mirrors the [CFPB main content and sidebars](${LAYOUT_DOCS_SOURCE}) pattern. Assemble \`Layout.Main\`, \`Layout.Wrapper\`, \`Layout.Content\`, and optionally \`Layout.Sidebar\`.
+
+| Piece | Role |
+| ----- | ---- |
+| **Main** | Page \`<main>\` landmark (\`.content\`). Set \`layout="2-1"\` or \`layout="1-3"\` for two-column layouts; omit \`layout\` when main and sidebar stack vertically. |
+| **Wrapper** | \`.wrapper\` around columns (hero or \`Divider\` may sit above it inside Main). |
+| **Content** | Primary page body (\`.content__main\`). |
+| **Sidebar** | Optional aside (\`.content__sidebar\`). Order in the wrapper must match the layout (sidebar then main for \`1-3\`; main then sidebar for \`2-1\`). |
+| **Content / Sidebar modifiers** | \`flushBottom\`, \`flushTopOnSmall\`, and \`flushAllOnSmall\` map to \`.content--flush-bottom\`, \`.content--flush-top-on-small\`, and \`.content--flush-all-on-small\`. |
+
+The stories below follow the live examples on the design system documentation page.`,
+} as const;
+
+/** Lorem copy from the CFPB left/right sidebar layout examples. */
+export const LAYOUT_EXAMPLE_LOREM = `Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+Cum corrupti tempora nam nihil qui mollitia consectetur
+corporis nemo culpa dolorum! Laborum at eos deleniti
+consequatur itaque officiis debitis quisquam! Provident!`;
+
+export const LayoutStoryFooter = (): ReactElement => (
+  <footer className='footer' role='contentinfo'>
+    <div className='wrapper'>Footer</div>
+  </footer>
+);