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

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>

package/src/components/Table/index.css

@@ -58,23 +58,23 @@
   width: 1%;
 }
 
-.ads-TableHeaderCell-InnerWrapper {
+.ads-TableHeaderCell-InnerWrapper,
+.ads-TableHeaderCell-ChildrenWrapper {
   @apply flex
-    items-center
-    pt-px;
+    items-center;
+}
+
+.ads-TableHeaderCell-InnerWrapper {
+  @apply pt-px
+    h-full;
 }
 
 .ads-TableHeaderCell-ChildrenWrapper {
-  @apply flex
-    items-center
-    justify-between
-    flex-grow
-    leading-none;
+  @apply leading-none;
 }
 
 .ads-TableHeaderCell-iconButtonWrapper {
-  @apply flex
-    ml-auto;
+  @apply flex;
 }
 
 .ads-TableHeaderCell-iconButton {
@@ -196,6 +196,8 @@
     border-solid
     border-gray-200
     h-cell;
+
+  line-height: 18px;
 }
 
 .ads-TableRow:first-of-type .ads-TableCell,
@@ -315,3 +317,129 @@
   .ads-TableHeaderCell:nth-of-type(2) {
   @apply z-20;
 }
+
+/**
+ * Space Rows
+ *
+*/
+
+.ads-Table.ads-Table--space-rows {
+  @apply bg-transparent;
+
+  border-spacing: 0 4px;
+}
+
+.ads-Table.ads-Table--space-rows:not(.ads-Table--outer-border) {
+  @apply border-b-0;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableHeaderCell {
+  @apply border-t
+    border-l-0
+    border-r-0
+    h-10;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableHeaderCell:first-of-type {
+  @apply border-l;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableHeaderCell:last-of-type {
+  @apply border-r;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableCell {
+  @apply border-gray-400
+    border-t
+    border-b
+    border-l-0
+    border-r-0
+    h-14;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableCell:first-of-type {
+  @apply border-l;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableCell:last-of-type {
+  @apply border-r;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableRow:first-of-type .ads-TableCell,
+.ads-Table.ads-Table--space-rows .ads-TableCell:only-child {
+  @apply border-t;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableRow:not(:last-of-type) {
+  @apply border-b-0;
+}
+
+.ads-Table.ads-Table--space-rows.ads-TableCell:first-of-type:not(:only-child),
+.ads-Table.ads-Table--space-rows.ads-TableHeaderCell:first-of-type,
+.ads-Table.ads-Table--space-rows.ads-Table.ads-Table--batch-actions
+  .ads-TableCell:first-of-type,
+.ads-Table.ads-Table--space-rows.ads-Table.ads-Table--batch-actions
+  .ads-TableHeaderCell:first-of-type {
+  @apply pl-5;
+}
+
+.ads-Table.ads-Table--space-rows.ads-Table--sticky-column.ads-Table--batch-actions
+  .ads-TableCell:nth-of-type(2),
+.ads-Table.ads-Table--space-rows.ads-Table--sticky-column.ads-Table--batch-actions
+  .ads-TableHeaderCell:nth-of-type(2) {
+  left: 44px;
+}
+
+.ads-Table.ads-Table--space-rows.ads-Table--sticky-column
+  .ads-TableHeaderCell:first-of-type,
+.ads-Table.ads-Table--space-rows.ads-Table--sticky-column.ads-Table--batch-actions
+  .ads-TableHeaderCell:nth-of-type(2) {
+  box-shadow: 1px 0 0 theme("colors.gray.400"), 3px 0 0 rgb(234, 237, 239);
+}
+
+/* Enable grid sizing */
+
+.ads-Table.ads-Table--grid-sizing {
+  --table-cell-height: theme("height.cell");
+
+  @apply grid
+    border-b-0
+    flex-1
+    w-auto
+    min-w-full;
+
+  grid-auto-rows: minmax(var(--table-cell-height), auto);
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableHead,
+.ads-Table.ads-Table--grid-sizing .ads-TableBody,
+.ads-Table.ads-Table--grid-sizing .ads-TableRow {
+  display: contents;
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableCell {
+  @apply h-auto
+    border-b
+    border-t-0;
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableRow:last-of-type .ads-TableCell {
+  border-bottom-color: theme("colors.gray.400");
+}
+
+.ads-Table.ads-Table--grid-sizing
+  .ads-TableCell:not(.ads-TableCell--removePadding) {
+  @apply px-2;
+
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableCell:first-of-type:not(:only-child),
+.ads-Table.ads-Table--grid-sizing .ads-TableHeaderCell:first-of-type,
+.ads-Table.ads-Table--grid-sizing.ads-Table--batch-actions
+  .ads-TableCell:first-of-type,
+.ads-Table.ads-Table--grid-sizing.ads-Table--batch-actions
+  .ads-TableHeaderCell:first-of-type {
+  @apply pl-8;
+}

package/src/components/Table/index.ts

@@ -1 +1,4 @@
 export * from "./Table";
+export type { TableCellProps } from "./TableCell";
+export type { TableHeaderCellProps } from "./TableHeaderCell";
+export type { TableRowProps } from "./TableRow";

package/src/components/Tag/Tag.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import classNames from "classnames";
 import { BoxProps } from "../Box";
 import { bem } from "../../utilities/bem";
-import { ICON_TYPE, Icon } from "../Icon";
+import { IconType, Icon } from "../Icon";
 import { TagGroup } from "./TagGroup";
 
 const cn = "Tag";
@@ -32,7 +32,7 @@ export interface TagProps extends BoxProps {
   /**
    * Icon to show next to the tag content
    */
-  icon?: ICON_TYPE;
+  icon?: IconType;
 }
 
 export const Tag = ({

package/src/components/Toast/Toast.story.mdx

@@ -210,7 +210,7 @@ message.
             showToast({
               title: "New control created",
               content: (
-                <div>
+                <div className="w-full">
                   <Toast.Link href="/">Access Control Policy</Toast.Link>
                   <Toast.Link href="/">Access Control Policy</Toast.Link>
                   <Toast.Link href="/">Access Control Policy</Toast.Link>

package/src/components/Toast/Toast.tsx

@@ -4,11 +4,11 @@ import classNames from "classnames";
 import { Box, BoxProps } from "../Box";
 import { Flex } from "../Flex";
 import { CloseButton } from "../CloseButton";
-import { StatusIcon } from "../Icon";
+import { Icon, ICON_TYPE, StatusIcon } from "../Icon";
 import { bem } from "../../utilities/bem";
 import { STATUS_VARIANT } from "../../types";
 import { StatusContext } from "../../contexts/status";
-import { ArrowLink, ArrowLinkProps } from "../ArrowLink";
+import { Link, LinkProps } from "../Link";
 
 const cn = "Toast";
 
@@ -37,14 +37,18 @@ export interface ShowToastProps {
   variant?: STATUS_VARIANT;
 }
 
-export const ToastLink = ({ children, className, ...rest }: ArrowLinkProps) => (
-  <ArrowLink
-    className={classNames(bem(cn, { e: "link" }), className)}
-    {...rest}
-  >
-    {children}
-  </ArrowLink>
-);
+export const ToastLink = ({ className, children, ...rest }: LinkProps) => {
+  return (
+    <Link
+      className={classNames(bem(cn, { e: "link" }), className)}
+      noStyles
+      {...rest}
+    >
+      <span className="mr-1">{children}</span>
+      <Icon icon={ICON_TYPE.LONG_ARROW_ALT_RIGHT} />
+    </Link>
+  );
+};
 
 export const ToastMessage = ({
   children,

package/src/components/Toast/index.css

@@ -48,11 +48,13 @@
   @apply items-start
     justify-center
     px-5
+    py-3
     flex-col
     text-left;
 
   grid-row: 1 / -1;
   min-height: 44px;
+  word-break: break-word;
 }
 
 .ads-Toast--withHeader .ads-Toast-body {
@@ -62,8 +64,8 @@
 .ads-Toast-link {
   @apply flex
     items-center
-    w-full
-    h-full
+    justify-between
+    font-medium
     rounded-b
     px-5
     -mx-5;

package/src/components/Toggle/index.css

@@ -3,9 +3,8 @@
     items-center
     rounded-full
     relative
-    cursor-pointer;
-
-  gap: theme("margin.2");
+    cursor-pointer
+    gap-2;
 }
 
 .ads-Toggle:focus {