@bitrise/bitkit 10.10.0-alpha-dropdown-release.4 → 10.11.0-alpha-chakra.2

package/package.json

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

package/src/Components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,56 @@
+import { MouseEvent } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Box from '../Box/Box';
+import Button from '../Button/Button';
+import Icon from '../Icon/Icon';
+import Text from '../Text/Text';
+import Accordion from './Accordion';
+import AccordionItem from './AccordionItem';
+
+export default {
+  title: 'Components/Accordion',
+  component: Accordion,
+  args: {
+    colorScheme: 'white',
+  },
+  argTypes: {
+    onChange: {
+      action: 'onChange event',
+    },
+  },
+  subcomponents: { AccordionItem },
+} as ComponentMeta<typeof Accordion>;
+
+const onButtonClick = (e: MouseEvent<HTMLButtonElement>) => {
+  e.stopPropagation();
+};
+
+const ButtonContentElement = () => {
+  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
+        <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">
+        Download
+      </Button>
+    </Box>
+  );
+};
+
+export const DefaultVariant: ComponentStory<typeof Accordion> = (props) => (
+  <Accordion {...props} marginLeft="32">
+    <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">
+      Content - you can use any style prop on AccordionItem
+    </AccordionItem>
+    <AccordionItem buttonContent="Without children the button is disabled" id="third" />
+  </Accordion>
+);

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

@@ -0,0 +1,42 @@
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+
+const AccordionTheme: ComponentStyleConfig = {
+  baseStyle: ({ colorScheme }) => ({
+    item: {
+      border: '1px solid',
+      borderColor: 'neutral.93',
+      borderRadius: '8',
+      boxShadow: 'small',
+      overflow: 'hidden',
+      marginBottom: '16',
+    },
+    button: {
+      width: '100%',
+      padding: '16',
+      background: colorScheme === 'gray' ? 'neutral.95' : 'neutral.100',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.93',
+      justifyContent: 'space-between',
+      _hover: {
+        background: 'purple.95',
+      },
+      _disabled: {
+        pointerEvents: 'none',
+      },
+      _focusVisible: {
+        background: 'purple.95',
+        boxShadow: 'none',
+      },
+    },
+    icon: {
+      width: '24',
+      height: '24',
+      marginLeft: '16',
+    },
+    panel: {
+      padding: '16',
+    },
+  }),
+};
+
+export default AccordionTheme;

package/src/Components/Accordion/Accordion.tsx

@@ -0,0 +1,55 @@
+import { Children } from 'react';
+import {
+  Accordion as ChakraAccordion,
+  AccordionProps as ChakraAccordionProps,
+  ExpandedIndex,
+  usePrefersReducedMotion,
+} from '@chakra-ui/react';
+
+export interface AccordionProps extends Omit<ChakraAccordionProps, 'onChange'> {
+  colorScheme?: 'white' | 'gray';
+  onChange?: (ids: string[], indexes: number[]) => void;
+}
+
+const getItemIds = (props: AccordionProps) => {
+  const ids: string[] = [];
+  const items = Children.toArray(props.children);
+  items.forEach((item: any, index: number) => {
+    ids[index] = item?.props?.id;
+  });
+  return ids;
+};
+
+const Accordion = (props: AccordionProps) => {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const { children, colorScheme, onChange, ...rest } = props;
+  const itemIds = getItemIds(props);
+
+  const onAccordionChange = (indexes: ExpandedIndex) => {
+    if (onChange) {
+      const indexArray = Object.values(indexes).sort();
+      onChange(
+        indexArray.map((i: number) => itemIds[i]),
+        indexArray,
+      );
+    }
+  };
+
+  return (
+    <ChakraAccordion
+      allowMultiple
+      allowToggle
+      colorScheme={colorScheme}
+      reduceMotion={prefersReducedMotion}
+      onChange={onAccordionChange}
+      {...rest}
+    >
+      {children}
+    </ChakraAccordion>
+  );
+};
+
+Accordion.defaultProps = {
+  colorScheme: 'white',
+};
+export default Accordion;

package/src/Components/Accordion/AccordionItem.tsx

@@ -0,0 +1,34 @@
+import { ReactNode, isValidElement } from 'react';
+import {
+  AccordionItem as ChakraAccordionItem,
+  AccordionItemProps as ChakraAccordionItemProps,
+  AccordionButton,
+  AccordionPanel,
+  AccordionPanelProps,
+  AccordionIcon,
+  useMultiStyleConfig,
+} from '@chakra-ui/react';
+import Text from '../Text/Text';
+
+export interface AccordionItemProps extends AccordionPanelProps {
+  buttonContent: ReactNode;
+  children?: ReactNode;
+  id?: ChakraAccordionItemProps['id'];
+}
+
+const AccordionItem = (props: AccordionItemProps) => {
+  const { buttonContent, children, id, ...rest } = props;
+  const styles = useMultiStyleConfig('Accordion');
+
+  return (
+    <ChakraAccordionItem sx={styles.item} id={id} isDisabled={!children}>
+      <AccordionButton>
+        {isValidElement(buttonContent) ? buttonContent : <Text as="span">{buttonContent}</Text>}
+        <AccordionIcon />
+      </AccordionButton>
+      {!!children && <AccordionPanel {...rest}>{children}</AccordionPanel>}
+    </ChakraAccordionItem>
+  );
+};
+
+export default AccordionItem;

package/src/index.ts

@@ -153,3 +153,9 @@ export {
 } from './Components/Dropdown/Dropdown';
 
 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';

package/src/theme.ts

@@ -1,3 +1,4 @@
+import Accordion from './Components/Accordion/Accordion.theme';
 import Avatar from './Components/Avatar/Avatar.theme';
 import Badge from './Components/Badge/Badge.theme';
 import Breadcrumb from './Components/Breadcrumb/Breadcrumb.theme';
@@ -66,6 +67,7 @@ const theme = {
     },
   },
   components: {
+    Accordion,
     Avatar,
     Badge,
     Breadcrumb,