@conveyorhq/arrow-ds 2.0.0-beta.1 → 2.0.0-beta.10

package/src/components/Accordion/Accordion.tsx

@@ -1,82 +1,247 @@
-import React, { ReactNode, useCallback, useRef, useState } from "react";
+import React from "react";
 import classNames from "classnames";
 import { Transition } from "react-spring/renderprops";
 import useComponentSize from "@rehooks/component-size";
 import { useId } from "@reach/auto-id";
+import mergeRefs from "react-merge-refs";
+
+import { bemHOF } from "../../utilities";
+import { useDisclosure } from "../../hooks";
+import { ORIENTATION } from "../../types";
 
 import { BoxProps, Box } from "../Box";
 import { Flex } from "../Flex";
+import { Stack, StackProps } from "../Stack";
 import { Heading } from "../Heading";
-import { Icon, ICON_TYPE } from "../Icon";
-import { bemHOF } from "../../utilities/bem";
-import { useDisclosure } from "../../hooks";
+import { Icon, IconProps, ICON_TYPE } from "../Icon";
+
+import type {
+  AccordionOwnProps,
+  AccordionItemOwnProps,
+  AccordionDisclosureProps,
+  AccordionGroupOwnProps,
+} from "./types";
+import {
+  AccordionItemContext,
+  useAccordionItemContext,
+  AccordionGroupContext,
+  useAccordionGroupContext,
+} from "./context";
 
 const cn = bemHOF("Accordion");
 
-export interface AccordionProps extends BoxProps {
-  /**
-   * The displayed text of the `Accordion` when closed
-   */
-  title: string;
+/**
+ * Accordion.Group
+ * =============================================================================
+ */
+export type AccordionGroupProps = AccordionGroupOwnProps &
+  Pick<StackProps, "children" | "spacing" | "className">;
 
-  /**
-   * If true, this shows a green indicator next to the title
-   */
-  isActive?: boolean;
+export const AccordionGroup = ({
+  children,
+  spacing = 0,
+  defaultValue,
+  disableAnimation,
+  className,
+  ...rest
+}: AccordionGroupProps) => {
+  const totalItems = React.Children.count(children);
+  return (
+    <AccordionGroupContext.Provider
+      value={{ defaultValue, disableAnimation, totalItems }}
+    >
+      <Stack
+        orientation={ORIENTATION.VERTICAL}
+        spacing={spacing}
+        className={className}
+        {...rest}
+      >
+        {children}
+      </Stack>
+    </AccordionGroupContext.Provider>
+  );
+};
 
-  /**
-   * CSS value to define a max height of the opened Accordion content.
-   * If the children exceed the height of the container, it will scroll.
-   */
-  maxHeight?: string;
+/**
+ * Accordion.Item
+ * =============================================================================
+ */
+export type AccordionItemProps = AccordionItemOwnProps & BoxProps;
 
-  /**
-   * Whether or not the accordion item is open / visible.
-   */
-  defaultIsOpen?: boolean;
+export const AccordionItem = ({
+  value,
+  defaultIsOpen: defaultIsOpenProp,
+  children,
+  className,
+  ...rest
+}: AccordionItemProps) => {
+  const { defaultValue } = useAccordionGroupContext();
 
   /**
-   * Add an icon or integration logo to the left of the header title
+   * To remain backwards compatible with the `defaultIsOpen` prop, we need to
+   * perform an extra conditional check to determine if `defaultIsOpenProp`
+   * has been defined.
    */
-  iconSlot?: ReactNode;
+  const hasDefaultValue =
+    typeof defaultValue === "undefined" ? false : defaultValue === value;
+  const defaultIsOpen =
+    typeof defaultIsOpenProp === "undefined"
+      ? hasDefaultValue
+      : defaultIsOpenProp;
+
+  const { isOpen, onToggle, onClose } = useDisclosure(defaultIsOpen);
+  const id = `accordion-${useId()}`;
+  const buttonId = `${id}-button`;
+  const contentId = `${id}-content`;
+
+  return (
+    <AccordionItemContext.Provider
+      value={{
+        defaultIsOpen,
+        isOpen,
+        onToggle,
+        onClose,
+        buttonId,
+        contentId,
+        value,
+      }}
+    >
+      <Box
+        data-component="accordion"
+        className={classNames(cn(), className, {
+          [cn({ m: "isOpen" })]: isOpen,
+        })}
+        {...rest}
+      >
+        {children}
+      </Box>
+    </AccordionItemContext.Provider>
+  );
+};
+
+/**
+ * Accordion.Button
+ * =============================================================================
+ */
+type AccordionButtonChildProps = Omit<AccordionDisclosureProps, "onToggle">;
+type AccordionButtonChildFunction = {
+  children(props: AccordionButtonChildProps): React.ReactElement;
+};
+type AccordionButtonOwnProps =
+  | AccordionButtonChildFunction
+  | { children: React.ReactNode };
 
+export type AccordionButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  AccordionButtonOwnProps;
+
+export const AccordionButton = React.forwardRef<
+  HTMLButtonElement,
+  AccordionButtonProps
+>((props, forwardedRef) => {
+  const { children, className, onClick, disabled = false, ...rest } = props;
+  const {
+    buttonId,
+    contentId,
+    isOpen,
+    onToggle,
+    onClose,
+  } = useAccordionItemContext();
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const ref = mergeRefs<HTMLButtonElement>([forwardedRef, buttonRef]);
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={className}
+      id={buttonId}
+      aria-controls={contentId}
+      aria-expanded={isOpen}
+      aria-disabled={disabled}
+      disabled={disabled}
+      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+        if (onClick) {
+          onClick(event);
+        }
+        if (onToggle) {
+          onToggle();
+        }
+      }}
+      {...rest}
+    >
+      {typeof children === "function"
+        ? children({ isOpen, onClose })
+        : children}
+    </button>
+  );
+});
+
+/**
+ * Accordion.Icon
+ * =============================================================================
+ */
+export type AccordionIconProps = {
+  className?: string;
   /**
-   * Removes padding from the Accordion's content
+   * The initial direction that the chevron should point; when open, it will
+   * point down, unless direction=down, then it will point up
    */
-  removePadding?: ReactNode;
-}
+  direction?: "up" | "down" | "left" | "right";
+} & Pick<IconProps, "color">;
 
-export const AccordionGroup = ({
-  children,
+export const AccordionIcon = ({
   className,
-  ...rest
-}: {
-  children: ReactNode;
+  direction = "down",
+  color,
+}: AccordionIconProps) => {
+  const icon = {
+    up: ICON_TYPE.CHEVRON_UP,
+    down: ICON_TYPE.CHEVRON_DOWN,
+    left: ICON_TYPE.CHEVRON_LEFT,
+    right: ICON_TYPE.CHEVRON_RIGHT,
+  };
+
+  return (
+    <Icon
+      className={classNames([cn({ e: "icon" }), className])}
+      data-direction={direction}
+      icon={icon[direction]}
+      color={color}
+    />
+  );
+};
+
+/**
+ * Accordion.Content
+ * =============================================================================
+ */
+export type AccordionContentProps = {
+  children: React.ReactNode;
+  maxHeight?: string;
+  style?: React.CSSProperties;
   className?: string;
-}) => (
-  <Flex className={classNames("flex-col", className)} {...rest}>
-    {children}
-  </Flex>
-);
-
-export const Accordion = ({
-  title,
-  isActive,
-  maxHeight,
+};
+
+export const AccordionContent = ({
   children,
-  defaultIsOpen = false,
-  iconSlot,
+  maxHeight,
+  style,
   className,
-  removePadding,
   ...rest
-}: AccordionProps) => {
-  const { isOpen, onToggle } = useDisclosure(defaultIsOpen);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  const [childrenRef, setChildrenRef] = useState<
+}: AccordionContentProps) => {
+  const { disableAnimation } = useAccordionGroupContext();
+  const {
+    buttonId,
+    contentId,
+    defaultIsOpen,
+    isOpen,
+  } = useAccordionItemContext();
+  const [childrenRef, setChildrenRef] = React.useState<
     React.MutableRefObject<null | HTMLDivElement>
   >({ current: null });
-  const onRefChange = useCallback((node) => {
+
+  const onRefChange = React.useCallback((node) => {
     if (node !== null) {
       setChildrenRef({ current: node });
     }
@@ -85,42 +250,79 @@ export const Accordion = ({
   const { height } = useComponentSize(childrenRef);
   const heightObj = { height };
 
-  const id = `accordion:${useId()}`;
-  const buttonId = `${id}-button`;
-  const contentId = `${id}-content`;
+  const [enableTransition, setEnableTransition] = React.useState(
+    !defaultIsOpen,
+  );
 
-  const [enableTransition, setEnableTransition] = useState(!defaultIsOpen);
+  return (
+    <Transition
+      items={isOpen}
+      from={{ height: 0, opacity: 0 }}
+      enter={{ height, opacity: 1 }}
+      leave={{ height: 0, opacity: 0 }}
+      update={heightObj}
+      onRest={() => {
+        if (defaultIsOpen && isOpen) {
+          setEnableTransition(true);
+        }
+      }}
+      immediate={disableAnimation || !enableTransition}
+    >
+      {(show) =>
+        show
+          ? (styles: React.CSSProperties) => (
+              <Box
+                className={classNames("overflow-hidden box-content", className)}
+                style={{ ...styles, ...style }}
+                aria-labelledby={buttonId}
+                id={contentId}
+                role="region"
+                {...rest}
+              >
+                <Box
+                  ref={onRefChange}
+                  className={classNames(maxHeight && "overflow-y-auto")}
+                  style={maxHeight ? { maxHeight } : undefined}
+                >
+                  {children}
+                </Box>
+              </Box>
+            )
+          : null
+      }
+    </Transition>
+  );
+};
 
-  const handleItemClick = () => {
-    if (isOpen && buttonRef.current !== null) {
-      buttonRef.current.blur();
-    }
-    onToggle();
-  };
+/**
+ * Accordion
+ * =============================================================================
+ */
+export type AccordionProps = AccordionOwnProps & BoxProps;
+
+export const Accordion = (props: AccordionProps) => {
+  const {
+    title,
+    isActive,
+    maxHeight,
+    children,
+    iconSlot,
+    className,
+    removePadding,
+    ...rest
+  } = props;
 
   return (
-    <Box
-      className={classNames(cn(), className, {
-        [cn({ m: "isOpen" })]: isOpen,
-      })}
-      {...rest}
-    >
+    <AccordionItem className={className} {...rest}>
       <Heading.H5>
-        <button
-          type="button"
-          onClick={handleItemClick}
+        <AccordionButton
           className={classNames(cn({ e: "button" }), {
             [cn({ e: "button", m: "isActive" })]: isActive,
           })}
-          ref={buttonRef}
-          id={buttonId}
-          aria-controls={contentId}
-          aria-expanded={isOpen}
-          aria-disabled="false"
         >
           <Flex className="items-center" as="span">
             {iconSlot && (
-              <Box className={classNames(cn({ e: "icon" }))} as="span">
+              <Box className={classNames(cn({ e: "iconSlot" }))} as="span">
                 {iconSlot}
               </Box>
             )}
@@ -130,45 +332,24 @@ export const Accordion = ({
             icon={ICON_TYPE.CHEVRON_DOWN}
             className={cn({ e: "chevronIcon" })}
           />
-        </button>
+        </AccordionButton>
       </Heading.H5>
-      <Transition
-        items={isOpen}
-        from={{ height: 0 }}
-        enter={{ height }}
-        leave={{ height: 0 }}
-        update={heightObj}
-        onRest={() => {
-          if (defaultIsOpen && isOpen) {
-            setEnableTransition(true);
-          }
-        }}
-        immediate={!enableTransition}
-      >
-        {(show) => {
-          return (
-            show &&
-            ((props) => (
-              <div style={props} className={cn({ e: "content" })}>
-                <Box
-                  ref={onRefChange}
-                  className={classNames(
-                    cn({ e: "children" }),
-                    !removePadding && cn({ e: "children", m: "padded" }),
-                  )}
-                  style={maxHeight ? { maxHeight } : undefined}
-                  id={contentId}
-                  aria-labelledby={buttonId}
-                >
-                  {children}
-                </Box>
-              </div>
-            ))
-          );
-        }}
-      </Transition>
-    </Box>
+      <AccordionContent className={cn({ e: "content" })} maxHeight={maxHeight}>
+        <Box
+          className={classNames(
+            cn({ e: "children" }),
+            !removePadding && cn({ e: "children", m: "padded" }),
+          )}
+        >
+          {children}
+        </Box>
+      </AccordionContent>
+    </AccordionItem>
   );
 };
 
 Accordion.Group = AccordionGroup;
+Accordion.Item = AccordionItem;
+Accordion.Button = AccordionButton;
+Accordion.Icon = AccordionIcon;
+Accordion.Content = AccordionContent;

package/src/components/Accordion/context.ts

@@ -0,0 +1,65 @@
+import { Context, createContext, useContext } from "react";
+import type {
+  AccordionGroupOwnProps,
+  AccordionItemOwnProps,
+  AccordionDisclosureProps,
+} from "./types";
+
+/**
+ * Accordion.Group context
+ * =============================================================================
+ */
+type AccordionGroupContextType = {
+  totalItems?: number;
+} & AccordionGroupOwnProps;
+
+const defaultGroupContext: AccordionGroupContextType = {
+  defaultValue: undefined,
+  disableAnimation: false,
+  totalItems: 0,
+};
+
+export const AccordionGroupContext: Context<AccordionGroupContextType> = createContext<AccordionGroupContextType>(
+  defaultGroupContext,
+);
+
+export function useAccordionGroupContext() {
+  const context = useContext<typeof defaultGroupContext>(
+    AccordionGroupContext,
+  ) || {
+    ...defaultGroupContext,
+  };
+
+  return context;
+}
+
+/**
+ * Accordion.Item context
+ * =============================================================================
+ */
+type AccordionItemContextType = AccordionItemOwnProps &
+  AccordionDisclosureProps & {
+    buttonId: string;
+    contentId: string;
+  };
+
+const defaultContext: AccordionItemContextType = {
+  defaultIsOpen: false,
+  isOpen: false,
+  onToggle: () => {},
+  onClose: () => {},
+  buttonId: "accordion-0-button",
+  contentId: "accordion-0-content",
+};
+
+export const AccordionItemContext: Context<AccordionItemContextType> = createContext<AccordionItemContextType>(
+  defaultContext,
+);
+
+export function useAccordionItemContext() {
+  const context = useContext<typeof defaultContext>(AccordionItemContext) || {
+    ...defaultContext,
+  };
+
+  return context;
+}

package/src/components/Accordion/index.css

@@ -14,7 +14,6 @@
     flex
     items-center
     justify-between
-    outline-none
     pl-7
     pr-3
     h-cell
@@ -42,7 +41,7 @@
   left: theme("margin.2");
 }
 
-.ads-Accordion-icon {
+.ads-Accordion-iconSlot {
   @apply mr-2;
 }
 
@@ -60,17 +59,10 @@
     border-l-4
     duration-200
     border-transparent
-    overflow-hidden
     transition
     text-bodySm;
 }
 
-.ads-Accordion-button:focus {
-  @apply outline-none
-    bg-gray-200
-    shadow-focusInside;
-}
-
 .ads-Accordion-button:hover,
 .ads-Accordion--isOpen .ads-Accordion-button:hover {
   @apply bg-gray-300;
@@ -85,8 +77,7 @@
   transform: scale(-1, -1);
 }
 
-.ads-Accordion-button:hover .ads-Accordion-chevronIcon,
-.ads-Accordion-button:focus .ads-Accordion-chevronIcon {
+.ads-Accordion-button:hover .ads-Accordion-chevronIcon {
   @apply opacity-100;
 }
 
@@ -94,12 +85,31 @@
   @apply border-gray-500;
 }
 
-.ads-Accordion-children {
-  @apply overflow-y-auto;
-}
-
 .ads-Accordion-children--padded {
   @apply py-4
     pl-7
     pr-8;
 }
+
+.ads-Accordion-icon {
+  @apply duration-300
+    ease-in-out;
+
+  transition-property: transform;
+}
+
+.ads-Accordion--isOpen .ads-Accordion-icon[data-direction="up"] {
+  @apply rotate-180;
+}
+
+.ads-Accordion--isOpen .ads-Accordion-icon[data-direction="down"] {
+  @apply -rotate-180;
+}
+
+.ads-Accordion--isOpen .ads-Accordion-icon[data-direction="left"] {
+  @apply -rotate-90;
+}
+
+.ads-Accordion--isOpen .ads-Accordion-icon[data-direction="right"] {
+  @apply rotate-90;
+}

package/src/components/Accordion/index.ts

@@ -1 +1,2 @@
 export * from "./Accordion";
+export * from "./context";

package/src/components/Accordion/types.ts

@@ -0,0 +1,59 @@
+import type { ReactNode } from "react";
+import type { DisclosureProps } from "../../types";
+
+export type AccordionGroupOwnProps = {
+  /**
+   * The value of the item to expand when initially rendered.
+   */
+  defaultValue?: string;
+  /**
+   * A way to prevent the show/hide animation from running
+   */
+  disableAnimation?: boolean;
+};
+
+export type AccordionItemOwnProps = {
+  /**
+   * Whether or not the accordion item is open / visible.
+   *
+   * ⚠️ **Deprecation notice** ⚠️
+   *
+   * This prop is deprecated and will be removed in the next major version. Use
+   * `defaultValue`/`value` combo instead to expand an item when initially
+   * rendered.
+   */
+  defaultIsOpen?: boolean;
+  /**
+   * A unique value for the item.
+   */
+  value?: string;
+};
+
+export type AccordionOwnProps = Pick<AccordionItemOwnProps, "defaultIsOpen"> & {
+  /**
+   * The displayed text of the `Accordion` when closed.
+   */
+  title: string;
+  /**
+   * If true, this shows a green indicator next to the title.
+   */
+  isActive?: boolean;
+  /**
+   * CSS value to define a max height of the opened Accordion content.
+   * If the children exceed the height of the container, it will scroll.
+   */
+  maxHeight?: string;
+  /**
+   * Add an icon or integration logo to the left of the header title.
+   */
+  iconSlot?: ReactNode;
+  /**
+   * Removes padding from the Accordion's content.
+   */
+  removePadding?: ReactNode;
+};
+
+export type AccordionDisclosureProps = Pick<
+  DisclosureProps,
+  "isOpen" | "onToggle" | "onClose"
+>;