@bitrise/bitkit 10.11.0 → 10.11.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.11.0",
+  "version": "10.11.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Accordion/Accordion.stories.tsx

@@ -25,18 +25,18 @@ const onButtonClick = (e: MouseEvent<HTMLButtonElement>) => {
   e.stopPropagation();
 };
 
-const ButtonContentElement = () => {
+const ButtonContentElement = ({ title }: { title: string }) => {
   return (
     <Box display="flex" alignItems="center" flexGrow={1}>
       <Icon name="Doc" />
       <Text as="p" align="left" size="3" margin="0 auto 0 1rem">
-        The buttonContent is a React element
+        {title}
         <br />
         <Text as="span" size="2" textColor="neutral.40">
           Generated by clone-build workflow
         </Text>
       </Text>
-      <Button as="a" size="small" onClick={onButtonClick} leftIconName="Download">
+      <Button as="a" href="#" size="small" onClick={onButtonClick} leftIconName="Download">
         Download
       </Button>
     </Box>
@@ -48,9 +48,13 @@ export const DefaultVariant: ComponentStory<typeof Accordion> = (props) => (
     <AccordionItem buttonContent="The buttonContent is a string" fontSize="2" id="first">
       Content - you can use any style prop on AccordionItem
     </AccordionItem>
-    <AccordionItem buttonContent={<ButtonContentElement />} fontSize="2" id="second">
+    <AccordionItem
+      buttonContent={<ButtonContentElement title="The buttonContent is a React element" />}
+      fontSize="2"
+      id="second"
+    >
       Content - you can use any style prop on AccordionItem
     </AccordionItem>
-    <AccordionItem buttonContent="Without children the button is disabled" id="third" />
+    <AccordionItem buttonContent={<ButtonContentElement title="Without children" />} id="third" />
   </Accordion>
 );

package/src/Components/Accordion/Accordion.theme.ts

@@ -10,19 +10,18 @@ const AccordionTheme: ComponentStyleConfig = {
       marginBottom: '16',
     },
     button: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
       width: '100%',
       padding: '16',
       background: colorScheme === 'gray' ? 'neutral.95' : 'neutral.100',
       borderBottom: '1px solid',
       borderColor: 'neutral.93',
       borderRadius: '8',
-      justifyContent: 'space-between',
-      _hover: {
+      '&[type="button"]:hover': {
         background: 'purple.95',
       },
-      _disabled: {
-        pointerEvents: 'none',
-      },
       '&[aria-expanded="true"]': {
         borderBottomLeftRadius: '0',
         borderBottomRightRadius: '0',

package/src/Components/Accordion/Accordion.tsx

@@ -20,6 +20,9 @@ const getItemIds = (props: AccordionProps) => {
   return ids;
 };
 
+/**
+ * Accordions display a list of high-level options that can expand/collapse to reveal more information.
+ */
 const Accordion = (props: AccordionProps) => {
   const prefersReducedMotion = usePrefersReducedMotion();
   const { children, colorScheme, onChange, ...rest } = props;

package/src/Components/Accordion/AccordionItem.tsx

@@ -8,6 +8,7 @@ import {
   AccordionIcon,
   useMultiStyleConfig,
 } from '@chakra-ui/react';
+import Box from '../Box/Box';
 import Text from '../Text/Text';
 
 export interface AccordionItemProps extends AccordionPanelProps {
@@ -20,12 +21,14 @@ const AccordionItem = (props: AccordionItemProps) => {
   const { buttonContent, children, id, ...rest } = props;
   const styles = useMultiStyleConfig('Accordion');
 
+  const ButtonComponent = children ? AccordionButton : Box;
+
   return (
-    <ChakraAccordionItem sx={styles.item} id={id} isDisabled={!children}>
-      <AccordionButton>
+    <ChakraAccordionItem sx={styles.item} id={id}>
+      <ButtonComponent sx={styles.button}>
         {isValidElement(buttonContent) ? buttonContent : <Text as="span">{buttonContent}</Text>}
-        <AccordionIcon />
-      </AccordionButton>
+        <AccordionIcon opacity={children ? 1 : 0.4} />
+      </ButtonComponent>
       {!!children && <AccordionPanel {...rest}>{children}</AccordionPanel>}
     </ChakraAccordionItem>
   );