@vtex/faststore-plugin-buyer-portal 1.1.91 → 1.1.92

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vtex/faststore-plugin-buyer-portal",
-	"version": "1.1.91",
+	"version": "1.1.92",
 	"description": "A plugin for faststore with buyer portal",
 	"main": "index.js",
 	"scripts": {

package/src/features/org-units/components/AddAllToOrgUnitDropdown/AddAllToOrgUnitDropdown.tsx

@@ -21,6 +21,7 @@ export type AddAllToOrgUnitDropdownProps = {
   unitId: string;
   unitName: string;
   contractId: string;
+  align?: "left" | "right";
 };
 
 export const AddAllToOrgUnitDropdown = ({
@@ -28,6 +29,7 @@ export const AddAllToOrgUnitDropdown = ({
   unitId,
   unitName,
   contractId,
+  align = "right",
 }: AddAllToOrgUnitDropdownProps) => {
   const sizeProps = { width: 20, height: 20 };
   const [customField, setCustomField] = useState<CustomFieldType | null>(null);
@@ -84,7 +86,7 @@ export const AddAllToOrgUnitDropdown = ({
 
   return (
     <>
-      <BasicDropdownMenu>
+      <BasicDropdownMenu align={align}>
         {/* TODO: Liberar quando adição de contrato estiver finalizada
           levando em consideração as integrações das outras etapas de desenvolviemento
           de Contratos */}

package/src/features/org-units/components/OrgUnitBreadcrumb/OrgUnitBreadcrumb.tsx

@@ -8,6 +8,7 @@ import { OrgUnitBreadcrumbPath } from "./OrgUnitBreadcrumbPath";
 export const OrgUnitBreadcrumb = ({
   items,
   maxItems,
+  hasDropdown = false,
 }: OrgUnitBreadcrumbProps) => {
   const { currentContract } = useBuyerPortal();
   const sortedByPosition = [...items].sort((a, b) => a.position - b.position);
@@ -34,6 +35,7 @@ export const OrgUnitBreadcrumb = ({
         contractId={currentContract?.id ?? ""}
         items={sortedByPosition.slice(offset)}
         divider={divider}
+        hasDropdown={hasDropdown}
       />
     </div>
   );

package/src/features/org-units/components/OrgUnitBreadcrumb/OrgUnitBreadcrumbPath.tsx

@@ -1,11 +1,10 @@
 import { Fragment } from "react";
 
-import { Dropdown } from "@faststore/ui";
+import { Dropdown, DropdownButton } from "@faststore/ui";
 
-import { BasicDropdownMenu } from "../../../shared/components";
+import { Icon } from "../../../shared/components";
 import { OrgUnitBreadcrumbPathProps } from "../../types";
 import { AddAllToOrgUnitDropdown } from "../AddAllToOrgUnitDropdown/AddAllToOrgUnitDropdown";
-import { OrgUnitsDropdownMenu } from "../OrgUnitsDropdownMenu/OrgUnitsDropdownMenu";
 
 import { OrgUnitBreadcrumbLink } from "./OrgUnitBreadcrumbLink";
 
@@ -13,27 +12,28 @@ export const OrgUnitBreadcrumbPath = ({
   items,
   contractId,
   divider,
+  hasDropdown = false,
 }: OrgUnitBreadcrumbPathProps) =>
   items.map((item, index) => {
     const isLast = index === items.length - 1;
 
-    if (isLast) {
+    if (isLast && hasDropdown) {
       return (
         <Fragment key={item.item}>
-          <OrgUnitBreadcrumbLink
-            item={item.item}
-            name={item.name}
-            isLast={isLast}
-          />
           <Dropdown>
-            <BasicDropdownMenu.Trigger iconName="ArrowDropDown" />
+            <DropdownButton asChild>
+              <button data-fs-bp-breadcrumb-dropdown-trigger>
+                {item.name}
+                <Icon name="ArrowDropDown" />
+              </button>
+            </DropdownButton>
 
-            <OrgUnitsDropdownMenu id={item.item} name={item.name} />
             <AddAllToOrgUnitDropdown
               isSingleContract
               contractId={contractId}
               unitId={item.unitId}
               unitName={item.name}
+              align="left"
             />
           </Dropdown>
         </Fragment>
@@ -47,7 +47,7 @@ export const OrgUnitBreadcrumbPath = ({
           name={item.name}
           isLast={isLast}
         />
-        {divider}
+        {!isLast && divider}
       </Fragment>
     );
   });

package/src/features/org-units/components/OrgUnitBreadcrumb/org-unit-breadcrumb.scss

@@ -1,7 +1,8 @@
-@import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
-@import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
-
 [data-fs-bp-breadcrumb-nav] {
+  @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
+
+  --fs-dropdown-item-icon-margin-top: var(--fs-spacing-0);
   flex: 1;
   display: flex;
   align-items: center;
@@ -15,46 +16,56 @@
     flex-wrap: wrap;
   }
 
-  [data-fs-bp-basic-dropdown-menu-trigger] {
-    color: var(--fs-color-neutral-6);
-    padding: 0;
-    width: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
-    height: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
+  [data-fs-bp-breadcrumb-link] {
+    flex: 0 0 max-content;
+    max-width: 28.125rem; // 450px
+
+    p,
+    a {
+      font-size: var(--fs-text-size-4);
+      line-height: var(--fs-text-size-6);
+      font-weight: var(--fs-text-weight-semibold);
+      color: #5c5c5c;
+      text-decoration: none;
+      cursor: pointer;
+      transition: all 0.2s;
+      letter-spacing: -0.04em;
+      display: block;
+
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    [data-fs-bp-breadcrumb-current] {
+      color: #000;
+      cursor: inherit;
+    }
+
+    a:hover {
+      color: #565656;
+    }
   }
-}
 
-[data-fs-bp-breadcrumb-link] {
-  flex: 0 0 max-content;
-  max-width: 28.125rem; // 450px
+  [data-fs-bp-breadcrumb-divider] {
+    color: #858585;
+    flex: 0 0 auto;
+  }
 
-  p,
-  a {
+  [data-fs-bp-breadcrumb-dropdown-trigger] {
+    display: inline-flex;
+    align-items: center;
     font-size: var(--fs-text-size-4);
     line-height: var(--fs-text-size-6);
     font-weight: var(--fs-text-weight-semibold);
-    color: #5c5c5c;
-    text-decoration: none;
-    cursor: pointer;
-    transition: all 0.2s;
-    letter-spacing: -0.04em;
-    display: block;
-
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  [data-fs-bp-breadcrumb-current] {
     color: #000;
-    cursor: inherit;
-  }
+    cursor: pointer;
+    padding: 0 var(--fs-spacing-0) 0 var(--fs-spacing-1);
+    margin-left: calc(var(--fs-spacing-1) * -1);
+    border-radius: var(--fs-border-radius-pill);
 
-  a:hover {
-    color: #565656;
+    &:hover {
+      background-color: #F5F5F5;
+    }
   }
 }
-
-[data-fs-bp-breadcrumb-divider] {
-  color: #858585;
-  flex: 0 0 auto;
-}

package/src/features/org-units/types/OrgUnitBreadcrumbTypes.ts

@@ -10,6 +10,7 @@ export type OrgUnitBreadcrumbItem = {
 export type OrgUnitBreadcrumbProps = {
   items: OrgUnitBreadcrumbItem[];
   maxItems: number;
+  hasDropdown?: boolean;
 };
 
 export interface OrgUnitBreadcrumbItemProps
@@ -21,4 +22,5 @@ export interface OrgUnitBreadcrumbPathProps {
   divider: ReactNode;
   items: OrgUnitBreadcrumbItem[];
   contractId: string;
+  hasDropdown?: boolean;
 }

package/src/features/shared/layouts/BaseTabsLayout/Navbar.tsx

@@ -73,7 +73,7 @@ export const Navbar = ({
         {loading ? (
           <Skeleton size={{ width: "22rem", height: "2.5rem" }} />
         ) : (
-          <OrgUnitBreadcrumb items={breadcrumbList} maxItems={1} />
+          <OrgUnitBreadcrumb items={breadcrumbList} maxItems={1} hasDropdown />
         )}
 
         <div data-fs-bp-nav-menu-actions>

package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss

@@ -20,12 +20,15 @@
         calc(var(--fs-spacing-0) + var(--fs-spacing-3));
     }
 
-    [data-fs-bp-breadcrumb-current] {
-      font-size: var(--fs-text-size-2);
-
-      @include media("<=phonemid") {
-        font-size: var(--fs-text-size-1);
-      }
+    [data-fs-bp-breadcrumb-nav] {
+      [data-fs-bp-breadcrumb-current],
+      [data-fs-bp-breadcrumb-dropdown-trigger] {
+        font-size: var(--fs-text-size-2);
+  
+        @include media("<=phonemid") {
+          font-size: var(--fs-text-size-1);
+        }
+      }      
     }
 
     [data-fs-bp-nav-menu-btn-container] {