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

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 (10) hide show
  1. package/CHANGELOG.md +8 -1
  2. package/package.json +1 -1
  3. package/src/features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss +98 -77
  4. package/src/features/shared/components/BasicCard/BasicCard.tsx +2 -2
  5. package/src/features/shared/components/Card/card.scss +5 -7
  6. package/src/features/shared/components/HeaderInside/header-inside.scss +16 -6
  7. package/src/features/shared/components/VerticalNav/vertical-nav.scss +23 -17
  8. package/src/features/shared/utils/constants.ts +1 -1
  9. package/src/themes/tokens.scss +1 -0
  10. package/src/themes/colors.scss +0 -10
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.30] - 2025-11-25
11
+
12
+ ### Changed
13
+
14
+ - Replace faststore tokens in Org Unit Details page with our tokens and mixins
15
+
10
16
  ## [1.3.29] - 2025-11-25
11
17
 
12
18
  ### Added
@@ -281,7 +287,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
281
287
  - Add CHANGELOG file
282
288
  - Add README file
283
289
 
284
- [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.29...HEAD
290
+ [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.30...HEAD
285
291
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
286
292
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
287
293
  [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -296,6 +302,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
296
302
 
297
303
  # <<<<<<< HEAD
298
304
 
305
+ [1.3.30]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.29...v1.3.30
299
306
  [1.3.29]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.28...v1.3.29
300
307
  [1.3.28]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.27...v1.3.28
301
308
  [1.3.27]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.26...v1.3.27
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vtex/faststore-plugin-buyer-portal",
3
- "version": "1.3.29",
3
+ "version": "1.3.30",
4
4
  "description": "A plugin for faststore with buyer portal",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss CHANGED
@@ -12,114 +12,135 @@
12
12
  @import "../../../shared/components/LetterHighlight/letter-highlight.scss";
13
13
  @import "../../../shared/components/HeaderInside/header-inside.scss";
14
14
 
15
- $fs-spacing-3-0: calc(
16
- var(--fs-spacing-3) + var(--fs-spacing-0)
17
- ); // 1.25rem, 20px
18
- $fs-spacing-3-2: calc(
19
- var(--fs-spacing-3) + var(--fs-spacing-2)
20
- ); // 1.75rem, 28px
21
- $fs-spacing-7-2: calc(
22
- var(--fs-spacing-7) + var(--fs-spacing-2)
23
- ); // 3.75rem, 52px
24
- $fs-spacing-9-0: calc(
25
- var(--fs-spacing-9) + var(--fs-spacing-0)
26
- ); // 4.25rem, 68px
27
- $fs-spacing-13-4: calc(
28
- var(--fs-spacing-13) + var(--fs-spacing-4)
29
- ); // 7.5rem, 120px
30
-
31
- padding: 0 $fs-spacing-7-2 $fs-spacing-13-4 $fs-spacing-7-2;
32
-
33
- @include media("<notebook") {
34
- padding: 0 var(--fs-spacing-7) $fs-spacing-13-4;
35
- }
15
+ width: 100%;
16
+ max-width: 90rem; // 1440px;
17
+
18
+ margin: var(--fs-bp-margin-0) var(--fs-bp-margin-auto);
19
+ padding: var(--fs-bp-margin-0) var(--fs-bp-padding-5);
20
+ padding-bottom: var(--fs-bp-padding-12);
36
21
 
37
- @include media("<tablet") {
38
- padding: 0 $fs-spacing-3-0 $fs-spacing-7-2;
22
+ @include media('>=tablet') {
23
+ padding-left: var(--fs-bp-padding-10);
24
+ padding-right: var(--fs-bp-padding-10);
39
25
  }
40
26
 
41
- min-height: calc(100vh - $fs-spacing-9-0);
42
- display: flex;
43
- flex-direction: column;
27
+ @include media('>=notebook') {
28
+ padding-left: var(--fs-bp-padding-12);
29
+ padding-right: var(--fs-bp-padding-12);
30
+ }
44
31
 
45
32
  [data-fs-bp-header-inside] {
46
- margin: 0;
33
+ margin: var(--fs-bp-margin-4) var(--fs-bp-margin-0)'';
47
34
  height: 4.5rem;
48
35
 
49
- @include media("<tablet") {
50
- margin: var(--fs-spacing-3) 0;
51
- }
52
-
53
- [data-fs-header-inside-button] {
54
- @include media("<tablet") {
55
- display: none;
56
- }
36
+ @include media(">=tablet") {
37
+ margin: var(--fs-bp-margin-0);
57
38
  }
58
39
  }
59
40
 
60
41
  [data-fs-org-units-details-grid] {
61
42
  display: grid;
62
43
  flex: 1;
63
- gap: var(--fs-spacing-3);
64
- grid-template-columns: repeat(2, 1fr);
65
- grid-auto-rows: 1fr;
44
+ grid-template-columns: 1fr;
45
+ grid-auto-rows: auto;
46
+ gap: var(--fs-bp-gap-5);
47
+
48
+ @include media(">=tablet") {
49
+ grid-template-columns: repeat(2, 1fr);
50
+ grid-auto-rows: 1fr;
51
+ }
52
+ }
53
+
54
+ [data-fs-bp-contracts-settings-card],
55
+ [data-fs-bp-contracts-list-card] {
56
+ grid-row: 1 / span 2;
57
+ }
66
58
 
67
- @include media("<notebook") {
68
- grid-template-columns: 1fr;
69
- grid-auto-rows: auto;
59
+ [data-fs-bp-contracts-list-card] {
60
+ [data-fs-card-body] {
61
+ max-height: 60vh;
62
+ overflow-y: auto;
70
63
  }
71
64
  }
72
65
 
73
- [data-fs-bp-basic-card] {
74
- [data-fs-bp-letter-highlight] {
75
- margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
66
+ [data-fs-card] {
67
+ border-radius: var(fs-bp-border-radius-3);
68
+
69
+ [data-fs-card-body] {
70
+ padding: var(--fs-bp-margin-4) var(--fs-bp-margin-0) var(--fs-bp-margin-5);
76
71
 
77
- @include media("<tablet") {
78
- width: var(--fs-spacing-6);
79
- height: var(--fs-spacing-6);
80
- margin-left: 0;
72
+ @include media('>=tablet') {
73
+ padding: var(--fs-bp-margin-7) var(--fs-bp-margin-3) var(--fs-bp-margin-8);
81
74
  }
82
75
  }
83
- [data-fs-vertical-nav-menu] {
84
- [data-fs-vertical-nav-menu-org-wrapper] {
85
- [data-fs-vertical-nav-menu-org-name] {
86
- @include media("<tablet") {
87
- margin-left: 0;
88
- margin-top: var(--fs-spacing-1);
89
- }
76
+
77
+ [data-fs-card-footer] {
78
+ padding: var(--fs-bp-padding-5);
79
+
80
+ @include media('>=tablet') {
81
+ padding-left: var(--fs-bp-padding-8);
82
+ padding-right: var(--fs-bp-padding-8);
83
+ }
84
+
85
+ [data-fs-card-footer-link] {
86
+ color: var(--fs-bp-color-brand);
87
+ @include text-style('action');
88
+
89
+ @include media('>=tablet') {
90
+ @include text-style('emphasis');
90
91
  }
91
92
  }
93
+ }
92
94
 
93
- [data-fs-vertical-nav-menu-list] {
94
- @include media("<tablet") {
95
- margin-top: var(--fs-spacing-1);
95
+ &[data-fs-bp-contracts-settings-card] {
96
+ [data-fs-bp-letter-highlight] {
97
+ @include text-style('body');
98
+ margin-left: var(--fs-bp-margin-5);
99
+ margin-right: var(--fs-bp-margin-2);
100
+ width: var(--fs-bp-spacing-9);
101
+ height: var(--fs-bp-spacing-9);
102
+
103
+ @include media('>=tablet') {
104
+ @include text-style('display-6');
105
+ margin-bottom: var(--fs-bp-margin-3);
106
+ width: var(--fs-bp-spacing-12);
107
+ height: var(--fs-bp-spacing-12);
96
108
  }
109
+ }
110
+
111
+ [data-fs-card-body] {
112
+ padding-top: var(--fs-bp-padding-5);
97
113
 
98
- @include media("<tablet") {
99
- [data-fs-vertical-nav-menu-link] {
100
- position: relative;
101
- padding: 0;
102
- height: auto;
103
- line-height: var(--fs-spacing-6);
104
-
105
- &:hover {
106
- border-radius: 0;
107
- }
108
- }
114
+ @include media ('>=tablet') {
115
+ padding-top: var(--fs-bp-padding-7);
109
116
  }
110
117
  }
111
118
  }
112
119
  }
113
120
 
114
- [data-fs-bp-contracts-settings-card],
115
- [data-fs-bp-contracts-list-card] {
116
- grid-row: 1 / span 2;
117
- }
121
+ [data-fs-vertical-nav-menu] {
122
+ [data-fs-vertical-nav-menu-list] {
123
+ @include media('>=tablet') {
124
+ margin-top: var(--fs-bp-margin-7);
125
+ }
118
126
 
119
- [data-fs-bp-contracts-list-card] {
120
- [data-fs-card-body] {
121
- max-height: 60vh;
122
- overflow-y: auto;
127
+ [data-fs-vertical-nav-menu-link] {
128
+ border-radius: var(--fs-bp-border-radius-0);
129
+
130
+ @include media('>=tablet') {
131
+ border-radius: var(--fs-bp-border-radius-full);
132
+ }
133
+ }
134
+ }
135
+
136
+ [data-fs-vertical-nav-menu-org-wrapper] {
137
+ [data-fs-vertical-nav-menu-org-name] {
138
+ margin-top: var(--fs-bp-margin-0);
139
+ }
123
140
  }
124
141
  }
142
+
143
+ [data-fs-bp-org-unit-details-dropdown] {
144
+ position: fixed;
145
+ }
125
146
  }
package/src/features/shared/components/BasicCard/BasicCard.tsx CHANGED
@@ -69,8 +69,8 @@ export const BasicCard = ({
69
69
  <Icon
70
70
  name="CaretRight"
71
71
  data-fs-card-footer-icon
72
- height={12}
73
- width={12}
72
+ height={24}
73
+ width={24}
74
74
  />
75
75
  }
76
76
  aria-label={footerMessage}
package/src/features/shared/components/Card/card.scss CHANGED
@@ -218,16 +218,14 @@
218
218
  color: #0366dd;
219
219
  text-decoration: none;
220
220
  }
221
- [data-fs-button-wrapper] {
222
- height: var(--fs-spacing-6) !important;
223
- width: var(--fs-spacing-6) !important;
224
- }
225
221
  [data-fs-icon-button] {
226
222
  display: inline-flex;
227
- height: var(--fs-spacing-6) !important;
228
- min-height: var(--fs-spacing-6) !important;
229
- width: var(--fs-spacing-6) !important;
230
223
  overflow: hidden;
224
+ padding: var(--fs-bp-padding-0);
225
+
226
+ [data-fs-button-icon] {
227
+ display: inline-flex;
228
+ }
231
229
  }
232
230
 
233
231
  [data-fs-card-footer-icon] {
package/src/features/shared/components/HeaderInside/header-inside.scss CHANGED
@@ -22,16 +22,26 @@
22
22
  }
23
23
 
24
24
  [data-fs-header-inside-button] {
25
- display: flex;
25
+ display: inline-flex;
26
26
  align-items: center;
27
27
  justify-content: center;
28
- width: var(--fs-spacing-6);
29
- height: var(--fs-spacing-6);
30
- border-radius: var(--fs-border-radius-pill);
31
- background-color: #0366dd;
28
+ width: var(--fs-bp-spacing-10);
29
+ height: var(--fs-bp-spacing-10);
30
+ border-radius: var(--fs-bp-border-radius-full);
32
31
  color: #ffffff;
33
- margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
34
32
  cursor: pointer;
33
+ position: fixed;
34
+ bottom: var(--fs-bp-spacing-5);
35
+ right: var(--fs-bp-spacing-5);
36
+ background-color: var(--fs-bp-color-brand);
37
+ color: var(--fs-bp-color-white);
38
+
39
+ @include media ('>=tablet') {
40
+ position: static;
41
+ margin-left: var(--fs-bp-spacing-5);
42
+ width: var(--fs-bp-spacing-9);
43
+ height: var(--fs-bp-spacing-9);
44
+ }
35
45
 
36
46
  &:disabled {
37
47
  background-color: #f5f5f5;
package/src/features/shared/components/VerticalNav/vertical-nav.scss CHANGED
@@ -9,17 +9,19 @@
9
9
  justify-content: space-between;
10
10
 
11
11
  [data-fs-vertical-nav-menu-org-name] {
12
- font-weight: var(--fs-text-weight-semibold);
13
- font-size: var(--fs-text-size-3);
14
- line-height: var(--fs-text-size-5);
15
- color: #000000;
16
- margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
17
- margin-top: var(--fs-spacing-1);
12
+ margin-left: var(--fs-bp-margin-5);
13
+ @include text-style('body-big');
14
+ color: var(--fs-bp-color-neutral-9);
15
+ font-weight: var(--fs-bp-weight-semibold);
16
+
17
+ @include media('>=tablet') {
18
+ @include text-style('display-6');
19
+ }
18
20
  }
19
21
  }
20
22
 
21
23
  [data-fs-vertical-nav-menu-list] {
22
- margin-top: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
24
+ margin-top: var(--fs-bp-margin-3);
23
25
  display: flex;
24
26
  flex-direction: column;
25
27
 
@@ -28,27 +30,31 @@
28
30
  }
29
31
 
30
32
  [data-fs-vertical-nav-menu-link] {
33
+ padding: var(--fs-bp-padding-2) var(--fs-bp-padding-5);
34
+ color: var(--fs-bp-color-neutral-9);
35
+ border-radius: var(--fs-bp-border-radius-full);
36
+ @include text-style('emphasis');
31
37
  display: flex;
32
- text-decoration: none;
33
- color: #000000;
34
- padding: var(--fs-spacing-2)
35
- calc(var(--fs-spacing-3) + var(--fs-spacing-0));
36
- width: 21.25rem;
37
- height: var(--fs-spacing-6);
38
- border-radius: 6.25rem;
38
+ align-items: center;
39
+ min-height: var(--fs-bp-spacing-9);
39
40
  width: 100%;
41
+ text-decoration: none;
40
42
 
41
43
  &:hover {
42
- background-color: #f5f5f5;
44
+ background-color: var(--fs-bp-color-neutral-1);
45
+ }
46
+
47
+ @include media('>=tablet') {
48
+ color: var(--fs-bp-color-neutral-8);
43
49
  }
44
50
  }
45
51
 
46
52
  [data-fs-vertical-nav-menu-link-is-active="true"] {
47
- background-color: #f5f5f5;
53
+ background-color: var(--fs-bp-color-neutral-1);
48
54
  }
49
55
 
50
56
  &:first-child {
51
- margin-top: 0;
57
+ margin-top: var(--fs-bp-margin-0);
52
58
  }
53
59
  }
54
60
  }
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.29";
16
+ export const CURRENT_VERSION = "1.3.30";
package/src/themes/tokens.scss CHANGED
@@ -128,6 +128,7 @@
128
128
  --fs-bp-margin-14: var(--fs-bp-spacing-14);
129
129
  --fs-bp-margin-15: var(--fs-bp-spacing-15);
130
130
  --fs-bp-margin-16: var(--fs-bp-spacing-16);
131
+ --fs-bp-margin-auto: auto;
131
132
 
132
133
  // Paddings
133
134
  --fs-bp-padding-0: var(--fs-bp-spacing-0);
package/src/themes/colors.scss DELETED
@@ -1,10 +0,0 @@
1
- // Mixin para aplicar cor de texto
2
- @mixin bp-text-color($color-name: 'neutral-8') {
3
- color: var(--fs-bp-color-#{$color-name});
4
- }
5
-
6
- // Mixin para aplicar cor de fundo
7
- @mixin bp-bg-color($color-name: 'neutral-0') {
8
- background-color: var(--fs-bp-color-#{$color-name});
9
- }
10
-