@bitrise/bitkit 12.40.0 → 12.41.1

package/package.json

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

package/src/Components/ExpandableCard/ExpandableCard.theme.ts

@@ -0,0 +1,34 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['button', 'chevron']);
+
+const ExpandableCardTheme = defineMultiStyleConfig({
+  baseStyle: ({ isOpen }) => ({
+    button: {
+      borderTopStartRadius: '8',
+      borderTopEndRadius: '8',
+      borderBottomStartRadius: isOpen ? undefined : '8',
+      borderBottomEndRadius: isOpen ? undefined : '8',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      width: '100%',
+      cursor: 'pointer',
+      backgroundColor: isOpen ? 'neutral.95' : 'neutral.100',
+      borderBottom: isOpen ? '1px solid' : undefined,
+      borderBottomColor: isOpen ? 'neutral.90' : undefined,
+      _hover: {
+        backgroundColor: 'neutral.93',
+      },
+      _active: {
+        backgroundColor: 'neutral.90',
+      },
+    },
+    chevron: {
+      transform: isOpen ? 'rotate(-180deg)' : undefined,
+      transition: 'transform 0.2s ease',
+    },
+  }),
+});
+
+export default ExpandableCardTheme;

package/src/Components/ExpandableCard/ExpandableCard.tsx

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { forwardRef, useDisclosure, useMultiStyleConfig } from '@chakra-ui/react';
+import Box from '../Box/Box';
+import Collapse from '../Collapse/Collapse';
+import Card, { CardProps } from '../Card/Card';
+import Icon from '../Icon/Icon';
+
+export interface ExpandableCardProps
+  extends Omit<
+    CardProps,
+    'p | pt | paddingTop | pr | paddingRight | pe | paddingEnd | pb | paddingBottom | pl | paddingLeft | ps | paddingStart | px | paddingX | py | paddingY | paddingInlineStart | paddingInlineEnd'
+  > {
+  buttonContent: ReactNode;
+  isExpanded?: boolean;
+}
+const ExpandableCard = forwardRef<ExpandableCardProps, 'div'>((props, ref) => {
+  const { buttonContent, children, isExpanded, padding = '16', ...rest } = props;
+
+  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: isExpanded });
+
+  const style = useMultiStyleConfig('ExpandableCard', { isOpen });
+
+  return (
+    <Card variant="outline" {...rest} ref={ref}>
+      <Box as="button" onClick={onToggle} padding={padding} __css={style.button}>
+        {buttonContent}
+        <Icon name="ChevronDown" __css={style.chevron} />
+      </Box>
+      <Collapse in={isOpen}>
+        <Box padding={padding}>{children}</Box>
+      </Collapse>
+    </Card>
+  );
+});
+
+export default ExpandableCard;

package/src/Components/Table/Tr.tsx

@@ -7,8 +7,8 @@ import {
   useDisclosure,
   useTableStyles,
 } from '@chakra-ui/react';
-import IconButton from '../IconButton/IconButton';
 import Td from './Td';
+import TableIconButton from './TableIconButton';
 
 export type RowProps = ChakraTableRowProps;
 
@@ -48,13 +48,11 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
       <>
         <ChakraTr {...properties} ref={ref}>
           <Td sx={css.expandTd}>
-            <IconButton
+            <TableIconButton
               iconName="ChevronDown"
               isTooltipDisabled
               aria-label={isOpen ? 'Collapse row' : 'Expand row'}
               onClick={onToggleClick}
-              size="small"
-              variant="tertiary"
               sx={{
                 '> svg': {
                   transform: isOpen ? 'rotate(-180deg)' : 'rotate(0deg)',

package/src/index.ts

@@ -298,3 +298,6 @@ export { default as LinkOverlay } from './Components/LinkOverlay/LinkOverlay';
 
 export type { TableIconButtonProps } from './Components/Table/TableIconButton';
 export { default as TableIconButton } from './Components/Table/TableIconButton';
+
+export type { ExpandableCardProps } from './Components/ExpandableCard/ExpandableCard';
+export { default as ExpandableCard } from './Components/ExpandableCard/ExpandableCard';

package/src/theme.ts

@@ -39,6 +39,7 @@ import Tag from './Components/Tag/Tag.theme';
 import Note from './Components/Note/Note.theme';
 import CodeBlock from './Components/CodeBlock/CodeBlock.theme';
 import DefinitionTooltip from './Components/DefinitionTooltip/DefinitionTooltip.theme';
+import ExpandableCard from './Components/ExpandableCard/ExpandableCard.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -125,6 +126,7 @@ const theme = {
     Note,
     CodeBlock,
     DefinitionTooltip,
+    ExpandableCard,
   },
 };