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

package/src/components/Tooltip/Tooltip.tsx

@@ -1,83 +1,183 @@
-import React, { useRef, cloneElement, useEffect } from "react";
-import classnames from "classnames";
+import React from "react";
+import Overlay from "react-overlays/Overlay";
+import { useId } from "@reach/auto-id";
 
-import { bem } from "../../utilities/bem";
+import { KEY_CODE, PopperPlacement } from "../../types";
 import { useDisclosure, useKeyPress } from "../../hooks";
+import { bemHOF, mergeEventHandlers } from "../../utilities";
+import { tokens } from "../../style-dictionary/dist/tokens";
 
-import { Popover, PopoverTooltipSharedProps } from "../Popover";
-import { KEY_CODE } from "../../types";
+import { Box } from "../Box";
 
-export interface TooltipProps extends PopoverTooltipSharedProps {
-  /**
-   * Number of milliseconds to delay the disclosure of the tooltip
-   */
-  delay?: number;
-}
-
-const cn = "Tooltip";
-
-export const Tooltip = (props: TooltipProps) => {
-  const {
-    isVisible: isVisibleProp = false,
-    children,
-    referenceElement,
-    placement = "bottom",
-    className,
-    delay = 200,
-    style,
-    ...rest
-  } = props;
+const cn = bemHOF("Tooltip");
 
-  const { isOpen, onOpen, onClose } = useDisclosure(isVisibleProp);
-  const isHoveringReferenceRef = useRef(false);
-  const isHoveringPopoverRef = useRef(false);
-  const referenceTimoutRef = useRef<null | NodeJS.Timeout>(null);
-  const popoverTimoutRef = useRef<null | NodeJS.Timeout>(null);
+/**
+ * Tooltip.Arrow
+ * =============================================================================
+ */
+type TooltipArrowProps = {
+  placement: PopperPlacement;
+  style: React.CSSProperties;
+  ref: (instance: HTMLElement | null) => void;
+};
 
-  useEffect(() => {
-    if (isVisibleProp) {
-      onOpen();
-    }
-  }, [isVisibleProp, onOpen]);
+const TooltipArrow = React.forwardRef<HTMLDivElement, TooltipArrowProps>(
+  ({ placement, style }, forwaredRef) => {
+    const generatePositionStyles = () => {
+      if (placement.startsWith("top")) {
+        return { bottom: `-${tokens.spacing[1]}`, left: 0 };
+      }
 
-  useEffect(() => {
-    return () => {
-      if (referenceTimoutRef.current) {
-        clearTimeout(referenceTimoutRef.current);
+      if (placement.startsWith("right")) {
+        return { left: `-${tokens.spacing[1]}`, top: 0 };
       }
-      if (popoverTimoutRef.current) {
-        clearTimeout(popoverTimoutRef.current);
+
+      if (placement.startsWith("bottom")) {
+        return { top: `-${tokens.spacing[1]}`, left: 0 };
       }
+
+      if (placement.startsWith("left")) {
+        return { right: `-${tokens.spacing[1]}`, top: 0 };
+      }
+
+      return {};
     };
-  });
 
-  const close = () => {
+    const positionStyles = generatePositionStyles();
+
+    return (
+      <Box
+        ref={forwaredRef}
+        className={cn({ e: "arrow" })}
+        style={{
+          ...style,
+          ...positionStyles,
+        }}
+      >
+        <Box />
+      </Box>
+    );
+  },
+);
+
+/**
+ * Tooltip
+ * =============================================================================
+ */
+export type TooltipProps = {
+  /**
+   * The element to position the tooltip against
+   */
+  children: React.ReactElement;
+  /**
+   * Content of the tooltip popover
+   */
+  content?: React.ReactNode;
+  /**
+   * Default is auto
+   */
+  placement?: PopperPlacement;
+  /**
+   * Number of milliseconds to delay show/hide
+   */
+  delay?: number;
+};
+
+export const Tooltip = ({
+  children,
+  content,
+  placement = "auto",
+  delay = 200,
+}: TooltipProps) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const triggerRef = React.useRef(null);
+  const rootRef = React.useRef(null);
+  const id = `ads-tooltip-${useId()}`;
+
+  const isHoveringTriggerRef = React.useRef(false);
+  const isHoveringPopoverRef = React.useRef(false);
+  const triggerTimoutRef = React.useRef<null | NodeJS.Timeout>(null);
+  const popoverTimoutRef = React.useRef<null | NodeJS.Timeout>(null);
+
+  const onHide = () => {
     if (!isHoveringPopoverRef.current) {
       onClose();
     }
   };
 
-  const handleMouseEnter = () => {
-    isHoveringReferenceRef.current = true;
+  const onHideDelay = () => {
+    isHoveringTriggerRef.current = false;
+    isHoveringPopoverRef.current = false;
+
+    if (isOpen) {
+      const popoverTimeout = setTimeout(onHide, delay);
+      popoverTimoutRef.current = popoverTimeout;
+    }
+  };
+
+  const onShow = () => {
+    if (!isOpen) {
+      onOpen();
+    }
+  };
+
+  const onShowDelay = () => {
+    isHoveringTriggerRef.current = true;
+    isHoveringPopoverRef.current = true;
 
     if (!isOpen) {
       const referenceTimeout = setTimeout(() => {
-        if (isHoveringReferenceRef.current) {
+        if (isHoveringTriggerRef.current) {
           onOpen();
         }
       }, delay);
-      referenceTimoutRef.current = referenceTimeout;
+      triggerTimoutRef.current = referenceTimeout;
     }
   };
 
-  const handleMouseLeave = () => {
-    isHoveringReferenceRef.current = false;
+  React.useEffect(() => {
+    return () => {
+      if (triggerTimoutRef.current) {
+        clearTimeout(triggerTimoutRef.current);
+      }
+      if (popoverTimoutRef.current) {
+        clearTimeout(popoverTimoutRef.current);
+      }
+    };
+  });
 
+  useKeyPress(KEY_CODE.ESC, () => {
     if (isOpen) {
-      const popoverTimeout = setTimeout(close, delay);
-      popoverTimoutRef.current = popoverTimeout;
+      onHide();
     }
-  };
+  });
+
+  const triggerProps = ({
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    ...rest
+  }: React.HTMLAttributes<HTMLElement>) => ({
+    ref: triggerRef,
+    "aria-describedby": isOpen ? id : undefined,
+    onMouseEnter: mergeEventHandlers(onMouseEnter, onShowDelay),
+    onMouseLeave: mergeEventHandlers(onMouseLeave, onHideDelay),
+    onMouseDown: mergeEventHandlers(onMouseDown, onHideDelay),
+    onFocus: mergeEventHandlers(onFocus, onShow),
+    onBlur: mergeEventHandlers(onBlur, onHide),
+    onKeyDown: mergeEventHandlers(
+      onKeyDown,
+      (event: React.KeyboardEvent<HTMLElement>) => {
+        if (event.key === "Enter" || event.key === " ") {
+          onHide();
+        }
+      },
+    ),
+    ...rest,
+  });
 
   const handlePopoverMouseEnter = () => {
     if (!isHoveringPopoverRef.current) {
@@ -89,40 +189,55 @@ export const Tooltip = (props: TooltipProps) => {
     isHoveringPopoverRef.current = false;
 
     if (isOpen) {
-      const popoverTimeout = setTimeout(close, delay);
+      const popoverTimeout = setTimeout(onHide, delay);
       popoverTimoutRef.current = popoverTimeout;
     }
   };
 
-  useKeyPress(KEY_CODE.ESC, () => {
-    if (isOpen && !isVisibleProp) {
-      close();
-    }
-  });
-
-  const referenceElementWithMouseHandlers = !isVisibleProp
-    ? cloneElement(referenceElement, {
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onFocus: handleMouseEnter,
-        onBlur: handleMouseLeave,
-        tabIndex: 0,
-      })
-    : referenceElement;
-
-  return (
-    <Popover
-      showArrow
-      isVisible={isOpen}
-      referenceElement={referenceElementWithMouseHandlers}
-      placement={placement}
-      className={classnames(bem(cn), className)}
-      onMouseEnter={!isVisibleProp ? handlePopoverMouseEnter : undefined}
-      onMouseLeave={!isVisibleProp ? handlePopoverMouseLeave : undefined}
-      style={style}
-      {...rest}
-    >
-      {children}
-    </Popover>
+  return content ? (
+    <Box ref={rootRef}>
+      {React.cloneElement(React.Children.only(children), {
+        ...triggerProps(children.props),
+      })}
+
+      {content && (
+        <Overlay
+          rootClose
+          show={isOpen}
+          offset={[0, 8]}
+          onHide={onHide}
+          container={rootRef}
+          target={triggerRef}
+          placement={placement}
+          flip={placement && placement.indexOf("auto") !== -1}
+        >
+          {({
+            props: contentProps,
+            arrowProps,
+            placement: overlayPlacement,
+          }) => {
+            return (
+              <Box
+                id={id}
+                className={cn()}
+                data-component="tooltip"
+                onMouseEnter={handlePopoverMouseEnter}
+                onMouseLeave={handlePopoverMouseLeave}
+                {...contentProps}
+              >
+                <TooltipArrow
+                  ref={arrowProps.ref}
+                  placement={overlayPlacement}
+                  style={arrowProps.style}
+                />
+                {content}
+              </Box>
+            );
+          }}
+        </Overlay>
+      )}
+    </Box>
+  ) : (
+    children
   );
 };

package/src/components/Tooltip/context.ts

@@ -0,0 +1,21 @@
+import { Context, createContext, useContext } from "react";
+
+type TooltipContextType = {
+  isOpen: boolean;
+};
+
+const defaultTooltipContext: TooltipContextType = {
+  isOpen: false,
+};
+
+export const TooltipContext: Context<TooltipContextType> = createContext<TooltipContextType>(
+  defaultTooltipContext,
+);
+
+export function useTooltipContext() {
+  const context = useContext<typeof defaultTooltipContext>(TooltipContext) || {
+    ...defaultTooltipContext,
+  };
+
+  return context;
+}

package/src/components/Tooltip/index.css

@@ -1,27 +1,35 @@
 .ads-Tooltip {
   @apply bg-gray-900
     text-white
-    leading-normal
     text-bodySm
-    min-h-9
+    leading-normal
     inline-flex
-    items-center;
-
-  max-width: theme("width.64");
+    items-center
+    rounded
+    shadow-popover
+    px-3
+    py-2
+    z-popup
+    max-w-64;
 }
 
-.ads-Tooltip .ads-Popover-arrow[data-placement*="bottom"] {
-  border-bottom-color: theme("colors.gray.900");
+.ads-Tooltip-arrow {
+  @apply w-2
+    h-2
+    z-below;
 }
 
-.ads-Tooltip .ads-Popover-arrow[data-placement*="top"] {
-  border-top-color: theme("colors.gray.900");
-}
+.ads-Tooltip-arrow > div {
+  @apply absolute
+    w-2
+    h-2
+    top-0
+    left-0
+    bg-gray-900;
 
-.ads-Tooltip .ads-Popover-arrow[data-placement*="left"] {
-  border-left-color: theme("colors.gray.900");
+  transform: rotate(45deg);
 }
 
-.ads-Tooltip .ads-Popover-arrow[data-placement*="right"] {
-  border-right-color: theme("colors.gray.900");
+.ads-Tooltip-trigger {
+  @apply inline-flex;
 }

package/src/components/Tooltip/index.ts

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

package/src/components/VisuallyHidden/VisuallyHidden.story.mdx

@@ -0,0 +1,54 @@
+import {
+  Story,
+  Preview,
+  Props,
+  Meta,
+  SourceState,
+} from "@storybook/addon-docs/blocks";
+import { Box } from "../Box";
+import { Icon, ICON_TYPE } from "../Icon";
+import { VisuallyHidden } from "./VisuallyHidden";
+
+<Meta
+  title="Components/Disclosure/Visually Hidden"
+  component={VisuallyHidden}
+/>
+
+# VisuallyHidden
+
+`VisuallyHidden` is a way to show content to screen readers but hide it from the
+screen.
+
+## Installation
+
+```jsx
+import { VisuallyHidden } from "@conveyorhq/arrow-ds";
+```
+
+## Basic usage
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="VisuallyHidden">
+    <Box>Visible content</Box>
+    <VisuallyHidden>Hidden content</VisuallyHidden>
+  </Story>
+</Preview>
+
+## API
+
+Extends `BoxProps`
+
+<Props of={VisuallyHidden} />
+
+## Demos
+
+Providing more context to an icon.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="VisuallyHidden icon">
+    <Box>
+      <Icon icon={ICON_TYPE.COG} />
+      <VisuallyHidden>Settings</VisuallyHidden>
+    </Box>
+  </Story>
+</Preview>

package/src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -1,8 +1,13 @@
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { Box, BoxProps } from "../Box";
+import { bemHOF } from "../../utilities";
 
-export const VisuallyHidden = (props: BoxProps) => {
-  const { className, ...rest } = props;
-  return <Box {...rest} className={cn("visually-hidden", className)} />;
-};
+const cn = bemHOF("VisuallyHidden");
+
+export const VisuallyHidden: React.FunctionComponent<BoxProps> = React.forwardRef<
+  HTMLDivElement,
+  BoxProps
+>(({ className, ...rest }, forwardedRef) => (
+  <Box ref={forwardedRef} className={classNames(cn(), className)} {...rest} />
+));

package/src/components/VisuallyHidden/index.css

@@ -0,0 +1,3 @@
+.ads-VisuallyHidden {
+  @apply visually-hidden;
+}

package/src/css/base.css

@@ -0,0 +1,29 @@
+@tailwind base;
+
+@layer base {
+  b,
+  strong {
+    @apply font-medium;
+  }
+
+  a:focus:not(:focus-visible),
+  button:focus:not(:focus-visible),
+  [role="button"]:focus:not(:focus-visible),
+  [tabindex="0"]:focus:not(:focus-visible),
+  input:focus:not(:focus-visible),
+  textarea:focus:not(:focus-visible) {
+    @apply outline-none
+      shadow-none;
+
+    outline: solid 1px transparent;
+  }
+
+  a:focus-visible,
+  button:focus-visible,
+  [role="button"]:focus-visible,
+  [tabindex="0"]:focus-visible,
+  input:not(.ads-Radio-input, .ads-Checkbox-Input, .ads-FileUpload-input, .ads-OptionButton-input, .focus\:outline-none):focus,
+  textarea:focus {
+    @apply focus-visible;
+  }
+}

package/src/css/components.css

@@ -1,7 +1,4 @@
 @import "../components/Accordion";
-@import "../components/Appbar";
-@import "../components/ArrowButton";
-@import "../components/Aside";
 @import "../components/Avatar";
 @import "../components/Badge";
 @import "../components/Banner";
@@ -9,18 +6,21 @@
 @import "../components/Card";
 @import "../components/Checkbox";
 @import "../components/CloseButton";
-@import "../components/Combobox";
 @import "../components/DatePicker";
 @import "../components/DateRangePicker";
 @import "../components/Description";
+@import "../components/Divider";
 @import "../components/Drawer";
 @import "../components/FileUpload";
+@import "../components/Flex";
 @import "../components/FormGroup";
 @import "../components/Frame";
+@import "../components/Grid";
 @import "../components/Heading";
 @import "../components/Image";
 @import "../components/Input";
 @import "../components/InputFeedback";
+@import "../components/Kbd";
 @import "../components/Label";
 @import "../components/Link";
 @import "../components/Loading";
@@ -29,17 +29,14 @@
 @import "../components/Menu";
 @import "../components/Modal";
 @import "../components/OptionButton";
-@import "../components/Overlay";
-@import "../components/Pagination";
 @import "../components/Paper";
+@import "../components/Paragraph";
 @import "../components/Popover";
 @import "../components/PopoverMenu";
-@import "../components/ProductIcon";
-@import "../components/PropertyDiff";
 @import "../components/Radio";
 @import "../components/Reference";
 @import "../components/ScrollPane";
-@import "../components/SearchFilter";
+@import "../components/ScrollSpy";
 @import "../components/Select";
 @import "../components/SelectNew";
 @import "../components/SimpleTable";
@@ -48,8 +45,6 @@
 @import "../components/Snackbar";
 @import "../components/SpeechBubble";
 @import "../components/Stack";
-@import "../components/StatusLabel";
-@import "../components/StatusPanel";
 @import "../components/Tab";
 @import "../components/Table";
 @import "../components/Tag";
@@ -57,6 +52,5 @@
 @import "../components/Toggle";
 @import "../components/Token";
 @import "../components/Tooltip";
-@import "../components/TopBar";
 @import "../components/Truncate";
-@import "../components/VendorLogo";
+@import "../components/VisuallyHidden";

package/src/css/fonts.css

@@ -3,8 +3,9 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("https://d365biun6qawhk.cloudfront.net/fonts/neue-montreal/400-NeueMontreal-Regular.otf")
-    format("opentype");
+  src: local("NeueMontreal-Regular"),
+    url("https://static.conveyor.com/fonts/neue-montreal/400-NeueMontreal-Regular.otf")
+      format("opentype");
 }
 
 @font-face {
@@ -12,8 +13,9 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("https://d365biun6qawhk.cloudfront.net/fonts/neue-montreal/500-NeueMontreal-Medium.otf")
-    format("opentype");
+  src: local("NeueMontreal-Medium"),
+    url("https://static.conveyor.com/fonts/neue-montreal/500-NeueMontreal-Medium.otf")
+      format("opentype");
 }
 
 @font-face {
@@ -21,15 +23,16 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("https://d365biun6qawhk.cloudfront.net/fonts/neue-montreal/600-NeueMontreal-Bold.otf")
-    format("opentype");
+  src: local("NeueMontreal-Bold"),
+    url("https://static.conveyor.com/fonts/neue-montreal/600-NeueMontreal-Bold.otf")
+      format("opentype");
 }
 
 @font-face {
-  font-family: "IBM Plex Serif";
+  font-family: "Copernicus";
   font-style: normal;
-  font-weight: 600;
   font-display: swap;
-  src: url("https://d365biun6qawhk.cloudfront.net/fonts/ibm-plex-serif/600-IBMPlexSerif-SemiBold.woff2")
-    format("woff2");
+  src: local("Copernicus-Bold"),
+    url("https://static.conveyor.com/fonts/galaxie-copernicus/GalaxieCopernicus-Bold.otf")
+      format("opentype");
 }

package/src/css/styles.css

@@ -1,17 +1,5 @@
 @import "fonts";
-@import "tailwindcss/base";
-@import "tailwindcss/components";
+@import "base";
 @import "plugin";
 @import "components";
 @import "utilities";
-
-html {
-  @apply font-sans text-gray-800;
-  font-size: 14px;
-  line-height: 1.15;
-}
-
-b,
-strong {
-  @apply font-medium;
-}

package/src/css/utilities/animations.css

@@ -54,6 +54,15 @@
   }
 }
 
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .animated {
   animation-duration: 500ms;
   animation-fill-mode: both;
@@ -90,3 +99,7 @@
 .ease-all-slow {
   transition: all 1s ease;
 }
+
+.spin {
+  animation-name: spin;
+}

package/src/css/utilities.css

@@ -24,3 +24,16 @@
   top: 0 !important;
   width: 1px !important;
 }
+
+@layer utilities {
+  .focus-visible {
+    @apply outline
+      outline-2
+      outline-blue-400
+      duration-150
+      ease-in-out;
+
+    outline-offset: -2px;
+    transition-property: outline;
+  }
+}