@vtex/faststore-plugin-buyer-portal 1.0.7 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "dependencies": {},

package/src/components/Icons/Back.tsx

@@ -0,0 +1,22 @@
+import { IconProps } from ".";
+
+/* *
+* Material Symbols - Arrow Back
+*/
+export const Back = ({ ...props }: IconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960" fill="currentColor"><path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" /></svg>
+)
+
+
+
+
+
+
+
+
+
+
+
+
+
+

package/src/components/Icons/Down.tsx

@@ -0,0 +1,25 @@
+import { IconProps } from ".";
+
+/* *
+* Material Symbols - Arrow Drop Down
+*/
+export const Down = ({ ...props }: IconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960" fill="currentColor"><path d="M480-344 246-576h468L480-344Z" /></svg>
+)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

package/src/components/Icons/StarFolder.tsx

@@ -0,0 +1,19 @@
+import { IconProps } from ".";
+
+/* *
+* Material Symbols - Folder Special
+*/
+export const StarFolder = ({ ...props }: IconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960" fill="currentColor"><path d="M154-128q-43.72 0-74.86-31.14Q48-190.27 48-234v-492q0-43.72 31.14-74.86T154-832h220l106 106h326q43.72 0 74.86 31.14T912-620v386q0 43.73-31.14 74.86Q849.72-128 806-128H154Zm339.67-136 104.16-79.68L702-264l-38-130 104-84H638l-40-126-40 126H428l104.17 84.23L493.67-264Z" /></svg>
+)
+
+
+
+
+
+
+
+
+
+
+

package/src/components/Icons/index.ts

@@ -13,3 +13,6 @@ export { Delete } from './Delete';
 export { Active } from './Active';
 export { FilledFolder } from './FilledFolder';
 export { Address } from './Address';
+export { Back } from './Back';
+export { StarFolder } from './StarFolder'
+export { Down } from './Down'

package/src/components/InternalTopbar/InternalTopBar.scss

@@ -0,0 +1,38 @@
+[data-fs-buyer-portal-topbar]{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--fs-spacing-3) calc(var(--fs-spacing-8) + var(--fs-spacing-0));
+  background-color: #FFFFFF;
+  border-bottom: 1px solid #E0E0E0;
+  width: 100%;
+
+  [data-fs-buyer-portal-topbar-navigation]{
+    display: flex;
+    align-items: center;
+    gap: var(--fs-spacing-2);
+    width: 25%;
+    color: #707070;
+  }
+
+  [data-fs-buyer-portal-topbar-title]{
+    display: flex;
+    align-items: center;
+    gap: var(--fs-spacing-1);
+    font-weight: var(--fs-text-weight-semibold);
+    font-size: var(--fs-text-size-3);
+    line-height: 28px;
+  }
+
+  [data-fs-buyer-portal-topbar-actions]{
+    width: 25%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--fs-spacing-2);
+
+    [data-fs-menu-action-button]{
+      margin-top: var(--fs-spacing-0);
+    }
+  }
+}

package/src/components/InternalTopbar/InternalTopbar.tsx

@@ -0,0 +1,52 @@
+import {
+  Icon, IconButton, Dropdown,
+  DropdownButton,
+  Toggle,
+  LinkButton,
+} from "@faststore/ui";
+import type { ReactNode } from "react";
+import type { HTMLAttributes } from "react";
+
+
+import * as Icons from "../Icons";
+
+interface InternapTopBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+  rootName: string;
+  titleIcon?: ReactNode;
+  title: string
+  titleDropDownItems?: ReactNode;
+  showActions?: boolean
+}
+
+export const InternalTopBar = ({ rootName, titleIcon, title, titleDropDownItems, showActions = true, children }: InternapTopBarProps) => {
+  return (
+    <header data-fs-buyer-portal-topbar>
+      <div data-fs-buyer-portal-topbar-navigation>
+        <LinkButton href="/buyer-portal">
+          <IconButton icon={<Icons.Back height={24} width={24} />}
+            aria-label={`topbar goback`} onClick={() => { }} />
+        </LinkButton>
+        <Icons.StarFolder height={24} width={24} />
+        {rootName}
+      </div>
+
+      <div data-fs-buyer-portal-topbar-title>
+        {titleIcon && (titleIcon)}
+
+        <Dropdown>
+          <DropdownButton>{title} {titleDropDownItems && (<Icons.Down height={12} width={12} />)}</DropdownButton>
+          {titleDropDownItems}
+        </Dropdown>
+      </div>
+
+      <div data-fs-buyer-portal-topbar-actions>
+        {children}
+        {showActions && (
+          <>
+            <IconButton icon={<Icon name='DotsThree' data-fs-menu-action-button />} aria-label="topbar options" />
+          </>
+        )}
+      </div>
+    </header>
+  );
+};

package/src/pages/buyer-portal.tsx

@@ -1,10 +1,13 @@
 import { Navbar } from "../components/Navbar/Navbar";
+import { InternalTopBar } from "../components/InternalTopbar/InternalTopbar";
 import AddressesCard from "../components/AddressesCard/AddressesCard";
 import OrganizationalUnitsCard from "../components/OrganizationalUnitsCard/OrganizationalUnitsCard";
 import ProfileCard from "../components/ProfileCard/ProfileCard";
 import UsersCard from "../components/UsersCard/UsersCard";
+import * as Icons from "../components/Icons"
 import ContractsCard from "../components/ContractsCard/ContractsCard";
 import { organizationResponse } from "../mock/profile-data";
+import { DropdownItem, DropdownMenu } from "@faststore/ui";
 
 export type PageLoader = { page: string };
 
@@ -13,9 +16,24 @@ export async function loader(): Promise<PageLoader> {
 }
 
 export default function MyAccount(data: PageLoader) {
+  // TODO: Remove this when we have a specific page to use the topbar
+  const DropDownItems = (
+    <DropdownMenu>
+      <DropdownItem>
+        Empresa 02
+      </DropdownItem>
+      <DropdownItem>
+        Empresa 03
+      </DropdownItem>
+    </DropdownMenu>
+  )
+
+
   return (
     <section>
       <Navbar />
+      {/* TODO: Remove this when we have a specific page to use the topbar */}
+      <InternalTopBar rootName="Stars Corp Inc." title="Madureira" titleIcon={<Icons.Profile width={24} height={24} />} titleDropDownItems={DropDownItems} />
       <div data-fs-buyer-portal-home-grid>
         <h1 data-fs-buyer-portal-title>{organizationResponse.displayName}</h1>
         <div data-fs-buyer-portal-home-row>

package/src/themes/index.scss

@@ -5,6 +5,7 @@
 @import '@faststore/ui/src/components/molecules/Toggle/styles.scss';
 @import "../components/CustomerSwitch/customer-switch.scss";
 @import "../components/Navbar/navbar.scss";
+@import "../components/InternalTopbar/InternalTopBar.scss";
 @import "../components/SelfManagementDrawer/self-management-drawer.scss";
 @import "../components/SelfManagementDrawer/self-management-drawer.scss";
 @import "../components/ProfileSummary/profile-summary.scss";