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

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" }),
   };
@@ -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,

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

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

@@ -7,7 +7,7 @@ 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";
@@ -190,13 +190,8 @@ If content is provided to the `footerSlot` prop, a separate footer section will
       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>
       }
@@ -312,13 +307,8 @@ export const Link = ({ to, children, ...rest }) => (
       cardSize={250}
       accentColor={colors.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>
       }
@@ -341,13 +331,8 @@ export const Link = ({ to, children, ...rest }) => (
       cardSize={250}
       accentColor={colors.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>
       }
@@ -377,13 +362,8 @@ export const Link = ({ to, children, ...rest }) => (
       accentColor={colors.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>
       }
@@ -404,13 +384,8 @@ export const Link = ({ to, children, ...rest }) => (
       accentColor={colors.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>
       }

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

@@ -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;
+}