More changes from the checklist

Author: pksjce

docs/content/Button.mdx

@@ -1,6 +1,6 @@
 ---
-componentId: button_v2
-title: Button v2
+componentId: button
+title: Button
 status: Alpha
 source: https://github.com/primer/react/tree/main/src/Button2
 storybook: '/react/storybook?path=/story/composite-components-button2'

docs/content/drafts/IconButton.mdx renamed to docs/content/IconButton.mdx

@@ -6,9 +6,6 @@ storybook: '/react/storybook?path=/story/composite-components-button2'
 description: An accessible button component with no text and only icon.
 ---
 
-import {Props} from '../../src/props'
-import {ComponentChecklist} from '../../src/component-checklist'
-
 ## Usage
 
 ### Installation

docs/content/drafts/LinkButton.mdx renamed to docs/content/LinkButton.mdx

@@ -6,10 +6,6 @@ storybook: '/react/storybook?path=/story/composite-components-button2'
 description: It is a combination of a button and link. Use this to make your link look like a button.
 ---
 
-import {Props} from '../../src/props'
-import {ComponentChecklist} from '../../src/component-checklist'
-import {ArrowRightIcon} from '@primer/octicons-react'
-
 ## Usage
 
 ### Installation

docs/content/deprecated/Buttons.mdx

@@ -1,7 +1,7 @@
 ---
 componentId: button
 title: Button
-status: Alpha
+status: deprecated
 source: https://github.com/primer/react/blob/main/src/Button
 storybook: '/react/storybook?path=/story/composite-components-button--default-button'
 ---

docs/content/migration-guide/Button.mdx

@@ -53,8 +53,8 @@
       url: /BranchName
     - title: Breadcrumbs
       url: /Breadcrumbs
-    - title: Buttons
-      url: /Buttons
+    - title: Button
+      url: /Button
     - title: Checkbox
       url: /Checkbox
     - title: CheckboxGroup
@@ -79,12 +79,16 @@
       url: /Header
     - title: Heading
       url: /Heading
+    - title: IconButton
+      url: /IconButton
     - title: Label
       url: /Label
     - title: LabelGroup
       url: /LabelGroup
     - title: Link
       url: /Link
+    - title: LinkButton
+      url: /LinkButton
     - title: Overlay
       url: /Overlay
     - title: Pagehead
@@ -141,12 +145,6 @@
       url: /UnderlineNav
 - title: Drafts
   children:
-    - title: Button v2
-      url: /drafts/Button2
-    - title: LinkButton
-      url: /drafts/LinkButton
-    - title: IconButton
-      url: /drafts/IconButton
 - title: Deprecated
   children:
     - title: ActionList
@@ -155,6 +153,8 @@
       url: /deprecated/ActionMenu
     - title: BorderBox
       url: /deprecated/BorderBox
+    - title: Buttons
+      url: /deprecated/Buttons
     - title: Dialog
       url: /deprecated/Dialog
     - title: Dropdown

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -1,130 +1,98 @@
 import React from 'react'
-import {
-  Button,
-  ButtonPrimary,
-  ButtonClose,
-  ButtonDanger,
-  ButtonOutline,
-  ButtonInvisible,
-  ButtonTableList
-} from '../deprecated'
-import {ButtonGroup} from '../'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {IconButton, Button} from '../Button'
+import {behavesAsComponent} from '../utils/testing'
+import {render, cleanup, fireEvent} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
+import {SearchIcon} from '@primer/octicons-react'
 expect.extend(toHaveNoViolations)
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-function noop() {}
-
 describe('Button', () => {
-  behavesAsComponent({Component: Button})
-
-  checkExports('deprecated/Button', {
-    default: Button,
-    ButtonPrimary,
-    ButtonDanger,
-    ButtonOutline,
-    ButtonInvisible,
-    ButtonTableList,
-    ButtonClose
-  })
-  checkExports('ButtonGroup', {
-    default: ButtonGroup
-  })
+  behavesAsComponent({Component: Button, options: {skipAs: true}})
 
-  it('renders a <button>', () => {
-    expect(render(<Button />).type).toEqual('button')
+  it('renders a <button>', async () => {
+    const container = render(<Button>Default</Button>)
+    const button = await container.findByRole('button')
+    expect(button.textContent).toEqual('Default')
   })
 
   it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Button>Click here</Button>)
+    const {container} = render(<Button>Click here</Button>)
     const results = await axe(container)
     expect(results).toHaveNoViolations()
     cleanup()
   })
 
-  it('preserves "onClick" prop', () => {
-    expect(render(<Button onClick={noop} />).props.onClick).toEqual(noop)
-  })
-
-  it('respects width props', () => {
-    expect(render(<Button sx={{width: 200}} />)).toHaveStyleRule('width', '200px')
+  it('preserves "onClick" prop', async () => {
+    const onClick = jest.fn()
+    const container = render(<Button onClick={onClick}>Noop</Button>)
+    const button = await container.findByRole('button')
+    fireEvent.click(button)
+    expect(onClick).toHaveBeenCalledTimes(1)
   })
 
-  it('respects the "disabled" prop', () => {
-    const item = render(<Button disabled />)
-    expect(item.props.disabled).toEqual(true)
-    expect(item).toMatchSnapshot()
+  it('respects width props', async () => {
+    const container = render(<Button sx={{width: 200}}>Block</Button>)
+    const button = await container.findByRole('button')
+    expect(button).toHaveStyleRule('width', '200px')
   })
 
-  it('respects the "variant" prop', () => {
-    expect(render(<Button variant="small" />)).toHaveStyleRule('font-size', '12px')
-    expect(render(<Button variant="large" />)).toHaveStyleRule('font-size', '16px')
-  })
-
-  it('respects the "fontSize" prop over the "variant" prop', () => {
-    expect(render(<Button variant="small" sx={{fontSize: 20}} />)).toHaveStyleRule('font-size', '20px')
-  })
-})
-
-describe('ButtonPrimary', () => {
-  behavesAsComponent({Component: ButtonPrimary})
-
-  it('renders a <button>', () => {
-    expect(render(<ButtonPrimary />).type).toEqual('button')
+  it('respects the "disabled" prop', async () => {
+    const onClick = jest.fn()
+    const container = render(
+      <Button onClick={onClick} disabled>
+        Disabled
+      </Button>
+    )
+    const button = await container.findByRole('button')
+    expect(button.hasAttribute('disabled')).toEqual(true)
+    fireEvent.click(button)
+    expect(onClick).toHaveBeenCalledTimes(0)
   })
 
-  it('renders correct disabled styles', () => {
-    const item = render(<ButtonPrimary disabled />)
-    expect(item).toMatchSnapshot()
+  it('respects the "variant" prop', async () => {
+    const container = render(<Button size="small">Smol</Button>)
+    const button = await container.findByRole('button')
+    expect(button).toHaveStyleRule('font-size', '12px')
   })
-})
-
-describe('ButtonDanger', () => {
-  behavesAsComponent({Component: ButtonDanger})
 
-  it('renders a <button>', () => {
-    expect(render(<ButtonDanger />).type).toEqual('button')
+  it('respects the "fontSize" prop over the "variant" prop', async () => {
+    const container = render(
+      <Button size="small" sx={{fontSize: 20}}>
+        Big Smol
+      </Button>
+    )
+    const button = await container.findByRole('button')
+    expect(button).toHaveStyleRule('font-size', '20px')
   })
 
-  it('renders correct disabled styles', () => {
-    const item = render(<ButtonDanger disabled />)
-    expect(item).toMatchSnapshot()
+  it('styles primary button appropriately', async () => {
+    const container = render(<Button variant="primary">Primary</Button>)
+    const button = await container.findByRole('button')
+    expect(button).toMatchSnapshot()
   })
-})
-
-describe('ButtonOutline', () => {
-  behavesAsComponent({Component: ButtonOutline})
 
-  it('renders a <button> by default', () => {
-    expect(render(<ButtonOutline />).type).toEqual('button')
+  it('styles invisible button appropriately', async () => {
+    const container = render(<Button variant="invisible">Invisible</Button>)
+    const button = await container.findByRole('button')
+    expect(button).toMatchSnapshot()
   })
 
-  it('renders correct disabled styles', () => {
-    const item = render(<ButtonOutline disabled />)
-    expect(item).toMatchSnapshot()
+  it('styles danger button appropriately', async () => {
+    const container = render(<Button variant="danger">Danger</Button>)
+    const button = await container.findByRole('button')
+    expect(button).toMatchSnapshot()
   })
-})
 
-describe('ButtonInvisible', () => {
-  behavesAsComponent({Component: ButtonOutline})
-
-  it('renders a <button> by default', () => {
-    expect(render(<ButtonInvisible />).type).toEqual('button')
+  it('styles outline button appropriately', async () => {
+    const container = render(<Button variant="outline">Outline</Button>)
+    const button = await container.findByRole('button')
+    expect(button).toMatchSnapshot()
   })
 
-  it('renders correct disabled styles', () => {
-    const item = render(<ButtonInvisible disabled />)
-    expect(item).toMatchSnapshot()
+  it('styles icon only button to make it a square', async () => {
+    const container = render(<IconButton icon={SearchIcon} iconLabel="Search icon only button" />)
+    const IconOnlyButton = await container.findByRole('button')
+    expect(IconOnlyButton).toHaveStyleRule('padding-right', '8px')
   })
 })
-
-describe('ButtonGroup', () => {
-  behavesAsComponent({Component: ButtonGroup})
-})
-
-describe('ButtonTableList', () => {
-  behavesAsComponent({Component: ButtonTableList})
-})