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

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

@@ -1,12 +1,11 @@
 import React, { useContext, useState } from "react";
-import { useSpring, animated } from "react-spring";
+import { useSpring, animated } from "@react-spring/web";
 import classNames from "classnames";
 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} />
@@ -46,6 +45,12 @@ export const 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>
 );
@@ -57,7 +62,7 @@ export const Main = () => (
         <AppBar />
       </Frame.Area>
       <Frame.Area name="topbar">
-        <TopBar leftSlot="topbar" />
+        <TopBar />
       </Frame.Area>
       <Frame.Area name="main">
         <ScrollPane>