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

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/Svg/Svg.story.mdx

@@ -0,0 +1,36 @@
+import {
+  Story,
+  Preview,
+  Meta,
+  SourceState,
+} from "@storybook/addon-docs/blocks";
+import { colors } from "../../tokens";
+import { Svg } from "./Svg";
+
+<Meta title="Components/Images/Svg" component={Svg} />
+
+# Svg
+
+`Svg` is a component to display
+[vector images](https://developer.mozilla.org/en-US/docs/Web/SVG).
+
+## Installation
+
+```jsx
+import { Svg } from "@conveyorhq/arrow-ds";
+```
+
+## Basic usage
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Svg">
+    <Svg viewBox="0 0 300 100" fill={colors.gray["900"]}>
+      <circle cx="50" cy="50" r="40" />
+    </Svg>
+  </Story>
+</Preview>
+
+## API
+
+`Svg` has no special props; you may apply any valid
+[attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute).

package/src/components/Svg/Svg.tsx

@@ -1,7 +1,9 @@
-import React, { FunctionComponent, SVGAttributes } from "react";
+import React from "react";
 
-export type SvgProps = SVGAttributes<SVGElement>;
+export type SvgProps = React.SVGAttributes<SVGElement>;
 
-export const Svg: FunctionComponent<SvgProps> = (props: SvgProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" {...props} />
+export const Svg = React.forwardRef<SVGSVGElement, SvgProps>(
+  (props, forwardedRef) => (
+    <svg xmlns="http://www.w3.org/2000/svg" ref={forwardedRef} {...props} />
+  ),
 );

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>

package/src/components/Table/TableCell.tsx

@@ -6,6 +6,7 @@ import React, {
 } from "react";
 import classNames from "classnames";
 import { bem } from "../../utilities/bem";
+import { Flex } from "../Flex";
 import { Skeleton } from "../Skeleton";
 
 const cn = "TableCell";
@@ -26,6 +27,17 @@ export interface TableCellProps extends HTMLProps<HTMLTableCellElement> {
    * property is acceptable (e.g. "100px", "20%", etc.)
    */
   columnWidth?: string;
+
+  /**
+   * Aligns the text content horizontally inside of the header; if the content
+   * is more than just a string, then you'll need to handle alignment on your
+   * own, i.e., flexbox.
+   */
+  align?: "left" | "center" | "right";
+
+  /**
+   * Optional forwarded ref
+   */
   ref?: any;
 }
 
@@ -40,6 +52,7 @@ const TableCell: FunctionComponent<TableCellProps> = forwardRef<
       isLoading = false,
       children,
       columnWidth,
+      align = "left",
       style,
       ...rest
     },
@@ -56,12 +69,22 @@ const TableCell: FunctionComponent<TableCellProps> = forwardRef<
         className={classNames(
           bem(cn),
           removePadding && bem(cn, { m: "removePadding" }),
+          align && `text-${align}`,
           className,
         )}
         ref={ref}
         {...rest}
       >
-        {isLoading ? <Skeleton /> : children}
+        {isLoading ? (
+          <Flex
+            className="h-full items-center"
+            data-testid="loading-cell-skeleton"
+          >
+            <Skeleton className="w-full" />
+          </Flex>
+        ) : (
+          children
+        )}
       </td>
     );
   },

package/src/components/Table/TableHeaderCell.tsx

@@ -5,7 +5,7 @@ import { CheckboxProps } from "../Checkbox";
 import { FilterDropdown } from "./FilterDropdown";
 import TableContext, { SORT_DIRECTION } from "./TableContext";
 import { bem } from "../../utilities/bem";
-import { Icon, ICON_TYPE } from "../Icon";
+import { Icon, IconType, ICON_TYPE } from "../Icon";
 import isUndefined from "../../utilities/isUndefined";
 
 const cn = "TableHeaderCell";
@@ -89,8 +89,42 @@ export interface TableHeaderCellProps
    * Specify a custom filter control, e.g. DatePicker
    */
   filterControl?: ReactElement;
+
+  /**
+   * Aligns the text label horizontally inside of the header
+   */
+  align?: "left" | "center" | "right";
 }
 
+const SortIcon = ({
+  icon,
+  isActive = false,
+}: {
+  icon: IconType;
+  isActive?: boolean;
+}) => (
+  <Box as="span" className="flex relative">
+    <Icon
+      icon={icon}
+      className={classnames(bem(cn, { e: "sortIcon" }), {
+        isActive,
+      })}
+    />
+    {isActive && (
+      <Icon
+        className={classnames(
+          "absolute top-0 left-0",
+          bem(cn, { e: "sortIcon" }),
+          {
+            isActive: false,
+          },
+        )}
+        icon={ICON_TYPE.SORT}
+      />
+    )}
+  </Box>
+);
+
 const TableHeaderCell = ({
   children,
   className,
@@ -108,11 +142,17 @@ const TableHeaderCell = ({
   minColumnWidth,
   removeVerticalPadding = false,
   filterControl,
+  align = "left",
   style,
   ...rest
 }: TableHeaderCellProps) => {
   const [filterDropDownOpen, setFilterDropdownOpen] = useState<boolean>(false);
   const filterOptions = filterOptionsProp;
+  const justification = {
+    left: "start",
+    center: "center",
+    right: "end",
+  };
 
   return (
     <TableContext.Consumer>
@@ -169,8 +209,26 @@ const TableHeaderCell = ({
         }
 
         return (
-          <th className={classes} style={computedStyle} {...rest}>
-            <Box className={bem(cn, { e: "InnerWrapper" })}>
+          <th
+            className={classnames(
+              classes,
+              sortActive && "bg-gray-400",
+              sortable && "cursor-pointer",
+            )}
+            style={computedStyle}
+            onClick={() => {
+              if (sortable && !filterOptions) {
+                handleSortClick();
+              }
+            }}
+            {...rest}
+          >
+            <Box
+              className={classnames([
+                bem(cn, { e: "InnerWrapper" }),
+                align && `justify-${justification[align]}`,
+              ])}
+            >
               <Box className={bem(cn, { e: "ChildrenWrapper" })}>
                 {children}
               </Box>
@@ -198,16 +256,11 @@ const TableHeaderCell = ({
                   )}
                   {sortable && (
                     <Box
-                      as="button"
+                      as={filterOptions ? "button" : "div"}
                       className={classnames(bem(cn, { e: "iconButton" }))}
-                      onClick={handleSortClick}
+                      onClick={filterOptions ? handleSortClick : undefined}
                     >
-                      <Icon
-                        icon={sortIcon}
-                        className={classnames(bem(cn, { e: "sortIcon" }), {
-                          isActive: sortActive,
-                        })}
-                      />
+                      <SortIcon icon={sortIcon} isActive={sortActive} />
                     </Box>
                   )}
                 </Box>