New Component: Summary box

[brandonlenz]

Summary box

USWDS Version

2.10.0

Description

A summary box highlights key information from a longer page or displays next steps.

Requirements (proposed)

Prop Interface

interface SummaryBoxLinkProps = {
  href: string
 // We should internally just make use of our custom Link, perhaps the way BreadcrumbLink or IdentifierLink are designed
}

interface SummaryBoxInfoItemProps = {
  children?: React.ReactNode
  className?: string
}

interface SummaryBoxProps = {
  heading: string
  children: React.ReactElement< SummaryBoxInfoItemProps > | React.ReactElement< SummaryBoxInfoItemProps >[]
  className?: string
}

Example Implementation (proposed)

return (
  <SummaryBox heading="Key Information">
    <SummaryBoxInfoItem>
      If you are under a winter storm warning, <SummaryBoxLink href="#usa-anchor-find-shelter">find shelter</SummaryBoxLink> right away.
    </SummaryBoxInfoItem>
    <SummaryBoxInfoItem>
      Sign up for <SummaryBoxLink href="#usa-anchor-warning-system">your community’s warning system</SummaryBoxLink>.
    </SummaryBoxInfoItem>
    <SummaryBoxInfoItem>
      Learn the signs of, and basic treatments for, <SummaryBoxLink" href="#usa-anchor-frostbite">frostbite</SummaryBoxLink> and <SummaryBoxLink href="#usa-anchor-hypothermia">hypothermia</SummaryBoxLink>.
    </SummaryBoxInfoItem>
    <SummaryBoxInfoItem>
      Gather emergency supplies for your <SummaryBoxLink href="#usa-anchor-home">home</SummaryBoxLink> and your <SummaryBoxLink href="#usa-anchor-car">car</SummaryBoxLink>.
    </SummaryBoxInfoItem>
  </SummaryBox>
)

More Details

• <div>root element
• <li> root element for SummaryBoxInfoItem
• SummaryBoxLink should make use of our Link asCustom similar to BreadcrumbLink.