@zendeskgarden/react-chrome 9.0.0-next.7 → 9.0.0-next.8

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 (94) hide show
  1. package/README.md +13 -10
  2. package/dist/esm/elements/Chrome.js +94 -0
  3. package/dist/esm/elements/SkipNav.js +65 -0
  4. package/dist/esm/elements/body/Body.js +57 -0
  5. package/dist/esm/elements/body/Content.js +54 -0
  6. package/dist/esm/elements/body/Main.js +47 -0
  7. package/dist/esm/elements/footer/Footer.js +67 -0
  8. package/dist/esm/elements/footer/FooterItem.js +47 -0
  9. package/dist/esm/elements/header/Header.js +60 -0
  10. package/dist/esm/elements/header/HeaderItem.js +69 -0
  11. package/dist/esm/elements/header/HeaderItemIcon.js +66 -0
  12. package/dist/esm/elements/header/HeaderItemText.js +51 -0
  13. package/dist/esm/elements/header/HeaderItemWrapper.js +47 -0
  14. package/dist/esm/elements/nav/Nav.js +78 -0
  15. package/dist/esm/elements/nav/NavItem.js +101 -0
  16. package/dist/esm/elements/nav/NavItemIcon.js +66 -0
  17. package/dist/esm/elements/nav/NavItemText.js +58 -0
  18. package/dist/esm/elements/nav/NavList.js +55 -0
  19. package/dist/esm/elements/sheet/Sheet.js +128 -0
  20. package/dist/esm/elements/sheet/components/Body.js +50 -0
  21. package/dist/esm/elements/sheet/components/Close.js +60 -0
  22. package/dist/esm/elements/sheet/components/Description.js +59 -0
  23. package/dist/esm/elements/sheet/components/Footer.js +50 -0
  24. package/dist/esm/elements/sheet/components/FooterItem.js +50 -0
  25. package/dist/esm/elements/sheet/components/Header.js +55 -0
  26. package/dist/esm/elements/sheet/components/Title.js +59 -0
  27. package/dist/esm/index.js +24 -0
  28. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/link-stroke.svg.js +25 -0
  29. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js +26 -0
  30. package/dist/esm/styled/StyledChrome.js +22 -0
  31. package/dist/esm/styled/StyledSkipNav.js +46 -0
  32. package/dist/esm/styled/StyledSkipNavIcon.js +28 -0
  33. package/dist/esm/styled/body/StyledBody.js +22 -0
  34. package/dist/esm/styled/body/StyledContent.js +25 -0
  35. package/dist/esm/styled/body/StyledMain.js +22 -0
  36. package/dist/esm/styled/footer/StyledFooter.js +25 -0
  37. package/dist/esm/styled/footer/StyledFooterItem.js +22 -0
  38. package/dist/esm/styled/header/StyledBaseHeaderItem.js +35 -0
  39. package/dist/esm/styled/header/StyledHeader.js +31 -0
  40. package/dist/esm/styled/header/StyledHeaderItem.js +37 -0
  41. package/dist/esm/styled/header/StyledHeaderItemIcon.js +22 -0
  42. package/dist/esm/styled/header/StyledHeaderItemText.js +23 -0
  43. package/dist/esm/styled/header/StyledHeaderItemWrapper.js +24 -0
  44. package/dist/esm/styled/header/StyledLogoHeaderItem.js +47 -0
  45. package/dist/esm/styled/nav/StyledBaseNavItem.js +32 -0
  46. package/dist/esm/styled/nav/StyledBrandmarkNavItem.js +23 -0
  47. package/dist/esm/styled/nav/StyledLogoNavItem.js +48 -0
  48. package/dist/esm/styled/nav/StyledNav.js +34 -0
  49. package/dist/esm/styled/nav/StyledNavButton.js +65 -0
  50. package/dist/esm/styled/nav/StyledNavItemIcon.js +22 -0
  51. package/dist/esm/styled/nav/StyledNavItemText.js +34 -0
  52. package/dist/esm/styled/nav/StyledNavList.js +22 -0
  53. package/dist/esm/styled/nav/StyledNavListItem.js +22 -0
  54. package/dist/esm/styled/sheet/StyledSheet.js +41 -0
  55. package/dist/esm/styled/sheet/StyledSheetBody.js +22 -0
  56. package/dist/esm/styled/sheet/StyledSheetClose.js +34 -0
  57. package/dist/esm/styled/sheet/StyledSheetDescription.js +22 -0
  58. package/dist/esm/styled/sheet/StyledSheetFooter.js +22 -0
  59. package/dist/esm/styled/sheet/StyledSheetFooterItem.js +22 -0
  60. package/dist/esm/styled/sheet/StyledSheetHeader.js +23 -0
  61. package/dist/esm/styled/sheet/StyledSheetTitle.js +22 -0
  62. package/dist/esm/styled/sheet/StyledSheetWrapper.js +37 -0
  63. package/dist/esm/types/index.js +10 -0
  64. package/dist/esm/utils/useBodyContext.js +14 -0
  65. package/dist/esm/utils/useChromeContext.js +16 -0
  66. package/dist/esm/utils/useFocusableMount.js +31 -0
  67. package/dist/esm/utils/useNavContext.js +16 -0
  68. package/dist/esm/utils/useNavListContext.js +14 -0
  69. package/dist/esm/utils/useSheetContext.js +16 -0
  70. package/dist/index.cjs.js +208 -452
  71. package/dist/typings/elements/nav/Nav.d.ts +2 -0
  72. package/dist/typings/elements/nav/NavList.d.ts +11 -0
  73. package/dist/typings/index.d.ts +1 -5
  74. package/dist/typings/styled/index.d.ts +3 -7
  75. package/dist/typings/styled/nav/StyledBaseNavItem.d.ts +1 -5
  76. package/dist/typings/styled/nav/StyledBrandmarkNavItem.d.ts +4 -5
  77. package/dist/typings/styled/nav/StyledLogoNavItem.d.ts +4 -5
  78. package/dist/typings/styled/nav/{StyledNavItem.d.ts → StyledNavButton.d.ts} +3 -1
  79. package/dist/typings/styled/nav/StyledNavList.d.ts +10 -0
  80. package/dist/typings/styled/nav/StyledNavListItem.d.ts +10 -0
  81. package/dist/typings/types/index.d.ts +1 -24
  82. package/dist/typings/utils/useNavListContext.d.ts +13 -0
  83. package/package.json +5 -7
  84. package/dist/index.esm.js +0 -1456
  85. package/dist/typings/elements/subnav/CollapsibleSubNavItem.d.ts +0 -14
  86. package/dist/typings/elements/subnav/SubNav.d.ts +0 -19
  87. package/dist/typings/elements/subnav/SubNavItem.d.ts +0 -14
  88. package/dist/typings/elements/subnav/SubNavItemText.d.ts +0 -14
  89. package/dist/typings/styled/subnav/StyledSubNav.d.ts +0 -17
  90. package/dist/typings/styled/subnav/StyledSubNavItem.d.ts +0 -21
  91. package/dist/typings/styled/subnav/StyledSubNavItemHeader.d.ts +0 -14
  92. package/dist/typings/styled/subnav/StyledSubNavItemIcon.d.ts +0 -14
  93. package/dist/typings/styled/subnav/StyledSubNavItemText.d.ts +0 -11
  94. package/dist/typings/styled/subnav/StyledSubNavPanel.d.ts +0 -12
package/README.md CHANGED
@@ -15,8 +15,9 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
15
15
 
16
16
  ```jsx
17
17
  import { ThemeProvider } from '@zendeskgarden/react-theming';
18
- import { Chrome, Nav, SubNav, Body, Header, Content, Main } from '@zendeskgarden/react-chrome';
18
+ import { Chrome, Nav, Body, Header, Content, Main } from '@zendeskgarden/react-chrome';
19
19
  import ConnectIcon from '@zendeskgarden/icons/src/26/relationshape-connect.svg';
20
+ import BrandmarkIcon from '@zendeskgarden/svg-icons/src/26/zendesk.svg';
20
21
 
21
22
  <ThemeProvider>
22
23
  <Chrome>
@@ -27,19 +28,21 @@ import ConnectIcon from '@zendeskgarden/icons/src/26/relationshape-connect.svg';
27
28
  </Nav.ItemIcon>
28
29
  <NavItemText>Zendesk Connect</NavItemText>
29
30
  </Nav.Item>
30
- <Nav.Item isCurrent>
31
+ <Nav.List>
32
+ <Nav.Item isCurrent>
33
+ <Nav.ItemIcon>
34
+ <HomeIcon />
35
+ </Nav.ItemIcon>
36
+ <NavItemText>Home</NavItemText>
37
+ </Nav.Item>
38
+ </Nav.List>
39
+ <Nav.Item hasBrandmark>
31
40
  <Nav.ItemIcon>
32
- <HomeIcon />
41
+ <BrandmarkIcon />
33
42
  </Nav.ItemIcon>
34
- <NavItemText>Home</NavItemText>
43
+ <Nav.ItemText>Brandmark</Nav.ItemText>
35
44
  </Nav.Item>
36
45
  </Nav>
37
- <SubNav>
38
- <SubNav.Item isCurrent>
39
- <SubNav.ItemText>Subnav 1</SubNav.ItemText>
40
- </SubNav.Item>
41
- ...
42
- </SubNav>
43
46
  <Body>
44
47
  <Header>...</Header>
45
48
  <Content>
package/dist/esm/elements/Chrome.js ADDED
@@ -0,0 +1,94 @@
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, { useContext, useMemo, useEffect } from 'react';
8
+ import PropTypes from 'prop-types';
9
+ import { ThemeContext } from 'styled-components';
10
+ import { readableColor } from 'polished';
11
+ import { getColorV8, useDocument } from '@zendeskgarden/react-theming';
12
+ import { ChromeContext } from '../utils/useChromeContext.js';
13
+ import { StyledChrome } from '../styled/StyledChrome.js';
14
+ import '../styled/StyledSkipNav.js';
15
+ import '../styled/StyledSkipNavIcon.js';
16
+ import '../styled/body/StyledBody.js';
17
+ import '../styled/body/StyledContent.js';
18
+ import '../styled/body/StyledMain.js';
19
+ import '../styled/footer/StyledFooter.js';
20
+ import '../styled/footer/StyledFooterItem.js';
21
+ import '../styled/header/StyledHeader.js';
22
+ import '../styled/header/StyledBaseHeaderItem.js';
23
+ import '../styled/header/StyledHeaderItem.js';
24
+ import '../styled/header/StyledHeaderItemIcon.js';
25
+ import '../styled/header/StyledLogoHeaderItem.js';
26
+ import '../styled/header/StyledHeaderItemText.js';
27
+ import '../styled/header/StyledHeaderItemWrapper.js';
28
+ import '../styled/nav/StyledNav.js';
29
+ import '../styled/nav/StyledNavList.js';
30
+ import '../styled/nav/StyledNavListItem.js';
31
+ import '../styled/nav/StyledBaseNavItem.js';
32
+ import '../styled/nav/StyledLogoNavItem.js';
33
+ import '../styled/nav/StyledBrandmarkNavItem.js';
34
+ import '../styled/nav/StyledNavButton.js';
35
+ import '../styled/nav/StyledNavItemIcon.js';
36
+ import '../styled/nav/StyledNavItemText.js';
37
+ import '../styled/sheet/StyledSheet.js';
38
+ import '../styled/sheet/StyledSheetWrapper.js';
39
+ import '../styled/sheet/StyledSheetTitle.js';
40
+ import '../styled/sheet/StyledSheetDescription.js';
41
+ import '../styled/sheet/StyledSheetBody.js';
42
+ import '../styled/sheet/StyledSheetClose.js';
43
+ import '../styled/sheet/StyledSheetFooter.js';
44
+ import '../styled/sheet/StyledSheetFooterItem.js';
45
+ import '../styled/sheet/StyledSheetHeader.js';
46
+
47
+ const Chrome = React__default.forwardRef((_ref, ref) => {
48
+ let {
49
+ hue,
50
+ isFluid,
51
+ ...props
52
+ } = _ref;
53
+ const theme = useContext(ThemeContext);
54
+ const isLightMemoized = useMemo(() => {
55
+ if (hue) {
56
+ const backgroundColor = getColorV8(hue, 600, theme);
57
+ const LIGHT_COLOR = 'white';
58
+ return readableColor(backgroundColor, LIGHT_COLOR, undefined, false ) === LIGHT_COLOR;
59
+ }
60
+ return false;
61
+ }, [hue, theme]);
62
+ const isLight = hue ? isLightMemoized : false;
63
+ const isDark = hue ? !isLightMemoized : false;
64
+ const chromeContextValue = useMemo(() => ({
65
+ hue: hue || 'chromeHue',
66
+ isLight,
67
+ isDark
68
+ }), [hue, isLight, isDark]);
69
+ const environment = useDocument(theme);
70
+ useEffect(() => {
71
+ if (environment && !isFluid) {
72
+ const htmlElement = environment.querySelector('html');
73
+ if (htmlElement) {
74
+ const defaultHtmlPosition = htmlElement.style.position;
75
+ htmlElement.style.position = 'fixed';
76
+ return () => {
77
+ htmlElement.style.position = defaultHtmlPosition;
78
+ };
79
+ }
80
+ }
81
+ return undefined;
82
+ }, [environment, isFluid]);
83
+ return React__default.createElement(ChromeContext.Provider, {
84
+ value: chromeContextValue
85
+ }, React__default.createElement(StyledChrome, Object.assign({
86
+ ref: ref
87
+ }, props)));
88
+ });
89
+ Chrome.displayName = 'Chrome';
90
+ Chrome.propTypes = {
91
+ hue: PropTypes.string
92
+ };
93
+
94
+ export { Chrome };
package/dist/esm/elements/SkipNav.js ADDED
@@ -0,0 +1,65 @@
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 PropTypes from 'prop-types';
9
+ import '../styled/StyledChrome.js';
10
+ import { StyledSkipNav } from '../styled/StyledSkipNav.js';
11
+ import { StyledSkipNavIcon } from '../styled/StyledSkipNavIcon.js';
12
+ import '../styled/body/StyledBody.js';
13
+ import '../styled/body/StyledContent.js';
14
+ import '../styled/body/StyledMain.js';
15
+ import '../styled/footer/StyledFooter.js';
16
+ import '../styled/footer/StyledFooterItem.js';
17
+ import '../styled/header/StyledHeader.js';
18
+ import '../styled/header/StyledBaseHeaderItem.js';
19
+ import '../styled/header/StyledHeaderItem.js';
20
+ import '../styled/header/StyledHeaderItemIcon.js';
21
+ import '../styled/header/StyledLogoHeaderItem.js';
22
+ import '../styled/header/StyledHeaderItemText.js';
23
+ import '../styled/header/StyledHeaderItemWrapper.js';
24
+ import '../styled/nav/StyledNav.js';
25
+ import '../styled/nav/StyledNavList.js';
26
+ import '../styled/nav/StyledNavListItem.js';
27
+ import '../styled/nav/StyledBaseNavItem.js';
28
+ import '../styled/nav/StyledLogoNavItem.js';
29
+ import '../styled/nav/StyledBrandmarkNavItem.js';
30
+ import '../styled/nav/StyledNavButton.js';
31
+ import '../styled/nav/StyledNavItemIcon.js';
32
+ import '../styled/nav/StyledNavItemText.js';
33
+ import '../styled/sheet/StyledSheet.js';
34
+ import '../styled/sheet/StyledSheetWrapper.js';
35
+ import '../styled/sheet/StyledSheetTitle.js';
36
+ import '../styled/sheet/StyledSheetDescription.js';
37
+ import '../styled/sheet/StyledSheetBody.js';
38
+ import '../styled/sheet/StyledSheetClose.js';
39
+ import '../styled/sheet/StyledSheetFooter.js';
40
+ import '../styled/sheet/StyledSheetFooterItem.js';
41
+ import '../styled/sheet/StyledSheetHeader.js';
42
+
43
+ const SkipNav = React__default.forwardRef((_ref, ref) => {
44
+ let {
45
+ targetId,
46
+ zIndex,
47
+ children,
48
+ ...props
49
+ } = _ref;
50
+ return React__default.createElement(StyledSkipNav, Object.assign({
51
+ href: `#${targetId}`,
52
+ zIndex: zIndex,
53
+ ref: ref
54
+ }, props), React__default.createElement(StyledSkipNavIcon, null), children);
55
+ });
56
+ SkipNav.displayName = 'SkipNav';
57
+ SkipNav.propTypes = {
58
+ targetId: PropTypes.string.isRequired,
59
+ zIndex: PropTypes.number
60
+ };
61
+ SkipNav.defaultProps = {
62
+ zIndex: 1
63
+ };
64
+
65
+ export { SkipNav };
package/dist/esm/elements/body/Body.js ADDED
@@ -0,0 +1,57 @@
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, { useState, useMemo } from 'react';
8
+ import '../../styled/StyledChrome.js';
9
+ import '../../styled/StyledSkipNav.js';
10
+ import '../../styled/StyledSkipNavIcon.js';
11
+ import { StyledBody } from '../../styled/body/StyledBody.js';
12
+ import '../../styled/body/StyledContent.js';
13
+ import '../../styled/body/StyledMain.js';
14
+ import '../../styled/footer/StyledFooter.js';
15
+ import '../../styled/footer/StyledFooterItem.js';
16
+ import '../../styled/header/StyledHeader.js';
17
+ import '../../styled/header/StyledBaseHeaderItem.js';
18
+ import '../../styled/header/StyledHeaderItem.js';
19
+ import '../../styled/header/StyledHeaderItemIcon.js';
20
+ import '../../styled/header/StyledLogoHeaderItem.js';
21
+ import '../../styled/header/StyledHeaderItemText.js';
22
+ import '../../styled/header/StyledHeaderItemWrapper.js';
23
+ import '../../styled/nav/StyledNav.js';
24
+ import '../../styled/nav/StyledNavList.js';
25
+ import '../../styled/nav/StyledNavListItem.js';
26
+ import '../../styled/nav/StyledBaseNavItem.js';
27
+ import '../../styled/nav/StyledLogoNavItem.js';
28
+ import '../../styled/nav/StyledBrandmarkNavItem.js';
29
+ import '../../styled/nav/StyledNavButton.js';
30
+ import '../../styled/nav/StyledNavItemIcon.js';
31
+ import '../../styled/nav/StyledNavItemText.js';
32
+ import '../../styled/sheet/StyledSheet.js';
33
+ import '../../styled/sheet/StyledSheetWrapper.js';
34
+ import '../../styled/sheet/StyledSheetTitle.js';
35
+ import '../../styled/sheet/StyledSheetDescription.js';
36
+ import '../../styled/sheet/StyledSheetBody.js';
37
+ import '../../styled/sheet/StyledSheetClose.js';
38
+ import '../../styled/sheet/StyledSheetFooter.js';
39
+ import '../../styled/sheet/StyledSheetFooterItem.js';
40
+ import '../../styled/sheet/StyledSheetHeader.js';
41
+ import { BodyContext } from '../../utils/useBodyContext.js';
42
+
43
+ const Body = React__default.forwardRef((props, ref) => {
44
+ const [hasFooter, setHasFooter] = useState(false);
45
+ const bodyContextValue = useMemo(() => ({
46
+ hasFooter,
47
+ setHasFooter
48
+ }), [hasFooter, setHasFooter]);
49
+ return React__default.createElement(BodyContext.Provider, {
50
+ value: bodyContextValue
51
+ }, React__default.createElement(StyledBody, Object.assign({
52
+ ref: ref
53
+ }, props)));
54
+ });
55
+ Body.displayName = 'Body';
56
+
57
+ export { Body };
package/dist/esm/elements/body/Content.js ADDED
@@ -0,0 +1,54 @@
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/StyledChrome.js';
9
+ import '../../styled/StyledSkipNav.js';
10
+ import '../../styled/StyledSkipNavIcon.js';
11
+ import '../../styled/body/StyledBody.js';
12
+ import { StyledContent } from '../../styled/body/StyledContent.js';
13
+ import '../../styled/body/StyledMain.js';
14
+ import '../../styled/footer/StyledFooter.js';
15
+ import '../../styled/footer/StyledFooterItem.js';
16
+ import '../../styled/header/StyledHeader.js';
17
+ import '../../styled/header/StyledBaseHeaderItem.js';
18
+ import '../../styled/header/StyledHeaderItem.js';
19
+ import '../../styled/header/StyledHeaderItemIcon.js';
20
+ import '../../styled/header/StyledLogoHeaderItem.js';
21
+ import '../../styled/header/StyledHeaderItemText.js';
22
+ import '../../styled/header/StyledHeaderItemWrapper.js';
23
+ import '../../styled/nav/StyledNav.js';
24
+ import '../../styled/nav/StyledNavList.js';
25
+ import '../../styled/nav/StyledNavListItem.js';
26
+ import '../../styled/nav/StyledBaseNavItem.js';
27
+ import '../../styled/nav/StyledLogoNavItem.js';
28
+ import '../../styled/nav/StyledBrandmarkNavItem.js';
29
+ import '../../styled/nav/StyledNavButton.js';
30
+ import '../../styled/nav/StyledNavItemIcon.js';
31
+ import '../../styled/nav/StyledNavItemText.js';
32
+ import '../../styled/sheet/StyledSheet.js';
33
+ import '../../styled/sheet/StyledSheetWrapper.js';
34
+ import '../../styled/sheet/StyledSheetTitle.js';
35
+ import '../../styled/sheet/StyledSheetDescription.js';
36
+ import '../../styled/sheet/StyledSheetBody.js';
37
+ import '../../styled/sheet/StyledSheetClose.js';
38
+ import '../../styled/sheet/StyledSheetFooter.js';
39
+ import '../../styled/sheet/StyledSheetFooterItem.js';
40
+ import '../../styled/sheet/StyledSheetHeader.js';
41
+ import { useBodyContext } from '../../utils/useBodyContext.js';
42
+
43
+ const Content = React__default.forwardRef((props, ref) => {
44
+ const {
45
+ hasFooter
46
+ } = useBodyContext() || {};
47
+ return React__default.createElement(StyledContent, Object.assign({
48
+ ref: ref,
49
+ hasFooter: hasFooter
50
+ }, props));
51
+ });
52
+ Content.displayName = 'Content';
53
+
54
+ export { Content };
package/dist/esm/elements/body/Main.js ADDED
@@ -0,0 +1,47 @@
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/StyledChrome.js';
9
+ import '../../styled/StyledSkipNav.js';
10
+ import '../../styled/StyledSkipNavIcon.js';
11
+ import '../../styled/body/StyledBody.js';
12
+ import '../../styled/body/StyledContent.js';
13
+ import { StyledMain } from '../../styled/body/StyledMain.js';
14
+ import '../../styled/footer/StyledFooter.js';
15
+ import '../../styled/footer/StyledFooterItem.js';
16
+ import '../../styled/header/StyledHeader.js';
17
+ import '../../styled/header/StyledBaseHeaderItem.js';
18
+ import '../../styled/header/StyledHeaderItem.js';
19
+ import '../../styled/header/StyledHeaderItemIcon.js';
20
+ import '../../styled/header/StyledLogoHeaderItem.js';
21
+ import '../../styled/header/StyledHeaderItemText.js';
22
+ import '../../styled/header/StyledHeaderItemWrapper.js';
23
+ import '../../styled/nav/StyledNav.js';
24
+ import '../../styled/nav/StyledNavList.js';
25
+ import '../../styled/nav/StyledNavListItem.js';
26
+ import '../../styled/nav/StyledBaseNavItem.js';
27
+ import '../../styled/nav/StyledLogoNavItem.js';
28
+ import '../../styled/nav/StyledBrandmarkNavItem.js';
29
+ import '../../styled/nav/StyledNavButton.js';
30
+ import '../../styled/nav/StyledNavItemIcon.js';
31
+ import '../../styled/nav/StyledNavItemText.js';
32
+ import '../../styled/sheet/StyledSheet.js';
33
+ import '../../styled/sheet/StyledSheetWrapper.js';
34
+ import '../../styled/sheet/StyledSheetTitle.js';
35
+ import '../../styled/sheet/StyledSheetDescription.js';
36
+ import '../../styled/sheet/StyledSheetBody.js';
37
+ import '../../styled/sheet/StyledSheetClose.js';
38
+ import '../../styled/sheet/StyledSheetFooter.js';
39
+ import '../../styled/sheet/StyledSheetFooterItem.js';
40
+ import '../../styled/sheet/StyledSheetHeader.js';
41
+
42
+ const Main = React__default.forwardRef((props, ref) => React__default.createElement(StyledMain, Object.assign({
43
+ ref: ref
44
+ }, props)));
45
+ Main.displayName = 'Main';
46
+
47
+ export { Main };
package/dist/esm/elements/footer/Footer.js ADDED
@@ -0,0 +1,67 @@
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, { useEffect } from 'react';
8
+ import '../../styled/StyledChrome.js';
9
+ import '../../styled/StyledSkipNav.js';
10
+ import '../../styled/StyledSkipNavIcon.js';
11
+ import '../../styled/body/StyledBody.js';
12
+ import '../../styled/body/StyledContent.js';
13
+ import '../../styled/body/StyledMain.js';
14
+ import { StyledFooter } from '../../styled/footer/StyledFooter.js';
15
+ import '../../styled/footer/StyledFooterItem.js';
16
+ import '../../styled/header/StyledHeader.js';
17
+ import '../../styled/header/StyledBaseHeaderItem.js';
18
+ import '../../styled/header/StyledHeaderItem.js';
19
+ import '../../styled/header/StyledHeaderItemIcon.js';
20
+ import '../../styled/header/StyledLogoHeaderItem.js';
21
+ import '../../styled/header/StyledHeaderItemText.js';
22
+ import '../../styled/header/StyledHeaderItemWrapper.js';
23
+ import '../../styled/nav/StyledNav.js';
24
+ import '../../styled/nav/StyledNavList.js';
25
+ import '../../styled/nav/StyledNavListItem.js';
26
+ import '../../styled/nav/StyledBaseNavItem.js';
27
+ import '../../styled/nav/StyledLogoNavItem.js';
28
+ import '../../styled/nav/StyledBrandmarkNavItem.js';
29
+ import '../../styled/nav/StyledNavButton.js';
30
+ import '../../styled/nav/StyledNavItemIcon.js';
31
+ import '../../styled/nav/StyledNavItemText.js';
32
+ import '../../styled/sheet/StyledSheet.js';
33
+ import '../../styled/sheet/StyledSheetWrapper.js';
34
+ import '../../styled/sheet/StyledSheetTitle.js';
35
+ import '../../styled/sheet/StyledSheetDescription.js';
36
+ import '../../styled/sheet/StyledSheetBody.js';
37
+ import '../../styled/sheet/StyledSheetClose.js';
38
+ import '../../styled/sheet/StyledSheetFooter.js';
39
+ import '../../styled/sheet/StyledSheetFooterItem.js';
40
+ import '../../styled/sheet/StyledSheetHeader.js';
41
+ import { useBodyContext } from '../../utils/useBodyContext.js';
42
+ import { FooterItem } from './FooterItem.js';
43
+
44
+ const FooterComponent = React__default.forwardRef((props, ref) => {
45
+ const {
46
+ hasFooter,
47
+ setHasFooter
48
+ } = useBodyContext() || {};
49
+ useEffect(() => {
50
+ if (!hasFooter && setHasFooter) {
51
+ setHasFooter(true);
52
+ }
53
+ return () => {
54
+ if (hasFooter && setHasFooter) {
55
+ setHasFooter(false);
56
+ }
57
+ };
58
+ }, [hasFooter, setHasFooter]);
59
+ return React__default.createElement(StyledFooter, Object.assign({
60
+ ref: ref
61
+ }, props));
62
+ });
63
+ FooterComponent.displayName = 'Footer';
64
+ const Footer = FooterComponent;
65
+ Footer.Item = FooterItem;
66
+
67
+ export { Footer, FooterComponent };
package/dist/esm/elements/footer/FooterItem.js ADDED
@@ -0,0 +1,47 @@
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/StyledChrome.js';
9
+ import '../../styled/StyledSkipNav.js';
10
+ import '../../styled/StyledSkipNavIcon.js';
11
+ import '../../styled/body/StyledBody.js';
12
+ import '../../styled/body/StyledContent.js';
13
+ import '../../styled/body/StyledMain.js';
14
+ import '../../styled/footer/StyledFooter.js';
15
+ import { StyledFooterItem } from '../../styled/footer/StyledFooterItem.js';
16
+ import '../../styled/header/StyledHeader.js';
17
+ import '../../styled/header/StyledBaseHeaderItem.js';
18
+ import '../../styled/header/StyledHeaderItem.js';
19
+ import '../../styled/header/StyledHeaderItemIcon.js';
20
+ import '../../styled/header/StyledLogoHeaderItem.js';
21
+ import '../../styled/header/StyledHeaderItemText.js';
22
+ import '../../styled/header/StyledHeaderItemWrapper.js';
23
+ import '../../styled/nav/StyledNav.js';
24
+ import '../../styled/nav/StyledNavList.js';
25
+ import '../../styled/nav/StyledNavListItem.js';
26
+ import '../../styled/nav/StyledBaseNavItem.js';
27
+ import '../../styled/nav/StyledLogoNavItem.js';
28
+ import '../../styled/nav/StyledBrandmarkNavItem.js';
29
+ import '../../styled/nav/StyledNavButton.js';
30
+ import '../../styled/nav/StyledNavItemIcon.js';
31
+ import '../../styled/nav/StyledNavItemText.js';
32
+ import '../../styled/sheet/StyledSheet.js';
33
+ import '../../styled/sheet/StyledSheetWrapper.js';
34
+ import '../../styled/sheet/StyledSheetTitle.js';
35
+ import '../../styled/sheet/StyledSheetDescription.js';
36
+ import '../../styled/sheet/StyledSheetBody.js';
37
+ import '../../styled/sheet/StyledSheetClose.js';
38
+ import '../../styled/sheet/StyledSheetFooter.js';
39
+ import '../../styled/sheet/StyledSheetFooterItem.js';
40
+ import '../../styled/sheet/StyledSheetHeader.js';
41
+
42
+ const FooterItem = React__default.forwardRef((props, ref) => React__default.createElement(StyledFooterItem, Object.assign({
43
+ ref: ref
44
+ }, props)));
45
+ FooterItem.displayName = 'FooterItem';
46
+
47
+ export { FooterItem };
package/dist/esm/elements/header/Header.js ADDED
@@ -0,0 +1,60 @@
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 PropTypes from 'prop-types';
9
+ import '../../styled/StyledChrome.js';
10
+ import '../../styled/StyledSkipNav.js';
11
+ import '../../styled/StyledSkipNavIcon.js';
12
+ import '../../styled/body/StyledBody.js';
13
+ import '../../styled/body/StyledContent.js';
14
+ import '../../styled/body/StyledMain.js';
15
+ import '../../styled/footer/StyledFooter.js';
16
+ import '../../styled/footer/StyledFooterItem.js';
17
+ import { StyledHeader } from '../../styled/header/StyledHeader.js';
18
+ import '../../styled/header/StyledBaseHeaderItem.js';
19
+ import '../../styled/header/StyledHeaderItem.js';
20
+ import '../../styled/header/StyledHeaderItemIcon.js';
21
+ import '../../styled/header/StyledLogoHeaderItem.js';
22
+ import '../../styled/header/StyledHeaderItemText.js';
23
+ import '../../styled/header/StyledHeaderItemWrapper.js';
24
+ import '../../styled/nav/StyledNav.js';
25
+ import '../../styled/nav/StyledNavList.js';
26
+ import '../../styled/nav/StyledNavListItem.js';
27
+ import '../../styled/nav/StyledBaseNavItem.js';
28
+ import '../../styled/nav/StyledLogoNavItem.js';
29
+ import '../../styled/nav/StyledBrandmarkNavItem.js';
30
+ import '../../styled/nav/StyledNavButton.js';
31
+ import '../../styled/nav/StyledNavItemIcon.js';
32
+ import '../../styled/nav/StyledNavItemText.js';
33
+ import '../../styled/sheet/StyledSheet.js';
34
+ import '../../styled/sheet/StyledSheetWrapper.js';
35
+ import '../../styled/sheet/StyledSheetTitle.js';
36
+ import '../../styled/sheet/StyledSheetDescription.js';
37
+ import '../../styled/sheet/StyledSheetBody.js';
38
+ import '../../styled/sheet/StyledSheetClose.js';
39
+ import '../../styled/sheet/StyledSheetFooter.js';
40
+ import '../../styled/sheet/StyledSheetFooterItem.js';
41
+ import '../../styled/sheet/StyledSheetHeader.js';
42
+ import { HeaderItem } from './HeaderItem.js';
43
+ import { HeaderItemIcon } from './HeaderItemIcon.js';
44
+ import { HeaderItemText } from './HeaderItemText.js';
45
+ import { HeaderItemWrapper } from './HeaderItemWrapper.js';
46
+
47
+ const HeaderComponent = React__default.forwardRef((props, ref) => React__default.createElement(StyledHeader, Object.assign({
48
+ ref: ref
49
+ }, props)));
50
+ HeaderComponent.displayName = 'Header';
51
+ HeaderComponent.propTypes = {
52
+ isStandalone: PropTypes.bool
53
+ };
54
+ const Header = HeaderComponent;
55
+ Header.Item = HeaderItem;
56
+ Header.ItemIcon = HeaderItemIcon;
57
+ Header.ItemText = HeaderItemText;
58
+ Header.ItemWrapper = HeaderItemWrapper;
59
+
60
+ export { Header, HeaderComponent };
package/dist/esm/elements/header/HeaderItem.js ADDED
@@ -0,0 +1,69 @@
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 PropTypes from 'prop-types';
9
+ import { PRODUCTS } from '../../types/index.js';
10
+ import '../../styled/StyledChrome.js';
11
+ import '../../styled/StyledSkipNav.js';
12
+ import '../../styled/StyledSkipNavIcon.js';
13
+ import '../../styled/body/StyledBody.js';
14
+ import '../../styled/body/StyledContent.js';
15
+ import '../../styled/body/StyledMain.js';
16
+ import '../../styled/footer/StyledFooter.js';
17
+ import '../../styled/footer/StyledFooterItem.js';
18
+ import '../../styled/header/StyledHeader.js';
19
+ import '../../styled/header/StyledBaseHeaderItem.js';
20
+ import { StyledHeaderItem } from '../../styled/header/StyledHeaderItem.js';
21
+ import '../../styled/header/StyledHeaderItemIcon.js';
22
+ import { StyledLogoHeaderItem } from '../../styled/header/StyledLogoHeaderItem.js';
23
+ import '../../styled/header/StyledHeaderItemText.js';
24
+ import '../../styled/header/StyledHeaderItemWrapper.js';
25
+ import '../../styled/nav/StyledNav.js';
26
+ import '../../styled/nav/StyledNavList.js';
27
+ import '../../styled/nav/StyledNavListItem.js';
28
+ import '../../styled/nav/StyledBaseNavItem.js';
29
+ import '../../styled/nav/StyledLogoNavItem.js';
30
+ import '../../styled/nav/StyledBrandmarkNavItem.js';
31
+ import '../../styled/nav/StyledNavButton.js';
32
+ import '../../styled/nav/StyledNavItemIcon.js';
33
+ import '../../styled/nav/StyledNavItemText.js';
34
+ import '../../styled/sheet/StyledSheet.js';
35
+ import '../../styled/sheet/StyledSheetWrapper.js';
36
+ import '../../styled/sheet/StyledSheetTitle.js';
37
+ import '../../styled/sheet/StyledSheetDescription.js';
38
+ import '../../styled/sheet/StyledSheetBody.js';
39
+ import '../../styled/sheet/StyledSheetClose.js';
40
+ import '../../styled/sheet/StyledSheetFooter.js';
41
+ import '../../styled/sheet/StyledSheetFooterItem.js';
42
+ import '../../styled/sheet/StyledSheetHeader.js';
43
+
44
+ const HeaderItem = React__default.forwardRef((_ref, ref) => {
45
+ let {
46
+ hasLogo,
47
+ product,
48
+ ...other
49
+ } = _ref;
50
+ if (hasLogo) {
51
+ return React__default.createElement(StyledLogoHeaderItem, Object.assign({
52
+ ref: ref,
53
+ product: product
54
+ }, other));
55
+ }
56
+ return React__default.createElement(StyledHeaderItem, Object.assign({
57
+ ref: ref
58
+ }, other));
59
+ });
60
+ HeaderItem.displayName = 'HeaderItem';
61
+ HeaderItem.propTypes = {
62
+ maxX: PropTypes.bool,
63
+ maxY: PropTypes.bool,
64
+ isRound: PropTypes.bool,
65
+ product: PropTypes.oneOf(PRODUCTS),
66
+ hasLogo: PropTypes.bool
67
+ };
68
+
69
+ export { HeaderItem };