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

package/src/components/SpeechBubble/SpeechBubble.tsx

@@ -12,20 +12,41 @@ export type SpeechBubblePlacement =
   | "bottom-end";
 
 export interface SpeechBubbleProps extends BoxProps {
+  /**
+   * data-placement attribute is deprecated, use placement instead
+   */
   "data-placement"?: SpeechBubblePlacement;
+  /**
+   * Tell the speech bubble where to place the arrow
+   */
+  placement?: SpeechBubblePlacement;
 }
 
 export const SpeechBubble = (props: SpeechBubbleProps) => {
   const {
     "data-placement": dataPlacement = "top-start",
+    placement,
     className,
     ...rest
   } = props;
 
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useLayoutEffect(() => {
+    if (ref.current) {
+      const style = window.getComputedStyle(ref.current);
+      ref.current.style.setProperty(
+        "--ads-speech-bubble-bg",
+        style.backgroundColor,
+      );
+    }
+  }, [ref]);
+
   return (
     <Box
+      ref={ref}
       className={classNames(bem(cn), className)}
-      data-placement={dataPlacement}
+      data-placement={placement || dataPlacement}
       {...rest}
     />
   );

package/src/components/SpeechBubble/index.css

@@ -1,10 +1,13 @@
 .ads-SpeechBubble {
-  @apply bg-gray-200
-    rounded
+  --ads-speech-bubble-bg: theme("colors.gray.200");
+
+  @apply rounded
     p-2
     text-gray-700
     text-h5
     relative;
+
+  background-color: var(--ads-speech-bubble-bg);
 }
 
 .ads-SpeechBubble::after {
@@ -16,12 +19,12 @@
 }
 
 .ads-SpeechBubble[data-placement*="top"]::after {
-  border-bottom: 8px solid theme("colors.gray.200");
+  border-bottom: 8px solid var(--ads-speech-bubble-bg);
   top: -8px;
 }
 
 .ads-SpeechBubble[data-placement*="bottom"]::after {
-  border-top: 8px solid theme("colors.gray.200");
+  border-top: 8px solid var(--ads-speech-bubble-bg);
   bottom: -8px;
 }
 

package/src/components/Stack/Stack.tsx

@@ -59,7 +59,7 @@ export const Stack: FunctionComponent<StackProps> = forwardRef<
         ref={ref}
         className={classNames([
           bem(cn, { m: orientation }),
-          spacing > 0 && bem(cn, { m: `spacing-${spacing}` }),
+          `gap-${spacing}`,
           reverse && bem(cn, { m: "reverse" }),
           `justify-${justify}`,
           className,

package/src/components/Stack/index.css

@@ -16,419 +16,3 @@
 .ads-Stack--vertical.ads-Stack--reverse {
   @apply flex-col-reverse;
 }
-
-/* Horizontal */
-.ads-Stack--horizontal.ads-Stack--spacing-1 > :not(:last-child) {
-  @apply mr-1 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-1.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-1 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-2 > :not(:last-child) {
-  @apply mr-2 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-2.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-2 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-3 > :not(:last-child) {
-  @apply mr-3 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-3.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-3 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-4 > :not(:last-child) {
-  @apply mr-4 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-4.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-4 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-5 > :not(:last-child) {
-  @apply mr-5 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-5.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-5 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-6 > :not(:last-child) {
-  @apply mr-6 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-6.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-6 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-7 > :not(:last-child) {
-  @apply mr-7 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-7.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-7 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-8 > :not(:last-child) {
-  @apply mr-8 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-8.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-8 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-9 > :not(:last-child) {
-  @apply mr-9 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-9.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-9 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-10 > :not(:last-child) {
-  @apply mr-10 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-10.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-10 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-12 > :not(:last-child) {
-  @apply mr-12 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-12.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-12 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-14 > :not(:last-child) {
-  @apply mr-14 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-14.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-14 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-16 > :not(:last-child) {
-  @apply mr-16 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-16.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-16 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-18 > :not(:last-child) {
-  @apply mr-18 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-18.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-18 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-20 > :not(:last-child) {
-  @apply mr-20 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-20.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-20 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-22 > :not(:last-child) {
-  @apply mr-22 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-22.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-22 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-24 > :not(:last-child) {
-  @apply mr-24 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-24.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-24 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-26 > :not(:last-child) {
-  @apply mr-26 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-26.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-26 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-28 > :not(:last-child) {
-  @apply mr-28 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-28.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-28 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-30 > :not(:last-child) {
-  @apply mr-30 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-30.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-30 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-32 > :not(:last-child) {
-  @apply mr-32 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-32.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-32 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-48 > :not(:last-child) {
-  @apply mr-48 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-48.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-48 mr-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-64 > :not(:last-child) {
-  @apply mr-64 ml-0;
-}
-
-.ads-Stack--horizontal.ads-Stack--spacing-64.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply ml-64 mr-0;
-}
-
-/* Vertical */
-.ads-Stack--vertical.ads-Stack--spacing-1 > :not(:last-child) {
-  @apply mb-1 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-1.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-1 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-2 > :not(:last-child) {
-  @apply mb-2 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-2.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-2 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-3 > :not(:last-child) {
-  @apply mb-3 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-3.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-3 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-4 > :not(:last-child) {
-  @apply mb-4 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-4.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-4 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-5 > :not(:last-child) {
-  @apply mb-5 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-5.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-5 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-6 > :not(:last-child) {
-  @apply mb-6 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-6.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-6 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-7 > :not(:last-child) {
-  @apply mb-7 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-7.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-7 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-8 > :not(:last-child) {
-  @apply mb-8 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-8.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-8 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-9 > :not(:last-child) {
-  @apply mb-9 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-9.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-9 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-10 > :not(:last-child) {
-  @apply mb-10 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-10.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-10 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-12 > :not(:last-child) {
-  @apply mb-12 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-12.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-12 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-14 > :not(:last-child) {
-  @apply mb-14 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-14.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-14 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-16 > :not(:last-child) {
-  @apply mb-16 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-16.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-16 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-18 > :not(:last-child) {
-  @apply mb-18 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-18.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-18 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-20 > :not(:last-child) {
-  @apply mb-20 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-20.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-20 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-22 > :not(:last-child) {
-  @apply mb-22 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-22.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-22 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-24 > :not(:last-child) {
-  @apply mb-24 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-24.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-24 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-26 > :not(:last-child) {
-  @apply mb-26 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-26.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-26 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-28 > :not(:last-child) {
-  @apply mb-28 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-28.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-28 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-30 > :not(:last-child) {
-  @apply mb-30 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-30.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-30 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-32 > :not(:last-child) {
-  @apply mb-32 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-32.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-32 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-48 > :not(:last-child) {
-  @apply mb-48 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-48.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-48 mb-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-64 > :not(:last-child) {
-  @apply mb-64 mt-0;
-}
-
-.ads-Stack--vertical.ads-Stack--spacing-64.ads-Stack--reverse
-  > :not(:last-child) {
-  @apply mt-64 mb-0;
-}

package/src/components/Svg/Svg.story.mdx

@@ -0,0 +1,36 @@
+import {
+  Story,
+  Preview,
+  Meta,
+  SourceState,
+} from "@storybook/addon-docs/blocks";
+import { colors } from "../../tokens";
+import { Svg } from "./Svg";
+
+<Meta title="Components/Images/Svg" component={Svg} />
+
+# Svg
+
+`Svg` is a component to display
+[vector images](https://developer.mozilla.org/en-US/docs/Web/SVG).
+
+## Installation
+
+```jsx
+import { Svg } from "@conveyorhq/arrow-ds";
+```
+
+## Basic usage
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Svg">
+    <Svg viewBox="0 0 300 100" fill={colors.gray["900"]}>
+      <circle cx="50" cy="50" r="40" />
+    </Svg>
+  </Story>
+</Preview>
+
+## API
+
+`Svg` has no special props; you may apply any valid
+[attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute).

package/src/components/Svg/Svg.tsx

@@ -1,7 +1,9 @@
-import React, { FunctionComponent, SVGAttributes } from "react";
+import React from "react";
 
-export type SvgProps = SVGAttributes<SVGElement>;
+export type SvgProps = React.SVGAttributes<SVGElement>;
 
-export const Svg: FunctionComponent<SvgProps> = (props: SvgProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" {...props} />
+export const Svg = React.forwardRef<SVGSVGElement, SvgProps>(
+  (props, forwardedRef) => (
+    <svg xmlns="http://www.w3.org/2000/svg" ref={forwardedRef} {...props} />
+  ),
 );

package/src/components/Tab/Tab.tsx

@@ -10,10 +10,10 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   active?: boolean;
 }
 
-export const TabGroup = ({ className, spacing, ...rest }: StackProps) => (
+export const TabGroup = ({ className, spacing = 8, ...rest }: StackProps) => (
   <Stack
     className={classNames(bem(cn, { e: "group" }), className)}
-    spacing={0}
+    spacing={spacing}
     {...rest}
   />
 );

package/src/components/Tab/index.css

@@ -6,21 +6,15 @@
     text-body
     font-medium
     h-14
-    px-4
+    min-w-10
     relative;
 }
 
 .ads-Tab:not(.ads-Tab--active):hover,
-.ads-Tab:not(.ads-Tab--active):active,
-.ads-Tab:not(.ads-Tab--active):focus {
+.ads-Tab:not(.ads-Tab--active):active {
   @apply bg-gray-100;
 }
 
-.ads-Tab:focus {
-  @apply outline-none
-    shadow-focus;
-}
-
 .ads-Tab--active {
   @apply text-gray-800;
 }
@@ -28,10 +22,10 @@
 .ads-Tab-border {
   @apply bg-brandGreen-400
     bottom-0
+    left-0
+    right-0
     absolute;
 
-  left: theme("width.4");
-  right: theme("width.4");
   height: 3px;
 }
 

package/src/components/Table/FilterDropdown.tsx

@@ -14,7 +14,7 @@ import {
   Manager as PopperManager,
   Reference as PopperReference,
   Popper,
-} from "react-popper-2";
+} from "react-popper";
 import { bem } from "../../utilities/bem";
 import { useOutsideClick, useKeyPress } from "../../hooks";
 import { Icon, ICON_TYPE } from "../Icon";