@bitrise/bitkit 10.11.0-alpha-chakra.2 → 10.11.2

package/package.json

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

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Accordion from './Accordion';
+import AccordionItem from './AccordionItem';
+
+describe('Accordion', () => {
+  it('calls the onChange handler with the proper id if Accordion has a conditionally not rendered item', async () => {
+    const thirdId = 'third-item';
+    const thirdTitle = 'Third item';
+
+    const handleChange = jest.fn();
+
+    render(
+      <Accordion onChange={handleChange}>
+        <AccordionItem id="first" buttonContent="First item">
+          First content
+        </AccordionItem>
+        {false && (
+          <AccordionItem id="second" buttonContent="Second item">
+            Second content
+          </AccordionItem>
+        )}
+        <AccordionItem id={thirdId} buttonContent={thirdTitle}>
+          Third content
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    const thirdTab = await screen.findByText(thirdTitle);
+    await userEvent.click(thirdTab);
+
+    expect(handleChange).toHaveBeenCalledWith(['third-item'], [1]);
+  });
+});

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

@@ -7,25 +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',
-      },
-      _focusVisible: {
-        background: 'purple.95',
-        boxShadow: 'none',
+      '&[aria-expanded="true"]': {
+        borderBottomLeftRadius: '0',
+        borderBottomRightRadius: '0',
       },
     },
     icon: {

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

package/src/Components/Tabs/Tabs.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Tabs from './Tabs';
+import TabList from './TabList';
+import Tab from './Tab';
+import TabPanels from './TabPanels';
+import TabPanel from './TabPanel';
+
+describe('Tabs', () => {
+  it('calls the onChange handler with the proper id if TabList has a conditionally not rendered item', async () => {
+    const thirdTabId = 'third-tab';
+    const thirdTabTitle = 'Third tab';
+
+    const handleChange = jest.fn();
+
+    render(
+      <Tabs onChange={handleChange}>
+        <TabList>
+          <Tab id="first-tab">First tab</Tab>
+          {false && <Tab id="second-tab">Second tab</Tab>}
+          <Tab id={thirdTabId}>{thirdTabTitle}</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>First content</TabPanel>
+          {false && <TabPanel>Second content</TabPanel>}
+          <TabPanel>Third content</TabPanel>
+        </TabPanels>
+      </Tabs>,
+    );
+
+    const thirdTab = await screen.findByText(thirdTabTitle);
+    await userEvent.click(thirdTab);
+
+    expect(handleChange).toHaveBeenCalledWith(1, thirdTabId);
+  });
+});

package/src/Components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { isValidElement, ReactElement, useEffect, useState } from 'react';
 import { Tabs as ChakraTabs, TabsProps as ChakraTabsProps, forwardRef } from '@chakra-ui/react';
 import { useHistory } from '../../hooks';
 
@@ -8,13 +8,11 @@ export interface TabsProps extends ChakraTabsProps {
   withHistory?: boolean;
 }
 
-const getTabIds = (props: TabsProps) => {
-  const ids: string[] = [];
-  const tabs = React.Children.toArray(props.children)[0] as any;
-  React.Children.forEach(tabs.props.children, (c, index) => {
-    ids[index] = c?.props?.id;
-  });
-  return ids;
+const getTabIds = (props: TabsProps): string[] => {
+  const tabList = React.Children.toArray(props.children)[0] as ReactElement;
+  const tabs = React.Children.toArray(tabList.props.children) as ReactElement[];
+
+  return tabs.filter((item) => isValidElement(item)).map((item) => item.props.id);
 };
 
 /**