@vtex/faststore-plugin-buyer-portal 1.1.95 → 1.1.96

package/src/features/shared/components/Table/TableHead/TableHead.tsx

@@ -1,11 +1,21 @@
 import type React from "react";
 
+export type TableColumnSize =
+  | "small"
+  | "medium"
+  | "large"
+  | `${number}px`
+  | `${number}rem`
+  | `${number}%`;
+
 export type TableColumn<T extends string = string> = {
   key: T;
   label: React.ReactNode;
   align?: "left" | "center" | "right";
-  size?: "small" | "medium" | "large";
+  size?: TableColumnSize;
   colspan?: number;
+  hideOnScreenSize?: "phonemid" | "tablet";
+  fullWidthOnScreenSize?: "phonemid" | "tablet";
 };
 
 export interface TableHeadProps {
@@ -14,6 +24,22 @@ export interface TableHeadProps {
 }
 
 export const TableHead = ({ columns, rowProps }: TableHeadProps) => {
+  const thSize = (size?: TableColumnSize): React.CSSProperties => {
+    if (!size) {
+      return {};
+    }
+
+    const sizes: { [key in TableColumnSize]: string } = {
+      small: "15%",
+      medium: "25%",
+      large: "40%",
+    };
+
+    return {
+      width: sizes[size] ?? size,
+    };
+  };
+
   return (
     <thead data-fs-bp-table-head>
       <tr {...rowProps} data-fs-bp-table-head-row>
@@ -21,17 +47,19 @@ export const TableHead = ({ columns, rowProps }: TableHeadProps) => {
           <th
             key={col.key}
             data-fs-bp-table-head-column
-            data-fs-bp-table-head-column-size={col.size}
             data-fs-bp-table-head-align={col.align || undefined}
+            data-fs-bp-table-head-hide-on-screen-size={
+              col.hideOnScreenSize || undefined
+            }
+            data-fs-bp-table-head-full-width-on-screen-size={
+              col.fullWidthOnScreenSize || undefined
+            }
             colSpan={col.colspan}
+            style={thSize(col.size)}
           >
             {col.label}
           </th>
         ))}
-        <th
-          data-fs-bp-table-head-column
-          data-fs-bp-table-head-column-action
-        ></th>
       </tr>
     </thead>
   );

package/src/features/shared/components/Table/TableHead/table-head.scss

@@ -1,51 +1,55 @@
 [data-fs-bp-table-head] {
-  border-bottom: var(--fs-border-width) solid #e0e0e0;
-
-  &[data-fs-bp-table-cell-align="left"] {
-    justify-content: flex-start;
-  }
-  &[data-fs-bp-table-cell-align="right"] {
-    justify-content: flex-end;
-  }
-
-  [data-fs-bp-table-head-column] {
-    color: #5c5c5c;
-    font-size: var(--fs-text-size-1);
-    font-weight: var(--fs-text-weight-regular);
-    padding-top: var(--fs-spacing-2);
-    padding-bottom: var(--fs-spacing-2);
-    padding-left: 0;
-  }
-
-  [data-fs-bp-table-head-align="left"] {
-    text-align: left;
-  }
-
-  [data-fs-bp-table-head-align="right"] {
-    text-align: right;
-  }
-
-  [data-fs-bp-table-head-align="center"] {
-    text-align: center;
-  }
-
-  [data-fs-bp-table-head-column-size="small"] {
-    width: 15%;
-  }
-
-  [data-fs-bp-table-head-column-size="medium"] {
-    width: 25%;
-  }
-
-  [data-fs-bp-table-head-column-size="large"] {
-    width: 40%;
-  }
-
-  [data-fs-bp-table-head-column-action] {
-    width: var(--fs-spacing-6);
-
-    &:empty {
-      width: 0;
-    }
-  }
+	border-bottom: var(--fs-border-width) solid #e0e0e0;
+
+	&[data-fs-bp-table-cell-align="left"] {
+		justify-content: flex-start;
+	}
+	&[data-fs-bp-table-cell-align="right"] {
+		justify-content: flex-end;
+	}
+
+	[data-fs-bp-table-head-hide-on-screen-size="phonemid"] {
+		@include media("<=phonemid") {
+			display: none;
+		}
+	}
+
+	[data-fs-bp-table-head-hide-on-screen-size="tablet"] {
+		@include media("<=tablet") {
+			display: none;
+		}
+	}
+
+	[data-fs-bp-table-head-full-width-on-screen-size="phonemid"] {
+		@include media("<=phonemid") {
+			width: 100% !important; // important to override inline CSS
+		}
+	}
+
+	[data-fs-bp-table-head-full-width-on-screen-size="tablet"] {
+		@include media("<=tablet") {
+			width: 100% !important; // important to override inline CSS
+		}
+	}
+
+	[data-fs-bp-table-head-column] {
+		color: #5c5c5c;
+		font-size: var(--fs-text-size-1);
+		font-weight: var(--fs-text-weight-regular);
+		padding-top: var(--fs-spacing-2);
+		padding-bottom: var(--fs-spacing-2);
+		padding-left: 0;
+	}
+
+	[data-fs-bp-table-head-align="left"] {
+		text-align: left;
+	}
+
+	[data-fs-bp-table-head-align="right"] {
+		text-align: right;
+	}
+
+	[data-fs-bp-table-head-align="center"] {
+		text-align: center;
+	}
 }

package/src/features/shared/components/Table/TableLoading/TableLoading.tsx

@@ -1,13 +1,23 @@
 import { Skeleton } from "@faststore/ui";
 
-export const TableLoading = () => {
+type TableLoadingProps = {
+  columns?: number;
+  rows?: number;
+};
+
+export const TableLoading = ({ columns = 1, rows = 5 }: TableLoadingProps) => {
   return (
     <>
-      {Array.from({ length: 5 }).map((_, index) => (
-        <tr data-fs-bp-table-row-loading key={index}>
-          <td colSpan={5}>
-            <Skeleton size={{ width: "100%", height: "1.5rem" }} />
-          </td>
+      {Array.from({ length: rows }).map((_, rowIndex) => (
+        <tr key={`row_${rowIndex}`} data-fs-bp-table-row-loading>
+          {Array.from({ length: columns }).map((_, colIndex) => (
+            <td>
+              <Skeleton
+                key={`cell_${rowIndex}_${colIndex}`}
+                size={{ height: "2.5rem", width: "100%" }}
+              />
+            </td>
+          ))}
         </tr>
       ))}
     </>

package/src/features/shared/components/Table/TableLoading/table-loading.scss

@@ -1,11 +1,16 @@
 [data-fs-bp-table-row-loading] {
-  @import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
-  border-top: var(--fs-border-width) solid #e0e0e0;
-  padding: var(--fs-spacing-2) 0;
+	@import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
+	border-bottom: var(--fs-border-width) solid #e0e0e0;
 
-  td {
-    padding: var(--fs-spacing-2) 0;
-    font-size: var(--fs-text-size-1);
-    color: #1f1f1f;
-  }
+	td {
+		padding: var(--fs-spacing-1) var(--fs-spacing-0);
+
+		&:first-child {
+			padding-left: 0;
+		}
+
+		&:last-child {
+			padding-right: 0;
+		}
+	}
 }

package/src/features/shared/components/Table/TableRow/TableRow.tsx

@@ -5,19 +5,21 @@ import { Dropdown } from "@faststore/components";
 import { BasicDropdownMenu } from "../../BasicDropdownMenu/BasicDropdownMenu";
 import { Icon } from "../../Icon";
 import { SearchHighlight } from "../../SearchHighlight/SearchHighlight";
+import { Table } from "../Table";
 
 export type TableRowProps = {
   children?: ReactNode;
-  title: string;
+  title: string | ReactNode;
   iconName?: string;
   iconSize?: number;
   dropdownMenu?: ReactNode;
   href?: string;
   searchTerm?: string;
-  actionIcons?: ReactNode;
-  defaultItemIcon?: ReactNode;
+  actionIcons?: ReactNode | ReactNode[];
   onClick?: () => void;
   enabled?: boolean;
+  prependColumns?: ReactNode;
+  selected?: boolean;
 };
 
 export const TableRow = ({
@@ -29,57 +31,78 @@ export const TableRow = ({
   href,
   searchTerm = "",
   actionIcons,
-  defaultItemIcon,
   onClick,
   enabled = true,
+  selected = false,
+  prependColumns,
   ...otherProps
 }: TableRowProps) => {
-  const ClickComponent = href ? "a" : "button";
+  const classNames = () => {
+    const classes: string[] = [];
+
+    if (href) {
+      classes.push("is-link");
+    }
+
+    if (selected) {
+      classes.push("selected");
+    }
+
+    if (!enabled) {
+      classes.push("disabled");
+    }
+
+    return classes.join(" ");
+  };
 
   return (
     <tr
       data-fs-bp-table-row
+      data-fs-bp-table-is-link={!!href}
+      data-fs-bp-table-row-selected={selected}
+      className={classNames()}
       {...otherProps}
-      className={!enabled ? "disabled" : ""}
     >
-      {iconName && (
-        <td data-fs-bp-table-row-icon-cell>
-          <Icon
-            data-fs-bp-table-row-icon
-            name={iconName}
-            width={iconSize}
-            height={iconSize}
-          />
-        </td>
-      )}
-
-      <td>
-        <span data-fs-bp-table-row-title>
-          <SearchHighlight text={title} highlight={searchTerm} />
-        </span>
-      </td>
+      {prependColumns}
+      <Table.Cell data-fs-bp-table-row-title-cell>
+        <div data-fs-bp-table-row-title-content>
+          {iconName && (
+            <span data-fs-bp-table-row-icon-cell>
+              <Icon
+                data-fs-bp-table-row-icon
+                name={iconName}
+                width={iconSize}
+                height={iconSize}
+              />
+            </span>
+          )}
+          {typeof title === "string" ? (
+            <p data-fs-bp-table-row-title-text>
+              <SearchHighlight text={title} highlight={searchTerm} />
+            </p>
+          ) : (
+            title
+          )}
+        </div>
+      </Table.Cell>
       {children}
 
-      {defaultItemIcon && <td>{defaultItemIcon}</td>}
-      <td data-fs-bp-table-row-dropdown>
-        {dropdownMenu && (
-          <Dropdown>
-            <BasicDropdownMenu.Trigger />
-            {dropdownMenu}
-          </Dropdown>
-        )}
-      </td>
-
-      <td data-fs-bp-table-row-actions>
-        {href && (
-          <ClickComponent
-            data-fs-bp-table-row-link
-            href={href}
-            onClick={onClick}
-          />
-        )}
-        {actionIcons ? actionIcons : null}
-      </td>
+      <Table.Cell data-fs-bp-table-row-actions>
+        <div data-fs-bp-table-row-actions-content>
+          {actionIcons ? actionIcons : null}
+          {dropdownMenu && (
+            <Dropdown>
+              <BasicDropdownMenu.Trigger />
+              {dropdownMenu}
+            </Dropdown>
+          )}
+        </div>
+      </Table.Cell>
+      {href && (
+        <Table.Cell data-fs-bp-table-row-link>
+          <a href={href} onClick={onClick} />
+        </Table.Cell>
+      )}
     </tr>
   );
 };

package/src/features/shared/components/Table/TableRow/table-row.scss

@@ -1,72 +1,108 @@
 @import "../../BasicDropdownMenu/basic-dropdown-menu.scss";
+@import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
 
 [data-fs-bp-table-row] {
-  &:hover {
-    background-color: #f5f5f5;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    background-color: lightgray;
-    :hover {
-      background-color: lightgray;
-    }
-    border-bottom: var(--fs-border-width) solid lightgray;
-  }
-
-  @import "../../SearchHighlight/search-highlight.scss";
-  border-bottom: var(--fs-border-width) solid #e0e0e0;
-  cursor: pointer;
-  position: relative;
-
-  td {
-    padding: var(--fs-spacing-2) 0;
-    font-size: var(--fs-text-size-1);
-    color: #1f1f1f;
-  }
-
-  [data-fs-bp-table-row-link] {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-
-  [data-fs-bp-table-row-icon-cell] {
-    width: var(--fs-spacing-7);
-
-    [data-fs-bp-table-row-icon] {
-      color: #0366dd;
-      margin: calc(var(--fs-spacing-2) - var(--fs-spacing-0));
-      margin-right: var(--fs-spacing-2);
-    }
-  }
-
-  [data-fs-bp-table-row-dropdown] {
-    position: relative;
-    cursor: pointer;
-
-    [data-fs-bp-basic-dropdown-menu-trigger] {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      top: 0;
-      margin: auto;
-      z-index: 1;
-
-      [data-fs-icon] {
-        margin-right: 0;
-      }
-    }
-  }
-
-  [data-fs-bp-table-row-title] {
-    font-weight: 500;
-    font-size: var(--fs-text-size-1);
-    line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
-    color: #1f1f1f;
-    z-index: 1;
-    pointer-events: none;
-  }
+	&.is-link {
+		cursor: pointer;
+
+		&:hover {
+			background-color: #f5f5f5;
+		}
+
+		&:has([data-fs-bp-table-row-actions]:hover) {
+			cursor: default;
+			background-color: transparent;
+		}
+	}
+
+	&.selected {
+		background-color: #f1f8fd;
+	}
+
+	&.disabled {
+		cursor: not-allowed;
+		background-color: #f5f5f5;
+		border-bottom: var(--fs-border-width) solid #e0e0e0;
+
+		&:hover,
+		&:has([data-fs-bp-table-row-actions]:hover) {
+			background-color: #f5f5f5;
+		}
+
+		& > td {
+			color: #858585;
+		}
+	}
+
+	&:not(.disabled) {
+		[data-fs-bp-table-row-title-text] {
+			color: #1f1f1f;
+		}
+	}
+
+	@import "../../SearchHighlight/search-highlight.scss";
+	border-bottom: var(--fs-border-width) solid #e0e0e0;
+	position: relative;
+
+	[data-fs-bp-table-row-link] {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		padding: 0;
+		z-index: 0;
+
+		a {
+			display: block;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	[data-fs-bp-table-row-title-cell] {
+		[data-fs-bp-table-row-title-content] {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			gap: var(--fs-spacing-0);
+		}
+
+		[data-fs-bp-table-row-title-text] {
+			font-size: var(--fs-text-size-1);
+			font-weight: var(--fs-text-weight-medium);
+			line-height: var(--fs-text-size-3);
+			flex: 1;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			padding-right: var(--fs-spacing-1);
+		}
+
+		[data-fs-bp-table-row-icon-cell] {
+			flex: none;
+			display: inline-flex;
+			width: var(--fs-spacing-6);
+			height: var(--fs-spacing-6);
+			align-items: center;
+			justify-content: center;
+			color: #0366dd;
+		}
+	}
+
+	[data-fs-bp-table-row-actions] {
+		z-index: 1;
+
+		[data-fs-bp-table-row-actions-content] {
+			display: flex;
+			align-items: center;
+			gap: var(--fs-spacing-1);
+			justify-content: flex-end;
+
+			&:empty {
+				padding: 0;
+				display: none;
+			}
+		}
+	}
 }

package/src/features/shared/components/Table/table.scss

@@ -1,13 +1,18 @@
+@import "./TableCell/table-cell.scss";
 @import "./TableRow/table-row.scss";
 @import "./TableHead/table-head.scss";
 @import "./TableLoading/table-loading.scss";
 
 [data-fs-bp-table] {
-  width: 100%;
-  border-collapse: collapse;
+	width: 100%;
+	border-collapse: collapse;
 
-  [data-fs-bp-icon] {
-    width: auto;
-    height: auto;
-  }
+	[data-fs-bp-icon] {
+		width: auto;
+		height: auto;
+	}
+
+	&[data-fs-bp-table-layout-fixed="true"] {
+		table-layout: fixed;
+	}
 }

package/src/features/shared/components/Table/utils/tableColumns.ts

@@ -1,43 +1,40 @@
-import { TableColumn } from "../TableHead/TableHead";
+import type { TableColumn, TableColumnSize } from "../TableHead/TableHead";
 
-type GetColumnsOptions = {
-  withType?: boolean;
-  withActions?: boolean;
+type GetTableColumns = {
+  nameColumnLabel?: string;
+  nameColumnKey?: string;
+  nameColumnSize?: TableColumnSize;
+  nameFullWidthOnMobile?: boolean;
+  actionsLength?: number;
+  extraColumns?: TableColumn[];
 };
 
-export const getTableColumns = <T extends string = string>(
-  options: GetColumnsOptions = {}
-): TableColumn<T>[] => {
-  const base: TableColumn<T>[] = [
+export const getTableColumns = ({
+  nameColumnLabel = "Name",
+  nameColumnSize = "100%",
+  nameColumnKey = "name",
+  nameFullWidthOnMobile = true,
+  actionsLength = 0,
+  extraColumns = [],
+}: GetTableColumns): TableColumn[] => {
+  const columns: TableColumn[] = [
     {
-      key: "name" as T,
-      label: "Name",
+      key: nameColumnKey,
+      size: nameColumnSize,
+      label: nameColumnLabel,
+      fullWidthOnScreenSize: nameFullWidthOnMobile ? "phonemid" : undefined,
       align: "left",
-      colspan: 2,
     },
+    ...extraColumns,
   ];
 
-  const typeColumn: TableColumn<T>[] = options.withType
-    ? [
-        {
-          key: "type" as T,
-          label: "Type",
-          align: "left",
-          size: "medium",
-        },
-      ]
-    : [];
+  if (actionsLength > 0) {
+    columns.push({
+      key: "actions",
+      label: "",
+      size: `${actionsLength * 3}rem`,
+    });
+  }
 
-  const actions: TableColumn<T>[] = options.withActions
-    ? [
-        {
-          key: "actions" as T,
-          label: "",
-          align: "right",
-          size: "medium",
-        },
-      ]
-    : [];
-
-  return [...base, ...typeColumn, ...actions];
+  return columns;
 };

package/src/features/shared/components/index.ts

@@ -75,3 +75,4 @@ export { EmptyState, type EmptyStateProps } from "./EmptyState/EmptyState";
 export { ErrorBoundary } from "./ErrorBoundary/ErrorBoundary";
 export { withErrorBoundary } from "./withErrorBoundary/withErrorBoundary";
 export { default as Error } from "./Error/Error";
+export { IconBookmarked } from "./IconBookmarked/IconBookmarked";