@primer/components 29.1.1-rc.0f976d3a → 30.0.0-rc.48fd5c94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "29.1.1-rc.0f976d3a",
+  "version": "30.0.0-rc.48fd5c94",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -15,7 +15,7 @@
     "start": "concurrently npm:start:*",
     "start:docs": "cd docs && npm run develop",
     "start:storybook": "start-storybook -p 6006",
-    "lint": "eslint '**/*.{js,ts,tsx}'",
+    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}'",
     "lint:fix": "npm run lint -- --fix",
     "test": "jest",
     "test:update": "npm run test -- --updateSnapshot",
@@ -56,14 +56,13 @@
     "@types/styled-system__theme-get": "5.0.1",
     "classnames": "2.3.1",
     "deepmerge": "4.2.2",
-    "eslint-plugin-primer-react": "0.4.1",
     "focus-visible": "5.2.0",
     "styled-system": "5.1.5"
   },
   "devDependencies": {
     "@babel/cli": "7.14.5",
     "@babel/core": "7.14.8",
-    "@babel/eslint-parser": "7.14.5",
+    "@babel/eslint-parser": "7.15.7",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.14.5",
     "@babel/plugin-proposal-optional-chaining": "7.14.5",
     "@babel/plugin-transform-modules-commonjs": "7.14.5",
@@ -79,7 +78,7 @@
     "@storybook/addon-actions": "^6.2.9",
     "@storybook/addon-essentials": "6.2.9",
     "@storybook/addon-links": "^6.2.9",
-    "@storybook/react": "6.3.6",
+    "@storybook/react": "6.3.8",
     "@testing-library/dom": "7.31.2",
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "7.0.0",
@@ -110,7 +109,9 @@
     "eslint-plugin-github": "4.1.3",
     "eslint-plugin-jest": "24.3.6",
     "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-mdx": "1.15.1",
     "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-primer-react": "0.4.2",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "jest": "27.0.4",

package/src/{Breadcrumb.tsx → Breadcrumbs.tsx}

@@ -31,7 +31,7 @@ const Wrapper = styled.li`
   }
 `
 
-const BreadcrumbBase = styled.nav<SystemFlexProps & SystemCommonProps & SxProp>`
+const BreadcrumbsBase = styled.nav<SystemFlexProps & SystemCommonProps & SxProp>`
   display: flex;
   justify-content: space-between;
   ${COMMON};
@@ -39,31 +39,30 @@ const BreadcrumbBase = styled.nav<SystemFlexProps & SystemCommonProps & SxProp>`
   ${sx};
 `
 
-export type BreadcrumbProps = ComponentProps<typeof BreadcrumbBase>
+export type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>
 
-function Breadcrumb({className, children, theme, ...rest}: React.PropsWithChildren<BreadcrumbProps>) {
-  const classes = classnames(className, 'Breadcrumb')
+function Breadcrumbs({className, children, theme, ...rest}: React.PropsWithChildren<BreadcrumbsProps>) {
   const wrappedChildren = React.Children.map(children, child => <Wrapper theme={theme}>{child}</Wrapper>)
   return (
-    <BreadcrumbBase className={classes} aria-label="breadcrumb" theme={theme} {...rest}>
+    <BreadcrumbsBase className={className} aria-label="Breadcrumbs" theme={theme} {...rest}>
       <Box as="ol" my={0} pl={0}>
         {wrappedChildren}
       </Box>
-    </BreadcrumbBase>
+    </BreadcrumbsBase>
   )
 }
 
-type StyledBreadcrumbItemProps = {
+type StyledBreadcrumbsItemProps = {
   to?: History.LocationDescriptor
   selected?: boolean
 } & SystemCommonProps &
   SxProp
 
-const BreadcrumbItem = styled.a.attrs<StyledBreadcrumbItemProps>(props => ({
+const BreadcrumbsItem = styled.a.attrs<StyledBreadcrumbsItemProps>(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: classnames(props.selected && SELECTED_CLASS, props.className),
   'aria-current': props.selected ? 'page' : null
-}))<StyledBreadcrumbItemProps>`
+}))<StyledBreadcrumbsItemProps>`
   color: ${get('colors.accent.fg')};
   display: inline-block;
   font-size: ${get('fontSizes.1')};
@@ -79,9 +78,24 @@ const BreadcrumbItem = styled.a.attrs<StyledBreadcrumbItemProps>(props => ({
   ${sx};
 `
 
-Breadcrumb.displayName = 'Breadcrumb'
+Breadcrumbs.displayName = 'Breadcrumbs'
 
-BreadcrumbItem.displayName = 'Breadcrumb.Item'
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item'
 
-export type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbItem>
-export default Object.assign(Breadcrumb, {Item: BreadcrumbItem})
+export type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>
+export default Object.assign(Breadcrumbs, {Item: BreadcrumbsItem})
+
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+export const Breadcrumb = Object.assign(Breadcrumbs, {Item: BreadcrumbsItem})
+
+/**
+ * @deprecated Use the `BreadcrumbsProps` type instead
+ */
+export type BreadcrumbProps = ComponentProps<typeof BreadcrumbsBase>
+
+/**
+ * @deprecated Use the `BreadcrumbsItemProps` type instead
+ */
+export type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbsItem>

package/src/__tests__/Breadcrumbs.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import {Breadcrumbs, Breadcrumb} from '..'
+import {render, behavesAsComponent, checkExports} from '../utils/testing'
+import {COMMON} from '../constants'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+expect.extend(toHaveNoViolations)
+
+describe('Breadcrumbs', () => {
+  behavesAsComponent({Component: Breadcrumbs, systemPropArray: [COMMON]})
+
+  checkExports('Breadcrumbs', {
+    default: Breadcrumbs,
+    Breadcrumb
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<Breadcrumbs />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('renders a <nav>', () => {
+    expect(render(<Breadcrumbs />).type).toEqual('nav')
+  })
+})

package/src/__tests__/{BreadcrumbItem.tsx → BreadcrumbsItem.tsx}

@@ -2,31 +2,31 @@ import {cleanup, render as HTMLRender} from '@testing-library/react'
 import 'babel-polyfill'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import React from 'react'
-import {Breadcrumb} from '..'
+import {Breadcrumbs} from '..'
 import {COMMON} from '../constants'
 import {behavesAsComponent, render} from '../utils/testing'
 expect.extend(toHaveNoViolations)
 
-describe('Breadcrumb.Item', () => {
-  behavesAsComponent({Component: Breadcrumb.Item, systemPropArray: [COMMON]})
+describe('Breadcrumbs.Item', () => {
+  behavesAsComponent({Component: Breadcrumbs.Item, systemPropArray: [COMMON]})
 
   it('renders an <a> by default', () => {
-    expect(render(<Breadcrumb.Item />).type).toEqual('a')
+    expect(render(<Breadcrumbs.Item />).type).toEqual('a')
   })
 
   it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Breadcrumb.Item />)
+    const {container} = HTMLRender(<Breadcrumbs.Item />)
     const results = await axe(container)
     expect(results).toHaveNoViolations()
     cleanup()
   })
 
   it('respects the "selected" prop', () => {
-    expect(render(<Breadcrumb.Item selected />)).toMatchSnapshot()
+    expect(render(<Breadcrumbs.Item selected />)).toMatchSnapshot()
   })
 
   it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
     const Link = ({theme: _ignoredTheme, ...props}: Record<string, unknown>) => <div {...props} />
-    expect(render(<Breadcrumb.Item as={Link} to="#" />)).toMatchSnapshot()
+    expect(render(<Breadcrumbs.Item as={Link} to="#" />)).toMatchSnapshot()
   })
 })

package/src/__tests__/__snapshots__/{Breadcrumb.tsx.snap → Breadcrumbs.tsx.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Breadcrumb renders consistently 1`] = `
+exports[`Breadcrumbs renders consistently 1`] = `
 .c1 {
   margin-top: 0;
   margin-bottom: 0;
@@ -19,8 +19,8 @@ exports[`Breadcrumb renders consistently 1`] = `
 }
 
 <nav
-  aria-label="breadcrumb"
-  className="c0 Breadcrumb"
+  aria-label="Breadcrumbs"
+  className="c0"
 >
   <ol
     className="c1"

package/src/__tests__/__snapshots__/{BreadcrumbItem.tsx.snap → BreadcrumbsItem.tsx.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Breadcrumb.Item adds activeClassName={SELECTED_CLASS} when it gets a "to" prop 1`] = `
+exports[`Breadcrumbs.Item adds activeClassName={SELECTED_CLASS} when it gets a "to" prop 1`] = `
 .c0 {
   color: #0969da;
   display: inline-block;
@@ -27,7 +27,7 @@ exports[`Breadcrumb.Item adds activeClassName={SELECTED_CLASS} when it gets a "t
 />
 `;
 
-exports[`Breadcrumb.Item renders consistently 1`] = `
+exports[`Breadcrumbs.Item renders consistently 1`] = `
 .c0 {
   color: #0969da;
   display: inline-block;
@@ -52,7 +52,7 @@ exports[`Breadcrumb.Item renders consistently 1`] = `
 />
 `;
 
-exports[`Breadcrumb.Item respects the "selected" prop 1`] = `
+exports[`Breadcrumbs.Item respects the "selected" prop 1`] = `
 .c0 {
   color: #0969da;
   display: inline-block;

package/src/index.ts

@@ -38,8 +38,8 @@ export {default as AvatarStack} from './AvatarStack'
 export type {AvatarStackProps} from './AvatarStack'
 export {default as BranchName} from './BranchName'
 export type {BranchNameProps} from './BranchName'
-export {default as Breadcrumb} from './Breadcrumb'
-export type {BreadcrumbProps, BreadcrumbItemProps} from './Breadcrumb'
+export {default as Breadcrumbs, Breadcrumb} from './Breadcrumbs'
+export type {BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbProps, BreadcrumbItemProps} from './Breadcrumbs'
 export {
   default as Button,
   ButtonDanger,