@zendeskgarden/react-chrome 9.0.0-next.2 → 9.0.0-next.21

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 (130) hide show
  1. package/README.md +26 -27
  2. package/dist/esm/elements/Chrome.js +95 -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 +51 -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 +84 -0
  15. package/dist/esm/elements/nav/NavItem.js +95 -0
  16. package/dist/esm/elements/nav/NavItemIcon.js +51 -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 +67 -0
  32. package/dist/esm/styled/StyledSkipNavIcon.js +34 -0
  33. package/dist/esm/styled/body/StyledBody.js +25 -0
  34. package/dist/esm/styled/body/StyledContent.js +37 -0
  35. package/dist/esm/styled/body/StyledMain.js +25 -0
  36. package/dist/esm/styled/footer/StyledFooter.js +46 -0
  37. package/dist/esm/styled/footer/StyledFooterItem.js +22 -0
  38. package/dist/esm/styled/header/StyledBaseHeaderItem.js +44 -0
  39. package/dist/esm/styled/header/StyledHeader.js +58 -0
  40. package/dist/esm/styled/header/StyledHeaderItem.js +69 -0
  41. package/dist/esm/styled/header/StyledHeaderItemIcon.js +30 -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 +55 -0
  45. package/dist/esm/styled/nav/StyledBaseNavItem.js +33 -0
  46. package/dist/esm/styled/nav/StyledBrandmarkNavItem.js +23 -0
  47. package/dist/esm/styled/nav/StyledLogoNavItem.js +37 -0
  48. package/dist/esm/styled/nav/StyledNav.js +54 -0
  49. package/dist/esm/styled/nav/StyledNavButton.js +94 -0
  50. package/dist/esm/styled/nav/StyledNavItemIcon.js +29 -0
  51. package/dist/esm/styled/nav/StyledNavItemText.js +39 -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 +56 -0
  55. package/dist/esm/styled/sheet/StyledSheetBody.js +22 -0
  56. package/dist/esm/styled/sheet/StyledSheetClose.js +31 -0
  57. package/dist/esm/styled/sheet/StyledSheetDescription.js +25 -0
  58. package/dist/esm/styled/sheet/StyledSheetFooter.js +41 -0
  59. package/dist/esm/styled/sheet/StyledSheetFooterItem.js +22 -0
  60. package/dist/esm/styled/sheet/StyledSheetHeader.js +45 -0
  61. package/dist/esm/styled/sheet/StyledSheetTitle.js +25 -0
  62. package/dist/esm/styled/sheet/StyledSheetWrapper.js +40 -0
  63. package/dist/esm/styled/utils.js +20 -0
  64. package/dist/esm/types/index.js +10 -0
  65. package/dist/esm/utils/useBodyContext.js +14 -0
  66. package/dist/esm/utils/useChromeContext.js +16 -0
  67. package/dist/esm/utils/useFocusableMount.js +31 -0
  68. package/dist/esm/utils/useNavContext.js +16 -0
  69. package/dist/esm/utils/useNavListContext.js +14 -0
  70. package/dist/esm/utils/useSheetContext.js +16 -0
  71. package/dist/index.cjs.js +888 -887
  72. package/dist/typings/elements/body/Body.d.ts +1 -2
  73. package/dist/typings/elements/footer/Footer.d.ts +8 -1
  74. package/dist/typings/elements/footer/FooterItem.d.ts +2 -0
  75. package/dist/typings/elements/header/Header.d.ts +11 -1
  76. package/dist/typings/elements/header/HeaderItem.d.ts +2 -0
  77. package/dist/typings/elements/header/HeaderItemIcon.d.ts +8 -3
  78. package/dist/typings/elements/header/HeaderItemText.d.ts +2 -0
  79. package/dist/typings/elements/header/HeaderItemWrapper.d.ts +2 -0
  80. package/dist/typings/elements/nav/Nav.d.ts +11 -1
  81. package/dist/typings/elements/nav/NavItem.d.ts +2 -0
  82. package/dist/typings/elements/nav/NavItemIcon.d.ts +8 -3
  83. package/dist/typings/elements/nav/NavItemText.d.ts +2 -0
  84. package/dist/typings/elements/{body/Sidebar.d.ts → nav/NavList.d.ts} +2 -2
  85. package/dist/typings/index.d.ts +9 -16
  86. package/dist/typings/styled/StyledSkipNav.d.ts +0 -3
  87. package/dist/typings/styled/StyledSkipNavIcon.d.ts +2 -2
  88. package/dist/typings/styled/body/StyledContent.d.ts +2 -1
  89. package/dist/typings/styled/footer/StyledFooter.d.ts +1 -2
  90. package/dist/typings/styled/header/StyledBaseHeaderItem.d.ts +1 -6
  91. package/dist/typings/styled/header/StyledHeader.d.ts +1 -2
  92. package/dist/typings/styled/header/StyledHeaderItem.d.ts +0 -3
  93. package/dist/typings/styled/header/StyledHeaderItemIcon.d.ts +3 -4
  94. package/dist/typings/styled/header/StyledHeaderItemText.d.ts +0 -1
  95. package/dist/typings/styled/header/StyledLogoHeaderItem.d.ts +2 -4
  96. package/dist/typings/styled/index.d.ts +3 -8
  97. package/dist/typings/styled/nav/StyledBaseNavItem.d.ts +2 -7
  98. package/dist/typings/styled/nav/StyledBrandmarkNavItem.d.ts +1 -5
  99. package/dist/typings/styled/nav/StyledLogoNavItem.d.ts +4 -9
  100. package/dist/typings/styled/nav/StyledNav.d.ts +2 -6
  101. package/dist/typings/styled/nav/StyledNavButton.d.ts +17 -0
  102. package/dist/typings/styled/nav/StyledNavItemIcon.d.ts +3 -4
  103. package/dist/typings/styled/nav/StyledNavItemText.d.ts +2 -1
  104. package/dist/typings/styled/{body/StyledSidebar.d.ts → nav/StyledNavList.d.ts} +1 -1
  105. package/dist/typings/styled/nav/StyledNavListItem.d.ts +10 -0
  106. package/dist/typings/styled/sheet/StyledSheetClose.d.ts +4 -8
  107. package/dist/typings/styled/sheet/StyledSheetDescription.d.ts +2 -3
  108. package/dist/typings/styled/sheet/StyledSheetFooter.d.ts +2 -2
  109. package/dist/typings/styled/sheet/StyledSheetFooterItem.d.ts +2 -3
  110. package/dist/typings/styled/sheet/StyledSheetHeader.d.ts +2 -6
  111. package/dist/typings/styled/sheet/StyledSheetTitle.d.ts +2 -3
  112. package/dist/typings/styled/sheet/StyledSheetWrapper.d.ts +2 -2
  113. package/dist/typings/styled/utils.d.ts +15 -0
  114. package/dist/typings/types/index.d.ts +3 -30
  115. package/dist/typings/utils/useBodyContext.d.ts +3 -2
  116. package/dist/typings/utils/useChromeContext.d.ts +0 -1
  117. package/dist/typings/utils/useNavListContext.d.ts +13 -0
  118. package/package.json +9 -10
  119. package/dist/index.esm.js +0 -1449
  120. package/dist/typings/elements/subnav/CollapsibleSubNavItem.d.ts +0 -12
  121. package/dist/typings/elements/subnav/SubNav.d.ts +0 -11
  122. package/dist/typings/elements/subnav/SubNavItem.d.ts +0 -12
  123. package/dist/typings/elements/subnav/SubNavItemText.d.ts +0 -12
  124. package/dist/typings/styled/nav/StyledNavItem.d.ts +0 -26
  125. package/dist/typings/styled/subnav/StyledSubNav.d.ts +0 -17
  126. package/dist/typings/styled/subnav/StyledSubNavItem.d.ts +0 -21
  127. package/dist/typings/styled/subnav/StyledSubNavItemHeader.d.ts +0 -14
  128. package/dist/typings/styled/subnav/StyledSubNavItemIcon.d.ts +0 -14
  129. package/dist/typings/styled/subnav/StyledSubNavItemText.d.ts +0 -11
  130. package/dist/typings/styled/subnav/StyledSubNavPanel.d.ts +0 -12
package/README.md CHANGED
@@ -15,41 +15,40 @@ 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, NavItem, ... } from '@zendeskgarden/react-chrome';
19
- import ConnectIcon from '@zendeskgarden/icons/src/26/relationshape-connect.svg';
18
+ import { Chrome, Nav, Body, Header, Content, Main } from '@zendeskgarden/react-chrome';
19
+ import SupportIcon from '@zendeskgarden/icons/src/26/relationshape-support.svg';
20
+ import BrandmarkIcon from '@zendeskgarden/svg-icons/src/26/zendesk.svg';
20
21
 
21
22
  <ThemeProvider>
22
23
  <Chrome>
23
24
  <Nav isExpanded>
24
- <NavItem hasLogo product="connect" title="Zendesk Connect">
25
- <NavItemIcon>
26
- <ConnectIcon />
27
- </NavItemIcon>
28
- <NavItemText>Zendesk Connect</NavItemText>
29
- </NavItem>
30
- <NavItem isCurrent>
31
- <NavItemIcon>
32
- <HomeIcon />
33
- </NavItemIcon>
34
- <NavItemText>Home</NavItemText>
35
- </NavItem>
25
+ <Nav.Item hasLogo product="support" title="Zendesk Support">
26
+ <Nav.ItemIcon>
27
+ <SupportIcon />
28
+ </Nav.ItemIcon>
29
+ <NavItemText>Zendesk Support</NavItemText>
30
+ </Nav.Item>
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>
40
+ <Nav.ItemIcon>
41
+ <BrandmarkIcon />
42
+ </Nav.ItemIcon>
43
+ <Nav.ItemText>Brandmark</Nav.ItemText>
44
+ </Nav.Item>
36
45
  </Nav>
37
- <SubNav>
38
- <SubNavItem isCurrent>
39
- <SubNavItemText>Subnav 1</SubNavItemText>
40
- </SubNavItem>
41
- ...
42
- </SubNav>
43
46
  <Body>
44
- <Header>
45
- ...
46
- </Header>
47
+ <Header>...</Header>
47
48
  <Content>
48
- <Main>
49
- Lorem ipsum...
50
- </Main>
49
+ <Main>Lorem ipsum...</Main>
51
50
  </Content>
52
51
  </Body>
53
52
  </Chrome>
54
- </ThemeProvider>
53
+ </ThemeProvider>;
55
54
  ```
package/dist/esm/elements/Chrome.js ADDED
@@ -0,0 +1,95 @@
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 { DEFAULT_THEME, getColor, 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) || DEFAULT_THEME;
54
+ const isLightMemoized = useMemo(() => {
55
+ if (hue) {
56
+ const backgroundColor = getColor({
57
+ theme,
58
+ hue
59
+ });
60
+ const LIGHT_COLOR = 'white';
61
+ return readableColor(backgroundColor, LIGHT_COLOR, undefined, false ) === LIGHT_COLOR;
62
+ }
63
+ return false;
64
+ }, [hue, theme]);
65
+ const isLight = hue ? isLightMemoized : undefined;
66
+ const chromeContextValue = useMemo(() => ({
67
+ hue: hue || 'chromeHue',
68
+ isLight
69
+ }), [hue, isLight]);
70
+ const environment = useDocument(theme);
71
+ useEffect(() => {
72
+ if (environment && !isFluid) {
73
+ const htmlElement = environment.querySelector('html');
74
+ if (htmlElement) {
75
+ const defaultHtmlPosition = htmlElement.style.position;
76
+ htmlElement.style.position = 'fixed';
77
+ return () => {
78
+ htmlElement.style.position = defaultHtmlPosition;
79
+ };
80
+ }
81
+ }
82
+ return undefined;
83
+ }, [environment, isFluid]);
84
+ return React__default.createElement(ChromeContext.Provider, {
85
+ value: chromeContextValue
86
+ }, React__default.createElement(StyledChrome, Object.assign({
87
+ ref: ref
88
+ }, props)));
89
+ });
90
+ Chrome.displayName = 'Chrome';
91
+ Chrome.propTypes = {
92
+ hue: PropTypes.string
93
+ };
94
+
95
+ 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 = 'Footer.Item';
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 = 'Header.Item';
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 };