@zendeskgarden/react-chrome 9.0.0-next.24 → 9.0.0-next.25
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/dist/esm/elements/sheet/Sheet.js +1 -1
- package/dist/esm/styled/StyledChrome.js +2 -5
- package/dist/esm/styled/StyledSkipNav.js +2 -5
- package/dist/esm/styled/StyledSkipNavIcon.js +2 -5
- package/dist/esm/styled/body/StyledBody.js +2 -5
- package/dist/esm/styled/body/StyledContent.js +2 -5
- package/dist/esm/styled/body/StyledMain.js +2 -5
- package/dist/esm/styled/footer/StyledFooter.js +2 -5
- package/dist/esm/styled/footer/StyledFooterItem.js +2 -5
- package/dist/esm/styled/header/StyledBaseHeaderItem.js +2 -5
- package/dist/esm/styled/header/StyledHeader.js +2 -5
- package/dist/esm/styled/header/StyledHeaderItem.js +2 -5
- package/dist/esm/styled/header/StyledHeaderItemIcon.js +2 -5
- package/dist/esm/styled/header/StyledHeaderItemText.js +2 -5
- package/dist/esm/styled/header/StyledHeaderItemWrapper.js +2 -5
- package/dist/esm/styled/header/StyledLogoHeaderItem.js +2 -5
- package/dist/esm/styled/nav/StyledBaseNavItem.js +1 -5
- package/dist/esm/styled/nav/StyledBrandmarkNavItem.js +1 -5
- package/dist/esm/styled/nav/StyledLogoNavItem.js +2 -5
- package/dist/esm/styled/nav/StyledNav.js +2 -5
- package/dist/esm/styled/nav/StyledNavButton.js +2 -5
- package/dist/esm/styled/nav/StyledNavItemIcon.js +2 -5
- package/dist/esm/styled/nav/StyledNavItemText.js +2 -5
- package/dist/esm/styled/nav/StyledNavList.js +2 -5
- package/dist/esm/styled/nav/StyledNavListItem.js +2 -5
- package/dist/esm/styled/sheet/StyledSheet.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetBody.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetClose.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetDescription.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetFooter.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetFooterItem.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetHeader.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetTitle.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetWrapper.js +2 -5
- package/dist/index.cjs.js +34 -133
- package/package.json +4 -4
|
@@ -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.25'}`), [id, seed]);
|
|
71
71
|
const titleId = `${idPrefix}--title`;
|
|
72
72
|
const descriptionId = `${idPrefix}--description`;
|
|
73
73
|
const sheetContext = useMemo(() => ({
|
|
@@ -5,18 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledChrome",
|
|
16
16
|
componentId: "sc-1uqm6u6-0"
|
|
17
17
|
})(["display:flex;position:relative;margin:0;height:100vh;overflow-y:hidden;font-family:", ";direction:", ";", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledChrome.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledChrome };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { keyframes, css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles,
|
|
9
|
+
import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { getHeaderHeight } from './utils.js';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'chrome.skipnav';
|
|
@@ -55,13 +55,10 @@ const sizeStyles = _ref2 => {
|
|
|
55
55
|
};
|
|
56
56
|
const StyledSkipNav = styled.a.attrs({
|
|
57
57
|
'data-garden-id': COMPONENT_ID,
|
|
58
|
-
'data-garden-version': '9.0.0-next.
|
|
58
|
+
'data-garden-version': '9.0.0-next.25'
|
|
59
59
|
}).withConfig({
|
|
60
60
|
displayName: "StyledSkipNav",
|
|
61
61
|
componentId: "sc-1tsro34-0"
|
|
62
62
|
})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";", "{text-decoration:none;}&:hover{text-decoration:underline;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.zIndex, props => props.theme.borderRadii.md, sizeStyles, SELECTOR_FOCUS_VISIBLE, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
63
|
-
StyledSkipNav.defaultProps = {
|
|
64
|
-
theme: DEFAULT_THEME
|
|
65
|
-
};
|
|
66
63
|
|
|
67
64
|
export { StyledSkipNav };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import SvgLinkStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/link-stroke.svg.js';
|
|
9
|
-
import { getColor, retrieveComponentStyles
|
|
9
|
+
import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'chrome.skipnav_icon';
|
|
12
12
|
const sizeStyles = _ref => {
|
|
@@ -19,7 +19,7 @@ const sizeStyles = _ref => {
|
|
|
19
19
|
};
|
|
20
20
|
const StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
|
|
21
21
|
'data-garden-id': COMPONENT_ID,
|
|
22
|
-
'data-garden-version': '9.0.0-next.
|
|
22
|
+
'data-garden-version': '9.0.0-next.25'
|
|
23
23
|
}).withConfig({
|
|
24
24
|
displayName: "StyledSkipNavIcon",
|
|
25
25
|
componentId: "sc-1ika5z4-0"
|
|
@@ -27,8 +27,5 @@ const StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
|
|
|
27
27
|
theme: p.theme,
|
|
28
28
|
variable: 'foreground.subtle'
|
|
29
29
|
}), sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
30
|
-
StyledSkipNavIcon.defaultProps = {
|
|
31
|
-
theme: DEFAULT_THEME
|
|
32
|
-
};
|
|
33
30
|
|
|
34
31
|
export { StyledSkipNavIcon };
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { getColor, retrieveComponentStyles
|
|
8
|
+
import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledBody",
|
|
16
16
|
componentId: "sc-c7h9kv-0"
|
|
@@ -18,8 +18,5 @@ const StyledBody = styled.div.attrs({
|
|
|
18
18
|
theme: props.theme,
|
|
19
19
|
variable: 'background.default'
|
|
20
20
|
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
-
StyledBody.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledBody };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { getColor, retrieveComponentStyles,
|
|
9
|
+
import { getColor, retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { getHeaderHeight, getFooterHeight } from '../utils.js';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'chrome.content';
|
|
@@ -22,7 +22,7 @@ const sizeStyles = _ref => {
|
|
|
22
22
|
};
|
|
23
23
|
const StyledContent = styled.div.attrs({
|
|
24
24
|
'data-garden-id': COMPONENT_ID,
|
|
25
|
-
'data-garden-version': '9.0.0-next.
|
|
25
|
+
'data-garden-version': '9.0.0-next.25'
|
|
26
26
|
}).withConfig({
|
|
27
27
|
displayName: "StyledContent",
|
|
28
28
|
componentId: "sc-qcuzxn-0"
|
|
@@ -30,8 +30,5 @@ const StyledContent = styled.div.attrs({
|
|
|
30
30
|
theme: props.theme,
|
|
31
31
|
variable: 'foreground.default'
|
|
32
32
|
}), sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
33
|
-
StyledContent.defaultProps = {
|
|
34
|
-
theme: DEFAULT_THEME
|
|
35
|
-
};
|
|
36
33
|
|
|
37
34
|
export { StyledContent };
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { getColor, retrieveComponentStyles
|
|
8
|
+
import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledMain",
|
|
16
16
|
componentId: "sc-t61cre-0"
|
|
@@ -18,8 +18,5 @@ const StyledMain = styled.main.attrs({
|
|
|
18
18
|
theme: props.theme,
|
|
19
19
|
variable: 'background.default'
|
|
20
20
|
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
-
StyledMain.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledMain };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { getFooterHeight } from '../utils.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'chrome.footer';
|
|
@@ -34,13 +34,10 @@ const sizeStyles = _ref2 => {
|
|
|
34
34
|
};
|
|
35
35
|
const StyledFooter = styled.footer.attrs({
|
|
36
36
|
'data-garden-id': COMPONENT_ID,
|
|
37
|
-
'data-garden-version': '9.0.0-next.
|
|
37
|
+
'data-garden-version': '9.0.0-next.25'
|
|
38
38
|
}).withConfig({
|
|
39
39
|
displayName: "StyledFooter",
|
|
40
40
|
componentId: "sc-v7lib2-0"
|
|
41
41
|
})(["display:flex;align-items:center;justify-content:flex-end;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
42
|
-
StyledFooter.defaultProps = {
|
|
43
|
-
theme: DEFAULT_THEME
|
|
44
|
-
};
|
|
45
42
|
|
|
46
43
|
export { StyledFooter };
|
|
@@ -5,18 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledFooterItem",
|
|
16
16
|
componentId: "sc-1cktm85-0"
|
|
17
17
|
})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledFooterItem.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledFooterItem };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { getHeaderItemSize } from '../utils.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'chrome.base_header_item';
|
|
@@ -32,13 +32,10 @@ const sizeStyles = _ref => {
|
|
|
32
32
|
};
|
|
33
33
|
const StyledBaseHeaderItem = styled.button.attrs({
|
|
34
34
|
'data-garden-id': COMPONENT_ID,
|
|
35
|
-
'data-garden-version': '9.0.0-next.
|
|
35
|
+
'data-garden-version': '9.0.0-next.25'
|
|
36
36
|
}).withConfig({
|
|
37
37
|
displayName: "StyledBaseHeaderItem",
|
|
38
38
|
componentId: "sc-1qua7h6-0"
|
|
39
39
|
})(["display:inline-flex;position:relative;flex:", ";align-items:center;justify-content:", ";order:1;transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;z-index:0;border:none;background:transparent;text-decoration:none;white-space:nowrap;color:inherit;", ";", ";"], props => props.maxX && '1', props => props.maxX ? 'start' : 'center', sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
40
|
-
StyledBaseHeaderItem.defaultProps = {
|
|
41
|
-
theme: DEFAULT_THEME
|
|
42
|
-
};
|
|
43
40
|
|
|
44
41
|
export { StyledBaseHeaderItem };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledLogoHeaderItem } from './StyledLogoHeaderItem.js';
|
|
10
10
|
import { getHeaderHeight } from '../utils.js';
|
|
11
11
|
|
|
@@ -46,13 +46,10 @@ const sizeStyles = _ref2 => {
|
|
|
46
46
|
};
|
|
47
47
|
const StyledHeader = styled.header.attrs({
|
|
48
48
|
'data-garden-id': COMPONENT_ID,
|
|
49
|
-
'data-garden-version': '9.0.0-next.
|
|
49
|
+
'data-garden-version': '9.0.0-next.25'
|
|
50
50
|
}).withConfig({
|
|
51
51
|
displayName: "StyledHeader",
|
|
52
52
|
componentId: "sc-1cexpz-0"
|
|
53
53
|
})(["display:flex;position:", ";align-items:center;justify-content:flex-end;", ";", ";", "{display:", ";}", ";"], props => props.isStandalone && 'relative', sizeStyles, colorStyles, StyledLogoHeaderItem, props => props.isStandalone && 'inline-flex', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
54
|
-
StyledHeader.defaultProps = {
|
|
55
|
-
theme: DEFAULT_THEME
|
|
56
|
-
};
|
|
57
54
|
|
|
58
55
|
export { StyledHeader };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledHeaderItemIcon } from './StyledHeaderItemIcon.js';
|
|
11
11
|
import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
|
|
12
12
|
import { StyledHeaderItemText } from './StyledHeaderItemText.js';
|
|
@@ -57,13 +57,10 @@ const sizeStyles = _ref2 => {
|
|
|
57
57
|
};
|
|
58
58
|
const StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
|
|
59
59
|
'data-garden-id': COMPONENT_ID,
|
|
60
|
-
'data-garden-version': '9.0.0-next.
|
|
60
|
+
'data-garden-version': '9.0.0-next.25'
|
|
61
61
|
}).withConfig({
|
|
62
62
|
displayName: "StyledHeaderItem",
|
|
63
63
|
componentId: "sc-14sft6n-0"
|
|
64
64
|
})(["cursor:pointer;&:hover,&:focus{text-decoration:none;}", ";", ";& ", ",& ", "{transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;}", ";"], sizeStyles, colorStyles, StyledHeaderItemIcon, StyledHeaderItemText, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
65
|
-
StyledHeaderItem.defaultProps = {
|
|
66
|
-
theme: DEFAULT_THEME
|
|
67
|
-
};
|
|
68
65
|
|
|
69
66
|
export { StyledHeaderItem };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { StyledBaseIcon, retrieveComponentStyles
|
|
8
|
+
import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.header_item_icon';
|
|
11
11
|
const sizeStyles = _ref => {
|
|
@@ -18,13 +18,10 @@ const sizeStyles = _ref => {
|
|
|
18
18
|
};
|
|
19
19
|
const StyledHeaderItemIcon = styled(StyledBaseIcon).attrs({
|
|
20
20
|
'data-garden-id': COMPONENT_ID,
|
|
21
|
-
'data-garden-version': '9.0.0-next.
|
|
21
|
+
'data-garden-version': '9.0.0-next.25'
|
|
22
22
|
}).withConfig({
|
|
23
23
|
displayName: "StyledHeaderItemIcon",
|
|
24
24
|
componentId: "sc-1jhhp6z-0"
|
|
25
25
|
})(["transition:transform 0.25s ease-in-out;", ";", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
26
|
-
StyledHeaderItemIcon.defaultProps = {
|
|
27
|
-
theme: DEFAULT_THEME
|
|
28
|
-
};
|
|
29
26
|
|
|
30
27
|
export { StyledHeaderItemIcon };
|
|
@@ -6,18 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { hideVisually } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'chrome.header_item_text';
|
|
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.25'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledHeaderItemText",
|
|
17
17
|
componentId: "sc-goz7la-0"
|
|
18
18
|
})(["margin:", ";", " ", ";"], props => `0 ${props.theme.space.base * 0.75}px`, props => props.isClipped && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledHeaderItemText.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledHeaderItemText };
|
|
@@ -5,20 +5,17 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
|
|
10
10
|
|
|
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.25',
|
|
15
15
|
as: 'div'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledHeaderItemWrapper",
|
|
18
18
|
componentId: "sc-1uieu55-0"
|
|
19
19
|
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
20
|
-
StyledHeaderItemWrapper.defaultProps = {
|
|
21
|
-
theme: DEFAULT_THEME
|
|
22
|
-
};
|
|
23
20
|
|
|
24
21
|
export { StyledHeaderItemWrapper };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { hideVisually } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledHeaderItemIcon } from './StyledHeaderItemIcon.js';
|
|
11
11
|
import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
|
|
12
12
|
import { StyledHeaderItemText } from './StyledHeaderItemText.js';
|
|
@@ -42,14 +42,11 @@ const sizeStyles = _ref2 => {
|
|
|
42
42
|
};
|
|
43
43
|
const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
|
|
44
44
|
'data-garden-id': COMPONENT_ID,
|
|
45
|
-
'data-garden-version': '9.0.0-next.
|
|
45
|
+
'data-garden-version': '9.0.0-next.25',
|
|
46
46
|
as: 'div'
|
|
47
47
|
}).withConfig({
|
|
48
48
|
displayName: "StyledLogoHeaderItem",
|
|
49
49
|
componentId: "sc-1n1d1yv-0"
|
|
50
50
|
})(["display:none;order:0;border-radius:0;padding:0;overflow:hidden;text-decoration:none;", ";", ";", "{", "}", ";"], sizeStyles, colorStyles, StyledHeaderItemText, hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
51
|
-
StyledLogoHeaderItem.defaultProps = {
|
|
52
|
-
theme: DEFAULT_THEME
|
|
53
|
-
};
|
|
54
51
|
|
|
55
52
|
export { StyledLogoHeaderItem };
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
10
9
|
import { getNavItemHeight, getNavWidth } from '../utils.js';
|
|
11
10
|
|
|
12
11
|
const COMPONENT_ID = 'chrome.base_nav_item';
|
|
@@ -21,13 +20,10 @@ const sizeStyles = _ref => {
|
|
|
21
20
|
};
|
|
22
21
|
const StyledBaseNavItem = styled.div.attrs({
|
|
23
22
|
'data-garden-id': COMPONENT_ID,
|
|
24
|
-
'data-garden-version': '9.0.0-next.
|
|
23
|
+
'data-garden-version': '9.0.0-next.25'
|
|
25
24
|
}).withConfig({
|
|
26
25
|
displayName: "StyledBaseNavItem",
|
|
27
26
|
componentId: "sc-zvo43f-0"
|
|
28
27
|
})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:outline-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;", ";"], sizeStyles);
|
|
29
|
-
StyledBaseNavItem.defaultProps = {
|
|
30
|
-
theme: DEFAULT_THEME
|
|
31
|
-
};
|
|
32
28
|
|
|
33
29
|
export { StyledBaseNavItem };
|
|
@@ -5,19 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
8
|
import { StyledBaseNavItem } from './StyledBaseNavItem.js';
|
|
10
9
|
|
|
11
10
|
const COMPONENT_ID = 'chrome.brandmark_nav_list_item';
|
|
12
11
|
const StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
|
|
13
12
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.25'
|
|
15
14
|
}).withConfig({
|
|
16
15
|
displayName: "StyledBrandmarkNavItem",
|
|
17
16
|
componentId: "sc-8kynd4-0"
|
|
18
17
|
})(["order:1;opacity:", ";margin-top:auto;min-height:0;"], props => props.theme.opacity[400]);
|
|
19
|
-
StyledBrandmarkNavItem.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
18
|
|
|
23
19
|
export { StyledBrandmarkNavItem };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledBaseNavItem } from './StyledBaseNavItem.js';
|
|
10
10
|
import { getProductColor } from '../utils.js';
|
|
11
11
|
|
|
@@ -25,13 +25,10 @@ const colorStyles = _ref => {
|
|
|
25
25
|
};
|
|
26
26
|
const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
|
|
27
27
|
'data-garden-id': COMPONENT_ID,
|
|
28
|
-
'data-garden-version': '9.0.0-next.
|
|
28
|
+
'data-garden-version': '9.0.0-next.25'
|
|
29
29
|
}).withConfig({
|
|
30
30
|
displayName: "StyledLogoNavItem",
|
|
31
31
|
componentId: "sc-saaydx-0"
|
|
32
32
|
})(["order:-1;opacity:1;cursor:default;min-height:0;", ";"], colorStyles);
|
|
33
|
-
StyledLogoNavItem.defaultProps = {
|
|
34
|
-
theme: DEFAULT_THEME
|
|
35
|
-
};
|
|
36
33
|
|
|
37
34
|
export { StyledLogoNavItem };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { getNavWidthExpanded, getNavWidth } from '../utils.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'chrome.nav';
|
|
@@ -42,13 +42,10 @@ const sizeStyles = _ref2 => {
|
|
|
42
42
|
};
|
|
43
43
|
const StyledNav = styled.nav.attrs({
|
|
44
44
|
'data-garden-id': COMPONENT_ID,
|
|
45
|
-
'data-garden-version': '9.0.0-next.
|
|
45
|
+
'data-garden-version': '9.0.0-next.25'
|
|
46
46
|
}).withConfig({
|
|
47
47
|
displayName: "StyledNav",
|
|
48
48
|
componentId: "sc-6j462r-0"
|
|
49
49
|
})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;", ";", ";", ";"], colorStyles, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
50
|
-
StyledNav.defaultProps = {
|
|
51
|
-
theme: DEFAULT_THEME
|
|
52
|
-
};
|
|
53
50
|
|
|
54
51
|
export { StyledNav };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledBaseNavItem } from './StyledBaseNavItem.js';
|
|
11
11
|
import { StyledNavItemIcon } from './StyledNavItemIcon.js';
|
|
12
12
|
import { getNavWidth } from '../utils.js';
|
|
@@ -81,14 +81,11 @@ const sizeStyles = _ref2 => {
|
|
|
81
81
|
};
|
|
82
82
|
const StyledNavButton = styled(StyledBaseNavItem).attrs({
|
|
83
83
|
'data-garden-id': COMPONENT_ID,
|
|
84
|
-
'data-garden-version': '9.0.0-next.
|
|
84
|
+
'data-garden-version': '9.0.0-next.25',
|
|
85
85
|
as: 'button'
|
|
86
86
|
}).withConfig({
|
|
87
87
|
displayName: "StyledNavButton",
|
|
88
88
|
componentId: "sc-f5ux3-0"
|
|
89
89
|
})(["flex:1;justify-content:", ";cursor:pointer;text-align:", ";text-decoration:none;", ";&:hover,&:focus{text-decoration:none;}&[aria-current='true']{cursor:default;}", ";", ";"], props => props.isExpanded && 'start', props => props.isExpanded && 'inherit', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
90
|
-
StyledNavButton.defaultProps = {
|
|
91
|
-
theme: DEFAULT_THEME
|
|
92
|
-
};
|
|
93
90
|
|
|
94
91
|
export { StyledNavButton };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { StyledBaseIcon, retrieveComponentStyles
|
|
8
|
+
import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.nav_item_icon';
|
|
11
11
|
const sizeStyles = _ref => {
|
|
@@ -17,13 +17,10 @@ const sizeStyles = _ref => {
|
|
|
17
17
|
};
|
|
18
18
|
const StyledNavItemIcon = styled(StyledBaseIcon).attrs({
|
|
19
19
|
'data-garden-id': COMPONENT_ID,
|
|
20
|
-
'data-garden-version': '9.0.0-next.
|
|
20
|
+
'data-garden-version': '9.0.0-next.25'
|
|
21
21
|
}).withConfig({
|
|
22
22
|
displayName: "StyledNavItemIcon",
|
|
23
23
|
componentId: "sc-7w9rpt-0"
|
|
24
24
|
})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
25
|
-
StyledNavItemIcon.defaultProps = {
|
|
26
|
-
theme: DEFAULT_THEME
|
|
27
|
-
};
|
|
28
25
|
|
|
29
26
|
export { StyledNavItemIcon };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledNavButton } from './StyledNavButton.js';
|
|
11
11
|
import { getNavWidth } from '../utils.js';
|
|
12
12
|
|
|
@@ -27,13 +27,10 @@ const sizeStyles = _ref => {
|
|
|
27
27
|
};
|
|
28
28
|
const StyledNavItemText = styled.span.attrs({
|
|
29
29
|
'data-garden-id': COMPONENT_ID,
|
|
30
|
-
'data-garden-version': '9.0.0-next.
|
|
30
|
+
'data-garden-version': '9.0.0-next.25'
|
|
31
31
|
}).withConfig({
|
|
32
32
|
displayName: "StyledNavItemText",
|
|
33
33
|
componentId: "sc-13m84xl-0"
|
|
34
34
|
})(["position:absolute;order:1;overflow:hidden;", " > &&{position:", ";flex:", ";text-overflow:", ";}", ";", ";"], StyledNavButton, props => props.isExpanded ? 'static' : undefined, props => props.isExpanded ? 1 : undefined, props => props.isExpanded ? 'ellipsis' : undefined, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
35
|
-
StyledNavItemText.defaultProps = {
|
|
36
|
-
theme: DEFAULT_THEME
|
|
37
|
-
};
|
|
38
35
|
|
|
39
36
|
export { StyledNavItemText };
|
|
@@ -5,18 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledNavList",
|
|
16
16
|
componentId: "sc-1s0nkfb-0"
|
|
17
17
|
})(["display:flex;flex:1;flex-direction:column;order:0;margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledNavList.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledNavList };
|
|
@@ -5,18 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledNavListItem",
|
|
16
16
|
componentId: "sc-18cj2v7-0"
|
|
17
17
|
})(["display:flex;order:1;margin:0;padding:0;list-style-type:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledNavListItem.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledNavListItem };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.sheet';
|
|
11
11
|
const colorStyles = _ref => {
|
|
@@ -44,13 +44,10 @@ const sizeStyles = _ref2 => {
|
|
|
44
44
|
};
|
|
45
45
|
const StyledSheet = styled.aside.attrs({
|
|
46
46
|
'data-garden-id': COMPONENT_ID,
|
|
47
|
-
'data-garden-version': '9.0.0-next.
|
|
47
|
+
'data-garden-version': '9.0.0-next.25'
|
|
48
48
|
}).withConfig({
|
|
49
49
|
displayName: "StyledSheet",
|
|
50
50
|
componentId: "sc-dx8ijk-0"
|
|
51
51
|
})(["display:flex;order:1;transition:", ";overflow:hidden;", ";&:focus{outline:none;}", ";", ";"], props => props.isAnimated && 'width 250ms ease-in-out', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
52
|
-
StyledSheet.defaultProps = {
|
|
53
|
-
theme: DEFAULT_THEME
|
|
54
|
-
};
|
|
55
52
|
|
|
56
53
|
export { StyledSheet };
|
|
@@ -5,18 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledSheetBody",
|
|
16
16
|
componentId: "sc-bt4eoj-0"
|
|
17
17
|
})(["flex:1;overflow-y:auto;padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledSheetBody.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledSheetBody };
|