@bitrise/bitkit 12.39.1 → 12.41.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.39.1",
+  "version": "12.41.0",
   "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/IconButton/IconButton.tsx

@@ -1,11 +1,12 @@
 import { IconButton as ChakraIconButton, IconButtonProps as ChakraIconButtonProps, forwardRef } from '@chakra-ui/react';
-import Icon, { TypeIconName } from '../Icon/Icon';
+import Icon, { IconProps, TypeIconName } from '../Icon/Icon';
 import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
 
 export interface IconButtonProps extends ChakraIconButtonProps {
   as?: 'a' | 'button';
   iconName: TypeIconName;
   isDanger?: boolean;
+  iconSize?: IconProps['size'];
   isTooltipDisabled?: boolean;
   label?: string;
   size?: 'small' | 'medium';
@@ -21,6 +22,7 @@ const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
   const {
     as,
     iconName,
+    iconSize,
     isDanger,
     isDisabled,
     isTooltipDisabled,
@@ -33,7 +35,7 @@ const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
   } = props;
   const properties: ChakraIconButtonProps = {
     as: isDisabled ? 'button' : as,
-    icon: <Icon name={iconName} size={size === 'small' ? '16' : '24'} />,
+    icon: <Icon name={iconName} size={iconSize || (size === 'small' ? '16' : '24')} />,
     isDisabled,
     size,
     variant: isDanger ? `${variant}--danger` : variant,

package/src/Components/Table/TableIconButton.tsx

@@ -0,0 +1,10 @@
+import { forwardRef } from '@chakra-ui/react';
+import IconButton, { IconButtonProps } from '../IconButton/IconButton';
+
+export type TableIconButtonProps = Omit<IconButtonProps, 'iconSize' | 'size' | 'variant'>;
+
+const TableIconButton = forwardRef<TableIconButtonProps, 'button'>((props, ref) => (
+  <IconButton {...props} iconSize="24" size="small" variant="tertiary" ref={ref} />
+));
+
+export default TableIconButton;

package/src/index.ts

@@ -295,3 +295,9 @@ export { default as LinkBox } from './Components/LinkBox/LinkBox';
 
 export type { LinkOverlayProps } from './Components/LinkOverlay/LinkOverlay';
 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,
   },
 };