@zendeskgarden/react-accordions 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/styled/accordion/StyledAccordion.js +2 -5
- package/dist/esm/styled/accordion/StyledButton.js +2 -5
- package/dist/esm/styled/accordion/StyledHeader.js +2 -5
- package/dist/esm/styled/accordion/StyledInnerPanel.js +2 -5
- package/dist/esm/styled/accordion/StyledPanel.js +1 -1
- package/dist/esm/styled/accordion/StyledRotateIcon.js +2 -5
- package/dist/esm/styled/accordion/StyledSection.js +2 -5
- package/dist/esm/styled/stepper/StyledContent.js +2 -5
- package/dist/esm/styled/stepper/StyledIcon.js +2 -8
- package/dist/esm/styled/stepper/StyledInnerContent.js +2 -5
- package/dist/esm/styled/stepper/StyledLabel.js +2 -5
- package/dist/esm/styled/stepper/StyledLabelText.js +1 -5
- package/dist/esm/styled/stepper/StyledLine.js +2 -5
- package/dist/esm/styled/stepper/StyledStep.js +2 -5
- package/dist/esm/styled/stepper/StyledStepper.js +2 -5
- package/dist/esm/styled/timeline/StyledContent.js +2 -5
- package/dist/esm/styled/timeline/StyledItem.js +2 -5
- package/dist/esm/styled/timeline/StyledItemIcon.js +2 -5
- package/dist/esm/styled/timeline/StyledOppositeContent.js +2 -5
- package/dist/esm/styled/timeline/StyledSeparator.js +2 -5
- package/dist/esm/styled/timeline/StyledTimeline.js +2 -5
- package/dist/index.cjs.js +21 -84
- package/package.json +3 -3
|
@@ -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 = 'accordions.accordion';
|
|
11
11
|
const StyledAccordion = 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: "StyledAccordion",
|
|
16
16
|
componentId: "sc-niv9ic-0"
|
|
17
17
|
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledAccordion.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledAccordion };
|
|
@@ -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 { getLineHeight, retrieveComponentStyles,
|
|
8
|
+
import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'accordions.button';
|
|
11
11
|
const colorStyles = _ref => {
|
|
@@ -24,13 +24,10 @@ const colorStyles = _ref => {
|
|
|
24
24
|
};
|
|
25
25
|
const StyledButton = styled.button.attrs({
|
|
26
26
|
'data-garden-id': COMPONENT_ID,
|
|
27
|
-
'data-garden-version': '9.0.0-next.
|
|
27
|
+
'data-garden-version': '9.0.0-next.25'
|
|
28
28
|
}).withConfig({
|
|
29
29
|
displayName: "StyledButton",
|
|
30
30
|
componentId: "sc-xj3hy7-0"
|
|
31
31
|
})(["transition:color 0.1s ease-in-out;outline:none;border:none;background:transparent;padding:", ";width:100%;text-align:", ";line-height:", ";font-family:inherit;font-size:", ";font-weight:", ";", " &::-moz-focus-inner{border:0;}&:hover{cursor:", ";}", ";"], props => props.$isCompact ? `${props.theme.space.base * 2}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.rtl ? 'right' : 'left', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles, props => (props.$isCollapsible || !props.$isExpanded) && 'pointer', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
32
|
-
StyledButton.defaultProps = {
|
|
33
|
-
theme: DEFAULT_THEME
|
|
34
|
-
};
|
|
35
32
|
|
|
36
33
|
export { COMPONENT_ID, StyledButton };
|
|
@@ -5,13 +5,13 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { focusStyles, retrieveComponentStyles
|
|
8
|
+
import { focusStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledButton } from './StyledButton.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'accordions.header';
|
|
12
12
|
const StyledHeader = styled.div.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: "StyledHeader",
|
|
17
17
|
componentId: "sc-2c6rbr-0"
|
|
@@ -20,8 +20,5 @@ const StyledHeader = styled.div.attrs({
|
|
|
20
20
|
inset: true,
|
|
21
21
|
selector: `&:has(${StyledButton}:focus-visible)`
|
|
22
22
|
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
23
|
-
StyledHeader.defaultProps = {
|
|
24
|
-
theme: DEFAULT_THEME
|
|
25
|
-
};
|
|
26
23
|
|
|
27
24
|
export { StyledHeader };
|
|
@@ -5,19 +5,16 @@
|
|
|
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 { StyledPanel } from './StyledPanel.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'accordions.step_inner_panel';
|
|
12
12
|
const StyledInnerPanel = styled.div.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: "StyledInnerPanel",
|
|
17
17
|
componentId: "sc-8nbueg-0"
|
|
18
18
|
})(["overflow:hidden;line-height:inherit;font-size:inherit;", "[aria-hidden='true'] > &{transition:", ";visibility:hidden;}", "[aria-hidden='false'] > &{visibility:visible;}", ";"], StyledPanel, props => props.$isAnimated && 'visibility 0s 0.25s', StyledPanel, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledInnerPanel.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledInnerPanel };
|
|
@@ -43,7 +43,7 @@ const sizeStyles = props => {
|
|
|
43
43
|
};
|
|
44
44
|
const StyledPanel = styled.section.attrs({
|
|
45
45
|
'data-garden-id': COMPONENT_ID,
|
|
46
|
-
'data-garden-version': '9.0.0-next.
|
|
46
|
+
'data-garden-version': '9.0.0-next.25'
|
|
47
47
|
}).withConfig({
|
|
48
48
|
displayName: "StyledPanel",
|
|
49
49
|
componentId: "sc-1piryze-0"
|
|
@@ -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, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'accordions.rotate_icon';
|
|
11
11
|
const colorStyles = _ref => {
|
|
@@ -24,13 +24,10 @@ const colorStyles = _ref => {
|
|
|
24
24
|
};
|
|
25
25
|
const StyledRotateIcon = styled(StyledBaseIcon).attrs({
|
|
26
26
|
'data-garden-id': COMPONENT_ID,
|
|
27
|
-
'data-garden-version': '9.0.0-next.
|
|
27
|
+
'data-garden-version': '9.0.0-next.25'
|
|
28
28
|
}).withConfig({
|
|
29
29
|
displayName: "StyledRotateIcon",
|
|
30
30
|
componentId: "sc-hp435q-0"
|
|
31
31
|
})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.1s ease-in-out;box-sizing:content-box;padding:", ";width:", ";min-width:", ";height:", ";vertical-align:middle;", " ", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => props.$isCompact ? `${props.theme.space.base * 1.5}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
32
|
-
StyledRotateIcon.defaultProps = {
|
|
33
|
-
theme: DEFAULT_THEME
|
|
34
|
-
};
|
|
35
32
|
|
|
36
33
|
export { StyledRotateIcon };
|
|
@@ -5,19 +5,16 @@
|
|
|
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 { StyledPanel } from './StyledPanel.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'accordions.section';
|
|
12
12
|
const StyledSection = styled.div.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: "StyledSection",
|
|
17
17
|
componentId: "sc-v2t9bd-0"
|
|
18
18
|
})(["&:last-child ", "{border:none;}", ";"], StyledPanel, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledSection.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledSection };
|
|
@@ -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 } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'accordions.step_content';
|
|
11
11
|
const sizeStyles = props => {
|
|
@@ -23,13 +23,10 @@ const sizeStyles = props => {
|
|
|
23
23
|
};
|
|
24
24
|
const StyledContent = styled.div.attrs({
|
|
25
25
|
'data-garden-id': COMPONENT_ID,
|
|
26
|
-
'data-garden-version': '9.0.0-next.
|
|
26
|
+
'data-garden-version': '9.0.0-next.25'
|
|
27
27
|
}).withConfig({
|
|
28
28
|
displayName: "StyledContent",
|
|
29
29
|
componentId: "sc-mazvvo-0"
|
|
30
30
|
})(["display:grid;grid-template-rows:", "fr;transition:grid-template-rows 0.25s ease-in-out;word-break:break-word;", " ", ";"], props => props.$isActive ? 1 : 0, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
31
|
-
StyledContent.defaultProps = {
|
|
32
|
-
theme: DEFAULT_THEME
|
|
33
|
-
};
|
|
34
31
|
|
|
35
32
|
export { StyledContent };
|
|
@@ -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, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'accordions.step_icon';
|
|
11
11
|
const StyledIconFlexContainer = styled.div.withConfig({
|
|
@@ -46,16 +46,10 @@ const colorStyles = _ref => {
|
|
|
46
46
|
};
|
|
47
47
|
const StyledIcon = styled.div.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: "StyledIcon",
|
|
52
52
|
componentId: "sc-v20nz9-1"
|
|
53
53
|
})(["display:flex;align-items:center;justify-content:center;transition:background 0.25s ease-in-out,color 0.25s ease-in-out;border-radius:100%;", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
54
|
-
StyledIconFlexContainer.defaultProps = {
|
|
55
|
-
theme: DEFAULT_THEME
|
|
56
|
-
};
|
|
57
|
-
StyledIcon.defaultProps = {
|
|
58
|
-
theme: DEFAULT_THEME
|
|
59
|
-
};
|
|
60
54
|
|
|
61
55
|
export { StyledIcon, StyledIconFlexContainer };
|
|
@@ -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 { getLineHeight, getColor, retrieveComponentStyles
|
|
8
|
+
import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'accordions.step_inner_content';
|
|
11
11
|
const StyledInnerContent = 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: "StyledInnerContent",
|
|
16
16
|
componentId: "sc-1xs9fh7-0"
|
|
@@ -23,8 +23,5 @@ const StyledInnerContent = styled.div.attrs({
|
|
|
23
23
|
variable: 'foreground.default'
|
|
24
24
|
});
|
|
25
25
|
}, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
26
|
-
StyledInnerContent.defaultProps = {
|
|
27
|
-
theme: DEFAULT_THEME
|
|
28
|
-
};
|
|
29
26
|
|
|
30
27
|
export { StyledInnerContent };
|
|
@@ -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 { getLineHeight, getColor, retrieveComponentStyles
|
|
8
|
+
import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'accordions.step_label';
|
|
11
11
|
const StyledLabel = 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: "StyledLabel",
|
|
16
16
|
componentId: "sc-1o82llj-0"
|
|
@@ -24,8 +24,5 @@ const StyledLabel = styled.div.attrs({
|
|
|
24
24
|
variable: $isActive ? 'foreground.default' : 'foreground.subtle'
|
|
25
25
|
});
|
|
26
26
|
}, props => props.theme.fontSizes.md, props => props.$isActive && 600, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
27
|
-
StyledLabel.defaultProps = {
|
|
28
|
-
theme: DEFAULT_THEME
|
|
29
|
-
};
|
|
30
27
|
|
|
31
28
|
export { StyledLabel };
|
|
@@ -5,18 +5,14 @@
|
|
|
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
|
|
|
10
9
|
const COMPONENT_ID = 'accordions.step_label_text';
|
|
11
10
|
const StyledLabelText = styled.div.attrs({
|
|
12
11
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
12
|
+
'data-garden-version': '9.0.0-next.25'
|
|
14
13
|
}).withConfig({
|
|
15
14
|
displayName: "StyledLabelText",
|
|
16
15
|
componentId: "sc-111m5zo-0"
|
|
17
16
|
})(["display:", ";padding:", ";word-wrap:", ";"], props => props.$isHidden && 'none', props => props.$isHorizontal && `0 ${props.theme.space.base * 3}px`, props => props.$isHorizontal && 'break-word');
|
|
18
|
-
StyledLabelText.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
17
|
|
|
22
18
|
export { StyledLabelText };
|
|
@@ -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
|
|
8
|
+
import { getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'accordions.step_line';
|
|
11
11
|
const StyledLine = 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: "StyledLine",
|
|
16
16
|
componentId: "sc-1gkpjbr-0"
|
|
@@ -23,8 +23,5 @@ const StyledLine = styled.div.attrs({
|
|
|
23
23
|
variable: 'border.default'
|
|
24
24
|
});
|
|
25
25
|
});
|
|
26
|
-
StyledLine.defaultProps = {
|
|
27
|
-
theme: DEFAULT_THEME
|
|
28
|
-
};
|
|
29
26
|
|
|
30
27
|
export { StyledLine };
|
|
@@ -5,14 +5,14 @@
|
|
|
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
|
import { StyledContent } from './StyledContent.js';
|
|
10
10
|
import { StyledLine } from './StyledLine.js';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'accordions.step';
|
|
13
13
|
const StyledStep = styled.li.attrs({
|
|
14
14
|
'data-garden-id': COMPONENT_ID,
|
|
15
|
-
'data-garden-version': '9.0.0-next.
|
|
15
|
+
'data-garden-version': '9.0.0-next.25'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledStep",
|
|
18
18
|
componentId: "sc-12fiwtz-0"
|
|
@@ -25,8 +25,5 @@ const StyledStep = styled.li.attrs({
|
|
|
25
25
|
variable: 'border.default'
|
|
26
26
|
});
|
|
27
27
|
}, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
28
|
-
StyledStep.defaultProps = {
|
|
29
|
-
theme: DEFAULT_THEME
|
|
30
|
-
};
|
|
31
28
|
|
|
32
29
|
export { StyledStep };
|
|
@@ -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 = 'accordions.stepper';
|
|
11
11
|
const StyledStepper = styled.ol.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: "StyledStepper",
|
|
16
16
|
componentId: "sc-dsxw0f-0"
|
|
17
17
|
})(["display:", ";margin:0;padding:0;list-style:none;", ";"], props => props.$isHorizontal && 'flex', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledStepper.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledStepper };
|
|
@@ -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 = 'timeline.content';
|
|
11
11
|
const StyledTimelineContent = 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: "StyledContent__StyledTimelineContent",
|
|
16
16
|
componentId: "sc-19phgu1-0"
|
|
17
17
|
})(["flex:1;padding:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledTimelineContent.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledTimelineContent };
|
|
@@ -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 { getLineHeight, getColor, retrieveComponentStyles
|
|
8
|
+
import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledSeparator } from './StyledSeparator.js';
|
|
10
10
|
import { StyledTimelineContent } from './StyledContent.js';
|
|
11
11
|
import { StyledOppositeContent } from './StyledOppositeContent.js';
|
|
@@ -13,7 +13,7 @@ import { StyledOppositeContent } from './StyledOppositeContent.js';
|
|
|
13
13
|
const COMPONENT_ID = 'timeline.item';
|
|
14
14
|
const StyledTimelineItem = styled.li.attrs({
|
|
15
15
|
'data-garden-id': COMPONENT_ID,
|
|
16
|
-
'data-garden-version': '9.0.0-next.
|
|
16
|
+
'data-garden-version': '9.0.0-next.25'
|
|
17
17
|
}).withConfig({
|
|
18
18
|
displayName: "StyledItem__StyledTimelineItem",
|
|
19
19
|
componentId: "sc-5mcnzm-0"
|
|
@@ -26,8 +26,5 @@ const StyledTimelineItem = styled.li.attrs({
|
|
|
26
26
|
variable: 'foreground.default'
|
|
27
27
|
});
|
|
28
28
|
}, props => props.theme.fontSizes.md, StyledSeparator, props => !props.$hasOppositeContent && props.$isAlternate && css(["&::before{flex:1;padding:", "px;content:'';}"], props.theme.space.base * 4), props => props.$isAlternate && css(["&:nth-child(even){flex-direction:row-reverse;", "{text-align:", ";}", "{text-align:", ";}}"], StyledOppositeContent, props.theme.rtl ? 'right' : 'left', StyledTimelineContent, props.theme.rtl ? 'left' : 'right'), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
29
|
-
StyledTimelineItem.defaultProps = {
|
|
30
|
-
theme: DEFAULT_THEME
|
|
31
|
-
};
|
|
32
29
|
|
|
33
30
|
export { StyledTimelineItem };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { StyledBaseIcon, retrieveComponentStyles,
|
|
9
|
+
import { StyledBaseIcon, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'timeline.icon';
|
|
12
12
|
const colorStyles = _ref => {
|
|
@@ -34,13 +34,10 @@ const colorStyles = _ref => {
|
|
|
34
34
|
};
|
|
35
35
|
const StyledItemIcon = styled(StyledBaseIcon).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: "StyledItemIcon",
|
|
40
40
|
componentId: "sc-vz2l6e-0"
|
|
41
41
|
})(["z-index:1;box-sizing:content-box;padding:", "px 0;width:", ";height:", ";", " ", ";"], props => props.theme.space.base, props => math(`${props.theme.iconSizes.sm} + 1`), props => math(`${props.theme.iconSizes.sm} + 1`), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
42
|
-
StyledItemIcon.defaultProps = {
|
|
43
|
-
theme: DEFAULT_THEME
|
|
44
|
-
};
|
|
45
42
|
|
|
46
43
|
export { StyledItemIcon };
|
|
@@ -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 = 'timeline.opposite.content';
|
|
11
11
|
const StyledOppositeContent = 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: "StyledOppositeContent",
|
|
16
16
|
componentId: "sc-jurh2k-0"
|
|
17
17
|
})(["flex:1;padding:", ";text-align:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, props => props.theme.rtl ? 'left' : 'right', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledOppositeContent.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledOppositeContent };
|
|
@@ -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 = 'timeline.content.separator';
|
|
11
11
|
const StyledSeparator = 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: "StyledSeparator",
|
|
16
16
|
componentId: "sc-fki51e-0"
|
|
@@ -23,8 +23,5 @@ const StyledSeparator = styled.div.attrs({
|
|
|
23
23
|
variable: 'border.emphasis'
|
|
24
24
|
})}`;
|
|
25
25
|
}, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
26
|
-
StyledSeparator.defaultProps = {
|
|
27
|
-
theme: DEFAULT_THEME
|
|
28
|
-
};
|
|
29
26
|
|
|
30
27
|
export { StyledSeparator };
|
|
@@ -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 = 'timeline';
|
|
11
11
|
const StyledTimeline = styled.ol.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: "StyledTimeline",
|
|
16
16
|
componentId: "sc-pig5kv-0"
|
|
17
17
|
})(["margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledTimeline.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledTimeline };
|
package/dist/index.cjs.js
CHANGED
|
@@ -54,19 +54,16 @@ const sizeStyles$2 = props => {
|
|
|
54
54
|
};
|
|
55
55
|
const StyledContent = styled__default.default.div.attrs({
|
|
56
56
|
'data-garden-id': COMPONENT_ID$k,
|
|
57
|
-
'data-garden-version': '9.0.0-next.
|
|
57
|
+
'data-garden-version': '9.0.0-next.25'
|
|
58
58
|
}).withConfig({
|
|
59
59
|
displayName: "StyledContent",
|
|
60
60
|
componentId: "sc-mazvvo-0"
|
|
61
61
|
})(["display:grid;grid-template-rows:", "fr;transition:grid-template-rows 0.25s ease-in-out;word-break:break-word;", " ", ";"], props => props.$isActive ? 1 : 0, sizeStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
|
|
62
|
-
StyledContent.defaultProps = {
|
|
63
|
-
theme: reactTheming.DEFAULT_THEME
|
|
64
|
-
};
|
|
65
62
|
|
|
66
63
|
const COMPONENT_ID$j = 'accordions.step_line';
|
|
67
64
|
const StyledLine = styled__default.default.div.attrs({
|
|
68
65
|
'data-garden-id': COMPONENT_ID$j,
|
|
69
|
-
'data-garden-version': '9.0.0-next.
|
|
66
|
+
'data-garden-version': '9.0.0-next.25'
|
|
70
67
|
}).withConfig({
|
|
71
68
|
displayName: "StyledLine",
|
|
72
69
|
componentId: "sc-1gkpjbr-0"
|
|
@@ -79,14 +76,11 @@ const StyledLine = styled__default.default.div.attrs({
|
|
|
79
76
|
variable: 'border.default'
|
|
80
77
|
});
|
|
81
78
|
});
|
|
82
|
-
StyledLine.defaultProps = {
|
|
83
|
-
theme: reactTheming.DEFAULT_THEME
|
|
84
|
-
};
|
|
85
79
|
|
|
86
80
|
const COMPONENT_ID$i = 'accordions.step';
|
|
87
81
|
const StyledStep = styled__default.default.li.attrs({
|
|
88
82
|
'data-garden-id': COMPONENT_ID$i,
|
|
89
|
-
'data-garden-version': '9.0.0-next.
|
|
83
|
+
'data-garden-version': '9.0.0-next.25'
|
|
90
84
|
}).withConfig({
|
|
91
85
|
displayName: "StyledStep",
|
|
92
86
|
componentId: "sc-12fiwtz-0"
|
|
@@ -99,14 +93,11 @@ const StyledStep = styled__default.default.li.attrs({
|
|
|
99
93
|
variable: 'border.default'
|
|
100
94
|
});
|
|
101
95
|
}, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
|
|
102
|
-
StyledStep.defaultProps = {
|
|
103
|
-
theme: reactTheming.DEFAULT_THEME
|
|
104
|
-
};
|
|
105
96
|
|
|
106
97
|
const COMPONENT_ID$h = 'accordions.step_inner_content';
|
|
107
98
|
const StyledInnerContent = styled__default.default.div.attrs({
|
|
108
99
|
'data-garden-id': COMPONENT_ID$h,
|
|
109
|
-
'data-garden-version': '9.0.0-next.
|
|
100
|
+
'data-garden-version': '9.0.0-next.25'
|
|
110
101
|
}).withConfig({
|
|
111
102
|
displayName: "StyledInnerContent",
|
|
112
103
|
componentId: "sc-1xs9fh7-0"
|
|
@@ -119,21 +110,15 @@ const StyledInnerContent = styled__default.default.div.attrs({
|
|
|
119
110
|
variable: 'foreground.default'
|
|
120
111
|
});
|
|
121
112
|
}, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
|
|
122
|
-
StyledInnerContent.defaultProps = {
|
|
123
|
-
theme: reactTheming.DEFAULT_THEME
|
|
124
|
-
};
|
|
125
113
|
|
|
126
114
|
const COMPONENT_ID$g = 'accordions.stepper';
|
|
127
115
|
const StyledStepper = styled__default.default.ol.attrs({
|
|
128
116
|
'data-garden-id': COMPONENT_ID$g,
|
|
129
|
-
'data-garden-version': '9.0.0-next.
|
|
117
|
+
'data-garden-version': '9.0.0-next.25'
|
|
130
118
|
}).withConfig({
|
|
131
119
|
displayName: "StyledStepper",
|
|
132
120
|
componentId: "sc-dsxw0f-0"
|
|
133
121
|
})(["display:", ";margin:0;padding:0;list-style:none;", ";"], props => props.$isHorizontal && 'flex', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
|
|
134
|
-
StyledStepper.defaultProps = {
|
|
135
|
-
theme: reactTheming.DEFAULT_THEME
|
|
136
|
-
};
|
|
137
122
|
|
|
138
123
|
const COMPONENT_ID$f = 'accordions.step_icon';
|
|
139
124
|
const StyledIconFlexContainer = styled__default.default.div.withConfig({
|
|
@@ -174,22 +159,16 @@ const colorStyles$4 = _ref => {
|
|
|
174
159
|
};
|
|
175
160
|
const StyledIcon = styled__default.default.div.attrs({
|
|
176
161
|
'data-garden-id': COMPONENT_ID$f,
|
|
177
|
-
'data-garden-version': '9.0.0-next.
|
|
162
|
+
'data-garden-version': '9.0.0-next.25'
|
|
178
163
|
}).withConfig({
|
|
179
164
|
displayName: "StyledIcon",
|
|
180
165
|
componentId: "sc-v20nz9-1"
|
|
181
166
|
})(["display:flex;align-items:center;justify-content:center;transition:background 0.25s ease-in-out,color 0.25s ease-in-out;border-radius:100%;", " ", " ", ";"], sizeStyles$1, colorStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
|
|
182
|
-
StyledIconFlexContainer.defaultProps = {
|
|
183
|
-
theme: reactTheming.DEFAULT_THEME
|
|
184
|
-
};
|
|
185
|
-
StyledIcon.defaultProps = {
|
|
186
|
-
theme: reactTheming.DEFAULT_THEME
|
|
187
|
-
};
|
|
188
167
|
|
|
189
168
|
const COMPONENT_ID$e = 'accordions.step_label';
|
|
190
169
|
const StyledLabel = styled__default.default.div.attrs({
|
|
191
170
|
'data-garden-id': COMPONENT_ID$e,
|
|
192
|
-
'data-garden-version': '9.0.0-next.
|
|
171
|
+
'data-garden-version': '9.0.0-next.25'
|
|
193
172
|
}).withConfig({
|
|
194
173
|
displayName: "StyledLabel",
|
|
195
174
|
componentId: "sc-1o82llj-0"
|
|
@@ -203,33 +182,24 @@ const StyledLabel = styled__default.default.div.attrs({
|
|
|
203
182
|
variable: $isActive ? 'foreground.default' : 'foreground.subtle'
|
|
204
183
|
});
|
|
205
184
|
}, props => props.theme.fontSizes.md, props => props.$isActive && 600, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
|
|
206
|
-
StyledLabel.defaultProps = {
|
|
207
|
-
theme: reactTheming.DEFAULT_THEME
|
|
208
|
-
};
|
|
209
185
|
|
|
210
186
|
const COMPONENT_ID$d = 'accordions.step_label_text';
|
|
211
187
|
const StyledLabelText = styled__default.default.div.attrs({
|
|
212
188
|
'data-garden-id': COMPONENT_ID$d,
|
|
213
|
-
'data-garden-version': '9.0.0-next.
|
|
189
|
+
'data-garden-version': '9.0.0-next.25'
|
|
214
190
|
}).withConfig({
|
|
215
191
|
displayName: "StyledLabelText",
|
|
216
192
|
componentId: "sc-111m5zo-0"
|
|
217
193
|
})(["display:", ";padding:", ";word-wrap:", ";"], props => props.$isHidden && 'none', props => props.$isHorizontal && `0 ${props.theme.space.base * 3}px`, props => props.$isHorizontal && 'break-word');
|
|
218
|
-
StyledLabelText.defaultProps = {
|
|
219
|
-
theme: reactTheming.DEFAULT_THEME
|
|
220
|
-
};
|
|
221
194
|
|
|
222
195
|
const COMPONENT_ID$c = 'accordions.accordion';
|
|
223
196
|
const StyledAccordion = styled__default.default.div.attrs({
|
|
224
197
|
'data-garden-id': COMPONENT_ID$c,
|
|
225
|
-
'data-garden-version': '9.0.0-next.
|
|
198
|
+
'data-garden-version': '9.0.0-next.25'
|
|
226
199
|
}).withConfig({
|
|
227
200
|
displayName: "StyledAccordion",
|
|
228
201
|
componentId: "sc-niv9ic-0"
|
|
229
202
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
|
|
230
|
-
StyledAccordion.defaultProps = {
|
|
231
|
-
theme: reactTheming.DEFAULT_THEME
|
|
232
|
-
};
|
|
233
203
|
|
|
234
204
|
const COMPONENT_ID$b = 'accordions.panel';
|
|
235
205
|
const colorStyles$3 = _ref => {
|
|
@@ -267,7 +237,7 @@ const sizeStyles = props => {
|
|
|
267
237
|
};
|
|
268
238
|
const StyledPanel = styled__default.default.section.attrs({
|
|
269
239
|
'data-garden-id': COMPONENT_ID$b,
|
|
270
|
-
'data-garden-version': '9.0.0-next.
|
|
240
|
+
'data-garden-version': '9.0.0-next.25'
|
|
271
241
|
}).withConfig({
|
|
272
242
|
displayName: "StyledPanel",
|
|
273
243
|
componentId: "sc-1piryze-0"
|
|
@@ -280,14 +250,11 @@ StyledPanel.defaultProps = {
|
|
|
280
250
|
const COMPONENT_ID$a = 'accordions.section';
|
|
281
251
|
const StyledSection = styled__default.default.div.attrs({
|
|
282
252
|
'data-garden-id': COMPONENT_ID$a,
|
|
283
|
-
'data-garden-version': '9.0.0-next.
|
|
253
|
+
'data-garden-version': '9.0.0-next.25'
|
|
284
254
|
}).withConfig({
|
|
285
255
|
displayName: "StyledSection",
|
|
286
256
|
componentId: "sc-v2t9bd-0"
|
|
287
257
|
})(["&:last-child ", "{border:none;}", ";"], StyledPanel, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
|
|
288
|
-
StyledSection.defaultProps = {
|
|
289
|
-
theme: reactTheming.DEFAULT_THEME
|
|
290
|
-
};
|
|
291
258
|
|
|
292
259
|
const COMPONENT_ID$9 = 'accordions.button';
|
|
293
260
|
const colorStyles$2 = _ref => {
|
|
@@ -306,19 +273,16 @@ const colorStyles$2 = _ref => {
|
|
|
306
273
|
};
|
|
307
274
|
const StyledButton = styled__default.default.button.attrs({
|
|
308
275
|
'data-garden-id': COMPONENT_ID$9,
|
|
309
|
-
'data-garden-version': '9.0.0-next.
|
|
276
|
+
'data-garden-version': '9.0.0-next.25'
|
|
310
277
|
}).withConfig({
|
|
311
278
|
displayName: "StyledButton",
|
|
312
279
|
componentId: "sc-xj3hy7-0"
|
|
313
280
|
})(["transition:color 0.1s ease-in-out;outline:none;border:none;background:transparent;padding:", ";width:100%;text-align:", ";line-height:", ";font-family:inherit;font-size:", ";font-weight:", ";", " &::-moz-focus-inner{border:0;}&:hover{cursor:", ";}", ";"], props => props.$isCompact ? `${props.theme.space.base * 2}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.rtl ? 'right' : 'left', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles$2, props => (props.$isCollapsible || !props.$isExpanded) && 'pointer', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
|
|
314
|
-
StyledButton.defaultProps = {
|
|
315
|
-
theme: reactTheming.DEFAULT_THEME
|
|
316
|
-
};
|
|
317
281
|
|
|
318
282
|
const COMPONENT_ID$8 = 'accordions.header';
|
|
319
283
|
const StyledHeader = styled__default.default.div.attrs({
|
|
320
284
|
'data-garden-id': COMPONENT_ID$8,
|
|
321
|
-
'data-garden-version': '9.0.0-next.
|
|
285
|
+
'data-garden-version': '9.0.0-next.25'
|
|
322
286
|
}).withConfig({
|
|
323
287
|
displayName: "StyledHeader",
|
|
324
288
|
componentId: "sc-2c6rbr-0"
|
|
@@ -327,21 +291,15 @@ const StyledHeader = styled__default.default.div.attrs({
|
|
|
327
291
|
inset: true,
|
|
328
292
|
selector: `&:has(${StyledButton}:focus-visible)`
|
|
329
293
|
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
|
|
330
|
-
StyledHeader.defaultProps = {
|
|
331
|
-
theme: reactTheming.DEFAULT_THEME
|
|
332
|
-
};
|
|
333
294
|
|
|
334
295
|
const COMPONENT_ID$7 = 'accordions.step_inner_panel';
|
|
335
296
|
const StyledInnerPanel = styled__default.default.div.attrs({
|
|
336
297
|
'data-garden-id': COMPONENT_ID$7,
|
|
337
|
-
'data-garden-version': '9.0.0-next.
|
|
298
|
+
'data-garden-version': '9.0.0-next.25'
|
|
338
299
|
}).withConfig({
|
|
339
300
|
displayName: "StyledInnerPanel",
|
|
340
301
|
componentId: "sc-8nbueg-0"
|
|
341
302
|
})(["overflow:hidden;line-height:inherit;font-size:inherit;", "[aria-hidden='true'] > &{transition:", ";visibility:hidden;}", "[aria-hidden='false'] > &{visibility:visible;}", ";"], StyledPanel, props => props.$isAnimated && 'visibility 0s 0.25s', StyledPanel, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
|
|
342
|
-
StyledInnerPanel.defaultProps = {
|
|
343
|
-
theme: reactTheming.DEFAULT_THEME
|
|
344
|
-
};
|
|
345
303
|
|
|
346
304
|
const COMPONENT_ID$6 = 'accordions.rotate_icon';
|
|
347
305
|
const colorStyles$1 = _ref => {
|
|
@@ -360,31 +318,25 @@ const colorStyles$1 = _ref => {
|
|
|
360
318
|
};
|
|
361
319
|
const StyledRotateIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
362
320
|
'data-garden-id': COMPONENT_ID$6,
|
|
363
|
-
'data-garden-version': '9.0.0-next.
|
|
321
|
+
'data-garden-version': '9.0.0-next.25'
|
|
364
322
|
}).withConfig({
|
|
365
323
|
displayName: "StyledRotateIcon",
|
|
366
324
|
componentId: "sc-hp435q-0"
|
|
367
325
|
})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.1s ease-in-out;box-sizing:content-box;padding:", ";width:", ";min-width:", ";height:", ";vertical-align:middle;", " ", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => props.$isCompact ? `${props.theme.space.base * 1.5}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
|
|
368
|
-
StyledRotateIcon.defaultProps = {
|
|
369
|
-
theme: reactTheming.DEFAULT_THEME
|
|
370
|
-
};
|
|
371
326
|
|
|
372
327
|
const COMPONENT_ID$5 = 'timeline';
|
|
373
328
|
const StyledTimeline = styled__default.default.ol.attrs({
|
|
374
329
|
'data-garden-id': COMPONENT_ID$5,
|
|
375
|
-
'data-garden-version': '9.0.0-next.
|
|
330
|
+
'data-garden-version': '9.0.0-next.25'
|
|
376
331
|
}).withConfig({
|
|
377
332
|
displayName: "StyledTimeline",
|
|
378
333
|
componentId: "sc-pig5kv-0"
|
|
379
334
|
})(["margin:0;padding:0;list-style:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
|
|
380
|
-
StyledTimeline.defaultProps = {
|
|
381
|
-
theme: reactTheming.DEFAULT_THEME
|
|
382
|
-
};
|
|
383
335
|
|
|
384
336
|
const COMPONENT_ID$4 = 'timeline.content.separator';
|
|
385
337
|
const StyledSeparator = styled__default.default.div.attrs({
|
|
386
338
|
'data-garden-id': COMPONENT_ID$4,
|
|
387
|
-
'data-garden-version': '9.0.0-next.
|
|
339
|
+
'data-garden-version': '9.0.0-next.25'
|
|
388
340
|
}).withConfig({
|
|
389
341
|
displayName: "StyledSeparator",
|
|
390
342
|
componentId: "sc-fki51e-0"
|
|
@@ -397,38 +349,29 @@ const StyledSeparator = styled__default.default.div.attrs({
|
|
|
397
349
|
variable: 'border.emphasis'
|
|
398
350
|
})}`;
|
|
399
351
|
}, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
|
|
400
|
-
StyledSeparator.defaultProps = {
|
|
401
|
-
theme: reactTheming.DEFAULT_THEME
|
|
402
|
-
};
|
|
403
352
|
|
|
404
353
|
const COMPONENT_ID$3 = 'timeline.content';
|
|
405
354
|
const StyledTimelineContent = styled__default.default.div.attrs({
|
|
406
355
|
'data-garden-id': COMPONENT_ID$3,
|
|
407
|
-
'data-garden-version': '9.0.0-next.
|
|
356
|
+
'data-garden-version': '9.0.0-next.25'
|
|
408
357
|
}).withConfig({
|
|
409
358
|
displayName: "StyledContent__StyledTimelineContent",
|
|
410
359
|
componentId: "sc-19phgu1-0"
|
|
411
360
|
})(["flex:1;padding:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
412
|
-
StyledTimelineContent.defaultProps = {
|
|
413
|
-
theme: reactTheming.DEFAULT_THEME
|
|
414
|
-
};
|
|
415
361
|
|
|
416
362
|
const COMPONENT_ID$2 = 'timeline.opposite.content';
|
|
417
363
|
const StyledOppositeContent = styled__default.default.div.attrs({
|
|
418
364
|
'data-garden-id': COMPONENT_ID$2,
|
|
419
|
-
'data-garden-version': '9.0.0-next.
|
|
365
|
+
'data-garden-version': '9.0.0-next.25'
|
|
420
366
|
}).withConfig({
|
|
421
367
|
displayName: "StyledOppositeContent",
|
|
422
368
|
componentId: "sc-jurh2k-0"
|
|
423
369
|
})(["flex:1;padding:", ";text-align:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, props => props.theme.rtl ? 'left' : 'right', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
|
|
424
|
-
StyledOppositeContent.defaultProps = {
|
|
425
|
-
theme: reactTheming.DEFAULT_THEME
|
|
426
|
-
};
|
|
427
370
|
|
|
428
371
|
const COMPONENT_ID$1 = 'timeline.item';
|
|
429
372
|
const StyledTimelineItem = styled__default.default.li.attrs({
|
|
430
373
|
'data-garden-id': COMPONENT_ID$1,
|
|
431
|
-
'data-garden-version': '9.0.0-next.
|
|
374
|
+
'data-garden-version': '9.0.0-next.25'
|
|
432
375
|
}).withConfig({
|
|
433
376
|
displayName: "StyledItem__StyledTimelineItem",
|
|
434
377
|
componentId: "sc-5mcnzm-0"
|
|
@@ -441,9 +384,6 @@ const StyledTimelineItem = styled__default.default.li.attrs({
|
|
|
441
384
|
variable: 'foreground.default'
|
|
442
385
|
});
|
|
443
386
|
}, props => props.theme.fontSizes.md, StyledSeparator, props => !props.$hasOppositeContent && props.$isAlternate && styled.css(["&::before{flex:1;padding:", "px;content:'';}"], props.theme.space.base * 4), props => props.$isAlternate && styled.css(["&:nth-child(even){flex-direction:row-reverse;", "{text-align:", ";}", "{text-align:", ";}}"], StyledOppositeContent, props.theme.rtl ? 'right' : 'left', StyledTimelineContent, props.theme.rtl ? 'left' : 'right'), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
|
|
444
|
-
StyledTimelineItem.defaultProps = {
|
|
445
|
-
theme: reactTheming.DEFAULT_THEME
|
|
446
|
-
};
|
|
447
387
|
|
|
448
388
|
const COMPONENT_ID = 'timeline.icon';
|
|
449
389
|
const colorStyles = _ref => {
|
|
@@ -471,14 +411,11 @@ const colorStyles = _ref => {
|
|
|
471
411
|
};
|
|
472
412
|
const StyledItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
473
413
|
'data-garden-id': COMPONENT_ID,
|
|
474
|
-
'data-garden-version': '9.0.0-next.
|
|
414
|
+
'data-garden-version': '9.0.0-next.25'
|
|
475
415
|
}).withConfig({
|
|
476
416
|
displayName: "StyledItemIcon",
|
|
477
417
|
componentId: "sc-vz2l6e-0"
|
|
478
418
|
})(["z-index:1;box-sizing:content-box;padding:", "px 0;width:", ";height:", ";", " ", ";"], props => props.theme.space.base, props => polished.math(`${props.theme.iconSizes.sm} + 1`), props => polished.math(`${props.theme.iconSizes.sm} + 1`), colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
|
|
479
|
-
StyledItemIcon.defaultProps = {
|
|
480
|
-
theme: reactTheming.DEFAULT_THEME
|
|
481
|
-
};
|
|
482
419
|
|
|
483
420
|
const StepperContext = React.createContext(undefined);
|
|
484
421
|
const useStepperContext = () => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-accordions",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.25",
|
|
4
4
|
"description": "Components related to accordions in 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.25",
|
|
37
37
|
"@zendeskgarden/svg-icons": "7.2.0"
|
|
38
38
|
},
|
|
39
39
|
"keywords": [
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
49
|
"zendeskgarden:src": "src/index.ts",
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "460751d630ab1c46e11810d60e4d7701b9d30b8f"
|
|
51
51
|
}
|