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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/.eslintrc.json +44 -14
  2. package/CHANGELOG.md +11 -1
  3. package/contributor-docs/CONTRIBUTING.md +2 -2
  4. package/contributor-docs/component-contents-api-patterns.md +5 -4
  5. package/dist/browser.esm.js +130 -130
  6. package/dist/browser.esm.js.map +1 -1
  7. package/dist/browser.umd.js +113 -113
  8. package/dist/browser.umd.js.map +1 -1
  9. package/docs/content/BorderBox.md +1 -1
  10. package/docs/content/Box.md +9 -9
  11. package/docs/content/Breadcrumbs.md +12 -12
  12. package/docs/content/Buttons.md +15 -13
  13. package/docs/content/CircleOcticon.md +1 -1
  14. package/docs/content/CounterLabel.md +5 -3
  15. package/docs/content/Flash.md +6 -4
  16. package/docs/content/Flex.md +6 -6
  17. package/docs/content/FormGroup.md +11 -9
  18. package/docs/content/Grid.md +6 -6
  19. package/docs/content/Label.md +3 -1
  20. package/docs/content/LabelGroup.md +1 -1
  21. package/docs/content/Pagination.md +4 -4
  22. package/docs/content/PointerBox.md +2 -2
  23. package/docs/content/Portal.mdx +13 -8
  24. package/docs/content/Position.md +26 -23
  25. package/docs/content/SelectMenu.md +5 -3
  26. package/docs/content/SideNav.md +5 -5
  27. package/docs/content/StateLabel.md +8 -6
  28. package/docs/content/StyledOcticon.md +4 -2
  29. package/docs/content/Text.md +5 -3
  30. package/docs/content/TextInput.md +5 -3
  31. package/docs/content/Timeline.md +13 -13
  32. package/docs/content/Tooltip.md +1 -1
  33. package/docs/content/Truncate.md +3 -4
  34. package/docs/content/anchoredPosition.mdx +1 -1
  35. package/docs/content/getting-started.md +6 -2
  36. package/docs/content/linting.md +1 -1
  37. package/docs/content/overriding-styles.mdx +15 -13
  38. package/docs/content/primer-theme.md +1 -1
  39. package/docs/content/theming.md +5 -5
  40. package/docs/content/useOnEscapePress.mdx +3 -3
  41. package/docs/content/useOnOutsideClick.mdx +1 -1
  42. package/lib/Breadcrumbs.d.ts +40 -0
  43. package/lib/{Breadcrumb.js → Breadcrumbs.js} +31 -21
  44. package/lib/__tests__/{Breadcrumb.d.ts → Breadcrumbs.d.ts} +0 -0
  45. package/lib/__tests__/{Breadcrumb.js → Breadcrumbs.js} +7 -9
  46. package/lib/__tests__/{BreadcrumbItem.d.ts → BreadcrumbsItem.d.ts} +0 -0
  47. package/lib/__tests__/{BreadcrumbItem.js → BreadcrumbsItem.js} +6 -6
  48. package/lib/index.d.ts +2 -2
  49. package/lib/index.js +8 -2
  50. package/lib-esm/Breadcrumbs.d.ts +40 -0
  51. package/lib-esm/{Breadcrumb.js → Breadcrumbs.js} +28 -19
  52. package/lib-esm/__tests__/{Breadcrumb.d.ts → Breadcrumbs.d.ts} +0 -0
  53. package/lib-esm/__tests__/Breadcrumbs.js +29 -0
  54. package/lib-esm/__tests__/{BreadcrumbItem.d.ts → BreadcrumbsItem.d.ts} +0 -0
  55. package/lib-esm/__tests__/{BreadcrumbItem.js → BreadcrumbsItem.js} +7 -7
  56. package/lib-esm/index.d.ts +2 -2
  57. package/lib-esm/index.js +1 -1
  58. package/migrating.md +4 -4
  59. package/package-lock.json +561 -280
  60. package/package.json +6 -5
  61. package/src/{Breadcrumb.tsx → Breadcrumbs.tsx} +27 -13
  62. package/src/__tests__/Breadcrumbs.tsx +28 -0
  63. package/src/__tests__/{BreadcrumbItem.tsx → BreadcrumbsItem.tsx} +7 -7
  64. package/src/__tests__/__snapshots__/{Breadcrumb.tsx.snap → Breadcrumbs.tsx.snap} +3 -3
  65. package/src/__tests__/__snapshots__/{BreadcrumbItem.tsx.snap → BreadcrumbsItem.tsx.snap} +3 -3
  66. package/src/index.ts +2 -2
  67. package/stats.html +1 -1
  68. package/lib/Breadcrumb.d.ts +0 -23
  69. package/lib-esm/Breadcrumb.d.ts +0 -23
  70. package/lib-esm/__tests__/Breadcrumb.js +0 -31
  71. package/src/__tests__/Breadcrumb.tsx +0 -31
@@ -9,11 +9,13 @@ TextInput is a form component to add default styling to the native text input.
9
9
  ## Default example
10
10
 
11
11
  ```jsx live
12
- <TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
12
+ <>
13
+ <TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
13
14
 
14
- <TextInput sx={{ml: 4}} aria-label="City" name="city" placeholder="City" contrast />
15
+ <TextInput sx={{ml: 4}} aria-label="City" name="city" placeholder="City" contrast />
15
16
 
16
- <TextInput sx={{ml: 4}} icon={SearchIcon} aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
17
+ <TextInput sx={{ml: 4}} icon={SearchIcon} aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
18
+ </>
17
19
  ```
18
20
 
19
21
  ## Component props
@@ -13,13 +13,13 @@ The Timeline.Item component is used to display items on a vertical timeline, con
13
13
  <StyledOcticon icon={FlameIcon} />
14
14
  </Timeline.Badge>
15
15
  <Timeline.Body>
16
- <Link href="#" sx={{fontWeight: 'bold', color: 'text.primary', mr: 1}} muted>
16
+ <Link href="#" sx={{fontWeight: 'bold', color: "fg.default", mr: 1}} muted>
17
17
  Monalisa
18
18
  </Link>
19
- created one <Link href="#" sx={{fontWeight: 'bold', color: 'text.primary', mr: 1}} muted>
19
+ created one <Link href="#" sx={{fontWeight: 'bold', color: "fg.default", mr: 1}} muted>
20
20
  hot potato
21
21
  </Link>
22
- <Link href="#" color="timeline.text" muted>
22
+ <Link href="#" color="fg.muted" muted>
23
23
  Just now
24
24
  </Link>
25
25
  </Timeline.Body>
@@ -50,20 +50,20 @@ of the child `StyledOcticon` if necessary.
50
50
  ```jsx live
51
51
  <Timeline>
52
52
  <Timeline.Item>
53
- <Timeline.Badge sx={{bg: 'prState.closed.bg'}}>
54
- <StyledOcticon icon={FlameIcon} sx={{color: 'prState.closed.text'}} />
53
+ <Timeline.Badge sx={{bg: "danger.emphasis"}}>
54
+ <StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
55
55
  </Timeline.Badge>
56
56
  <Timeline.Body>Background used when closed events occur</Timeline.Body>
57
57
  </Timeline.Item>
58
58
  <Timeline.Item>
59
- <Timeline.Badge sx={{bg: 'prState.closed.bg'}}>
60
- <StyledOcticon icon={FlameIcon} color="prState.open.text" />
59
+ <Timeline.Badge sx={{bg: "danger.emphasis"}}>
60
+ <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
61
61
  </Timeline.Badge>
62
62
  <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
63
63
  </Timeline.Item>
64
64
  <Timeline.Item>
65
- <Timeline.Badge sx={{bg: 'prState.closed.bg'}}>
66
- <StyledOcticon icon={FlameIcon} sx={{color: 'prState.merged.text'}} />
65
+ <Timeline.Badge sx={{bg: "danger.emphasis"}}>
66
+ <StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
67
67
  </Timeline.Badge>
68
68
  <Timeline.Body>Background used when pull requests are merged</Timeline.Body>
69
69
  </Timeline.Item>
@@ -98,15 +98,15 @@ To create a visual break in the timeline, use Timeline.Break. This adds a horizo
98
98
  ```jsx live
99
99
  <Timeline>
100
100
  <Timeline.Item>
101
- <Timeline.Badge sx={{bg: 'prState.closed.bg'}}>
102
- <StyledOcticon icon={FlameIcon} color="prState.closed.text" />
101
+ <Timeline.Badge sx={{bg: "danger.emphasis"}}>
102
+ <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
103
103
  </Timeline.Badge>
104
104
  <Timeline.Body>Background used when closed events occur</Timeline.Body>
105
105
  </Timeline.Item>
106
106
  <Timeline.Break />
107
107
  <Timeline.Item>
108
- <Timeline.Badge sx={{bg: 'prState.open.bg'}}>
109
- <StyledOcticon icon={FlameIcon} sx={{color: 'prState.open.text'}} />
108
+ <Timeline.Badge sx={{bg: "success.emphasis"}}>
109
+ <StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
110
110
  </Timeline.Badge>
111
111
  <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
112
112
  </Timeline.Item>
@@ -15,7 +15,7 @@ Before adding a tooltip, please consider: Is this information essential and nece
15
15
  ## Default example
16
16
 
17
17
  ```jsx live
18
- <Box borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2} p={3}>
18
+ <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={3}>
19
19
  <Tooltip aria-label="Hello, Tooltip!">Text with a tooltip</Tooltip>
20
20
  </Box>
21
21
  ```
@@ -29,10 +29,9 @@ You can override the maximum width of the truncated text with the `maxWidth` pro
29
29
  You can use the `inline` boolean prop for inline (or inline-block) elements with a fixed maximum width (default: 125px).
30
30
 
31
31
  ```jsx live
32
- Some text with a{' '}
33
- <Truncate as="strong" inline title="branch-name-that-is-really-long">
34
- branch-name-that-is-really-long
35
- </Truncate>
32
+ <Truncate as="strong" inline title="branch-name-that-is-really-long">
33
+ Some text with a branch-name-that-is-really-long
34
+ </Truncate>
36
35
  ```
37
36
 
38
37
  ## Expandable example
@@ -130,7 +130,7 @@ export const AnchoredPositionExample = () => {
130
130
  >
131
131
  Floating element
132
132
  </Box>
133
- <Box borderWidth='1px' borderStyle='solid' borderColor='border.primary' borderRadius={2} width={400} height={75} ref={anchorElementRef as React.RefObject<HTMLDivElement>}>
133
+ <Box borderWidth='1px' borderStyle='solid' borderColor='border.default' borderRadius={2} width={400} height={75} ref={anchorElementRef as React.RefObject<HTMLDivElement>}>
134
134
  Anchor Element
135
135
  </Box>
136
136
  </div>
@@ -19,7 +19,9 @@ You can now import Primer React from the main package module:
19
19
  ```javascript
20
20
  // using import syntax
21
21
  import {Box, Flex} from '@primer/components'
22
+ ```
22
23
 
24
+ ```javascript
23
25
  // using require syntax
24
26
  const {Box, Flex} = require('@primer/components')
25
27
  ```
@@ -40,7 +42,9 @@ Module bundlers that use ECMAScript modules (ESM) will automatically tree-shake
40
42
  // using import syntax
41
43
  import Box from '@primer/components/lib/Box'
42
44
  import Flex from '@primer/components/lib/Flex'
45
+ ```
43
46
 
47
+ ```javascript
44
48
  // using require syntax
45
49
  const Box = require('@primer/components/lib/Box')
46
50
  const Flex = require('@primer/components/lib/Flex')
@@ -83,7 +87,7 @@ In order to set baseline color, font-family, and line-heights across your projec
83
87
  ```jsx
84
88
  import {BaseStyles, Box, Heading} from '@primer/components'
85
89
 
86
- export default const MyApp = () => (
90
+ export default () => (
87
91
  <BaseStyles>
88
92
  <Box m={4}>
89
93
  <Heading mb={2}>Hello, world!</Heading>
@@ -115,7 +119,7 @@ Ever since `@types/styled-components` version `4.1.19`, it has had a dependency
115
119
 
116
120
  You may run into this conflict even if you're not importing anything from `react-native` or don't have it installed. This is because some package managers hoist packages to the top-level `node_modules` folder, and the TypeScript compiler automatically includes types from all folders in `node_modules/@types` by default.
117
121
 
118
- The TypeScript compiler allows you to opt-out of this behavior [using the `typeRoots` and `types` configuration options](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types), and the best solution for this error — for now — seems to be to opt out the automatic inclusion of `node_modules/@types` and instead list the types you want to be included individually.
122
+ The TypeScript compiler allows you to opt-out of this behavior [using the `typeRoots` and `types` configuration options](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types), and the best solution for this error — for now — seems to be to opt out the automatic inclusion of `node_modules/@types` and instead list the types you want to be included individually.
119
123
 
120
124
  In your `tsconfig.json`, set the `types` array under the `compilerOptions` like so:
121
125
 
@@ -23,7 +23,7 @@ description: Primer React offers an ESLint plugin to enforce best practices and
23
23
 
24
24
  2. In your [ESLint configuration file](https://eslint.org/docs/user-guide/configuring/configuration-files), extend the recommended Primer React ESLint config:
25
25
 
26
- ```js
26
+ ```json
27
27
  {
28
28
  "extends": [
29
29
  // ...
@@ -18,17 +18,19 @@ The `sx` prop provides a lot of power, which means it is an easy tool to abuse.
18
18
  This example demonstrates applying a bottom border to `Heading`, a component that does not receive `BORDER` system props. The `borderBottomWidth` value comes from `theme.borderWidths` and `borderBottomColor` comes from `theme.colors`.
19
19
 
20
20
  ```jsx live
21
- <Heading pb={2}>Heading</Heading>
21
+ <>
22
+ <Heading pb={2}>Heading</Heading>
22
23
 
23
- <Heading
24
- pb={2}
25
- sx={{
26
- borderBottomWidth: 1,
27
- borderBottomColor: 'border.primary',
28
- borderBottomStyle: 'solid'
29
- }}>
30
- Heading with bottom border
31
- </Heading>
24
+ <Heading
25
+ pb={2}
26
+ sx={{
27
+ borderBottomWidth: 1,
28
+ borderBottomColor: 'border.primary',
29
+ borderBottomStyle: 'solid'
30
+ }}>
31
+ Heading with bottom border
32
+ </Heading>
33
+ </>
32
34
  ```
33
35
 
34
36
  ## Responsive values
@@ -39,7 +41,7 @@ Just like [values passed to system props](https://styled-system.com/responsive-s
39
41
  <Box
40
42
  borderWidth="1px"
41
43
  borderStyle="solid"
42
- borderColor="border.primary"
44
+ borderColor="border.default"
43
45
  borderRadius={2}
44
46
  p={2}
45
47
  sx={{
@@ -59,7 +61,7 @@ The `sx` prop also allows for declaring styles based on media queries, psueudo-c
59
61
  sx={{
60
62
  '> *': {
61
63
  borderWidth: 1,
62
- borderColor: 'border.primary',
64
+ borderColor: "border.default",
63
65
  borderStyle: 'solid',
64
66
  borderBottomWidth: 0,
65
67
  padding: 2,
@@ -67,7 +69,7 @@ The `sx` prop also allows for declaring styles based on media queries, psueudo-c
67
69
  borderBottomWidth: 1
68
70
  },
69
71
  ':hover': {
70
- bg: 'border.tertiary'
72
+ bg: "neutral.muted"
71
73
  }
72
74
  }
73
75
  }}
@@ -51,7 +51,7 @@ There are two ways to change the theme of Primer components:
51
51
  import {ThemeProvider} from `styled-components`
52
52
  import {theme} from '@primer/components'
53
53
 
54
- const customTheme = { ... }
54
+ const customTheme = {} // Theme overrides
55
55
 
56
56
  const App = (props) => {
57
57
  return (
@@ -66,8 +66,8 @@ const theme = {
66
66
  function App() {
67
67
  return (
68
68
  <ThemeProvider theme={theme}>
69
- <Box bg="bg.primary"></Box>
70
- <Box sx={{bg: 'bg.primary'}}></Box>
69
+ <Box bg="canvas.default"></Box>
70
+ <Box sx={{bg: "canvas.default"}}></Box>
71
71
  </ThemeProvider>
72
72
  )
73
73
  }
@@ -84,7 +84,7 @@ import {themeGet} from '@primer/components'
84
84
  import styled from 'styled-components'
85
85
 
86
86
  const Example = styled.div`
87
- background-color: ${themeGet('colors.bg.primary')};
87
+ background-color: ${themeGet("colors.canvas.default")};
88
88
  `
89
89
  ```
90
90
 
@@ -203,8 +203,8 @@ const customTheme = deepmerge(theme, {
203
203
  },
204
204
  // Add a new scheme
205
205
  my_scheme_name: {
206
- colors: {...},
207
- shadows: {...}
206
+ colors: {},
207
+ shadows: {}
208
208
  }
209
209
  }
210
210
  })
@@ -28,11 +28,11 @@ const OverlayDemo = ({onEscape, children}) => {
28
28
  function DemoComponent() {
29
29
  const [isOpen, setIsOpen] = React.useState(false)
30
30
  const toggleOverlay = React.useCallback(() => {
31
- setIsOpen(!isOpen)
32
- })
31
+ setIsOpen(isOpen => !isOpen)
32
+ }, [])
33
33
  const closeOverlay = React.useCallback(() => {
34
34
  setIsOpen(false)
35
- })
35
+ }, [])
36
36
  return (
37
37
  <>
38
38
  <Button onClick={toggleOverlay}>toggle</Button>
@@ -33,7 +33,7 @@ You can also pass an array of `ignoredRefs` to prevent calling the callback func
33
33
  <Box
34
34
  borderWidth="1px"
35
35
  borderStyle="solid"
36
- borderColor="border.primary"
36
+ borderColor="border.default"
37
37
  borderRadius={2}
38
38
  height="200px"
39
39
  bg="green.4"
@@ -0,0 +1,40 @@
1
+ import * as History from 'history';
2
+ import React from 'react';
3
+ import { SystemCommonProps, SystemFlexProps } from './constants';
4
+ import { SxProp } from './sx';
5
+ import { ComponentProps } from './utils/types';
6
+ declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
7
+ export declare type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>;
8
+ declare function Breadcrumbs({ className, children, theme, ...rest }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
9
+ declare namespace Breadcrumbs {
10
+ var displayName: string;
11
+ }
12
+ declare const BreadcrumbsItem: import("styled-components").StyledComponent<"a", any, {
13
+ to?: History.LocationDescriptor<unknown> | undefined;
14
+ selected?: boolean | undefined;
15
+ } & SystemCommonProps & SxProp, never>;
16
+ export declare type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>;
17
+ declare const _default: typeof Breadcrumbs & {
18
+ Item: import("styled-components").StyledComponent<"a", any, {
19
+ to?: History.LocationDescriptor<unknown> | undefined;
20
+ selected?: boolean | undefined;
21
+ } & SystemCommonProps & SxProp, never>;
22
+ };
23
+ export default _default;
24
+ /**
25
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
26
+ */
27
+ export declare const Breadcrumb: typeof Breadcrumbs & {
28
+ Item: import("styled-components").StyledComponent<"a", any, {
29
+ to?: History.LocationDescriptor<unknown> | undefined;
30
+ selected?: boolean | undefined;
31
+ } & SystemCommonProps & SxProp, never>;
32
+ };
33
+ /**
34
+ * @deprecated Use the `BreadcrumbsProps` type instead
35
+ */
36
+ export declare type BreadcrumbProps = ComponentProps<typeof BreadcrumbsBase>;
37
+ /**
38
+ * @deprecated Use the `BreadcrumbsItemProps` type instead
39
+ */
40
+ export declare type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbsItem>;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = void 0;
6
+ exports.Breadcrumb = exports.default = void 0;
7
7
 
8
8
  var _classnames = _interopRequireDefault(require("classnames"));
9
9
 
@@ -24,30 +24,28 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
24
24
  const SELECTED_CLASS = 'selected';
25
25
 
26
26
  const Wrapper = _styledComponents.default.li.withConfig({
27
- displayName: "Breadcrumb__Wrapper",
28
- componentId: "c1r3ff-0"
27
+ displayName: "Breadcrumbs__Wrapper",
28
+ componentId: "hwwoo0-0"
29
29
  })(["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'));
30
30
 
31
- const BreadcrumbBase = _styledComponents.default.nav.withConfig({
32
- displayName: "Breadcrumb__BreadcrumbBase",
33
- componentId: "c1r3ff-1"
31
+ const BreadcrumbsBase = _styledComponents.default.nav.withConfig({
32
+ displayName: "Breadcrumbs__BreadcrumbsBase",
33
+ componentId: "hwwoo0-1"
34
34
  })(["display:flex;justify-content:space-between;", ";", ";", ";"], _constants.COMMON, _constants.FLEX, _sx.default);
35
35
 
36
- function Breadcrumb({
36
+ function Breadcrumbs({
37
37
  className,
38
38
  children,
39
39
  theme,
40
40
  ...rest
41
41
  }) {
42
- const classes = (0, _classnames.default)(className, 'Breadcrumb');
43
-
44
42
  const wrappedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(Wrapper, {
45
43
  theme: theme
46
44
  }, child));
47
45
 
48
- return /*#__PURE__*/_react.default.createElement(BreadcrumbBase, _extends({
49
- className: classes,
50
- "aria-label": "breadcrumb",
46
+ return /*#__PURE__*/_react.default.createElement(BreadcrumbsBase, _extends({
47
+ className: className,
48
+ "aria-label": "Breadcrumbs",
51
49
  theme: theme
52
50
  }, rest), /*#__PURE__*/_react.default.createElement(_Box.default, {
53
51
  as: "ol",
@@ -56,22 +54,34 @@ function Breadcrumb({
56
54
  }, wrappedChildren));
57
55
  }
58
56
 
59
- Breadcrumb.displayName = "Breadcrumb";
57
+ Breadcrumbs.displayName = "Breadcrumbs";
60
58
 
61
- const BreadcrumbItem = _styledComponents.default.a.attrs(props => ({
59
+ const BreadcrumbsItem = _styledComponents.default.a.attrs(props => ({
62
60
  activeClassName: typeof props.to === 'string' ? 'selected' : '',
63
61
  className: (0, _classnames.default)(props.selected && SELECTED_CLASS, props.className),
64
62
  'aria-current': props.selected ? 'page' : null
65
63
  })).withConfig({
66
- displayName: "Breadcrumb__BreadcrumbItem",
67
- componentId: "c1r3ff-2"
64
+ displayName: "Breadcrumbs__BreadcrumbsItem",
65
+ componentId: "hwwoo0-2"
68
66
  })(["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);
69
67
 
70
- Breadcrumb.displayName = 'Breadcrumb';
71
- BreadcrumbItem.displayName = 'Breadcrumb.Item';
68
+ Breadcrumbs.displayName = 'Breadcrumbs';
69
+ BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
70
+
71
+ var _default = Object.assign(Breadcrumbs, {
72
+ Item: BreadcrumbsItem
73
+ });
74
+ /**
75
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
76
+ */
77
+
72
78
 
73
- var _default = Object.assign(Breadcrumb, {
74
- Item: BreadcrumbItem
79
+ exports.default = _default;
80
+ const Breadcrumb = Object.assign(Breadcrumbs, {
81
+ Item: BreadcrumbsItem
75
82
  });
83
+ /**
84
+ * @deprecated Use the `BreadcrumbsProps` type instead
85
+ */
76
86
 
77
- exports.default = _default;
87
+ exports.Breadcrumb = Breadcrumb;
@@ -17,26 +17,24 @@ require("babel-polyfill");
17
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
18
 
19
19
  expect.extend(_jestAxe.toHaveNoViolations);
20
- describe('Breadcrumb', () => {
20
+ describe('Breadcrumbs', () => {
21
21
  (0, _testing.behavesAsComponent)({
22
- Component: _.Breadcrumb,
22
+ Component: _.Breadcrumbs,
23
23
  systemPropArray: [_constants.COMMON]
24
24
  });
25
- (0, _testing.checkExports)('Breadcrumb', {
26
- default: _.Breadcrumb
25
+ (0, _testing.checkExports)('Breadcrumbs', {
26
+ default: _.Breadcrumbs,
27
+ Breadcrumb: _.Breadcrumb
27
28
  });
28
29
  it('should have no axe violations', async () => {
29
30
  const {
30
31
  container
31
- } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Breadcrumb, null));
32
+ } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Breadcrumbs, null));
32
33
  const results = await (0, _jestAxe.axe)(container);
33
34
  expect(results).toHaveNoViolations();
34
35
  (0, _react2.cleanup)();
35
36
  });
36
37
  it('renders a <nav>', () => {
37
- expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Breadcrumb, null)).type).toEqual('nav');
38
- });
39
- it('adds the Breadcrumb class', () => {
40
- expect((0, _testing.rendersClass)( /*#__PURE__*/_react.default.createElement(_.Breadcrumb, null), 'Breadcrumb')).toEqual(true);
38
+ expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Breadcrumbs, null)).type).toEqual('nav');
41
39
  });
42
40
  });
@@ -17,24 +17,24 @@ var _testing = require("../utils/testing");
17
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
18
 
19
19
  expect.extend(_jestAxe.toHaveNoViolations);
20
- describe('Breadcrumb.Item', () => {
20
+ describe('Breadcrumbs.Item', () => {
21
21
  (0, _testing.behavesAsComponent)({
22
- Component: _.Breadcrumb.Item,
22
+ Component: _.Breadcrumbs.Item,
23
23
  systemPropArray: [_constants.COMMON]
24
24
  });
25
25
  it('renders an <a> by default', () => {
26
- expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumb.Item, null)).type).toEqual('a');
26
+ expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumbs.Item, null)).type).toEqual('a');
27
27
  });
28
28
  it('should have no axe violations', async () => {
29
29
  const {
30
30
  container
31
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumb.Item, null));
31
+ } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumbs.Item, null));
32
32
  const results = await (0, _jestAxe.axe)(container);
33
33
  expect(results).toHaveNoViolations();
34
34
  (0, _react.cleanup)();
35
35
  });
36
36
  it('respects the "selected" prop', () => {
37
- expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumb.Item, {
37
+ expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumbs.Item, {
38
38
  selected: true
39
39
  }))).toMatchSnapshot();
40
40
  });
@@ -44,7 +44,7 @@ describe('Breadcrumb.Item', () => {
44
44
  ...props
45
45
  }) => /*#__PURE__*/_react2.default.createElement("div", props);
46
46
 
47
- expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumb.Item, {
47
+ expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumbs.Item, {
48
48
  as: Link,
49
49
  to: "#"
50
50
  }))).toMatchSnapshot();
package/lib/index.d.ts CHANGED
@@ -32,8 +32,8 @@ export { default as AvatarStack } from './AvatarStack';
32
32
  export type { AvatarStackProps } from './AvatarStack';
33
33
  export { default as BranchName } from './BranchName';
34
34
  export type { BranchNameProps } from './BranchName';
35
- export { default as Breadcrumb } from './Breadcrumb';
36
- export type { BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumb';
35
+ export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
36
+ export type { BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumbs';
37
37
  export { default as Button, ButtonDanger, ButtonOutline, ButtonPrimary, ButtonInvisible, ButtonTableList, ButtonClose, ButtonGroup } from './Button';
38
38
  export type { ButtonProps, ButtonDangerProps, ButtonOutlineProps, ButtonPrimaryProps, ButtonInvisibleProps, ButtonTableListProps, ButtonCloseProps, ButtonGroupProps } from './Button';
39
39
  export { default as Caret } from './Caret';
package/lib/index.js CHANGED
@@ -177,10 +177,16 @@ Object.defineProperty(exports, "BranchName", {
177
177
  return _BranchName.default;
178
178
  }
179
179
  });
180
+ Object.defineProperty(exports, "Breadcrumbs", {
181
+ enumerable: true,
182
+ get: function () {
183
+ return _Breadcrumbs.default;
184
+ }
185
+ });
180
186
  Object.defineProperty(exports, "Breadcrumb", {
181
187
  enumerable: true,
182
188
  get: function () {
183
- return _Breadcrumb.default;
189
+ return _Breadcrumbs.Breadcrumb;
184
190
  }
185
191
  });
186
192
  Object.defineProperty(exports, "Button", {
@@ -510,7 +516,7 @@ var _AvatarStack = _interopRequireDefault(require("./AvatarStack"));
510
516
 
511
517
  var _BranchName = _interopRequireDefault(require("./BranchName"));
512
518
 
513
- var _Breadcrumb = _interopRequireDefault(require("./Breadcrumb"));
519
+ var _Breadcrumbs = _interopRequireWildcard(require("./Breadcrumbs"));
514
520
 
515
521
  var _Button = _interopRequireWildcard(require("./Button"));
516
522
 
@@ -0,0 +1,40 @@
1
+ import * as History from 'history';
2
+ import React from 'react';
3
+ import { SystemCommonProps, SystemFlexProps } from './constants';
4
+ import { SxProp } from './sx';
5
+ import { ComponentProps } from './utils/types';
6
+ declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
7
+ export declare type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>;
8
+ declare function Breadcrumbs({ className, children, theme, ...rest }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
9
+ declare namespace Breadcrumbs {
10
+ var displayName: string;
11
+ }
12
+ declare const BreadcrumbsItem: import("styled-components").StyledComponent<"a", any, {
13
+ to?: History.LocationDescriptor<unknown> | undefined;
14
+ selected?: boolean | undefined;
15
+ } & SystemCommonProps & SxProp, never>;
16
+ export declare type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>;
17
+ declare const _default: typeof Breadcrumbs & {
18
+ Item: import("styled-components").StyledComponent<"a", any, {
19
+ to?: History.LocationDescriptor<unknown> | undefined;
20
+ selected?: boolean | undefined;
21
+ } & SystemCommonProps & SxProp, never>;
22
+ };
23
+ export default _default;
24
+ /**
25
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
26
+ */
27
+ export declare const Breadcrumb: typeof Breadcrumbs & {
28
+ Item: import("styled-components").StyledComponent<"a", any, {
29
+ to?: History.LocationDescriptor<unknown> | undefined;
30
+ selected?: boolean | undefined;
31
+ } & SystemCommonProps & SxProp, never>;
32
+ };
33
+ /**
34
+ * @deprecated Use the `BreadcrumbsProps` type instead
35
+ */
36
+ export declare type BreadcrumbProps = ComponentProps<typeof BreadcrumbsBase>;
37
+ /**
38
+ * @deprecated Use the `BreadcrumbsItemProps` type instead
39
+ */
40
+ export declare type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbsItem>;