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

package/src/components/Tooltip/Tooltip.tsx

@@ -1,14 +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 { mergeEventHandlers } from "../../utilities";
+import { bemHOF, mergeEventHandlers } from "../../utilities";
+import { tokens } from "../../style-dictionary/dist/tokens";
 
 import { Box } from "../Box";
 
+const cn = bemHOF("Tooltip");
+
 /**
  * Tooltip.Arrow
  * =============================================================================
@@ -23,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 {};
@@ -46,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>
     );
   },
@@ -171,11 +168,14 @@ export const Tooltip = ({
     onMouseDown: mergeEventHandlers(onMouseDown, onHideDelay),
     onFocus: mergeEventHandlers(onFocus, onShow),
     onBlur: mergeEventHandlers(onBlur, onHide),
-    onKeyDown: mergeEventHandlers(onKeyDown, (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        onHide();
-      }
-    }),
+    onKeyDown: mergeEventHandlers(
+      onKeyDown,
+      (event: React.KeyboardEvent<HTMLElement>) => {
+        if (event.key === "Enter" || event.key === " ") {
+          onHide();
+        }
+      },
+    ),
     ...rest,
   });
 
@@ -194,7 +194,7 @@ export const Tooltip = ({
     }
   };
 
-  return (
+  return content ? (
     <Box ref={rootRef}>
       {React.cloneElement(React.Children.only(children), {
         ...triggerProps(children.props),
@@ -219,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}
@@ -243,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;
+}

package/src/css/components.css

@@ -49,4 +49,6 @@
 @import "../components/Toast";
 @import "../components/Toggle";
 @import "../components/Token";
+@import "../components/Tooltip";
 @import "../components/Truncate";
+@import "../components/VisuallyHidden";

package/src/docs/Colors.story.mdx

@@ -1,8 +1,8 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs/blocks";
 import { CustomColorPalette } from "../storybook-components/CustomColorPalette";
-import { colors } from "../tokens";
+import { tokens } from "../style-dictionary/dist/tokens";
 
-<Meta title="Tokens/Colors" />
+<Meta title="Styles/Colors" />
 
 export const palette = (color, range = [200, 600]) => {
   const offset = (range[0] - 100) / 100;
@@ -12,15 +12,15 @@ export const palette = (color, range = [200, 600]) => {
   const object = {};
   array.forEach((n) => {
     Object.assign(object, {
-      [n * 100]: colors[color][n * 100],
+      [n * 100]: tokens.color[color][n * 100],
     });
   });
   return object;
 };
 
 export const bw = {
-  black: colors.black,
-  white: colors.white,
+  black: tokens.color.black,
+  white: tokens.color.white,
 };
 
 export const grays = palette("gray", [100, 900]);
@@ -35,26 +35,26 @@ export const cyan = palette("cyan");
 export const purple = palette("purple");
 
 export const lighten = {
-  100: colors.lighten["100"],
-  200: colors.lighten["200"],
-  300: colors.lighten["300"],
+  100: tokens.color.lighten["100"],
+  200: tokens.color.lighten["200"],
+  300: tokens.color.lighten["300"],
 };
 
 export const functional = {
   border: {
-    border: colors.border,
+    border: tokens.color.border,
   },
   link: {
-    link: colors.link,
+    link: tokens.color.link,
   },
   success: {
-    success: colors.success,
+    success: tokens.color.success,
   },
   failure: {
-    failure: colors.failure,
+    failure: tokens.color.failure,
   },
   caution: {
-    caution: colors.caution,
+    caution: tokens.color.caution,
   },
 };
 

package/src/docs/Spacing.story.mdx

@@ -1,8 +1,7 @@
 import { Meta } from "@storybook/addon-docs/blocks";
-import { padding } from "../tokens/padding";
 import { SimpleTable } from "../components/SimpleTable";
 
-<Meta title="Tokens/Spacing" />
+<Meta title="Styles/Spacing" />
 
 export const Table = ({ children, columns }) => (
   <SimpleTable className="w-1/2">
@@ -35,22 +34,7 @@ The follow values can be used for `margin`, `padding` and `gap`.
 
 `margin` also includes a negative scale and the `auto` keyword.
 
-<Table columns={["Key", "Value"]}>
-  {Object.keys(padding).map((key) => (
-    <Row key={key}>
-      <Cell>
-        <code>{key}</code>
-      </Cell>
-      <Cell>
-        <code>{padding[key]}</code>
-      </Cell>
-    </Row>
-  ))}
-</Table>
-
-## Using spacing tokens
-
-### Margin
+## Margin
 
 Margin controls the spacing on the outside of an element.
 
@@ -99,7 +83,7 @@ Margin controls the spacing on the outside of an element.
   </Row>
 </Table>
 
-### Padding
+## Padding
 
 Padding controls the spacing on the inside of an element.
 
@@ -148,7 +132,7 @@ Padding controls the spacing on the inside of an element.
   </Row>
 </Table>
 
-### Gap
+## Gap
 
 Gap is used to space items within grid and flexbox layouts.
 

package/src/docs/Tokens.story.mdx

@@ -0,0 +1,230 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+import { tokens } from "../style-dictionary/dist/tokens";
+import { Button, SimpleTable, Tooltip, BUTTON_VARIANT, ICON_TYPE } from "../..";
+
+<Meta title="Documentation/Tokens" />
+
+export const categories = Object.keys(tokens);
+
+export const copyToClipboard = (text) => {
+  navigator.clipboard.writeText(text);
+};
+
+export const ClickToCopy = ({ text }) => {
+  const [copied, setCopied] = React.useState(false);
+  const renderProps = {
+    onMouseOut: () => setCopied(false),
+    onBlur: () => setCopied(false),
+    onClick: () => {
+      copyToClipboard(text);
+      setCopied(true);
+    },
+  };
+  return (
+    <Tooltip
+      placement="top"
+      referenceElement={
+        <Button
+          variant={BUTTON_VARIANT.MINIMAL}
+          icon={ICON_TYPE.CLIPBOARD}
+          {...renderProps}
+        />
+      }
+    >
+      {copied ? "Copied!" : "Copy token path"}
+    </Tooltip>
+  );
+};
+
+export const Swatch = ({ color }) => (
+  <div
+    style={{
+      width: "21px",
+      height: "21px",
+      borderRadius: "3px",
+      backgroundColor: color,
+    }}
+  />
+);
+
+export const Table = ({ children, columns }) => (
+  <SimpleTable style={{ width: "100%" }}>
+    {columns && (
+      <SimpleTable.Row>
+        {columns.map((column, i) => (
+          <SimpleTable.HeaderCell
+            key={column}
+            style={{
+              width: i === columns.length - 1 ? "auto" : "50%",
+            }}
+          >
+            {column}
+          </SimpleTable.HeaderCell>
+        ))}
+      </SimpleTable.Row>
+    )}
+    {children}
+  </SimpleTable>
+);
+
+export const Row = ({ children, style }) => (
+  <SimpleTable.Row
+    style={{
+      borderBottom: `1px solid ${tokens.color.gray[300]}`,
+      verticalAlign: "top",
+      ...style,
+    }}
+  >
+    {children}
+  </SimpleTable.Row>
+);
+
+export const Cell = ({ children, ...rest }) => (
+  <SimpleTable.Cell {...rest}>{children}</SimpleTable.Cell>
+);
+
+# Tokens
+
+These tokens are normally used in JavaScript. In almost all cases, you’ll
+want to use the Tailwind CSS utility classnames instead.
+
+## Usage
+
+```js
+import { tokens } from "@conveyorhq/design-tokens";
+```
+
+export const titleize = (string) => {
+  const title = string.replace(/([A-Z])/g, " $1").toLowerCase();
+  return `${title.charAt(0).toUpperCase()}${title.slice(1)}`;
+};
+
+<ul
+  style={{
+    listStyle: "none",
+    padding: 0,
+  }}
+>
+  {categories.map((category) => (
+    <li key={category}>
+      <a href={`#${category}`}>
+        {titleize(category)}
+        {category === "leading" && " (line height)"}
+        {category === "screenWidth" && " (breakpoints)"}
+        {category === "tracking" && " (letter spacing)"}
+        {category === "type" && " (font family)"}
+      </a>
+    </li>
+  ))}
+</ul>
+
+<div>
+  <br />
+  <br />
+  {categories.map((category) => (
+    <div key={category} id={category}>
+      <h2>
+        {titleize(category)}
+        {category === "leading" && " (line height)"}
+        {category === "screenWidth" && " (breakpoints)"}
+        {category === "tracking" && " (letter spacing)"}
+        {category === "type" && " (font family)"}
+      </h2>
+      <p>
+        {category === "color" ? (
+          <>
+            <code>tokens.{category}[key]</code> or{" "}
+            <code>tokens.{category}[key][key]</code>
+          </>
+        ) : (
+          <code>tokens.{category}[key]</code>
+        )}
+      </p>
+      {category === "fontWeight" && (
+        <p>Weight can only be applied to Neue Montreal.</p>
+      )}
+      <Table columns={["Key", "Value", ""]}>
+        {Object.keys(tokens[category]).map((key) => (
+          <Row key={key}>
+            <Cell>
+              <code>{key}</code>
+            </Cell>
+            <Cell
+              colspan={typeof tokens[category][key] === "object" ? 2 : null}
+            >
+              {typeof tokens[category][key] === "object" ? (
+                <Table>
+                  {Object.keys(tokens[category][key]).map((k, i) => (
+                    <Row
+                      key={k}
+                      style={
+                        i === Object.keys(tokens[category][key]).length - 1
+                          ? {
+                              borderBottom: 0,
+                            }
+                          : {}
+                      }
+                    >
+                      <Cell style={{ width: "50%" }}>
+                        <code>{k}</code>
+                      </Cell>
+                      <Cell style={{ width: "50%" }}>
+                        <div style={{ display: "flex", gap: "4px" }}>
+                          <code>{tokens[category][key][k]}</code>
+                          {category === "color" && (
+                            <Swatch color={tokens[category][key][k]} />
+                          )}
+                        </div>
+                      </Cell>
+                      <Cell style={{ width: "auto" }}>
+                        {typeof tokens[category][key][k] !== "object" && (
+                          <>
+                            {isNaN(parseInt(k, 10)) ? (
+                              <ClickToCopy
+                                text={`tokens.${category}.${key}.${k}`}
+                              />
+                            ) : (
+                              <ClickToCopy
+                                text={`tokens.${category}.${key}[${k}]`}
+                              />
+                            )}
+                          </>
+                        )}
+                      </Cell>
+                    </Row>
+                  ))}
+                </Table>
+              ) : (
+                <div style={{ display: "flex", gap: "4px" }}>
+                  {category === "type" ? (
+                    <code>
+                      <pre style={{ fontSize: "inherit" }}>
+                        {tokens[category][key].replaceAll(", ", ",\n")}
+                      </pre>
+                    </code>
+                  ) : (
+                    <code>{tokens[category][key]}</code>
+                  )}
+                  {category === "color" && (
+                    <Swatch color={tokens[category][key]} />
+                  )}
+                </div>
+              )}
+            </Cell>
+            {typeof tokens[category][key] !== "object" && (
+              <Cell style={{ textAlign: "right" }}>
+                {isNaN(parseInt(key, 10)) ? (
+                  <ClickToCopy text={`tokens.${category}.${key}`} />
+                ) : (
+                  <ClickToCopy text={`tokens.${category}[${key}]`} />
+                )}
+              </Cell>
+            )}
+          </Row>
+        ))}
+      </Table>
+      <br />
+      <br />
+    </div>
+  ))}
+</div>