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

package/src/components/Modal/Modal.tsx

@@ -198,7 +198,7 @@ export const ModalFooterMultiStep = ({
         </Box>
       </Flex>
 
-      <Box className="relative">
+      <Box className={bem(cn, { e: "progressDots-container" })}>
         {children}
 
         <Flex className={bem(cn, { e: "progressDots" })}>

package/src/components/Modal/index.css

@@ -4,7 +4,8 @@
 }
 
 .ads-ModalContainer {
-  @apply top-0
+  @apply fixed
+    top-0
     left-0
     z-modal
     flex
@@ -90,12 +91,12 @@
 .ads-Modal-body {
   @apply flex
     flex-col
-    justify-between;
+    justify-between
+    overflow-y-auto;
 
   max-height: calc(
     var(--modal-max-height) - theme("height.15") - theme("height.20")
   );
-  overflow-y: auto;
 }
 
 .ads-Modal-body--padded {
@@ -103,6 +104,10 @@
     py-4;
 }
 
+.ads-Modal-progressDots-container {
+  @apply relative;
+}
+
 .ads-Modal-progressDots {
   @apply absolute
     w-full

package/src/components/OptionButton/OptionButton.story.mdx

@@ -1,4 +1,11 @@
-import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
+import {
+  Story,
+  Preview,
+  Props,
+  Meta,
+  SourceState,
+} from "@storybook/addon-docs/blocks";
+import classNames from "classnames";
 import { OptionButton } from "./OptionButton";
 import { Box } from "../Box";
 import { Button, BUTTON_SIZE } from "../Button";
@@ -19,7 +26,7 @@ The option button component is a fancy radio button used as an option selector.
 import { OptionButton } from "@conveyorhq/arrow-ds";
 ```
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="OptionButton">
     <OptionButton
       heading="Manual"
@@ -72,7 +79,9 @@ Extends `BoxProps`
 
 ## Component tree
 
-Each piece of the `OptionButton` component can be used individually to create a component with a custom layout.
+Each piece of the `OptionButton` component can be used individually to create a
+component with a custom layout. You’ll also be able to control the style of each
+individual element.
 
 The component tree is as follows:
 
@@ -100,39 +109,34 @@ When building a custom implementation, the following components are considered o
 
 This example shows how you can create a list of custom checkboxes.
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="Custom implementation">
     <OptionButton.Group name="iconTypes" type="checkbox" spacing={4}>
-      <OptionButton.Root className="rounded p-3">
-        <OptionButton.Content>
-          <Flex className="items-center gap-x-2">
-            <Icon icon={ICON_TYPE.CALCULATOR} />
-            <Text className="font-medium">Calculator icon</Text>
-          </Flex>
-        </OptionButton.Content>
-        <OptionButton.Input value="calculator" />
-        <OptionButton.Backdrop className="bg-white border border-border rounded" />
-      </OptionButton.Root>
-      <OptionButton.Root className="rounded p-3">
-        <OptionButton.Content>
-          <Flex className="items-center gap-x-2">
-            <Icon icon={ICON_TYPE.ENVELOPE} />
-            <Text className="font-medium">Envelope icon</Text>
-          </Flex>
-        </OptionButton.Content>
-        <OptionButton.Input value="envelope" />
-        <OptionButton.Backdrop className="bg-white border border-border rounded" />
-      </OptionButton.Root>
-      <OptionButton.Root className="rounded p-3">
-        <OptionButton.Content>
-          <Flex className="items-center gap-x-2">
-            <Icon icon={ICON_TYPE.PAPERCLIP} />
-            <Text className="font-medium">Paperclip icon</Text>
-          </Flex>
-        </OptionButton.Content>
-        <OptionButton.Input value="paperclip" />
-        <OptionButton.Backdrop className="bg-white border border-border rounded" />
-      </OptionButton.Root>
+      {[
+        {
+          icon: ICON_TYPE.CALCULATOR,
+          name: "Calculator",
+        },
+        {
+          icon: ICON_TYPE.ENVELOPE,
+          name: "Envelope",
+        },
+        {
+          icon: ICON_TYPE.PAPERCLIP,
+          name: "Paperclip",
+        },
+      ].map((option) => (
+        <OptionButton.Root key={option.name} className="rounded p-3">
+          <OptionButton.Content>
+            <Flex className="items-center gap-x-2">
+              <Icon icon={option.icon} />
+              <Text className="font-medium">{option.name} icon</Text>
+            </Flex>
+          </OptionButton.Content>
+          <OptionButton.Input value="calculator" disabled={option.disabled} />
+          <OptionButton.Backdrop className="bg-white border border-border rounded" />
+        </OptionButton.Root>
+      ))}
     </OptionButton.Group>
   </Story>
 </Preview>
@@ -145,7 +149,7 @@ The `name` prop can be added to `OptionButton.Group` and it will be passed onto
 
 This example renders each `OptionButton` as a radio button (default), but they can also be made checkboxes by passing `type="checkbox"` to the group or each `OptionButton`.
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="Within Group">
     <OptionButton.Group name="template" type="radio" spacing={4}>
       <OptionButton
@@ -169,7 +173,7 @@ This example renders each `OptionButton` as a radio button (default), but they c
 
 ### Within Modal
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="Within Modal">
     {() => {
       const { isOpen, onOpen, onClose } = useDisclosure();
@@ -215,3 +219,54 @@ This example renders each `OptionButton` as a radio button (default), but they c
     }}
   </Story>
 </Preview>
+
+### Disabling an option
+
+If you need to disable an option, you can do so by passing `disabled` to
+OptionButton. This will apply different styles to the OptionButton which can’t
+be changed.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Disabled">
+    <OptionButton
+      heading="Manual"
+      description="Don’t create any tickets for me, I’ll make them myself."
+      disabled
+    />
+  </Story>
+</Preview>
+
+You can also build your own custom OptionButton by composing each piece and in
+doing so, you’ll be able to set your own styles for the disabled state.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Disabled custom">
+    {() => {
+      const isDisabled = true;
+      return (
+        <OptionButton.Root
+          className={classNames(
+            isDisabled && "cursor-not-allowed",
+            "rounded p-3",
+          )}
+        >
+          <OptionButton.Content
+            className={classNames(isDisabled && "opacity-50")}
+          >
+            <Flex className="items-center gap-x-2">
+              <Icon icon={ICON_TYPE.CALCULATOR} />
+              <Text className="font-medium">Calculator icon</Text>
+            </Flex>
+          </OptionButton.Content>
+          <OptionButton.Input value="calculator" disabled={isDisabled} />
+          <OptionButton.Backdrop
+            className={classNames(
+              isDisabled ? "bg-gray-300" : "bg-white",
+              "border border-border rounded",
+            )}
+          />
+        </OptionButton.Root>
+      );
+    }}
+  </Story>
+</Preview>

package/src/components/OptionButton/OptionButton.tsx

@@ -6,12 +6,12 @@ import { Input } from "../Input";
 import { Text, TextProps } from "../Text";
 import { Icon, ICON_TYPE } from "../Icon";
 import { Stack, StackProps } from "../Stack";
-import { bem } from "../../utilities/bem";
+import { bemHOF } from "../../utilities/bem";
 import isUndefined from "../../utilities/isUndefined";
 import { ORIENTATION } from "../../types";
 import { OptionButtonContext, useOptionButtonContext } from "./context";
 
-const cn = "OptionButton";
+const cn = bemHOF("OptionButton");
 
 /**
  * OptionButton.Group
@@ -66,7 +66,7 @@ export const OptionButtonRoot = ({
 }: OptionButtonRootProps) => {
   return (
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    <label className={classNames(bem(cn), className)} {...rest}>
+    <label className={classNames(cn(), className)} {...rest}>
       {children}
     </label>
   );
@@ -104,7 +104,7 @@ export const OptionButtonInput = (props: OptionButtonInputProps) => {
       name={name}
       type={type}
       checked={checked}
-      className={classNames([bem(cn, { e: "input" }), className])}
+      className={classNames([cn({ e: "input" }), className])}
       defaultValue={defaultValue}
       aria-checked={checked ? "true" : "false"}
       {...rest}
@@ -121,7 +121,7 @@ export const OptionButtonContent = ({
   children,
   ...rest
 }: BoxProps) => (
-  <Box className={classNames([bem(cn, { e: "content" }), className])} {...rest}>
+  <Box className={classNames([cn({ e: "content" }), className])} {...rest}>
     {children}
   </Box>
 );
@@ -137,7 +137,7 @@ export const OptionButtonHeading = ({
 }: TextProps) => (
   <Text
     as="div"
-    className={classNames([bem(cn, { e: "heading" }), className])}
+    className={classNames([cn({ e: "heading" }), className])}
     {...rest}
   >
     {children}
@@ -155,7 +155,7 @@ export const OptionButtonDescription = ({
 }: TextProps) => (
   <Text
     as="div"
-    className={classNames([bem(cn, { e: "description" }), className])}
+    className={classNames([cn({ e: "description" }), className])}
     {...rest}
   >
     {children}
@@ -167,10 +167,7 @@ export const OptionButtonDescription = ({
  * =============================================================================
  */
 export const OptionButtonBackdrop = ({ className, ...rest }: BoxProps) => (
-  <Box
-    className={classNames([bem(cn, { e: "backdrop" }), className])}
-    {...rest}
-  />
+  <Box className={classNames([cn({ e: "backdrop" }), className])} {...rest} />
 );
 
 /**
@@ -178,11 +175,8 @@ export const OptionButtonBackdrop = ({ className, ...rest }: BoxProps) => (
  * =============================================================================
  */
 export const OptionButtonSelectedIcon = ({ className, ...rest }: BoxProps) => (
-  <Box
-    className={classNames([bem(cn, { e: "selected" }), className])}
-    {...rest}
-  >
-    <Icon className={bem(cn, { e: "icon" })} icon={ICON_TYPE.CHECK} />
+  <Box className={classNames([cn({ e: "selected" }), className])} {...rest}>
+    <Icon className={cn({ e: "icon" })} icon={ICON_TYPE.CHECK} />
     Selected
   </Box>
 );
@@ -210,16 +204,22 @@ export const OptionButton = (props: OptionButtonProps) => {
     className,
     defaultValue,
     type: typeProp = "radio",
+    disabled = false,
     ...rest
   } = props;
 
-  const fallbackId = `OptionButton:${useId()}`;
+  const fallbackId = `OptionButton-${useId()}`;
   const id = isUndefined(idProp) ? fallbackId : idProp;
   const name = isUndefined(nameFromContext) ? nameProp : nameFromContext;
   const type = isUndefined(typeFromContext) ? typeProp : typeFromContext;
+  const rootClassName = classNames([
+    cn(),
+    disabled && cn({ m: "disabled" }),
+    className,
+  ]);
 
   return (
-    <OptionButtonRoot className={classNames(bem(cn), className)}>
+    <OptionButtonRoot className={rootClassName}>
       <OptionButtonContent>
         {heading && <OptionButtonHeading>{heading}</OptionButtonHeading>}
 
@@ -235,6 +235,7 @@ export const OptionButton = (props: OptionButtonProps) => {
         checked={checked}
         defaultValue={defaultValue}
         aria-checked={checked ? "true" : "false"}
+        disabled={disabled}
         {...rest}
       />
 

package/src/components/OptionButton/index.css

@@ -11,6 +11,10 @@
   flex: 1 1 0;
 }
 
+.ads-OptionButton--disabled {
+  @apply cursor-not-allowed;
+}
+
 .ads-OptionButton-content {
   @apply relative
     z-default;
@@ -32,6 +36,11 @@
     leading-normal;
 }
 
+.ads-OptionButton--disabled .ads-OptionButton-heading,
+.ads-OptionButton--disabled .ads-OptionButton-description {
+  @apply text-gray-600;
+}
+
 .ads-OptionButton-input {
   @apply visually-hidden;
 }
@@ -60,6 +69,10 @@
   @apply shadow-focus;
 }
 
+.ads-OptionButton--disabled .ads-OptionButton-backdrop {
+  @apply bg-gray-300;
+}
+
 .ads-OptionButton-selected {
   @apply items-center
     justify-center

package/src/components/Overlay/Overlay.story.mdx

@@ -0,0 +1,26 @@
+import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
+import { ComponentHeading } from "../../storybook-components";
+import { Overlay } from "./Overlay";
+
+<Meta title="Components/Popovers/Overlay" component={Overlay} />
+
+<ComponentHeading
+  componentName="Overlay"
+  description=""
+  sourcePath="src/components/Overlay/Overlay.tsx"
+  hideDemosLink
+/>
+
+```jsx
+import { Overlay } from "@conveyorhq/arrow-ds";
+```
+
+<Preview>
+  <Story name="Overlay">
+    <Overlay />
+  </Story>
+</Preview>
+
+## Props
+
+<Props of={Overlay} />

package/src/components/Select/Select.tsx

@@ -16,7 +16,7 @@ import ReactSelectCreatable, {
 import ReactSelectAsync, {
   Props as ReactSelectAsyncProps,
 } from "react-select/async";
-import { colors, height, zIndex } from "../../tokens";
+import { tokens } from "../../style-dictionary/dist/tokens";
 import { STATUS_VARIANT } from "../../types";
 import { bemHOF, toNumber } from "../../utilities";
 import { BoxProps, Box } from "../Box";
@@ -173,7 +173,7 @@ const generateHardcodedProps = ({
       ...styles,
       menuPortal: (base: CSSProperties): CSSProperties => ({
         ...base,
-        zIndex: zIndex.max,
+        zIndex: tokens.zIndex.max,
       }),
       singleValue: (base: CSSProperties, state: any): CSSProperties => {
         return {
@@ -181,7 +181,7 @@ const generateHardcodedProps = ({
           paddingLeft: state.selectProps.isSearchable ? "2px" : "0",
           color:
             state.selectProps.menuIsOpen && state.selectProps.isSearchable
-              ? colors.gray["600"]
+              ? tokens.color.gray["600"]
               : base.color,
         };
       },
@@ -218,7 +218,7 @@ const SelectBase = ({
   variant: variantProp = STATUS_VARIANT.DEFAULT,
   id: idProp,
   className,
-  height: controlHeight = toNumber(height["10"]),
+  height: controlHeight = toNumber(tokens.height["10"]),
   menuInPortal = false,
   menuRef,
   components,

package/src/components/Select/SelectPopover.tsx

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { Modifier } from "react-popper";
 import { MenuListComponentProps } from "react-select";
 import FocusLock from "react-focus-lock";
-import { tokens } from "../../tokens";
+import { tokens } from "../../style-dictionary/dist/tokens";
 import { useOutsideClick } from "../../hooks";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
@@ -55,19 +55,19 @@ export const SelectPopover = ({
   const selectStyles = {
     control: (provided: any) => ({
       ...provided,
-      width: `calc(100% - ${tokens.margin[6]})`,
-      margin: tokens.margin[3],
+      width: `calc(100% - ${tokens.spacing[6]})`,
+      margin: tokens.spacing[3],
     }),
     menu: (provided: any) => ({
       ...provided,
       boxShadow: "none !important", // override Arrow classname
       borderRadius: "0 !important", // override Arrow classname
       zIndex: "1 !important", // override Arrow classname
-      backgroundColor: tokens.colors.white,
+      backgroundColor: tokens.color.white,
       position: "relative",
-      marginTop: tokens.margin[3],
+      marginTop: tokens.spacing[3],
       marginBottom: 0,
-      borderTop: `1px solid ${tokens.colors.gray[300]}`,
+      borderTop: `1px solid ${tokens.color.gray[300]}`,
       maxHeight: "184px",
       overflowY: "auto",
     }),

package/src/components/Select/index.ts

@@ -1,2 +1,16 @@
 export * from "./Select";
 export * from "./SelectPopover";
+export { components as ReactSelectComponents } from "react-select";
+export type {
+  MenuProps as ReactSelectMenuProps,
+  GroupProps as ReactSelectGroupProps,
+  InputProps as ReactSelectInputProps,
+  OptionProps as ReactSelectOptionProps,
+  ControlProps as ReactSelectControlProps,
+  IndicatorProps as ReactSelectIndicatorProps,
+  MultiValueProps as ReactSelectMultiValueProps,
+  PlaceholderProps as ReactSelectPlaceholderProps,
+  SingleValueProps as ReactSelectSingleValueProps,
+  ValueContainerProps as ReactSelectValueContainerProps,
+  MenuListComponentProps as ReactSelectMenuListComponentProps,
+} from "react-select";

package/src/components/Select/theme.ts

@@ -1,31 +1,31 @@
 import { Theme } from "react-select";
-import { colors, borderRadius, height, margin } from "../../tokens";
+import { tokens } from "../../style-dictionary/dist/tokens";
 import { toNumber } from "../../utilities/toNumber";
 
 export const adsTheme: Theme = {
-  borderRadius: toNumber(borderRadius.DEFAULT),
+  borderRadius: toNumber(tokens.borderRadius.DEFAULT),
   colors: {
-    danger: colors.red["400"],
-    dangerLight: colors.red["300"],
-    neutral0: colors.white,
-    neutral5: colors.gray["100"],
-    neutral10: colors.gray["100"],
-    neutral20: colors.gray["200"],
-    neutral30: colors.gray["400"],
-    neutral40: colors.gray["500"],
-    neutral50: colors.gray["600"],
-    neutral60: colors.gray["700"],
-    neutral70: colors.gray["800"],
-    neutral80: colors.gray["900"],
-    neutral90: colors.gray["900"],
-    primary: colors.blue["500"],
-    primary25: colors.gray["300"],
-    primary50: colors.gray["300"],
-    primary75: colors.blue["400"],
+    danger: tokens.color.red["400"],
+    dangerLight: tokens.color.red["300"],
+    neutral0: tokens.color.white,
+    neutral5: tokens.color.gray["100"],
+    neutral10: tokens.color.gray["100"],
+    neutral20: tokens.color.gray["200"],
+    neutral30: tokens.color.gray["400"],
+    neutral40: tokens.color.gray["500"],
+    neutral50: tokens.color.gray["600"],
+    neutral60: tokens.color.gray["700"],
+    neutral70: tokens.color.gray["800"],
+    neutral80: tokens.color.gray["900"],
+    neutral90: tokens.color.gray["900"],
+    primary: tokens.color.blue["500"],
+    primary25: tokens.color.gray["300"],
+    primary50: tokens.color.gray["300"],
+    primary75: tokens.color.blue["400"],
   },
   spacing: {
-    baseUnit: toNumber(margin["1"]),
-    controlHeight: toNumber(height["10"]),
-    menuGutter: toNumber(margin["1"]),
+    baseUnit: toNumber(tokens.spacing["1"]),
+    controlHeight: toNumber(tokens.height["10"]),
+    menuGutter: toNumber(tokens.spacing["1"]),
   },
 };

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/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/Tooltip/Tooltip.story.mdx

@@ -346,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>