@vtex/faststore-plugin-buyer-portal 1.3.31 → 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 (18) hide show
  1. package/CHANGELOG.md +14 -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/org-unit-breadcrumb.scss +18 -18
  6. package/src/features/org-units/components/OrgUnitDetailsNavbar/OrgUnitDetailsNavbar.tsx +1 -1
  7. package/src/features/org-units/components/OrgUnitDetailsNavbar/org-unit-details-navbar.scss +4 -8
  8. package/src/features/org-units/layouts/OrgUnitDetailsLayout/OrgUnitDetailsLayout.tsx +1 -1
  9. package/src/features/profile/components/ProfileSummary/ProfileSummary.tsx +4 -7
  10. package/src/features/profile/components/ProfileSummary/profile-summary.scss +26 -54
  11. package/src/features/shared/components/BasicDropdownMenu/basic-dropdown-menu.scss +9 -4
  12. package/src/features/shared/components/HeaderInside/header-inside.scss +10 -2
  13. package/src/features/shared/layouts/BaseTabsLayout/Navbar.tsx +1 -0
  14. package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss +3 -3
  15. package/src/features/shared/utils/constants.ts +1 -1
  16. package/src/features/users/layouts/UserDetailsLayout/user-details-layout.scss +1 -0
  17. package/src/themes/index.scss +3 -1
  18. package/src/themes/tokens.scss +10 -0
package/CHANGELOG.md CHANGED
@@ -7,6 +7,14 @@ 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
+
10
18
  ## [1.3.31] - 2025-11-25
11
19
 
12
20
  ### Changed
@@ -27,6 +35,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
27
35
 
28
36
  ### Added
29
37
 
38
+ - Remove faststore tokens from Org Unit Details page to use our tokens and mixins
39
+
40
+ ### Added
41
+
30
42
  - Create tokens file with variables according with design system definition
31
43
  - Create typography mixins
32
44
 
@@ -297,7 +309,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
297
309
  - Add CHANGELOG file
298
310
  - Add README file
299
311
 
300
- [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.31...HEAD
312
+ [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.32...HEAD
301
313
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
302
314
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
303
315
  [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -312,6 +324,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
312
324
 
313
325
  # <<<<<<< HEAD
314
326
 
327
+ [1.3.32]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.31...v1.3.32
315
328
  [1.3.31]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.30...v1.3.31
316
329
  [1.3.30]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.29...v1.3.30
317
330
  [1.3.29]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.28...v1.3.29
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vtex/faststore-plugin-buyer-portal",
3
- "version": "1.3.31",
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/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;
@@ -41,7 +39,7 @@
41
39
  cursor: inherit;
42
40
 
43
41
  &:not(.disable-link) {
44
- color: #000;
42
+ color: var(--fs-bp-color-black);
45
43
  }
46
44
  }
47
45
 
@@ -51,24 +49,26 @@
51
49
  }
52
50
 
53
51
  [data-fs-bp-breadcrumb-divider] {
54
- color: #858585;
52
+ color: var(--fs-bp-color-neutral-6);
55
53
  flex: 0 0 auto;
56
54
  }
57
55
 
58
56
  [data-fs-bp-breadcrumb-dropdown-trigger] {
59
57
  display: inline-flex;
60
58
  align-items: center;
61
- font-size: var(--fs-text-size-4);
62
- line-height: var(--fs-text-size-6);
63
- font-weight: var(--fs-text-weight-semibold);
64
- color: #000;
59
+ @include text-style('display-5');
60
+ color: var(--fs-bp-color-black);
65
61
  cursor: pointer;
66
- padding: 0 var(--fs-spacing-0) 0 var(--fs-spacing-1);
67
- margin-left: calc(var(--fs-spacing-1) * -1);
68
- 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);
69
65
 
70
66
  &:hover {
71
- 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);
72
72
  }
73
73
  }
74
74
  }
package/src/features/org-units/components/OrgUnitDetailsNavbar/OrgUnitDetailsNavbar.tsx CHANGED
@@ -17,6 +17,7 @@ export type OrgUnitDetailsNavbarProps = {
17
17
  image?: string;
18
18
  name: string;
19
19
  role?: string;
20
+ email?: string;
20
21
  };
21
22
  loading?: boolean;
22
23
  };
@@ -63,7 +64,6 @@ export const OrgUnitDetailsNavbar = ({
63
64
  <BasicDropdownMenu.Trigger iconSize={20} iconName="AccountCircle" />
64
65
  <DropdownMenu align="right" data-fs-bp-org-unit-details-navbar-menu>
65
66
  <ProfileSummary
66
- data-fs-bp-org-unit-details-navbar-menu-profile-summary
67
67
  onLogoutClick={doLogout}
68
68
  orgName={orgName}
69
69
  person={person}
package/src/features/org-units/components/OrgUnitDetailsNavbar/org-unit-details-navbar.scss CHANGED
@@ -60,13 +60,9 @@
60
60
  }
61
61
  }
62
62
 
63
- [data-fs-bp-org-unit-details-navbar-menu] {
64
- --fs-profile-dropdown-menu-width: 22.5rem;
65
- width: auto;
66
-
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
67
  background-color: var(--fs-bp-color-white);
68
-
69
- [data-fs-bp-org-unit-details-navbar-menu-profile-summary] {
70
- min-width: var(--fs-profile-dropdown-menu-width);
71
- }
72
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
  />
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/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
@@ -26,6 +26,7 @@ export type NavbarProps = {
26
26
  name: string;
27
27
  role?: string;
28
28
  id: string;
29
+ email?: string;
29
30
  };
30
31
  loading?: boolean;
31
32
  };
package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss CHANGED
@@ -25,10 +25,10 @@
25
25
  [data-fs-bp-breadcrumb-nav] {
26
26
  [data-fs-bp-breadcrumb-current],
27
27
  [data-fs-bp-breadcrumb-dropdown-trigger] {
28
- font-size: var(--fs-text-size-2);
28
+ font-size: var(--fs-bp-text-body);
29
29
 
30
- @include media("<=phonemid") {
31
- font-size: var(--fs-text-size-1);
30
+ @include media(">=phonemid") {
31
+ font-size: var(--fs-bp-text-size-base);
32
32
  }
33
33
  }
34
34
  }
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.31";
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
@@ -162,4 +162,14 @@
162
162
  --fs-bp-gap-14: var(--fs-bp-spacing-14);
163
163
  --fs-bp-gap-15: var(--fs-bp-spacing-15);
164
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);
165
175
  }