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

package/lib-esm/{Breadcrumb.js → Breadcrumbs.js}

@@ -9,27 +9,26 @@ import { COMMON, FLEX, get } from './constants';
 import sx from './sx';
 const SELECTED_CLASS = 'selected';
 const Wrapper = styled.li.withConfig({
-  displayName: "Breadcrumb__Wrapper",
-  componentId: "c1r3ff-0"
+  displayName: "Breadcrumbs__Wrapper",
+  componentId: "hwwoo0-0"
 })(["display:inline-block;white-space:nowrap;list-style:none;&::after{padding-right:0.5em;padding-left:0.5em;color:", ";font-size:", ";content:'/';}&:first-child{margin-left:0;}&:last-child{&::after{content:none;}}"], get('colors.fg.muted'), get('fontSizes.1'));
-const BreadcrumbBase = styled.nav.withConfig({
-  displayName: "Breadcrumb__BreadcrumbBase",
-  componentId: "c1r3ff-1"
+const BreadcrumbsBase = styled.nav.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbsBase",
+  componentId: "hwwoo0-1"
 })(["display:flex;justify-content:space-between;", ";", ";", ";"], COMMON, FLEX, sx);
 
-function Breadcrumb({
+function Breadcrumbs({
   className,
   children,
   theme,
   ...rest
 }) {
-  const classes = classnames(className, 'Breadcrumb');
   const wrappedChildren = React.Children.map(children, child => /*#__PURE__*/React.createElement(Wrapper, {
     theme: theme
   }, child));
-  return /*#__PURE__*/React.createElement(BreadcrumbBase, _extends({
-    className: classes,
-    "aria-label": "breadcrumb",
+  return /*#__PURE__*/React.createElement(BreadcrumbsBase, _extends({
+    className: className,
+    "aria-label": "Breadcrumbs",
     theme: theme
   }, rest), /*#__PURE__*/React.createElement(Box, {
     as: "ol",
@@ -38,17 +37,27 @@ function Breadcrumb({
   }, wrappedChildren));
 }
 
-Breadcrumb.displayName = "Breadcrumb";
-const BreadcrumbItem = styled.a.attrs(props => ({
+Breadcrumbs.displayName = "Breadcrumbs";
+const BreadcrumbsItem = styled.a.attrs(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: classnames(props.selected && SELECTED_CLASS, props.className),
   'aria-current': props.selected ? 'page' : null
 })).withConfig({
-  displayName: "Breadcrumb__BreadcrumbItem",
-  componentId: "c1r3ff-2"
+  displayName: "Breadcrumbs__BreadcrumbsItem",
+  componentId: "hwwoo0-2"
 })(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], get('colors.accent.fg'), get('fontSizes.1'), get('colors.fg.default'), COMMON, sx);
-Breadcrumb.displayName = 'Breadcrumb';
-BreadcrumbItem.displayName = 'Breadcrumb.Item';
-export default Object.assign(Breadcrumb, {
-  Item: BreadcrumbItem
-});
+Breadcrumbs.displayName = 'Breadcrumbs';
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+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
+ */

package/lib-esm/__tests__/Breadcrumbs.js

@@ -0,0 +1,29 @@
+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( /*#__PURE__*/React.createElement(Breadcrumbs, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders a <nav>', () => {
+    expect(render( /*#__PURE__*/React.createElement(Breadcrumbs, null)).type).toEqual('nav');
+  });
+});

package/lib-esm/__tests__/{BreadcrumbItem.js → BreadcrumbsItem.js}

@@ -2,28 +2,28 @@ 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', () => {
+describe('Breadcrumbs.Item', () => {
   behavesAsComponent({
-    Component: Breadcrumb.Item,
+    Component: Breadcrumbs.Item,
     systemPropArray: [COMMON]
   });
   it('renders an <a> by default', () => {
-    expect(render( /*#__PURE__*/React.createElement(Breadcrumb.Item, null)).type).toEqual('a');
+    expect(render( /*#__PURE__*/React.createElement(Breadcrumbs.Item, null)).type).toEqual('a');
   });
   it('should have no axe violations', async () => {
     const {
       container
-    } = HTMLRender( /*#__PURE__*/React.createElement(Breadcrumb.Item, null));
+    } = HTMLRender( /*#__PURE__*/React.createElement(Breadcrumbs.Item, null));
     const results = await axe(container);
     expect(results).toHaveNoViolations();
     cleanup();
   });
   it('respects the "selected" prop', () => {
-    expect(render( /*#__PURE__*/React.createElement(Breadcrumb.Item, {
+    expect(render( /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
       selected: true
     }))).toMatchSnapshot();
   });
@@ -33,7 +33,7 @@ describe('Breadcrumb.Item', () => {
       ...props
     }) => /*#__PURE__*/React.createElement("div", props);
 
-    expect(render( /*#__PURE__*/React.createElement(Breadcrumb.Item, {
+    expect(render( /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
       as: Link,
       to: "#"
     }))).toMatchSnapshot();

package/lib-esm/index.d.ts

@@ -32,8 +32,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, ButtonOutline, ButtonPrimary, ButtonInvisible, ButtonTableList, ButtonClose, ButtonGroup } from './Button';
 export type { ButtonProps, ButtonDangerProps, ButtonOutlineProps, ButtonPrimaryProps, ButtonInvisibleProps, ButtonTableListProps, ButtonCloseProps, ButtonGroupProps } from './Button';
 export { default as Caret } from './Caret';

package/lib-esm/index.js

@@ -23,7 +23,7 @@ export { default as Avatar } from './Avatar';
 export { default as AvatarPair } from './AvatarPair';
 export { default as AvatarStack } from './AvatarStack';
 export { default as BranchName } from './BranchName';
-export { default as Breadcrumb } from './Breadcrumb';
+export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
 export { default as Button, ButtonDanger, ButtonOutline, ButtonPrimary, ButtonInvisible, ButtonTableList, ButtonClose, ButtonGroup } from './Button';
 export { default as Caret } from './Caret';
 export { default as CircleBadge } from './CircleBadge';

package/migrating.md

@@ -11,7 +11,7 @@
 
 There is a [codemod](#codemods) available to upgrade component identifiers from [v3.x.x-beta](#3-0-0-beta):
 
-```js
+```
 npx jscodeshift -t node_modules/@primer/components/codemods/v4.js path/to/src
 ```
 
@@ -32,7 +32,7 @@ The following breaking changes must be accounted for manually:
 
 There is a [codemod](#codemods) available to upgrade from [2.x.x-beta](#2-0-0-beta) and updating the package name:
 
-```js
+```
 npx jscodeshift -t node_modules/@primer/components/codemods/v3.js path/to/src
 ```
 
@@ -48,7 +48,7 @@ We suggest that you rename your components in the above order, since renaming `B
 
 There is a [codemod](#codemods) available to upgrade from [1.x.x-beta](#1-0-0-beta):
 
-```js
+```
 npx jscodeshift -t node_modules/primer-react/codemods/v2.js path/to/src
 ```
 
@@ -58,7 +58,7 @@ npx jscodeshift -t node_modules/primer-react/codemods/v2.js path/to/src
 
 There is a [codemod](#codemods) available to upgrade from previous versions `0.x.x-beta`:
 
-```js
+```
 npx jscodeshift -t node_modules/primer-react/codemods/v1.js path/to/src
 ```