@zendeskgarden/react-breadcrumbs 9.0.0-next.7 → 9.0.0-next.9

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.
@@ -0,0 +1,40 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef, Children, cloneElement } from 'react';
8
+ import { useBreadcrumb } from '@zendeskgarden/container-breadcrumb';
9
+ import { useText } from '@zendeskgarden/react-theming';
10
+ import { StyledBreadcrumb } from '../styled/StyledBreadcrumb.js';
11
+ import { StyledChevronIcon } from '../styled/StyledChevronIcon.js';
12
+ import { StyledBreadcrumbItem } from '../styled/StyledBreadcrumbItem.js';
13
+ import { StyledCenteredBreadcrumbItem } from '../styled/StyledCenteredBreadcrumbItem.js';
14
+
15
+ const Breadcrumb = forwardRef((props, ref) => {
16
+ const {
17
+ getContainerProps,
18
+ getCurrentPageProps
19
+ } = useBreadcrumb();
20
+ const totalChildren = Children.count(props.children);
21
+ const mappedChildren = Children.map(props.children, (child, index) => {
22
+ const isLastItem = index === totalChildren - 1;
23
+ if (isLastItem) {
24
+ return React__default.createElement(StyledBreadcrumbItem, {
25
+ isCurrent: true
26
+ }, cloneElement(child, getCurrentPageProps()));
27
+ }
28
+ return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledBreadcrumbItem, null, child), React__default.createElement(StyledCenteredBreadcrumbItem, null, React__default.createElement(StyledChevronIcon, null)));
29
+ });
30
+ const ariaLabel = useText(Breadcrumb, props, 'aria-label', 'Breadcrumbs');
31
+ return React__default.createElement("nav", getContainerProps({
32
+ ...props,
33
+ ref,
34
+ role: null,
35
+ 'aria-label': ariaLabel
36
+ }), React__default.createElement(StyledBreadcrumb, null, mappedChildren));
37
+ });
38
+ Breadcrumb.displayName = 'Breadcrumb';
39
+
40
+ export { Breadcrumb };
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ export { Breadcrumb } from './elements/Breadcrumb.js';
@@ -0,0 +1,25 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import * as React from 'react';
8
+
9
+ var _path;
10
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
11
+ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
12
+ return /*#__PURE__*/React.createElement("svg", _extends({
13
+ xmlns: "http://www.w3.org/2000/svg",
14
+ width: 12,
15
+ height: 12,
16
+ focusable: "false",
17
+ viewBox: "0 0 12 12",
18
+ "aria-hidden": "true"
19
+ }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
20
+ fill: "currentColor",
21
+ d: "M3.646 10.354a.5.5 0 01-.057-.638l.057-.07L7.293 6 3.646 2.354a.5.5 0 01-.057-.638l.057-.07a.5.5 0 01.638-.057l.07.057 4 4a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.708 0z"
22
+ })));
23
+ };
24
+
25
+ export { SvgChevronRightStroke as default };
@@ -0,0 +1,22 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+
10
+ const COMPONENT_ID = 'breadcrumbs.list';
11
+ const StyledBreadcrumb = styled.ol.attrs({
12
+ 'data-garden-id': COMPONENT_ID,
13
+ 'data-garden-version': '9.0.0-next.9'
14
+ }).withConfig({
15
+ displayName: "StyledBreadcrumb",
16
+ componentId: "sc-11jrinn-0"
17
+ })(["display:flex;margin:0;padding:0;list-style:none;font-size:", ";direction:", ";", ";"], props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
18
+ StyledBreadcrumb.defaultProps = {
19
+ theme: DEFAULT_THEME
20
+ };
21
+
22
+ export { StyledBreadcrumb };
@@ -0,0 +1,37 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled, { css } from 'styled-components';
8
+ import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+
10
+ const COMPONENT_ID = 'breadcrumbs.item';
11
+ const linkStyles = _ref => {
12
+ let {
13
+ isCurrent
14
+ } = _ref;
15
+ return css(["& > :link,& > :visited{white-space:inherit;}", ""], isCurrent && `
16
+ & > :link,
17
+ & > :visited,
18
+ & > :link:hover,
19
+ & > :visited:hover,
20
+ & > :link:focus,
21
+ & > :visited:focus {
22
+ color: inherit;
23
+ }
24
+ `);
25
+ };
26
+ const StyledBreadcrumbItem = styled.li.attrs({
27
+ 'data-garden-id': COMPONENT_ID,
28
+ 'data-garden-version': '9.0.0-next.9'
29
+ }).withConfig({
30
+ displayName: "StyledBreadcrumbItem",
31
+ componentId: "sc-r0suq7-0"
32
+ })(["line-height:", ";white-space:nowrap;color:", ";font-size:inherit;", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isCurrent ? getColorV8(props.theme.colors.neutralHue, 600) : 'inherit', linkStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
33
+ StyledBreadcrumbItem.defaultProps = {
34
+ theme: DEFAULT_THEME
35
+ };
36
+
37
+ export { StyledBreadcrumbItem };
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+ import { StyledBreadcrumbItem } from './StyledBreadcrumbItem.js';
10
+
11
+ const StyledCenteredBreadcrumbItem = styled(StyledBreadcrumbItem).attrs({
12
+ 'aria-hidden': true
13
+ }).withConfig({
14
+ displayName: "StyledCenteredBreadcrumbItem",
15
+ componentId: "sc-1ces9y2-0"
16
+ })(["display:flex;align-items:center;"]);
17
+ StyledCenteredBreadcrumbItem.defaultProps = {
18
+ theme: DEFAULT_THEME
19
+ };
20
+
21
+ export { StyledCenteredBreadcrumbItem };
@@ -0,0 +1,31 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default from 'react';
8
+ import styled from 'styled-components';
9
+ import { em } from 'polished';
10
+ import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
11
+ import SvgChevronRightStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/chevron-right-stroke.svg.js';
12
+
13
+ const StyledChevronIcon = styled(_ref => {
14
+ let {
15
+ children,
16
+ theme,
17
+ ...props
18
+ } = _ref;
19
+ return React__default.createElement(SvgChevronRightStroke, props);
20
+ }).attrs({
21
+ role: 'presentation',
22
+ 'aria-hidden': 'true'
23
+ }).withConfig({
24
+ displayName: "StyledChevronIcon",
25
+ componentId: "sc-9r9qrm-0"
26
+ })(["transform:", ";margin:0 ", ";color:", ";"], props => props.theme.rtl && `rotate(180deg);`, props => em(props.theme.space.base, props.theme.fontSizes.md), props => getColorV8('neutralHue', 600, props.theme));
27
+ StyledChevronIcon.defaultProps = {
28
+ theme: DEFAULT_THEME
29
+ };
30
+
31
+ export { StyledChevronIcon };
package/dist/index.cjs.js CHANGED
@@ -1,10 +1,9 @@
1
1
  /**
2
- * Copyright Zendesk, Inc.
3
- *
4
- * Use of this source code is governed under the Apache License, Version 2.0
5
- * found at http://www.apache.org/licenses/LICENSE-2.0.
6
- */
7
-
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
8
7
  'use strict';
9
8
 
10
9
  var React = require('react');
@@ -39,7 +38,7 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
39
38
  const COMPONENT_ID$1 = 'breadcrumbs.list';
40
39
  const StyledBreadcrumb = styled__default.default.ol.attrs({
41
40
  'data-garden-id': COMPONENT_ID$1,
42
- 'data-garden-version': '9.0.0-next.7'
41
+ 'data-garden-version': '9.0.0-next.9'
43
42
  }).withConfig({
44
43
  displayName: "StyledBreadcrumb",
45
44
  componentId: "sc-11jrinn-0"
@@ -100,7 +99,7 @@ const linkStyles = _ref => {
100
99
  };
101
100
  const StyledBreadcrumbItem = styled__default.default.li.attrs({
102
101
  'data-garden-id': COMPONENT_ID,
103
- 'data-garden-version': '9.0.0-next.7'
102
+ 'data-garden-version': '9.0.0-next.9'
104
103
  }).withConfig({
105
104
  displayName: "StyledBreadcrumbItem",
106
105
  componentId: "sc-r0suq7-0"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-breadcrumbs",
3
- "version": "9.0.0-next.7",
3
+ "version": "9.0.0-next.9",
4
4
  "description": "Components relating to breadcrumbs in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
10
10
  "url": "https://github.com/zendeskgarden/react-components/issues"
11
11
  },
12
12
  "main": "dist/index.cjs.js",
13
- "module": "dist/index.esm.js",
13
+ "module": "dist/esm/index.js",
14
14
  "files": [
15
15
  "dist"
16
16
  ],
@@ -26,13 +26,13 @@
26
26
  "prop-types": "^15.5.7"
27
27
  },
28
28
  "peerDependencies": {
29
- "@zendeskgarden/react-theming": "^8.1.0",
29
+ "@zendeskgarden/react-theming": ">=9.0.0-next",
30
30
  "react": ">=16.8.0",
31
31
  "react-dom": ">=16.8.0",
32
32
  "styled-components": "^5.3.1"
33
33
  },
34
34
  "devDependencies": {
35
- "@zendeskgarden/react-theming": "^9.0.0-next.7",
35
+ "@zendeskgarden/react-theming": "^9.0.0-next.9",
36
36
  "@zendeskgarden/svg-icons": "7.0.0"
37
37
  },
38
38
  "keywords": [
@@ -45,5 +45,5 @@
45
45
  "access": "public"
46
46
  },
47
47
  "zendeskgarden:src": "src/index.ts",
48
- "gitHead": "50a2b45b2e237a490a6d460818d33498b92479ec"
48
+ "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
49
49
  }
package/dist/index.esm.js DELETED
@@ -1,123 +0,0 @@
1
- /**
2
- * Copyright Zendesk, Inc.
3
- *
4
- * Use of this source code is governed under the Apache License, Version 2.0
5
- * found at http://www.apache.org/licenses/LICENSE-2.0.
6
- */
7
-
8
- import * as React from 'react';
9
- import React__default, { forwardRef, Children, cloneElement } from 'react';
10
- import { useBreadcrumb } from '@zendeskgarden/container-breadcrumb';
11
- import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, getLineHeight, useText } from '@zendeskgarden/react-theming';
12
- import styled, { css } from 'styled-components';
13
- import { em } from 'polished';
14
-
15
- const COMPONENT_ID$1 = 'breadcrumbs.list';
16
- const StyledBreadcrumb = styled.ol.attrs({
17
- 'data-garden-id': COMPONENT_ID$1,
18
- 'data-garden-version': '9.0.0-next.7'
19
- }).withConfig({
20
- displayName: "StyledBreadcrumb",
21
- componentId: "sc-11jrinn-0"
22
- })(["display:flex;margin:0;padding:0;list-style:none;font-size:", ";direction:", ";", ";"], props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$1, props));
23
- StyledBreadcrumb.defaultProps = {
24
- theme: DEFAULT_THEME
25
- };
26
-
27
- var _path;
28
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
29
- var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
30
- return /*#__PURE__*/React.createElement("svg", _extends({
31
- xmlns: "http://www.w3.org/2000/svg",
32
- width: 12,
33
- height: 12,
34
- focusable: "false",
35
- viewBox: "0 0 12 12",
36
- "aria-hidden": "true"
37
- }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
38
- fill: "currentColor",
39
- d: "M3.646 10.354a.5.5 0 01-.057-.638l.057-.07L7.293 6 3.646 2.354a.5.5 0 01-.057-.638l.057-.07a.5.5 0 01.638-.057l.07.057 4 4a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.708 0z"
40
- })));
41
- };
42
-
43
- const StyledChevronIcon = styled(_ref => {
44
- let {
45
- children,
46
- theme,
47
- ...props
48
- } = _ref;
49
- return React__default.createElement(SvgChevronRightStroke, props);
50
- }).attrs({
51
- role: 'presentation',
52
- 'aria-hidden': 'true'
53
- }).withConfig({
54
- displayName: "StyledChevronIcon",
55
- componentId: "sc-9r9qrm-0"
56
- })(["transform:", ";margin:0 ", ";color:", ";"], props => props.theme.rtl && `rotate(180deg);`, props => em(props.theme.space.base, props.theme.fontSizes.md), props => getColorV8('neutralHue', 600, props.theme));
57
- StyledChevronIcon.defaultProps = {
58
- theme: DEFAULT_THEME
59
- };
60
-
61
- const COMPONENT_ID = 'breadcrumbs.item';
62
- const linkStyles = _ref => {
63
- let {
64
- isCurrent
65
- } = _ref;
66
- return css(["& > :link,& > :visited{white-space:inherit;}", ""], isCurrent && `
67
- & > :link,
68
- & > :visited,
69
- & > :link:hover,
70
- & > :visited:hover,
71
- & > :link:focus,
72
- & > :visited:focus {
73
- color: inherit;
74
- }
75
- `);
76
- };
77
- const StyledBreadcrumbItem = styled.li.attrs({
78
- 'data-garden-id': COMPONENT_ID,
79
- 'data-garden-version': '9.0.0-next.7'
80
- }).withConfig({
81
- displayName: "StyledBreadcrumbItem",
82
- componentId: "sc-r0suq7-0"
83
- })(["line-height:", ";white-space:nowrap;color:", ";font-size:inherit;", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isCurrent ? getColorV8(props.theme.colors.neutralHue, 600) : 'inherit', linkStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
84
- StyledBreadcrumbItem.defaultProps = {
85
- theme: DEFAULT_THEME
86
- };
87
-
88
- const StyledCenteredBreadcrumbItem = styled(StyledBreadcrumbItem).attrs({
89
- 'aria-hidden': true
90
- }).withConfig({
91
- displayName: "StyledCenteredBreadcrumbItem",
92
- componentId: "sc-1ces9y2-0"
93
- })(["display:flex;align-items:center;"]);
94
- StyledCenteredBreadcrumbItem.defaultProps = {
95
- theme: DEFAULT_THEME
96
- };
97
-
98
- const Breadcrumb = forwardRef((props, ref) => {
99
- const {
100
- getContainerProps,
101
- getCurrentPageProps
102
- } = useBreadcrumb();
103
- const totalChildren = Children.count(props.children);
104
- const mappedChildren = Children.map(props.children, (child, index) => {
105
- const isLastItem = index === totalChildren - 1;
106
- if (isLastItem) {
107
- return React__default.createElement(StyledBreadcrumbItem, {
108
- isCurrent: true
109
- }, cloneElement(child, getCurrentPageProps()));
110
- }
111
- return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledBreadcrumbItem, null, child), React__default.createElement(StyledCenteredBreadcrumbItem, null, React__default.createElement(StyledChevronIcon, null)));
112
- });
113
- const ariaLabel = useText(Breadcrumb, props, 'aria-label', 'Breadcrumbs');
114
- return React__default.createElement("nav", getContainerProps({
115
- ...props,
116
- ref,
117
- role: null,
118
- 'aria-label': ariaLabel
119
- }), React__default.createElement(StyledBreadcrumb, null, mappedChildren));
120
- });
121
- Breadcrumb.displayName = 'Breadcrumb';
122
-
123
- export { Breadcrumb };