@conveyorhq/arrow-ds 2.0.0-beta.5 → 2.0.0-beta.9

package/src/components/Table/index.css

@@ -58,23 +58,23 @@
   width: 1%;
 }
 
-.ads-TableHeaderCell-InnerWrapper {
+.ads-TableHeaderCell-InnerWrapper,
+.ads-TableHeaderCell-ChildrenWrapper {
   @apply flex
-    items-center
-    pt-px;
+    items-center;
+}
+
+.ads-TableHeaderCell-InnerWrapper {
+  @apply pt-px
+    h-full;
 }
 
 .ads-TableHeaderCell-ChildrenWrapper {
-  @apply flex
-    items-center
-    justify-between
-    flex-grow
-    leading-none;
+  @apply leading-none;
 }
 
 .ads-TableHeaderCell-iconButtonWrapper {
-  @apply flex
-    ml-auto;
+  @apply flex;
 }
 
 .ads-TableHeaderCell-iconButton {
@@ -196,6 +196,8 @@
     border-solid
     border-gray-200
     h-cell;
+
+  line-height: 18px;
 }
 
 .ads-TableRow:first-of-type .ads-TableCell,
@@ -315,3 +317,129 @@
   .ads-TableHeaderCell:nth-of-type(2) {
   @apply z-20;
 }
+
+/**
+ * Space Rows
+ *
+*/
+
+.ads-Table.ads-Table--space-rows {
+  @apply bg-transparent;
+
+  border-spacing: 0 4px;
+}
+
+.ads-Table.ads-Table--space-rows:not(.ads-Table--outer-border) {
+  @apply border-b-0;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableHeaderCell {
+  @apply border-t
+    border-l-0
+    border-r-0
+    h-10;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableHeaderCell:first-of-type {
+  @apply border-l;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableHeaderCell:last-of-type {
+  @apply border-r;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableCell {
+  @apply border-gray-400
+    border-t
+    border-b
+    border-l-0
+    border-r-0
+    h-14;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableCell:first-of-type {
+  @apply border-l;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableCell:last-of-type {
+  @apply border-r;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableRow:first-of-type .ads-TableCell,
+.ads-Table.ads-Table--space-rows .ads-TableCell:only-child {
+  @apply border-t;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableRow:not(:last-of-type) {
+  @apply border-b-0;
+}
+
+.ads-Table.ads-Table--space-rows.ads-TableCell:first-of-type:not(:only-child),
+.ads-Table.ads-Table--space-rows.ads-TableHeaderCell:first-of-type,
+.ads-Table.ads-Table--space-rows.ads-Table.ads-Table--batch-actions
+  .ads-TableCell:first-of-type,
+.ads-Table.ads-Table--space-rows.ads-Table.ads-Table--batch-actions
+  .ads-TableHeaderCell:first-of-type {
+  @apply pl-5;
+}
+
+.ads-Table.ads-Table--space-rows.ads-Table--sticky-column.ads-Table--batch-actions
+  .ads-TableCell:nth-of-type(2),
+.ads-Table.ads-Table--space-rows.ads-Table--sticky-column.ads-Table--batch-actions
+  .ads-TableHeaderCell:nth-of-type(2) {
+  left: 44px;
+}
+
+.ads-Table.ads-Table--space-rows.ads-Table--sticky-column
+  .ads-TableHeaderCell:first-of-type,
+.ads-Table.ads-Table--space-rows.ads-Table--sticky-column.ads-Table--batch-actions
+  .ads-TableHeaderCell:nth-of-type(2) {
+  box-shadow: 1px 0 0 theme("colors.gray.400"), 3px 0 0 rgb(234, 237, 239);
+}
+
+/* Enable grid sizing */
+
+.ads-Table.ads-Table--grid-sizing {
+  --table-cell-height: theme("height.cell");
+
+  @apply grid
+    border-b-0
+    flex-1
+    w-auto
+    min-w-full;
+
+  grid-auto-rows: minmax(var(--table-cell-height), auto);
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableHead,
+.ads-Table.ads-Table--grid-sizing .ads-TableBody,
+.ads-Table.ads-Table--grid-sizing .ads-TableRow {
+  display: contents;
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableCell {
+  @apply h-auto
+    border-b
+    border-t-0;
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableRow:last-of-type .ads-TableCell {
+  border-bottom-color: theme("colors.gray.400");
+}
+
+.ads-Table.ads-Table--grid-sizing
+  .ads-TableCell:not(.ads-TableCell--removePadding) {
+  @apply px-2;
+
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableCell:first-of-type:not(:only-child),
+.ads-Table.ads-Table--grid-sizing .ads-TableHeaderCell:first-of-type,
+.ads-Table.ads-Table--grid-sizing.ads-Table--batch-actions
+  .ads-TableCell:first-of-type,
+.ads-Table.ads-Table--grid-sizing.ads-Table--batch-actions
+  .ads-TableHeaderCell:first-of-type {
+  @apply pl-8;
+}

package/src/components/Table/index.ts

@@ -1 +1,4 @@
 export * from "./Table";
+export type { TableCellProps } from "./TableCell";
+export type { TableHeaderCellProps } from "./TableHeaderCell";
+export type { TableRowProps } from "./TableRow";

package/src/components/Tag/Tag.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import classNames from "classnames";
 import { BoxProps } from "../Box";
 import { bem } from "../../utilities/bem";
-import { ICON_TYPE, Icon } from "../Icon";
+import { IconType, Icon } from "../Icon";
 import { TagGroup } from "./TagGroup";
 
 const cn = "Tag";
@@ -32,7 +32,7 @@ export interface TagProps extends BoxProps {
   /**
    * Icon to show next to the tag content
    */
-  icon?: ICON_TYPE;
+  icon?: IconType;
 }
 
 export const Tag = ({

package/src/components/Text/Text.story.mdx

@@ -0,0 +1,34 @@
+import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
+import {
+  ComponentHeading,
+  ComponentStatus,
+  COMPONENT_STATUS,
+} from "../../storybook-components";
+import { Text } from "./Text";
+
+<Meta title="Components/Typography/Text" component={Text} />
+
+<ComponentHeading
+  componentName="Text"
+  description="A generic container for wrapping text"
+  sourcePath="src/components/Text/Text.tsx"
+  hideDemosLink
+/>
+
+<ComponentStatus status={COMPONENT_STATUS.DEPRECATED} />
+
+This component has been deprecated. Use the `Paragraph`, `Heading` or `Box` components instead.
+
+```jsx
+import { Text } from "@conveyorhq/arrow-ds";
+```
+
+<Preview>
+  <Story name="Text">
+    <Text>This is the Text component</Text>
+  </Story>
+</Preview>
+
+## Props
+
+<Props of={Text} />

package/src/components/Toast/Toast.story.mdx

@@ -210,7 +210,7 @@ message.
             showToast({
               title: "New control created",
               content: (
-                <div>
+                <div className="w-full">
                   <Toast.Link href="/">Access Control Policy</Toast.Link>
                   <Toast.Link href="/">Access Control Policy</Toast.Link>
                   <Toast.Link href="/">Access Control Policy</Toast.Link>

package/src/components/Toast/Toast.tsx

@@ -4,11 +4,11 @@ import classNames from "classnames";
 import { Box, BoxProps } from "../Box";
 import { Flex } from "../Flex";
 import { CloseButton } from "../CloseButton";
-import { StatusIcon } from "../Icon";
+import { Icon, ICON_TYPE, StatusIcon } from "../Icon";
 import { bem } from "../../utilities/bem";
 import { STATUS_VARIANT } from "../../types";
 import { StatusContext } from "../../contexts/status";
-import { ArrowLink, ArrowLinkProps } from "../ArrowLink";
+import { Link, LinkProps } from "../Link";
 
 const cn = "Toast";
 
@@ -37,14 +37,18 @@ export interface ShowToastProps {
   variant?: STATUS_VARIANT;
 }
 
-export const ToastLink = ({ children, className, ...rest }: ArrowLinkProps) => (
-  <ArrowLink
-    className={classNames(bem(cn, { e: "link" }), className)}
-    {...rest}
-  >
-    {children}
-  </ArrowLink>
-);
+export const ToastLink = ({ className, children, ...rest }: LinkProps) => {
+  return (
+    <Link
+      className={classNames(bem(cn, { e: "link" }), className)}
+      noStyles
+      {...rest}
+    >
+      <span className="mr-1">{children}</span>
+      <Icon icon={ICON_TYPE.LONG_ARROW_ALT_RIGHT} />
+    </Link>
+  );
+};
 
 export const ToastMessage = ({
   children,

package/src/components/Toast/index.css

@@ -48,11 +48,13 @@
   @apply items-start
     justify-center
     px-5
+    py-3
     flex-col
     text-left;
 
   grid-row: 1 / -1;
   min-height: 44px;
+  word-break: break-word;
 }
 
 .ads-Toast--withHeader .ads-Toast-body {
@@ -62,8 +64,8 @@
 .ads-Toast-link {
   @apply flex
     items-center
-    w-full
-    h-full
+    justify-between
+    font-medium
     rounded-b
     px-5
     -mx-5;

package/src/components/Toggle/index.css

@@ -3,9 +3,8 @@
     items-center
     rounded-full
     relative
-    cursor-pointer;
-
-  gap: theme("margin.2");
+    cursor-pointer
+    gap-2;
 }
 
 .ads-Toggle:focus {

package/src/components/Tooltip/Tooltip.story.mdx

@@ -14,6 +14,7 @@ import { Icon, ICON_TYPE } from "../Icon";
 import { Box } from "../Box";
 import { Button, BUTTON_VARIANT, BUTTON_SIZE } from "../Button";
 import { Heading } from "../Heading";
+import { Input } from "../Input";
 import { Stack } from "../Stack";
 import { Modal } from "../Modal";
 
@@ -44,6 +45,25 @@ import { Tooltip } from "@conveyorhq/arrow-ds";
 
 <Props of={Tooltip} />
 
+## Events
+
+The following events are are placed on the reference element in order to control
+the visibility of the tooltip popover.
+
+| Event          | Action                                                                         |
+| -------------- | ------------------------------------------------------------------------------ |
+| `onMouseEnter` | Show tooltip with delay                                                        |
+| `onMouseLeave` | Hide tooltip with delay                                                        |
+| `onMouseDown`  | Hide tooltip with delay                                                        |
+| `onFocus`      | Show tooltip without delay                                                     |
+| `onBlur`       | Hide tooltip without delay                                                     |
+| `onKeyDown`    | Hide tooltip without delay when `event.key === "Enter"` or `event.key === " "` |
+
+If the reference element includes any one of these events, it’ll be passed on
+and merged with the actions listed above. See the
+[input demo](/?path=/docs/components-popovers-tooltip--tooltip#input) for an
+example.
+
 <Accessibility
   description={
     <>
@@ -86,10 +106,39 @@ import { Tooltip } from "@conveyorhq/arrow-ds";
   </Story>
 </Preview>
 
+### Input
+
+The tooltip makes uses of some mouse and keyboard events on the reference
+element to show or hide the popover. This demo shows how you can pass through
+custom events to the reference element.
+
+In this scenario, we set the `disableHideOnMouseDown` prop to `true` so that
+when the input is clicked to receive focus, the tooltip does not disappear.
+Otherwise, we present a weird experience where the tooltip appears
+`onMouseEnter` and then immediately disappears `onMouseDown`.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Tooltip input">
+    <Tooltip content="Please don’t leave me blank" disableHideOnMouseDown>
+      <Input
+        className="max-w-xs"
+        placeholder="Input with tooltip"
+        onMouseEnter={() => console.log("onMouseEnter")}
+        onMouseLeave={() => console.log("onMouseLeave")}
+        onMouseDown={() => console.log("onMouseDown")}
+        onFocus={() => console.log("onFocus")}
+        onBlur={() => console.log("onBlur")}
+        onKeyDown={(event) => console.log("onKeyDown", event.key)}
+      />
+    </Tooltip>
+  </Story>
+</Preview>
+
 ### Placement
 
 Use the `placement` prop to change where the tooltip will be displayed. The
-default position is `auto`.
+default position is `auto`, which means the tooltip will appear where it fits
+best.
 
 <Preview withSource={SourceState.OPEN}>
   <Story name="Tooltip placement">
@@ -297,3 +346,24 @@ Demonstrates how to implement the Tooltip along with the `useCopyToClipboard` ho
     }}
   </Story>
 </Preview>
+
+### Leaving children empty
+
+If the tooltip content (i.e., `children` prop) is empty for any reason, the
+component will return the `referenceElement` instead.
+
+<Preview>
+  <Story name="Tooltip empty content">
+    {() => {
+      const errors = [];
+      return (
+        <Tooltip
+          placement="top"
+          content={errors.length > 0 ? "You have errors" : ""}
+        >
+          <Button>Save Changes</Button>
+        </Tooltip>
+      );
+    }}
+  </Story>
+</Preview>

package/src/components/Tooltip/Tooltip.tsx

@@ -1,13 +1,16 @@
 import React from "react";
-import classNames from "classnames";
 import Overlay from "react-overlays/Overlay";
 import { useId } from "@reach/auto-id";
 
 import { KEY_CODE, PopperPlacement } from "../../types";
 import { useDisclosure, useKeyPress } from "../../hooks";
+import { bemHOF, mergeEventHandlers } from "../../utilities";
+import { tokens } from "../../style-dictionary/dist/tokens";
 
 import { Box } from "../Box";
 
+const cn = bemHOF("Tooltip");
+
 /**
  * Tooltip.Arrow
  * =============================================================================
@@ -22,19 +25,19 @@ const TooltipArrow = React.forwardRef<HTMLDivElement, TooltipArrowProps>(
   ({ placement, style }, forwaredRef) => {
     const generatePositionStyles = () => {
       if (placement.startsWith("top")) {
-        return { bottom: "-4px", left: 0 };
+        return { bottom: `-${tokens.spacing[1]}`, left: 0 };
       }
 
       if (placement.startsWith("right")) {
-        return { left: "-4px", top: 0 };
+        return { left: `-${tokens.spacing[1]}`, top: 0 };
       }
 
       if (placement.startsWith("bottom")) {
-        return { top: "-4px", left: 0 };
+        return { top: `-${tokens.spacing[1]}`, left: 0 };
       }
 
       if (placement.startsWith("left")) {
-        return { right: "-4px", top: 0 };
+        return { right: `-${tokens.spacing[1]}`, top: 0 };
       }
 
       return {};
@@ -45,18 +48,13 @@ const TooltipArrow = React.forwardRef<HTMLDivElement, TooltipArrowProps>(
     return (
       <Box
         ref={forwaredRef}
-        className="absolute w-2 h-2 z-below"
+        className={cn({ e: "arrow" })}
         style={{
           ...style,
           ...positionStyles,
         }}
       >
-        <Box
-          className="absolute w-2 h-2 top-0 left-0 bg-gray-900"
-          style={{
-            transform: "rotate(45deg)",
-          }}
-        />
+        <Box />
       </Box>
     );
   },
@@ -154,20 +152,32 @@ export const Tooltip = ({
     }
   });
 
-  const triggerProps = {
+  const triggerProps = ({
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    ...rest
+  }: React.HTMLAttributes<HTMLElement>) => ({
     ref: triggerRef,
     "aria-describedby": isOpen ? id : undefined,
-    onMouseEnter: onShowDelay,
-    onMouseLeave: onHideDelay,
-    onMouseDown: onHideDelay,
-    onFocus: onShow,
-    onBlur: onHide,
-    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => {
-      if (isOpen && (event.key === "Enter" || event.key === " ")) {
-        onHide();
-      }
-    },
-  };
+    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) {
@@ -184,11 +194,10 @@ export const Tooltip = ({
     }
   };
 
-  return (
+  return content ? (
     <Box ref={rootRef}>
       {React.cloneElement(React.Children.only(children), {
-        ...triggerProps,
-        ...children.props,
+        ...triggerProps(children.props),
       })}
 
       {content && (
@@ -210,14 +219,8 @@ export const Tooltip = ({
             return (
               <Box
                 id={id}
-                className={classNames([
-                  "bg-gray-900 text-white",
-                  "text-bodySm leading-normal",
-                  "inline-flex items-center",
-                  "rounded shadow-popover",
-                  "px-3 py-2",
-                  "relative z-popup",
-                ])}
+                className={cn()}
+                data-component="tooltip"
                 onMouseEnter={handlePopoverMouseEnter}
                 onMouseLeave={handlePopoverMouseLeave}
                 {...contentProps}
@@ -234,5 +237,7 @@ export const Tooltip = ({
         </Overlay>
       )}
     </Box>
+  ) : (
+    children
   );
 };

package/src/components/Tooltip/index.css

@@ -0,0 +1,31 @@
+.ads-Tooltip {
+  @apply bg-gray-900
+    text-white
+    text-bodySm
+    leading-normal
+    inline-flex
+    items-center
+    rounded
+    shadow-popover
+    px-3
+    py-2
+    z-popup
+    max-w-64;
+}
+
+.ads-Tooltip-arrow {
+  @apply w-2
+    h-2
+    z-below;
+}
+
+.ads-Tooltip-arrow > div {
+  @apply absolute
+    w-2
+    h-2
+    top-0
+    left-0
+    bg-gray-900;
+
+  transform: rotate(45deg);
+}

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;
+}