@homefile/components-v2 2.39.10 → 2.39.11
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/dist/components/contacts/ContactCard.js +2 -2
- package/dist/components/contacts/ContactHeaderMenu.d.ts +1 -1
- package/dist/components/contacts/ContactHeaderMenu.js +5 -5
- package/dist/components/contacts/viewPanel/AddressInfo.d.ts +12 -0
- package/dist/components/contacts/viewPanel/AddressInfo.js +14 -0
- package/dist/components/contacts/viewPanel/CompanyInfoCard.js +3 -5
- package/dist/components/contacts/viewPanel/ContactAddressCard.js +3 -5
- package/dist/components/contacts/viewPanel/PersonalInfoCard.js +2 -2
- package/dist/components/contacts/viewPanel/ViewContactPanel.d.ts +1 -1
- package/dist/components/contacts/viewPanel/ViewContactPanel.js +2 -2
- package/dist/components/icons/{Share.d.ts → DuplicateIcon.d.ts} +1 -1
- package/dist/components/icons/DuplicateIcon.js +5 -0
- package/dist/components/icons/Edit.d.ts +2 -1
- package/dist/components/icons/Edit.js +2 -2
- package/dist/components/icons/index.d.ts +1 -1
- package/dist/components/icons/index.js +1 -1
- package/dist/interfaces/contacts/ContactCard.interface.d.ts +1 -0
- package/dist/interfaces/contacts/ContactCardHeader.interface.d.ts +4 -2
- package/dist/interfaces/contacts/ViewContactPanel.interface.d.ts +4 -2
- package/dist/mocks/contacts/contacts.mock.js +3 -2
- package/dist/stories/contacts/ViewContactPanel.stories.js +0 -7
- package/dist/stories/icons/ShareIcon.stories.d.ts +3 -3
- package/dist/stories/icons/ShareIcon.stories.js +4 -4
- package/package.json +1 -1
- package/dist/components/icons/Share.js +0 -5
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Box, Container, Flex, IconButton, Stack } from '@chakra-ui/react';
|
|
3
|
-
import { ContactCardHeader, ContactCardInfo, ContactCardAddress, IconMenu, MoreHorizontal,
|
|
3
|
+
import { ContactCardHeader, ContactCardInfo, ContactCardAddress, IconMenu, MoreHorizontal, ShareIcon, } from '../../components';
|
|
4
4
|
import { colors } from '../../theme/colors';
|
|
5
5
|
export const ContactCard = ({ apiError, contact, index, menuItems, onClick, onShare, showAvatar, showHeader = true, }) => {
|
|
6
6
|
const hasOnClick = typeof onClick === 'function';
|
|
7
7
|
return (_jsxs(Box, { position: "relative", w: "100%", children: [_jsx(Container, { maxW: "none", textAlign: "start", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(Object.assign(Object.assign({}, contact), { index })), transition: "background-color 0.3s", _hover: {
|
|
8
8
|
bg: hasOnClick ? 'lightGreen.1' : 'neutral.white',
|
|
9
|
-
}, cursor: hasOnClick ? 'pointer' : 'default', children: _jsxs(Stack, { pb: "base", pt: "1", px: "base", spacing: "base", children: [showHeader && (_jsx(ContactCardHeader, { apiError: apiError, contact: contact })), _jsx(CardBody, { contact, index, showAvatar })] }) }), Number(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0 && (_jsx(Box, { position: "absolute", right: "1", top: "0", zIndex: "overlay", children: _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: contact, menuItems: menuItems, disabled: Number(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) < 1 }) })), onShare && (_jsx(Box, { position: "absolute", right: "2", bottom: "2", children: _jsx(IconButton, { variant: "icon", icon: _jsx(
|
|
9
|
+
}, cursor: hasOnClick ? 'pointer' : 'default', children: _jsxs(Stack, { pb: "base", pt: "1", px: "base", spacing: "base", children: [showHeader && (_jsx(ContactCardHeader, { apiError: apiError, contact: contact })), _jsx(CardBody, { contact, index, showAvatar })] }) }), Number(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0 && (_jsx(Box, { position: "absolute", right: "1", top: "0", zIndex: "overlay", children: _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: contact, menuItems: menuItems, disabled: Number(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) < 1 }) })), onShare && (_jsx(Box, { position: "absolute", right: "2", bottom: "2", children: _jsx(IconButton, { variant: "icon", icon: _jsx(ShareIcon, { size: 14 }), onClick: () => onShare(contact), "aria-label": "share-contact" }) }))] }));
|
|
10
10
|
};
|
|
11
11
|
const CardBody = ({ contact, index, showAvatar, }) => {
|
|
12
12
|
return (_jsxs(Flex, { justify: "space-between", align: "end", gap: "base", children: [_jsx(ContactCardInfo, Object.assign({}, contact, { index, showAvatar })), _jsx(Box, { borderLeft: `1px solid ${colors.lightBlue[1]}`, w: "45%", pl: "base", children: _jsx(ContactCardAddress, Object.assign({}, contact)) })] }));
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ContactCardHeaderI } from '../../interfaces';
|
|
2
|
-
export declare const ContactHeaderMenu: ({
|
|
2
|
+
export declare const ContactHeaderMenu: ({ contact, menuItems, onShare, onEdit, onDuplicate, }: ContactCardHeaderI) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Flex, IconButton
|
|
3
|
-
import { ShareIcon, MoreHorizontal, IconMenu } from '../../components';
|
|
4
|
-
export const ContactHeaderMenu = ({
|
|
5
|
-
const
|
|
6
|
-
return (_jsxs(Flex, { align: "center", position: "relative", gap: "base", children: [_jsx(IconButton, { "aria-label": "share", variant: "menuIcon", icon: _jsx(ShareIcon, { size: 18 }), onClick:
|
|
2
|
+
import { Flex, IconButton } from '@chakra-ui/react';
|
|
3
|
+
import { ShareIcon, MoreHorizontal, IconMenu, Edit, DuplicateIcon, } from '../../components';
|
|
4
|
+
export const ContactHeaderMenu = ({ contact, menuItems, onShare, onEdit, onDuplicate, }) => {
|
|
5
|
+
const hasMenuItems = Boolean(menuItems && menuItems.length > 0);
|
|
6
|
+
return (_jsxs(Flex, { align: "center", position: "relative", gap: "base", children: [_jsx(IconButton, { "aria-label": "share", variant: "menuIcon", icon: _jsx(ShareIcon, { size: 18 }), onClick: onShare, w: "fit-content" }), _jsx(IconButton, { "aria-label": "duplicate", variant: "menuIcon", icon: _jsx(DuplicateIcon, { size: 19 }), onClick: onDuplicate, w: "fit-content" }), _jsx(IconButton, { "aria-label": "edit", variant: "menuIcon", icon: _jsx(Edit, { size: 18, strokeWidth: 1.5 }), onClick: onEdit, w: "fit-content" }), hasMenuItems && (_jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: contact, menuItems: menuItems, disabled: Number(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) < 1 }))] }));
|
|
7
7
|
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { BoxProps, TextProps } from '@chakra-ui/react';
|
|
2
|
+
type AddressInfoProps = {
|
|
3
|
+
address?: string | null;
|
|
4
|
+
city?: string | null;
|
|
5
|
+
state?: string | null;
|
|
6
|
+
zip?: string | null;
|
|
7
|
+
containerProps?: BoxProps;
|
|
8
|
+
lineProps?: TextProps;
|
|
9
|
+
secondaryLineProps?: TextProps;
|
|
10
|
+
};
|
|
11
|
+
export declare const AddressInfo: ({ address, city, state, zip, containerProps, lineProps, secondaryLineProps, }: AddressInfoProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box, Text } from '@chakra-ui/react';
|
|
3
|
+
const defaultLineProps = {
|
|
4
|
+
fontSize: 'xs',
|
|
5
|
+
lineHeight: '16px',
|
|
6
|
+
fontFamily: 'secondary',
|
|
7
|
+
};
|
|
8
|
+
export const AddressInfo = ({ address, city, state, zip, containerProps, lineProps, secondaryLineProps, }) => {
|
|
9
|
+
if (!address && !city && !state && !zip)
|
|
10
|
+
return null;
|
|
11
|
+
const cityState = [city, state].filter(Boolean).join(', ');
|
|
12
|
+
const cityStateZip = [cityState, zip].filter(Boolean).join(' ').trim();
|
|
13
|
+
return (_jsxs(Box, Object.assign({}, containerProps, { children: [address && (_jsx(Text, Object.assign({}, defaultLineProps, lineProps, { children: address }))), cityStateZip && (_jsx(Text, Object.assign({}, defaultLineProps, lineProps, secondaryLineProps, { children: cityStateZip })))] })));
|
|
14
|
+
};
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { t } from 'i18next';
|
|
3
3
|
import { Box, Center, Flex, Stack, Text, Image } from '@chakra-ui/react';
|
|
4
|
-
import { getImageAltText } from '../../../utils';
|
|
5
|
-
import { Location } from '../../../assets/images';
|
|
6
4
|
import { CompanyRating } from './CompanyRating';
|
|
5
|
+
import { AddressInfo } from './AddressInfo';
|
|
7
6
|
export const CompanyInfoCard = ({ contact, }) => {
|
|
8
7
|
if (!contact.companyInfo)
|
|
9
8
|
return null;
|
|
10
|
-
const { company, phone, url, address, city, state, zip,
|
|
11
|
-
|
|
12
|
-
return (_jsxs(Box, { position: "relative", children: [_jsx(CompanyRating, { contact: contact, position: "absolute", top: "0", right: "0", zIndex: "1" }), _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { textTransform: "uppercase", fontSize: "xs", children: t('contacts.companyInfo') }), _jsxs(Flex, { gap: "base", minH: "50px", children: [_jsx(Center, { h: "78px", w: "78px", children: _jsx(Image, { src: Location, alt: alt }) }), _jsxs(Stack, { spacing: "6", children: [_jsxs(Stack, { spacing: "0.5", children: [_jsx(Text, { fontWeight: "bold", fontSize: "lg", children: company }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "sm", children: phone }), _jsx(Text, { variant: "email", lineHeight: "1", fontSize: "sm", children: url })] })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "xs", lineHeight: "16px", children: address }), _jsx(Text, { fontSize: "xs", lineHeight: "16px", children: `${city}, ${state} ${zip}` })] })] })] })] })] }));
|
|
9
|
+
const { company, phone, url, address, city, state, zip, logoUrl } = contact.companyInfo;
|
|
10
|
+
return (_jsxs(Box, { position: "relative", children: [_jsx(CompanyRating, { contact: contact, position: "absolute", top: "0", right: "0", zIndex: "1" }), _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { textTransform: "uppercase", fontSize: "xs", children: t('contacts.companyInfo') }), _jsxs(Flex, { gap: "base", minH: "50px", children: [logoUrl && (_jsx(Center, { boxSize: "78px", overflow: "hidden", border: "1px", borderColor: "lightBlue.6", children: _jsx(Image, { src: logoUrl, alt: "company logo", objectFit: "cover", boxSize: "100%" }) })), _jsxs(Stack, { spacing: "6", children: [_jsxs(Box, { children: [_jsx(Text, { fontWeight: "bold", fontSize: "18px", lineHeight: "27px", children: company }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "sm", fontFamily: "secondary", lineHeight: "18px", children: phone }), _jsx(Text, { variant: "email", lineHeight: "18px", fontSize: "sm", children: url })] })] }), _jsx(AddressInfo, { address: address, city: city, state: state, zip: zip })] })] })] })] }));
|
|
13
11
|
};
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { t } from 'i18next';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { Location } from '../../../assets/images';
|
|
3
|
+
import { Stack, Text } from '@chakra-ui/react';
|
|
4
|
+
import { AddressInfo } from './AddressInfo';
|
|
6
5
|
export const ContactAddressCard = ({ contact, }) => {
|
|
7
6
|
if (!contact)
|
|
8
7
|
return null;
|
|
9
8
|
const { address, city, state, zip, lastName } = contact;
|
|
10
|
-
|
|
11
|
-
return (_jsxs(Stack, { spacing: "base", children: [_jsx(Text, { textTransform: "uppercase", fontSize: "xs", children: t('contacts.homeAddress') }), _jsxs(Flex, { gap: "base", minH: "50px", children: [_jsx(Center, { h: "78px", w: "78px", children: _jsx(Image, { src: Location, alt: alt }) }), _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { fontWeight: "bold", fontSize: "lg", children: `${lastName}s Home` }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "xs", lineHeight: "16px", children: address }), _jsx(Text, { fontSize: "xs", lineHeight: "16px", children: `${city}, ${state} ${zip}` })] })] })] })] }));
|
|
9
|
+
return (_jsxs(Stack, { spacing: "base", children: [_jsx(Text, { textTransform: "uppercase", fontSize: "xs", children: t('contacts.homeAddress') }), _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { fontWeight: "bold", fontSize: "lg", children: `${lastName}s Home` }), _jsx(AddressInfo, { address: address, city: city, state: state, zip: zip })] })] }));
|
|
12
10
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Box, Center, Flex,
|
|
2
|
+
import { Box, Center, Flex, Text } from '@chakra-ui/react';
|
|
3
3
|
import { randomColor } from '../../../utils';
|
|
4
4
|
export const PersonalInfoCard = ({ email, firstName, index, lastName, phone, title, }) => {
|
|
5
5
|
const name = `${firstName} ${lastName}`.trim();
|
|
6
6
|
const initials = firstName.charAt(0) + lastName.charAt(0);
|
|
7
|
-
return (_jsxs(Flex, { gap: "base", minH: "50px", align: "center", children: [_jsx(Center, { h: "78px", w: "78px", bg: randomColor(index), children: _jsx(Text, { fontSize: "
|
|
7
|
+
return (_jsxs(Flex, { gap: "base", minH: "50px", align: "center", children: [_jsx(Center, { h: "78px", w: "78px", bg: randomColor(index), children: _jsx(Text, { fontSize: "35px", fontWeight: "bold", color: "neutral.white", children: initials }) }), _jsxs(Box, { children: [_jsx(Text, { fontWeight: "semibold", fontSize: "22px", lineHeight: "24px", children: name }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "sm", lineHeight: "18px", fontFamily: "secondary", children: title }), _jsx(Text, { fontSize: "sm", lineHeight: "18px", fontFamily: "secondary", children: phone }), _jsx(Text, { variant: "email", lineHeight: "18px", fontSize: "sm", children: email })] })] })] }));
|
|
8
8
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ViewContactPanelI } from '../../../interfaces';
|
|
2
|
-
export declare const ViewContactPanel: ({ contact, menuItems, handleClose, onShare, roleType, }: ViewContactPanelI) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const ViewContactPanel: ({ contact, menuItems, handleClose, onShare, onEdit, onDuplicate, roleType, }: ViewContactPanelI) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -3,7 +3,7 @@ import { t } from 'i18next';
|
|
|
3
3
|
import { DrawerContent, DrawerHeader, DrawerBody, Stack, Container, Divider, } from '@chakra-ui/react';
|
|
4
4
|
import { Contacts } from '../../../assets/images';
|
|
5
5
|
import { CompanyInfoCard, ContactAddressCard, ContactNotes, PanelHeader, RoleTag, PersonalInfoCard, ViewContactHeader, } from '../../../components';
|
|
6
|
-
export const ViewContactPanel = ({ contact, menuItems, handleClose, onShare, roleType, }) => {
|
|
6
|
+
export const ViewContactPanel = ({ contact, menuItems, handleClose, onShare, onEdit, onDuplicate, roleType, }) => {
|
|
7
7
|
const isHomeowner = roleType === 'homeowner';
|
|
8
|
-
return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: handleClose, icon: Contacts, title: t('contacts.contactView') }) }), _jsxs(DrawerBody, { p: "0", overflowX: "hidden", position: "relative", children: [_jsx(RoleTag, { roleType: roleType }), _jsx(Stack, { px: "base", spacing: "base", children: _jsx(Container, { mt: "36px", p: "base", borderRadius: "lg", children: _jsxs(Stack, { spacing: "
|
|
8
|
+
return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: handleClose, icon: Contacts, title: t('contacts.contactView') }) }), _jsxs(DrawerBody, { p: "0", overflowX: "hidden", position: "relative", children: [_jsx(RoleTag, { roleType: roleType }), _jsx(Stack, { px: "base", spacing: "base", children: _jsx(Container, { mt: "36px", p: "base", borderRadius: "lg", children: _jsxs(Stack, { spacing: "4", children: [_jsx(ViewContactHeader, { contact: contact, menuItems: menuItems, onShare: onShare, onEdit: onEdit, onDuplicate: onDuplicate }), _jsx(PersonalInfoCard, Object.assign({}, contact, { index: 0 })), isHomeowner && (_jsxs(_Fragment, { children: [_jsx(Divider, { borderStyle: "dashed", borderColor: "lightBlue.6" }), _jsx(ContactAddressCard, { contact: contact })] })), !isHomeowner && (_jsxs(_Fragment, { children: [_jsx(Divider, { borderStyle: "dashed", borderColor: "lightBlue.6" }), _jsx(CompanyInfoCard, { contact: contact }), _jsx(Divider, { borderStyle: "dashed", borderColor: "lightBlue.6" }), _jsx(ContactNotes, { notes: contact.notes })] }))] }) }) })] })] }));
|
|
9
9
|
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { colors } from '../../theme/colors';
|
|
3
|
+
export const DuplicateIcon = ({ stroke = colors.blue[3], size = 24 }) => {
|
|
4
|
+
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 21", children: _jsxs("g", { id: "Icon_feather-copy", "data-name": "Icon feather-copy", transform: "translate(0.75 0.75)", children: [_jsx("path", { id: "Caminho_14154", "data-name": "Caminho 14154", d: "M15.57,13.5h9.314a2.07,2.07,0,0,1,2.07,2.07v9.314a2.07,2.07,0,0,1-2.07,2.07H15.57a2.07,2.07,0,0,1-2.07-2.07V15.57A2.07,2.07,0,0,1,15.57,13.5Z", transform: "translate(-8.661 -8.661)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), _jsx("path", { id: "Caminho_14155", "data-name": "Caminho 14155", d: "M6.1,16.454H5.07A2.07,2.07,0,0,1,3,14.384V5.07A2.07,2.07,0,0,1,5.07,3h9.314a2.07,2.07,0,0,1,2.07,2.07V6.1", transform: "translate(-3 -3)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" })] }) }));
|
|
5
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { colors } from '../../theme/colors';
|
|
3
|
-
export const Edit = ({ stroke = colors.blue[3], size = 18 }) => {
|
|
4
|
-
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 18.199 18.199", children: _jsx("path", { d: "M13.1 1.868a2.283 2.283 0 0 1 3.228 3.228L5.438 15.989 1 17.199l1.21-4.438Z", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth:
|
|
3
|
+
export const Edit = ({ stroke = colors.blue[3], size = 18, strokeWidth = 2, }) => {
|
|
4
|
+
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 18.199 18.199", children: _jsx("path", { d: "M13.1 1.868a2.283 2.283 0 0 1 3.228 3.228L5.438 15.989 1 17.199l1.21-4.438Z", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: strokeWidth }) }));
|
|
5
5
|
};
|
|
@@ -9,6 +9,7 @@ export * from './DisplayGrid';
|
|
|
9
9
|
export * from './ChevronLeft';
|
|
10
10
|
export * from './DisplayItem';
|
|
11
11
|
export * from './DisplayList';
|
|
12
|
+
export * from './DuplicateIcon';
|
|
12
13
|
export * from './Edit';
|
|
13
14
|
export * from './Eye';
|
|
14
15
|
export * from './EyeOff';
|
|
@@ -25,7 +26,6 @@ export * from './MoreHorizontal';
|
|
|
25
26
|
export * from './OpenVideo';
|
|
26
27
|
export * from './Plus';
|
|
27
28
|
export * from './SearchIcon';
|
|
28
|
-
export * from './Share';
|
|
29
29
|
export * from './ShareIcon';
|
|
30
30
|
export * from './Star';
|
|
31
31
|
export * from './TikTok';
|
|
@@ -9,6 +9,7 @@ export * from './DisplayGrid';
|
|
|
9
9
|
export * from './ChevronLeft';
|
|
10
10
|
export * from './DisplayItem';
|
|
11
11
|
export * from './DisplayList';
|
|
12
|
+
export * from './DuplicateIcon';
|
|
12
13
|
export * from './Edit';
|
|
13
14
|
export * from './Eye';
|
|
14
15
|
export * from './EyeOff';
|
|
@@ -25,7 +26,6 @@ export * from './MoreHorizontal';
|
|
|
25
26
|
export * from './OpenVideo';
|
|
26
27
|
export * from './Plus';
|
|
27
28
|
export * from './SearchIcon';
|
|
28
|
-
export * from './Share';
|
|
29
29
|
export * from './ShareIcon';
|
|
30
30
|
export * from './Star';
|
|
31
31
|
export * from './TikTok';
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import { InfoContactCardI, MenuItemI
|
|
1
|
+
import { InfoContactCardI, MenuItemI } from '../../interfaces';
|
|
2
2
|
export interface ContactCardHeaderI {
|
|
3
3
|
apiError?: boolean;
|
|
4
4
|
contact: InfoContactCardI;
|
|
5
5
|
menuItems?: MenuItemI[];
|
|
6
|
-
|
|
6
|
+
onDuplicate?: () => void;
|
|
7
|
+
onEdit?: () => void;
|
|
8
|
+
onShare?: () => void;
|
|
7
9
|
}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { RoleType } from '../../helpers';
|
|
2
|
-
import { InfoContactCardI, MenuItemI
|
|
2
|
+
import { InfoContactCardI, MenuItemI } from '../../interfaces';
|
|
3
3
|
export interface ViewContactPanelI {
|
|
4
4
|
contact: InfoContactCardI;
|
|
5
5
|
handleClose: () => void;
|
|
6
6
|
menuItems: MenuItemI[];
|
|
7
|
-
onShare:
|
|
7
|
+
onShare: () => void;
|
|
8
|
+
onEdit?: () => void;
|
|
9
|
+
onDuplicate?: () => void;
|
|
8
10
|
roleType: RoleType;
|
|
9
11
|
}
|
|
@@ -3,8 +3,8 @@ export const ContactsMock = [
|
|
|
3
3
|
{
|
|
4
4
|
title: 'Design',
|
|
5
5
|
category: 'Design',
|
|
6
|
-
firstName: '',
|
|
7
|
-
lastName: '',
|
|
6
|
+
firstName: 'John',
|
|
7
|
+
lastName: 'Doe',
|
|
8
8
|
email: faker.internet.email(),
|
|
9
9
|
phone: faker.phone.number(),
|
|
10
10
|
company: faker.company.name(),
|
|
@@ -24,6 +24,7 @@ export const ContactsMock = [
|
|
|
24
24
|
state: faker.location.state(),
|
|
25
25
|
zip: faker.location.zipCode(),
|
|
26
26
|
rating: faker.number.int({ min: 1, max: 5 }),
|
|
27
|
+
logoUrl: faker.image.urlLoremFlickr({ category: 'business' }),
|
|
27
28
|
},
|
|
28
29
|
},
|
|
29
30
|
{
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { ViewContactPanel, RightPanel } from '../../components';
|
|
3
3
|
import { ContactsMock } from '../../mocks';
|
|
4
|
-
import { action } from '@storybook/addon-actions';
|
|
5
4
|
import { homeRoleTypes } from '../../helpers';
|
|
6
5
|
export default {
|
|
7
6
|
title: 'Components/Contacts',
|
|
@@ -15,12 +14,6 @@ export default {
|
|
|
15
14
|
args: {
|
|
16
15
|
contact: ContactsMock[0],
|
|
17
16
|
roleType: 'member',
|
|
18
|
-
menuItems: [
|
|
19
|
-
{
|
|
20
|
-
label: 'Edit',
|
|
21
|
-
handleClick: action('Edit'),
|
|
22
|
-
},
|
|
23
|
-
],
|
|
24
17
|
},
|
|
25
18
|
};
|
|
26
19
|
export const ViewContactPanelComponent = (args) => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Meta } from '@storybook/react';
|
|
2
|
-
import {
|
|
3
|
-
declare const _default: Meta<typeof
|
|
2
|
+
import { ShareIcon } from '../../components';
|
|
3
|
+
declare const _default: Meta<typeof ShareIcon>;
|
|
4
4
|
export default _default;
|
|
5
|
-
export declare const
|
|
5
|
+
export declare const ShareIconComponent: typeof ShareIcon;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Center } from '@chakra-ui/react';
|
|
3
|
-
import {
|
|
3
|
+
import { ShareIcon } from '../../components';
|
|
4
4
|
import { colors } from '../../theme/colors';
|
|
5
5
|
export default {
|
|
6
6
|
title: 'Components/Icons',
|
|
7
|
-
component:
|
|
7
|
+
component: ShareIcon,
|
|
8
8
|
};
|
|
9
|
-
export const
|
|
10
|
-
return (_jsx(Center, { width: "10rem", p: "base", bg: "white", children: _jsx(
|
|
9
|
+
export const ShareIconComponent = (args) => {
|
|
10
|
+
return (_jsx(Center, { width: "10rem", p: "base", bg: "white", children: _jsx(ShareIcon, Object.assign({}, args, { stroke: colors.blue[1] })) }));
|
|
11
11
|
};
|
package/package.json
CHANGED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { colors } from '../../theme/colors';
|
|
3
|
-
export const Share = ({ stroke = colors.blue[3], size = 24 }) => {
|
|
4
|
-
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16.256 17.896", children: _jsxs("g", { id: "Icon_feather-share-2", "data-name": "Icon feather-share-2", transform: "translate(-3.75 -2.25)", children: [_jsx("path", { id: "Caminho_18690", "data-name": "Caminho 18690", d: "M27.419,5.459A2.459,2.459,0,1,1,24.959,3,2.459,2.459,0,0,1,27.419,5.459Z", transform: "translate(-8.163 0)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), _jsx("path", { id: "Caminho_18691", "data-name": "Caminho 18691", d: "M9.419,15.959A2.459,2.459,0,1,1,6.959,13.5,2.459,2.459,0,0,1,9.419,15.959Z", transform: "translate(0 -4.761)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), _jsx("path", { id: "Caminho_18692", "data-name": "Caminho 18692", d: "M27.419,26.459A2.459,2.459,0,1,1,24.959,24,2.459,2.459,0,0,1,27.419,26.459Z", transform: "translate(-8.163 -9.523)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), _jsx("path", { id: "Caminho_18693", "data-name": "Caminho 18693", d: "M12.885,20.265l5.6,3.263", transform: "translate(-3.802 -7.829)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), _jsx("path", { id: "Caminho_18694", "data-name": "Caminho 18694", d: "M18.476,9.765l-5.591,3.263", transform: "translate(-3.802 -3.068)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" })] }) }));
|
|
5
|
-
};
|