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

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.
Files changed (21) hide show
  1. package/CHANGELOG.md +25 -1
  2. package/package.json +1 -1
  3. package/src/features/budgets/components/BudgetAllocationsSelection/BudgetAllocationsSelection.tsx +1 -1
  4. package/src/features/budgets/components/BudgetAllocationsSelection/budget-allocations-selection.scss +12 -0
  5. package/src/features/org-units/components/OrgUnitBreadcrumb/OrgUnitBreadcrumbLink.tsx +3 -2
  6. package/src/features/org-units/components/OrgUnitBreadcrumb/org-unit-breadcrumb.scss +21 -22
  7. package/src/features/org-units/components/OrgUnitDetailsNavbar/OrgUnitDetailsNavbar.tsx +18 -31
  8. package/src/features/org-units/components/OrgUnitDetailsNavbar/org-unit-details-navbar.scss +38 -48
  9. package/src/features/org-units/layouts/OrgUnitDetailsLayout/OrgUnitDetailsLayout.tsx +2 -1
  10. package/src/features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss +4 -0
  11. package/src/features/profile/components/ProfileSummary/ProfileSummary.tsx +4 -7
  12. package/src/features/profile/components/ProfileSummary/profile-summary.scss +26 -54
  13. package/src/features/shared/components/BasicDropdownMenu/BasicDropdownMenuTrigger.tsx +3 -1
  14. package/src/features/shared/components/BasicDropdownMenu/basic-dropdown-menu.scss +9 -4
  15. package/src/features/shared/components/HeaderInside/header-inside.scss +10 -2
  16. package/src/features/shared/layouts/BaseTabsLayout/Navbar.tsx +30 -42
  17. package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss +43 -36
  18. package/src/features/shared/utils/constants.ts +1 -1
  19. package/src/features/users/layouts/UserDetailsLayout/user-details-layout.scss +1 -0
  20. package/src/themes/index.scss +3 -1
  21. package/src/themes/tokens.scss +13 -8
package/CHANGELOG.md CHANGED
@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [1.3.32] - 2025-11-25
11
+
12
+ ### Changed
13
+
14
+ - Fix dropdown shadow and apply pressed status when content is visible
15
+ - Remove avatar and replace User Role with user e-mail in ProfileSummary
16
+ - Fix ProfileSummary sizing and fonts using Org Account CSS tokens
17
+
18
+ ## [1.3.31] - 2025-11-25
19
+
20
+ ### Changed
21
+
22
+ - Fix topbar dimensions, spacing, fonts and colors using Org Account CSS tokens
23
+
10
24
  ## [1.3.30] - 2025-11-25
11
25
 
12
26
  ### Changed
@@ -17,6 +31,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
17
31
 
18
32
  ### Added
19
33
 
34
+ - Remove faststore tokens from Org Unit Details page to use our tokens and mixins
35
+
36
+ ### Added
37
+
38
+ - Remove faststore tokens from Org Unit Details page to use our tokens and mixins
39
+
40
+ ### Added
41
+
20
42
  - Create tokens file with variables according with design system definition
21
43
  - Create typography mixins
22
44
 
@@ -287,7 +309,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
287
309
  - Add CHANGELOG file
288
310
  - Add README file
289
311
 
290
- [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.30...HEAD
312
+ [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.32...HEAD
291
313
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
292
314
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
293
315
  [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -302,6 +324,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
302
324
 
303
325
  # <<<<<<< HEAD
304
326
 
327
+ [1.3.32]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.31...v1.3.32
328
+ [1.3.31]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.30...v1.3.31
305
329
  [1.3.30]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.29...v1.3.30
306
330
  [1.3.29]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.28...v1.3.29
307
331
  [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.32",
4
4
  "description": "A plugin for faststore with buyer portal",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/features/budgets/components/BudgetAllocationsSelection/BudgetAllocationsSelection.tsx CHANGED
@@ -177,7 +177,7 @@ export const BudgetAllocationsSelection = ({
177
177
  />
178
178
  </DropdownButton>
179
179
  <DropdownMenu align="left">
180
- <div ref={dropdownRef}>
180
+ <div ref={dropdownRef} data-fs-bp-budget-allocation-select-list>
181
181
  {options.map((option) => (
182
182
  <DropdownItem
183
183
  key={option}
package/src/features/budgets/components/BudgetAllocationsSelection/budget-allocations-selection.scss CHANGED
@@ -76,6 +76,12 @@
76
76
  }
77
77
  }
78
78
 
79
+ &[data-fs-bp-budget-allocation-select-current] {
80
+ &:active, &[aria-expanded="true"] {
81
+ background-color: var(--fs-bp-color-transparent-1);
82
+ }
83
+ }
84
+
79
85
  [data-fs-bp-budget-allocation-select-current-icon] {
80
86
  color: #000000;
81
87
  transform: rotate(90deg);
@@ -110,6 +116,7 @@
110
116
  }
111
117
 
112
118
  [data-fs-dropdown-menu] {
119
+ --fs-dropdown-menu-box-shadow: var(--fs-bp-elevation-dropdown);
113
120
  width: auto;
114
121
  background-color: #ffffff !important;
115
122
  padding: var(--fs-spacing-1) 0;
@@ -125,8 +132,13 @@
125
132
  color: #1f1f1f;
126
133
  }
127
134
  }
135
+ [data-fs-bp-budget-allocation-select-list] {
136
+ width: 100%;
137
+ }
138
+
128
139
  [data-fs-bp-budget-allocation-select-item] {
129
140
  padding: var(--fs-spacing-3);
141
+ --fs-dropdown-item-bkg-color-hover: var(--fs-bp-color-transparent-0);
130
142
 
131
143
  &[data-fs-bp-budget-allocation-selected="true"] {
132
144
  color: #0366dd !important;
package/src/features/org-units/components/OrgUnitBreadcrumb/OrgUnitBreadcrumbLink.tsx CHANGED
@@ -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>
package/src/features/org-units/components/OrgUnitBreadcrumb/org-unit-breadcrumb.scss CHANGED
@@ -2,15 +2,15 @@
2
2
  @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
3
3
  @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
4
4
 
5
- --fs-dropdown-item-icon-margin-top: var(--fs-spacing-0);
5
+ --fs-dropdown-item-icon-margin-top: var(--fs-bp-margin-1);
6
6
  flex: 1;
7
7
  display: flex;
8
8
  align-items: center;
9
- gap: var(--fs-spacing-1);
9
+ gap: var(--fs-bp-gap-2);
10
10
 
11
11
  [data-fs-tooltip] {
12
- --fs-tooltip-background: #1f1f1f;
13
- --fs-tooltip-border-radius: 0.25rem;
12
+ --fs-tooltip-background: var(--fs-bp-color-neutral-8);
13
+ --fs-tooltip-border-radius: var(--fs-bp-border-radius-1);
14
14
  }
15
15
  @include media(">=tablet") {
16
16
  flex-wrap: wrap;
@@ -22,10 +22,8 @@
22
22
 
23
23
  p,
24
24
  a {
25
- font-size: var(--fs-text-size-4);
26
- line-height: var(--fs-text-size-6);
27
- font-weight: var(--fs-text-weight-semibold);
28
- color: #5c5c5c;
25
+ @include text-style('display-5');
26
+ color: var(--fs-bp-color-neutral-7);
29
27
  text-decoration: none;
30
28
  cursor: pointer;
31
29
  transition: all 0.2s;
@@ -38,8 +36,11 @@
38
36
  }
39
37
 
40
38
  [data-fs-bp-breadcrumb-current] {
41
- color: #000;
42
39
  cursor: inherit;
40
+
41
+ &:not(.disable-link) {
42
+ color: var(--fs-bp-color-black);
43
+ }
43
44
  }
44
45
 
45
46
  a:hover {
@@ -47,29 +48,27 @@
47
48
  }
48
49
  }
49
50
 
50
- [data-fs-breadcrumb-disabled] {
51
- pointer-events: none;
52
- }
53
-
54
51
  [data-fs-bp-breadcrumb-divider] {
55
- color: #858585;
52
+ color: var(--fs-bp-color-neutral-6);
56
53
  flex: 0 0 auto;
57
54
  }
58
55
 
59
56
  [data-fs-bp-breadcrumb-dropdown-trigger] {
60
57
  display: inline-flex;
61
58
  align-items: center;
62
- font-size: var(--fs-text-size-4);
63
- line-height: var(--fs-text-size-6);
64
- font-weight: var(--fs-text-weight-semibold);
65
- color: #000;
59
+ @include text-style('display-5');
60
+ color: var(--fs-bp-color-black);
66
61
  cursor: pointer;
67
- padding: 0 var(--fs-spacing-0) 0 var(--fs-spacing-1);
68
- margin-left: calc(var(--fs-spacing-1) * -1);
69
- border-radius: var(--fs-border-radius-pill);
62
+ padding: 0 var(--fs-bp-padding-1) 0 var(--fs-bp-padding-2);
63
+ margin-left: calc(var(--fs-bp-margin-2) * -1);
64
+ border-radius: var(--fs-bp-border-radius-full);
70
65
 
71
66
  &:hover {
72
- background-color: #f5f5f5;
67
+ background-color: var(--fs-bp-color-transparent-0);
68
+ }
69
+
70
+ &:active, &[aria-expanded="true"] {
71
+ background-color: var(--fs-bp-color-transparent-1);
73
72
  }
74
73
  }
75
74
  }
package/src/features/org-units/components/OrgUnitDetailsNavbar/OrgUnitDetailsNavbar.tsx CHANGED
@@ -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";
@@ -23,6 +17,7 @@ export type OrgUnitDetailsNavbarProps = {
23
17
  image?: string;
24
18
  name: string;
25
19
  role?: string;
20
+ email?: string;
26
21
  };
27
22
  loading?: boolean;
28
23
  };
@@ -31,7 +26,6 @@ export const OrgUnitDetailsNavbar = ({
31
26
  person,
32
27
  orgName,
33
28
  orgId,
34
- loading = false,
35
29
  }: OrgUnitDetailsNavbarProps) => {
36
30
  const {
37
31
  open: openAboutMenu,
@@ -45,7 +39,11 @@ export const OrgUnitDetailsNavbar = ({
45
39
  {storeConfig.seo.title}
46
40
  </Link>
47
41
  <div data-fs-bp-org-unit-details-navbar-actions>
48
- <Link href="/" data-fs-bp-org-unit-details-navbar-start-shopping-link>
42
+ <Link
43
+ target="_blank"
44
+ href="/"
45
+ data-fs-bp-org-unit-details-navbar-start-shopping-link
46
+ >
49
47
  Start shopping
50
48
  </Link>
51
49
 
@@ -62,27 +60,16 @@ export const OrgUnitDetailsNavbar = ({
62
60
  aria-label={"open about menu"}
63
61
  onClick={openAboutMenu}
64
62
  />
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
- )}
63
+ <Dropdown>
64
+ <BasicDropdownMenu.Trigger iconSize={20} iconName="AccountCircle" />
65
+ <DropdownMenu align="right" data-fs-bp-org-unit-details-navbar-menu>
66
+ <ProfileSummary
67
+ onLogoutClick={doLogout}
68
+ orgName={orgName}
69
+ person={person}
70
+ />
71
+ </DropdownMenu>
72
+ </Dropdown>
86
73
  </div>
87
74
  {isOpenAboutMenu && (
88
75
  <AboutDrawer
package/src/features/org-units/components/OrgUnitDetailsNavbar/org-unit-details-navbar.scss CHANGED
@@ -1,78 +1,68 @@
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
 
69
- [data-fs-bp-org-unit-details-navbar-menu] {
70
- --fs-profile-dropdown-menu-width: 22.5rem;
71
- width: auto;
72
-
73
- background-color: white;
74
-
75
- [data-fs-bp-org-unit-details-navbar-menu-profile-summary] {
76
- min-width: var(--fs-profile-dropdown-menu-width);
77
- }
63
+ [data-fs-bp-org-unit-details-navbar-menu][data-fs-dropdown-menu] {
64
+ width: calc(100vw - (var(--fs-bp-spacing-5) * 2));
65
+ max-width: 22.5rem;
66
+ min-width: unset;
67
+ background-color: var(--fs-bp-color-white);
78
68
  }
package/src/features/org-units/layouts/OrgUnitDetailsLayout/OrgUnitDetailsLayout.tsx CHANGED
@@ -79,7 +79,7 @@ export const OrgUnitsDetailsLayout = ({
79
79
  orgName={orgUnit.name}
80
80
  person={{
81
81
  name: user?.name ?? "",
82
- role: user?.roles?.[0] ?? "",
82
+ email: user?.email ?? "",
83
83
  }}
84
84
  loading={loading}
85
85
  />
@@ -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",
package/src/features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss CHANGED
@@ -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] {
package/src/features/profile/components/ProfileSummary/ProfileSummary.tsx CHANGED
@@ -15,12 +15,13 @@ export type ProfileSummaryProps = {
15
15
  image?: ReactNode;
16
16
  name: string;
17
17
  role?: string;
18
+ email?: string;
18
19
  };
19
20
  };
20
21
 
21
22
  export const ProfileSummary = ({
22
23
  onLogoutClick,
23
- person: { image, name, role },
24
+ person: { name, email },
24
25
  orgName,
25
26
  bordered = false,
26
27
  showManageLink = false,
@@ -41,18 +42,14 @@ export const ProfileSummary = ({
41
42
  )}
42
43
  </div>
43
44
  <div data-fs-self-profile-summary-person-actions>
44
- <div data-fs-self-profile-summary-person-image>
45
- {image ?? <Icon name="Profile" width={14} height={14} />}
46
- </div>
47
45
  <div data-fs-self-profile-summary-person-data>
48
46
  <h2>{name}</h2>
49
- {role && <h3>{role}</h3>}
47
+ <p>{email}</p>
50
48
  </div>
51
49
  <Button
52
50
  data-fs-self-profile-summary-logout-button
53
51
  onClick={onLogoutClick}
54
- variant="secondary"
55
- size="small"
52
+ variant="tertiary"
56
53
  >
57
54
  Logout
58
55
  </Button>
package/src/features/profile/components/ProfileSummary/profile-summary.scss CHANGED
@@ -14,15 +14,14 @@
14
14
  display: flex;
15
15
  align-items: center;
16
16
  justify-content: space-between;
17
- padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
18
- border-bottom: var(--fs-border-width) solid #e0e0e0;
19
- font-size: var(--fs-text-size-legend);
20
- font-weight: var(--fs-text-weight-semibold);
17
+ padding: var(--fs-bp-padding-5);
18
+ padding-top: var(--fs-bp-padding-3);
19
+ border-bottom: 1px solid var(--fs-bp-color-neutral-3);
21
20
 
22
21
  [data-fs-self-profile-summary-org-name] {
23
- color: #000000;
24
- font-size: var(--fs-text-size-1);
25
- font-weight: 600;
22
+ @include text-style('action');
23
+ line-height: var(--fs-bp-spacing-5);
24
+ color: var(--fs-bp-color-black);
26
25
  }
27
26
 
28
27
  [data-fs-self-profile-summary-org-link] {
@@ -45,63 +44,36 @@
45
44
  }
46
45
 
47
46
  [data-fs-self-profile-summary-person-actions] {
48
- display: flex;
49
- justify-content: space-between;
50
- padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
47
+ @import "@faststore/ui/src/components/atoms/Button/styles.scss";
51
48
 
52
- [data-fs-self-profile-summary-person-image] {
53
- width: var(--fs-spacing-6);
54
- height: var(--fs-spacing-6);
55
- border-radius: var(--fs-border-radius-pill);
56
- background-color: #cbe9ff;
57
- display: flex;
58
- align-items: center;
59
- justify-content: center;
60
- overflow: hidden;
61
- color: var(--fs-border-color-active);
62
- margin-right: var(--fs-spacing-3);
63
- }
49
+ display: grid;
50
+ align-items: center;
51
+ grid-template-columns: minmax(15.25rem, 1fr) auto;
52
+ gap: var(--fs-bp-gap-2);
53
+ padding: var(--fs-bp-padding-5) var(--fs-bp-padding-2) var(--fs-bp-padding-3) var(--fs-bp-padding-5);
64
54
 
65
55
  [data-fs-self-profile-summary-person-data] {
66
- display: flex;
67
- align-items: flex-start;
68
- flex-direction: column;
69
- justify-content: center;
70
- gap: var(--fs-spacing-0);
71
- flex: 1;
72
- font-size: var(--fs-text-size-legend);
73
- margin-right: var(--fs-spacing-0);
56
+ h2, p {
57
+ overflow: hidden;
58
+ white-space: nowrap;
59
+ text-overflow: ellipsis;
60
+ display: block;
61
+ }
74
62
 
75
63
  h2 {
76
- color: var(--fs-color-text);
77
- font-weight: 600;
64
+ @include text-style('emphasis');
65
+ color: var(--fs-bp-color-black);
78
66
  }
79
67
 
80
- h3 {
81
- color: var(--fs-color-text-light);
82
- font-weight: 500;
68
+ p {
69
+ @include text-style('body');
70
+ color: var(--fs-bp-color-neutral-7)
83
71
  }
84
72
  }
85
73
 
86
74
  [data-fs-self-profile-summary-logout-button] {
87
- cursor: pointer;
88
- color: #d31a15;
89
- font-weight: var(--fs-text-weight-semibold);
90
- font-size: var(--fs-text-size-1);
91
-
92
- [data-fs-button-wrapper] {
93
- border-radius: var(--fs-border-radius-pill);
94
- color: var(--fs-color-danger-text);
95
- border: var(--fs-border-width) solid var(--fs-border-color-light);
96
- padding: calc(var(--fs-spacing-2) - var(--fs-spacing-0)) 1.375rem;
97
- }
98
-
99
- [data-fs-button-wrapper]:hover {
100
- background-color: #f5f5f5;
101
- }
102
-
103
- [data-fs-icon] {
104
- color: var(--fs-color-danger-text);
105
- }
75
+ --fs-button-text-size: var(--fs-bp-text-body);
76
+ --fs-control-tap-size: var(--fs-bp-spacing-9);
77
+ flex: 0 0 auto;
106
78
  }
107
79
  }
package/src/features/shared/components/BasicDropdownMenu/BasicDropdownMenuTrigger.tsx CHANGED
@@ -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
  );
package/src/features/shared/components/BasicDropdownMenu/basic-dropdown-menu.scss CHANGED
@@ -2,19 +2,24 @@
2
2
  display: flex;
3
3
  align-items: center;
4
4
  justify-content: center;
5
- width: var(--fs-spacing-6);
6
- height: var(--fs-spacing-6);
5
+ width: var(--fs-bp-spacing-9);
6
+ height: var(--fs-bp-spacing-9);
7
7
  color: #1f1f1f;
8
8
  cursor: pointer;
9
- border-radius: var(--fs-border-radius-pill);
9
+ border-radius: var(--fs-bp-border-radius-full);
10
10
 
11
11
  &:hover {
12
- background-color: #f5f5f5;
12
+ background-color: var(--fs-bp-color-transparent-0);
13
+ }
14
+
15
+ &:active, &[aria-expanded="true"] {
16
+ background-color: var(--fs-bp-color-transparent-1);
13
17
  }
14
18
  }
15
19
 
16
20
  [data-fs-dropdown-menu] {
17
21
  &[data-fs-bp-basic-dropdown-menu] {
22
+ --fs-dropdown-menu-box-shadow: var(--fs-bp-elevation-dropdown);
18
23
  width: auto;
19
24
  background-color: #fff;
20
25
  padding: var(--fs-spacing-1) 0;
package/src/features/shared/components/HeaderInside/header-inside.scss CHANGED
@@ -43,9 +43,17 @@
43
43
  height: var(--fs-bp-spacing-9);
44
44
  }
45
45
 
46
+ &:hover {
47
+ background-color: #0561D0;
48
+ }
49
+
50
+ &:active, &[aria-expanded="true"] {
51
+ background-color: #035AC2;
52
+ }
53
+
46
54
  &:disabled {
47
- background-color: #f5f5f5;
48
- color: #adadad;
55
+ background-color: var(--fs-bp-color-neutral-1);
56
+ color: var(--fs-bp-color-neutral-5);
49
57
  cursor: not-allowed;
50
58
  }
51
59
  }
package/src/features/shared/layouts/BaseTabsLayout/Navbar.tsx CHANGED
@@ -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";
@@ -31,6 +26,7 @@ export type NavbarProps = {
31
26
  name: string;
32
27
  role?: string;
33
28
  id: string;
29
+ email?: string;
34
30
  };
35
31
  loading?: boolean;
36
32
  };
@@ -62,15 +58,13 @@ export const Navbar = ({
62
58
  (unitId) => unitId === userUnit?.id
63
59
  );
64
60
 
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
- }));
61
+ const breadcrumbList = orgUnitList.map((orgUnitId, index) => ({
62
+ unitId: orgUnitId,
63
+ item: buyerPortalRoutes.orgUnitDetails({ orgUnitId }),
64
+ name: orgUnit?.path.names.split("/")[index] ?? "",
65
+ position: index + 1,
66
+ enabled: index >= userUnitIndex,
67
+ }));
74
68
 
75
69
  return (
76
70
  <>
@@ -86,13 +80,19 @@ export const Navbar = ({
86
80
  />
87
81
  </div>
88
82
  {loading ? (
89
- <Skeleton size={{ width: "22rem", height: "2.5rem" }} />
83
+ <Skeleton
84
+ data-fs-bp-nav-breadcrumb-skeleton
85
+ size={{ width: "22rem", height: "2.5rem" }}
86
+ />
90
87
  ) : (
91
88
  <OrgUnitBreadcrumb items={breadcrumbList} maxItems={1} hasDropdown />
92
89
  )}
93
-
94
90
  <div data-fs-bp-nav-menu-actions>
95
- <Link href="/" data-fs-bp-nav-menu-start-shopping-link>
91
+ <Link
92
+ href="/"
93
+ target="_blank"
94
+ data-fs-bp-nav-menu-start-shopping-link
95
+ >
96
96
  Start shopping
97
97
  </Link>
98
98
 
@@ -102,29 +102,17 @@ export const Navbar = ({
102
102
  aria-label={"open about menu"}
103
103
  onClick={openAboutMenu}
104
104
  />
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
- )}
105
+ <Dropdown>
106
+ <BasicDropdownMenu.Trigger iconSize={20} iconName="AccountCircle" />
107
+ <DropdownMenu align="right" data-fs-bp-nav-menu>
108
+ <ProfileSummary
109
+ data-fs-bp-nav-menu-profile-summary
110
+ onLogoutClick={doLogout}
111
+ orgName={orgUnit?.name ?? ""}
112
+ person={person}
113
+ />
114
+ </DropdownMenu>
115
+ </Dropdown>
128
116
  </div>
129
117
  </nav>
130
118
  {isOpenSidebarMenuDrawerOpen && (
package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss CHANGED
@@ -1,32 +1,34 @@
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] {
24
26
  [data-fs-bp-breadcrumb-current],
25
27
  [data-fs-bp-breadcrumb-dropdown-trigger] {
26
- font-size: var(--fs-text-size-2);
28
+ font-size: var(--fs-bp-text-body);
27
29
 
28
- @include media("<=phonemid") {
29
- font-size: var(--fs-text-size-1);
30
+ @include media(">=phonemid") {
31
+ font-size: var(--fs-bp-text-size-base);
30
32
  }
31
33
  }
32
34
  }
@@ -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
  }
package/src/features/shared/utils/constants.ts CHANGED
@@ -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.32";
package/src/features/users/layouts/UserDetailsLayout/user-details-layout.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import "../../components/UserDropdownMenu/user-dropdown-menu.scss";
6
6
 
7
7
  [data-fs-dropdown-menu][data-fs-users-dropdown-menu] {
8
+ --fs-dropdown-menu-box-shadow: var(--fs-bp-elevation-dropdown);
8
9
  max-height: 21.25rem;
9
10
  overflow-y: scroll;
10
11
  width: 15rem;
package/src/themes/index.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import "../features/profile/components/ProfileSummary/profile-summary.scss";
2
1
  @import "./layouts";
2
+ @import "../features/profile/components/ProfileSummary/profile-summary.scss";
3
3
 
4
4
  // ----------------------------------------------------------
5
5
  // GLOBAL TOKENS
@@ -50,8 +50,10 @@
50
50
  }
51
51
 
52
52
  [data-fs-dropdown-menu] {
53
+ --fs-dropdown-menu-box-shadow: var(--fs-bp-elevation-dropdown);
53
54
  z-index: 99999;
54
55
  width: 12.5rem;
56
+
55
57
  [data-fs-dropdown-item] {
56
58
  --fs-dropdown-item-color: black !important;
57
59
 
package/src/themes/tokens.scss CHANGED
@@ -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;
@@ -167,4 +162,14 @@
167
162
  --fs-bp-gap-14: var(--fs-bp-spacing-14);
168
163
  --fs-bp-gap-15: var(--fs-bp-spacing-15);
169
164
  --fs-bp-gap-16: var(--fs-bp-spacing-16);
165
+
166
+ // Elevation (dropshadow)
167
+ --fs-bp-elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0);;
168
+ --fs-bp-elevation-1: 0px 4px 5px -1px rgba(0, 0, 0, 0.1);
169
+ --fs-bp-elevation-2: 0px 8px 8px -3px rgba(0, 0, 0, 0.1);
170
+ --fs-bp-elevation-3: 0px 9px 17px 2px rgba(0, 0, 0, 0.1);
171
+ --fs-bp-elevation-4: 0px 9px 26px 1px rgba(0, 0, 0, 0.1);
172
+
173
+ // Elevation - semantic
174
+ --fs-bp-elevation-dropdown: var(--fs-bp-elevation-3);
170
175
  }