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

package/src/components/Drawer/Drawer.story.mdx

@@ -6,11 +6,11 @@ import {
   Box,
   Button,
   BUTTON_VARIANT,
-  TopBar,
   Text,
   Heading,
   ICON_TYPE,
   Table,
+  Flex,
 } from "../..";
 
 <Meta title="Components/Layout/Drawer" component={Drawer} />
@@ -29,6 +29,12 @@ The `Drawer` and `WithDrawer` components can be used to pull content on and off
 
 When using in conjunction with a table, take note of how the table stretches and collapses. You may need to apply columns widths (or minimum widths) to prevent dramatic fluctuations in the width and height of the full table.
 
+export const FixedSlot = ({ children }) => (
+  <Flex className="bg-white items-center border-b h-12 w-full justify-between px-8">
+    {children}
+  </Flex>
+);
+
 <Preview>
   <Story name="Drawer">
     {() => {
@@ -42,9 +48,9 @@ When using in conjunction with a table, take note of how the table stretches and
               <Drawer
                 headingSlot={<Heading.H4>Drawer Heading</Heading.H4>}
                 footerSlot={
-                  <div className="w-full text-bodySm">
+                  <Flex className="w-full h-12 items-center text-bodySm">
                     This is the footer content
-                  </div>
+                  </Flex>
                 }
               >
                 <Text className="py-4 px-8 text-bodySm">
@@ -53,24 +59,22 @@ When using in conjunction with a table, take note of how the table stretches and
               </Drawer>
             }
             fixedSlotTop={
-              <TopBar
-                leftSlot={
-                  <Button
-                    icon={ICON_TYPE.FILTER}
-                    variant={BUTTON_VARIANT.SECONDARY}
-                    onClick={() => setIsOpen(!isOpen)}
-                  >
-                    Filter Results
-                  </Button>
-                }
-                rightSlot="top content right"
-              />
+              <FixedSlot>
+                <Button
+                  icon={ICON_TYPE.FILTER}
+                  variant={BUTTON_VARIANT.SECONDARY}
+                  onClick={() => setIsOpen(!isOpen)}
+                >
+                  Filter Results
+                </Button>
+                <Box>top content right</Box>
+              </FixedSlot>
             }
             fixedSlotBottom={
-              <TopBar
-                leftSlot="bottom content left"
-                rightSlot="bottom content right"
-              />
+              <FixedSlot>
+                <Box>bottom content left</Box>
+                <Box>bottom content right</Box>
+              </FixedSlot>
             }
             scrollableSlot={
               <Table stickyColumn>
@@ -153,9 +157,9 @@ These are the custom props that extend [`BoxProps`](/?path=/docs/components-box-
               <Drawer
                 headingSlot={<Heading.H4>Drawer Heading</Heading.H4>}
                 footerSlot={
-                  <div className="w-full text-bodySm">
+                  <Flex className="w-full h-12 items-center text-bodySm">
                     This is the footer content
-                  </div>
+                  </Flex>
                 }
               >
                 <Text className="py-4 px-8 text-bodySm">
@@ -164,23 +168,21 @@ These are the custom props that extend [`BoxProps`](/?path=/docs/components-box-
               </Drawer>
             }
             fixedSlotTop={
-              <TopBar
-                leftSlot="top left content"
-                rightSlot={
-                  <Button
-                    variant={BUTTON_VARIANT.SECONDARY}
-                    onClick={() => setIsOpen(!isOpen)}
-                  >
-                    Toggle the Drawer
-                  </Button>
-                }
-              />
+              <FixedSlot>
+                <Box>top left content</Box>
+                <Button
+                  variant={BUTTON_VARIANT.SECONDARY}
+                  onClick={() => setIsOpen(!isOpen)}
+                >
+                  Toggle the Drawer
+                </Button>
+              </FixedSlot>
             }
             fixedSlotBottom={
-              <TopBar
-                leftSlot="bottom content left"
-                rightSlot="bottom content right"
-              />
+              <FixedSlot>
+                <Box>bottom content left</Box>
+                <Box>bottom content right</Box>
+              </FixedSlot>
             }
             scrollableSlot={
               <Box className="p-20 w-screen bg-gray-200">
@@ -210,9 +212,9 @@ These are the custom props that extend [`BoxProps`](/?path=/docs/components-box-
               <Drawer
                 headingSlot={<Heading.H4>Drawer Heading</Heading.H4>}
                 footerSlot={
-                  <div className="w-full text-bodySm">
+                  <Flex className="w-full h-12 items-center text-bodySm">
                     This is the footer content
-                  </div>
+                  </Flex>
                 }
               >
                 <Text className="py-4 px-8 text-bodySm">
@@ -221,23 +223,21 @@ These are the custom props that extend [`BoxProps`](/?path=/docs/components-box-
               </Drawer>
             }
             fixedSlotTop={
-              <TopBar
-                leftSlot={
-                  <Button
-                    variant={BUTTON_VARIANT.SECONDARY}
-                    onClick={() => setIsOpen(!isOpen)}
-                  >
-                    Toggle the Drawer
-                  </Button>
-                }
-                rightSlot="top right content"
-              />
+              <FixedSlot>
+                <Button
+                  variant={BUTTON_VARIANT.SECONDARY}
+                  onClick={() => setIsOpen(!isOpen)}
+                >
+                  Toggle the Drawer
+                </Button>
+                <Box>top right content</Box>
+              </FixedSlot>
             }
             fixedSlotBottom={
-              <TopBar
-                leftSlot="bottom content left"
-                rightSlot="bottom content right"
-              />
+              <FixedSlot>
+                <Box>bottom content left</Box>
+                <Box>bottom content right</Box>
+              </FixedSlot>
             }
             scrollableSlot={
               <Box className="p-20 w-screen bg-gray-200">
@@ -268,9 +268,9 @@ These are the custom props that extend [`BoxProps`](/?path=/docs/components-box-
               <Drawer
                 headingSlot={<Heading.H4>Drawer Heading</Heading.H4>}
                 footerSlot={
-                  <div className="w-full text-bodySm">
+                  <Flex className="w-full h-12 items-center text-bodySm">
                     This is the footer content
-                  </div>
+                  </Flex>
                 }
               >
                 <Text className="py-4 px-8 text-bodySm">
@@ -279,23 +279,21 @@ These are the custom props that extend [`BoxProps`](/?path=/docs/components-box-
               </Drawer>
             }
             fixedSlotTop={
-              <TopBar
-                leftSlot="top left content"
-                rightSlot={
-                  <Button
-                    variant={BUTTON_VARIANT.SECONDARY}
-                    onClick={() => setIsOpen(!isOpen)}
-                  >
-                    Toggle the Drawer
-                  </Button>
-                }
-              />
+              <FixedSlot>
+                <Box>top left content</Box>
+                <Button
+                  variant={BUTTON_VARIANT.SECONDARY}
+                  onClick={() => setIsOpen(!isOpen)}
+                >
+                  Toggle the Drawer
+                </Button>
+              </FixedSlot>
             }
             fixedSlotBottom={
-              <TopBar
-                leftSlot="bottom content left"
-                rightSlot="bottom content right"
-              />
+              <FixedSlot>
+                <Box>bottom content left</Box>
+                <Box>bottom content right</Box>
+              </FixedSlot>
             }
             scrollableSlot={
               <Box className="p-20 w-screen bg-gray-200">

package/src/components/Drawer/Drawer.tsx

@@ -6,7 +6,6 @@ import { easeCubicInOut } from "d3-ease";
 import { bemHOF } from "../../utilities/bem";
 import { DrawerContext } from "../../contexts/drawer";
 import { Box, BoxProps } from "../Box";
-import { TopBar } from "../TopBar";
 import { CloseButton } from "../CloseButton";
 import { Flex } from "../Flex";
 
@@ -215,13 +214,15 @@ export const Drawer = ({
       className={classNames(cn({ e: "innerWrapper" }), className)}
       {...rest}
     >
-      <TopBar
-        className={cn({ e: "topbar" })}
-        leftSlot={headingSlot}
-        rightSlot={
-          <CloseButton className="text-icon -mr-8" onClick={onClose} />
-        }
-      />
+      <Flex className={cn({ e: "topbar" })}>
+        <Flex className={cn({ e: "topbar-left" })}>{headingSlot}</Flex>
+        <Flex className={cn({ e: "topbar-right" })}>
+          <CloseButton
+            className={cn({ e: "topbar-close" })}
+            onClick={onClose}
+          />
+        </Flex>
+      </Flex>
       <Box className={cn({ e: "drawerContent" })}>{children}</Box>
       {!!footerSlot && <Box className={cn({ e: "footer" })}>{footerSlot}</Box>}
     </Flex>

package/src/components/Drawer/index.css

@@ -53,7 +53,32 @@
     justify-between;
 }
 .ads-Drawer-topbar {
-  @apply relative;
+  @apply bg-white
+    items-center
+    border-b
+    relative
+    h-12
+    w-full
+    justify-between;
+}
+
+.ads-Drawer-topbar-left,
+.ads-Drawer-topbar-right {
+  @apply items-center
+    h-full;
+}
+
+.ads-Drawer-topbar-left {
+  @apply pl-8;
+}
+
+.ads-Drawer-topbar-right {
+  @apply pr-8;
+}
+
+.ads-Drawer-topbar-close {
+  @apply text-icon
+    -mr-8;
 }
 
 .ads-Drawer-drawerContent {

package/src/components/Flex/Flex.story.mdx

@@ -0,0 +1,130 @@
+import {
+  Story,
+  Preview,
+  Props,
+  Meta,
+  SourceState,
+} from "@storybook/addon-docs/blocks";
+import { Box } from "../Box";
+import { Flex } from "./Flex";
+
+<Meta title="Components/Layout/Flex" component={Flex} />
+
+# Flex
+
+`Flex` is just a `Box` with [flexbox layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) enabled.
+
+## Installation
+
+```jsx
+import { Flex } from "@conveyorhq/arrow-ds";
+```
+
+## Basic usage
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Flex">
+    <Flex>
+      <Box className="p-4 border rounded">Flex Item</Box>
+      <Box className="p-4 border rounded">Flex Item</Box>
+      <Box className="p-4 border rounded">Flex Item</Box>
+    </Flex>
+  </Story>
+</Preview>
+
+## How is this different from Stack?
+
+Flex is the foundation for [Stack](/docs/components-layout-stack--stack),
+however Stack still relies on programatically wrapping flex items with a `div`
+and then placing margin on each item. For a lightweight alternative, see the
+spacing demo below.
+
+Stack provides built-in props for orientation, spacing, justification and
+direction, but this can also be accomplished with classnames as seen in the
+demos below.
+
+Truthfully, there isn’t a huge advantage to using Stack over Flex right now.
+However, Stack can be useful if you cannot remember or are not sure which
+classnames to use.
+
+## API
+
+Extends `BoxProps`
+
+<Props of={Flex} />
+
+## Demos
+
+Using the [utility classnames](https://tailwindcss.com/docs/flex-basis) provided
+by Tailwind CSS, the Flex component can be made more robust. Here are some
+examples detailing how you can layout a variety of items.
+
+### Spacing
+
+The `gap` [property](https://tailwindcss.com/docs/gap) is a nice way to add
+space between items. You can also use `gap-x-*` or `gap-y-*` to set a gap in a
+specific direction.
+
+Gap will not add space to the beginning or end of the list of items.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Flex demo spacing">
+    <Flex className="gap-4">
+      <Box className="p-4 border rounded">Flex Item</Box>
+      <Box className="p-4 border rounded">Flex Item</Box>
+      <Box className="p-4 border rounded">Flex Item</Box>
+    </Flex>
+  </Story>
+</Preview>
+
+### Alignment
+
+Use `items-*` to adjust the
+[alignment](https://tailwindcss.com/docs/align-items) of flex items.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Flex demo alignment">
+    <Flex className="gap-4 items-center">
+      <Box className="p-4 border rounded">Flex Item</Box>
+      <Box className="p-8 border rounded">Flex Item</Box>
+      <Box className="p-4 border rounded">Flex Item</Box>
+    </Flex>
+  </Story>
+</Preview>
+
+### Justification
+
+Use `justify-*` to adjust the
+[justification](https://tailwindcss.com/docs/justify-content) of flex
+items.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Flex demo justification">
+    <Flex className="gap-4 justify-between">
+      <Box className="p-4 border rounded">Flex Item</Box>
+      <Box className="p-4 border rounded">Flex Item</Box>
+      <Box className="p-4 border rounded">Flex Item</Box>
+    </Flex>
+  </Story>
+</Preview>
+
+### Direction
+
+By default, flex items are rendered inline within a row, but there are
+classnames you can use to change the
+[direction](https://tailwindcss.com/docs/flex-direction) in which items render.
+
+`flex-row`
+`flex-row-reverse`
+`flex-col`
+`flex-col-reverse`
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Flex demo direction">
+    <Flex className="gap-4 flex-col-reverse">
+      <Box className="p-4 border rounded">Flex Item 1</Box>
+      <Box className="p-4 border rounded">Flex Item 2</Box>
+      <Box className="p-4 border rounded">Flex Item 3</Box>
+    </Flex>
+  </Story>
+</Preview>

package/src/components/Flex/Flex.tsx

@@ -1,12 +1,13 @@
 import React, { forwardRef, FunctionComponent } from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { Box, BoxProps } from "../Box";
+import { bemHOF } from "../../utilities";
+
+const cn = bemHOF("Flex");
 
 export const Flex: FunctionComponent<BoxProps> = forwardRef<
   HTMLDivElement,
   BoxProps
->((props, ref) => {
-  const { className, ...rest } = props;
-
-  return <Box ref={ref} {...rest} className={cn("flex", className)} />;
-});
+>(({ className, ...rest }, ref) => (
+  <Box className={classNames([cn(), className])} ref={ref} {...rest} />
+));

package/src/components/Flex/index.css

@@ -0,0 +1,3 @@
+.ads-Flex {
+  @apply flex;
+}

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

@@ -7,7 +7,6 @@ import {
 } from "@storybook/addon-docs/blocks";
 import { Flex } from "../Flex";
 import { ScrollPane } from "../ScrollPane";
-import { TopBar } from "../TopBar";
 import { Frame } from "./Frame";
 
 <Meta title="Components/Layout/Frame" component={Frame} />
@@ -40,14 +39,33 @@ 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>
 );
 
+export const TopBar = () => (
+  <Flex className="items-center bg-white border-b h-appbar w-full px-8">
+    topbar
+  </Flex>
+);
+
 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}>
@@ -56,9 +74,6 @@ export const Main = () => (
       <Frame.Area name="appbar">
         <AppBar />
       </Frame.Area>
-      <Frame.Area name="topbar">
-        <TopBar leftSlot="topbar" />
-      </Frame.Area>
       <Frame.Area name="main">
         <ScrollPane>
           <Main />
@@ -79,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;
 }