@bitrise/bitkit 11.3.1-alpha-chakra.1 → 11.4.0

package/package.json

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

@@ -37,6 +37,7 @@ type TextTags =
   | 'var';
 
 export interface TextProps extends ChakraTextProps {
+  align?: ResponsiveValue<'center' | 'justify' | 'left' | 'right'>;
   /**
    * Any valid HTML text tag
    */
@@ -44,12 +45,13 @@ export interface TextProps extends ChakraTextProps {
   /**
    * Font weight
    */
-  fontWeight?: ResponsiveValue<'bold' | 'demiBold' | 'normal'>;
-  hasEllipsis?: boolean;
+  fontWeight?: ResponsiveValue<'bold' | 'normal'>;
   /**
    * Size config (https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=211%3A12)
    */
   size?: ResponsiveValue<TextSizes>;
+  textTransform?: ResponsiveValue<'capitalize' | 'lowercase' | 'none' | 'uppercase'>;
+  hasEllipsis?: boolean;
 }
 
 /**

package/src/Foundations/Typography/Typography.ts

@@ -15,7 +15,6 @@ const typography = {
   },
   fontWeights: {
     normal: 400,
-    demiBold: 600,
     bold: 700,
   },
   letterSpacings: {
@@ -25,41 +24,51 @@ const typography = {
     '4': '0.0375rem',
     '5': '0.05rem',
   },
+  lineHeights: {
+    '1': '1rem',
+    '2': '1.25rem',
+    '3': '1.5rem',
+    '4': '1.75rem',
+    '5': '2.25rem',
+    '6': '2.5rem',
+    '7': '3rem',
+    '8': '3.75rem',
+  },
 };
 
 export const textSizes = {
   sizes: {
     '1': {
       fontSize: '1',
-      lineHeight: '1rem',
+      lineHeight: '1',
     },
     '2': {
       fontSize: '2',
-      lineHeight: '1.25rem',
+      lineHeight: '2',
     },
     '3': {
       fontSize: '3',
-      lineHeight: '1.5rem',
+      lineHeight: '3',
     },
     '4': {
       fontSize: '4',
-      lineHeight: '1.75rem',
+      lineHeight: '4',
     },
     '5': {
       fontSize: '5',
-      lineHeight: '2.25rem',
+      lineHeight: '5',
     },
     '6': {
       fontSize: '6',
-      lineHeight: '2.5rem',
+      lineHeight: '6',
     },
     '7': {
       fontSize: '7',
-      lineHeight: '3rem',
+      lineHeight: '7',
     },
     '8': {
       fontSize: '8',
-      lineHeight: '3.75rem',
+      lineHeight: '8',
     },
   },
 };

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