feat: New Component SummaryBox (#1098)

* Create skeleton for new component SummaryBox, render passed in heading, render passed in text as children

* Add default Storybook example

* Add test for ability to pass props

* Remove empty comment

* Make Storybook example variable name lower case

* Commit yarn.lock changes

* Remove unwanted spaces from Storybook example

* Remove everything except '#' from the test and Storybook href props in each anchor tag, disable eslint anchor validity check in both files

* Remove hardcoded role prop from SummaryBox root div, move test custom props to its own obj and pass into the test

* Remove unnecessary data-testid, separate summary box content in storybook example, add test checking for rendering children

* Export SummaryBox from index.ts

* Remove straggler - extended href name

* Move enclosing div from Storybook to SummaryBox component wrapping children, make the props passed to the root div more explicitly named divProps

* Add check for passing custom classname

* Update stories file as per Suz's PR feedback

* Resolve conflicts in yarn.lock

* Regenerate yarn.lock

* Remove unnecessary spaces from default export in Storybook

src/components/SummaryBox/SummaryBox.stories.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import { SummaryBox } from './SummaryBox'
+
+export default {
+  title: 'Components/Summary box',
+  component: SummaryBox,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### USWDS 2.0 SummaryBox component
+
+Source: https://designsystem.digital.gov/components/summary-box
+`,
+      },
+    },
+  },
+}
+
+const summaryBoxContent = (
+  <ul className="usa-list">
+    <li>
+      If you are under a winter storm warning,&nbsp;
+      <a className="usa-summary-box__link" href="#">
+        find shelter
+      </a>
+      &nbsp;right away.
+    </li>
+    <li>
+      Sign up for&nbsp;
+      <a className="usa-summary-box__link" href="#usa-anchor-warning-system">
+        your community’s warning system
+      </a>
+      .
+    </li>
+    <li>
+      Learn the signs of, and basic treatments for,&nbsp;
+      <a className="usa-summary-box__link" href="#">
+        frostbite
+      </a>
+      &nbsp;and&nbsp;
+      <a className="usa-summary-box__link" href="#">
+        hypothermia
+      </a>
+      .
+    </li>
+    <li>
+      Gather emergency supplies for your&nbsp;
+      <a className="usa-summary-box__link" href="#">
+        home
+      </a>
+      &nbsp;and your&nbsp;
+      <a className="usa-summary-box__link" href="#">
+        car
+      </a>
+      .
+    </li>
+  </ul>
+)
+
+export const summaryBoxDefault = (): React.ReactElement => (
+  <SummaryBox heading="Key information">{summaryBoxContent}</SummaryBox>
+)

src/components/SummaryBox/SummaryBox.test.tsx

@@ -0,0 +1,81 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import { render } from '@testing-library/react'
+import { SummaryBox } from './SummaryBox'
+
+const testSummaryBoxContent = (
+  <ul className="usa-list">
+    <li>
+      If you are under a winter storm warning,&nbsp;
+      <a className="usa-summary-box__link" href="#">
+        find shelter
+      </a>
+      &nbsp;right away.
+    </li>
+    <li>
+      Sign up for&nbsp;
+      <a className="usa-summary-box__link" href="#">
+        your community’s warning system
+      </a>
+      .
+    </li>
+    <li>
+      Learn the signs of, and basic treatments for,&nbsp;
+      <a className="usa-summary-box__link" href="#">
+        frostbite
+      </a>
+      &nbsp;and&nbsp;
+      <a className="usa-summary-box__link" href="#">
+        hypothermia
+      </a>
+      .
+    </li>
+    <li>
+      Gather emergency supplies for your&nbsp;
+      <a className="usa-summary-box__link" href="#">
+        home
+      </a>
+      &nbsp;and your&nbsp;
+      <a className="usa-summary-box__link" href="#">
+        car
+      </a>
+      .
+    </li>
+  </ul>
+)
+
+const customProps = {
+  role: 'complementary',
+  className: 'custom-class-name',
+  heading: 'Example heading',
+}
+
+describe('SummaryBox component', () => {
+  it('renders without errors', () => {
+    const { getByRole } = render(
+      <SummaryBox heading="Key information">{testSummaryBoxContent}</SummaryBox>
+    )
+
+    expect(getByRole('heading')).toBeInTheDocument()
+  })
+
+  it('renders passed in children', () => {
+    const { getAllByRole } = render(
+      <SummaryBox heading="Example heading">{testSummaryBoxContent}</SummaryBox>
+    )
+
+    expect(getAllByRole('listitem')).toHaveLength(4)
+    expect(getAllByRole('link')).toHaveLength(6)
+  })
+
+  it('renders attributes passed in through props', () => {
+    const { queryByText, queryByTestId } = render(
+      <SummaryBox {...customProps}>{testSummaryBoxContent}</SummaryBox>
+    )
+
+    const qByTestId = queryByTestId('summary-box')
+    expect(queryByText('Example heading')).toBeInTheDocument()
+    expect(qByTestId).toHaveAttribute('role', 'complementary')
+    expect(qByTestId).toHaveClass('usa-summary-box custom-class-name')
+  })
+})

src/components/SummaryBox/SummaryBox.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import classnames from 'classnames'
+
+interface SummaryBoxProps {
+  heading: string
+  children?: React.ReactNode
+  className?: string
+}
+
+export const SummaryBox = ({
+  heading,
+  children,
+  className,
+  ...divProps
+}: SummaryBoxProps & JSX.IntrinsicElements['div']): React.ReactElement => {
+  const classes = classnames('usa-summary-box', className)
+  return (
+    <div className={classes} data-testid="summary-box" {...divProps}>
+      <div className="usa-summary-box__body">
+        <h3 className="usa-summary-box__heading">{heading}</h3>
+        <div className="usa-summary-box__text">{children}</div>
+      </div>
+    </div>
+  )
+}
+
+export default SummaryBox

src/index.ts

@@ -90,6 +90,8 @@ export { StepIndicatorStep } from './components/stepindicator/StepIndicatorStep/
 
 export { Search } from './components/Search/Search'
 
+export { SummaryBox } from './components/SummaryBox/SummaryBox'
+
 /** ProcessList components */
 export { ProcessList } from './components/ProcessList/ProcessList/ProcessList'
 export { ProcessListItem } from './components/ProcessList/ProcessListItem/ProcessListItem'