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

package/src/components/Avatar/Avatar.tsx

@@ -3,7 +3,7 @@ import md5 from "md5";
 import classNames from "classnames";
 
 import { bemHOF } from "../../utilities/bem";
-import { colors } from "../../tokens";
+import { tokens } from "../../style-dictionary/dist/tokens";
 import { Box, BoxProps } from "../Box";
 import { Icon, ICON_TYPE } from "../Icon";
 import { Flex } from "../Flex";
@@ -17,28 +17,29 @@ import { AvatarSizesForGravatar, AvatarSize, AVATAR_TYPE } from "./types";
 import { AvatarContext } from "./context";
 
 const cn = bemHOF("Avatar");
+const { color } = tokens;
 
 const SystemIcon = (props: SvgProps) => {
   return (
     <Svg viewBox="0 0 32 32" {...props}>
       <path
-        fill={colors.brandGreen["400"]}
+        fill={color.brandGreen["400"]}
         d="M19.042 31.58c-1.17 0.275-2.389 0.42-3.642 0.42-0.24 0-0.479-0.005-0.716-0.016v-2.851c0-1.318-1.285-2.25-2.533-1.843-1.934 0.63-3.873 1.249-5.809 1.872-1.371-0.954-2.586-2.118-3.598-3.447l7.94-2.602c1.96-0.637 4.054-0.299 5.721 0.918s2.633 3.115 2.637 5.186l0.001 2.362z"
       />
       <path
-        fill={colors.brandGreen["400"]}
+        fill={color.brandGreen["400"]}
         d="M20.856 31.037l0.004-8.342c-0.003-2.071 0.95-3.969 2.636-5.191 1.647-1.216 3.736-1.548 5.716-0.909l2.066 0.675c-0.117 1.502-0.441 2.946-0.943 4.302-0.876-0.286-1.751-0.576-2.627-0.861-1.23-0.401-2.48 0.525-2.48 1.824v6.057c-1.308 1.032-2.781 1.862-4.372 2.445z"
       />
       <path
-        fill={colors.brandGreen["400"]}
+        fill={color.brandGreen["400"]}
         d="M31.314 15.338l-7.709-2.523c-1.98-0.64-3.471-2.149-4.105-4.12s-0.299-4.075 0.911-5.75l1.212-1.677c1.363 0.582 2.629 1.349 3.767 2.27-0.512 0.704-1.032 1.403-1.555 2.099-0.802 1.066-0.321 2.608 0.946 3.015l5.558 1.785c0.567 1.536 0.906 3.184 0.976 4.901z"
       />
       <path
-        fill={colors.brandGreen["400"]}
+        fill={color.brandGreen["400"]}
         d="M14.89 0.008c0.169-0.005 0.339-0.008 0.509-0.008 1.534 0 3.017 0.218 4.421 0.624l-4.725 6.537c-1.211 1.675-3.098 2.645-5.159 2.648s-3.949-0.956-5.166-2.651l-1.287-1.776c0.971-1.099 2.091-2.063 3.327-2.859l1.565 2.223c0.764 1.085 2.365 1.090 3.135 0.008l3.379-4.747z"
       />
       <path
-        fill={colors.brandGreen["400"]}
+        fill={color.brandGreen["400"]}
         d="M0.145 11.383c0.487-1.624 1.223-3.14 2.165-4.502l4.823 6.663c1.217 1.695 1.548 3.795 0.906 5.745-0.636 1.99-2.137 3.487-4.097 4.124l-2.253 0.733c-0.737-1.249-1.31-2.608-1.689-4.046l2.681-0.912c1.244-0.423 1.711-1.948 0.93-3.009-1.168-1.589-2.318-3.193-3.466-4.797z"
       />
     </Svg>
@@ -56,19 +57,19 @@ export const SystemIconConveyor = (props: SvgProps) => (
 export const SystemIconAptible = (props: SvgProps) => (
   <Svg viewBox="0 0 40 32" {...props}>
     <path
-      fill={colors.gold["400"]}
+      fill={color.gold["400"]}
       d="M22.018 31.667h5.646v-11.538l11.291 11.538v-7.692l-16.937-17.308z"
     />
     <path
-      fill={colors.gold["400"]}
+      fill={color.gold["400"]}
       d="M27.777 0h-7.452l18.631 18.333v-7.333l-11.178-11z"
     />
     <path
-      fill={colors.gold["400"]}
+      fill={color.gold["400"]}
       d="M0 23.974v7.692l11.291-11.538v11.538h5.646v-25l-16.937 17.308z"
     />
     <path
-      fill={colors.gold["400"]}
+      fill={color.gold["400"]}
       d="M0 11v7.333l18.631-18.333h-7.522l-11.109 11z"
     />
   </Svg>
@@ -128,14 +129,14 @@ export type AvatarProps =
   | UserAvatarProps;
 
 const avatarInitialBackgroundColors: string[] = [
-  colors.green["600"],
-  colors.gold["600"],
-  colors.orange["600"],
-  colors.red["600"],
-  colors.pink["600"],
-  colors.purple["600"],
-  colors.blue["600"],
-  colors.cyan["600"],
+  color.green["600"],
+  color.gold["600"],
+  color.orange["600"],
+  color.red["600"],
+  color.pink["600"],
+  color.purple["600"],
+  color.blue["600"],
+  color.cyan["600"],
 ];
 
 interface InitialsProps {
@@ -173,7 +174,7 @@ const Initials = ({
   lastInitial,
 }: InitialsProps) => {
   const initialsBgColor: string = useMemo(() => {
-    const fallbackColor = colors.gray["600"];
+    const fallbackColor = color.gray["600"];
     if (!email) return fallbackColor;
 
     let hash = 0;

package/src/components/Avatar/AvatarGroup.tsx

@@ -33,7 +33,7 @@ export interface AvatarGroupProps extends BoxProps {
    *
    * See [spacing tokens](/?path=/docs/tokens-spacing--page).
    */
-  spacing?: "overlap" | Spacing;
+  spacing?: "overlap" | "overlap-reverse" | Spacing;
   /**
    * Overrides the size prop on each Avatar within the group
    */
@@ -52,15 +52,17 @@ export const AvatarGroup = ({
   ) as ReactElement[];
   const reversedChildren = validChildren.reverse();
 
+  let spacingClass = "";
+  if (spacing === "overlap") {
+    spacingClass = cn({ m: "overlap" });
+  } else if (spacing === "overlap-reverse") {
+    spacingClass = cn({ m: "overlap-reverse" });
+  } else {
+    spacingClass = `gap-${spacing}`;
+  }
+
   return (
-    <Flex
-      className={classNames(
-        cn(),
-        spacing === "overlap" ? cn({ m: "overlap" }) : `gap-${spacing}`,
-        className,
-      )}
-      {...rest}
-    >
+    <Flex className={classNames(cn(), spacingClass, className)} {...rest}>
       <AvatarContext.Provider value={{ size }}>
         {reversedChildren}
       </AvatarContext.Provider>

package/src/components/Avatar/index.css

@@ -78,6 +78,14 @@ override built-in Image component classes */
     items-center;
 }
 
+.ads-AvatarGroup--overlap-reverse {
+  @apply flex-row;
+}
+
 .ads-AvatarGroup--overlap > *:not(:first-child) {
   margin-right: -0.25em;
 }
+
+.ads-AvatarGroup--overlap-reverse > *:not(:first-child) {
+  margin-left: -0.25em;
+}

package/src/components/Button/Button.story.mdx

@@ -88,7 +88,7 @@ These are the custom props that extend [`BoxProps`](/?path=/docs/components-box-
 
 ### Sizes
 
-The default button size is `medium`. `medium` buttons should be used in `TopBar`s, `large` buttons should be used in modal footers
+The default button size is `medium`.
 
 <Preview>
   <Story name="SizesPrimary">
@@ -99,6 +99,9 @@ The default button size is `medium`. `medium` buttons should be used in `TopBar`
       <Button size={BUTTON_SIZE.MEDIUM} variant={BUTTON_VARIANT.PRIMARY}>
         Medium
       </Button>
+      <Button size={BUTTON_SIZE.SMALL} variant={BUTTON_VARIANT.PRIMARY}>
+        Small
+      </Button>
     </Stack>
   </Story>
   <Story name="SizesSecondary">
@@ -109,6 +112,9 @@ The default button size is `medium`. `medium` buttons should be used in `TopBar`
       <Button size={BUTTON_SIZE.MEDIUM} variant={BUTTON_VARIANT.SECONDARY}>
         Medium
       </Button>
+      <Button size={BUTTON_SIZE.SMALL} variant={BUTTON_VARIANT.SECONDARY}>
+        Small
+      </Button>
     </Stack>
   </Story>
   <Story name="SizesUtility">
@@ -119,6 +125,9 @@ The default button size is `medium`. `medium` buttons should be used in `TopBar`
       <Button size={BUTTON_SIZE.MEDIUM} variant={BUTTON_VARIANT.UTILITY}>
         Medium
       </Button>
+      <Button size={BUTTON_SIZE.SMALL} variant={BUTTON_VARIANT.UTILITY}>
+        Small
+      </Button>
     </Stack>
   </Story>
   <Story name="SizesDanger">
@@ -129,6 +138,9 @@ The default button size is `medium`. `medium` buttons should be used in `TopBar`
       <Button size={BUTTON_SIZE.MEDIUM} variant={BUTTON_VARIANT.DANGER}>
         Medium
       </Button>
+      <Button size={BUTTON_SIZE.SMALL} variant={BUTTON_VARIANT.DANGER}>
+        Small
+      </Button>
     </Stack>
   </Story>
   <Story name="SizesMinimal">
@@ -139,6 +151,9 @@ The default button size is `medium`. `medium` buttons should be used in `TopBar`
       <Button size={BUTTON_SIZE.MEDIUM} variant={BUTTON_VARIANT.MINIMAL}>
         Medium
       </Button>
+      <Button size={BUTTON_SIZE.SMALL} variant={BUTTON_VARIANT.MINIMAL}>
+        Small
+      </Button>
     </Stack>
   </Story>
 </Preview>
@@ -180,6 +195,21 @@ See [Icon](/?path=/docs/components-icon--default) component for more information
       >
         Icons
       </Button>
+      <Button
+        icon={ICON_TYPE.POO_STORM}
+        size={BUTTON_SIZE.SMALL}
+        variant={BUTTON_VARIANT.PRIMARY}
+      >
+        Icons
+      </Button>
+      <Button
+        icon={ICON_TYPE.POO_STORM}
+        iconPosition={BUTTON_ICON_POSITION.RIGHT}
+        size={BUTTON_SIZE.SMALL}
+        variant={BUTTON_VARIANT.PRIMARY}
+      >
+        Icons
+      </Button>
     </Stack>
   </Story>
   <Story name="WithIconSecondary">
@@ -214,6 +244,21 @@ See [Icon](/?path=/docs/components-icon--default) component for more information
       >
         Icons
       </Button>
+      <Button
+        icon={ICON_TYPE.POO_STORM}
+        size={BUTTON_SIZE.SMALL}
+        variant={BUTTON_VARIANT.SECONDARY}
+      >
+        Icons
+      </Button>
+      <Button
+        icon={ICON_TYPE.POO_STORM}
+        iconPosition={BUTTON_ICON_POSITION.RIGHT}
+        size={BUTTON_SIZE.SMALL}
+        variant={BUTTON_VARIANT.SECONDARY}
+      >
+        Icons
+      </Button>
     </Stack>
   </Story>
   <Story name="WithIconUtility">
@@ -248,6 +293,21 @@ See [Icon](/?path=/docs/components-icon--default) component for more information
       >
         Icons
       </Button>
+      <Button
+        icon={ICON_TYPE.POO_STORM}
+        size={BUTTON_SIZE.SMALL}
+        variant={BUTTON_VARIANT.UTILITY}
+      >
+        Icons
+      </Button>
+      <Button
+        icon={ICON_TYPE.POO_STORM}
+        iconPosition={BUTTON_ICON_POSITION.RIGHT}
+        size={BUTTON_SIZE.SMALL}
+        variant={BUTTON_VARIANT.UTILITY}
+      >
+        Icons
+      </Button>
     </Stack>
   </Story>
   <Story name="WithIconDanger">
@@ -282,6 +342,21 @@ See [Icon](/?path=/docs/components-icon--default) component for more information
       >
         Icons
       </Button>
+      <Button
+        icon={ICON_TYPE.POO_STORM}
+        size={BUTTON_SIZE.SMALL}
+        variant={BUTTON_VARIANT.DANGER}
+      >
+        Icons
+      </Button>
+      <Button
+        icon={ICON_TYPE.POO_STORM}
+        iconPosition={BUTTON_ICON_POSITION.RIGHT}
+        size={BUTTON_SIZE.SMALL}
+        variant={BUTTON_VARIANT.DANGER}
+      >
+        Icons
+      </Button>
     </Stack>
   </Story>
   <Story name="WithIconMinimal">
@@ -316,6 +391,21 @@ See [Icon](/?path=/docs/components-icon--default) component for more information
       >
         Icons
       </Button>
+      <Button
+        icon={ICON_TYPE.POO_STORM}
+        size={BUTTON_SIZE.SMALL}
+        variant={BUTTON_VARIANT.MINIMAL}
+      >
+        Icons
+      </Button>
+      <Button
+        icon={ICON_TYPE.POO_STORM}
+        iconPosition={BUTTON_ICON_POSITION.RIGHT}
+        size={BUTTON_SIZE.SMALL}
+        variant={BUTTON_VARIANT.MINIMAL}
+      >
+        Icons
+      </Button>
     </Stack>
   </Story>
 </Preview>
@@ -335,6 +425,11 @@ See [Icon](/?path=/docs/components-icon--default) component for more information
         size={BUTTON_SIZE.MEDIUM}
         variant={BUTTON_VARIANT.PRIMARY}
       />
+      <Button
+        icon={ICON_TYPE.POO_STORM}
+        size={BUTTON_SIZE.SMALL}
+        variant={BUTTON_VARIANT.PRIMARY}
+      />
     </Stack>
   </Story>
   <Story name="IconOnlySecondary">
@@ -349,6 +444,11 @@ See [Icon](/?path=/docs/components-icon--default) component for more information
         size={BUTTON_SIZE.MEDIUM}
         variant={BUTTON_VARIANT.SECONDARY}
       />
+      <Button
+        icon={ICON_TYPE.POO_STORM}
+        size={BUTTON_SIZE.SMALL}
+        variant={BUTTON_VARIANT.SECONDARY}
+      />
     </Stack>
   </Story>
   <Story name="IconOnlyUtility">
@@ -363,6 +463,11 @@ See [Icon](/?path=/docs/components-icon--default) component for more information
         size={BUTTON_SIZE.MEDIUM}
         variant={BUTTON_VARIANT.UTILITY}
       />
+      <Button
+        icon={ICON_TYPE.POO_STORM}
+        size={BUTTON_SIZE.SMALL}
+        variant={BUTTON_VARIANT.UTILITY}
+      />
     </Stack>
   </Story>
   <Story name="IconOnlyDanger">
@@ -377,6 +482,11 @@ See [Icon](/?path=/docs/components-icon--default) component for more information
         size={BUTTON_SIZE.MEDIUM}
         variant={BUTTON_VARIANT.DANGER}
       />
+      <Button
+        icon={ICON_TYPE.POO_STORM}
+        size={BUTTON_SIZE.SMALL}
+        variant={BUTTON_VARIANT.DANGER}
+      />
     </Stack>
   </Story>
   <Story name="IconOnlyMinimal">
@@ -391,6 +501,11 @@ See [Icon](/?path=/docs/components-icon--default) component for more information
         size={BUTTON_SIZE.MEDIUM}
         variant={BUTTON_VARIANT.MINIMAL}
       />
+      <Button
+        icon={ICON_TYPE.POO_STORM}
+        size={BUTTON_SIZE.SMALL}
+        variant={BUTTON_VARIANT.MINIMAL}
+      />
     </Stack>
   </Story>
 </Preview>

package/src/components/Button/Button.tsx

@@ -6,7 +6,7 @@ import React, {
   ForwardRefExoticComponent,
   useContext,
 } from "react";
-import { Icon, IconProps, ICON_TYPE, ICON_STYLE_PREFIX } from "../Icon";
+import { Icon, IconType, ICON_TYPE, ICON_STYLE_PREFIX } from "../Icon";
 import { Link } from "../Link";
 import { bem } from "../../utilities/bem";
 import { ButtonGroup, ButtonGroupProps } from "./ButtonGroup";
@@ -24,6 +24,7 @@ export enum BUTTON_VARIANT {
 }
 
 export enum BUTTON_SIZE {
+  SMALL = "small",
   MEDIUM = "medium",
   LARGE = "large",
 }
@@ -53,7 +54,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * The FontAwesome icon to show.  Can be used alongside button content or with no content for an "icon only" appearance
    */
-  icon?: ICON_TYPE;
+  icon?: IconType;
   /**
    * A tailwind color that will apply to the icon provided
    */
@@ -87,15 +88,17 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 function getButtonSizeClasses(
   size: BUTTON_SIZE,
-  icon?: ICON_TYPE,
+  icon?: IconType,
   children?: ReactNode,
 ): string {
   const buttonSizeClasses = {
+    [BUTTON_SIZE.SMALL]: bem(cn, { m: "small" }),
     [BUTTON_SIZE.MEDIUM]: bem(cn, { m: "medium" }),
     [BUTTON_SIZE.LARGE]: bem(cn, { m: "large" }),
   };
 
   const buttonIconOnlySizeClasses = {
+    [BUTTON_SIZE.SMALL]: bem(cn, { m: "iconOnly--small" }),
     [BUTTON_SIZE.MEDIUM]: bem(cn, { m: "iconOnly--medium" }),
     [BUTTON_SIZE.LARGE]: bem(cn, { m: "iconOnly--large" }),
   };
@@ -145,10 +148,10 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(
       bem(cn),
       bem(cn, { m: variant }),
       bem(cn, { m: theme }),
-      block ? ["flex", "w-full"] : "inline-flex",
+      block && bem(cn, { m: "block" }),
       getButtonSizeClasses(size, icon, children),
       depressed && bem(cn, { m: "depressed" }),
-      isDisabled ? ["opacity-50", "pointer-events-none"] : "",
+      isDisabled && bem(cn, { m: "disabled" }),
       className,
     );
 
@@ -158,7 +161,10 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(
       isLoading && bem(cn, { e: "icon", m: "invisible" }),
     );
 
-    const iconProps: IconProps | undefined = icon
+    /**
+     * @TODO revisit iconProps: IconProps | undefined
+     */
+    const iconProps = icon
       ? {
           icon,
           color: iconColor,
@@ -178,7 +184,7 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(
       <Component
         type={type}
         className={buttonClassNames}
-        disabled={disabled}
+        disabled={isDisabled}
         ref={ref}
         {...propsIfLink}
         {...rest}

package/src/components/Button/index.css

@@ -7,7 +7,8 @@
     items-center
     border
     duration-200
-    relative;
+    relative
+    inline-flex;
 }
 
 .ads-Button:focus {
@@ -36,6 +37,16 @@
     m-auto;
 }
 
+.ads-Button--block {
+  @apply flex
+    w-full;
+}
+
+.ads-Button--disabled {
+  @apply opacity-50
+    pointer-events-none;
+}
+
 /* Button.Group */
 .ads-ButtonGroup {
   @apply items-center;

package/src/components/Button/product.css

@@ -81,6 +81,12 @@
 
 /* Sizes */
 
+.ads-Button--product.ads-Button--small {
+  @apply h-6
+    px-2
+    text-h5;
+}
+
 .ads-Button--product.ads-Button--medium {
   @apply h-8
     px-3
@@ -93,6 +99,12 @@
     text-h4;
 }
 
+.ads-Button--product.ads-Button--iconOnly--small {
+  @apply h-6
+    w-6
+    text-h5;
+}
+
 .ads-Button--product.ads-Button--iconOnly--medium {
   @apply h-8
     w-8