@primer/components 0.0.0-20218248253 → 0.0.0-202182493810

package/lib/Breadcrumbs.d.ts

@@ -0,0 +1,40 @@
+import * as History from 'history';
+import React from 'react';
+import { SystemCommonProps, SystemFlexProps } from './constants';
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
+export declare type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>;
+declare function Breadcrumbs({ className, children, theme, ...rest }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
+declare namespace Breadcrumbs {
+    var displayName: string;
+}
+declare const BreadcrumbsItem: import("styled-components").StyledComponent<"a", any, {
+    to?: History.LocationDescriptor<unknown> | undefined;
+    selected?: boolean | undefined;
+} & SystemCommonProps & SxProp, never>;
+export declare type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>;
+declare const _default: typeof Breadcrumbs & {
+    Item: import("styled-components").StyledComponent<"a", any, {
+        to?: History.LocationDescriptor<unknown> | undefined;
+        selected?: boolean | undefined;
+    } & SystemCommonProps & SxProp, never>;
+};
+export default _default;
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+export declare const Breadcrumb: typeof Breadcrumbs & {
+    Item: import("styled-components").StyledComponent<"a", any, {
+        to?: History.LocationDescriptor<unknown> | undefined;
+        selected?: boolean | undefined;
+    } & SystemCommonProps & SxProp, never>;
+};
+/**
+ * @deprecated Use the `BreadcrumbsProps` type instead
+ */
+export declare type BreadcrumbProps = ComponentProps<typeof BreadcrumbsBase>;
+/**
+ * @deprecated Use the `BreadcrumbsItemProps` type instead
+ */
+export declare type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbsItem>;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Breadcrumb = exports.default = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -24,30 +24,28 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const SELECTED_CLASS = 'selected';
 
 const Wrapper = _styledComponents.default.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;}}"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.1'));
 
-const BreadcrumbBase = _styledComponents.default.nav.withConfig({
-  displayName: "Breadcrumb__BreadcrumbBase",
-  componentId: "c1r3ff-1"
+const BreadcrumbsBase = _styledComponents.default.nav.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbsBase",
+  componentId: "hwwoo0-1"
 })(["display:flex;justify-content:space-between;", ";", ";", ";"], _constants.COMMON, _constants.FLEX, _sx.default);
 
-function Breadcrumb({
+function Breadcrumbs({
   className,
   children,
   theme,
   ...rest
 }) {
-  const classes = (0, _classnames.default)(className, 'Breadcrumb');
-
   const wrappedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(Wrapper, {
     theme: theme
   }, child));
 
-  return /*#__PURE__*/_react.default.createElement(BreadcrumbBase, _extends({
-    className: classes,
-    "aria-label": "breadcrumb",
+  return /*#__PURE__*/_react.default.createElement(BreadcrumbsBase, _extends({
+    className: className,
+    "aria-label": "Breadcrumbs",
     theme: theme
   }, rest), /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: "ol",
@@ -56,22 +54,34 @@ function Breadcrumb({
   }, wrappedChildren));
 }
 
-Breadcrumb.displayName = "Breadcrumb";
+Breadcrumbs.displayName = "Breadcrumbs";
 
-const BreadcrumbItem = _styledComponents.default.a.attrs(props => ({
+const BreadcrumbsItem = _styledComponents.default.a.attrs(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: (0, _classnames.default)(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;}", " ", ";"], (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), _constants.COMMON, _sx.default);
 
-Breadcrumb.displayName = 'Breadcrumb';
-BreadcrumbItem.displayName = 'Breadcrumb.Item';
+Breadcrumbs.displayName = 'Breadcrumbs';
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+
+var _default = Object.assign(Breadcrumbs, {
+  Item: BreadcrumbsItem
+});
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+
 
-var _default = Object.assign(Breadcrumb, {
-  Item: BreadcrumbItem
+exports.default = _default;
+const Breadcrumb = Object.assign(Breadcrumbs, {
+  Item: BreadcrumbsItem
 });
+/**
+ * @deprecated Use the `BreadcrumbsProps` type instead
+ */
 
-exports.default = _default;
+exports.Breadcrumb = Breadcrumb;

package/lib/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/index.js

@@ -177,10 +177,16 @@ Object.defineProperty(exports, "BranchName", {
     return _BranchName.default;
   }
 });
+Object.defineProperty(exports, "Breadcrumbs", {
+  enumerable: true,
+  get: function () {
+    return _Breadcrumbs.default;
+  }
+});
 Object.defineProperty(exports, "Breadcrumb", {
   enumerable: true,
   get: function () {
-    return _Breadcrumb.default;
+    return _Breadcrumbs.Breadcrumb;
   }
 });
 Object.defineProperty(exports, "Button", {
@@ -510,7 +516,7 @@ var _AvatarStack = _interopRequireDefault(require("./AvatarStack"));
 
 var _BranchName = _interopRequireDefault(require("./BranchName"));
 
-var _Breadcrumb = _interopRequireDefault(require("./Breadcrumb"));
+var _Breadcrumbs = _interopRequireWildcard(require("./Breadcrumbs"));
 
 var _Button = _interopRequireWildcard(require("./Button"));
 

package/lib-esm/Breadcrumbs.d.ts

@@ -0,0 +1,40 @@
+import * as History from 'history';
+import React from 'react';
+import { SystemCommonProps, SystemFlexProps } from './constants';
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
+export declare type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>;
+declare function Breadcrumbs({ className, children, theme, ...rest }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
+declare namespace Breadcrumbs {
+    var displayName: string;
+}
+declare const BreadcrumbsItem: import("styled-components").StyledComponent<"a", any, {
+    to?: History.LocationDescriptor<unknown> | undefined;
+    selected?: boolean | undefined;
+} & SystemCommonProps & SxProp, never>;
+export declare type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>;
+declare const _default: typeof Breadcrumbs & {
+    Item: import("styled-components").StyledComponent<"a", any, {
+        to?: History.LocationDescriptor<unknown> | undefined;
+        selected?: boolean | undefined;
+    } & SystemCommonProps & SxProp, never>;
+};
+export default _default;
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+export declare const Breadcrumb: typeof Breadcrumbs & {
+    Item: import("styled-components").StyledComponent<"a", any, {
+        to?: History.LocationDescriptor<unknown> | undefined;
+        selected?: boolean | undefined;
+    } & SystemCommonProps & SxProp, never>;
+};
+/**
+ * @deprecated Use the `BreadcrumbsProps` type instead
+ */
+export declare type BreadcrumbProps = ComponentProps<typeof BreadcrumbsBase>;
+/**
+ * @deprecated Use the `BreadcrumbsItemProps` type instead
+ */
+export declare type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbsItem>;

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-20218248253",
+  "version": "0.0.0-202182493810",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -62,14 +62,14 @@
   "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",
     "@babel/preset-react": "7.14.5",
     "@babel/preset-typescript": "7.14.5",
     "@changesets/changelog-github": "0.4.0",
-    "@changesets/cli": "2.16.0",
+    "@changesets/cli": "2.17.0",
     "@github/prettier-config": "0.0.4",
     "@rollup/plugin-commonjs": "19.0.2",
     "@rollup/plugin-node-resolve": "13.0.0",
@@ -101,7 +101,7 @@
     "babel-plugin-transform-replace-expressions": "0.2.0",
     "babel-polyfill": "6.26.0",
     "chroma-js": "2.1.2",
-    "concurrently": "6.2.0",
+    "concurrently": "6.2.1",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",

package/lib/Breadcrumb.d.ts

@@ -1,23 +0,0 @@
-import * as History from 'history';
-import React from 'react';
-import { SystemCommonProps, SystemFlexProps } from './constants';
-import { SxProp } from './sx';
-import { ComponentProps } from './utils/types';
-declare const BreadcrumbBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
-export declare type BreadcrumbProps = ComponentProps<typeof BreadcrumbBase>;
-declare function Breadcrumb({ className, children, theme, ...rest }: React.PropsWithChildren<BreadcrumbProps>): JSX.Element;
-declare namespace Breadcrumb {
-    var displayName: string;
-}
-declare const BreadcrumbItem: import("styled-components").StyledComponent<"a", any, {
-    to?: History.LocationDescriptor<unknown> | undefined;
-    selected?: boolean | undefined;
-} & SystemCommonProps & SxProp, never>;
-export declare type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbItem>;
-declare const _default: typeof Breadcrumb & {
-    Item: import("styled-components").StyledComponent<"a", any, {
-        to?: History.LocationDescriptor<unknown> | undefined;
-        selected?: boolean | undefined;
-    } & SystemCommonProps & SxProp, never>;
-};
-export default _default;

package/lib-esm/Breadcrumb.d.ts

@@ -1,23 +0,0 @@
-import * as History from 'history';
-import React from 'react';
-import { SystemCommonProps, SystemFlexProps } from './constants';
-import { SxProp } from './sx';
-import { ComponentProps } from './utils/types';
-declare const BreadcrumbBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
-export declare type BreadcrumbProps = ComponentProps<typeof BreadcrumbBase>;
-declare function Breadcrumb({ className, children, theme, ...rest }: React.PropsWithChildren<BreadcrumbProps>): JSX.Element;
-declare namespace Breadcrumb {
-    var displayName: string;
-}
-declare const BreadcrumbItem: import("styled-components").StyledComponent<"a", any, {
-    to?: History.LocationDescriptor<unknown> | undefined;
-    selected?: boolean | undefined;
-} & SystemCommonProps & SxProp, never>;
-export declare type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbItem>;
-declare const _default: typeof Breadcrumb & {
-    Item: import("styled-components").StyledComponent<"a", any, {
-        to?: History.LocationDescriptor<unknown> | undefined;
-        selected?: boolean | undefined;
-    } & SystemCommonProps & SxProp, never>;
-};
-export default _default;