@vtex/faststore-plugin-buyer-portal 1.3.30 → 1.3.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [1.3.31] - 2025-11-25
11
+
12
+ ### Changed
13
+
14
+ - Fix topbar dimensions, spacing, fonts and colors using Org Account CSS tokens
15
+
10
16
  ## [1.3.30] - 2025-11-25
11
17
 
12
18
  ### Changed
@@ -17,6 +23,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
17
23
 
18
24
  ### Added
19
25
 
26
+ - Remove faststore tokens from Org Unit Details page to use our tokens and mixins
27
+
28
+ ### Added
29
+
20
30
  - Create tokens file with variables according with design system definition
21
31
  - Create typography mixins
22
32
 
@@ -287,7 +297,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
287
297
  - Add CHANGELOG file
288
298
  - Add README file
289
299
 
290
- [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.30...HEAD
300
+ [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.31...HEAD
291
301
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
292
302
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
293
303
  [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -302,6 +312,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
302
312
 
303
313
  # <<<<<<< HEAD
304
314
 
315
+ [1.3.31]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.30...v1.3.31
305
316
  [1.3.30]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.29...v1.3.30
306
317
  [1.3.29]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.28...v1.3.29
307
318
  [1.3.28]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.27...v1.3.28
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vtex/faststore-plugin-buyer-portal",
3
- "version": "1.3.30",
3
+ "version": "1.3.31",
4
4
  "description": "A plugin for faststore with buyer portal",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -24,12 +24,13 @@ export const OrgUnitBreadcrumbLink = ({
24
24
  }, []);
25
25
 
26
26
  const linkContent = (
27
- <div data-fs-bp-breadcrumb-link data-fs-breadcrumb-disabled={!enabled}>
28
- {isLast ? (
27
+ <div data-fs-bp-breadcrumb-link>
28
+ {isLast || !enabled ? (
29
29
  <p
30
30
  ref={linkRef as React.RefObject<HTMLParagraphElement>}
31
31
  data-fs-bp-breadcrumb-text
32
32
  data-fs-bp-breadcrumb-current
33
+ className={!enabled ? "disable-link" : ""}
33
34
  >
34
35
  {name}
35
36
  </p>
@@ -38,8 +38,11 @@
38
38
  }
39
39
 
40
40
  [data-fs-bp-breadcrumb-current] {
41
- color: #000;
42
41
  cursor: inherit;
42
+
43
+ &:not(.disable-link) {
44
+ color: #000;
45
+ }
43
46
  }
44
47
 
45
48
  a:hover {
@@ -47,10 +50,6 @@
47
50
  }
48
51
  }
49
52
 
50
- [data-fs-breadcrumb-disabled] {
51
- pointer-events: none;
52
- }
53
-
54
53
  [data-fs-bp-breadcrumb-divider] {
55
54
  color: #858585;
56
55
  flex: 0 0 auto;
@@ -2,16 +2,10 @@ import storeConfig from "discovery.config";
2
2
 
3
3
  import Link from "next/link";
4
4
 
5
- import {
6
- Dropdown,
7
- DropdownButton,
8
- DropdownMenu,
9
- Skeleton,
10
- IconButton,
11
- } from "@faststore/ui";
5
+ import { Dropdown, DropdownMenu, IconButton } from "@faststore/ui";
12
6
 
13
7
  import { ProfileSummary } from "../../../profile/components";
14
- import { Icon } from "../../../shared/components";
8
+ import { BasicDropdownMenu, Icon } from "../../../shared/components";
15
9
  import { useDrawerProps } from "../../../shared/hooks";
16
10
  import { AboutDrawer } from "../../../shared/layouts/BaseTabsLayout/about-drawer/AboutDrawer";
17
11
  import { doLogout } from "../../../shared/utils";
@@ -31,7 +25,6 @@ export const OrgUnitDetailsNavbar = ({
31
25
  person,
32
26
  orgName,
33
27
  orgId,
34
- loading = false,
35
28
  }: OrgUnitDetailsNavbarProps) => {
36
29
  const {
37
30
  open: openAboutMenu,
@@ -45,7 +38,11 @@ export const OrgUnitDetailsNavbar = ({
45
38
  {storeConfig.seo.title}
46
39
  </Link>
47
40
  <div data-fs-bp-org-unit-details-navbar-actions>
48
- <Link href="/" data-fs-bp-org-unit-details-navbar-start-shopping-link>
41
+ <Link
42
+ target="_blank"
43
+ href="/"
44
+ data-fs-bp-org-unit-details-navbar-start-shopping-link
45
+ >
49
46
  Start shopping
50
47
  </Link>
51
48
 
@@ -62,27 +59,17 @@ export const OrgUnitDetailsNavbar = ({
62
59
  aria-label={"open about menu"}
63
60
  onClick={openAboutMenu}
64
61
  />
65
-
66
- {loading ? (
67
- <Skeleton size={{ width: "2.5rem", height: "2.5rem" }} />
68
- ) : (
69
- <Dropdown>
70
- <DropdownButton asChild>
71
- <button type="button" data-fs-bp-org-unit-details-navbar-trigger>
72
- <Icon name="AccountCircle" width={20} height={20} />
73
- </button>
74
- </DropdownButton>
75
-
76
- <DropdownMenu align="right" data-fs-bp-org-unit-details-navbar-menu>
77
- <ProfileSummary
78
- data-fs-bp-org-unit-details-navbar-menu-profile-summary
79
- onLogoutClick={doLogout}
80
- orgName={orgName}
81
- person={person}
82
- />
83
- </DropdownMenu>
84
- </Dropdown>
85
- )}
62
+ <Dropdown>
63
+ <BasicDropdownMenu.Trigger iconSize={20} iconName="AccountCircle" />
64
+ <DropdownMenu align="right" data-fs-bp-org-unit-details-navbar-menu>
65
+ <ProfileSummary
66
+ data-fs-bp-org-unit-details-navbar-menu-profile-summary
67
+ onLogoutClick={doLogout}
68
+ orgName={orgName}
69
+ person={person}
70
+ />
71
+ </DropdownMenu>
72
+ </Dropdown>
86
73
  </div>
87
74
  {isOpenAboutMenu && (
88
75
  <AboutDrawer
@@ -1,68 +1,62 @@
1
1
  [data-fs-bp-org-unit-details-navbar] {
2
+ @import "@faststore/ui/src/components/atoms/Button/styles.scss";
3
+
2
4
  display: flex;
3
5
  justify-content: space-between;
4
6
  align-items: center;
5
- padding: var(--fs-spacing-0) calc(var(--fs-spacing-8) + var(--fs-spacing-0));
6
- background-color: #ffffff;
7
- border-bottom: var(--fs-border-width) solid #ebebeb;
7
+ background-color: var(--fs-bp-color-neutral-0);
8
+ padding: var(--fs-bp-padding-3) var(--fs-bp-padding-5);
9
+ border-bottom: 1px solid var(--fs-bp-color-neutral-2);
10
+ min-height: 4.25rem;
8
11
 
9
- @include media("<=tablet") {
10
- padding: var(--fs-spacing-0) calc(var(--fs-spacing-3) + var(--fs-spacing-0));
12
+ @include media('>=tablet') {
13
+ padding-left: var(--fs-bp-padding-10);
14
+ padding-right: var(--fs-bp-padding-10);
11
15
  }
12
16
 
13
17
  [data-fs-bp-org-unit-details-navbar-link] {
14
- font-weight: var(--fs-text-weight-bold);
15
- font-size: var(--fs-text-size-4);
16
- line-height: var(--fs-text-size-6);
17
- color: #0366dd;
18
+ color: var(--fs-bp-color-brand);
19
+ @include text-style('display-6');
20
+ font-weight: var(--fs-bp-weight-bold);
18
21
  text-decoration: none;
19
22
  }
20
23
 
21
24
  [data-fs-bp-org-unit-details-navbar-actions] {
22
25
  display: flex;
23
26
  align-items: center;
27
+ gap: var(--fs-bp-gap-4);
24
28
  }
25
29
 
26
30
  [data-fs-bp-org-unit-details-navbar-start-shopping-link] {
27
- display: flex;
28
- align-items: center;
31
+ display: none;
32
+
33
+ padding: 0 var(--fs-bp-padding-5);
34
+ @include text-style('action');
35
+ color: var(--fs-bp-color-neutral-8);
36
+ border-radius: var(--fs-bp-border-radius-full);
37
+
38
+ height: var(--fs-bp-spacing-9);
29
39
  justify-content: center;
30
- padding: calc(var(--fs-spacing-1) + var(--fs-spacing-2))
31
- calc(var(--fs-spacing-3) + var(--fs-spacing-0));
40
+ align-items: center;
41
+ text-decoration: none;
32
42
 
33
- @include media("<=tablet") {
34
- display: none;
43
+ &:hover {
44
+ background-color: var(--fs-bp-color-transparent-0);
35
45
  }
36
46
 
37
- color: #3d3d3d;
38
- font-weight: var(--fs-text-weight-semibold);
39
- line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
40
- font-size: var(--fs-text-size-2);
41
- text-decoration: none;
42
- margin-right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
43
-
44
- span {
45
- margin-right: var(--fs-spacing-3);
47
+ &:active {
48
+ background-color: var(--fs-bp-color-transparent-1);
46
49
  }
47
- }
48
50
 
49
- [data-fs-bp-org-unit-details-navbar-trigger] {
50
- display: flex;
51
- justify-content: center;
52
- align-items: center;
53
- width: var(--fs-spacing-6);
54
- height: var(--fs-spacing-6);
55
- cursor: pointer;
51
+ @include media('>=tablet') {
52
+ display: inline-flex;
53
+ }
56
54
  }
57
55
 
58
56
  [data-fs-bp-nav-about-trigger] {
59
- display: flex;
60
- justify-content: center;
61
- align-items: center;
62
- width: var(--fs-spacing-6);
63
- height: var(--fs-spacing-6);
64
- cursor: pointer;
65
- margin-top: 0.2rem;
57
+ --fs-button-height: var(--fs-bp-spacing-9);
58
+ --fs-button-border-radius: var(--fs-bp-border-radius-full);
59
+ --fs-button-tertiary-text-color: var(--fs-bp-color-black);
66
60
  }
67
61
  }
68
62
 
@@ -70,7 +64,7 @@
70
64
  --fs-profile-dropdown-menu-width: 22.5rem;
71
65
  width: auto;
72
66
 
73
- background-color: white;
67
+ background-color: var(--fs-bp-color-white);
74
68
 
75
69
  [data-fs-bp-org-unit-details-navbar-menu-profile-summary] {
76
70
  min-width: var(--fs-profile-dropdown-menu-width);
@@ -87,6 +87,7 @@ export const OrgUnitsDetailsLayout = ({
87
87
  <HeaderInside>
88
88
  {loading ? (
89
89
  <Skeleton
90
+ data-fs-org-units-details-header-skeleton
90
91
  size={{
91
92
  width: "100%",
92
93
  height: "2.5rem",
@@ -36,6 +36,10 @@
36
36
  @include media(">=tablet") {
37
37
  margin: var(--fs-bp-margin-0);
38
38
  }
39
+
40
+ [data-fs-org-units-details-header-skeleton] {
41
+ max-width: 40rem;
42
+ }
39
43
  }
40
44
 
41
45
  [data-fs-org-units-details-grid] {
@@ -6,10 +6,12 @@ import { Icon } from "../Icon";
6
6
 
7
7
  export type BasicDropdownMenuTriggerProps = {
8
8
  iconName?: string;
9
+ iconSize?: number;
9
10
  } & ComponentProps<"button">;
10
11
 
11
12
  export const BasicDropdownMenuTrigger = ({
12
13
  iconName = "MoreVert",
14
+ iconSize = 24,
13
15
  ...otherProps
14
16
  }: BasicDropdownMenuTriggerProps) => {
15
17
  return (
@@ -20,7 +22,7 @@ export const BasicDropdownMenuTrigger = ({
20
22
  aria-label="Open menu"
21
23
  {...otherProps}
22
24
  >
23
- <Icon name={iconName} />
25
+ <Icon name={iconName} width={iconSize} height={iconSize} />
24
26
  </button>
25
27
  </DropdownButton>
26
28
  );
@@ -2,17 +2,12 @@ import type { ReactNode } from "react";
2
2
 
3
3
  import Link from "next/link";
4
4
 
5
- import {
6
- Dropdown,
7
- DropdownButton,
8
- DropdownMenu,
9
- IconButton,
10
- Skeleton,
11
- } from "@faststore/ui";
5
+ import { Dropdown, DropdownMenu, IconButton, Skeleton } from "@faststore/ui";
12
6
 
13
7
  import { OrgUnitBreadcrumb } from "../../../org-units/components";
14
8
  import { useOrgUnitByUser } from "../../../org-units/hooks";
15
9
  import { ProfileSummary } from "../../../profile/components";
10
+ import { BasicDropdownMenu } from "../../components";
16
11
  import { Icon } from "../../components/Icon";
17
12
  import { useDrawerProps } from "../../hooks";
18
13
  import { doLogout } from "../../utils";
@@ -62,15 +57,13 @@ export const Navbar = ({
62
57
  (unitId) => unitId === userUnit?.id
63
58
  );
64
59
 
65
- const breadcrumbList = loading
66
- ? []
67
- : orgUnitList.map((orgUnitId, index) => ({
68
- unitId: orgUnitId,
69
- item: buyerPortalRoutes.orgUnitDetails({ orgUnitId }),
70
- name: orgUnit?.path.names.split("/")[index] ?? "",
71
- position: index + 1,
72
- enabled: index >= userUnitIndex,
73
- }));
60
+ const breadcrumbList = orgUnitList.map((orgUnitId, index) => ({
61
+ unitId: orgUnitId,
62
+ item: buyerPortalRoutes.orgUnitDetails({ orgUnitId }),
63
+ name: orgUnit?.path.names.split("/")[index] ?? "",
64
+ position: index + 1,
65
+ enabled: index >= userUnitIndex,
66
+ }));
74
67
 
75
68
  return (
76
69
  <>
@@ -86,13 +79,19 @@ export const Navbar = ({
86
79
  />
87
80
  </div>
88
81
  {loading ? (
89
- <Skeleton size={{ width: "22rem", height: "2.5rem" }} />
82
+ <Skeleton
83
+ data-fs-bp-nav-breadcrumb-skeleton
84
+ size={{ width: "22rem", height: "2.5rem" }}
85
+ />
90
86
  ) : (
91
87
  <OrgUnitBreadcrumb items={breadcrumbList} maxItems={1} hasDropdown />
92
88
  )}
93
-
94
89
  <div data-fs-bp-nav-menu-actions>
95
- <Link href="/" data-fs-bp-nav-menu-start-shopping-link>
90
+ <Link
91
+ href="/"
92
+ target="_blank"
93
+ data-fs-bp-nav-menu-start-shopping-link
94
+ >
96
95
  Start shopping
97
96
  </Link>
98
97
 
@@ -102,29 +101,17 @@ export const Navbar = ({
102
101
  aria-label={"open about menu"}
103
102
  onClick={openAboutMenu}
104
103
  />
105
-
106
- {loading ? (
107
- <Skeleton size={{ width: "2.5rem", height: "2.5rem" }} />
108
- ) : (
109
- <Dropdown>
110
- <DropdownButton asChild>
111
- <IconButton
112
- data-fs-bp-nav-account-menu-trigger
113
- icon={<Icon name="AccountCircle" width={20} height={20} />}
114
- aria-label={"open sidebar menu"}
115
- />
116
- </DropdownButton>
117
-
118
- <DropdownMenu align="right" data-fs-bp-nav-menu>
119
- <ProfileSummary
120
- data-fs-bp-nav-menu-profile-summary
121
- onLogoutClick={doLogout}
122
- orgName={orgUnit?.name ?? ""}
123
- person={person}
124
- />
125
- </DropdownMenu>
126
- </Dropdown>
127
- )}
104
+ <Dropdown>
105
+ <BasicDropdownMenu.Trigger iconSize={20} iconName="AccountCircle" />
106
+ <DropdownMenu align="right" data-fs-bp-nav-menu>
107
+ <ProfileSummary
108
+ data-fs-bp-nav-menu-profile-summary
109
+ onLogoutClick={doLogout}
110
+ orgName={orgUnit?.name ?? ""}
111
+ person={person}
112
+ />
113
+ </DropdownMenu>
114
+ </Dropdown>
128
115
  </div>
129
116
  </nav>
130
117
  {isOpenSidebarMenuDrawerOpen && (
@@ -1,23 +1,25 @@
1
1
  @import "./sidebar-drawer/sidebar-drawer.scss";
2
2
 
3
3
  [data-fs-bp-base-tabs-layout] {
4
+ @import "@faststore/ui/src/components/atoms/Button/styles.scss";
5
+
4
6
  display: grid;
5
7
  grid-template-rows: auto 1fr;
6
8
  height: 100vh;
7
9
  overflow: hidden;
8
10
 
9
- [data-fs-bp-nav] {
11
+ [data-fs-bp-nav] {
10
12
  display: flex;
11
- width: 100%;
12
- align-items: center;
13
13
  justify-content: space-between;
14
- padding: var(--fs-text-size-1) var(--fs-spacing-7);
15
-
16
- border-bottom: var(--fs-border-width) solid #e0e0e0;
17
-
18
- @include media("<tablet") {
19
- padding: var(--fs-text-size-0)
20
- calc(var(--fs-spacing-0) + var(--fs-spacing-3));
14
+ align-items: center;
15
+ background-color: var(--fs-bp-color-neutral-0);
16
+ padding: var(--fs-bp-padding-3) var(--fs-bp-padding-5);
17
+ border-bottom: 1px solid var(--fs-bp-color-neutral-2);
18
+ min-height: 4.25rem;
19
+
20
+ @include media('>=tablet') {
21
+ padding-left: var(--fs-bp-padding-10);
22
+ padding-right: var(--fs-bp-padding-10);
21
23
  }
22
24
 
23
25
  [data-fs-bp-breadcrumb-nav] {
@@ -53,6 +55,10 @@
53
55
  }
54
56
  }
55
57
 
58
+ [data-fs-bp-nav-breadcrumb-skeleton] {
59
+ margin-right: var(--fs-bp-margin-auto);
60
+ }
61
+
56
62
  [data-fs-bp-nav-page-name] {
57
63
  position: absolute;
58
64
  left: 50%;
@@ -64,7 +70,9 @@
64
70
  }
65
71
 
66
72
  [data-fs-bp-nav-about-trigger] {
67
- cursor: pointer;
73
+ --fs-button-height: var(--fs-bp-spacing-9);
74
+ --fs-button-border-radius: var(--fs-bp-border-radius-full);
75
+ --fs-button-tertiary-text-color: var(--fs-bp-color-black);
68
76
  }
69
77
 
70
78
  [data-fs-bp-nav-account-menu-trigger] {
@@ -85,33 +93,32 @@
85
93
  [data-fs-bp-nav-menu-actions] {
86
94
  display: flex;
87
95
  align-items: center;
88
- [data-fs-bp-nav-menu-start-shopping-link] {
89
- }
90
- @include media("<=tablet") {
91
- display: none;
92
- }
96
+ gap: var(--fs-bp-gap-4);
93
97
  }
94
98
 
95
99
  [data-fs-bp-nav-menu-start-shopping-link] {
96
- display: flex;
97
- align-items: center;
100
+ display: none;
101
+
102
+ padding: var(--fs-bp-padding-0) var(--fs-bp-padding-5);
103
+ @include text-style('action');
104
+ color: var(--fs-bp-color-neutral-8);
105
+ border-radius: var(--fs-bp-border-radius-full);
106
+
107
+ height: var(--fs-bp-spacing-9);
98
108
  justify-content: center;
99
- padding: calc(var(--fs-spacing-1) + var(--fs-spacing-2))
100
- calc(var(--fs-spacing-3) + var(--fs-spacing-0));
101
-
102
- @include media("<=tablet") {
103
- display: none;
104
- }
105
-
106
- color: #3d3d3d;
107
- font-weight: var(--fs-text-weight-semibold);
108
- line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
109
- font-size: var(--fs-text-size-2);
109
+ align-items: center;
110
110
  text-decoration: none;
111
- margin-right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
112
-
113
- span {
114
- margin-right: var(--fs-spacing-3);
111
+
112
+ &:hover {
113
+ background-color: var(--fs-bp-color-transparent-0);
114
+ }
115
+
116
+ &:active {
117
+ background-color: var(--fs-bp-color-transparent-1);
118
+ }
119
+
120
+ @include media('>=tablet') {
121
+ display: inline-flex;
115
122
  }
116
123
  }
117
124
  }
@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
13
13
  export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
14
14
  "bp_hide_edit_recipient_confirm";
15
15
 
16
- export const CURRENT_VERSION = "1.3.30";
16
+ export const CURRENT_VERSION = "1.3.31";
@@ -24,14 +24,6 @@
24
24
  --fs-bp-text-display-5: var(--fs-bp-text-size-4);
25
25
  --fs-bp-text-display-6: var(--fs-bp-text-size-3);
26
26
 
27
- @media (min-width: 768px) {
28
- --fs-bp-text-size-6: 2rem;
29
- --fs-bp-text-size-7: 2.5rem;
30
- --fs-bp-text-size-8: 3rem;
31
- --fs-bp-text-size-9: 3.5rem;
32
- --fs-bp-text-size-10: 5.25rem;
33
- }
34
-
35
27
  // Weight
36
28
  --fs-bp-weight-regular: 400;
37
29
  --fs-bp-weight-medium: 500;
@@ -82,6 +74,9 @@
82
74
  --fs-bp-color-brand: var(--fs-bp-color-accent-2);
83
75
  --fs-bp-color-white: var(--fs-bp-color-neutral-0);
84
76
  --fs-bp-color-black: var(--fs-bp-color-neutral-9);
77
+ --fs-bp-color-transparent-0: rgba(0, 0, 0, .06);
78
+ --fs-bp-color-transparent-1: rgba(0, 0, 0, .12);
79
+ --fs-bp-color-transparent-2: rgba(255, 255, 255, .9);
85
80
 
86
81
  // Border radius
87
82
  --fs-bp-border-radius-0: 0;