@vtex/faststore-plugin-buyer-portal 1.3.6 → 1.3.8

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 +19 -1
  2. package/package.json +1 -1
  3. package/src/features/profile/layouts/ProfileLayout/profile-layout.scss +8 -5
  4. package/src/features/roles/layout/RoleDetailsLayout/RoleDetailsLayout.tsx +17 -36
  5. package/src/features/roles/layout/RoleDetailsLayout/role-details-layout.scss +40 -0
  6. package/src/features/roles/layout/RolesLayout/roles-layout.scss +8 -8
  7. package/src/features/shared/components/BasicDrawer/BasicDrawer.tsx +22 -19
  8. package/src/features/shared/components/BasicDrawer/basic-drawer.scss +44 -0
  9. package/src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/SidebarDrawer.tsx +1 -0
  10. package/src/features/shared/utils/constants.ts +1 -1
package/CHANGELOG.md CHANGED
@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [1.3.8] - 2025-10-17
11
+
12
+ ### Added
13
+
14
+ - Responsiviness to drawer animation
15
+
16
+ ## [1.3.7] - 2025-10-17
17
+
18
+ ### Added
19
+
20
+ - Responsiviness to Profile page
21
+
10
22
  ## [1.3.6] - 2025-10-17
11
23
 
12
24
  ### Changed
@@ -47,6 +59,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
47
59
 
48
60
  ### Added
49
61
 
62
+ - Responsiviness to Roles and Roles Details page
63
+
64
+ ### Added
50
65
  - Responsiviness adjustment to to Buying policies page
51
66
 
52
67
  ### Added
@@ -137,7 +152,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
137
152
  - Add CHANGELOG file
138
153
  - Add README file
139
154
 
140
- [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/1.3.6...HEAD
155
+ [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.8...HEAD
141
156
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
142
157
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
143
158
  [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -148,3 +163,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
148
163
  [1.3.5]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.5
149
164
 
150
165
  [1.3.6]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.6
166
+
167
+ [1.3.8]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.7...v1.3.8
168
+ [1.3.7]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vtex/faststore-plugin-buyer-portal",
3
- "version": "1.3.6",
3
+ "version": "1.3.8",
4
4
  "description": "A plugin for faststore with buyer portal",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/features/profile/layouts/ProfileLayout/profile-layout.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  font-weight: var(--fs-text-weight-semibold);
15
15
  size: var(--fs-spacing-3);
16
16
  line-height: var(--fs-spacing-4);
17
-
17
+ color: #000;
18
18
  display: flex;
19
19
  justify-content: space-between;
20
20
  padding: var(--fs-spacing-4) 0;
@@ -22,7 +22,7 @@
22
22
  }
23
23
 
24
24
  [data-fs-bp-profile-divider] {
25
- border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
25
+ border: calc(var(--fs-border-width) / 1) solid #e0e0e0;
26
26
  }
27
27
 
28
28
  [data-fs-button][data-fs-button-variant="primary"] [data-fs-button-wrapper] {
@@ -31,22 +31,25 @@
31
31
 
32
32
  [data-fs-bp-profile-details-row] {
33
33
  display: flex;
34
+ flex-direction: row;
34
35
  padding: 1.375rem 0;
35
- font-weight: var(--fs-text-weight-medium);
36
36
  size: var(--fs-text-size-1);
37
37
  line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
38
+ font-weight: var(--fs-text-weight-regular);
38
39
 
39
40
  [data-fs-bp-profile-details-row-label] {
40
41
  width: 12.5rem;
41
42
  color: #707070;
42
43
  font-size: var(--fs-text-size-1);
43
- font-weight: 500;
44
44
  }
45
45
 
46
46
  [data-fs-bp-profile-details-row-value] {
47
47
  color: #000;
48
48
  font-size: var(--fs-text-size-1);
49
- font-weight: 500;
49
+ }
50
+
51
+ @include media("<=tablet") {
52
+ flex-direction: column;
50
53
  }
51
54
  }
52
55
 
package/src/features/roles/layout/RoleDetailsLayout/RoleDetailsLayout.tsx CHANGED
@@ -21,7 +21,7 @@ export const RoleDetailsLayout = ({
21
21
  const { currentOrgUnit } = useBuyerPortal();
22
22
 
23
23
  const columns = getTableColumns({
24
- nameColumnLabel: "Permissions",
24
+ nameColumnLabel: "",
25
25
  nameColumnSize: "18rem",
26
26
  actionsLength: 1,
27
27
  extraColumns: [
@@ -34,10 +34,12 @@ export const RoleDetailsLayout = ({
34
34
  ],
35
35
  });
36
36
 
37
+ const count = roles.reduce((acc, item) => acc + (item.inRole ? 1 : 0), 0);
38
+
37
39
  return (
38
40
  <GlobalLayout>
39
41
  <OrgUnitTabsLayout pageName="Organization">
40
- <section data-fs-bp-roles-section>
42
+ <section data-fs-bp-roles-details-section>
41
43
  <HeaderInside
42
44
  title={roleName}
43
45
  backLink={buyerPortalRoutes.roles({
@@ -46,12 +48,20 @@ export const RoleDetailsLayout = ({
46
48
  />
47
49
 
48
50
  <div data-fs-role-details-page>
51
+ <div data-fs-role-header>
52
+ <span>Permissions</span>
53
+ <div data-fs-role-status>
54
+ <span data-fs-role-active>{count}</span>/
55
+ <span data-fs-role-not-active>{roles.length}</span>
56
+ </div>
57
+ </div>
49
58
  <Table layoutFixed>
50
59
  <Table.Head columns={columns} />
51
60
  <Table.Body>
52
61
  {roles.map((role) => (
53
62
  <Table.Row
54
63
  data-fs-bp-role-details-row
64
+ data-fs-bp-role-details-row-disabled={role.inRole}
55
65
  key={role.label}
56
66
  title={
57
67
  <>
@@ -80,46 +90,17 @@ export const RoleDetailsLayout = ({
80
90
  )
81
91
  }
82
92
  >
83
- <Table.Cell align="left" hideOnScreenSize="tablet">
93
+ <Table.Cell
94
+ align="left"
95
+ data-fs-bp-role-details-description
96
+ hideOnScreenSize="tablet"
97
+ >
84
98
  {role.description}
85
99
  </Table.Cell>
86
100
  </Table.Row>
87
101
  ))}
88
102
  </Table.Body>
89
103
  </Table>
90
- {/* <Table>
91
- <Table.Head columns={configTable} />
92
- <Table.Body>
93
- {roles.map((role) => (
94
- <Table.Row
95
- key={role.label}
96
- title={role.label}
97
- enabled={role.inRole}
98
- >
99
- <Table.Cell data-fs-bp-role-description>
100
- {role.description}
101
- </Table.Cell>
102
- <Table.Cell>
103
- {role.inRole ? (
104
- <Icon
105
- name="CheckCircle"
106
- width={20}
107
- height={20}
108
- data-fs-bp-check-icon
109
- />
110
- ) : (
111
- <Icon
112
- name="Block"
113
- width={20}
114
- height={20}
115
- data-fs-bp-block-icon
116
- />
117
- )}
118
- </Table.Cell>
119
- </Table.Row>
120
- ))}
121
- </Table.Body>
122
- </Table> */}
123
104
  </div>
124
105
  </section>
125
106
  </OrgUnitTabsLayout>
package/src/features/roles/layout/RoleDetailsLayout/role-details-layout.scss CHANGED
@@ -1,6 +1,46 @@
1
1
  [data-fs-role-details-page] {
2
2
  @import "../../../shared/components/Table/table.scss";
3
3
 
4
+ [data-fs-bp-table-head] {
5
+ @include media("<=tablet") {
6
+ border: none;
7
+ }
8
+
9
+ [data-fs-bp-table-head-column] {
10
+ padding: 0;
11
+ }
12
+ }
13
+
14
+ [data-fs-role-header] {
15
+ display: flex;
16
+ align-items: center;
17
+ justify-content: space-between;
18
+ margin-bottom: var(--fs-spacing-3);
19
+
20
+ @include media(">=tablet") {
21
+ margin-bottom: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
22
+ }
23
+
24
+ [data-fs-role-status] {
25
+ margin-right: var(--fs-spacing-1);
26
+ }
27
+ span:first-child {
28
+ color: #000000;
29
+ font-weight: var(--fs-text-weight-semibold);
30
+ }
31
+ [data-fs-role-not-active],
32
+ [data-fs-role-active] {
33
+ font-size: var(--fs-text-size-1);
34
+ font-weight: var(--fs-text-weight-semibold);
35
+ }
36
+ [data-fs-role-active] {
37
+ color: #000000;
38
+ }
39
+ [data-fs-role-not-active] {
40
+ color: #5c5c5c;
41
+ }
42
+ }
43
+
4
44
  [data-fs-bp-role-details-row] {
5
45
  [data-fs-bp-table-row-title-cell] {
6
46
  padding-left: var(--fs-spacing-0);
package/src/features/roles/layout/RolesLayout/roles-layout.scss CHANGED
@@ -1,13 +1,13 @@
1
1
  [data-fs-bp-roles-section] {
2
- @import "../../../shared/components/Table/table.scss";
2
+ @import "../../../shared/components/Table/table.scss";
3
3
 
4
- @import "../../../shared/components/HeaderInside/header-inside.scss";
4
+ @import "../../../shared/components/HeaderInside/header-inside.scss";
5
5
 
6
- @import "../../../shared/components/InternalSearch/internal-search.scss";
7
- @import "../../../shared/components/Tag/tag.scss";
8
- @import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
6
+ @import "../../../shared/components/InternalSearch/internal-search.scss";
7
+ @import "../../../shared/components/Tag/tag.scss";
8
+ @import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
9
9
 
10
- [data-fs-bp-table-row-icon] {
11
- color: #0366dd;
12
- }
10
+ [data-fs-bp-table-row-icon] {
11
+ color: #0366dd;
12
+ }
13
13
  }
package/src/features/shared/components/BasicDrawer/BasicDrawer.tsx CHANGED
@@ -1,41 +1,44 @@
1
- import { SlideOver } from "@faststore/ui";
1
+ import React from "react";
2
+
3
+ import { SlideOver, useFadeEffect } from "@faststore/ui";
4
+
5
+ import { DrawerProps } from "../../hooks";
2
6
 
3
7
  import { BasicDrawerBody } from "./BasicDrawerBody";
4
8
  import { BasicDrawerButton } from "./BasicDrawerButton";
5
9
  import { BasicDrawerFooter } from "./BasicDrawerFooter";
6
10
  import { BasicDrawerHeading } from "./BasicDrawerHeading";
7
11
 
8
- import type { DrawerProps } from "../../hooks/useDrawerProps";
9
-
10
12
  export type BasicDrawerProps = Omit<DrawerProps, "open"> & {
11
13
  children: React.ReactNode;
12
14
  id?: string;
15
+ isOpen: boolean;
16
+ onDismiss?: () => void;
13
17
  };
14
18
 
15
19
  export const BasicDrawer = ({
16
20
  isOpen,
17
- children,
21
+ onDismiss,
18
22
  id,
23
+ children,
19
24
  ...props
20
25
  }: BasicDrawerProps) => {
26
+ const { fadeOut } = useFadeEffect();
21
27
  return (
22
- <>
23
- {isOpen && (
24
- <SlideOver
25
- size="partial"
26
- direction="rightSide"
27
- isOpen={isOpen}
28
- data-fs-bp-basic-drawer
29
- id={id}
30
- {...props}
31
- >
32
- {children}
33
- </SlideOver>
34
- )}
35
- </>
28
+ <SlideOver
29
+ isOpen={isOpen}
30
+ direction="rightSide"
31
+ size="partial"
32
+ data-fs-bp-basic-drawer
33
+ data-fs-mobile-bottom-sheet
34
+ id={id}
35
+ onDismiss={onDismiss ?? fadeOut}
36
+ {...props}
37
+ >
38
+ {children}
39
+ </SlideOver>
36
40
  );
37
41
  };
38
-
39
42
  BasicDrawer.Heading = BasicDrawerHeading;
40
43
  BasicDrawer.Body = BasicDrawerBody;
41
44
  BasicDrawer.Footer = BasicDrawerFooter;
package/src/features/shared/components/BasicDrawer/basic-drawer.scss CHANGED
@@ -10,6 +10,50 @@
10
10
  border-top-left-radius: 1.25rem;
11
11
  border-top-right-radius: 1.25rem;
12
12
 
13
+ &[data-fs-slide-over][data-fs-mobile-bottom-sheet][data-fs-slide-over-sidebar] {
14
+ max-height: 100%;
15
+ }
16
+
17
+ @include media("<=tablet") {
18
+ &[data-fs-slide-over][data-fs-mobile-bottom-sheet] {
19
+ &:not([data-fs-slide-over-sidebar]) {
20
+ left: 0;
21
+ right: 0;
22
+ bottom: 0;
23
+ top: auto;
24
+ width: 100vw;
25
+ max-height: min(85vh, 45rem);
26
+
27
+ border-top-left-radius: var(--fs-spacing-3);
28
+ border-top-right-radius: var(--fs-spacing-3);
29
+ box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
30
+
31
+ will-change: transform;
32
+ backface-visibility: hidden;
33
+ transform: translate3d(0, 100%, 0);
34
+
35
+ transition: transform var(--fs-slide-over-transition-timing) ease;
36
+
37
+ &[data-fs-slide-over-state="in"] {
38
+ transform: translate3d(0, 0, 0);
39
+ }
40
+ &[data-fs-slide-over-state="out"] {
41
+ transform: translate3d(0, 100%, 0);
42
+ }
43
+
44
+ &[data-fs-slide-over-direction="rightSide"][data-fs-slide-over-state="out"],
45
+ &[data-fs-slide-over-direction="leftSide"][data-fs-slide-over-state="out"] {
46
+ transform: translate3d(0, 100%, 0);
47
+ }
48
+
49
+ [data-fs-slide-over][data-fs-mobile-bottom-sheet]
50
+ [data-fs-slide-over-state="out"] {
51
+ transform: translateY(100%);
52
+ }
53
+ }
54
+ }
55
+ }
56
+
13
57
  @include media(">=tablet") {
14
58
  height: 100%;
15
59
  bottom: auto;
package/src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/SidebarDrawer.tsx CHANGED
@@ -23,6 +23,7 @@ export const SidebarDrawer = ({
23
23
  close={close}
24
24
  {...props}
25
25
  data-fs-slide-over-direction="leftSide"
26
+ data-fs-slide-over-sidebar
26
27
  >
27
28
  <BasicDrawer.Heading
28
29
  title={
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.6";
16
+ export const CURRENT_VERSION = "1.3.8";