Fix stories and tests. Also add tooltip story

Author: pksjce

src/Button/Button.stories.tsx

@@ -180,7 +180,7 @@ export const disabledButton = ({...args}: ButtonProps) => {
         </Button>
       </Box>
       <Box mb={2}>
-        <IconButton disabled icon={() => <XIcon />} iconLabel="Close" {...args} />
+        <IconButton disabled icon={() => <XIcon />} aria-label="Close" {...args} />
       </Box>
     </>
   )

src/Button/types.ts

@@ -11,6 +11,11 @@ export type Size = 'small' | 'medium' | 'large'
 
 type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>
 
+interface ButtonA11yProps {
+  ariaLabel: string
+  ariaLabelledby: string
+}
+
 export type ButtonBaseProps = {
   /**
    * Determine's the styles on a button one of 'default' | 'primary' | 'invisible' | 'danger'
@@ -40,12 +45,8 @@ export type ButtonProps = {
   children: React.ReactNode
 } & ButtonBaseProps
 
-export type IconButtonProps = {
-  /**
-   * This is to be used if it is an icon-only button. Will make text visually hidden
-   */
+export type IconButtonProps = Partial<ButtonA11yProps> & {
   icon: React.FunctionComponent<IconProps>
-  'aria-label': string
 } & ButtonBaseProps
 
 // adopted from React.AnchorHTMLAttributes

src/__tests__/Button.test.tsx

@@ -10,9 +10,9 @@ expect.extend(toHaveNoViolations)
 describe('Button', () => {
   behavesAsComponent({Component: Button, options: {skipAs: true}})
 
-  it('renders a <button>', async () => {
+  it('renders a <button>', () => {
     const container = render(<Button>Default</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button.textContent).toEqual('Default')
   })
 
@@ -23,77 +23,82 @@ describe('Button', () => {
     cleanup()
   })
 
-  it('preserves "onClick" prop', async () => {
+  it('preserves "onClick" prop', () => {
     const onClick = jest.fn()
     const container = render(<Button onClick={onClick}>Noop</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     fireEvent.click(button)
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 
-  it('respects width props', async () => {
+  it('respects width props', () => {
     const container = render(<Button sx={{width: 200}}>Block</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button).toHaveStyleRule('width', '200px')
   })
 
-  it('respects the "disabled" prop', async () => {
+  it('respects the "disabled" prop', () => {
     const onClick = jest.fn()
     const container = render(
       <Button onClick={onClick} disabled>
         Disabled
       </Button>
     )
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button.hasAttribute('disabled')).toEqual(true)
     fireEvent.click(button)
     expect(onClick).toHaveBeenCalledTimes(0)
   })
 
-  it('respects the "variant" prop', async () => {
+  it('respects the "variant" prop', () => {
     const container = render(<Button size="small">Smol</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button).toHaveStyleRule('font-size', '12px')
   })
 
-  it('respects the "fontSize" prop over the "variant" prop', async () => {
+  it('respects the "fontSize" prop over the "variant" prop', () => {
     const container = render(
       <Button size="small" sx={{fontSize: 20}}>
         Big Smol
       </Button>
     )
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button).toHaveStyleRule('font-size', '20px')
   })
 
-  it('styles primary button appropriately', async () => {
+  it('styles primary button appropriately', () => {
     const container = render(<Button variant="primary">Primary</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button).toMatchSnapshot()
   })
 
-  it('styles invisible button appropriately', async () => {
+  it('styles invisible button appropriately', () => {
     const container = render(<Button variant="invisible">Invisible</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button).toMatchSnapshot()
   })
 
-  it('styles danger button appropriately', async () => {
+  it('styles danger button appropriately', () => {
     const container = render(<Button variant="danger">Danger</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button).toMatchSnapshot()
   })
 
-  it('styles outline button appropriately', async () => {
+  it('styles outline button appropriately', () => {
     const container = render(<Button variant="outline">Outline</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button).toMatchSnapshot()
   })
 
-  it('styles icon only button to make it a square', async () => {
+  it('styles icon only button to make it a square', () => {
     const container = render(<IconButton icon={SearchIcon} aria-label="Search button" />)
-    const IconOnlyButton = await container.findByRole('button')
+    const IconOnlyButton = container.getByRole('button')
     expect(IconOnlyButton).toHaveStyleRule('padding-right', '8px')
     expect(IconOnlyButton).toMatchSnapshot()
   })
+  it('makes sure icon button has an aria-label', () => {
+    const container = render(<IconButton icon={SearchIcon} aria-label="Search button" />)
+    const IconOnlyButton = container.getByLabelText('Search button')
+    expect(IconOnlyButton).toBeTruthy()
+  })
 })

src/stories/Tooltip.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import {Meta} from '@storybook/react'
+import {BaseStyles, ThemeProvider, IconButton} from '..'
+import Box from '../Box'
+import Tooltip from '../Tooltip'
+import {SearchIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Tooltip/Default',
+  component: Tooltip,
+
+  decorators: [
+    Story => {
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    }
+  ]
+} as Meta
+
+export const TextTooltip = () => (
+  <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={3}>
+    <Tooltip aria-label="Hello, Tooltip!">Text with a tooltip</Tooltip>
+  </Box>
+)
+
+export const IconButtonTooltip = () => (
+  <Box sx={{p: 5}}>
+    <Tooltip aria-label="Search">
+      <IconButton icon={SearchIcon} aria-label="Search" />
+    </Tooltip>
+  </Box>
+)