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

package/src/components/Card/Card.story.mdx

@@ -7,11 +7,11 @@ import {
 } from "@storybook/addon-docs/blocks";
 import { Card } from "./Card";
 import { Button, BUTTON_VARIANT } from "../Button";
-import { VendorLogo } from "../VendorLogo";
+import { ConveyorLogo } from "../ConveyorLogo";
 import { Heading } from "../Heading";
 import { Flex } from "../Flex";
 import { JUSTIFY } from "../../types";
-import { colors } from "../../tokens";
+import { tokens } from "../../style-dictionary/dist/tokens";
 
 <Meta title="Components/Data/Card" component={Card} />
 
@@ -61,7 +61,7 @@ Using the prop `accentColorPlacement`, the accent color can be placed on the top
   <Story name="CardColorGreen">
     <Card
       clickable
-      accentColor={colors.brandGreen["400"]}
+      accentColor={tokens.color.brandGreen["400"]}
       cardSize={250}
       bodyProps={{ onClick: onCardClick }}
       bodySlot="Body"
@@ -70,7 +70,7 @@ Using the prop `accentColorPlacement`, the accent color can be placed on the top
   <Story name="CardColorGray">
     <Card
       clickable
-      accentColor={colors.gray["400"]}
+      accentColor={tokens.color.gray["400"]}
       cardSize={250}
       bodyProps={{ onClick: onCardClick }}
       bodySlot="Body"
@@ -79,7 +79,7 @@ Using the prop `accentColorPlacement`, the accent color can be placed on the top
   <Story name="CardColorYellow">
     <Card
       clickable
-      accentColor={colors.gold["400"]}
+      accentColor={tokens.color.gold["400"]}
       cardSize={250}
       bodyProps={{ onClick: onCardClick }}
       bodySlot="Body"
@@ -88,7 +88,7 @@ Using the prop `accentColorPlacement`, the accent color can be placed on the top
   <Story name="CardColorBlue">
     <Card
       clickable
-      accentColor={colors.blue["400"]}
+      accentColor={tokens.color.blue["400"]}
       cardSize={250}
       bodyProps={{ onClick: onCardClick }}
       bodySlot="Body"
@@ -97,7 +97,7 @@ Using the prop `accentColorPlacement`, the accent color can be placed on the top
   <Story name="CardColorPurple">
     <Card
       clickable
-      accentColor={colors.purple["400"]}
+      accentColor={tokens.color.purple["400"]}
       cardSize={250}
       bodyProps={{ onClick: onCardClick }}
       bodySlot="Body"
@@ -106,7 +106,7 @@ Using the prop `accentColorPlacement`, the accent color can be placed on the top
   <Story name="CardColorRed">
     <Card
       clickable
-      accentColor={colors.red["400"]}
+      accentColor={tokens.color.red["400"]}
       cardSize={250}
       bodyProps={{ onClick: onCardClick }}
       bodySlot="Body"
@@ -118,7 +118,7 @@ Using the prop `accentColorPlacement`, the accent color can be placed on the top
   <Story name="CardColorGreenLeft">
     <Card
       clickable
-      accentColor={colors.brandGreen["400"]}
+      accentColor={tokens.color.brandGreen["400"]}
       accentColorPlacement="left"
       cardSize={250}
       bodyProps={{ onClick: onCardClick }}
@@ -128,7 +128,7 @@ Using the prop `accentColorPlacement`, the accent color can be placed on the top
   <Story name="CardColorGrayLeft">
     <Card
       clickable
-      accentColor={colors.gray["400"]}
+      accentColor={tokens.color.gray["400"]}
       accentColorPlacement="left"
       cardSize={250}
       bodyProps={{ onClick: onCardClick }}
@@ -138,7 +138,7 @@ Using the prop `accentColorPlacement`, the accent color can be placed on the top
   <Story name="CardColorYellowLeft">
     <Card
       clickable
-      accentColor={colors.gold["400"]}
+      accentColor={tokens.color.gold["400"]}
       accentColorPlacement="left"
       cardSize={250}
       bodyProps={{ onClick: onCardClick }}
@@ -148,7 +148,7 @@ Using the prop `accentColorPlacement`, the accent color can be placed on the top
   <Story name="CardColorBlueLeft">
     <Card
       clickable
-      accentColor={colors.blue["400"]}
+      accentColor={tokens.color.blue["400"]}
       accentColorPlacement="left"
       cardSize={250}
       bodyProps={{ onClick: onCardClick }}
@@ -158,7 +158,7 @@ Using the prop `accentColorPlacement`, the accent color can be placed on the top
   <Story name="CardColorPurpleLeft">
     <Card
       clickable
-      accentColor={colors.purple["400"]}
+      accentColor={tokens.color.purple["400"]}
       accentColorPlacement="left"
       cardSize={250}
       bodyProps={{ onClick: onCardClick }}
@@ -168,7 +168,7 @@ Using the prop `accentColorPlacement`, the accent color can be placed on the top
   <Story name="CardColorRedLeft">
     <Card
       clickable
-      accentColor={colors.red["400"]}
+      accentColor={tokens.color.red["400"]}
       accentColorPlacement="left"
       cardSize={250}
       bodyProps={{ onClick: onCardClick }}
@@ -186,17 +186,12 @@ If content is provided to the `footerSlot` prop, a separate footer section will
   <Story name="Content1">
     <Card
       clickable
-      accentColor={colors.brandGreen["400"]}
+      accentColor={tokens.color.brandGreen["400"]}
       cardSize={250}
       bodyProps={{ onClick: onCardClick }}
       bodySlot={
-        <Flex className="h-full flex-col items-center justify-center ">
-          <VendorLogo
-            src="https://logo.clearbit.com/conveyorhq.com"
-            vendorName="Conveyor"
-            size={20}
-            alt=""
-          />
+        <Flex className="h-full flex-col items-center justify-center gap-y-2">
+          <ConveyorLogo variant="icon" size={20} />
           <Heading.H3>Conveyor</Heading.H3>
         </Flex>
       }
@@ -212,7 +207,7 @@ If content is provided to the `footerSlot` prop, a separate footer section will
   <Story name="Content2">
     <Card
       clickable
-      accentColor={colors.brandGreen["400"]}
+      accentColor={tokens.color.brandGreen["400"]}
       accentColorPlacement="left"
       cardSize={250}
       bodyProps={{ onClick: onCardClick }}
@@ -244,7 +239,7 @@ Sizing a group of cards should be done using the `Card.Group` component. Size fo
     <Card
       clickable
       cardSize={250}
-      accentColor={colors.brandGreen["400"]}
+      accentColor={tokens.color.brandGreen["400"]}
       bodyProps={{ onClick: onCardClick }}
       bodySlot="250"
     />
@@ -253,7 +248,7 @@ Sizing a group of cards should be done using the `Card.Group` component. Size fo
     <Card
       clickable
       cardSize={250}
-      accentColor={colors.brandGreen["400"]}
+      accentColor={tokens.color.brandGreen["400"]}
       bodyProps={{ onClick: onCardClick }}
       bodySlot="250"
       footerSlot="Footer"
@@ -263,7 +258,7 @@ Sizing a group of cards should be done using the `Card.Group` component. Size fo
     <Card
       clickable
       cardSize={200}
-      accentColor={colors.brandGreen["400"]}
+      accentColor={tokens.color.brandGreen["400"]}
       bodyProps={{ onClick: onCardClick }}
       bodySlot="200"
     />
@@ -272,7 +267,7 @@ Sizing a group of cards should be done using the `Card.Group` component. Size fo
     <Card
       clickable
       cardSize={200}
-      accentColor={colors.brandGreen["400"]}
+      accentColor={tokens.color.brandGreen["400"]}
       bodyProps={{ onClick: onCardClick }}
       bodySlot="200"
       footerSlot="Footer"
@@ -310,15 +305,10 @@ export const Link = ({ to, children, ...rest }) => (
     <Card
       clickable
       cardSize={250}
-      accentColor={colors.brandGreen["400"]}
+      accentColor={tokens.color.brandGreen["400"]}
       bodySlot={
-        <Flex className="h-full flex-col items-center justify-center ">
-          <VendorLogo
-            src="https://logo.clearbit.com/conveyorhq.com"
-            vendorName="Conveyor"
-            size={20}
-            alt=""
-          />
+        <Flex className="h-full flex-col items-center justify-center gap-y-2">
+          <ConveyorLogo variant="icon" size={20} />
           <Heading.H3>Conveyor</Heading.H3>
         </Flex>
       }
@@ -339,15 +329,10 @@ export const Link = ({ to, children, ...rest }) => (
     <Card
       clickable
       cardSize={250}
-      accentColor={colors.brandGreen["400"]}
+      accentColor={tokens.color.brandGreen["400"]}
       bodySlot={
-        <Flex className="h-full flex-col items-center justify-center ">
-          <VendorLogo
-            src="https://logo.clearbit.com/conveyorhq.com"
-            vendorName="Conveyor"
-            size={20}
-            alt=""
-          />
+        <Flex className="h-full flex-col items-center justify-center gap-y-2">
+          <ConveyorLogo variant="icon" size={20} />
           <Heading.H3>Conveyor</Heading.H3>
         </Flex>
       }
@@ -374,16 +359,11 @@ export const Link = ({ to, children, ...rest }) => (
       clickable
       cardDisabled
       cardSize={250}
-      accentColor={colors.brandGreen["400"]}
+      accentColor={tokens.color.brandGreen["400"]}
       bodyProps={{ onClick: onCardClick }}
       bodySlot={
-        <Flex className="h-full flex-col items-center justify-center ">
-          <VendorLogo
-            src="https://logo.clearbit.com/conveyorhq.com"
-            vendorName="Conveyor"
-            size={20}
-            alt=""
-          />
+        <Flex className="h-full flex-col items-center justify-center gap-y-2">
+          <ConveyorLogo variant="icon" size={20} />
           <Heading.H3>Conveyor</Heading.H3>
         </Flex>
       }
@@ -401,16 +381,11 @@ export const Link = ({ to, children, ...rest }) => (
       clickable
       bodyDisabled
       cardSize={250}
-      accentColor={colors.brandGreen["400"]}
+      accentColor={tokens.color.brandGreen["400"]}
       bodyProps={{ onClick: onCardClick }}
       bodySlot={
-        <Flex className="h-full flex-col items-center justify-center ">
-          <VendorLogo
-            src="https://logo.clearbit.com/conveyorhq.com"
-            vendorName="Conveyor"
-            size={20}
-            alt=""
-          />
+        <Flex className="h-full flex-col items-center justify-center gap-y-2">
+          <ConveyorLogo variant="icon" size={20} />
           <Heading.H3>Conveyor</Heading.H3>
         </Flex>
       }
@@ -430,16 +405,24 @@ export const Link = ({ to, children, ...rest }) => (
 <Preview>
   <Story name="NotClickableGreen">
     <Card
-      accentColor={colors.brandGreen["400"]}
+      accentColor={tokens.color.brandGreen["400"]}
       cardSize={250}
       bodySlot="Body"
     />
   </Story>
   <Story name="NotClickableGray">
-    <Card accentColor={colors.gray["400"]} cardSize={250} bodySlot="Body" />
+    <Card
+      accentColor={tokens.color.gray["400"]}
+      cardSize={250}
+      bodySlot="Body"
+    />
   </Story>
   <Story name="NotClickableYellow">
-    <Card accentColor={colors.gold["400"]} cardSize={250} bodySlot="Body" />
+    <Card
+      accentColor={tokens.color.gold["400"]}
+      cardSize={250}
+      bodySlot="Body"
+    />
   </Story>
 </Preview>
 
@@ -451,7 +434,7 @@ export const Link = ({ to, children, ...rest }) => (
       isPlaceholder
       bodyDisabled
       cardSize={250}
-      accentColor={colors.gold["400"]}
+      accentColor={tokens.color.gold["400"]}
       bodySlot={
         <Flex className="h-full flex-col justify-center">
           <Heading.H2>Conveyor</Heading.H2>
@@ -581,24 +564,24 @@ The default card gap is `20px`. This should be suitable for the majority of use
       <Card
         bodySlot="Body"
         footerSlot="Footer"
-        accentColor={colors.brandGreen["400"]}
+        accentColor={tokens.color.brandGreen["400"]}
       />
       <Card
         bodySlot="Body"
         footerSlot="Footer"
-        accentColor={colors.brandGreen["400"]}
+        accentColor={tokens.color.brandGreen["400"]}
       />
       <Card bodySlot="Body" footerSlot="Footer" />
       <Card
         bodySlot="Body"
         footerSlot="Footer"
-        accentColor={colors.gold["400"]}
+        accentColor={tokens.color.gold["400"]}
       />
       <Card bodySlot="Body" footerSlot="Footer" />
       <Card
         bodySlot="Body"
         footerSlot="Footer"
-        accentColor={colors.brandGreen["400"]}
+        accentColor={tokens.color.brandGreen["400"]}
       />
     </Card.Group>
   </Story>
@@ -612,32 +595,32 @@ The default card gap is `20px`. This should be suitable for the majority of use
       <Card
         bodySlot="Body"
         footerSlot="Footer"
-        accentColor={colors.brandGreen["400"]}
+        accentColor={tokens.color.brandGreen["400"]}
       />
       <Card
         bodySlot="Body"
         footerSlot="Footer"
-        accentColor={colors.brandGreen["400"]}
+        accentColor={tokens.color.brandGreen["400"]}
       />
       <Card
         bodySlot="Body"
         footerSlot="Footer"
-        accentColor={colors.gray["400"]}
+        accentColor={tokens.color.gray["400"]}
       />
       <Card
         bodySlot="Body"
         footerSlot="Footer"
-        accentColor={colors.gold["400"]}
+        accentColor={tokens.color.gold["400"]}
       />
       <Card
         bodySlot="Body"
         footerSlot="Footer"
-        accentColor={colors.gray["400"]}
+        accentColor={tokens.color.gray["400"]}
       />
       <Card
         bodySlot="Body"
         footerSlot="Footer"
-        accentColor={colors.brandGreen["400"]}
+        accentColor={tokens.color.brandGreen["400"]}
       />
     </Card.Group>
   </Story>

package/src/components/CloseButton/CloseButton.tsx

@@ -5,7 +5,7 @@ import { bem } from "../../utilities/bem";
 
 const cn = "CloseButton";
 
-type CloseButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export type CloseButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(
   (props, ref) => {

package/src/components/ConveyorLogo/ConveyorLogo.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { THEME } from "../../types";
-import { colors } from "../../tokens";
+import { tokens } from "../../style-dictionary/dist/tokens";
 import { Svg, SvgProps } from "../Svg";
 
 const WIDTH = 165;
@@ -25,20 +25,20 @@ export const ConveyorLogo = ({
   ...rest
 }: ConveyorLogoProps) => {
   const wordmarkColor = {
-    brand: colors.white,
-    product: colors.conveyor.black,
+    brand: tokens.color.white,
+    product: tokens.color.brandBlack,
   };
 
   const iconColorFunction = () => {
     if (monochrome && theme === THEME.PRODUCT) {
-      return colors.conveyor.black;
+      return tokens.color.brandBlack;
     }
 
     if (monochrome && theme === THEME.BRAND) {
-      return colors.white;
+      return tokens.color.white;
     }
 
-    return colors.brandGreen[400];
+    return tokens.color.brandGreen[400];
   };
 
   const iconColor = iconColorFunction();
@@ -48,6 +48,7 @@ export const ConveyorLogo = ({
       width={variant === "wordmark" ? widthFromHeight(height) : height}
       height={height}
       viewBox={variant === "wordmark" ? `0 0 ${WIDTH} ${HEIGHT}` : "0 0 32 32"}
+      className={className}
       {...rest}
     >
       {variant === "wordmark" && (

package/src/components/Divider/Divider.tsx

@@ -2,6 +2,9 @@ import React from "react";
 import classNames from "classnames";
 import { ORIENTATION } from "../../types";
 import { Box, BoxProps } from "../Box";
+import { bemHOF } from "../../utilities";
+
+const cn = bemHOF("Divider");
 
 export interface DividerProps extends BoxProps {
   direction?: ORIENTATION;
@@ -9,53 +12,36 @@ export interface DividerProps extends BoxProps {
   thick?: boolean;
 }
 
-const defaultDividerProps = {
-  dashed: false,
-  direction: ORIENTATION.HORIZONTAL,
-  thick: false,
+type DirectionalDividerProps = {
+  className: string;
 };
 
-const HorizontalDivider = (props: DividerProps) => {
-  const { className, dashed, thick, ...rest } = props;
-  return (
-    <Box
-      as="hr"
-      className={classNames(
-        "border-gray-400",
-        dashed && "border-dashed",
-        thick && "border",
-        className,
-      )}
-      {...rest}
-    />
-  );
-};
+const HorizontalDivider = ({ className, ...rest }: DividerProps) => (
+  <Box as="hr" className={className} {...rest} />
+);
 
-const VerticalDivider = (props: DividerProps) => {
-  const { className, dashed, thick, ...rest } = props;
-  const dividerClasses = classNames([
-    "border-l",
-    "border-gray-400",
-    "w-auto",
-    dashed && "border-dashed",
-    thick && "border",
-    className,
-  ]);
-  return <Box className={dividerClasses} {...rest} />;
-};
+const VerticalDivider = ({ className, ...rest }: DirectionalDividerProps) => (
+  <Box className={className} {...rest} />
+);
 
-const Divider = (props: DividerProps) => {
+export const Divider = (props: DividerProps) => {
   const {
     direction = ORIENTATION.HORIZONTAL,
-    dashed = defaultDividerProps.dashed,
-    thick = defaultDividerProps.thick,
+    dashed = false,
+    thick = false,
+    className,
     ...rest
   } = props;
-  return direction === ORIENTATION.HORIZONTAL
-    ? HorizontalDivider({ dashed, thick, ...rest })
-    : VerticalDivider({ dashed, thick, ...rest });
-};
 
-Divider.defaultProps = defaultDividerProps;
+  const styles = classNames([
+    cn(),
+    direction === ORIENTATION.VERTICAL && cn({ m: "vertical" }),
+    dashed && cn({ m: "dashed" }),
+    thick && cn({ m: "thick" }),
+    className,
+  ]);
 
-export { Divider };
+  return direction === ORIENTATION.HORIZONTAL
+    ? HorizontalDivider({ className: styles, ...rest })
+    : VerticalDivider({ className: styles, ...rest });
+};

package/src/components/Divider/index.css

@@ -0,0 +1,16 @@
+.ads-Divider {
+  @apply border-gray-400;
+}
+
+.ads-Divider--dashed {
+  @apply border-dashed;
+}
+
+.ads-Divider--thick {
+  @apply border;
+}
+
+.ads-Divider--vertical {
+  @apply border-l
+    w-auto;
+}