-
Notifications
You must be signed in to change notification settings - Fork 90
/
StyledBaseHeaderItem.ts
88 lines (76 loc) · 2.26 KB
/
StyledBaseHeaderItem.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
import styled, { ThemeProps, DefaultTheme, css } from 'styled-components';
import {
DEFAULT_THEME,
retrieveComponentStyles,
getLineHeight
} from '@zendeskgarden/react-theming';
const COMPONENT_ID = 'chrome.base_header_item';
export interface IStyledBaseHeaderItemProps {
/**
* Horizontally maximize a flex item in the header to take as much space as possible (i.e. breadcrumb container)
**/
maxX?: boolean;
/**
* Vertically maximize the height for a header item (i.e. contains a search input)
**/
maxY?: boolean;
/**
* Round the border radius for a header item (i.e. user icon)
**/
isRound?: boolean;
}
export const getHeaderItemSize = (props: ThemeProps<DefaultTheme>) =>
`${props.theme.space.base * 7.5}px`;
const sizeStyles = (props: IStyledBaseHeaderItemProps & ThemeProps<DefaultTheme>) => {
const size = props.theme.space.base * 7.5;
return css`
padding: 0 3px;
min-width: ${size}px;
height: ${props.maxY ? '100%' : `${size}px`};
line-height: ${getLineHeight(size, props.theme.fontSizes.md)};
`;
};
/**
* 1. Reset the stacking context for embedded menus
* 2. Button element reset
*/
export const StyledBaseHeaderItem = styled.div.attrs({
'data-garden-id': COMPONENT_ID,
'data-garden-version': PACKAGE_VERSION
})<IStyledBaseHeaderItemProps>`
display: inline-flex;
position: relative;
flex: ${props => props.maxX && '1'};
align-items: center;
justify-content: ${props => (props.maxX ? 'start' : 'center')};
order: 1;
transition: box-shadow 0.1s ease-in-out, color 0.1s ease-in-out;
z-index: 0; /* [1] */
margin: ${props => `0 ${props.theme.space.base * 3}px`};
border: none; /* [2] */
border-radius: ${props => {
if (props.isRound) {
return '100%';
}
if (props.maxY) {
return '0';
}
return props.theme.borderRadii.md;
}};
background: transparent; /* [2] */
text-decoration: none;
white-space: nowrap;
color: inherit;
font-size: inherit; /* [2] */
${sizeStyles}
${props => retrieveComponentStyles(COMPONENT_ID, props)};
`;
StyledBaseHeaderItem.defaultProps = {
theme: DEFAULT_THEME
};