@vtex/faststore-plugin-buyer-portal 1.3.29 → 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.
Files changed (18) hide show
  1. package/CHANGELOG.md +19 -1
  2. package/package.json +1 -1
  3. package/src/features/org-units/components/OrgUnitBreadcrumb/OrgUnitBreadcrumbLink.tsx +3 -2
  4. package/src/features/org-units/components/OrgUnitBreadcrumb/org-unit-breadcrumb.scss +4 -5
  5. package/src/features/org-units/components/OrgUnitDetailsNavbar/OrgUnitDetailsNavbar.tsx +18 -31
  6. package/src/features/org-units/components/OrgUnitDetailsNavbar/org-unit-details-navbar.scss +34 -40
  7. package/src/features/org-units/layouts/OrgUnitDetailsLayout/OrgUnitDetailsLayout.tsx +1 -0
  8. package/src/features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss +100 -75
  9. package/src/features/shared/components/BasicCard/BasicCard.tsx +2 -2
  10. package/src/features/shared/components/BasicDropdownMenu/BasicDropdownMenuTrigger.tsx +3 -1
  11. package/src/features/shared/components/Card/card.scss +5 -7
  12. package/src/features/shared/components/HeaderInside/header-inside.scss +16 -6
  13. package/src/features/shared/components/VerticalNav/vertical-nav.scss +23 -17
  14. package/src/features/shared/layouts/BaseTabsLayout/Navbar.tsx +29 -42
  15. package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss +40 -33
  16. package/src/features/shared/utils/constants.ts +1 -1
  17. package/src/themes/tokens.scss +4 -8
  18. package/src/themes/colors.scss +0 -10
package/CHANGELOG.md CHANGED
@@ -7,10 +7,26 @@ 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
+
16
+ ## [1.3.30] - 2025-11-25
17
+
18
+ ### Changed
19
+
20
+ - Replace faststore tokens in Org Unit Details page with our tokens and mixins
21
+
10
22
  ## [1.3.29] - 2025-11-25
11
23
 
12
24
  ### Added
13
25
 
26
+ - Remove faststore tokens from Org Unit Details page to use our tokens and mixins
27
+
28
+ ### Added
29
+
14
30
  - Create tokens file with variables according with design system definition
15
31
  - Create typography mixins
16
32
 
@@ -281,7 +297,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
281
297
  - Add CHANGELOG file
282
298
  - Add README file
283
299
 
284
- [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.29...HEAD
300
+ [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.31...HEAD
285
301
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
286
302
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
287
303
  [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -296,6 +312,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
296
312
 
297
313
  # <<<<<<< HEAD
298
314
 
315
+ [1.3.31]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.30...v1.3.31
316
+ [1.3.30]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.29...v1.3.30
299
317
  [1.3.29]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.28...v1.3.29
300
318
  [1.3.28]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.27...v1.3.28
301
319
  [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.31",
4
4
  "description": "A plugin for faststore with buyer portal",
5
5
  "main": "index.js",
6
6
  "scripts": {
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
@@ -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;
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";
@@ -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
package/src/features/org-units/components/OrgUnitDetailsNavbar/org-unit-details-navbar.scss CHANGED
@@ -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);
package/src/features/org-units/layouts/OrgUnitDetailsLayout/OrgUnitDetailsLayout.tsx CHANGED
@@ -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
@@ -12,114 +12,139 @@
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;
36
+ @include media(">=tablet") {
37
+ margin: var(--fs-bp-margin-0);
51
38
  }
52
39
 
53
- [data-fs-header-inside-button] {
54
- @include media("<tablet") {
55
- display: none;
56
- }
40
+ [data-fs-org-units-details-header-skeleton] {
41
+ max-width: 40rem;
57
42
  }
58
43
  }
59
44
 
60
45
  [data-fs-org-units-details-grid] {
61
46
  display: grid;
62
47
  flex: 1;
63
- gap: var(--fs-spacing-3);
64
- grid-template-columns: repeat(2, 1fr);
65
- grid-auto-rows: 1fr;
48
+ grid-template-columns: 1fr;
49
+ grid-auto-rows: auto;
50
+ gap: var(--fs-bp-gap-5);
66
51
 
67
- @include media("<notebook") {
68
- grid-template-columns: 1fr;
69
- grid-auto-rows: auto;
52
+ @include media(">=tablet") {
53
+ grid-template-columns: repeat(2, 1fr);
54
+ grid-auto-rows: 1fr;
70
55
  }
71
56
  }
72
57
 
73
- [data-fs-bp-basic-card] {
74
- [data-fs-bp-letter-highlight] {
75
- margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
58
+ [data-fs-bp-contracts-settings-card],
59
+ [data-fs-bp-contracts-list-card] {
60
+ grid-row: 1 / span 2;
61
+ }
76
62
 
77
- @include media("<tablet") {
78
- width: var(--fs-spacing-6);
79
- height: var(--fs-spacing-6);
80
- margin-left: 0;
63
+ [data-fs-bp-contracts-list-card] {
64
+ [data-fs-card-body] {
65
+ max-height: 60vh;
66
+ overflow-y: auto;
67
+ }
68
+ }
69
+
70
+ [data-fs-card] {
71
+ border-radius: var(fs-bp-border-radius-3);
72
+
73
+ [data-fs-card-body] {
74
+ padding: var(--fs-bp-margin-4) var(--fs-bp-margin-0) var(--fs-bp-margin-5);
75
+
76
+ @include media('>=tablet') {
77
+ padding: var(--fs-bp-margin-7) var(--fs-bp-margin-3) var(--fs-bp-margin-8);
81
78
  }
82
79
  }
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
- }
80
+
81
+ [data-fs-card-footer] {
82
+ padding: var(--fs-bp-padding-5);
83
+
84
+ @include media('>=tablet') {
85
+ padding-left: var(--fs-bp-padding-8);
86
+ padding-right: var(--fs-bp-padding-8);
87
+ }
88
+
89
+ [data-fs-card-footer-link] {
90
+ color: var(--fs-bp-color-brand);
91
+ @include text-style('action');
92
+
93
+ @include media('>=tablet') {
94
+ @include text-style('emphasis');
90
95
  }
91
96
  }
97
+ }
92
98
 
93
- [data-fs-vertical-nav-menu-list] {
94
- @include media("<tablet") {
95
- margin-top: var(--fs-spacing-1);
99
+ &[data-fs-bp-contracts-settings-card] {
100
+ [data-fs-bp-letter-highlight] {
101
+ @include text-style('body');
102
+ margin-left: var(--fs-bp-margin-5);
103
+ margin-right: var(--fs-bp-margin-2);
104
+ width: var(--fs-bp-spacing-9);
105
+ height: var(--fs-bp-spacing-9);
106
+
107
+ @include media('>=tablet') {
108
+ @include text-style('display-6');
109
+ margin-bottom: var(--fs-bp-margin-3);
110
+ width: var(--fs-bp-spacing-12);
111
+ height: var(--fs-bp-spacing-12);
96
112
  }
113
+ }
114
+
115
+ [data-fs-card-body] {
116
+ padding-top: var(--fs-bp-padding-5);
97
117
 
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
- }
118
+ @include media ('>=tablet') {
119
+ padding-top: var(--fs-bp-padding-7);
109
120
  }
110
121
  }
111
122
  }
112
123
  }
113
124
 
114
- [data-fs-bp-contracts-settings-card],
115
- [data-fs-bp-contracts-list-card] {
116
- grid-row: 1 / span 2;
117
- }
125
+ [data-fs-vertical-nav-menu] {
126
+ [data-fs-vertical-nav-menu-list] {
127
+ @include media('>=tablet') {
128
+ margin-top: var(--fs-bp-margin-7);
129
+ }
118
130
 
119
- [data-fs-bp-contracts-list-card] {
120
- [data-fs-card-body] {
121
- max-height: 60vh;
122
- overflow-y: auto;
131
+ [data-fs-vertical-nav-menu-link] {
132
+ border-radius: var(--fs-bp-border-radius-0);
133
+
134
+ @include media('>=tablet') {
135
+ border-radius: var(--fs-bp-border-radius-full);
136
+ }
137
+ }
138
+ }
139
+
140
+ [data-fs-vertical-nav-menu-org-wrapper] {
141
+ [data-fs-vertical-nav-menu-org-name] {
142
+ margin-top: var(--fs-bp-margin-0);
143
+ }
123
144
  }
124
145
  }
146
+
147
+ [data-fs-bp-org-unit-details-dropdown] {
148
+ position: fixed;
149
+ }
125
150
  }
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/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/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/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";
@@ -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 && (
package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss CHANGED
@@ -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
  }
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.31";
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;
@@ -128,6 +123,7 @@
128
123
  --fs-bp-margin-14: var(--fs-bp-spacing-14);
129
124
  --fs-bp-margin-15: var(--fs-bp-spacing-15);
130
125
  --fs-bp-margin-16: var(--fs-bp-spacing-16);
126
+ --fs-bp-margin-auto: auto;
131
127
 
132
128
  // Paddings
133
129
  --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
-