@bitrise/bitkit 10.11.0-alpha-chakra.1 → 10.11.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.11.0-alpha-chakra.1",
+  "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

@@ -7,21 +7,24 @@ const AccordionTheme: ComponentStyleConfig = {
       borderColor: 'neutral.93',
       borderRadius: '8',
       boxShadow: 'small',
-      overflow: 'hidden',
       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',
-      justifyContent: 'space-between',
-      _hover: {
+      borderRadius: '8',
+      '&[type="button"]:hover': {
         background: 'purple.95',
       },
-      _disabled: {
-        pointerEvents: 'none',
+      '&[aria-expanded="true"]': {
+        borderBottomLeftRadius: '0',
+        borderBottomRightRadius: '0',
       },
     },
     icon: {

package/src/Components/Accordion/Accordion.tsx

@@ -8,7 +8,7 @@ import {
 
 export interface AccordionProps extends Omit<ChakraAccordionProps, 'onChange'> {
   colorScheme?: 'white' | 'gray';
-  onChange: (ids: string[], indexes: number[]) => void;
+  onChange?: (ids: string[], indexes: number[]) => void;
 }
 
 const getItemIds = (props: AccordionProps) => {
@@ -20,17 +20,22 @@ 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;
   const itemIds = getItemIds(props);
 
   const onAccordionChange = (indexes: ExpandedIndex) => {
-    const indexArray = Object.values(indexes).sort();
-    onChange(
-      indexArray.map((i: number) => itemIds[i]),
-      indexArray,
-    );
+    if (onChange) {
+      const indexArray = Object.values(indexes).sort();
+      onChange(
+        indexArray.map((i: number) => itemIds[i]),
+        indexArray,
+      );
+    }
   };
 
   return (

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>
   );