@bitrise/bitkit 11.3.1-alpha-chakra.2 → 11.4.1

package/package.json

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

package/src/Components/Accordion/Accordion.tsx

@@ -0,0 +1,33 @@
+import {
+  Accordion as ChakraAccordion,
+  AccordionProps as ChakraAccordionProps,
+  usePrefersReducedMotion,
+} from '@chakra-ui/react';
+
+export type AccordionProps = Omit<ChakraAccordionProps, 'onChange' | 'defaultIndex'> & {
+  defaultIndex: number[];
+};
+
+/**
+ * Accordions display a list of high-level options that can expand/collapse to reveal more information.
+ */
+const Accordion = (props: AccordionProps) => {
+  const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
+  const { children, colorScheme, defaultIndex, variant, ...rest } = props;
+
+  return (
+    <ChakraAccordion
+      allowMultiple
+      allowToggle
+      colorScheme={colorScheme}
+      variant={variant}
+      reduceMotion={prefersReducedMotion}
+      defaultIndex={defaultIndex}
+      {...rest}
+    >
+      {children}
+    </ChakraAccordion>
+  );
+};
+
+export default Accordion;

package/src/Components/Accordion/AccordionItem.tsx

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import {
+  AccordionItem as ChakraAccordionItem,
+  AccordionItemProps as ChakraAccordionItemProps,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+  useAccordionStyles,
+} from '@chakra-ui/react';
+
+export interface AccordionItemProps {
+  buttonContent: ReactNode | ((props: { isExpanded: boolean; isDisabled: boolean }) => ReactNode);
+  children?: ReactNode | ((props: { isExpanded: boolean; isDisabled: boolean }) => ReactNode);
+  id?: ChakraAccordionItemProps['id'];
+}
+
+const AccordionItem = (props: AccordionItemProps) => {
+  const { buttonContent, children, id } = props;
+  const styles = useAccordionStyles();
+
+  return (
+    <ChakraAccordionItem sx={styles.item} id={id}>
+      {(renderProps) => (
+        <>
+          <AccordionButton sx={styles.button}>
+            {typeof buttonContent === 'function' ? buttonContent(renderProps) : buttonContent}
+            <AccordionIcon sx={styles.icon} />
+          </AccordionButton>
+          {!!children && (
+            <AccordionPanel>{typeof children === 'function' ? children(renderProps) : children}</AccordionPanel>
+          )}
+        </>
+      )}
+    </ChakraAccordionItem>
+  );
+};
+
+export default AccordionItem;

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

@@ -1,4 +1,6 @@
+import { StyleFunctionProps } from '@chakra-ui/styled-system';
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { CSSObject } from '@emotion/react';
 
 type ColorObj = {
   [key: string]: {
@@ -15,6 +17,8 @@ type VariantObj = {
   [key: string]: {
     borderRadius: string;
     boxShadow: string;
+    marginBottom: string;
+    border?: string;
   };
 };
 
@@ -64,59 +68,103 @@ const variants: VariantObj = {
   legacy: {
     borderRadius: '8',
     boxShadow: 'small',
+    marginBottom: '16',
   },
   flat: {
     borderRadius: '0',
     boxShadow: 'none',
+    marginBottom: '16',
   },
 };
 
-const AccordionTheme: ComponentStyleConfig = {
-  baseStyle: ({ colorScheme, variant }) => ({
-    item: {
-      border: '1px solid',
-      borderColor: colors[colorScheme].border,
-      borderRadius: variants[variant].borderRadius,
-      boxShadow: variants[variant].boxShadow,
-      marginBottom: '16',
-      _last: {
-        marginBottom: 0,
-      },
-    },
-    enabledButton: {
-      ...buttonStyle,
-      borderColor: colors[colorScheme].border,
-      borderRadius: variants[variant].borderRadius,
-      background: colors[colorScheme].enabledButton,
-      _hover: {
-        background: colors[colorScheme].hover,
-      },
-      _expanded: {
-        borderBottomLeftRadius: '0',
-        borderBottomRightRadius: '0',
-      },
+const LegacyBaseStyle: ({ colorScheme, variant }: Pick<StyleFunctionProps, 'colorScheme' | 'variant'>) => CSSObject = ({
+  colorScheme,
+  variant,
+}) => ({
+  item: {
+    border: variants[variant].border ?? '1px solid',
+    borderColor: colors[colorScheme].border,
+    borderRadius: variants[variant].borderRadius,
+    boxShadow: variants[variant].boxShadow,
+    marginBottom: variants[variant].marginBottom,
+    _last: {
+      marginBottom: 0,
     },
-    disabledButton: {
-      ...buttonStyle,
-      borderRadius: variants[variant].borderRadius,
-      background: colors[colorScheme].disabledButton,
-      borderColor: colors[colorScheme].border,
-      cursor: 'default',
+  },
+  enabledButton: {
+    ...buttonStyle,
+    borderColor: colors[colorScheme].border,
+    borderRadius: variants[variant].borderRadius,
+    background: colors[colorScheme].enabledButton,
+    _hover: {
+      background: colors[colorScheme].hover,
     },
-    enabledIcon: {
-      ...iconStyle,
-      color: colors[colorScheme].enabledIcon,
+    _expanded: {
+      borderBottomLeftRadius: '0',
+      borderBottomRightRadius: '0',
     },
-    disabledIcon: {
-      ...iconStyle,
-      opacity: '0.4',
-      transform: 'none',
-      color: colors[colorScheme].disabledIcon,
+  },
+  disabledButton: {
+    ...buttonStyle,
+    borderRadius: variants[variant].borderRadius,
+    background: colors[colorScheme].disabledButton,
+    borderColor: colors[colorScheme].border,
+    cursor: 'default',
+  },
+  enabledIcon: {
+    ...iconStyle,
+    color: colors[colorScheme].enabledIcon,
+  },
+  disabledIcon: {
+    ...iconStyle,
+    opacity: '0.4',
+    transform: 'none',
+    color: colors[colorScheme].disabledIcon,
+  },
+  panel: {
+    padding: '16',
+  },
+});
+
+const BaseStyle: () => CSSObject = () => ({
+  item: {
+    borderRadius: 0,
+    boxShadow: 'none',
+    borderTopStyle: 'solid',
+    borderTopWidth: '1px',
+    borderTopColor: 'neutral.90',
+  },
+  button: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    paddingInline: '16',
+    paddingBlock: '20',
+    borderColor: 'neutral.93',
+    _hover: {
+      background: 'neutral.93',
     },
-    panel: {
-      padding: '16',
+    _expanded: {
+      borderBottomLeftRadius: '0',
+      borderBottomRightRadius: '0',
+      background: 'neutral.90',
     },
-  }),
+  },
+  icon: {
+    width: '24',
+    height: '24',
+    marginLeft: '16',
+  },
+  panel: {
+    padding: '16',
+  },
+});
+
+const AccordionTheme: ComponentStyleConfig = {
+  baseStyle: ({ colorScheme, variant }) => {
+    return variant === 'legacy' || variant === 'flat' ? LegacyBaseStyle({ colorScheme, variant }) : BaseStyle();
+  },
 };
 
 export default AccordionTheme;

package/src/index.ts

@@ -159,6 +159,12 @@ export { default as Notification } from './Components/Notification/Notification'
 
 export { BREAKPOINTS } from './Foundations/Breakpoints/Breakpoints';
 
+export type { AccordionProps } from './Components/Accordion/Accordion';
+export { default as Accordion } from './Components/Accordion/Accordion';
+
+export type { AccordionItemProps } from './Components/Accordion/AccordionItem';
+export { default as AccordionItem } from './Components/Accordion/AccordionItem';
+
 export type { LegacyAccordionProps } from './Components/AccordionLegacy/LegacyAccordion';
 export { default as LegacyAccordion } from './Components/AccordionLegacy/LegacyAccordion';