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

package/src/features/roles/layout/RoleDetailsLayout/role-details-layout.scss

@@ -0,0 +1,77 @@
+[data-fs-role-details-page] {
+	@import "../../../shared/components/Table/table.scss";
+
+	[data-fs-bp-role-details-row] {
+		[data-fs-bp-table-row-title-cell] {
+			padding-left: var(--fs-spacing-0);
+
+			@include media(">phonemid") {
+				padding-left: var(--fs-spacing-2);
+			}
+
+			@include media(">tablet") {
+				padding-left: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+			}
+		}
+
+		[data-fs-bp-table-row-actions] {
+			padding-right: var(--fs-spacing-0);
+
+			@include media(">phonemid") {
+				padding-right: var(--fs-spacing-2);
+			}
+
+			@include media(">tablet") {
+				padding-right: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+			}
+		}
+
+		[data-fs-bp-check-icon] {
+			color: #08a822;
+		}
+	}
+	[data-fs-bp-table-row] {
+		[data-fs-bp-table-row-title-cell] {
+			[data-fs-bp-table-row-title-content] {
+				display: block;
+				padding: var(--fs-spacing-0) 0;
+
+				@include media(">tablet") {
+					display: flex;
+					padding: 0;
+				}
+			}
+
+			[data-fs-bp-role-details-label] {
+				font-size: var(--fs-text-size-0);
+				font-weight: var(--fs-text-weight-regular);
+				line-height: 120%;
+				color: #5c5c5c;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+
+				@include media(">phonemid") {
+					font-size: var(--fs-text-size-1);
+					line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+					font-weight: var(--fs-text-weight-medium);
+					letter-spacing: -0.01em;
+					color: #000000;
+				}
+			}
+
+			[data-fs-bp-role-details-description] {
+				font-size: var(--fs-text-size-1);
+				line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+				font-weight: var(--fs-text-weight-regular);
+				letter-spacing: -0.01em;
+				color: #1f1f1f;
+				margin-top: var(--fs-spacing-0);
+
+				@include media(">tablet") {
+					display: none;
+				}
+			}
+		}
+	}
+}

package/src/features/roles/layout/RolesLayout/RolesLayout.tsx

@@ -1,11 +1,11 @@
 import { HeaderInside } from "../../../shared/components";
 import { Table } from "../../../shared/components/Table/Table";
+import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
 import { useBuyerPortal } from "../../../shared/hooks";
 import { GlobalLayout } from "../../../shared/layouts";
 import { OrgUnitTabsLayout } from "../../../shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 
-import type { TableColumn } from "../../../shared/components/Table/TableHead/TableHead";
 import type { RolePermission } from "../../types";
 
 export type RolesLayoutProps = {
@@ -19,23 +19,15 @@ export const RolesLayout = ({
 }: RolesLayoutProps) => {
   const { currentOrgUnit } = useBuyerPortal();
 
-  const configTable: Array<TableColumn> = [
-    {
-      key: "name",
-      label: "Name",
-      align: "left",
-      colspan: 2,
-      size: "large",
-    },
-  ];
+  const columns = getTableColumns({});
 
   return (
     <GlobalLayout>
       <OrgUnitTabsLayout pageName="Organization">
         <section data-fs-bp-roles-section>
           <HeaderInside title="Roles" />
-          <Table>
-            <Table.Head columns={configTable} />
+          <Table layoutFixed>
+            <Table.Head columns={columns} />
             <Table.Body>
               {Object.keys(rolesAndPermissions).map((role) => (
                 <Table.Row

package/src/features/roles/layout/RolesLayout/roles-layout.scss

@@ -1,27 +1,13 @@
 [data-fs-bp-roles-section] {
-  @import "../../../shared/components/Table/table.scss";
+	@import "../../../shared/components/Table/table.scss";
 
-  @import "../../../shared/components/HeaderInside/header-inside.scss";
+	@import "../../../shared/components/HeaderInside/header-inside.scss";
 
-  @import "../../../shared/components/InternalSearch/internal-search.scss";
-  @import "../../../shared/components/Tag/tag.scss";
-  @import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
+	@import "../../../shared/components/InternalSearch/internal-search.scss";
+	@import "../../../shared/components/Tag/tag.scss";
+	@import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
 
-  [data-fs-bp-table-row-icon] {
-    color: #0366dd;
-  }
-
-  [data-fs-bp-check-icon] {
-    color: #08a822;
-  }
-
-  [data-fs-bp-table-row] td {
-    span {
-      padding: 1rem;
-    }
-  }
-
-  [data-fs-bp-table-row] [data-fs-bp-table-cell] {
-    padding: 1rem;
-  }
+	[data-fs-bp-table-row-icon] {
+		color: #0366dd;
+	}
 }

package/src/features/shared/components/CustomField/table/CustomFieldTable.tsx

@@ -1,16 +1,9 @@
-import {
-  Dropdown,
-  DropdownItem,
-  Skeleton,
-  TableCell,
-  TableRow,
-  Tooltip,
-  useUI,
-} from "@faststore/ui";
+import { DropdownItem, IconButton, Tooltip, useUI } from "@faststore/ui";
 
 import { BasicDropdownMenu } from "../../BasicDropdownMenu/BasicDropdownMenu";
-import { BasicDropdownMenuTrigger } from "../../BasicDropdownMenu/BasicDropdownMenuTrigger";
+import { EmptyState } from "../../EmptyState/EmptyState";
 import { Icon } from "../../Icon";
+import { IconBookmarked } from "../../IconBookmarked/IconBookmarked";
 import { Table } from "../../Table/Table";
 import { getTableColumns } from "../../Table/utils/tableColumns";
 
@@ -68,120 +61,84 @@ export const CustomFieldTable = ({
     actions.addDefaultValue(data.id);
   }
 
+  const columns = getTableColumns({ actionsLength: 2 });
+
   return (
     <div data-fs-bp-custom-fields-table>
-      <Table>
-        <Table.Head columns={getTableColumns({ withActions: true })} />
-
+      {!loading && !data.length && (
+        <EmptyState title="No results found" iconName="TableEdit" />
+      )}
+      <Table layoutFixed>
+        <Table.Head columns={columns} />
         <Table.Body>
-          {loading &&
-            Array.from({ length: 10 }).map((option, index) => (
-              <TableRow key={index}>
-                <TableCell>
-                  <Skeleton size={{ width: "99%", height: "1.875rem" }} />
-                </TableCell>
-                <TableCell align="right">
-                  <Skeleton size={{ width: "99%", height: "1.875rem" }} />
-                </TableCell>
-                <TableCell align="right">
-                  <Skeleton size={{ width: "99%", height: "1.875rem" }} />
-                </TableCell>
-                <TableCell align="right">
-                  <Skeleton size={{ width: "99%", height: "1.875rem" }} />
-                </TableCell>
-              </TableRow>
-            ))}
-
-          {!loading &&
-            !!data.length &&
+          {loading ? (
+            <Table.Loading columns={columns.length} />
+          ) : (
             data.map((option, index) => (
               <Table.Row
+                key={`${option.id}-${index}`}
+                title={option.value}
                 iconName="TableEdit"
                 iconSize={24}
-                title={option.value}
                 searchTerm={searchTerm}
-                key={`${option.id}-${index}`}
-                defaultItemIcon={
+                actionIcons={
                   option.isDefault ? (
-                    <div data-fs-bp-table-row-default-icon>
-                      <Tooltip
-                        content="Unset as default"
-                        placement="top-center"
-                      >
-                        <Icon
-                          onClick={() => toggleDefaultItem(option)}
-                          name="Bookmark"
-                          width={20}
-                          height={20}
-                        />
-                      </Tooltip>
-                    </div>
-                  ) : (
-                    <br />
-                  )
+                    <Tooltip content="Unset as default" placement="top-center">
+                      <IconButton
+                        data-fs-bp-custom-field-icon-btn
+                        icon={<IconBookmarked />}
+                        aria-label="Unset as default"
+                        onClick={() => toggleDefaultItem(option)}
+                      />
+                    </Tooltip>
+                  ) : null
                 }
                 dropdownMenu={
-                  <Dropdown data-fs-bp-dropdown>
-                    <BasicDropdownMenuTrigger
-                      data-fs-bp-custom-field-dropdown-trigger
+                  <BasicDropdownMenu>
+                    <DropdownItem
+                      onClick={() => {
+                        actions.rename();
+                        actions.itemToSelect(option);
+                      }}
+                    >
+                      <Icon name="FormatSize" /> <span>Rename</span>
+                    </DropdownItem>
+                    <DropdownItem onClick={() => toggleDefaultItem(option)}>
+                      <Icon
+                        name={
+                          option.isDefault ? "BookmarkRemove" : "BookmarkAdd"
+                        }
+                      />{" "}
+                      <span>
+                        {option.isDefault
+                          ? "Unset as default"
+                          : "Set as default"}
+                      </span>
+                    </DropdownItem>
+                    <BasicDropdownMenu.Separator />
+                    <DropdownItem
+                      onClick={() => {
+                        actions.delete();
+                        actions.itemToSelect(option);
+                        actions.isOnlyDeleting(false);
+                      }}
                     >
-                      <Icon name="MoreVert" />
-                    </BasicDropdownMenuTrigger>
-                    <BasicDropdownMenu>
-                      <DropdownItem
-                        onClick={() => {
-                          actions.rename();
-                          actions.itemToSelect(option);
-                        }}
-                      >
-                        <Icon name="FormatSize" /> <span>Rename</span>
-                      </DropdownItem>
-                      <DropdownItem onClick={() => toggleDefaultItem(option)}>
-                        <Icon
-                          name={
-                            option.isDefault ? "BookmarkRemove" : "BookmarkAdd"
-                          }
-                        />{" "}
-                        <span>
-                          {option.isDefault
-                            ? "Unset as default"
-                            : "Set as default"}
-                        </span>
-                      </DropdownItem>
-                      <BasicDropdownMenu.Separator />
-                      <DropdownItem
-                        onClick={() => {
-                          actions.delete();
-                          actions.itemToSelect(option);
-                          actions.isOnlyDeleting(false);
-                        }}
-                      >
-                        <Icon name="CircleRemove" />{" "}
-                        <span>Remove from unit</span>
-                      </DropdownItem>
-                      <DropdownItem
-                        data-fs-bp-custom-fields-dropdown-item-danger
-                        onClick={() => {
-                          actions.removeFromUnit();
-                          actions.itemToSelect(option);
-                          actions.isOnlyDeleting(true);
-                        }}
-                      >
-                        <Icon name="Delete" /> <span>Delete</span>
-                      </DropdownItem>
-                    </BasicDropdownMenu>
-                  </Dropdown>
+                      <Icon name="CircleRemove" /> <span>Remove from unit</span>
+                    </DropdownItem>
+                    <DropdownItem
+                      data-fs-bp-dropdown-menu-item-mode="danger"
+                      onClick={() => {
+                        actions.removeFromUnit();
+                        actions.itemToSelect(option);
+                        actions.isOnlyDeleting(true);
+                      }}
+                    >
+                      <Icon name="Delete" /> <span>Delete</span>
+                    </DropdownItem>
+                  </BasicDropdownMenu>
                 }
               />
-            ))}
-
-          {!loading && !data.length && (
-            <TableRow>
-              <div data-fs-bp-custom-fields-empty-state>
-                <Icon name="TableEdit" />
-                <p>No results found</p>
-              </div>
-            </TableRow>
+            ))
           )}
         </Table.Body>
       </Table>

package/src/features/shared/components/CustomField/table/custom-field-table.scss

@@ -1,146 +1,41 @@
 [data-fs-bp-custom-fields-table] {
-  @import "@faststore/ui/src/components/molecules/Table/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
-
-  @import "../../../../shared/components/Table/table.scss";
-  @import "../../Toast/toast.scss";
-
-  [data-fs-table] {
-    overflow-x: visible;
-  }
-
-  [data-fs-bp-table-row] td {
-    padding: var(--fs-spacing-1) 0;
-  }
-
-  [data-fs-table-head="true"] {
-    [data-fs-table-row="true"] {
-      border-bottom: var(--fs-border-width) solid #d6d6d6;
-
-      [data-fs-table-cell="header"] {
-        height: var(--fs-spacing-6);
-        padding: 0;
-
-        font-weight: var(--fs-text-weight-regular);
-        color: #5c5c5c;
-        font-size: var(--fs-text-size-1);
-      }
-    }
-  }
-
-  [data-fs-table-body="true"] {
-    [data-fs-table-row="true"] {
-      &:hover {
-        background-color: #f5f5f5;
-        transition: background 0.2s;
-      }
-
-      &:last-child {
-        border-bottom: var(--fs-border-width) solid #d6d6d6;
-      }
-
-      [data-fs-table-cell] {
-        height: 3.5rem;
-        font-weight: var(--fs-text-weight-medium);
-        color: #1f1f1f;
-        font-size: var(--fs-text-size-1);
-        padding: 0;
-
-        [data-fs-icon] {
-          display: inline-block;
-          color: #0366dd;
-          width: var(--fs-spacing-4);
-          height: var(--fs-spacing-4);
-          margin: 0;
-        }
-
-        [data-fs-button] {
-          width: 3rem;
-          height: 3rem;
-
-          &[data-fs-bp-custom-fields-dropdown-button] {
-            &:hover {
-              cursor: pointer;
-            }
-          }
-
-          [data-fs-button-wrapper] {
-            border-radius: var(--fs-border-radius-pill);
-            padding: 0;
-          }
-        }
-
-        &:first-child {
-          width: var(--fs-spacing-6);
-          text-align: center;
-
-          > svg {
-            margin: 0;
-          }
-        }
-      }
-    }
-
-    [data-fs-bp-custom-field-dropdown-trigger] {
-      &[data-fs-bp-basic-dropdown-menu-trigger] {
-        [data-fs-icon] {
-          color: #1f1f1f;
-        }
-      }
-    }
-  }
-
-  [data-fs-skeleton] {
-    display: inline-block;
-    padding-top: var(--fs-spacing-0)
-  }
-
-  [data-fs-bp-table-row-default-icon] {
-    display: flex;
-    justify-content: flex-end;
-    color: #0366dd;
-  }
-
-  [data-fs-tooltip] {
-    --fs-tooltip-background: #1f1f1f;
-
-    [data-fs-tooltip-wrapper] {
-      position: absolute;
-    }
-  }
-
-  [data-fs-bp-custom-fields-empty-state] {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: var(--fs-spacing-1);
-    height: 18.75rem;
-
-    color: #858585;
-    font-weight: var(--fs-text-weight-semibold);
-
-    [data-fs-icon] {
-      width: var(--fs-spacing-6);
-      height: var(--fs-spacing-6);
-      margin: 0;
-    }
-  }
-}
-
-[data-fs-bp-basic-dropdown-menu] {
-  &[data-fs-dropdown-menu] {
-    [data-fs-bp-custom-fields-dropdown-item-danger] {
-      &[data-fs-dropdown-item] {
-        color: #d31a15;
-
-        &:hover,
-        [data-fs-icon] {
-          color: #d31a15;
-        }
-      }
-    }
-  }
+	@import "@faststore/ui/src/components/molecules/Table/styles.scss";
+	@import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
+	@import "@faststore/ui/src/components/atoms/Button/styles.scss";
+
+	@import "../../../../shared/components/Table/table.scss";
+	@import "../../Toast/toast.scss";
+	@import "../../IconBookmarked/icon-bookmarked.scss";
+	@import "../../EmptyState/empty-state.scss";
+
+	[data-fs-tooltip] {
+		--fs-tooltip-background: #1f1f1f;
+
+		[data-fs-tooltip-wrapper] {
+			position: absolute;
+		}
+	}
+
+	[data-fs-bp-custom-fields-empty-state] {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: var(--fs-spacing-1);
+		height: 18.75rem;
+
+		color: #858585;
+		font-weight: var(--fs-text-weight-semibold);
+
+		[data-fs-icon] {
+			width: var(--fs-spacing-6);
+			height: var(--fs-spacing-6);
+			margin: 0;
+		}
+	}
+
+	[data-fs-bp-custom-field-icon-btn] {
+		--fs-button-height: var(--fs-spacing-6);
+		--fs-button-border-radius: 50%;
+	}
 }

package/src/features/shared/components/IconBookmarked/IconBookmarked.tsx

@@ -0,0 +1,9 @@
+import Icon from "../Icon/Icon";
+
+export const IconBookmarked = () => {
+  return (
+    <span data-fs-bp-icon-bookmarked>
+      <Icon name="Bookmark" width={20} height={20} />
+    </span>
+  );
+};

package/src/features/shared/components/IconBookmarked/icon-bookmarked.scss

@@ -0,0 +1,9 @@
+[data-fs-bp-icon-bookmarked] {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	width: var(--fs-spacing-6);
+	height: var(--fs-spacing-6);
+	color: #0366dd;
+	justify-content: center;
+}

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

@@ -6,10 +6,15 @@ import { TableRow } from "./TableRow/TableRow";
 
 export type TableProps = {
   children: React.ReactNode;
+  layoutFixed?: boolean;
 };
 
-export const Table = ({ children }: TableProps) => {
-  return <table data-fs-bp-table>{children}</table>;
+export const Table = ({ children, layoutFixed = false }: TableProps) => {
+  return (
+    <table data-fs-bp-table data-fs-bp-table-layout-fixed={layoutFixed}>
+      {children}
+    </table>
+  );
 };
 
 Table.Head = TableHead;

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

@@ -1,7 +1,19 @@
 import type { ComponentProps } from "react";
 
-export type TableCellProps = ComponentProps<"td">;
+export type TableCellProps = {
+  align?: "left" | "center" | "right";
+  hideOnScreenSize?: "phonemid" | "tablet";
+} & ComponentProps<"td">;
 
-export const TableCell = ({ ...otherProps }) => (
-  <td data-fs-bp-table-cell {...otherProps} />
+export const TableCell = ({
+  align = "left",
+  hideOnScreenSize,
+  ...otherProps
+}: TableCellProps) => (
+  <td
+    data-fs-bp-table-cell
+    data-fs-bp-table-cell-align={align}
+    data-fs-bp-table-cell-hide-on-screen-size={hideOnScreenSize || undefined}
+    {...otherProps}
+  />
 );

package/src/features/shared/components/Table/TableCell/table-cell.scss

@@ -0,0 +1,34 @@
+[data-fs-bp-table-cell] {
+	padding: var(--fs-spacing-1) 0;
+	font-size: var(--fs-text-size-1);
+	color: #1f1f1f;
+	position: relative;
+	height: var(--fs-spacing-8);
+
+	&[data-fs-bp-table-cell-align="center"] {
+		text-align: center;
+		justify-content: center;
+	}
+
+	&[data-fs-bp-table-cell-align="left"] {
+		text-align: left;
+		justify-content: flex-start;
+	}
+
+	&[data-fs-bp-table-cell-align="right"] {
+		text-align: right;
+		justify-content: flex-end;
+	}
+
+	&[data-fs-bp-table-cell-hide-on-screen-size="phonemid"] {
+		@include media("<=phonemid") {
+			display: none;
+		}
+	}
+
+	&[data-fs-bp-table-cell-hide-on-screen-size="tablet"] {
+		@include media("<=tablet") {
+			display: none;
+		}
+	}
+}