@vtex/faststore-plugin-buyer-portal 1.0.4 → 1.0.5
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.
- package/package.json +1 -1
- package/src/components/AddressesCard/AddressesCard.tsx +12 -10
- package/src/components/Card/Card.scss +7 -2
- package/src/components/ContractsCard/ContractsCard.tsx +14 -12
- package/src/components/Icons/Active.tsx +18 -0
- package/src/components/Icons/Address.tsx +20 -0
- package/src/components/Icons/Delete.tsx +14 -0
- package/src/components/Icons/Edit.tsx +9 -0
- package/src/components/Icons/FilledFolder.tsx +14 -0
- package/src/components/Icons/Info.tsx +12 -0
- package/src/components/Icons/Link.tsx +7 -13
- package/src/components/Icons/index.ts +7 -0
- package/src/components/Navbar/Navbar.tsx +4 -2
- package/src/components/OrganizationalUnitsCard/OrganizationalUnitsCard.tsx +39 -7
- package/src/components/ProfileCard/ProfileCard.tsx +1 -1
- package/src/components/UsersCard/UsersCard.tsx +13 -10
- package/src/mock/profile-data.ts +19 -15
- package/src/themes/index.scss +9 -0
package/package.json
CHANGED
|
@@ -4,9 +4,10 @@ import {
|
|
|
4
4
|
DropdownMenu,
|
|
5
5
|
DropdownButton,
|
|
6
6
|
} from '@faststore/ui'
|
|
7
|
+
import Link from "next/link";
|
|
7
8
|
|
|
8
9
|
import { Card, CardBody, CardFooter, CardHeader } from '../Card'
|
|
9
|
-
import
|
|
10
|
+
import * as Icons from "../Icons";
|
|
10
11
|
|
|
11
12
|
export type AddressInformation = {
|
|
12
13
|
addressId: string,
|
|
@@ -36,8 +37,12 @@ export default function AddressesCard({ addresses }: AddressesCardProps) {
|
|
|
36
37
|
|
|
37
38
|
<div data-fs-card-row key={address.addressId}>
|
|
38
39
|
<div data-fs-card-information-row>
|
|
39
|
-
<
|
|
40
|
-
|
|
40
|
+
<div data-fs-card-information-icon>
|
|
41
|
+
<Icons.Address height={24} width={24} />
|
|
42
|
+
</div>
|
|
43
|
+
<div data-fs-card-information-title>
|
|
44
|
+
<span >{address.street}</span>
|
|
45
|
+
</div>
|
|
41
46
|
<div data-fs-card-information-type>
|
|
42
47
|
<span data-fs-shipping-tag>{address.addressType}</span>
|
|
43
48
|
</div>
|
|
@@ -49,21 +54,18 @@ export default function AddressesCard({ addresses }: AddressesCardProps) {
|
|
|
49
54
|
<DropdownButton><Icon name='DotsThree' data-fs-menu-action-button /></DropdownButton>
|
|
50
55
|
<DropdownMenu>
|
|
51
56
|
<DropdownItem>
|
|
52
|
-
<Icon name="ArrowSquareOut" />Open
|
|
57
|
+
<Icon name="ArrowSquareOut" data-fs-dropdown-icon />Open
|
|
53
58
|
</DropdownItem>
|
|
54
59
|
<DropdownItem>
|
|
55
|
-
{
|
|
56
|
-
<Icon name='User' />Edit
|
|
60
|
+
<Icons.Edit width={24} height={24} data-fs-dropdown-icon />Edit
|
|
57
61
|
</DropdownItem>
|
|
58
62
|
<DropdownItem>
|
|
59
|
-
{
|
|
60
|
-
<Icon name="XCircle" /> Delete
|
|
63
|
+
<Icons.Delete width={24} height={24} data-fs-dropdown-icon /> Delete
|
|
61
64
|
</DropdownItem>
|
|
62
|
-
{/* TODO: Replace Icon */}
|
|
63
65
|
<DropdownItem>
|
|
64
66
|
<div data-fs-dropdown-active-item>
|
|
65
67
|
<div data-fs-dropdown-active-item-label>
|
|
66
|
-
<
|
|
68
|
+
<Icons.Active width={24} height={24} data-fs-dropdown-icon /> Active
|
|
67
69
|
</div>
|
|
68
70
|
<Toggle id="addressActiveMenu" defaultChecked={address.isActive} data-fs-internal-toggle />
|
|
69
71
|
</div>
|
|
@@ -88,11 +88,12 @@
|
|
|
88
88
|
justify-content: space-around;
|
|
89
89
|
|
|
90
90
|
[data-fs-card-information-icon] {
|
|
91
|
-
width: 50px
|
|
91
|
+
width: 50px;
|
|
92
|
+
margin-left: 1rem;
|
|
92
93
|
}
|
|
93
94
|
|
|
94
95
|
[data-fs-card-information-title] {
|
|
95
|
-
|
|
96
|
+
flex: 1;
|
|
96
97
|
}
|
|
97
98
|
|
|
98
99
|
[data-fs-card-information-type] {
|
|
@@ -130,6 +131,10 @@
|
|
|
130
131
|
--fs-border-radius: 999px;
|
|
131
132
|
}
|
|
132
133
|
}
|
|
134
|
+
|
|
135
|
+
[data-fs-email-text] {
|
|
136
|
+
color: #0366DD;
|
|
137
|
+
}
|
|
133
138
|
}
|
|
134
139
|
|
|
135
140
|
[data-fs-divider] {
|
|
@@ -4,9 +4,11 @@ import {
|
|
|
4
4
|
DropdownMenu,
|
|
5
5
|
DropdownButton,
|
|
6
6
|
} from '@faststore/ui'
|
|
7
|
+
import Link from "next/link";
|
|
7
8
|
|
|
8
9
|
import { Card, CardBody, CardFooter, CardHeader } from '../Card'
|
|
9
|
-
import
|
|
10
|
+
import * as Icons from "../Icons";
|
|
11
|
+
|
|
10
12
|
|
|
11
13
|
export type ContractInformation = {
|
|
12
14
|
id: string
|
|
@@ -25,8 +27,7 @@ export default function ContractsCard({ contracts }: ContractsCardProps) {
|
|
|
25
27
|
<Card>
|
|
26
28
|
<CardHeader>
|
|
27
29
|
<div data-fs-card-title>Contracts <span data-fs-card-title-counter>{contracts.length}</span></div>
|
|
28
|
-
{
|
|
29
|
-
<IconButton icon={<Icon name="PlusCircle" width={20} height={20} />}
|
|
30
|
+
<IconButton icon={<Icons.Info width={20} height={20} />}
|
|
30
31
|
aria-label={`$profile action`} onClick={() => { }} />
|
|
31
32
|
</CardHeader>
|
|
32
33
|
<CardBody>
|
|
@@ -37,8 +38,12 @@ export default function ContractsCard({ contracts }: ContractsCardProps) {
|
|
|
37
38
|
|
|
38
39
|
<div data-fs-card-row key={contract.id}>
|
|
39
40
|
<div data-fs-card-information-row>
|
|
40
|
-
<
|
|
41
|
-
|
|
41
|
+
<div data-fs-card-information-icon >
|
|
42
|
+
<Icon name="User" weight='bold' />
|
|
43
|
+
</div>
|
|
44
|
+
<div data-fs-card-information-title>
|
|
45
|
+
<h1 >{contract.name}</h1>
|
|
46
|
+
</div>
|
|
42
47
|
</div>
|
|
43
48
|
<div data-fs-card-action-row>
|
|
44
49
|
<Toggle id="contractActive" defaultChecked={contract.isActive} />
|
|
@@ -49,21 +54,18 @@ export default function ContractsCard({ contracts }: ContractsCardProps) {
|
|
|
49
54
|
</DropdownButton>
|
|
50
55
|
<DropdownMenu align="right" data-fs-dropdown-menu>
|
|
51
56
|
<DropdownItem>
|
|
52
|
-
<Icon name="ArrowSquareOut" />Open
|
|
57
|
+
<Icon name="ArrowSquareOut" data-fs-dropdown-icon />Open
|
|
53
58
|
</DropdownItem>
|
|
54
59
|
<DropdownItem>
|
|
55
|
-
{
|
|
56
|
-
<Icon name='User' />Edit
|
|
60
|
+
<Icons.Edit width={24} height={24} data-fs-dropdown-icon />Edit
|
|
57
61
|
</DropdownItem>
|
|
58
62
|
<DropdownItem>
|
|
59
|
-
{
|
|
60
|
-
<Icon name="XCircle" /> Delete
|
|
63
|
+
<Icons.Delete width={24} height={24} data-fs-dropdown-icon /> Delete
|
|
61
64
|
</DropdownItem>
|
|
62
|
-
{/* TODO: Replace Icon */}
|
|
63
65
|
<DropdownItem>
|
|
64
66
|
<div data-fs-dropdown-active-item>
|
|
65
67
|
<div data-fs-dropdown-active-item-label>
|
|
66
|
-
<
|
|
68
|
+
<Icons.Active width={24} height={24} data-fs-dropdown-icon /> Active
|
|
67
69
|
</div>
|
|
68
70
|
<Toggle id="contractActiveMenu" defaultChecked={contract.isActive} data-fs-internal-toggle />
|
|
69
71
|
</div>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { IconProps } from ".";
|
|
2
|
+
|
|
3
|
+
/* *
|
|
4
|
+
* Material Symbols - Offline Pin
|
|
5
|
+
*/
|
|
6
|
+
export const Active = ({ ...props }: IconProps) => (
|
|
7
|
+
<svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960"><path d="M320-280h320v-80H320v80Zm118-120 226-226-57-55-169 169-86-86-56 56 142 142Zm42 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
|
|
8
|
+
|
|
9
|
+
)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { IconProps } from ".";
|
|
2
|
+
|
|
3
|
+
/* *
|
|
4
|
+
* Material Symbols - Apartment
|
|
5
|
+
*/
|
|
6
|
+
export const Address = ({ ...props }: IconProps) => (
|
|
7
|
+
<svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960" fill="#0366DD"><path d="M120-120v-560h160v-160h400v320h160v400H520v-160h-80v160H120Zm80-80h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 320h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 480h80v-80h-80v80Zm0-160h80v-80h-80v80Z" /></svg>)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { IconProps } from ".";
|
|
2
|
+
|
|
3
|
+
/* *
|
|
4
|
+
* Material Symbols - Delete
|
|
5
|
+
*/
|
|
6
|
+
export const Delete = ({ ...props }: IconProps) => (
|
|
7
|
+
<svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960" fill="#000000"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" /></svg>
|
|
8
|
+
)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { IconProps } from ".";
|
|
2
|
+
|
|
3
|
+
/* *
|
|
4
|
+
* Material Symbols - Edit
|
|
5
|
+
*/
|
|
6
|
+
export const Edit = ({ ...props }: IconProps) => (
|
|
7
|
+
<svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960" fill="#000000"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z" /></svg>)
|
|
8
|
+
|
|
9
|
+
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { IconProps } from ".";
|
|
2
|
+
|
|
3
|
+
/* *
|
|
4
|
+
* Material Symbols - Folder
|
|
5
|
+
*/
|
|
6
|
+
export const FilledFolder = ({ ...props }: IconProps) => (
|
|
7
|
+
<svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960" fill="#0366DD"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Z" /></svg>)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
|
|
2
|
+
import { IconProps } from ".";
|
|
3
|
+
|
|
4
|
+
/* *
|
|
5
|
+
* Material Symbols - Info
|
|
6
|
+
*/
|
|
7
|
+
export const Info = ({ ...props }: IconProps) => (
|
|
8
|
+
<svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960" width="24px" ><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" /></svg>
|
|
9
|
+
);
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
@@ -1,17 +1,11 @@
|
|
|
1
1
|
import { IconProps } from ".";
|
|
2
2
|
|
|
3
|
+
/* *
|
|
4
|
+
* Material Symbols - Arrow Outward
|
|
5
|
+
*/
|
|
3
6
|
export const Link = ({ ...props }: IconProps) => (
|
|
4
|
-
<svg
|
|
5
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
6
|
-
viewBox="0 0 10 10"
|
|
7
|
-
fill="none"
|
|
8
|
-
{...props}
|
|
9
|
-
>
|
|
10
|
-
<path
|
|
11
|
-
fill-rule="evenodd"
|
|
12
|
-
clip-rule="evenodd"
|
|
13
|
-
d="M1.75 1C1.75 0.585786 2.08579 0.25 2.5 0.25H9C9.41421 0.25 9.75 0.585786 9.75 1V7.5C9.75 7.91421 9.41421 8.25 9 8.25C8.58579 8.25 8.25 7.91421 8.25 7.5V2.81066L1.53033 9.53033C1.23744 9.82322 0.762563 9.82322 0.46967 9.53033C0.176777 9.23744 0.176777 8.76256 0.46967 8.46967L7.18934 1.75H2.5C2.08579 1.75 1.75 1.41421 1.75 1Z"
|
|
14
|
-
fill="#3D3D3D"
|
|
15
|
-
/>
|
|
16
|
-
</svg>
|
|
7
|
+
<svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960" fill="#C2c2c2"><path d="m256-240-56-56 384-384H240v-80h480v480h-80v-344L256-240Z" /></svg>
|
|
17
8
|
);
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
export type IconProps = {
|
|
2
2
|
width: number;
|
|
3
3
|
height: number;
|
|
4
|
+
fill?: string;
|
|
4
5
|
};
|
|
5
6
|
|
|
6
7
|
export { Profile } from "./Profile";
|
|
7
8
|
export { Link } from "./Link";
|
|
8
9
|
export { Load } from "./Load";
|
|
10
|
+
export { Info } from "./Info";
|
|
11
|
+
export { Edit } from "./Edit";
|
|
12
|
+
export { Delete } from './Delete';
|
|
13
|
+
export { Active } from './Active';
|
|
14
|
+
export { FilledFolder } from './FilledFolder';
|
|
15
|
+
export { Address } from './Address';
|
|
@@ -1,12 +1,14 @@
|
|
|
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'
|
|
4
5
|
|
|
5
|
-
import { Dropdown, DropdownMenu, DropdownButton } from "@faststore/ui";
|
|
6
|
+
import { Dropdown, DropdownMenu, DropdownButton, Icon } from "@faststore/ui";
|
|
6
7
|
import { ProfileSummary } from "../ProfileSummary/ProfileSummary";
|
|
7
8
|
import { doLogout } from "../../utils/logout";
|
|
8
9
|
import { profileData } from "../../mock/profile-data";
|
|
9
10
|
|
|
11
|
+
|
|
10
12
|
export const Navbar = () => {
|
|
11
13
|
return (
|
|
12
14
|
<header data-fs-buyer-portal-navbar>
|
|
@@ -14,7 +16,7 @@ export const Navbar = () => {
|
|
|
14
16
|
<div data-fs-header-actions>
|
|
15
17
|
<Link href="/" data-fs-start-shopping-link>
|
|
16
18
|
<span>Start Shopping</span>
|
|
17
|
-
<Icons.Link width={
|
|
19
|
+
<Icons.Link width={16} height={16} />
|
|
18
20
|
</Link>
|
|
19
21
|
<Dropdown>
|
|
20
22
|
<DropdownButton asChild>
|
|
@@ -1,8 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import {
|
|
2
|
+
Icon, Toggle, IconButton, Button, Dropdown,
|
|
3
|
+
DropdownItem,
|
|
4
|
+
DropdownMenu,
|
|
5
|
+
DropdownButton
|
|
6
|
+
} from '@faststore/ui'
|
|
4
7
|
import Link from "next/link";
|
|
5
8
|
|
|
9
|
+
import { Card, CardBody, CardFooter, CardHeader } from '../Card'
|
|
10
|
+
import * as Icons from "../Icons";
|
|
6
11
|
|
|
7
12
|
export type OrganizationalUnitInformation = {
|
|
8
13
|
organizationalUnitId: string
|
|
@@ -34,19 +39,46 @@ export default function OrganizationalUnitsCard({ organizationalUnits = [] }: Or
|
|
|
34
39
|
|
|
35
40
|
<div data-fs-card-row key={orgUnit.organizationalUnitId}>
|
|
36
41
|
<div data-fs-card-information-row>
|
|
37
|
-
<
|
|
38
|
-
|
|
42
|
+
<div data-fs-card-information-icon>
|
|
43
|
+
<Icons.FilledFolder width={24} height={24} fill='#0366DD' />
|
|
44
|
+
</div >
|
|
45
|
+
<div data-fs-card-information-title>
|
|
46
|
+
<span >{orgUnit.organizationalUnitName}</span>
|
|
47
|
+
</div>
|
|
39
48
|
</div>
|
|
40
49
|
<div data-fs-card-action-row>
|
|
41
50
|
<Toggle id="orgUnitActive" defaultChecked={orgUnit.isActive} />
|
|
42
|
-
<
|
|
51
|
+
<Dropdown>
|
|
52
|
+
<DropdownButton>
|
|
53
|
+
<Icon name="DotsThree" data-fs-menu-action-button />
|
|
54
|
+
</DropdownButton>
|
|
55
|
+
<DropdownMenu align="right" data-fs-dropdown-menu>
|
|
56
|
+
<DropdownItem>
|
|
57
|
+
<Icon name="ArrowSquareOut" data-fs-dropdown-icon />Open
|
|
58
|
+
</DropdownItem>
|
|
59
|
+
<DropdownItem>
|
|
60
|
+
<Icons.Edit width={24} height={24} data-fs-dropdown-icon />Edit
|
|
61
|
+
</DropdownItem>
|
|
62
|
+
<DropdownItem>
|
|
63
|
+
<Icons.Delete width={24} height={24} data-fs-dropdown-icon /> Delete
|
|
64
|
+
</DropdownItem>
|
|
65
|
+
<DropdownItem>
|
|
66
|
+
<div data-fs-dropdown-active-item>
|
|
67
|
+
<div data-fs-dropdown-active-item-label>
|
|
68
|
+
<Icons.Active width={24} height={24} data-fs-dropdown-icon /> Active
|
|
69
|
+
</div>
|
|
70
|
+
<Toggle id="userActiveMenu" defaultChecked={orgUnit.isActive} data-fs-internal-toggle />
|
|
71
|
+
</div>
|
|
72
|
+
</DropdownItem>
|
|
73
|
+
</DropdownMenu>
|
|
74
|
+
</Dropdown>
|
|
43
75
|
</div>
|
|
44
76
|
</div>
|
|
45
77
|
</div>)
|
|
46
78
|
})
|
|
47
79
|
) : (
|
|
48
80
|
<div data-fs-card-body-empty-state>
|
|
49
|
-
<
|
|
81
|
+
<Icons.FilledFolder width={40} height={40} fill="#c2c2c2" />
|
|
50
82
|
<span> No child organizational units yet </span>
|
|
51
83
|
<Button variant="primary">+ Add New</Button>
|
|
52
84
|
</div>
|
|
@@ -28,7 +28,7 @@ export default function ProfileCard({ name, email, id, imageUrl }: ProfileCardPr
|
|
|
28
28
|
<hr data-fs-divider />
|
|
29
29
|
<div data-fs-profile-card-row>
|
|
30
30
|
<h1 data-fs-card-row-label>Email</h1>
|
|
31
|
-
<h1>{email}</h1>
|
|
31
|
+
<h1 data-fs-email-text>{email}</h1>
|
|
32
32
|
</div>
|
|
33
33
|
<hr data-fs-divider />
|
|
34
34
|
<div data-fs-profile-card-row>
|
|
@@ -4,9 +4,11 @@ import {
|
|
|
4
4
|
DropdownMenu,
|
|
5
5
|
DropdownButton,
|
|
6
6
|
} from '@faststore/ui'
|
|
7
|
+
import Link from "next/link";
|
|
7
8
|
|
|
8
9
|
import { Card, CardBody, CardFooter, CardHeader } from '../Card'
|
|
9
|
-
import
|
|
10
|
+
import * as Icons from "../Icons";
|
|
11
|
+
|
|
10
12
|
|
|
11
13
|
export type UserInformation = {
|
|
12
14
|
userId: string
|
|
@@ -37,8 +39,12 @@ export default function UsersCard({ users }: UsersCardProps) {
|
|
|
37
39
|
|
|
38
40
|
<div data-fs-card-row key={user.userId}>
|
|
39
41
|
<div data-fs-card-information-row>
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
+
<div data-fs-card-information-icon>
|
|
43
|
+
<Icons.Profile width={24} height={24} />
|
|
44
|
+
</div >
|
|
45
|
+
<div data-fs-card-information-title>
|
|
46
|
+
<h1>{user.name}</h1>
|
|
47
|
+
</div>
|
|
42
48
|
<h1 data-fs-card-row-label>{user.userType}</h1>
|
|
43
49
|
</div>
|
|
44
50
|
<div data-fs-card-action-row>
|
|
@@ -50,21 +56,18 @@ export default function UsersCard({ users }: UsersCardProps) {
|
|
|
50
56
|
</DropdownButton>
|
|
51
57
|
<DropdownMenu align="right" data-fs-dropdown-menu>
|
|
52
58
|
<DropdownItem>
|
|
53
|
-
<Icon name="ArrowSquareOut" />Open
|
|
59
|
+
<Icon name="ArrowSquareOut" data-fs-dropdown-icon />Open
|
|
54
60
|
</DropdownItem>
|
|
55
61
|
<DropdownItem>
|
|
56
|
-
{
|
|
57
|
-
<Icon name='User' />Edit User Profile
|
|
62
|
+
<Icons.Edit width={24} height={24} data-fs-dropdown-icon />Edit
|
|
58
63
|
</DropdownItem>
|
|
59
64
|
<DropdownItem>
|
|
60
|
-
{
|
|
61
|
-
<Icon name="XCircle" /> Delete
|
|
65
|
+
<Icons.Delete width={24} height={24} data-fs-dropdown-icon /> Delete
|
|
62
66
|
</DropdownItem>
|
|
63
|
-
{/* TODO: Replace Icon */}
|
|
64
67
|
<DropdownItem>
|
|
65
68
|
<div data-fs-dropdown-active-item>
|
|
66
69
|
<div data-fs-dropdown-active-item-label>
|
|
67
|
-
<
|
|
70
|
+
<Icons.Active width={24} height={24} data-fs-dropdown-icon /> Active
|
|
68
71
|
</div>
|
|
69
72
|
<Toggle id="userActiveMenu" defaultChecked={user.isActive} data-fs-internal-toggle />
|
|
70
73
|
</div>
|
package/src/mock/profile-data.ts
CHANGED
|
@@ -9,26 +9,26 @@ export const profileData = {
|
|
|
9
9
|
export const organizationResponse = {
|
|
10
10
|
displayName: 'ByTech Inc.',
|
|
11
11
|
// Uncomment to test with a single contract
|
|
12
|
-
// contracts: [{
|
|
13
|
-
// name: 'ByTech',
|
|
14
|
-
// email: 'bytech@demo.com',
|
|
15
|
-
// id: '12-32-DDDD',
|
|
16
|
-
// isActive: false,
|
|
17
|
-
// }],
|
|
18
|
-
|
|
19
|
-
// Comment to test with single contract
|
|
20
12
|
contracts: [{
|
|
21
13
|
name: 'ByTech',
|
|
22
14
|
email: 'bytech@demo.com',
|
|
23
15
|
id: '12-32-DDDD',
|
|
24
16
|
isActive: false,
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
name: 'ByTech South',
|
|
28
|
-
email: 'bytech@demo.com',
|
|
29
|
-
id: '12-32-AAAA',
|
|
30
|
-
isActive: true,
|
|
31
17
|
}],
|
|
18
|
+
|
|
19
|
+
// Comment to test with single contract
|
|
20
|
+
// contracts: [{
|
|
21
|
+
// name: 'ByTech',
|
|
22
|
+
// email: 'bytech@demo.com',
|
|
23
|
+
// id: '12-32-DDDD',
|
|
24
|
+
// isActive: false,
|
|
25
|
+
// },
|
|
26
|
+
// {
|
|
27
|
+
// name: 'ByTech South',
|
|
28
|
+
// email: 'bytech@demo.com',
|
|
29
|
+
// id: '12-32-AAAA',
|
|
30
|
+
// isActive: true,
|
|
31
|
+
// }],
|
|
32
32
|
users: [{
|
|
33
33
|
name: 'Everton',
|
|
34
34
|
userType: 'Admin',
|
|
@@ -51,5 +51,9 @@ export const organizationResponse = {
|
|
|
51
51
|
street: 'Rua Maranhão',
|
|
52
52
|
isActive: false
|
|
53
53
|
}],
|
|
54
|
-
organizationalUnits: [
|
|
54
|
+
organizationalUnits: [{
|
|
55
|
+
organizationalUnitId: '123-CC-1122',
|
|
56
|
+
organizationalUnitName: 'Child Unit 1',
|
|
57
|
+
isActive: true
|
|
58
|
+
}]
|
|
55
59
|
}
|
package/src/themes/index.scss
CHANGED