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

package/src/components/Snackbar/types.ts

@@ -0,0 +1,180 @@
+import {
+  Action,
+  RequiredToasterProps,
+  ToasterPositionOptions,
+} from "../../types";
+import { BoxProps } from "../Box";
+import { IconType } from "../Icon";
+
+/**
+ * Redefines RequiredToasterProps for Snackbar’s instance
+ */
+export type SnackbarToasterProps = RequiredToasterProps;
+
+/**
+ * The positioning options are a subset that are supported by Toaster; addtional
+ * options may be added as needed
+ */
+type SnackbarPosition = Extract<
+  ToasterPositionOptions,
+  "bottom-left" | "bottom-right"
+>;
+
+/**
+ * Props that are shared between all implementations of the Snackbar
+ */
+type SnackbarSharedProps = {
+  /**
+   * Position of the snackbar in relation to the browser window
+   */
+  position?: SnackbarPosition;
+  /**
+   * The amount of time (in milliseconds) the snackbar appears on-screen. If
+   * undefined, then the Snackbar will stay on-screen indefinitely. An undefined
+   * duration would be used in cases when the Snackbar is used as a loading
+   * message (e.g., an in progress API call).
+   */
+  duration?: number | null;
+};
+
+/**
+ * Defines the type for a custom Snackbar component
+ */
+type SnackbarWithComponentProps = {
+  /**
+   * Component to render as the Snackbar
+   */
+  component: React.ReactNode;
+  message?: never;
+};
+
+/**
+ * Defines the type for the default Snackbar which requires a message string
+ */
+type SnackbarWithMessageProps = {
+  /**
+   * The message shown in the Snackbar; ideally short and succinct
+   */
+  message: React.ReactNode;
+  component?: never;
+};
+
+/**
+ * Defines the type which determines if a Snackbar is visible
+ */
+type SnackbarIsVisibleProp = {
+  isVisible: boolean;
+};
+
+/**
+ * Additional props for the Snackbar component
+ */
+type SnackbarOtherProps = {
+  /**
+   * Adds an action next to the message
+   */
+  action?: Action;
+  /**
+   * When a loading icon is detected, it will automatically spin.
+   *
+   * Sizing is handled automatically, too.
+   */
+  icon?: IconType;
+  /**
+   * Prevent the close button from rendering. Useful in cases when the Snackbar
+   * is used as a loading message (e.g., an in progress API call).
+   */
+  disableClose?: boolean;
+};
+
+/**
+ * Snackbar component props
+ */
+export type SnackbarProps = Omit<SnackbarWithMessageProps, "component"> &
+  SnackbarOtherProps &
+  SnackbarSharedProps &
+  BoxProps;
+
+/**
+ * Snackbar.Root component props
+ */
+export type SnackbarRootProps = BoxProps;
+
+/**
+ * Snackbar.Icon component props
+ */
+export type SnackbarIconProps = Pick<SnackbarOtherProps, "icon">;
+
+/**
+ * Snackbar.Text component props
+ */
+export type SnackbarTextProps = { children: React.ReactNode };
+
+/**
+ * Snackbar state props
+ */
+export type SnackbarStateProps = Pick<SnackbarToasterProps, "id"> &
+  Pick<SnackbarSharedProps, "position">;
+
+/**
+ * Snackbar context props
+ */
+export type SnackbarContextProps = SnackbarToasterProps & SnackbarSharedProps;
+
+/**
+ * Snackbar provider props
+ */
+export type SnackbarProviderProps = SnackbarToasterProps &
+  SnackbarSharedProps &
+  Omit<SnackbarWithComponentProps, "message">;
+
+/**
+ * Defines the type for showing a Snackbar using the default component, which
+ * requires a message and includes optional other props
+ */
+type ShowSnackbarWithMessageProps = SnackbarWithMessageProps &
+  SnackbarOtherProps &
+  SnackbarSharedProps &
+  BoxProps;
+
+/**
+ * Defines the type for showing a Snackbar with a custom component
+ */
+type ShowSnackbarWithComponentProps = SnackbarWithComponentProps &
+  SnackbarSharedProps;
+
+/**
+ * Defines the type for the showSnackbar helper
+ */
+export type ShowSnackbarProps =
+  | ShowSnackbarWithMessageProps
+  | ShowSnackbarWithComponentProps;
+
+/**
+ * Redefines SnackbarStateProps for the hideSnackbar helper
+ */
+export type HideSnackbarProps = SnackbarStateProps;
+
+/**
+ * Defines the type for the hook to show a Snackbar using the default component,
+ * which requires a message and includes optional other props
+ */
+type SnackbarWithMessageHookProps = SnackbarWithMessageProps &
+  SnackbarOtherProps &
+  SnackbarSharedProps &
+  SnackbarIsVisibleProp &
+  BoxProps;
+
+/**
+ * Defines the type for the hook to showi a Snackbar with a custom component
+ */
+type SnackbarWithComponentHookProps = SnackbarWithComponentProps &
+  SnackbarSharedProps &
+  SnackbarIsVisibleProp;
+
+/**
+ * Defines the type for the useSnackbar hook
+ */
+export type SnackbarHookProps =
+  | SnackbarWithMessageHookProps
+  | SnackbarWithComponentHookProps;

package/src/components/SpeechBubble/SpeechBubble.story.mdx

@@ -0,0 +1,76 @@
+import {
+  Meta,
+  Preview,
+  Props,
+  Story,
+  SourceState,
+} from "@storybook/addon-docs/blocks";
+import { Stack, ORIENTATION } from "../..";
+import { ComponentHeading } from "../../storybook-components";
+import { SpeechBubble } from "./SpeechBubble";
+
+export const placementOptions = [
+  "top-start",
+  "top-end",
+  "bottom-start",
+  "bottom-end",
+];
+
+<Meta title="Components/Data/Speech Bubble" component={SpeechBubble} />
+
+<ComponentHeading
+  componentName="Speech Bubble"
+  description=""
+  sourcePath="src/components/SpeechBubble/SpeechBubble.tsx"
+/>
+
+Displays text in a box styled to look like a speech bubble. Ideally used for
+comments or quotes. It should not be used for general text.
+
+```jsx
+import { SpeechBubble } from "@conveyorhq/arrow-ds";
+```
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="SpeechBubble">
+    <SpeechBubble>This is the SpeechBubble component</SpeechBubble>
+  </Story>
+</Preview>
+
+## Props
+
+<Props of={SpeechBubble} />
+
+## Demos
+
+### Setting the placement of the arrow
+
+Each speech bubble can have its arrow positioned on one of the corners. If
+placement is not set explicitly, then the arrow will be positioned top-left.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="SpeechBubble placement">
+    <Stack className="w-full" orientation={ORIENTATION.VERTICAL} spacing={8}>
+      {placementOptions.map((placement) => (
+        <SpeechBubble placement={placement} key={placement}>
+          Placement: {placement}
+        </SpeechBubble>
+      ))}
+    </Stack>
+  </Story>
+</Preview>
+
+### Using custom styles
+
+An example to show how the styles of the speech bubble can be changed.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="SpeechBubble styles">
+    <SpeechBubble
+      className="w-56 bg-caution p-4 text-h4 text-black"
+      placement="top-start"
+    >
+      Styles are different
+    </SpeechBubble>
+  </Story>
+</Preview>

package/src/components/SpeechBubble/SpeechBubble.tsx

@@ -12,20 +12,41 @@ export type SpeechBubblePlacement =
   | "bottom-end";
 
 export interface SpeechBubbleProps extends BoxProps {
+  /**
+   * data-placement attribute is deprecated, use placement instead
+   */
   "data-placement"?: SpeechBubblePlacement;
+  /**
+   * Tell the speech bubble where to place the arrow
+   */
+  placement?: SpeechBubblePlacement;
 }
 
 export const SpeechBubble = (props: SpeechBubbleProps) => {
   const {
     "data-placement": dataPlacement = "top-start",
+    placement,
     className,
     ...rest
   } = props;
 
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useLayoutEffect(() => {
+    if (ref.current) {
+      const style = window.getComputedStyle(ref.current);
+      ref.current.style.setProperty(
+        "--ads-speech-bubble-bg",
+        style.backgroundColor,
+      );
+    }
+  }, [ref]);
+
   return (
     <Box
+      ref={ref}
       className={classNames(bem(cn), className)}
-      data-placement={dataPlacement}
+      data-placement={placement || dataPlacement}
       {...rest}
     />
   );

package/src/components/SpeechBubble/index.css

@@ -1,10 +1,13 @@
 .ads-SpeechBubble {
-  @apply bg-gray-200
-    rounded
+  --ads-speech-bubble-bg: theme("colors.gray.200");
+
+  @apply rounded
     p-2
     text-gray-700
     text-h5
     relative;
+
+  background-color: var(--ads-speech-bubble-bg);
 }
 
 .ads-SpeechBubble::after {
@@ -16,12 +19,12 @@
 }
 
 .ads-SpeechBubble[data-placement*="top"]::after {
-  border-bottom: 8px solid theme("colors.gray.200");
+  border-bottom: 8px solid var(--ads-speech-bubble-bg);
   top: -8px;
 }
 
 .ads-SpeechBubble[data-placement*="bottom"]::after {
-  border-top: 8px solid theme("colors.gray.200");
+  border-top: 8px solid var(--ads-speech-bubble-bg);
   bottom: -8px;
 }
 

package/src/components/Table/Table.story.mdx

@@ -6,6 +6,8 @@ import { SORT_DIRECTION } from "./TableContext";
 import { Box } from "../Box";
 import { Checkbox } from "../Checkbox";
 import { ScrollPane } from "../ScrollPane";
+import { STATUS_VARIANT } from "../../types";
+import { Banner } from "../Banner";
 import { Button, BUTTON_VARIANT } from "../Button";
 import { ICON_TYPE } from "../Icon";
 
@@ -545,6 +547,123 @@ This example shows how to include a sticky checkbox column to use when batch act
   </Story>
 </Preview>
 
+### Space Rows
+
+<Preview>
+  <Story name="Space Rows">
+    {() => {
+      const useBatchSelect = (data) => {
+        const [selectedItems, setSelectedItems] = React.useState(new Set());
+        const clearAll = () => {
+          setSelectedItems(new Set());
+        };
+        const selectAll = () => {
+          if (data.length === selectedItems.size) {
+            setSelectedItems(new Set());
+          } else {
+            setSelectedItems(new Set(data.map((d) => d.id)));
+          }
+        };
+        const onSelect = (...args) => {
+          const newSet = new Set(selectedItems);
+          args.forEach((id) => {
+            if (selectedItems.has(id)) {
+              newSet.delete(id);
+            } else {
+              newSet.add(id);
+            }
+          });
+          setSelectedItems(newSet);
+        };
+        return {
+          selectedItems,
+          clearAll,
+          selectAll,
+          onSelect,
+        };
+      };
+      const data = "abcdefgh".split("").map((id) => ({ id }));
+      const { selectedItems, onSelect, clearAll, selectAll } = useBatchSelect(
+        data,
+      );
+      const totalItems = data.length;
+      const Row = ({ id, selected }) => {
+        return (
+          <Table.Row selected={selected}>
+            <Table.Cell>
+              <Checkbox onClick={() => onSelect(id)} checked={selected} />
+            </Table.Cell>
+            <Table.Cell>I am Fixed!</Table.Cell>
+            <Table.Cell>unfixed data</Table.Cell>
+            <Table.Cell>unfixed data</Table.Cell>
+            <Table.Cell>unfixed data</Table.Cell>
+            <Table.Cell>unfixed data</Table.Cell>
+            <Table.Cell>unfixed data</Table.Cell>
+          </Table.Row>
+        );
+      };
+      return (
+        <Box className="h-64 bg-gray-100 p-5">
+          <ScrollPane>
+            <Table hasBatchActions spaceRows affixHeader>
+              <Table.Head>
+                <Table.Row>
+                  <Table.HeaderCell
+                    sortable={false}
+                    shrinkToContent
+                    removeVerticalPadding
+                  >
+                    <Checkbox
+                      onClick={() => {
+                        if (selectedItems === totalItems) {
+                          clearAll();
+                        } else {
+                          selectAll();
+                        }
+                      }}
+                      checked={selectedItems.size === totalItems}
+                    />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell sortable={false} minColumnWidth="125px">
+                    #1 Fixed 125px
+                  </Table.HeaderCell>
+                  <Table.HeaderCell sortable={false} minColumnWidth="125px">
+                    #2
+                  </Table.HeaderCell>
+                  <Table.HeaderCell sortable={false} minColumnWidth="125px">
+                    #3
+                  </Table.HeaderCell>
+                  <Table.HeaderCell sortable={false} minColumnWidth="125px">
+                    #4
+                  </Table.HeaderCell>
+                  <Table.HeaderCell sortable={false} minColumnWidth="125px">
+                    #5
+                  </Table.HeaderCell>
+                  <Table.HeaderCell sortable={false} minColumnWidth="125px">
+                    #6
+                  </Table.HeaderCell>
+                </Table.Row>
+              </Table.Head>
+              <Table.Body>
+                {data.map((item) => {
+                  return (
+                    <Row
+                      id={item.id}
+                      key={item.id}
+                      selected={selectedItems.has(item.id)}
+                      onSelect={onSelect}
+                    />
+                  );
+                })}
+              </Table.Body>
+            </Table>
+          </ScrollPane>
+        </Box>
+      );
+    }}
+  </Story>
+</Preview>
+
 ### With column widths
 
 <Preview>
@@ -818,3 +937,127 @@ For the table to scroll, it must be wrapped with a ScrollPane.
     </Table>
   </Story>
 </Preview>
+
+### With aligned headers
+
+The header cells can be aligned left, center or right.
+
+<Preview>
+  <Story name="Table with aligned headers">
+    <Table outerBorder>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell align="left" sortable={false}>
+            ID
+          </Table.HeaderCell>
+          <Table.HeaderCell align="center" sortable={false}>
+            Name
+          </Table.HeaderCell>
+          <Table.HeaderCell align="right" sortable={false}>
+            Email
+          </Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell align="left">1</Table.Cell>
+          <Table.Cell align="center">Wendy George</Table.Cell>
+          <Table.Cell align="right">wendy.george@healthco.com</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell align="left">2</Table.Cell>
+          <Table.Cell align="center">Joe Smith</Table.Cell>
+          <Table.Cell align="right">joe.smith@healthco.com</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  </Story>
+</Preview>
+
+### Using grid column sizing
+
+<Banner title="Experimental Feature" variant={STATUS_VARIANT.WARNING}>
+  This feature is experimental and may cause layout issues when used in
+  production.
+</Banner>
+
+This feature uses
+[CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
+to create a consistent column layout. It’s completely opt-in and the current
+HTML table layout is still the default.
+
+To use grid sizing, set `enableGridSizing` to true and pass an array or string
+of grid columns to `gridSizing`. The value of `gridSizing` can be any valid
+value for the CSS `grid-template-columns`
+[property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns).
+
+The benefit is that when the table is sorted or filtered, the column widths will
+not shift around like they currently do with the default HTML table layout.
+
+<Preview>
+  <Story name="Table grid sizing">
+    {() => {
+      const rowData = [
+        {
+          id: "1",
+          name: "Wendy George",
+          email: "wendy.george@healthco.com",
+        },
+        {
+          id: "2",
+          name: "Joe Smith",
+          email: "joe.smith@healthco.com",
+        },
+        {
+          id: "3",
+          name: "Hannah Williams",
+          email: "hannah.williams@healthco.com",
+        },
+      ];
+      return (
+        <Table
+          enableGridSizing
+          gridSizing={[
+            "1fr",
+            "1.25fr",
+            "2fr",
+            "1fr",
+            ".75fr",
+            "1fr",
+            "1fr",
+            "1fr",
+          ]}
+        >
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>ID</Table.HeaderCell>
+              <Table.HeaderCell>Name</Table.HeaderCell>
+              <Table.HeaderCell>Email</Table.HeaderCell>
+              <Table.HeaderCell>Extra 1</Table.HeaderCell>
+              <Table.HeaderCell>Extra 2</Table.HeaderCell>
+              <Table.HeaderCell>Extra 3</Table.HeaderCell>
+              <Table.HeaderCell>Extra 4</Table.HeaderCell>
+              <Table.HeaderCell>Extra 5</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            {rowData.map((row) => {
+              return (
+                <Table.Row key={row.id}>
+                  <Table.Cell>{row.id}</Table.Cell>
+                  <Table.Cell>{row.name}</Table.Cell>
+                  <Table.Cell>{row.email}</Table.Cell>
+                  <Table.Cell>#1</Table.Cell>
+                  <Table.Cell>#2</Table.Cell>
+                  <Table.Cell>#3</Table.Cell>
+                  <Table.Cell>#4</Table.Cell>
+                  <Table.Cell>#5</Table.Cell>
+                </Table.Row>
+              );
+            })}
+          </Table.Body>
+        </Table>
+      );
+    }}
+  </Story>
+</Preview>

package/src/components/Table/Table.tsx

@@ -61,6 +61,21 @@ interface TableProps extends React.HTMLProps<HTMLTableElement> {
    * Does the table have batch / bulk actions?
    */
   hasBatchActions?: boolean;
+  /**
+   * Add more space (margin) between each row
+   */
+  spaceRows?: boolean;
+  /**
+   * Experimental; enable grid layout for the table and utilize grid column
+   * sizing
+   */
+  enableGridSizing?: boolean;
+  /**
+   * Experimental; set the grid columns when `enableGridSizing` is true. The
+   * values here should ahere to the CSS `grid-template-columns`
+   * [property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
+   */
+  gridSizing?: string | string[];
 }
 
 const Table = ({
@@ -77,11 +92,16 @@ const Table = ({
   enableHorizontalScroll = false, // Deprecated
   stickyColumn = false,
   hasBatchActions = false,
+  spaceRows = false,
+  style,
+  enableGridSizing = false,
+  gridSizing,
   ...rest
 }: TableProps) => {
   const wrapperClasses = classNames(
     bem(wrapperCn),
     enableHorizontalScroll && bem(wrapperCn, { m: "enable-hscroll" }),
+    spaceRows && bem(wrapperCn, { m: "space-rows" }),
   );
 
   const classes = classNames(
@@ -92,6 +112,8 @@ const Table = ({
     noResults && bem(cn, { m: "no-results" }),
     stickyColumn && bem(cn, { m: "sticky-column" }),
     hasBatchActions && bem(cn, { m: "batch-actions" }),
+    spaceRows && bem(cn, { m: "space-rows" }),
+    enableGridSizing && gridSizing && bem(cn, { m: "grid-sizing" }),
     className,
   );
 
@@ -109,7 +131,20 @@ const Table = ({
       }}
     >
       <div className={wrapperClasses}>
-        <table className={classes} {...rest}>
+        <table
+          className={classes}
+          style={
+            enableGridSizing && gridSizing
+              ? {
+                  gridTemplateColumns: Array.isArray(gridSizing)
+                    ? gridSizing.join(" ")
+                    : gridSizing,
+                  ...style,
+                }
+              : style
+          }
+          {...rest}
+        >
           {children}
         </table>
       </div>