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

package/src/components/Button/Button.tsx

@@ -148,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,
     );
 
@@ -184,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/Card/Card.story.mdx

@@ -11,7 +11,7 @@ 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,7 +186,7 @@ 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={
@@ -207,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 }}
@@ -239,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"
     />
@@ -248,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"
@@ -258,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"
     />
@@ -267,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"
@@ -305,7 +305,7 @@ 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 gap-y-2">
           <ConveyorLogo variant="icon" size={20} />
@@ -329,7 +329,7 @@ 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 gap-y-2">
           <ConveyorLogo variant="icon" size={20} />
@@ -359,7 +359,7 @@ 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 gap-y-2">
@@ -381,7 +381,7 @@ 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 gap-y-2">
@@ -405,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>
 
@@ -426,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>
@@ -556,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>
@@ -587,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/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();

package/src/components/Drawer/Drawer.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from "react";
-import { useSpring, animated } from "@react-spring/web";
+import { useSpring, animated } from "react-spring";
 import classNames from "classnames";
 import { easeCubicInOut } from "d3-ease";
 

package/src/components/Frame/Frame.story.mdx

@@ -39,8 +39,17 @@ area; see templates for more detailed examples.
 import { Frame } from "@conveyorhq/arrow-ds";
 ```
 
+export const NavBar = () => (
+  <Flex
+    className="bg-gray-100 justify-center items-center text-gray-800 h-full w-15 border-r"
+    style={{ width: "60px" }}
+  >
+    navbar
+  </Flex>
+);
+
 export const AppBar = () => (
-  <Flex className="items-center text-gray-400 h-appbar w-full px-8">
+  <Flex className="bg-gray-900 items-center text-gray-400 h-appbar w-full px-8">
     appbar
   </Flex>
 );
@@ -52,7 +61,11 @@ export const TopBar = () => (
 );
 
 export const Main = () => (
-  <Flex className="text-gray-800 w-full p-8">main</Flex>
+  <Flex className="bg-gray-100 text-gray-800 h-full w-full p-8">main</Flex>
+);
+
+export const BottomBar = () => (
+  <Flex className="bg-white border-t text-gray-800 w-full p-8">bottombar</Flex>
 );
 
 <Preview withSource={SourceState.OPEN}>
@@ -61,9 +74,6 @@ export const Main = () => (
       <Frame.Area name="appbar">
         <AppBar />
       </Frame.Area>
-      <Frame.Area name="topbar">
-        <TopBar />
-      </Frame.Area>
       <Frame.Area name="main">
         <ScrollPane>
           <Main />
@@ -84,3 +94,128 @@ export const Main = () => (
 `children` and `name` are required.
 
 <Props of={Frame.Area} />
+
+### Layouts
+
+#### Basic
+
+The basic layout shown here is likely the bare minimum that a page should have.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Frame basic">
+    <Frame>
+      <Frame.Area name="appbar">
+        <AppBar />
+      </Frame.Area>
+      <Frame.Area name="main">
+        <ScrollPane>
+          <Main />
+        </ScrollPane>
+      </Frame.Area>
+    </Frame>
+  </Story>
+</Preview>
+
+#### With a topbar
+
+The topbar area is generally used for the TopBar component, which contains
+breadcrumbs and different page-level actions. This is the most common layout.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Frame topbar">
+    <Frame>
+      <Frame.Area name="appbar">
+        <AppBar />
+      </Frame.Area>
+      <Frame.Area name="topbar">
+        <TopBar leftSlot="topbar" />
+      </Frame.Area>
+      <Frame.Area name="main">
+        <ScrollPane>
+          <Main />
+        </ScrollPane>
+      </Frame.Area>
+    </Frame>
+  </Story>
+</Preview>
+
+#### With a bottombar
+
+The bottombar area was introduced to display a cookie consent banner within
+comply-ui. The bottombar area currently has no use outside of that.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Frame bottombar">
+    <Frame>
+      <Frame.Area name="appbar">
+        <AppBar />
+      </Frame.Area>
+      <Frame.Area name="topbar">
+        <TopBar leftSlot="topbar" />
+      </Frame.Area>
+      <Frame.Area name="main">
+        <ScrollPane>
+          <Main />
+        </ScrollPane>
+      </Frame.Area>
+      <Frame.Area name="bottombar">
+        <BottomBar />
+      </Frame.Area>
+    </Frame>
+  </Story>
+</Preview>
+
+#### With a navbar
+
+The navbar area is used to display additional app-wide navigation controls
+horizontally on the left-side of the frame. It can be used with or without the
+appbar area.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Frame navbar">
+    <Frame>
+      <Frame.Area name="navbar">
+        <NavBar />
+      </Frame.Area>
+      <Frame.Area name="appbar">
+        <AppBar />
+      </Frame.Area>
+      <Frame.Area name="topbar">
+        <TopBar leftSlot="topbar" />
+      </Frame.Area>
+      <Frame.Area name="main">
+        <ScrollPane>
+          <Main />
+        </ScrollPane>
+      </Frame.Area>
+    </Frame>
+  </Story>
+</Preview>
+
+#### All areas
+
+This example just shows all of the possible areas in one layout.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Frame all">
+    <Frame>
+      <Frame.Area name="navbar">
+        <NavBar />
+      </Frame.Area>
+      <Frame.Area name="appbar">
+        <AppBar />
+      </Frame.Area>
+      <Frame.Area name="topbar">
+        <TopBar leftSlot="topbar" />
+      </Frame.Area>
+      <Frame.Area name="main">
+        <ScrollPane>
+          <Main />
+        </ScrollPane>
+      </Frame.Area>
+      <Frame.Area name="bottombar">
+        <BottomBar />
+      </Frame.Area>
+    </Frame>
+  </Story>
+</Preview>

package/src/components/Frame/Frame.tsx

@@ -5,7 +5,7 @@ import { Grid } from "../Grid";
 
 const cn = bemHOF("Frame");
 
-type FrameAreaName = "appbar" | "topbar" | "main" | "bottombar";
+type FrameAreaName = "navbar" | "appbar" | "topbar" | "main" | "bottombar";
 
 interface FrameProps {
   children: ReactNode;

package/src/components/Frame/index.css

@@ -1,23 +1,21 @@
 .ads-Frame {
-  @apply bg-gray-100
-    h-screen;
+  @apply h-screen;
 
-  grid-template-columns: [full] 1fr;
-  grid-template-rows: [appbar] auto [topbar] auto [main] 1fr [bottombar] auto;
+  grid-template-columns: [navbar] auto [full] 1fr [column-end];
+  grid-template-rows: [appbar] auto [topbar] auto [main] 1fr [bottombar] auto [row-end];
 }
 
-.ads-Frame-appbar {
-  @apply bg-gray-900
-    h-full;
+.ads-Frame-navbar {
+  grid-column: navbar;
+  grid-row: appbar / row-end;
+}
 
+.ads-Frame-appbar {
   grid-column: full;
   grid-row: appbar;
 }
 
 .ads-Frame-topbar {
-  @apply bg-white
-    h-full;
-
   grid-column: full;
   grid-row: topbar;
 }
@@ -31,9 +29,6 @@
 }
 
 .ads-Frame-bottombar {
-  @apply bg-white
-    h-full;
-
   grid-column: full;
   grid-row: bottombar;
 }

package/src/components/Icon/Icon.tsx

@@ -111,6 +111,7 @@ import { faThumbsUp as faThumbsUpSolid } from "@fortawesome/free-solid-svg-icons
 import { faTicketAlt } from "@fortawesome/free-solid-svg-icons/faTicketAlt";
 import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
 import { faTrash } from "@fortawesome/free-solid-svg-icons/faTrash";
+import { faUnlock } from "@fortawesome/free-solid-svg-icons/faUnlock";
 import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
 import { faUserAstronaut } from "@fortawesome/free-solid-svg-icons/faUserAstronaut";
 import { faUserPlus } from "@fortawesome/free-solid-svg-icons/faUserPlus";
@@ -240,6 +241,7 @@ library.add(
   faTimes,
   faTimesCircle,
   faTrash,
+  faUnlock,
   faUser,
   faUserAstronaut,
   faUserPlus,
@@ -369,6 +371,7 @@ export enum ICON_TYPE {
   THUMBS_DOWN = "thumbs-down",
   THUMBS_UP = "thumbs-up",
   TRASH = "trash",
+  UNLOCK = "unlock",
   USER = "user",
   USER_ASTRONAUT = "user-astronaut",
   USER_PLUS = "user-plus",

package/src/components/MenuRenderer/MenuRenderer.tsx

@@ -8,7 +8,7 @@ import React, {
 import { useId } from "@reach/auto-id";
 import FocusLock from "react-focus-lock";
 import { usePopper } from "react-popper";
-import { animated, useTransition } from "@react-spring/web";
+import { animated, useTransition } from "react-spring";
 import { easeCubicInOut } from "d3-ease";
 import { useDisclosure, useKeyPress, useOutsideClick } from "../../hooks";
 import { KEY_CODE, PopperPlacement } from "../../types";
@@ -207,7 +207,7 @@ export const MenuRenderer = ({
 
   const PortalComponent = hasPortal ? Portal : Fragment;
 
-  const transitions = useTransition(isOpen, {
+  const transitions = useTransition(isOpen, null, {
     from: TRANSITION_START,
     enter: TRANSITION_END,
     leave: TRANSITION_START,
@@ -220,10 +220,10 @@ export const MenuRenderer = ({
   return (
     <Box className={className} ref={menuElement} {...rest}>
       <Box ref={setReferenceElement}>{trigger(triggerProps, triggerState)}</Box>
-      {transitions(
-        ({ opacity, transform }, item) =>
+      {transitions.map(
+        ({ item, key, props: transitionProps }) =>
           item && (
-            <PortalComponent>
+            <PortalComponent key={key}>
               <MenuContext.Provider value={context}>
                 <Box
                   className={hasPortal ? "z-toast" : "z-menu"}
@@ -233,10 +233,8 @@ export const MenuRenderer = ({
                 >
                   <FocusLock autoFocus={autoFocus}>
                     <animated.div
-                      style={{
-                        opacity,
-                        transform,
-                      }}
+                      key={key}
+                      style={transitionProps}
                       ref={menuListElement}
                     >
                       {typeof children === "function"