@zendeskgarden/react-chrome 9.0.0-next.8 → 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.
- package/README.md +4 -4
- package/dist/esm/elements/sheet/Sheet.js +1 -1
- package/dist/esm/styled/StyledChrome.js +1 -1
- package/dist/esm/styled/StyledSkipNav.js +1 -1
- package/dist/esm/styled/StyledSkipNavIcon.js +1 -1
- package/dist/esm/styled/body/StyledBody.js +1 -1
- package/dist/esm/styled/body/StyledContent.js +1 -1
- package/dist/esm/styled/body/StyledMain.js +1 -1
- package/dist/esm/styled/footer/StyledFooter.js +1 -1
- package/dist/esm/styled/footer/StyledFooterItem.js +1 -1
- package/dist/esm/styled/header/StyledBaseHeaderItem.js +1 -1
- package/dist/esm/styled/header/StyledHeader.js +1 -1
- package/dist/esm/styled/header/StyledHeaderItem.js +1 -1
- package/dist/esm/styled/header/StyledHeaderItemIcon.js +1 -1
- package/dist/esm/styled/header/StyledHeaderItemText.js +1 -1
- package/dist/esm/styled/header/StyledHeaderItemWrapper.js +1 -1
- package/dist/esm/styled/header/StyledLogoHeaderItem.js +1 -5
- package/dist/esm/styled/nav/StyledBaseNavItem.js +1 -1
- package/dist/esm/styled/nav/StyledBrandmarkNavItem.js +1 -1
- package/dist/esm/styled/nav/StyledLogoNavItem.js +1 -5
- package/dist/esm/styled/nav/StyledNav.js +1 -1
- package/dist/esm/styled/nav/StyledNavButton.js +1 -1
- package/dist/esm/styled/nav/StyledNavItemIcon.js +1 -1
- package/dist/esm/styled/nav/StyledNavItemText.js +1 -1
- package/dist/esm/styled/nav/StyledNavList.js +1 -1
- package/dist/esm/styled/nav/StyledNavListItem.js +1 -1
- package/dist/esm/styled/sheet/StyledSheet.js +1 -1
- package/dist/esm/styled/sheet/StyledSheetBody.js +1 -1
- package/dist/esm/styled/sheet/StyledSheetClose.js +1 -1
- package/dist/esm/styled/sheet/StyledSheetDescription.js +1 -1
- package/dist/esm/styled/sheet/StyledSheetFooter.js +1 -1
- package/dist/esm/styled/sheet/StyledSheetFooterItem.js +1 -1
- package/dist/esm/styled/sheet/StyledSheetHeader.js +1 -1
- package/dist/esm/styled/sheet/StyledSheetTitle.js +1 -1
- package/dist/esm/styled/sheet/StyledSheetWrapper.js +1 -1
- package/dist/esm/types/index.js +1 -1
- package/dist/index.cjs.js +35 -43
- package/dist/typings/types/index.d.ts +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -16,17 +16,17 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
|
|
|
16
16
|
```jsx
|
|
17
17
|
import { ThemeProvider } from '@zendeskgarden/react-theming';
|
|
18
18
|
import { Chrome, Nav, Body, Header, Content, Main } from '@zendeskgarden/react-chrome';
|
|
19
|
-
import
|
|
19
|
+
import SupportIcon from '@zendeskgarden/icons/src/26/relationshape-support.svg';
|
|
20
20
|
import BrandmarkIcon from '@zendeskgarden/svg-icons/src/26/zendesk.svg';
|
|
21
21
|
|
|
22
22
|
<ThemeProvider>
|
|
23
23
|
<Chrome>
|
|
24
24
|
<Nav isExpanded>
|
|
25
|
-
<Nav.Item hasLogo product="
|
|
25
|
+
<Nav.Item hasLogo product="support" title="Zendesk Support">
|
|
26
26
|
<Nav.ItemIcon>
|
|
27
|
-
<
|
|
27
|
+
<SupportIcon />
|
|
28
28
|
</Nav.ItemIcon>
|
|
29
|
-
<NavItemText>Zendesk
|
|
29
|
+
<NavItemText>Zendesk Support</NavItemText>
|
|
30
30
|
</Nav.Item>
|
|
31
31
|
<Nav.List>
|
|
32
32
|
<Nav.Item isCurrent>
|
|
@@ -67,7 +67,7 @@ const SheetComponent = React__default.forwardRef((_ref, ref) => {
|
|
|
67
67
|
const sheetRef = useRef(null);
|
|
68
68
|
const seed = useUIDSeed();
|
|
69
69
|
const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
|
|
70
|
-
const idPrefix = useMemo(() => id || seed(`sheet_${'9.0.0-next.
|
|
70
|
+
const idPrefix = useMemo(() => id || seed(`sheet_${'9.0.0-next.9'}`), [id, seed]);
|
|
71
71
|
const titleId = `${idPrefix}--title`;
|
|
72
72
|
const descriptionId = `${idPrefix}--description`;
|
|
73
73
|
const sheetContext = useMemo(() => ({
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.chrome';
|
|
11
11
|
const StyledChrome = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledChrome",
|
|
16
16
|
componentId: "sc-1uqm6u6-0"
|
|
@@ -34,7 +34,7 @@ const sizeStyles = props => {
|
|
|
34
34
|
};
|
|
35
35
|
const StyledSkipNav = styled.a.attrs({
|
|
36
36
|
'data-garden-id': COMPONENT_ID,
|
|
37
|
-
'data-garden-version': '9.0.0-next.
|
|
37
|
+
'data-garden-version': '9.0.0-next.9'
|
|
38
38
|
}).withConfig({
|
|
39
39
|
displayName: "StyledSkipNav",
|
|
40
40
|
componentId: "sc-1tsro34-0"
|
|
@@ -16,7 +16,7 @@ const sizeStyles = theme => {
|
|
|
16
16
|
};
|
|
17
17
|
const StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
|
|
18
18
|
'data-garden-id': COMPONENT_ID,
|
|
19
|
-
'data-garden-version': '9.0.0-next.
|
|
19
|
+
'data-garden-version': '9.0.0-next.9'
|
|
20
20
|
}).withConfig({
|
|
21
21
|
displayName: "StyledSkipNavIcon",
|
|
22
22
|
componentId: "sc-1ika5z4-0"
|
|
@@ -10,7 +10,7 @@ import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgard
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.body';
|
|
11
11
|
const StyledBody = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledBody",
|
|
16
16
|
componentId: "sc-c7h9kv-0"
|
|
@@ -13,7 +13,7 @@ import { getFooterHeight } from '../footer/StyledFooter.js';
|
|
|
13
13
|
const COMPONENT_ID = 'chrome.content';
|
|
14
14
|
const StyledContent = styled.div.attrs({
|
|
15
15
|
'data-garden-id': COMPONENT_ID,
|
|
16
|
-
'data-garden-version': '9.0.0-next.
|
|
16
|
+
'data-garden-version': '9.0.0-next.9'
|
|
17
17
|
}).withConfig({
|
|
18
18
|
displayName: "StyledContent",
|
|
19
19
|
componentId: "sc-qcuzxn-0"
|
|
@@ -10,7 +10,7 @@ import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgard
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.main';
|
|
11
11
|
const StyledMain = styled.main.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledMain",
|
|
16
16
|
componentId: "sc-t61cre-0"
|
|
@@ -13,7 +13,7 @@ const getFooterHeight = props => {
|
|
|
13
13
|
};
|
|
14
14
|
const StyledFooter = styled.footer.attrs({
|
|
15
15
|
'data-garden-id': COMPONENT_ID,
|
|
16
|
-
'data-garden-version': '9.0.0-next.
|
|
16
|
+
'data-garden-version': '9.0.0-next.9'
|
|
17
17
|
}).withConfig({
|
|
18
18
|
displayName: "StyledFooter",
|
|
19
19
|
componentId: "sc-v7lib2-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.footer_item';
|
|
11
11
|
const StyledFooterItem = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledFooterItem",
|
|
16
16
|
componentId: "sc-1cktm85-0"
|
|
@@ -15,7 +15,7 @@ const sizeStyles = props => {
|
|
|
15
15
|
};
|
|
16
16
|
const StyledBaseHeaderItem = styled.button.attrs({
|
|
17
17
|
'data-garden-id': COMPONENT_ID,
|
|
18
|
-
'data-garden-version': '9.0.0-next.
|
|
18
|
+
'data-garden-version': '9.0.0-next.9'
|
|
19
19
|
}).withConfig({
|
|
20
20
|
displayName: "StyledBaseHeaderItem",
|
|
21
21
|
componentId: "sc-1qua7h6-0"
|
|
@@ -15,7 +15,7 @@ const getHeaderHeight = props => {
|
|
|
15
15
|
};
|
|
16
16
|
const StyledHeader = styled.header.attrs({
|
|
17
17
|
'data-garden-id': COMPONENT_ID,
|
|
18
|
-
'data-garden-version': '9.0.0-next.
|
|
18
|
+
'data-garden-version': '9.0.0-next.9'
|
|
19
19
|
}).withConfig({
|
|
20
20
|
displayName: "StyledHeader",
|
|
21
21
|
componentId: "sc-1cexpz-0"
|
|
@@ -18,7 +18,7 @@ const imgStyles = props => {
|
|
|
18
18
|
};
|
|
19
19
|
const StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
|
|
20
20
|
'data-garden-id': COMPONENT_ID,
|
|
21
|
-
'data-garden-version': '9.0.0-next.
|
|
21
|
+
'data-garden-version': '9.0.0-next.9'
|
|
22
22
|
}).withConfig({
|
|
23
23
|
displayName: "StyledHeaderItem",
|
|
24
24
|
componentId: "sc-14sft6n-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.header_item_icon';
|
|
11
11
|
const StyledHeaderItemIcon = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledHeaderItemIcon",
|
|
16
16
|
componentId: "sc-1jhhp6z-0"
|
|
@@ -11,7 +11,7 @@ const COMPONENT_ID = 'chrome.header_item_text';
|
|
|
11
11
|
const clippedStyling = css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
|
|
12
12
|
const StyledHeaderItemText = styled.span.attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.9'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledHeaderItemText",
|
|
17
17
|
componentId: "sc-goz7la-0"
|
|
@@ -11,7 +11,7 @@ import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
|
|
|
11
11
|
const COMPONENT_ID = 'chrome.header_item_wrapper';
|
|
12
12
|
const StyledHeaderItemWrapper = styled(StyledBaseHeaderItem).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.9',
|
|
15
15
|
as: 'div'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledHeaderItemWrapper",
|
|
@@ -16,14 +16,10 @@ const retrieveProductColor = props => {
|
|
|
16
16
|
switch (props.product) {
|
|
17
17
|
case 'chat':
|
|
18
18
|
return PALETTE.product.chat;
|
|
19
|
-
case 'connect':
|
|
20
|
-
return PALETTE.product.connect;
|
|
21
19
|
case 'explore':
|
|
22
20
|
return PALETTE.product.explore;
|
|
23
21
|
case 'guide':
|
|
24
22
|
return PALETTE.product.guide;
|
|
25
|
-
case 'message':
|
|
26
|
-
return PALETTE.product.message;
|
|
27
23
|
case 'support':
|
|
28
24
|
return PALETTE.product.support;
|
|
29
25
|
case 'talk':
|
|
@@ -34,7 +30,7 @@ const retrieveProductColor = props => {
|
|
|
34
30
|
};
|
|
35
31
|
const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
|
|
36
32
|
'data-garden-id': COMPONENT_ID,
|
|
37
|
-
'data-garden-version': '9.0.0-next.
|
|
33
|
+
'data-garden-version': '9.0.0-next.9',
|
|
38
34
|
as: 'div'
|
|
39
35
|
}).withConfig({
|
|
40
36
|
displayName: "StyledLogoHeaderItem",
|
|
@@ -20,7 +20,7 @@ const sizeStyles = props => {
|
|
|
20
20
|
};
|
|
21
21
|
const StyledBaseNavItem = styled.div.attrs({
|
|
22
22
|
'data-garden-id': COMPONENT_ID,
|
|
23
|
-
'data-garden-version': '9.0.0-next.
|
|
23
|
+
'data-garden-version': '9.0.0-next.9'
|
|
24
24
|
}).withConfig({
|
|
25
25
|
displayName: "StyledBaseNavItem",
|
|
26
26
|
componentId: "sc-zvo43f-0"
|
|
@@ -11,7 +11,7 @@ import { StyledBaseNavItem } from './StyledBaseNavItem.js';
|
|
|
11
11
|
const COMPONENT_ID = 'chrome.brandmark_nav_list_item';
|
|
12
12
|
const StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.9'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledBrandmarkNavItem",
|
|
17
17
|
componentId: "sc-8kynd4-0"
|
|
@@ -13,14 +13,10 @@ const retrieveProductColor = product => {
|
|
|
13
13
|
switch (product) {
|
|
14
14
|
case 'chat':
|
|
15
15
|
return PALETTE.product.chat;
|
|
16
|
-
case 'connect':
|
|
17
|
-
return PALETTE.product.connect;
|
|
18
16
|
case 'explore':
|
|
19
17
|
return PALETTE.product.explore;
|
|
20
18
|
case 'guide':
|
|
21
19
|
return PALETTE.product.guide;
|
|
22
|
-
case 'message':
|
|
23
|
-
return PALETTE.product.message;
|
|
24
20
|
case 'support':
|
|
25
21
|
return PALETTE.product.support;
|
|
26
22
|
case 'talk':
|
|
@@ -36,7 +32,7 @@ const colorStyles = props => {
|
|
|
36
32
|
};
|
|
37
33
|
const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
|
|
38
34
|
'data-garden-id': COMPONENT_ID,
|
|
39
|
-
'data-garden-version': '9.0.0-next.
|
|
35
|
+
'data-garden-version': '9.0.0-next.9'
|
|
40
36
|
}).withConfig({
|
|
41
37
|
displayName: "StyledLogoNavItem",
|
|
42
38
|
componentId: "sc-saaydx-0"
|
|
@@ -22,7 +22,7 @@ const getExpandedNavWidth = () => {
|
|
|
22
22
|
};
|
|
23
23
|
const StyledNav = styled.nav.attrs({
|
|
24
24
|
'data-garden-id': COMPONENT_ID,
|
|
25
|
-
'data-garden-version': '9.0.0-next.
|
|
25
|
+
'data-garden-version': '9.0.0-next.9'
|
|
26
26
|
}).withConfig({
|
|
27
27
|
displayName: "StyledNav",
|
|
28
28
|
componentId: "sc-6j462r-0"
|
|
@@ -48,7 +48,7 @@ const colorStyles = props => {
|
|
|
48
48
|
};
|
|
49
49
|
const StyledNavButton = styled(StyledBaseNavItem).attrs({
|
|
50
50
|
'data-garden-id': COMPONENT_ID,
|
|
51
|
-
'data-garden-version': '9.0.0-next.
|
|
51
|
+
'data-garden-version': '9.0.0-next.9',
|
|
52
52
|
as: 'button'
|
|
53
53
|
}).withConfig({
|
|
54
54
|
displayName: "StyledNavButton",
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.nav_item_icon';
|
|
11
11
|
const StyledNavItemIcon = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledNavItemIcon",
|
|
16
16
|
componentId: "sc-7w9rpt-0"
|
|
@@ -13,7 +13,7 @@ import { getNavWidth } from './StyledNav.js';
|
|
|
13
13
|
const COMPONENT_ID = 'chrome.nav_item_text';
|
|
14
14
|
const StyledNavItemText = styled.span.attrs({
|
|
15
15
|
'data-garden-id': COMPONENT_ID,
|
|
16
|
-
'data-garden-version': '9.0.0-next.
|
|
16
|
+
'data-garden-version': '9.0.0-next.9'
|
|
17
17
|
}).withConfig({
|
|
18
18
|
displayName: "StyledNavItemText",
|
|
19
19
|
componentId: "sc-13m84xl-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.nav_list';
|
|
11
11
|
const StyledNavList = styled.ul.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledNavList",
|
|
16
16
|
componentId: "sc-1s0nkfb-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.nav_list_item';
|
|
11
11
|
const StyledNavListItem = styled.li.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledNavListItem",
|
|
16
16
|
componentId: "sc-18cj2v7-0"
|
|
@@ -29,7 +29,7 @@ const borderStyle = _ref => {
|
|
|
29
29
|
};
|
|
30
30
|
const StyledSheet = styled.aside.attrs({
|
|
31
31
|
'data-garden-id': COMPONENT_ID,
|
|
32
|
-
'data-garden-version': '9.0.0-next.
|
|
32
|
+
'data-garden-version': '9.0.0-next.9'
|
|
33
33
|
}).withConfig({
|
|
34
34
|
displayName: "StyledSheet",
|
|
35
35
|
componentId: "sc-dx8ijk-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.sheet_body';
|
|
11
11
|
const StyledSheetBody = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledSheetBody",
|
|
16
16
|
componentId: "sc-bt4eoj-0"
|
|
@@ -22,7 +22,7 @@ const colorStyles = props => {
|
|
|
22
22
|
};
|
|
23
23
|
const StyledSheetClose = styled.button.attrs({
|
|
24
24
|
'data-garden-id': COMPONENT_ID,
|
|
25
|
-
'data-garden-version': '9.0.0-next.
|
|
25
|
+
'data-garden-version': '9.0.0-next.9'
|
|
26
26
|
}).withConfig({
|
|
27
27
|
displayName: "StyledSheetClose",
|
|
28
28
|
componentId: "sc-1ab02oq-0"
|
|
@@ -10,7 +10,7 @@ import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } fro
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.sheet_description';
|
|
11
11
|
const StyledSheetDescription = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledSheetDescription",
|
|
16
16
|
componentId: "sc-1puglb6-0"
|
|
@@ -10,7 +10,7 @@ import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgard
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.sheet_footer';
|
|
11
11
|
const StyledSheetFooter = styled.footer.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledSheetFooter",
|
|
16
16
|
componentId: "sc-2cktos-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.sheet_footer_item';
|
|
11
11
|
const StyledSheetFooterItem = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledSheetFooterItem",
|
|
16
16
|
componentId: "sc-r9ixh-0"
|
|
@@ -11,7 +11,7 @@ import { BASE_MULTIPLIERS } from './StyledSheetClose.js';
|
|
|
11
11
|
const COMPONENT_ID = 'chrome.sheet_header';
|
|
12
12
|
const StyledSheetHeader = styled.header.attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.9'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledSheetHeader",
|
|
17
17
|
componentId: "sc-o2ry8i-0"
|
|
@@ -10,7 +10,7 @@ import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } fro
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.sheet_title';
|
|
11
11
|
const StyledSheetTitle = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledSheetTitle",
|
|
16
16
|
componentId: "sc-1gogk75-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.sheet_wrapper';
|
|
11
11
|
const StyledSheetWrapper = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledSheetWrapper",
|
|
16
16
|
componentId: "sc-f6x9zb-0"
|
package/dist/esm/types/index.js
CHANGED
|
@@ -5,6 +5,6 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
const PLACEMENT = ['end', 'start'];
|
|
8
|
-
const PRODUCTS = ['chat', '
|
|
8
|
+
const PRODUCTS = ['chat', 'explore', 'guide', 'support', 'talk'];
|
|
9
9
|
|
|
10
10
|
export { PLACEMENT, PRODUCTS };
|
package/dist/index.cjs.js
CHANGED
|
@@ -41,12 +41,12 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
|
41
41
|
var activeElement__default = /*#__PURE__*/_interopDefault(activeElement);
|
|
42
42
|
|
|
43
43
|
const PLACEMENT = ['end', 'start'];
|
|
44
|
-
const PRODUCTS = ['chat', '
|
|
44
|
+
const PRODUCTS = ['chat', 'explore', 'guide', 'support', 'talk'];
|
|
45
45
|
|
|
46
46
|
const COMPONENT_ID$w = 'chrome.chrome';
|
|
47
47
|
const StyledChrome = styled__default.default.div.attrs({
|
|
48
48
|
'data-garden-id': COMPONENT_ID$w,
|
|
49
|
-
'data-garden-version': '9.0.0-next.
|
|
49
|
+
'data-garden-version': '9.0.0-next.9'
|
|
50
50
|
}).withConfig({
|
|
51
51
|
displayName: "StyledChrome",
|
|
52
52
|
componentId: "sc-1uqm6u6-0"
|
|
@@ -58,7 +58,7 @@ StyledChrome.defaultProps = {
|
|
|
58
58
|
const COMPONENT_ID$v = 'chrome.header_item_icon';
|
|
59
59
|
const StyledHeaderItemIcon = styled__default.default.div.attrs({
|
|
60
60
|
'data-garden-id': COMPONENT_ID$v,
|
|
61
|
-
'data-garden-version': '9.0.0-next.
|
|
61
|
+
'data-garden-version': '9.0.0-next.9'
|
|
62
62
|
}).withConfig({
|
|
63
63
|
displayName: "StyledHeaderItemIcon",
|
|
64
64
|
componentId: "sc-1jhhp6z-0"
|
|
@@ -75,7 +75,7 @@ const sizeStyles$3 = props => {
|
|
|
75
75
|
};
|
|
76
76
|
const StyledBaseHeaderItem = styled__default.default.button.attrs({
|
|
77
77
|
'data-garden-id': COMPONENT_ID$u,
|
|
78
|
-
'data-garden-version': '9.0.0-next.
|
|
78
|
+
'data-garden-version': '9.0.0-next.9'
|
|
79
79
|
}).withConfig({
|
|
80
80
|
displayName: "StyledBaseHeaderItem",
|
|
81
81
|
componentId: "sc-1qua7h6-0"
|
|
@@ -96,7 +96,7 @@ const COMPONENT_ID$t = 'chrome.header_item_text';
|
|
|
96
96
|
const clippedStyling = styled.css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
|
|
97
97
|
const StyledHeaderItemText = styled__default.default.span.attrs({
|
|
98
98
|
'data-garden-id': COMPONENT_ID$t,
|
|
99
|
-
'data-garden-version': '9.0.0-next.
|
|
99
|
+
'data-garden-version': '9.0.0-next.9'
|
|
100
100
|
}).withConfig({
|
|
101
101
|
displayName: "StyledHeaderItemText",
|
|
102
102
|
componentId: "sc-goz7la-0"
|
|
@@ -120,7 +120,7 @@ const getExpandedNavWidth = () => {
|
|
|
120
120
|
};
|
|
121
121
|
const StyledNav = styled__default.default.nav.attrs({
|
|
122
122
|
'data-garden-id': COMPONENT_ID$s,
|
|
123
|
-
'data-garden-version': '9.0.0-next.
|
|
123
|
+
'data-garden-version': '9.0.0-next.9'
|
|
124
124
|
}).withConfig({
|
|
125
125
|
displayName: "StyledNav",
|
|
126
126
|
componentId: "sc-6j462r-0"
|
|
@@ -134,14 +134,10 @@ const retrieveProductColor$1 = props => {
|
|
|
134
134
|
switch (props.product) {
|
|
135
135
|
case 'chat':
|
|
136
136
|
return reactTheming.PALETTE.product.chat;
|
|
137
|
-
case 'connect':
|
|
138
|
-
return reactTheming.PALETTE.product.connect;
|
|
139
137
|
case 'explore':
|
|
140
138
|
return reactTheming.PALETTE.product.explore;
|
|
141
139
|
case 'guide':
|
|
142
140
|
return reactTheming.PALETTE.product.guide;
|
|
143
|
-
case 'message':
|
|
144
|
-
return reactTheming.PALETTE.product.message;
|
|
145
141
|
case 'support':
|
|
146
142
|
return reactTheming.PALETTE.product.support;
|
|
147
143
|
case 'talk':
|
|
@@ -152,7 +148,7 @@ const retrieveProductColor$1 = props => {
|
|
|
152
148
|
};
|
|
153
149
|
const StyledLogoHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
|
|
154
150
|
'data-garden-id': COMPONENT_ID$r,
|
|
155
|
-
'data-garden-version': '9.0.0-next.
|
|
151
|
+
'data-garden-version': '9.0.0-next.9',
|
|
156
152
|
as: 'div'
|
|
157
153
|
}).withConfig({
|
|
158
154
|
displayName: "StyledLogoHeaderItem",
|
|
@@ -173,7 +169,7 @@ const sizeStyles$2 = props => {
|
|
|
173
169
|
};
|
|
174
170
|
const StyledBaseNavItem = styled__default.default.div.attrs({
|
|
175
171
|
'data-garden-id': COMPONENT_ID$q,
|
|
176
|
-
'data-garden-version': '9.0.0-next.
|
|
172
|
+
'data-garden-version': '9.0.0-next.9'
|
|
177
173
|
}).withConfig({
|
|
178
174
|
displayName: "StyledBaseNavItem",
|
|
179
175
|
componentId: "sc-zvo43f-0"
|
|
@@ -188,7 +184,7 @@ const getHeaderHeight = props => {
|
|
|
188
184
|
};
|
|
189
185
|
const StyledHeader = styled__default.default.header.attrs({
|
|
190
186
|
'data-garden-id': COMPONENT_ID$p,
|
|
191
|
-
'data-garden-version': '9.0.0-next.
|
|
187
|
+
'data-garden-version': '9.0.0-next.9'
|
|
192
188
|
}).withConfig({
|
|
193
189
|
displayName: "StyledHeader",
|
|
194
190
|
componentId: "sc-1cexpz-0"
|
|
@@ -226,7 +222,7 @@ const sizeStyles$1 = props => {
|
|
|
226
222
|
};
|
|
227
223
|
const StyledSkipNav = styled__default.default.a.attrs({
|
|
228
224
|
'data-garden-id': COMPONENT_ID$o,
|
|
229
|
-
'data-garden-version': '9.0.0-next.
|
|
225
|
+
'data-garden-version': '9.0.0-next.9'
|
|
230
226
|
}).withConfig({
|
|
231
227
|
displayName: "StyledSkipNav",
|
|
232
228
|
componentId: "sc-1tsro34-0"
|
|
@@ -259,7 +255,7 @@ const sizeStyles = theme => {
|
|
|
259
255
|
};
|
|
260
256
|
const StyledSkipNavIcon = styled__default.default(SvgLinkStroke).attrs({
|
|
261
257
|
'data-garden-id': COMPONENT_ID$n,
|
|
262
|
-
'data-garden-version': '9.0.0-next.
|
|
258
|
+
'data-garden-version': '9.0.0-next.9'
|
|
263
259
|
}).withConfig({
|
|
264
260
|
displayName: "StyledSkipNavIcon",
|
|
265
261
|
componentId: "sc-1ika5z4-0"
|
|
@@ -271,7 +267,7 @@ StyledSkipNavIcon.defaultProps = {
|
|
|
271
267
|
const COMPONENT_ID$m = 'chrome.body';
|
|
272
268
|
const StyledBody = styled__default.default.div.attrs({
|
|
273
269
|
'data-garden-id': COMPONENT_ID$m,
|
|
274
|
-
'data-garden-version': '9.0.0-next.
|
|
270
|
+
'data-garden-version': '9.0.0-next.9'
|
|
275
271
|
}).withConfig({
|
|
276
272
|
displayName: "StyledBody",
|
|
277
273
|
componentId: "sc-c7h9kv-0"
|
|
@@ -286,7 +282,7 @@ const getFooterHeight = props => {
|
|
|
286
282
|
};
|
|
287
283
|
const StyledFooter = styled__default.default.footer.attrs({
|
|
288
284
|
'data-garden-id': COMPONENT_ID$l,
|
|
289
|
-
'data-garden-version': '9.0.0-next.
|
|
285
|
+
'data-garden-version': '9.0.0-next.9'
|
|
290
286
|
}).withConfig({
|
|
291
287
|
displayName: "StyledFooter",
|
|
292
288
|
componentId: "sc-v7lib2-0"
|
|
@@ -298,7 +294,7 @@ StyledFooter.defaultProps = {
|
|
|
298
294
|
const COMPONENT_ID$k = 'chrome.content';
|
|
299
295
|
const StyledContent = styled__default.default.div.attrs({
|
|
300
296
|
'data-garden-id': COMPONENT_ID$k,
|
|
301
|
-
'data-garden-version': '9.0.0-next.
|
|
297
|
+
'data-garden-version': '9.0.0-next.9'
|
|
302
298
|
}).withConfig({
|
|
303
299
|
displayName: "StyledContent",
|
|
304
300
|
componentId: "sc-qcuzxn-0"
|
|
@@ -310,7 +306,7 @@ StyledContent.defaultProps = {
|
|
|
310
306
|
const COMPONENT_ID$j = 'chrome.main';
|
|
311
307
|
const StyledMain = styled__default.default.main.attrs({
|
|
312
308
|
'data-garden-id': COMPONENT_ID$j,
|
|
313
|
-
'data-garden-version': '9.0.0-next.
|
|
309
|
+
'data-garden-version': '9.0.0-next.9'
|
|
314
310
|
}).withConfig({
|
|
315
311
|
displayName: "StyledMain",
|
|
316
312
|
componentId: "sc-t61cre-0"
|
|
@@ -322,7 +318,7 @@ StyledMain.defaultProps = {
|
|
|
322
318
|
const COMPONENT_ID$i = 'chrome.footer_item';
|
|
323
319
|
const StyledFooterItem = styled__default.default.div.attrs({
|
|
324
320
|
'data-garden-id': COMPONENT_ID$i,
|
|
325
|
-
'data-garden-version': '9.0.0-next.
|
|
321
|
+
'data-garden-version': '9.0.0-next.9'
|
|
326
322
|
}).withConfig({
|
|
327
323
|
displayName: "StyledFooterItem",
|
|
328
324
|
componentId: "sc-1cktm85-0"
|
|
@@ -338,7 +334,7 @@ const imgStyles = props => {
|
|
|
338
334
|
};
|
|
339
335
|
const StyledHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
|
|
340
336
|
'data-garden-id': COMPONENT_ID$h,
|
|
341
|
-
'data-garden-version': '9.0.0-next.
|
|
337
|
+
'data-garden-version': '9.0.0-next.9'
|
|
342
338
|
}).withConfig({
|
|
343
339
|
displayName: "StyledHeaderItem",
|
|
344
340
|
componentId: "sc-14sft6n-0"
|
|
@@ -357,7 +353,7 @@ StyledHeaderItem.defaultProps = {
|
|
|
357
353
|
const COMPONENT_ID$g = 'chrome.header_item_wrapper';
|
|
358
354
|
const StyledHeaderItemWrapper = styled__default.default(StyledBaseHeaderItem).attrs({
|
|
359
355
|
'data-garden-id': COMPONENT_ID$g,
|
|
360
|
-
'data-garden-version': '9.0.0-next.
|
|
356
|
+
'data-garden-version': '9.0.0-next.9',
|
|
361
357
|
as: 'div'
|
|
362
358
|
}).withConfig({
|
|
363
359
|
displayName: "StyledHeaderItemWrapper",
|
|
@@ -370,7 +366,7 @@ StyledHeaderItemWrapper.defaultProps = {
|
|
|
370
366
|
const COMPONENT_ID$f = 'chrome.nav_list';
|
|
371
367
|
const StyledNavList = styled__default.default.ul.attrs({
|
|
372
368
|
'data-garden-id': COMPONENT_ID$f,
|
|
373
|
-
'data-garden-version': '9.0.0-next.
|
|
369
|
+
'data-garden-version': '9.0.0-next.9'
|
|
374
370
|
}).withConfig({
|
|
375
371
|
displayName: "StyledNavList",
|
|
376
372
|
componentId: "sc-1s0nkfb-0"
|
|
@@ -382,7 +378,7 @@ StyledNavList.defaultProps = {
|
|
|
382
378
|
const COMPONENT_ID$e = 'chrome.nav_list_item';
|
|
383
379
|
const StyledNavListItem = styled__default.default.li.attrs({
|
|
384
380
|
'data-garden-id': COMPONENT_ID$e,
|
|
385
|
-
'data-garden-version': '9.0.0-next.
|
|
381
|
+
'data-garden-version': '9.0.0-next.9'
|
|
386
382
|
}).withConfig({
|
|
387
383
|
displayName: "StyledNavListItem",
|
|
388
384
|
componentId: "sc-18cj2v7-0"
|
|
@@ -396,14 +392,10 @@ const retrieveProductColor = product => {
|
|
|
396
392
|
switch (product) {
|
|
397
393
|
case 'chat':
|
|
398
394
|
return reactTheming.PALETTE.product.chat;
|
|
399
|
-
case 'connect':
|
|
400
|
-
return reactTheming.PALETTE.product.connect;
|
|
401
395
|
case 'explore':
|
|
402
396
|
return reactTheming.PALETTE.product.explore;
|
|
403
397
|
case 'guide':
|
|
404
398
|
return reactTheming.PALETTE.product.guide;
|
|
405
|
-
case 'message':
|
|
406
|
-
return reactTheming.PALETTE.product.message;
|
|
407
399
|
case 'support':
|
|
408
400
|
return reactTheming.PALETTE.product.support;
|
|
409
401
|
case 'talk':
|
|
@@ -419,7 +411,7 @@ const colorStyles$2 = props => {
|
|
|
419
411
|
};
|
|
420
412
|
const StyledLogoNavItem = styled__default.default(StyledBaseNavItem).attrs({
|
|
421
413
|
'data-garden-id': COMPONENT_ID$d,
|
|
422
|
-
'data-garden-version': '9.0.0-next.
|
|
414
|
+
'data-garden-version': '9.0.0-next.9'
|
|
423
415
|
}).withConfig({
|
|
424
416
|
displayName: "StyledLogoNavItem",
|
|
425
417
|
componentId: "sc-saaydx-0"
|
|
@@ -431,7 +423,7 @@ StyledLogoNavItem.defaultProps = {
|
|
|
431
423
|
const COMPONENT_ID$c = 'chrome.brandmark_nav_list_item';
|
|
432
424
|
const StyledBrandmarkNavItem = styled__default.default(StyledBaseNavItem).attrs({
|
|
433
425
|
'data-garden-id': COMPONENT_ID$c,
|
|
434
|
-
'data-garden-version': '9.0.0-next.
|
|
426
|
+
'data-garden-version': '9.0.0-next.9'
|
|
435
427
|
}).withConfig({
|
|
436
428
|
displayName: "StyledBrandmarkNavItem",
|
|
437
429
|
componentId: "sc-8kynd4-0"
|
|
@@ -443,7 +435,7 @@ StyledBrandmarkNavItem.defaultProps = {
|
|
|
443
435
|
const COMPONENT_ID$b = 'chrome.nav_item_icon';
|
|
444
436
|
const StyledNavItemIcon = styled__default.default.div.attrs({
|
|
445
437
|
'data-garden-id': COMPONENT_ID$b,
|
|
446
|
-
'data-garden-version': '9.0.0-next.
|
|
438
|
+
'data-garden-version': '9.0.0-next.9'
|
|
447
439
|
}).withConfig({
|
|
448
440
|
displayName: "StyledNavItemIcon",
|
|
449
441
|
componentId: "sc-7w9rpt-0"
|
|
@@ -489,7 +481,7 @@ const colorStyles$1 = props => {
|
|
|
489
481
|
};
|
|
490
482
|
const StyledNavButton = styled__default.default(StyledBaseNavItem).attrs({
|
|
491
483
|
'data-garden-id': COMPONENT_ID$a,
|
|
492
|
-
'data-garden-version': '9.0.0-next.
|
|
484
|
+
'data-garden-version': '9.0.0-next.9',
|
|
493
485
|
as: 'button'
|
|
494
486
|
}).withConfig({
|
|
495
487
|
displayName: "StyledNavButton",
|
|
@@ -506,7 +498,7 @@ StyledNavButton.defaultProps = {
|
|
|
506
498
|
const COMPONENT_ID$9 = 'chrome.nav_item_text';
|
|
507
499
|
const StyledNavItemText = styled__default.default.span.attrs({
|
|
508
500
|
'data-garden-id': COMPONENT_ID$9,
|
|
509
|
-
'data-garden-version': '9.0.0-next.
|
|
501
|
+
'data-garden-version': '9.0.0-next.9'
|
|
510
502
|
}).withConfig({
|
|
511
503
|
displayName: "StyledNavItemText",
|
|
512
504
|
componentId: "sc-13m84xl-0"
|
|
@@ -546,7 +538,7 @@ const borderStyle = _ref => {
|
|
|
546
538
|
};
|
|
547
539
|
const StyledSheet = styled__default.default.aside.attrs({
|
|
548
540
|
'data-garden-id': COMPONENT_ID$8,
|
|
549
|
-
'data-garden-version': '9.0.0-next.
|
|
541
|
+
'data-garden-version': '9.0.0-next.9'
|
|
550
542
|
}).withConfig({
|
|
551
543
|
displayName: "StyledSheet",
|
|
552
544
|
componentId: "sc-dx8ijk-0"
|
|
@@ -558,7 +550,7 @@ StyledSheet.defaultProps = {
|
|
|
558
550
|
const COMPONENT_ID$7 = 'chrome.sheet_wrapper';
|
|
559
551
|
const StyledSheetWrapper = styled__default.default.div.attrs({
|
|
560
552
|
'data-garden-id': COMPONENT_ID$7,
|
|
561
|
-
'data-garden-version': '9.0.0-next.
|
|
553
|
+
'data-garden-version': '9.0.0-next.9'
|
|
562
554
|
}).withConfig({
|
|
563
555
|
displayName: "StyledSheetWrapper",
|
|
564
556
|
componentId: "sc-f6x9zb-0"
|
|
@@ -585,7 +577,7 @@ StyledSheetWrapper.defaultProps = {
|
|
|
585
577
|
const COMPONENT_ID$6 = 'chrome.sheet_title';
|
|
586
578
|
const StyledSheetTitle = styled__default.default.div.attrs({
|
|
587
579
|
'data-garden-id': COMPONENT_ID$6,
|
|
588
|
-
'data-garden-version': '9.0.0-next.
|
|
580
|
+
'data-garden-version': '9.0.0-next.9'
|
|
589
581
|
}).withConfig({
|
|
590
582
|
displayName: "StyledSheetTitle",
|
|
591
583
|
componentId: "sc-1gogk75-0"
|
|
@@ -597,7 +589,7 @@ StyledSheetTitle.defaultProps = {
|
|
|
597
589
|
const COMPONENT_ID$5 = 'chrome.sheet_description';
|
|
598
590
|
const StyledSheetDescription = styled__default.default.div.attrs({
|
|
599
591
|
'data-garden-id': COMPONENT_ID$5,
|
|
600
|
-
'data-garden-version': '9.0.0-next.
|
|
592
|
+
'data-garden-version': '9.0.0-next.9'
|
|
601
593
|
}).withConfig({
|
|
602
594
|
displayName: "StyledSheetDescription",
|
|
603
595
|
componentId: "sc-1puglb6-0"
|
|
@@ -609,7 +601,7 @@ StyledSheetDescription.defaultProps = {
|
|
|
609
601
|
const COMPONENT_ID$4 = 'chrome.sheet_body';
|
|
610
602
|
const StyledSheetBody = styled__default.default.div.attrs({
|
|
611
603
|
'data-garden-id': COMPONENT_ID$4,
|
|
612
|
-
'data-garden-version': '9.0.0-next.
|
|
604
|
+
'data-garden-version': '9.0.0-next.9'
|
|
613
605
|
}).withConfig({
|
|
614
606
|
displayName: "StyledSheetBody",
|
|
615
607
|
componentId: "sc-bt4eoj-0"
|
|
@@ -633,7 +625,7 @@ const colorStyles = props => {
|
|
|
633
625
|
};
|
|
634
626
|
const StyledSheetClose = styled__default.default.button.attrs({
|
|
635
627
|
'data-garden-id': COMPONENT_ID$3,
|
|
636
|
-
'data-garden-version': '9.0.0-next.
|
|
628
|
+
'data-garden-version': '9.0.0-next.9'
|
|
637
629
|
}).withConfig({
|
|
638
630
|
displayName: "StyledSheetClose",
|
|
639
631
|
componentId: "sc-1ab02oq-0"
|
|
@@ -645,7 +637,7 @@ StyledSheetClose.defaultProps = {
|
|
|
645
637
|
const COMPONENT_ID$2 = 'chrome.sheet_footer';
|
|
646
638
|
const StyledSheetFooter = styled__default.default.footer.attrs({
|
|
647
639
|
'data-garden-id': COMPONENT_ID$2,
|
|
648
|
-
'data-garden-version': '9.0.0-next.
|
|
640
|
+
'data-garden-version': '9.0.0-next.9'
|
|
649
641
|
}).withConfig({
|
|
650
642
|
displayName: "StyledSheetFooter",
|
|
651
643
|
componentId: "sc-2cktos-0"
|
|
@@ -657,7 +649,7 @@ StyledSheetFooter.defaultProps = {
|
|
|
657
649
|
const COMPONENT_ID$1 = 'chrome.sheet_footer_item';
|
|
658
650
|
const StyledSheetFooterItem = styled__default.default.div.attrs({
|
|
659
651
|
'data-garden-id': COMPONENT_ID$1,
|
|
660
|
-
'data-garden-version': '9.0.0-next.
|
|
652
|
+
'data-garden-version': '9.0.0-next.9'
|
|
661
653
|
}).withConfig({
|
|
662
654
|
displayName: "StyledSheetFooterItem",
|
|
663
655
|
componentId: "sc-r9ixh-0"
|
|
@@ -669,7 +661,7 @@ StyledSheetFooterItem.defaultProps = {
|
|
|
669
661
|
const COMPONENT_ID = 'chrome.sheet_header';
|
|
670
662
|
const StyledSheetHeader = styled__default.default.header.attrs({
|
|
671
663
|
'data-garden-id': COMPONENT_ID,
|
|
672
|
-
'data-garden-version': '9.0.0-next.
|
|
664
|
+
'data-garden-version': '9.0.0-next.9'
|
|
673
665
|
}).withConfig({
|
|
674
666
|
displayName: "StyledSheetHeader",
|
|
675
667
|
componentId: "sc-o2ry8i-0"
|
|
@@ -1181,7 +1173,7 @@ const SheetComponent = React__namespace.default.forwardRef((_ref, ref) => {
|
|
|
1181
1173
|
const sheetRef = React.useRef(null);
|
|
1182
1174
|
const seed = reactUid.useUIDSeed();
|
|
1183
1175
|
const [isCloseButtonPresent, setIsCloseButtonPresent] = React.useState(false);
|
|
1184
|
-
const idPrefix = React.useMemo(() => id || seed(`sheet_${'9.0.0-next.
|
|
1176
|
+
const idPrefix = React.useMemo(() => id || seed(`sheet_${'9.0.0-next.9'}`), [id, seed]);
|
|
1185
1177
|
const titleId = `${idPrefix}--title`;
|
|
1186
1178
|
const descriptionId = `${idPrefix}--description`;
|
|
1187
1179
|
const sheetContext = React.useMemo(() => ({
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react';
|
|
8
8
|
export declare const PLACEMENT: readonly ["end", "start"];
|
|
9
|
-
export declare const PRODUCTS: readonly ["chat", "
|
|
9
|
+
export declare const PRODUCTS: readonly ["chat", "explore", "guide", "support", "talk"];
|
|
10
10
|
export type Product = (typeof PRODUCTS)[number];
|
|
11
11
|
export interface IChromeProps extends HTMLAttributes<HTMLDivElement> {
|
|
12
12
|
/** Applies a custom hue to the chrome navigation */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-chrome",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.9",
|
|
4
4
|
"description": "Components relating to Chrome within the Garden Design System.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"styled-components": "^5.3.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
36
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.9",
|
|
37
37
|
"@zendeskgarden/svg-icons": "7.0.0"
|
|
38
38
|
},
|
|
39
39
|
"keywords": [
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"access": "public"
|
|
47
47
|
},
|
|
48
48
|
"zendeskgarden:src": "src/index.ts",
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
|
|
50
50
|
}
|