@bitrise/bitkit 10.16.3 → 10.16.4
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/package.json
CHANGED
|
@@ -56,5 +56,8 @@ export const DefaultVariant: ComponentStory<typeof Accordion> = (props) => (
|
|
|
56
56
|
Content - you can use any style prop on AccordionItem
|
|
57
57
|
</AccordionItem>
|
|
58
58
|
<AccordionItem buttonContent={<ButtonContentElement title="Without children" />} id="third" />
|
|
59
|
+
<AccordionItem buttonContent="Fourth, enabled element" fontSize="2" id="fourth">
|
|
60
|
+
Fourth, enabled element
|
|
61
|
+
</AccordionItem>
|
|
59
62
|
</Accordion>
|
|
60
63
|
);
|
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
import type { ComponentStyleConfig } from '@chakra-ui/theme';
|
|
2
2
|
|
|
3
|
+
const buttonStyle = {
|
|
4
|
+
display: 'flex',
|
|
5
|
+
alignItems: 'center',
|
|
6
|
+
justifyContent: 'space-between',
|
|
7
|
+
width: '100%',
|
|
8
|
+
padding: '16',
|
|
9
|
+
borderBottom: '1px solid',
|
|
10
|
+
borderColor: 'neutral.93',
|
|
11
|
+
borderRadius: '8',
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const iconStyle = {
|
|
15
|
+
width: '24',
|
|
16
|
+
height: '24',
|
|
17
|
+
marginLeft: '16',
|
|
18
|
+
};
|
|
19
|
+
|
|
3
20
|
const AccordionTheme: ComponentStyleConfig = {
|
|
4
21
|
baseStyle: ({ colorScheme }) => ({
|
|
5
22
|
item: {
|
|
@@ -9,28 +26,29 @@ const AccordionTheme: ComponentStyleConfig = {
|
|
|
9
26
|
boxShadow: 'small',
|
|
10
27
|
marginBottom: '16',
|
|
11
28
|
},
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
alignItems: 'center',
|
|
15
|
-
justifyContent: 'space-between',
|
|
16
|
-
width: '100%',
|
|
17
|
-
padding: '16',
|
|
29
|
+
enabledButton: {
|
|
30
|
+
...buttonStyle,
|
|
18
31
|
background: colorScheme === 'gray' ? 'neutral.95' : 'neutral.100',
|
|
19
|
-
|
|
20
|
-
borderColor: 'neutral.93',
|
|
21
|
-
borderRadius: '8',
|
|
22
|
-
'&[type="button"]:hover': {
|
|
32
|
+
_hover: {
|
|
23
33
|
background: 'purple.95',
|
|
24
34
|
},
|
|
25
|
-
|
|
35
|
+
_expanded: {
|
|
26
36
|
borderBottomLeftRadius: '0',
|
|
27
37
|
borderBottomRightRadius: '0',
|
|
28
38
|
},
|
|
29
39
|
},
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
40
|
+
disabledButton: {
|
|
41
|
+
...buttonStyle,
|
|
42
|
+
background: colorScheme === 'gray' ? 'neutral.95' : 'neutral.100',
|
|
43
|
+
cursor: 'default',
|
|
44
|
+
},
|
|
45
|
+
enabledIcon: {
|
|
46
|
+
...iconStyle,
|
|
47
|
+
},
|
|
48
|
+
disabledIcon: {
|
|
49
|
+
...iconStyle,
|
|
50
|
+
opacity: '0.4',
|
|
51
|
+
transform: 'none',
|
|
34
52
|
},
|
|
35
53
|
panel: {
|
|
36
54
|
padding: '16',
|
|
@@ -8,7 +8,6 @@ import {
|
|
|
8
8
|
AccordionIcon,
|
|
9
9
|
useAccordionStyles,
|
|
10
10
|
} from '@chakra-ui/react';
|
|
11
|
-
import Box from '../Box/Box';
|
|
12
11
|
import Text from '../Text/Text';
|
|
13
12
|
|
|
14
13
|
export interface AccordionItemProps extends AccordionPanelProps {
|
|
@@ -21,14 +20,12 @@ const AccordionItem = (props: AccordionItemProps) => {
|
|
|
21
20
|
const { buttonContent, children, id, ...rest } = props;
|
|
22
21
|
const styles = useAccordionStyles();
|
|
23
22
|
|
|
24
|
-
const ButtonComponent = children ? AccordionButton : Box;
|
|
25
|
-
|
|
26
23
|
return (
|
|
27
24
|
<ChakraAccordionItem sx={styles.item} id={id}>
|
|
28
|
-
<
|
|
25
|
+
<AccordionButton sx={children ? styles.enabledButton : styles.disabledButton}>
|
|
29
26
|
{isValidElement(buttonContent) ? buttonContent : <Text as="span">{buttonContent}</Text>}
|
|
30
|
-
<AccordionIcon
|
|
31
|
-
</
|
|
27
|
+
<AccordionIcon sx={children ? styles.enabledIcon : styles.disabledIcon} />
|
|
28
|
+
</AccordionButton>
|
|
32
29
|
{!!children && <AccordionPanel {...rest}>{children}</AccordionPanel>}
|
|
33
30
|
</ChakraAccordionItem>
|
|
34
31
|
);
|