feat: New Component SummaryBox

package.json

@@ -62,7 +62,9 @@
   "peerDependencies": {
     "react": "^16.x || ^17.x",
     "react-dom": "^16.x || ^17.x",
+
     "uswds": "2.10.3"
+
   },
   "devDependencies": {
     "@babel/core": "^7.10.5",
@@ -126,7 +128,9 @@
     "ts-jest": "^26.1.2",
     "typescript": "^3.8.0",
     "url-loader": "^4.0.0",
+
     "uswds": "2.10.3",
+
     "webpack": "^4.41.0",
     "webpack-cli": "^4.0.0"
   },

src/components/SummaryBox/SummaryBox.stories.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import { SummaryBox } from './SummaryBox'
+
+export default {
+  title: 'Components/SummaryBox',
+  component: SummaryBox,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### USWDS 2.0 SummaryBox component
+
+Source: https://designsystem.digital.gov/components/summary-box
+`,
+      },
+    },
+  },
+}
+
+const summaryBoxContent = (
+  <div className="usa-summary-box__text">
+    <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>
+  </div>
+)
+
+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

@@ -88,6 +88,8 @@ export { StepIndicatorStep } from './components/stepindicator/StepIndicatorStep/
 
 export { Search } from './components/Search/Search'
 
+export { SummaryBox } from './components/SummaryBox/SummaryBox'
+
 /** Truss-designed components */
 export {
   Modal,

yarn.lock

@@ -13944,10 +13944,12 @@ use@^3.1.0:
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
+
 uswds@2.10.3:
   version "2.10.3"
   resolved "https://registry.yarnpkg.com/uswds/-/uswds-2.10.3.tgz#16d34cee81897762d6d69d3ac83aa55129826fa6"
   integrity sha512-krNRzx1jRzOJpuH/qtmQhd5zxnXTaDVqrPNYT99sJbxzWUqjb1zZHh3jFNo+xKDpNuiO0XMPwZwlaSp2YdZ3Ag==
+
   dependencies:
     classlist-polyfill "^1.0.3"
     del "^6.0.0"