fix: [TextIntroduction] Use DS styles

fix: Remove extraneous props for flushing tests: Update tests to use new test id
cfpb · Oct 26, 2023 · 70f636a · 70f636a
1 parent de79742
commit 70f636a
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 40 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -4,21 +4,16 @@ 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
   heading: string;
   // 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>