From 79be7f52522aeeed940aa1e5a14ff1ee2a00d5f4 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Thu, 5 Oct 2023 09:59:19 -0600
Subject: [PATCH 01/17] feat: [Paragraph] Create component + tests + stories

---
 src/components/Paragraph/Paragraph.test.tsx   | 19 +++++++++++
 src/components/Paragraph/Paragraph.tsx        | 29 +++++++++++++++++
 .../Paragraph/Paragraphs.stories.tsx          | 32 +++++++++++++++++++
 3 files changed, 80 insertions(+)
 create mode 100644 src/components/Paragraph/Paragraph.test.tsx
 create mode 100644 src/components/Paragraph/Paragraph.tsx
 create mode 100644 src/components/Paragraph/Paragraphs.stories.tsx

diff --git a/src/components/Paragraph/Paragraph.test.tsx b/src/components/Paragraph/Paragraph.test.tsx
new file mode 100644
index 00000000..b9a0211e
--- /dev/null
+++ b/src/components/Paragraph/Paragraph.test.tsx
@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { Paragraph } from './Paragraph';
+
+describe('<Paragraph />', () => {
+  const helperText = 'helperText goes here';
+
+  it('renders Body text', () => {
+    render(<Paragraph>{helperText}</Paragraph>);
+    expect(screen.getByText(helperText)).toBeInTheDocument();
+  });
+
+  it('renders Lead paragraph', () => {
+    render(<Paragraph isLead>{helperText}</Paragraph>);
+    const element = screen.getByText(helperText);
+    expect(element).toBeInTheDocument();
+    expect(element.classList.contains('lead-paragraph')).toBe(true);
+  });
+});
diff --git a/src/components/Paragraph/Paragraph.tsx b/src/components/Paragraph/Paragraph.tsx
new file mode 100644
index 00000000..806052ce
--- /dev/null
+++ b/src/components/Paragraph/Paragraph.tsx
@@ -0,0 +1,29 @@
+import classnames from 'classnames';
+
+interface ParagraphProperties extends React.HTMLProps<HTMLParagraphElement> {
+  isLead?: boolean;
+}
+
+/**
+ * Paragraph text should provide an efficient and pleasant experience on every viewport size. Readable text makes good use of alignment, spacing, line length and height, and contrast.
+ *
+ * Source: https://cfpb.github.io/design-system/foundation/paragraphs
+ */
+export function Paragraph({
+  children,
+  isLead,
+  className,
+  ...properties
+}: ParagraphProperties): JSX.Element {
+  const cnames = [className];
+
+  if (isLead) cnames.push('lead-paragraph');
+
+  return (
+    <p {...properties} className={classnames(cnames)}>
+      {children}
+    </p>
+  );
+}
+
+export default Paragraph;
diff --git a/src/components/Paragraph/Paragraphs.stories.tsx b/src/components/Paragraph/Paragraphs.stories.tsx
new file mode 100644
index 00000000..07b62cde
--- /dev/null
+++ b/src/components/Paragraph/Paragraphs.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/react';
+import { Paragraph } from './Paragraph';
+
+/**
+ * Paragraph text should provide an efficient and pleasant experience on every viewport size. Readable text makes good use of alignment, spacing, line length and height, and contrast.
+ *
+ * Source: https://cfpb.github.io/design-system/foundation/paragraphs
+ */
+const meta: Meta<typeof Paragraph> = {
+  title: 'Components (Verified)/Paragraphs',
+  component: Paragraph
+};
+
+export default meta;
+
+const text =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta numquam, dolorum rerum eaque delectus aut magnam quo eos nemo facere consequatur repellat minus commodi. Autem sapiente itaque molestiae cum aliquid!';
+
+export const Body = {
+  name: 'Body text',
+  args: {
+    children: text
+  }
+};
+
+export const Lead = {
+  name: 'Lead paragraph',
+  args: {
+    children: text,
+    isLead: true
+  }
+};

From 98474e9fd46f31a1e4ac299d37842a130e85231a Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Thu, 5 Oct 2023 10:04:44 -0600
Subject: [PATCH 02/17] feat: [TextIntroduction] Create component + tests +
 stories

---
 .../TextIntroduction.stories.tsx              | 17 +++++
 .../TextIntroduction.test.tsx                 | 22 +++++++
 .../TextIntroduction/TextIntroduction.tsx     | 62 +++++++++++++++++++
 .../TextIntroduction/testHelpers.tsx          | 16 +++++
 src/index.ts                                  |  2 +
 5 files changed, 119 insertions(+)
 create mode 100644 src/components/TextIntroduction/TextIntroduction.stories.tsx
 create mode 100644 src/components/TextIntroduction/TextIntroduction.test.tsx
 create mode 100644 src/components/TextIntroduction/TextIntroduction.tsx
 create mode 100644 src/components/TextIntroduction/testHelpers.tsx

diff --git a/src/components/TextIntroduction/TextIntroduction.stories.tsx b/src/components/TextIntroduction/TextIntroduction.stories.tsx
new file mode 100644
index 00000000..af5b0fdc
--- /dev/null
+++ b/src/components/TextIntroduction/TextIntroduction.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta } from '@storybook/react';
+import { TextIntroduction } from './TextIntroduction';
+import placeholders from './testHelpers';
+
+const meta: Meta<typeof TextIntroduction> = {
+  title: 'Components (Verified)/Text introductions',
+  component: TextIntroduction
+};
+
+export default meta;
+
+export const Standard = {
+  name: 'Standard text introduction',
+  args: {
+    ...placeholders
+  }
+};
diff --git a/src/components/TextIntroduction/TextIntroduction.test.tsx b/src/components/TextIntroduction/TextIntroduction.test.tsx
new file mode 100644
index 00000000..7c2cf6de
--- /dev/null
+++ b/src/components/TextIntroduction/TextIntroduction.test.tsx
@@ -0,0 +1,22 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { TextIntroduction } from './TextIntroduction';
+import placeholders from './testHelpers';
+
+describe('<TextIntroduction />', () => {
+  it('renders all elements when provided', () => {
+    render(<TextIntroduction {...placeholders} />);
+    expect(screen.getByText(placeholders.heading)).toBeInTheDocument();
+    expect(screen.getByText(placeholders.subheading)).toBeInTheDocument();
+    expect(screen.getByText(placeholders.description)).toBeInTheDocument();
+    expect(screen.getByText('Link one hypertext text')).toBeInTheDocument();
+  });
+
+  it('supports setting top/bottom as flush (remove margin)', () => {
+    render(<TextIntroduction {...placeholders} isFlushTop isFlushBottom />);
+    const element = screen.getByTestId('text-intro-wrapper');
+    expect(element).toBeInTheDocument();
+    expect(element.classList.contains('block__flush-top')).toBe(true);
+    expect(element.classList.contains('block__flush-bottom')).toBe(true);
+  });
+});
diff --git a/src/components/TextIntroduction/TextIntroduction.tsx b/src/components/TextIntroduction/TextIntroduction.tsx
new file mode 100644
index 00000000..dc86e773
--- /dev/null
+++ b/src/components/TextIntroduction/TextIntroduction.tsx
@@ -0,0 +1,62 @@
+import classnames from 'classnames';
+import { cloneElement, type ReactNode } from 'react';
+import { Heading } from '../Headings/Heading';
+import List from '../List/List';
+import ListItem from '../List/ListItem';
+import { Paragraph } from '../Paragraph/Paragraph';
+
+interface TextIntroductionProperties extends React.HTMLProps<HTMLDivElement> {
+  // Page title
+  heading: string;
+  // Lead paragraph
+  subheading: string;
+  // Descriptive paragraph
+  description?: ReactNode | string;
+  // Call-to-action <Link>
+  callToAction?: JSX.Element;
+  // Remove top margin?
+  isFlushTop?: boolean;
+  // Remove bottom margin?
+  isFlushBottom?: boolean;
+}
+
+/**
+ * The text introduction is the standard page introduction pattern used across all pages that do not have a <a href="https://cfpb.github.io/design-system/patterns/heroes">hero</a> or <a href="https://cfpb.github.io/design-system/patterns/item-introductions">item introduction</a>. They introduce a page, or collection of pages, with a brief description of the goals of that section.
+ *
+ * Source: https://cfpb.github.io/design-system/patterns/text-introductions
+ */
+export const TextIntroduction = ({
+  heading,
+  subheading,
+  description,
+  callToAction,
+  className,
+  isFlushTop,
+  isFlushBottom,
+  ...properties
+}: TextIntroductionProperties): JSX.Element => {
+  const cnames = ['block', className];
+  if (isFlushTop) cnames.push('block__flush-top');
+  if (isFlushBottom) cnames.push('block__flush-bottom');
+
+  const call2action = callToAction && (
+    <List isLinks>
+      <ListItem>{cloneElement(callToAction, { type: 'list' })}</ListItem>
+    </List>
+  );
+
+  return (
+    <div
+      className={classnames(cnames)}
+      {...properties}
+      data-testid='text-intro-wrapper'
+    >
+      <Heading type='1'>{heading}</Heading>
+      <Paragraph isLead>{subheading}</Paragraph>
+      {description ? <p>{description}</p> : null}
+      {call2action}
+    </div>
+  );
+};
+
+export default TextIntroduction;
diff --git a/src/components/TextIntroduction/testHelpers.tsx b/src/components/TextIntroduction/testHelpers.tsx
new file mode 100644
index 00000000..98a7048f
--- /dev/null
+++ b/src/components/TextIntroduction/testHelpers.tsx
@@ -0,0 +1,16 @@
+import Link from '../Link/Link';
+
+const subheading =
+  'Subheader, lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae velit quibusdam voluptatem dolor? At, ea dicta. Ipsum sed qui quos iure, beatae voluptas. Repellat pariatur nostrum esse aperiam! Tempore, odit?';
+
+const description =
+  'Description paragraph, Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque beatae necessitatibus fugiat nesciunt possimus iste eaque vero voluptatum ab dignissimos, repellat, tempora, perspiciatis et repellendus ea quia eveniet hic molestiae.';
+
+const callToAction = <Link href='/'>Link one hypertext text</Link>;
+
+export default {
+  heading: 'Heading 1',
+  description,
+  subheading,
+  callToAction
+};
diff --git a/src/index.ts b/src/index.ts
index 8c4a0f24..585d6565 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -36,6 +36,7 @@ export { default as Navbar } from './components/Navbar/Navbar';
 export { Notification } from './components/Notification/Notification';
 export { default as PageHeader } from './components/PageHeader/PageHeader';
 export { Pagination } from './components/Pagination/Pagination';
+export { Paragraph } from './components/Paragraph/Paragraph';
 export { RadioButton } from './components/RadioButton/RadioButton';
 export {
   TableComplex,
@@ -44,5 +45,6 @@ export {
 } from './components/Table/Table';
 export { Tagline } from './components/Tagline/Tagline';
 export { TextInput } from './components/TextInput/TextInput';
+export { TextIntroduction } from './components/TextIntroduction/TextIntroduction';
 export { default as Well } from './components/Well/Well';
 

From 39311befbe254270f20633a34a6f140dd264afd5 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Thu, 5 Oct 2023 10:31:40 -0600
Subject: [PATCH 03/17] feat: [Storybook] Set default theme to "light" instead
 of "dark"

---
 .storybook/preview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 63a108de..696c8941 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -26,7 +26,7 @@ export const parameters = {
     }
   },
   darkMode: {
-    current: 'dark',
+    current: 'light',
     // Override the default dark theme
     dark: {
       ...themes.dark,

From ed86d041581ce1250c91f6e893d2be32f8ae996d Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Thu, 5 Oct 2023 11:24:26 -0600
Subject: [PATCH 04/17] fix:[Paragraph]  Remove duplicate intro paragraph

---
 src/components/Paragraph/Paragraphs.stories.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/Paragraph/Paragraphs.stories.tsx b/src/components/Paragraph/Paragraphs.stories.tsx
index 07b62cde..72dc4487 100644
--- a/src/components/Paragraph/Paragraphs.stories.tsx
+++ b/src/components/Paragraph/Paragraphs.stories.tsx
@@ -1,11 +1,6 @@
 import type { Meta } from '@storybook/react';
 import { Paragraph } from './Paragraph';
 
-/**
- * Paragraph text should provide an efficient and pleasant experience on every viewport size. Readable text makes good use of alignment, spacing, line length and height, and contrast.
- *
- * Source: https://cfpb.github.io/design-system/foundation/paragraphs
- */
 const meta: Meta<typeof Paragraph> = {
   title: 'Components (Verified)/Paragraphs',
   component: Paragraph

From 0328bfa8b4c16166fa98dbe322ce03060f37f9ec Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Thu, 12 Oct 2023 16:22:06 -0600
Subject: [PATCH 05/17] [Paragraph] Update placeholder text

---
 .../Paragraph/Paragraphs.stories.tsx          |  9 ++++-----
 .../TextIntroduction/TextIntroduction.less    | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 src/components/TextIntroduction/TextIntroduction.less

diff --git a/src/components/Paragraph/Paragraphs.stories.tsx b/src/components/Paragraph/Paragraphs.stories.tsx
index 72dc4487..2a3fddb1 100644
--- a/src/components/Paragraph/Paragraphs.stories.tsx
+++ b/src/components/Paragraph/Paragraphs.stories.tsx
@@ -8,20 +8,19 @@ const meta: Meta<typeof Paragraph> = {
 
 export default meta;
 
-const text =
-  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta numquam, dolorum rerum eaque delectus aut magnam quo eos nemo facere consequatur repellat minus commodi. Autem sapiente itaque molestiae cum aliquid!';
-
 export const Body = {
   name: 'Body text',
   args: {
-    children: text
+    children:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.'
   }
 };
 
 export const Lead = {
   name: 'Lead paragraph',
   args: {
-    children: text,
+    children:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
     isLead: true
   }
 };
diff --git a/src/components/TextIntroduction/TextIntroduction.less b/src/components/TextIntroduction/TextIntroduction.less
new file mode 100644
index 00000000..dfbd609e
--- /dev/null
+++ b/src/components/TextIntroduction/TextIntroduction.less
@@ -0,0 +1,19 @@
+// Styles in this file are overrides of the CFPB Design System
+
+@import (reference) "@cfpb/cfpb-design-system/src/cfpb-design-system.less";
+
+.text-intro.block {
+  margin-top: 45px;
+}
+
+.text-intro .lead-paragraph,
+.text-intro p {
+  margin-bottom: 30px;
+}
+
+.respond-to-max(@bp-xs-max, {
+  .text-intro .lead-paragraph,
+  .text-intro p {
+    margin-bottom: 15px;
+  }
+});

From 1af90a838d5fd312b65d3f4241fa52ed20d9e64b Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Thu, 12 Oct 2023 17:21:48 -0600
Subject: [PATCH 06/17] fix: [TextIntroduction] Apply customized spacing to
 component elements

---
 src/components/TextIntroduction/TextIntroduction.less | 2 +-
 src/components/TextIntroduction/TextIntroduction.tsx  | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/TextIntroduction/TextIntroduction.less b/src/components/TextIntroduction/TextIntroduction.less
index dfbd609e..ae80e76e 100644
--- a/src/components/TextIntroduction/TextIntroduction.less
+++ b/src/components/TextIntroduction/TextIntroduction.less
@@ -1,4 +1,4 @@
-// Styles in this file are overrides of the CFPB Design System
+// WARNING: Styles in this file are intentional overrides of the CFPB Design System
 
 @import (reference) "@cfpb/cfpb-design-system/src/cfpb-design-system.less";
 
diff --git a/src/components/TextIntroduction/TextIntroduction.tsx b/src/components/TextIntroduction/TextIntroduction.tsx
index dc86e773..26544396 100644
--- a/src/components/TextIntroduction/TextIntroduction.tsx
+++ b/src/components/TextIntroduction/TextIntroduction.tsx
@@ -4,6 +4,7 @@ import { Heading } from '../Headings/Heading';
 import List from '../List/List';
 import ListItem from '../List/ListItem';
 import { Paragraph } from '../Paragraph/Paragraph';
+import './TextIntroduction.less';
 
 interface TextIntroductionProperties extends React.HTMLProps<HTMLDivElement> {
   // Page title
@@ -35,7 +36,8 @@ export const TextIntroduction = ({
   isFlushBottom,
   ...properties
 }: TextIntroductionProperties): JSX.Element => {
-  const cnames = ['block', className];
+  const cnames = ['block', 'text-intro', className];
+
   if (isFlushTop) cnames.push('block__flush-top');
   if (isFlushBottom) cnames.push('block__flush-bottom');
 

From 734be8b552c69d5127fe4be4a611d35a9c3e697b Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Fri, 13 Oct 2023 16:47:02 -0600
Subject: [PATCH 07/17] feat: [Storybook] Set line-height to 22px

---
 src/assets/styles/_shared.less | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/assets/styles/_shared.less b/src/assets/styles/_shared.less
index 06e728f4..3f052e44 100644
--- a/src/assets/styles/_shared.less
+++ b/src/assets/styles/_shared.less
@@ -39,3 +39,10 @@
     font-family: 'Avenir Next', Arial, sans-serif;
   }
 }
+
+/* 
+Apply a global line-height that doesn't interfere with component Stories that have their own line-height settings. 
+*/
+:where(p:not(.sb-story *, #storybook-root *)){
+  line-height: 22px !important;
+}

From 88e23e517bfaf11605ed8a56c8624b0be4ec11f5 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Fri, 13 Oct 2023 16:50:35 -0600
Subject: [PATCH 08/17] deps: Remove storybook-dark-mode

---
 .storybook/main.js |  3 +--
 package.json       |  1 -
 yarn.lock          | 63 +++-------------------------------------------
 3 files changed, 4 insertions(+), 63 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 59c4bb9b..5470a9ac 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -6,8 +6,7 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
-    'display-element-css',
-    'storybook-dark-mode'
+    'display-element-css'
   ],
   docs: {
     autodocs: true,
diff --git a/package.json b/package.json
index e8e27a6c..fb785ea2 100644
--- a/package.json
+++ b/package.json
@@ -117,7 +117,6 @@
     "prettier": "2.7.1",
     "start-server-and-test": "1.14.0",
     "storybook": "^7.0.6",
-    "storybook-dark-mode": "^3.0.1",
     "stylelint": "14.15.0",
     "stylelint-config-prettier": "9.0.4",
     "stylelint-config-standard": "29.0.0",
diff --git a/yarn.lock b/yarn.lock
index 5ffcb814..8ba5d510 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3656,38 +3656,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addons@npm:^7.0.0":
-  version: 7.4.3
-  resolution: "@storybook/addons@npm:7.4.3"
-  dependencies:
-    "@storybook/manager-api": 7.4.3
-    "@storybook/preview-api": 7.4.3
-    "@storybook/types": 7.4.3
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 6572fe0f389e6c9ec97e0f49a7212b0c9dd8196d794e0557d743397b6a69bc472638b879b63b61dc03d5dda78052d74d07460df62afea7cecbfb9d39eef35171
-  languageName: node
-  linkType: hard
-
-"@storybook/api@npm:^7.0.0":
-  version: 7.4.3
-  resolution: "@storybook/api@npm:7.4.3"
-  dependencies:
-    "@storybook/client-logger": 7.4.3
-    "@storybook/manager-api": 7.4.3
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    react:
-      optional: true
-    react-dom:
-      optional: true
-  checksum: bf1afa0ae75e6e959e2d19c0fac27e63ab2ba83e79cd4eac461c8eb216127b02741ad7ae75dae7353fed0192b3e1e76f69309de1fdbc6e110c7a28a1b9caa029
-  languageName: node
-  linkType: hard
-
 "@storybook/blocks@npm:7.4.3":
   version: 7.4.3
   resolution: "@storybook/blocks@npm:7.4.3"
@@ -3938,7 +3906,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:7.4.3, @storybook/components@npm:^7.0.0":
+"@storybook/components@npm:7.4.3":
   version: 7.4.3
   resolution: "@storybook/components@npm:7.4.3"
   dependencies:
@@ -4000,7 +3968,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-events@npm:7.4.3, @storybook/core-events@npm:^7.0.0":
+"@storybook/core-events@npm:7.4.3":
   version: 7.4.3
   resolution: "@storybook/core-events@npm:7.4.3"
   dependencies:
@@ -4433,7 +4401,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:7.4.3, @storybook/theming@npm:^7.0.0, @storybook/theming@npm:^7.3.2":
+"@storybook/theming@npm:7.4.3, @storybook/theming@npm:^7.3.2":
   version: 7.4.3
   resolution: "@storybook/theming@npm:7.4.3"
   dependencies:
@@ -7903,7 +7871,6 @@ __metadata:
     react-select: ^5.7.2
     start-server-and-test: 1.14.0
     storybook: ^7.0.6
-    storybook-dark-mode: ^3.0.1
     stylelint: 14.15.0
     stylelint-config-prettier: 9.0.4
     stylelint-config-standard: 29.0.0
@@ -15303,30 +15270,6 @@ display-element-css@cfpb/storybook-addon-display-element-css:
   languageName: node
   linkType: hard
 
-"storybook-dark-mode@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "storybook-dark-mode@npm:3.0.1"
-  dependencies:
-    "@storybook/addons": ^7.0.0
-    "@storybook/api": ^7.0.0
-    "@storybook/components": ^7.0.0
-    "@storybook/core-events": ^7.0.0
-    "@storybook/global": ^5.0.0
-    "@storybook/theming": ^7.0.0
-    fast-deep-equal: ^3.1.3
-    memoizerific: ^1.11.3
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    react:
-      optional: true
-    react-dom:
-      optional: true
-  checksum: d04213c92e8a4af0035e80eb02b75b8da725ba7b1ecbfe050eb04cb4018d91394f08c8fe7c1b106c971b2047ef5a1ba776e78050ae1f6d7563cdfdba5e701a29
-  languageName: node
-  linkType: hard
-
 "storybook@npm:^7.0.6":
   version: 7.4.3
   resolution: "storybook@npm:7.4.3"

From b5330f9c5fd7f115d2f763b242ec2402313d3e24 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Fri, 13 Oct 2023 16:51:34 -0600
Subject: [PATCH 09/17] feat: [Storybook] Refactor and update UI theme

---
 .storybook/manager-head.html | 25 +++++++++++++++--
 .storybook/manager.js        |  4 ++-
 .storybook/preview.js        | 54 +++++++++++++-----------------------
 .storybook/themeCFPB.js      | 52 ++++++++++++++++++++++++++++++++++
 4 files changed, 96 insertions(+), 39 deletions(-)
 create mode 100644 .storybook/themeCFPB.js

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index 16b755e1..d61a3310 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -3,9 +3,28 @@
     font-size: 15px !important;
   }
 
-  div.sidebar-item[data-selected="false"]:hover,
+  /* Sidebar hover */
+  div.sidebar-item[data-selected='false']:hover,
   button.sidebar-item:hover {
-    background-color: #5a5d61 !important;
+    background-color: #5a5d61 !important; /* gray */
     color: white !important;
   }
-</style>
\ No newline at end of file
+
+  /* Sidebar selected */
+  div.sidebar-item[data-selected='true'] {
+    background-color: #257675 !important; /* teal */
+    color: white !important;
+  }
+
+  /* Sidebar icons */
+  .sidebar-item svg {
+    color: black;
+  }
+
+  /* Sidebar hover/selected icons */
+  div.sidebar-item[data-selected='false']:hover svg,
+  button.sidebar-item:hover svg {
+    color: white;
+  }
+
+</style>
diff --git a/.storybook/manager.js b/.storybook/manager.js
index d6d1c2a9..6fc4ea24 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -1,4 +1,5 @@
 import { addons } from '@storybook/manager-api';
+import themeCFPB from './themeCFPB';
 
 addons.setConfig({
   sidebar: {
@@ -11,5 +12,6 @@ addons.setConfig({
       }
       return name;
     }
-  }
+  },
+  theme: themeCFPB
 });
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 696c8941..de5399e9 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,42 +1,26 @@
 import '@cfpb/cfpb-design-system/src/cfpb-design-system.less';
-import { themes } from '@storybook/theming';
-import CfpbLogo from '../src/assets/images/cfpb-logo-vertical.png';
 import '../src/assets/styles/_shared.less';
+import themeCFPB from './themeCFPB';
 
-const sharedThemeElements = {
-  brandTitle: 'CFPB Design System React',
-  brandImage: CfpbLogo,
-  brandUrl: 'https://cfpb.github.io/design-system/',
-  brandTarget: '_blank',
-  fontBase: '"Avenir Next", Arial ,sans-serif'
-};
-
-export const parameters = {
-  options: {
-    // Determines the display order of Stories in the sidebar
-    storySort: {
-      order: ['Guides', 'Components (Verified)', 'Components (Draft)', '*']
-    }
-  },
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/
-    }
-  },
-  darkMode: {
-    current: 'light',
-    // Override the default dark theme
-    dark: {
-      ...themes.dark,
-      ...sharedThemeElements,
-      appBg: 'black'
+export const preview = {
+  parameters: {
+    options: {
+      // Determines the display order of Stories in the sidebar
+      storySort: {
+        order: ['Guides', 'Components (Verified)', 'Components (Draft)', '*']
+      }
+    },
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
     },
-    // Override the default light theme
-    light: {
-      ...themes.normal,
-      ...sharedThemeElements
+    docs: {
+      theme: themeCFPB
     }
   }
 };
+
+export default preview;
diff --git a/.storybook/themeCFPB.js b/.storybook/themeCFPB.js
new file mode 100644
index 00000000..cceda541
--- /dev/null
+++ b/.storybook/themeCFPB.js
@@ -0,0 +1,52 @@
+import { create } from '@storybook/theming/create';
+import CfpbLogo from '../src/assets/images/cfpb-logo-vertical.png';
+
+const colors = {
+  black: '#101820',
+  gray: '#5a5d61',
+  gray10: '#e7e8e9',
+  gray40: '#b4b5b6',
+  green10: '#f0f8eb',
+  teal: '#257675',
+  teal80: '#579695'
+};
+
+/**
+ * Note:
+ * Additional CSS customizations are implemented in `./manager-head.html`
+ */
+export default create({
+  base: 'light',
+
+  brandTitle: 'CFPB Design System React',
+  brandImage: CfpbLogo,
+  brandUrl: 'https://cfpb.github.io/design-system/',
+  brandTarget: '_blank',
+
+  fontBase: '"Avenir Next", Arial ,sans-serif',
+
+  // App
+  appBorderColor: colors.gray,
+  appContentBg: 'white', // Story overview, tool panel
+
+  // Sidebar
+  appBg: colors.green10, // Background
+  textColor: colors.black, // Story names
+  textMutedColor: colors.black, // Group names
+
+  // Toolbars
+  colorPrimary: colors.teal, // Selected (Controls, Actions, etc)
+  colorSecondary: colors.teal, // Focused text color of objects
+  barTextColor: colors.black, // Text & icons
+  barSelectedColor: colors.teal,
+  barBg: colors.gray10,
+
+  // Form colors (Controls)
+  buttonBg: colors.gray10,
+  buttonBorder: colors.gray40,
+  booleanBg: colors.gray10,
+  booleanSelectedBg: colors.teal80,
+  inputBg: 'white',
+  inputBorder: colors.gray,
+  inputTextColor: colors.black
+});

From e05db0ca84d4f72969f0fbf39d379e9c44fd3631 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Fri, 13 Oct 2023 17:02:56 -0600
Subject: [PATCH 10/17] fix: [TextIntroduction] Apply latest component styles

---
 .../TextIntroduction/TextIntroduction.less         | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/TextIntroduction/TextIntroduction.less b/src/components/TextIntroduction/TextIntroduction.less
index ae80e76e..15d908fc 100644
--- a/src/components/TextIntroduction/TextIntroduction.less
+++ b/src/components/TextIntroduction/TextIntroduction.less
@@ -3,17 +3,15 @@
 @import (reference) "@cfpb/cfpb-design-system/src/cfpb-design-system.less";
 
 .text-intro.block {
-  margin-top: 45px;
+  margin-top: 0px;
 }
 
 .text-intro .lead-paragraph,
 .text-intro p {
-  margin-bottom: 30px;
+  margin-bottom: 15px;
+  margin-top: 0;
 }
 
-.respond-to-max(@bp-xs-max, {
-  .text-intro .lead-paragraph,
-  .text-intro p {
-    margin-bottom: 15px;
-  }
-});
+.text-intro p + ul {
+  margin-top: 15px;
+}

From 7563dd2d5b46eb3d28ea07b7c705f8dbf5c73aa0 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Fri, 13 Oct 2023 17:20:06 -0600
Subject: [PATCH 11/17] docs: Note addtional places where CSS customization is
 implemented

---
 .storybook/themeCFPB.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.storybook/themeCFPB.js b/.storybook/themeCFPB.js
index cceda541..2adf1d67 100644
--- a/.storybook/themeCFPB.js
+++ b/.storybook/themeCFPB.js
@@ -12,8 +12,9 @@ const colors = {
 };
 
 /**
- * Note:
- * Additional CSS customizations are implemented in `./manager-head.html`
+ * Note: Additional CSS customizations are implemented in
+ * - /.storybook/manager-head.html
+ * - /src/assets/styles/_shared.less
  */
 export default create({
   base: 'light',

From d9552e8d41a1ff64ae529e1fa991faf9b4a6a738 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Mon, 16 Oct 2023 10:29:56 -0600
Subject: [PATCH 12/17] fix: [Storybook] Update theme

---
 .storybook/manager-head.html             |  16 +++++-----------
 .storybook/themeCFPB.js                  |   6 +++---
 src/assets/images/cfpb-logo-vertical.png | Bin 6372 -> 8169 bytes
 3 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index d61a3310..55577966 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -6,14 +6,14 @@
   /* Sidebar hover */
   div.sidebar-item[data-selected='false']:hover,
   button.sidebar-item:hover {
-    background-color: #5a5d61 !important; /* gray */
+    background-color: #5a5d61 !important;
     color: white !important;
   }
 
-  /* Sidebar selected */
-  div.sidebar-item[data-selected='true'] {
-    background-color: #257675 !important; /* teal */
-    color: white !important;
+  /* Sidebar hover/selected icons */
+  div.sidebar-item[data-selected='false']:hover svg,
+  button.sidebar-item:hover svg {
+    color: white;
   }
 
   /* Sidebar icons */
@@ -21,10 +21,4 @@
     color: black;
   }
 
-  /* Sidebar hover/selected icons */
-  div.sidebar-item[data-selected='false']:hover svg,
-  button.sidebar-item:hover svg {
-    color: white;
-  }
-
 </style>
diff --git a/.storybook/themeCFPB.js b/.storybook/themeCFPB.js
index 2adf1d67..8f3e9e21 100644
--- a/.storybook/themeCFPB.js
+++ b/.storybook/themeCFPB.js
@@ -31,13 +31,13 @@ export default create({
   appContentBg: 'white', // Story overview, tool panel
 
   // Sidebar
-  appBg: colors.green10, // Background
+  appBg: 'white', // Background
   textColor: colors.black, // Story names
   textMutedColor: colors.black, // Group names
 
   // Toolbars
-  colorPrimary: colors.teal, // Selected (Controls, Actions, etc)
-  colorSecondary: colors.teal, // Focused text color of objects
+  // colorPrimary: 'color', // Purpose unknown
+  colorSecondary: colors.teal, // Selected (Controls, Actions, etc)
   barTextColor: colors.black, // Text & icons
   barSelectedColor: colors.teal,
   barBg: colors.gray10,
diff --git a/src/assets/images/cfpb-logo-vertical.png b/src/assets/images/cfpb-logo-vertical.png
index 10b620263b1942db94dce0ab624d7c80160ab573..3cc78b6883fc9ab7c8891d5b452d1a241e1456d1 100644
GIT binary patch
literal 8169
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
Q{NJr8t0q$^W%lX603?Gq>i_@%

literal 6372
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


From 2b21d79dff461d57f67f0076374ceacf8b1c2407 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Mon, 16 Oct 2023 13:48:08 -0600
Subject: [PATCH 13/17] WIP: Examples for spacing

---
 .../TextIntroduction/SpaceAdjustments.less    |   6 +
 .../SpacingEvaluations.stories.tsx            | 134 ++++++++++++++++++
 2 files changed, 140 insertions(+)
 create mode 100644 src/components/TextIntroduction/SpaceAdjustments.less
 create mode 100644 src/components/TextIntroduction/SpacingEvaluations.stories.tsx

diff --git a/src/components/TextIntroduction/SpaceAdjustments.less b/src/components/TextIntroduction/SpaceAdjustments.less
new file mode 100644
index 00000000..54bb7ebe
--- /dev/null
+++ b/src/components/TextIntroduction/SpaceAdjustments.less
@@ -0,0 +1,6 @@
+.space-evaluation {
+  .lead-paragraph {
+    margin-top: 0px;
+    margin-bottom: 15px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/TextIntroduction/SpacingEvaluations.stories.tsx b/src/components/TextIntroduction/SpacingEvaluations.stories.tsx
new file mode 100644
index 00000000..d767cc76
--- /dev/null
+++ b/src/components/TextIntroduction/SpacingEvaluations.stories.tsx
@@ -0,0 +1,134 @@
+import type { Meta } from '@storybook/react';
+import { cloneElement } from 'react';
+import Link from '../Link/Link';
+import List from '../List/List';
+import ListItem from '../List/ListItem';
+import './SpaceAdjustments.less';
+import { TextIntroduction } from './TextIntroduction';
+import placeholders from './testHelpers';
+
+/**
+ * Element combinations for spacing evaluation
+ */
+const meta: Meta<typeof TextIntroduction> = {
+  title: 'Components (Verified)/Spacing Evaluations',
+  component: TextIntroduction
+};
+
+export default meta;
+
+export const V1 = {
+  name: 'Heading + Lead paragraph',
+  render: (): JSX.Element => (
+    <div className='space-evaluation'>
+      <h1>{placeholders.heading}</h1>
+      <p className='lead-paragraph'>{placeholders.subheading}</p>
+    </div>
+  )
+};
+
+export const V2 = {
+  name: 'Heading + Lead paragraph + paragraph',
+  render: (): JSX.Element => (
+    <div className='space-evaluation'>
+      <h1>{placeholders.heading}</h1>
+      <p className='lead-paragraph'>{placeholders.subheading}</p>
+      <p>{placeholders.description}</p>
+    </div>
+  )
+};
+
+export const V3 = {
+  name: 'Heading + Lead paragraph + paragraph + call-to-action',
+  render: (): JSX.Element => (
+    <div className='space-evaluation'>
+      <h1>{placeholders.heading}</h1>
+      <p className='lead-paragraph'>{placeholders.subheading}</p>
+      <p>{placeholders.description}</p>
+      <List isLinks>
+        <ListItem>
+          {cloneElement(placeholders.callToAction, { type: 'list' })}
+        </ListItem>
+      </List>
+    </div>
+  )
+};
+
+export const V4 = {
+  name: 'Heading + paragraph + call-to-action',
+  render: (): JSX.Element => (
+    <div className='space-evaluation'>
+      <h1>{placeholders.heading}</h1>
+      <p>{placeholders.description}</p>
+      <List isLinks>
+        <ListItem>
+          {cloneElement(placeholders.callToAction, { type: 'list' })}
+        </ListItem>
+      </List>
+    </div>
+  )
+};
+
+export const V5 = {
+  name: 'Heading + Lead paragraph + call-to-action',
+  render: (): JSX.Element => (
+    <div className='space-evaluation'>
+      <h1>{placeholders.heading}</h1>
+      <p className='lead-paragraph'>{placeholders.subheading}</p>
+      <List isLinks>
+        <ListItem>
+          <Link type='list' href='/'>
+            {cloneElement(placeholders.callToAction, { type: 'list' })}
+          </Link>
+        </ListItem>
+      </List>
+    </div>
+  )
+};
+
+export const V6 = {
+  name: 'Heading 1 + Lead paragraph + Heading 4 + List links/Call-to-action links',
+  render: (): JSX.Element => (
+    <div className='space-evaluation'>
+      <h1>{placeholders.heading}</h1>
+      <p className='lead-paragraph'>{placeholders.subheading}</p>
+      <h4>This is an additional section header level 4</h4>
+      <List isLinks>
+        <ListItem>
+          <Link type='list' href='/'>
+            {cloneElement(placeholders.callToAction, { type: 'list' })}
+          </Link>
+        </ListItem>
+        <ListItem>
+          <Link type='list' href='/'>
+            {cloneElement(placeholders.callToAction, { type: 'list' })}
+          </Link>
+        </ListItem>
+      </List>
+    </div>
+  )
+};
+
+export const V7 = {
+  name: 'Heading 1 + Lead paragraph + Paragraph + Heading 4 + List links/Call-to-action links',
+  render: (): JSX.Element => (
+    <div className='space-evaluation'>
+      <h1>{placeholders.heading}</h1>
+      <p className='lead-paragraph'>{placeholders.subheading}</p>
+      <p>{placeholders.description}</p>
+      <h4>This is an additional section header level 4</h4>
+      <List isLinks>
+        <ListItem>
+          <Link type='list' href='/'>
+            {cloneElement(placeholders.callToAction, { type: 'list' })}
+          </Link>
+        </ListItem>
+        <ListItem>
+          <Link type='list' href='/'>
+            {cloneElement(placeholders.callToAction, { type: 'list' })}
+          </Link>
+        </ListItem>
+      </List>
+    </div>
+  )
+};

From 4876a33c1969925ee0e51a2cc9624e023ec0121a Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Thu, 26 Oct 2023 14:38:32 -0600
Subject: [PATCH 14/17] fix: Delete SpacingEvaluation stories

---
 .../TextIntroduction/SpaceAdjustments.less    |   6 -
 .../SpacingEvaluations.stories.tsx            | 134 ------------------
 2 files changed, 140 deletions(-)
 delete mode 100644 src/components/TextIntroduction/SpaceAdjustments.less
 delete mode 100644 src/components/TextIntroduction/SpacingEvaluations.stories.tsx

diff --git a/src/components/TextIntroduction/SpaceAdjustments.less b/src/components/TextIntroduction/SpaceAdjustments.less
deleted file mode 100644
index 54bb7ebe..00000000
--- a/src/components/TextIntroduction/SpaceAdjustments.less
+++ /dev/null
@@ -1,6 +0,0 @@
-.space-evaluation {
-  .lead-paragraph {
-    margin-top: 0px;
-    margin-bottom: 15px;
-  }
-}
\ No newline at end of file
diff --git a/src/components/TextIntroduction/SpacingEvaluations.stories.tsx b/src/components/TextIntroduction/SpacingEvaluations.stories.tsx
deleted file mode 100644
index d767cc76..00000000
--- a/src/components/TextIntroduction/SpacingEvaluations.stories.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import type { Meta } from '@storybook/react';
-import { cloneElement } from 'react';
-import Link from '../Link/Link';
-import List from '../List/List';
-import ListItem from '../List/ListItem';
-import './SpaceAdjustments.less';
-import { TextIntroduction } from './TextIntroduction';
-import placeholders from './testHelpers';
-
-/**
- * Element combinations for spacing evaluation
- */
-const meta: Meta<typeof TextIntroduction> = {
-  title: 'Components (Verified)/Spacing Evaluations',
-  component: TextIntroduction
-};
-
-export default meta;
-
-export const V1 = {
-  name: 'Heading + Lead paragraph',
-  render: (): JSX.Element => (
-    <div className='space-evaluation'>
-      <h1>{placeholders.heading}</h1>
-      <p className='lead-paragraph'>{placeholders.subheading}</p>
-    </div>
-  )
-};
-
-export const V2 = {
-  name: 'Heading + Lead paragraph + paragraph',
-  render: (): JSX.Element => (
-    <div className='space-evaluation'>
-      <h1>{placeholders.heading}</h1>
-      <p className='lead-paragraph'>{placeholders.subheading}</p>
-      <p>{placeholders.description}</p>
-    </div>
-  )
-};
-
-export const V3 = {
-  name: 'Heading + Lead paragraph + paragraph + call-to-action',
-  render: (): JSX.Element => (
-    <div className='space-evaluation'>
-      <h1>{placeholders.heading}</h1>
-      <p className='lead-paragraph'>{placeholders.subheading}</p>
-      <p>{placeholders.description}</p>
-      <List isLinks>
-        <ListItem>
-          {cloneElement(placeholders.callToAction, { type: 'list' })}
-        </ListItem>
-      </List>
-    </div>
-  )
-};
-
-export const V4 = {
-  name: 'Heading + paragraph + call-to-action',
-  render: (): JSX.Element => (
-    <div className='space-evaluation'>
-      <h1>{placeholders.heading}</h1>
-      <p>{placeholders.description}</p>
-      <List isLinks>
-        <ListItem>
-          {cloneElement(placeholders.callToAction, { type: 'list' })}
-        </ListItem>
-      </List>
-    </div>
-  )
-};
-
-export const V5 = {
-  name: 'Heading + Lead paragraph + call-to-action',
-  render: (): JSX.Element => (
-    <div className='space-evaluation'>
-      <h1>{placeholders.heading}</h1>
-      <p className='lead-paragraph'>{placeholders.subheading}</p>
-      <List isLinks>
-        <ListItem>
-          <Link type='list' href='/'>
-            {cloneElement(placeholders.callToAction, { type: 'list' })}
-          </Link>
-        </ListItem>
-      </List>
-    </div>
-  )
-};
-
-export const V6 = {
-  name: 'Heading 1 + Lead paragraph + Heading 4 + List links/Call-to-action links',
-  render: (): JSX.Element => (
-    <div className='space-evaluation'>
-      <h1>{placeholders.heading}</h1>
-      <p className='lead-paragraph'>{placeholders.subheading}</p>
-      <h4>This is an additional section header level 4</h4>
-      <List isLinks>
-        <ListItem>
-          <Link type='list' href='/'>
-            {cloneElement(placeholders.callToAction, { type: 'list' })}
-          </Link>
-        </ListItem>
-        <ListItem>
-          <Link type='list' href='/'>
-            {cloneElement(placeholders.callToAction, { type: 'list' })}
-          </Link>
-        </ListItem>
-      </List>
-    </div>
-  )
-};
-
-export const V7 = {
-  name: 'Heading 1 + Lead paragraph + Paragraph + Heading 4 + List links/Call-to-action links',
-  render: (): JSX.Element => (
-    <div className='space-evaluation'>
-      <h1>{placeholders.heading}</h1>
-      <p className='lead-paragraph'>{placeholders.subheading}</p>
-      <p>{placeholders.description}</p>
-      <h4>This is an additional section header level 4</h4>
-      <List isLinks>
-        <ListItem>
-          <Link type='list' href='/'>
-            {cloneElement(placeholders.callToAction, { type: 'list' })}
-          </Link>
-        </ListItem>
-        <ListItem>
-          <Link type='list' href='/'>
-            {cloneElement(placeholders.callToAction, { type: 'list' })}
-          </Link>
-        </ListItem>
-      </List>
-    </div>
-  )
-};

From de797422b59c0699db6eb953c2ee9072443f124e Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Thu, 26 Oct 2023 14:42:52 -0600
Subject: [PATCH 15/17] fix: [TextIntroduction] Match DS language

---
 src/components/TextIntroduction/TextIntroduction.test.tsx | 2 +-
 src/components/TextIntroduction/testHelpers.tsx           | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/TextIntroduction/TextIntroduction.test.tsx b/src/components/TextIntroduction/TextIntroduction.test.tsx
index 7c2cf6de..c4fe8399 100644
--- a/src/components/TextIntroduction/TextIntroduction.test.tsx
+++ b/src/components/TextIntroduction/TextIntroduction.test.tsx
@@ -9,7 +9,7 @@ describe('<TextIntroduction />', () => {
     expect(screen.getByText(placeholders.heading)).toBeInTheDocument();
     expect(screen.getByText(placeholders.subheading)).toBeInTheDocument();
     expect(screen.getByText(placeholders.description)).toBeInTheDocument();
-    expect(screen.getByText('Link one hypertext text')).toBeInTheDocument();
+    expect(screen.getByText('Call-to-action link')).toBeInTheDocument();
   });
 
   it('supports setting top/bottom as flush (remove margin)', () => {
diff --git a/src/components/TextIntroduction/testHelpers.tsx b/src/components/TextIntroduction/testHelpers.tsx
index 98a7048f..63a5c080 100644
--- a/src/components/TextIntroduction/testHelpers.tsx
+++ b/src/components/TextIntroduction/testHelpers.tsx
@@ -1,12 +1,12 @@
 import Link from '../Link/Link';
 
 const subheading =
-  'Subheader, lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae velit quibusdam voluptatem dolor? At, ea dicta. Ipsum sed qui quos iure, beatae voluptas. Repellat pariatur nostrum esse aperiam! Tempore, odit?';
+  'Lead paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';
 
 const description =
-  'Description paragraph, Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque beatae necessitatibus fugiat nesciunt possimus iste eaque vero voluptatum ab dignissimos, repellat, tempora, perspiciatis et repellendus ea quia eveniet hic molestiae.';
+  'Descriptive paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.';
 
-const callToAction = <Link href='/'>Link one hypertext text</Link>;
+const callToAction = <Link href='/'>Call-to-action link</Link>;
 
 export default {
   heading: 'Heading 1',

From 70f636a7393d2ca9dbe264b87499cbd750893597 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Thu, 26 Oct 2023 14:56:01 -0600
Subject: [PATCH 16/17] fix: [TextIntroduction] Use DS styles fix: Remove
 extraneous props for flushing tests: Update tests to use new test id

---
 src/components/Paragraph/Paragraphs.stories.tsx |  2 +-
 .../TextIntroduction/TextIntroduction.less      | 17 -----------------
 .../TextIntroduction.stories.tsx                |  2 +-
 .../TextIntroduction/TextIntroduction.test.tsx  |  8 --------
 .../TextIntroduction/TextIntroduction.tsx       | 16 +++-------------
 5 files changed, 5 insertions(+), 40 deletions(-)
 delete mode 100644 src/components/TextIntroduction/TextIntroduction.less

diff --git a/src/components/Paragraph/Paragraphs.stories.tsx b/src/components/Paragraph/Paragraphs.stories.tsx
index 2a3fddb1..2810864d 100644
--- a/src/components/Paragraph/Paragraphs.stories.tsx
+++ b/src/components/Paragraph/Paragraphs.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta } from '@storybook/react';
 import { Paragraph } from './Paragraph';
 
 const meta: Meta<typeof Paragraph> = {
-  title: 'Components (Verified)/Paragraphs',
+  title: 'Components (Draft)/Paragraphs',
   component: Paragraph
 };
 
diff --git a/src/components/TextIntroduction/TextIntroduction.less b/src/components/TextIntroduction/TextIntroduction.less
deleted file mode 100644
index 15d908fc..00000000
--- a/src/components/TextIntroduction/TextIntroduction.less
+++ /dev/null
@@ -1,17 +0,0 @@
-// WARNING: Styles in this file are intentional overrides of the CFPB Design System
-
-@import (reference) "@cfpb/cfpb-design-system/src/cfpb-design-system.less";
-
-.text-intro.block {
-  margin-top: 0px;
-}
-
-.text-intro .lead-paragraph,
-.text-intro p {
-  margin-bottom: 15px;
-  margin-top: 0;
-}
-
-.text-intro p + ul {
-  margin-top: 15px;
-}
diff --git a/src/components/TextIntroduction/TextIntroduction.stories.tsx b/src/components/TextIntroduction/TextIntroduction.stories.tsx
index af5b0fdc..1bb0896d 100644
--- a/src/components/TextIntroduction/TextIntroduction.stories.tsx
+++ b/src/components/TextIntroduction/TextIntroduction.stories.tsx
@@ -3,7 +3,7 @@ import { TextIntroduction } from './TextIntroduction';
 import placeholders from './testHelpers';
 
 const meta: Meta<typeof TextIntroduction> = {
-  title: 'Components (Verified)/Text introductions',
+  title: 'Components (Draft)/Text introductions',
   component: TextIntroduction
 };
 
diff --git a/src/components/TextIntroduction/TextIntroduction.test.tsx b/src/components/TextIntroduction/TextIntroduction.test.tsx
index c4fe8399..9935743b 100644
--- a/src/components/TextIntroduction/TextIntroduction.test.tsx
+++ b/src/components/TextIntroduction/TextIntroduction.test.tsx
@@ -11,12 +11,4 @@ describe('<TextIntroduction />', () => {
     expect(screen.getByText(placeholders.description)).toBeInTheDocument();
     expect(screen.getByText('Call-to-action link')).toBeInTheDocument();
   });
-
-  it('supports setting top/bottom as flush (remove margin)', () => {
-    render(<TextIntroduction {...placeholders} isFlushTop isFlushBottom />);
-    const element = screen.getByTestId('text-intro-wrapper');
-    expect(element).toBeInTheDocument();
-    expect(element.classList.contains('block__flush-top')).toBe(true);
-    expect(element.classList.contains('block__flush-bottom')).toBe(true);
-  });
 });
diff --git a/src/components/TextIntroduction/TextIntroduction.tsx b/src/components/TextIntroduction/TextIntroduction.tsx
index 26544396..51e77b1b 100644
--- a/src/components/TextIntroduction/TextIntroduction.tsx
+++ b/src/components/TextIntroduction/TextIntroduction.tsx
@@ -4,7 +4,6 @@ import { Heading } from '../Headings/Heading';
 import List from '../List/List';
 import ListItem from '../List/ListItem';
 import { Paragraph } from '../Paragraph/Paragraph';
-import './TextIntroduction.less';
 
 interface TextIntroductionProperties extends React.HTMLProps<HTMLDivElement> {
   // Page title
@@ -12,13 +11,9 @@ interface TextIntroductionProperties extends React.HTMLProps<HTMLDivElement> {
   // Lead paragraph
   subheading: string;
   // Descriptive paragraph
-  description?: ReactNode | string;
+  description?: ReactNode;
   // Call-to-action <Link>
   callToAction?: JSX.Element;
-  // Remove top margin?
-  isFlushTop?: boolean;
-  // Remove bottom margin?
-  isFlushBottom?: boolean;
 }
 
 /**
@@ -32,14 +27,9 @@ export const TextIntroduction = ({
   description,
   callToAction,
   className,
-  isFlushTop,
-  isFlushBottom,
   ...properties
 }: TextIntroductionProperties): JSX.Element => {
-  const cnames = ['block', 'text-intro', className];
-
-  if (isFlushTop) cnames.push('block__flush-top');
-  if (isFlushBottom) cnames.push('block__flush-bottom');
+  const cnames = ['o-text-introduction', className];
 
   const call2action = callToAction && (
     <List isLinks>
@@ -51,7 +41,7 @@ export const TextIntroduction = ({
     <div
       className={classnames(cnames)}
       {...properties}
-      data-testid='text-intro-wrapper'
+      data-testid='text-introduction-wrapper'
     >
       <Heading type='1'>{heading}</Heading>
       <Paragraph isLead>{subheading}</Paragraph>

From da513ce367b7bbe7a77cdd380e2ee5f21d361307 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Tue, 31 Oct 2023 11:21:14 -0600
Subject: [PATCH 17/17] Move Paragraph and TextIntroduction to "Verified"
 status

---
 src/components/Paragraph/Paragraphs.stories.tsx              | 2 +-
 src/components/TextIntroduction/TextIntroduction.stories.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Paragraph/Paragraphs.stories.tsx b/src/components/Paragraph/Paragraphs.stories.tsx
index 2810864d..2a3fddb1 100644
--- a/src/components/Paragraph/Paragraphs.stories.tsx
+++ b/src/components/Paragraph/Paragraphs.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta } from '@storybook/react';
 import { Paragraph } from './Paragraph';
 
 const meta: Meta<typeof Paragraph> = {
-  title: 'Components (Draft)/Paragraphs',
+  title: 'Components (Verified)/Paragraphs',
   component: Paragraph
 };
 
diff --git a/src/components/TextIntroduction/TextIntroduction.stories.tsx b/src/components/TextIntroduction/TextIntroduction.stories.tsx
index 1bb0896d..af5b0fdc 100644
--- a/src/components/TextIntroduction/TextIntroduction.stories.tsx
+++ b/src/components/TextIntroduction/TextIntroduction.stories.tsx
@@ -3,7 +3,7 @@ import { TextIntroduction } from './TextIntroduction';
 import placeholders from './testHelpers';
 
 const meta: Meta<typeof TextIntroduction> = {
-  title: 'Components (Draft)/Text introductions',
+  title: 'Components (Verified)/Text introductions',
   component: TextIntroduction
 };