feat(ButtonGroup): Add new component ButtonGroup (#382)

src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { ButtonGroup } from './ButtonGroup'
+import { Button } from '../Button/Button'
+import { Link } from '../Link/Link'
+
+export default {
+  title: 'ButtonGroup',
+  component: ButtonGroup,
+  parameters: {
+    info: `
+USWDS 2.0 ButtonGroup component
+
+Source: https://designsystem.digital.gov/components/button-groups/
+`,
+  },
+}
+
+export const Default = (): React.ReactElement => (
+  <ButtonGroup type="default">
+    <Link href="#" className="usa-button usa-button--outline">
+      Back
+    </Link>
+    <Button type="button">Continue</Button>
+  </ButtonGroup>
+)
+
+export const Segmented = (): React.ReactElement => (
+  <ButtonGroup type="segmented">
+    <Button type="button">Map</Button>
+    <Button type="button" outline>
+      Satellite
+    </Button>
+    <Button type="button" outline>
+      Hybrid
+    </Button>
+  </ButtonGroup>
+)

src/components/ButtonGroup/ButtonGroup.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { ButtonGroup } from './ButtonGroup'
+
+describe('ButtonGroup component', () => {
+  it('renders without errors', () => {
+    const { getByRole } = render(
+      <ButtonGroup>
+        <button>This is a button</button>
+      </ButtonGroup>
+    )
+    expect(getByRole('list')).toBeInTheDocument()
+  })
+
+  it('renders its children', () => {
+    const { getByText } = render(<ButtonGroup>My Text Input</ButtonGroup>)
+    expect(getByText('My Text Input')).toBeInTheDocument()
+  })
+
+  it('displays with expected styles', () => {
+    const { getByRole } = render(
+      <ButtonGroup>
+        <button>This is a button</button>
+      </ButtonGroup>
+    )
+    expect(getByRole('list')).toHaveClass('usa-button-group')
+  })
+
+  it('handles type prop  - default', () => {
+    const { getByRole } = render(
+      <ButtonGroup type="default">A child</ButtonGroup>
+    )
+    expect(getByRole('list')).not.toHaveClass('usa-button-group--segmented')
+  })
+
+  it('handles type prop  - segmented', () => {
+    const { getByRole } = render(
+      <ButtonGroup type="segmented">A child</ButtonGroup>
+    )
+    expect(getByRole('list')).toHaveClass('usa-button-group--segmented')
+  })
+
+  it('displays list elements with expected styles', () => {
+    const { getByRole } = render(<ButtonGroup>A child</ButtonGroup>)
+    expect(getByRole('listitem')).toBeInTheDocument()
+    expect(getByRole('listitem')).toHaveClass('usa-button-group__item')
+  })
+
+  it('renders a list item wrapping each child', () => {
+    const { getAllByRole } = render(
+      <ButtonGroup>
+        <p>first child</p>
+        <p>second child</p>
+      </ButtonGroup>
+    )
+    const listItems = getAllByRole('listitem')
+    expect(listItems[0]).toHaveTextContent('first child')
+    expect(listItems[1]).toHaveTextContent('second child')
+    expect(listItems.length).toBe(2)
+  })
+})

src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import classnames from 'classnames'
+
+type ButtonGroupProps = {
+  children: React.ReactNode
+  className?: string
+  type?: 'default' | 'segmented'
+} & JSX.IntrinsicElements['ul']
+
+export const ButtonGroup = (props: ButtonGroupProps): React.ReactElement => {
+  const { className, children, type = 'default', ...restProps } = props
+
+  const classes = classnames(
+    'usa-button-group',
+    {
+      'usa-button-group--segmented': type == 'segmented',
+    },
+    className
+  )
+
+  return (
+    <ul className={classes} {...restProps}>
+      {React.Children.map(children, (child: React.ReactNode) => {
+        return <li className="usa-button-group__item">{child}</li>
+      })}
+    </ul>
+  )
+}
+
+export default ButtonGroup

src/index.ts

@@ -6,6 +6,7 @@ export { Alert } from './components/Alert/Alert'
 export { Accordion } from './components/Accordion/Accordion'
 export { GovBanner } from './components/GovBanner/GovBanner'
 export { Button } from './components/Button/Button'
+export { ButtonGroup } from './components/ButtonGroup/ButtonGroup'
 export { Link } from './components/Link/Link'
 export { Table } from './components/Table/Table'
 export { Tag } from './components/Tag/Tag'