@vtex/faststore-plugin-buyer-portal 1.0.5 → 1.0.7

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/CustomerSwitch/customer-switch.scss +123 -115
  3. package/src/components/Navbar/Navbar.tsx +0 -2
  4. package/src/components/SelfManagementDrawer/SelfManagementDrawerHeader.tsx +13 -3
  5. package/src/components/SelfManagementDrawer/self-management-drawer.scss +9 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vtex/faststore-plugin-buyer-portal",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "description": "A plugin for faststore with buyer portal",
5
5
  "main": "index.js",
6
6
  "dependencies": {},
package/src/components/CustomerSwitch/customer-switch.scss CHANGED
@@ -1,130 +1,138 @@
1
1
  [data-fs-customer-switch-drawer] {
2
- // --------------------------------------------------------
3
- // Colors (Branding Core)
4
- // --------------------------------------------------------
5
- --fs-color-tertiary-bkg : #CBE9FF;
6
- --fs-border-color-light : #EBEBEB;
2
+ // --------------------------------------------------------
3
+ // Colors (Branding Core)
4
+ // --------------------------------------------------------
5
+ --fs-color-tertiary-bkg: #cbe9ff;
6
+ --fs-border-color-light: #ebebeb;
7
+
8
+ display: flex;
9
+ flex-direction: column;
10
+
11
+ [data-fs-slide-over-header] {
12
+ &[data-fs-customer-switch-drawer-header] {
13
+ background-color: transparent;
14
+ align-items: flex-start;
15
+ margin-bottom: var(--fs-spacing-3);
16
+ flex-direction: row;
17
+
18
+ [data-fs-customer-switch-drawer-title] {
19
+ color: black;
20
+ font-size: var(--fs-text-size-title-section);
21
+ font-weight: var(--fs-text-weight-semibold);
22
+ margin-top: var(--fs-spacing-6);
23
+ padding-left: var(--fs-spacing-6);
24
+ text-transform: capitalize;
25
+ }
26
+ }
27
+
28
+ [data-fs-button] {
29
+ color: black;
30
+ }
31
+ }
7
32
 
33
+ [data-fs-customer-switch-drawer-body] {
8
34
  display: flex;
9
35
  flex-direction: column;
36
+ padding: 0 calc(var(--fs-spacing-2) + var(--fs-spacing-7));
37
+ flex: 1;
38
+ overflow: hidden;
39
+
40
+ [data-fs-customer-switch-search] {
41
+ width: 100%;
42
+ border: var(--fs-border-width) solid var(--fs-border-color-light);
43
+ border-radius: var(--fs-border-radius-pill);
44
+ padding: var(--fs-spacing-1) var(--fs-spacing-2);
45
+ display: flex;
46
+ align-items: center;
47
+
48
+ [data-fs-customer-switch-search-button] {
49
+ margin-right: var(--fs-spacing-1);
50
+ }
51
+
52
+ [data-fs-customer-switch-search-input] {
53
+ width: 100%;
54
+ border: 0;
55
+ outline: 0;
56
+ }
57
+ }
10
58
 
11
- [data-fs-customer-switch-drawer-header] {
12
- align-items: flex-start;
13
- padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
14
-
15
- [data-fs-customer-switch-drawer-title] {
16
- font-size: var(--fs-text-size-title-section);
17
- font-weight: var(--fs-text-weight-semibold);
18
- margin-top: var(--fs-spacing-6);
19
- padding-left: var(--fs-spacing-6);
20
- text-transform: capitalize;
21
- }
59
+ [data-fs-customer-options-list] {
60
+ display: flex;
61
+ flex-direction: column;
62
+ flex: 1;
63
+ overflow: scroll;
64
+ margin-top: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
22
65
 
23
- }
66
+ [data-fs-customer-switch-option-input] {
67
+ display: none;
68
+ }
24
69
 
25
- [data-fs-customer-switch-drawer-body] {
70
+ [data-fs-customer-switch-option] {
26
71
  display: flex;
27
- flex-direction: column;
28
- padding: 0 calc(var(--fs-spacing-2) + var(--fs-spacing-7));
29
- flex: 1;
30
- overflow: hidden;
31
-
32
- [data-fs-customer-switch-search] {
33
- width: 100%;
34
- border: var(--fs-border-width) solid var(--fs-border-color-light);
35
- border-radius: var(--fs-border-radius-pill);
36
- padding: var(--fs-spacing-1) var(--fs-spacing-2);
37
- display: flex;
38
- align-items: center;
39
-
40
- [data-fs-customer-switch-search-button] {
41
- margin-right: var(--fs-spacing-1);
42
- }
43
-
44
- [data-fs-customer-switch-search-input]{
45
- width: 100%;
46
- border: 0;
47
- outline: 0;
48
- }
72
+ align-items: center;
73
+ margin-top: var(--fs-spacing-1);
74
+ border: var(--fs-border-width) solid var(--fs-border-color-light);
75
+ padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
76
+ border-radius: var(--fs-border-radius-medium);
77
+ cursor: pointer;
78
+
79
+ [data-fs-customer-switch-option-profile] {
80
+ min-width: var(--fs-spacing-4);
81
+ aspect-ratio: 1;
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: center;
85
+ border-radius: var(--fs-border-radius-circle);
86
+ background-color: var(--fs-color-tertiary-bkg);
87
+ font-size: var(--fs-text-size-tiny);
88
+ font-weight: var(--fs-text-weight-semibold);
89
+ margin-right: var(--fs-spacing-2);
90
+ text-transform: capitalize;
49
91
  }
50
92
 
51
- [data-fs-customer-options-list] {
52
- display: flex;
53
- flex-direction: column;
54
- flex: 1;
55
- overflow: scroll;
56
- margin-top: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
57
-
58
- [data-fs-customer-switch-option-input] {
59
- display: none;
60
- }
61
-
62
- [data-fs-customer-switch-option] {
63
- display: flex;
64
- align-items: center;
65
- margin-top: var(--fs-spacing-1);
66
- border: var(--fs-border-width) solid var(--fs-border-color-light);
67
- padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
68
- border-radius: var(--fs-border-radius-medium);
69
- cursor: pointer;
70
-
71
- [data-fs-customer-switch-option-profile] {
72
- min-width: var(--fs-spacing-4);
73
- aspect-ratio: 1;
74
- display: flex;
75
- align-items: center;
76
- justify-content: center;
77
- border-radius: var(--fs-border-radius-circle);
78
- background-color: var(--fs-color-tertiary-bkg);
79
- font-size: var(--fs-text-size-tiny);
80
- font-weight: var(--fs-text-weight-semibold);
81
- margin-right: var(--fs-spacing-2);
82
- text-transform: capitalize;
83
- }
84
-
85
- [data-fs-customer-switch-option-name] {
86
- font-size: var(--fs-text-size-legend);
87
- font-weight: var(--fs-text-weight-medium);
88
- width: 100%;
89
- overflow: hidden;
90
- white-space: nowrap;
91
- text-overflow: ellipsis;
92
- text-transform: capitalize;
93
- }
94
- }
95
-
96
- [data-fs-customer-switch-option-input]:checked + [data-fs-customer-switch-option] {
97
- border-color: var(--fs-color-primary-bkg);
98
- background-color: var(--fs-color-primary-bkg-light-active);
99
- }
100
-
101
- [data-fs-customer-switch-option]:first-of-type {
102
- margin-top: 0;
103
- }
104
-
105
- [data-fs-customer-switch-option]:last-of-type {
106
- margin-bottom: var(--fs-spacing-1);
107
- }
93
+ [data-fs-customer-switch-option-name] {
94
+ font-size: var(--fs-text-size-legend);
95
+ font-weight: var(--fs-text-weight-medium);
96
+ width: 100%;
97
+ overflow: hidden;
98
+ white-space: nowrap;
99
+ text-overflow: ellipsis;
100
+ text-transform: capitalize;
108
101
  }
109
- }
102
+ }
110
103
 
111
- [data-fs-customer-switch-drawer-footer] {
112
- padding: var(--fs-spacing-4) calc(var(--fs-spacing-2) + var(--fs-spacing-7));
113
- border-top: var(--fs-border-width) solid var(--fs-border-color-light);
114
-
115
- [data-fs-customer-switch-drawer-button] {
116
- width: 100%;
117
- padding: var(--fs-spacing-3) var(--fs-spacing-5);
118
- background-color: var(--fs-color-primary-bkg);
119
- color: var(--fs-color-text-inverse);
120
- border-radius: var(--fs-border-radius-pill);
121
- font-size: var(--fs-text-size-1);
122
- font-weight: var(--fs-text-weight-semibold);
123
- }
124
-
125
- [data-fs-customer-switch-drawer-button]:disabled {
126
- background-color: var(--fs-color-disabled-bkg);
127
- }
104
+ [data-fs-customer-switch-option-input]:checked
105
+ + [data-fs-customer-switch-option] {
106
+ border-color: var(--fs-color-primary-bkg);
107
+ background-color: var(--fs-color-primary-bkg-light-active);
108
+ }
109
+
110
+ [data-fs-customer-switch-option]:first-of-type {
111
+ margin-top: 0;
112
+ }
113
+
114
+ [data-fs-customer-switch-option]:last-of-type {
115
+ margin-bottom: var(--fs-spacing-1);
116
+ }
117
+ }
118
+ }
119
+
120
+ [data-fs-customer-switch-drawer-footer] {
121
+ padding: var(--fs-spacing-4) calc(var(--fs-spacing-2) + var(--fs-spacing-7));
122
+ border-top: var(--fs-border-width) solid var(--fs-border-color-light);
123
+
124
+ [data-fs-customer-switch-drawer-button] {
125
+ width: 100%;
126
+ padding: var(--fs-spacing-3) var(--fs-spacing-5);
127
+ background-color: var(--fs-color-primary-bkg);
128
+ color: var(--fs-color-text-inverse);
129
+ border-radius: var(--fs-border-radius-pill);
130
+ font-size: var(--fs-text-size-1);
131
+ font-weight: var(--fs-text-weight-semibold);
128
132
  }
129
133
 
134
+ [data-fs-customer-switch-drawer-button]:disabled {
135
+ background-color: var(--fs-color-disabled-bkg);
136
+ }
137
+ }
130
138
  }
package/src/components/Navbar/Navbar.tsx CHANGED
@@ -1,14 +1,12 @@
1
1
  import * as Icons from "../Icons";
2
2
  import { Logo } from "../Logo/Logo";
3
3
  import Link from "next/link";
4
- import { ArrowUpRight } from '@phosphor-icons/react'
5
4
 
6
5
  import { Dropdown, DropdownMenu, DropdownButton, Icon } from "@faststore/ui";
7
6
  import { ProfileSummary } from "../ProfileSummary/ProfileSummary";
8
7
  import { doLogout } from "../../utils/logout";
9
8
  import { profileData } from "../../mock/profile-data";
10
9
 
11
-
12
10
  export const Navbar = () => {
13
11
  return (
14
12
  <header data-fs-buyer-portal-navbar>
package/src/components/SelfManagementDrawer/SelfManagementDrawerHeader.tsx CHANGED
@@ -1,11 +1,10 @@
1
1
  import { ReactNode } from "react";
2
- import { Button, IconButton, SlideOverHeader, Link, Icon } from "@faststore/ui";
2
+ import { Button, SlideOverHeader, Link, Icon } from "@faststore/ui";
3
3
  import * as Icons from "../Icons";
4
4
 
5
5
  export type SelfManagementDrawerHeaderProps = {
6
6
  onCloseDrawer?: () => void;
7
7
  onSwitchButtonClick?: () => void;
8
- onConfigButtonClick?: () => void;
9
8
  orgImage?: ReactNode;
10
9
  orgName: string;
11
10
  orgUrl: string;
@@ -17,7 +16,6 @@ export const SelfManagementDrawerHeader = ({
17
16
  orgImage,
18
17
  onCloseDrawer,
19
18
  onSwitchButtonClick,
20
- onConfigButtonClick,
21
19
  }: SelfManagementDrawerHeaderProps) => {
22
20
  return (
23
21
  <>
@@ -29,6 +27,18 @@ export const SelfManagementDrawerHeader = ({
29
27
  </div>
30
28
  <h1 data-fs-self-management-drawer-header-org-name>{orgName}</h1>
31
29
  </Link>
30
+
31
+ <div data-fs-self-management-drawer-header-buttons-wrapper>
32
+ <Button
33
+ data-fs-self-management-drawer-header-switch-button
34
+ iconPosition="left"
35
+ onClick={() => onSwitchButtonClick?.()}
36
+ variant="secondary"
37
+ size="small"
38
+ >
39
+ Switch
40
+ </Button>
41
+ </div>
32
42
  </div>
33
43
  </>
34
44
  );
package/src/components/SelfManagementDrawer/self-management-drawer.scss CHANGED
@@ -59,6 +59,15 @@
59
59
  transform: translateY(-50%);
60
60
  }
61
61
 
62
+ [data-fs-self-management-drawer-header-switch-button] {
63
+ border-radius: var(--fs-border-radius-pill);
64
+ padding: var(--fs-spacing-1) var(--fs-spacing-4);
65
+ font-weight: var(--fs-text-weight-semibold);
66
+ line-height: var(--fs-text-size-3);
67
+ border: var(--fs-border-radius-small) solid #e0e0e0;
68
+ color: #0366dd;
69
+ }
70
+
62
71
  // Body
63
72
  [data-fs-self-management-drawer-body] {
64
73
  flex: 1;