@homefile/components-v2 2.8.42 → 2.8.43
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/appBar/ContactList.js +1 -1
- package/dist/components/appBar/HomefileLogo.js +1 -1
- package/dist/components/appBar/NotificationsReminder.js +1 -1
- package/dist/components/appBar/PeopleConnected.js +1 -1
- package/dist/components/appBar/StorageUsed.js +1 -1
- package/dist/components/appBar/TourButton.js +1 -1
- package/dist/components/appBar/Trash.js +1 -1
- package/dist/components/appBar/TutorialsButton.js +1 -1
- package/dist/components/appBar/UserProfile.js +1 -1
- package/dist/interfaces/rooms/RoomsMenu.interface.d.ts +6 -1
- package/package.json +1 -1
- package/src/components/appBar/ContactList.tsx +1 -1
- package/src/components/appBar/HomefileLogo.tsx +6 -1
- package/src/components/appBar/NotificationsReminder.tsx +1 -1
- package/src/components/appBar/PeopleConnected.tsx +7 -1
- package/src/components/appBar/StorageUsed.tsx +6 -1
- package/src/components/appBar/TourButton.tsx +1 -0
- package/src/components/appBar/Trash.tsx +1 -1
- package/src/components/appBar/TutorialsButton.tsx +1 -1
- package/src/components/appBar/UserProfile.tsx +1 -1
- package/src/interfaces/rooms/RoomsMenu.interface.ts +7 -1
|
@@ -8,5 +8,5 @@ import { MOBILE_WIDTH } from '../../utils';
|
|
|
8
8
|
export const ContactList = ({ onClick, total }) => {
|
|
9
9
|
const { windowDimensions: { width }, } = useWindowDimensions();
|
|
10
10
|
const isMobile = width < MOBILE_WIDTH;
|
|
11
|
-
return (_jsx(Tooltip, { label: t('tooltips.contacts'), children: _jsx(Box, { id: "viewContacts", children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, children: [_jsx(Img, { src: Contact, "aria-label": t('tooltips.contacts'), h: "26px", w: "auto" }), !isMobile && _jsx(NumberBadge, { total: total })] }) }) }));
|
|
11
|
+
return (_jsx(Tooltip, { label: t('tooltips.contacts'), children: _jsx(Box, { id: "viewContacts", "data-testid": "contact-list", children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, children: [_jsx(Img, { src: Contact, "aria-label": t('tooltips.contacts'), h: "26px", w: "auto" }), !isMobile && _jsx(NumberBadge, { total: total })] }) }) }));
|
|
12
12
|
};
|
|
@@ -6,5 +6,5 @@ import { MOBILE_WIDTH } from '../../utils';
|
|
|
6
6
|
export const HomefileLogo = ({ onClick }) => {
|
|
7
7
|
const { windowDimensions: { width }, } = useWindowDimensions();
|
|
8
8
|
const isMobile = width < MOBILE_WIDTH;
|
|
9
|
-
return (_jsx(Button, { variant: "menuIcon", maxW: "fit-content", onClick: onClick, children: _jsx(Image, { src: isMobile ? LogoSmall : Homefile, alt: "Homefile", h: "image.logo" }) }));
|
|
9
|
+
return (_jsx(Button, { variant: "menuIcon", maxW: "fit-content", onClick: onClick, "data-testid": "homefile-logo", children: _jsx(Image, { src: isMobile ? LogoSmall : Homefile, alt: "Homefile", h: "image.logo" }) }));
|
|
10
10
|
};
|
|
@@ -9,7 +9,7 @@ import { MOBILE_WIDTH } from '../../utils';
|
|
|
9
9
|
export const NotificationsReminder = ({ onClick, total }) => {
|
|
10
10
|
const { windowDimensions: { width }, } = useWindowDimensions();
|
|
11
11
|
const isMobile = width < MOBILE_WIDTH;
|
|
12
|
-
return (_jsx(Tooltip, { label: t('tooltips.notifications'), children: _jsx(Box, { id: "notificationsRemember", children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, children: [_jsx(Img, { src: Speaker, "aria-label": t('tooltips.notifications'), h: "26px", w: "auto" }), !isMobile && (_jsx(NumberBadge, { total: total, background: "linear-gradient(120deg, #0b8dd7, #730bd7, #0bd7ac)", backgroundSize: 100, animation: `${bgGradient} 6s linear infinite` }))] }) }) }));
|
|
12
|
+
return (_jsx(Tooltip, { label: t('tooltips.notifications'), children: _jsx(Box, { id: "notificationsRemember", "data-testid": "notifications-reminder", children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, children: [_jsx(Img, { src: Speaker, "aria-label": t('tooltips.notifications'), h: "26px", w: "auto" }), !isMobile && (_jsx(NumberBadge, { total: total, background: "linear-gradient(120deg, #0b8dd7, #730bd7, #0bd7ac)", backgroundSize: 100, animation: `${bgGradient} 6s linear infinite` }))] }) }) }));
|
|
13
13
|
};
|
|
14
14
|
const bgGradient = keyframes `
|
|
15
15
|
0% {
|
|
@@ -8,5 +8,5 @@ import { MOBILE_WIDTH } from '../../utils';
|
|
|
8
8
|
export const PeopleConnected = ({ onClick, total }) => {
|
|
9
9
|
const { windowDimensions: { width }, } = useWindowDimensions();
|
|
10
10
|
const isMobile = width < MOBILE_WIDTH;
|
|
11
|
-
return (_jsx(Tooltip, { label: t('tooltips.shareHome'), children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, id: "shareWithOthers", children: [_jsx(Img, { src: PersonMail, "aria-label": t('tooltips.shareHome'), h: "26px", w: "auto" }), !isMobile && _jsx(NumberBadge, { total: total })] }) }));
|
|
11
|
+
return (_jsx(Tooltip, { label: t('tooltips.shareHome'), children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, id: "shareWithOthers", "data-testid": "people-connected", children: [_jsx(Img, { src: PersonMail, "aria-label": t('tooltips.shareHome'), h: "26px", w: "auto" }), !isMobile && _jsx(NumberBadge, { total: total })] }) }));
|
|
12
12
|
};
|
|
@@ -8,5 +8,5 @@ export const StorageUsed = ({ onClick, totalStorage, state, totalUsed, }) => {
|
|
|
8
8
|
? t('subscription.trial2')
|
|
9
9
|
: `${totalUsed} ${t('subscription.of')} ${totalStorage}GB`;
|
|
10
10
|
const progressValue = (totalUsed / totalStorage) * 100;
|
|
11
|
-
return (_jsx(Tooltip, { label: t('tooltips.storage'), children: _jsxs(Box, { as: "button", onClick: onClick, id: "storageUsed", children: [_jsx(Text, { fontSize: "xxs", textAlign: "left", children: text }), _jsx(Progress, { size: "md", value: progressValue, height: "10px", w: "60px", variant: progressColor[state] })] }) }));
|
|
11
|
+
return (_jsx(Tooltip, { label: t('tooltips.storage'), children: _jsxs(Box, { as: "button", onClick: onClick, id: "storageUsed", "data-testid": "storage-used", children: [_jsx(Text, { fontSize: "xxs", textAlign: "left", children: text }), _jsx(Progress, { size: "md", value: progressValue, height: "10px", w: "60px", variant: progressColor[state] })] }) }));
|
|
12
12
|
};
|
|
@@ -3,5 +3,5 @@ import { t } from 'i18next';
|
|
|
3
3
|
import { Box, Flex, Image } from '@chakra-ui/react';
|
|
4
4
|
import { Flag } from '../../assets/images';
|
|
5
5
|
export const TourButton = ({ label, onClick }) => {
|
|
6
|
-
return (_jsx(Box, { as: "button", boxShadow: "none", borderRadius: "full", bg: "lightGreen.5", fontFamily: "secondary", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.4' }, onClick: onClick, flexShrink: 0, overflow: "hidden", children: _jsxs(Flex, { align: "center", pr: "base", py: "1", children: [_jsx(Image, { src: Flag, w: "40px", h: "auto", alt: "tour", position: "relative", bottom: "-4px" }), label !== null && label !== void 0 ? label : t('help.buttonTour')] }) }));
|
|
6
|
+
return (_jsx(Box, { "data-testid": "tour-button", as: "button", boxShadow: "none", borderRadius: "full", bg: "lightGreen.5", fontFamily: "secondary", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.4' }, onClick: onClick, flexShrink: 0, overflow: "hidden", children: _jsxs(Flex, { align: "center", pr: "base", py: "1", children: [_jsx(Image, { src: Flag, w: "40px", h: "auto", alt: "tour", position: "relative", bottom: "-4px" }), label !== null && label !== void 0 ? label : t('help.buttonTour')] }) }));
|
|
7
7
|
};
|
|
@@ -8,5 +8,5 @@ import { MOBILE_WIDTH } from '../../utils';
|
|
|
8
8
|
export const Trash = ({ onClick, total }) => {
|
|
9
9
|
const { windowDimensions: { width }, } = useWindowDimensions();
|
|
10
10
|
const isMobile = width < MOBILE_WIDTH;
|
|
11
|
-
return (_jsx(Tooltip, { label: t('tooltips.deleted'), children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, children: [_jsx(TrashIcon, { stroke: colors.violet[1], size: 28 }), !isMobile && _jsx(NumberBadge, { total: total, bg: "violet.1" })] }) }));
|
|
11
|
+
return (_jsx(Tooltip, { label: t('tooltips.deleted'), children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, "data-testid": "appbar-trash", children: [_jsx(TrashIcon, { stroke: colors.violet[1], size: 28 }), !isMobile && _jsx(NumberBadge, { total: total, bg: "violet.1" })] }) }));
|
|
12
12
|
};
|
|
@@ -3,5 +3,5 @@ import { t } from 'i18next';
|
|
|
3
3
|
import { Tooltip, Button, Image } from '@chakra-ui/react';
|
|
4
4
|
import { NeedHelp } from '../../assets/images';
|
|
5
5
|
export const TutorialsButton = ({ onClick }) => {
|
|
6
|
-
return (_jsx(Tooltip, { label: t('tooltips.help'), children: _jsx(Button, { id: "feedback", variant: "icon", w: "fit-content", onClick: onClick, children: _jsx(Image, { src: NeedHelp, w: "27px", h: "auto", "aria-label": t('ariaLabels.help') }) }) }));
|
|
6
|
+
return (_jsx(Tooltip, { label: t('tooltips.help'), "data-testid": "tutorials-button", children: _jsx(Button, { id: "feedback", variant: "icon", w: "fit-content", onClick: onClick, children: _jsx(Image, { src: NeedHelp, w: "27px", h: "auto", "aria-label": t('ariaLabels.help') }) }) }));
|
|
7
7
|
};
|
|
@@ -7,5 +7,5 @@ import { MOBILE_WIDTH } from '../../utils';
|
|
|
7
7
|
export const UserProfile = ({ avatarUrl, firstName, userName, menuItems, bg, }) => {
|
|
8
8
|
const { windowDimensions: { width }, } = useWindowDimensions();
|
|
9
9
|
const isMobile = width < MOBILE_WIDTH;
|
|
10
|
-
return (_jsxs(Flex, { alignItems: "center", gap: ['1', 'base'], children: [!isMobile && (_jsx(Text, { minW: "fit-content", noOfLines: 1, children: `${t('welcome.greeting2')} ${firstName}` })), _jsx(Avatar, { size: "sm", name: userName, bg: bg, src: avatarUrl, fontWeight: "bold", color: "neutral.white", id: "profile" }), _jsx(IconMenu, { menuItems: menuItems })] }));
|
|
10
|
+
return (_jsxs(Flex, { alignItems: "center", gap: ['1', 'base'], "data-testid": "user-profile", children: [!isMobile && (_jsx(Text, { minW: "fit-content", noOfLines: 1, children: `${t('welcome.greeting2')} ${firstName}` })), _jsx(Avatar, { size: "sm", name: userName, bg: bg, src: avatarUrl, fontWeight: "bold", color: "neutral.white", id: "profile" }), _jsx(IconMenu, { menuItems: menuItems })] }));
|
|
11
11
|
};
|
|
@@ -16,6 +16,11 @@ export declare enum RoomEnum {
|
|
|
16
16
|
HALLWAY = "hallway",
|
|
17
17
|
STRUCTURE = "structure"
|
|
18
18
|
}
|
|
19
|
+
export interface VideoI {
|
|
20
|
+
bucketName: string;
|
|
21
|
+
fileName: string;
|
|
22
|
+
extension: string;
|
|
23
|
+
}
|
|
19
24
|
export interface RoomItemI {
|
|
20
25
|
active: boolean;
|
|
21
26
|
_id: string;
|
|
@@ -25,7 +30,7 @@ export interface RoomItemI {
|
|
|
25
30
|
order?: number;
|
|
26
31
|
subTypes?: string[];
|
|
27
32
|
items?: ReportsI[];
|
|
28
|
-
videos?:
|
|
33
|
+
videos?: VideoI[];
|
|
29
34
|
}
|
|
30
35
|
export interface AddRoomI {
|
|
31
36
|
name: string;
|
package/package.json
CHANGED
|
@@ -13,7 +13,7 @@ export const ContactList = ({ onClick, total }: AppBarIconI) => {
|
|
|
13
13
|
const isMobile = width < MOBILE_WIDTH
|
|
14
14
|
return (
|
|
15
15
|
<Tooltip label={t('tooltips.contacts')}>
|
|
16
|
-
<Box id="viewContacts">
|
|
16
|
+
<Box id="viewContacts" data-testid="contact-list">
|
|
17
17
|
<Flex gap="1" as="button" onClick={onClick}>
|
|
18
18
|
<Img
|
|
19
19
|
src={Contact}
|
|
@@ -10,7 +10,12 @@ export const HomefileLogo = ({ onClick }: HomefileLogoI) => {
|
|
|
10
10
|
} = useWindowDimensions()
|
|
11
11
|
const isMobile = width < MOBILE_WIDTH
|
|
12
12
|
return (
|
|
13
|
-
<Button
|
|
13
|
+
<Button
|
|
14
|
+
variant="menuIcon"
|
|
15
|
+
maxW="fit-content"
|
|
16
|
+
onClick={onClick}
|
|
17
|
+
data-testid="homefile-logo"
|
|
18
|
+
>
|
|
14
19
|
<Image
|
|
15
20
|
src={isMobile ? LogoSmall : Homefile}
|
|
16
21
|
alt="Homefile"
|
|
@@ -14,7 +14,7 @@ export const NotificationsReminder = ({ onClick, total }: AppBarIconI) => {
|
|
|
14
14
|
const isMobile = width < MOBILE_WIDTH
|
|
15
15
|
return (
|
|
16
16
|
<Tooltip label={t('tooltips.notifications')}>
|
|
17
|
-
<Box id="notificationsRemember">
|
|
17
|
+
<Box id="notificationsRemember" data-testid="notifications-reminder">
|
|
18
18
|
<Flex gap="1" as="button" onClick={onClick}>
|
|
19
19
|
<Img
|
|
20
20
|
src={Speaker}
|
|
@@ -13,7 +13,13 @@ export const PeopleConnected = ({ onClick, total }: AppBarIconI) => {
|
|
|
13
13
|
const isMobile = width < MOBILE_WIDTH
|
|
14
14
|
return (
|
|
15
15
|
<Tooltip label={t('tooltips.shareHome')}>
|
|
16
|
-
<Flex
|
|
16
|
+
<Flex
|
|
17
|
+
gap="1"
|
|
18
|
+
as="button"
|
|
19
|
+
onClick={onClick}
|
|
20
|
+
id="shareWithOthers"
|
|
21
|
+
data-testid="people-connected"
|
|
22
|
+
>
|
|
17
23
|
<Img
|
|
18
24
|
src={PersonMail}
|
|
19
25
|
aria-label={t('tooltips.shareHome')}
|
|
@@ -16,7 +16,12 @@ export const StorageUsed = ({
|
|
|
16
16
|
const progressValue = (totalUsed / totalStorage) * 100
|
|
17
17
|
return (
|
|
18
18
|
<Tooltip label={t('tooltips.storage')}>
|
|
19
|
-
<Box
|
|
19
|
+
<Box
|
|
20
|
+
as="button"
|
|
21
|
+
onClick={onClick}
|
|
22
|
+
id="storageUsed"
|
|
23
|
+
data-testid="storage-used"
|
|
24
|
+
>
|
|
20
25
|
<Text fontSize="xxs" textAlign="left">
|
|
21
26
|
{text}
|
|
22
27
|
</Text>
|
|
@@ -13,7 +13,7 @@ export const Trash = ({ onClick, total }: AppBarIconI) => {
|
|
|
13
13
|
const isMobile = width < MOBILE_WIDTH
|
|
14
14
|
return (
|
|
15
15
|
<Tooltip label={t('tooltips.deleted')}>
|
|
16
|
-
<Flex gap="1" as="button" onClick={onClick}>
|
|
16
|
+
<Flex gap="1" as="button" onClick={onClick} data-testid="appbar-trash">
|
|
17
17
|
<TrashIcon stroke={colors.violet[1]} size={28} />
|
|
18
18
|
{!isMobile && <NumberBadge total={total} bg="violet.1" />}
|
|
19
19
|
</Flex>
|
|
@@ -5,7 +5,7 @@ import { TutorialsButtonI } from '@/interfaces'
|
|
|
5
5
|
|
|
6
6
|
export const TutorialsButton = ({ onClick }: TutorialsButtonI) => {
|
|
7
7
|
return (
|
|
8
|
-
<Tooltip label={t('tooltips.help')}>
|
|
8
|
+
<Tooltip label={t('tooltips.help')} data-testid="tutorials-button">
|
|
9
9
|
<Button id="feedback" variant="icon" w="fit-content" onClick={onClick}>
|
|
10
10
|
<Image
|
|
11
11
|
src={NeedHelp}
|
|
@@ -17,7 +17,7 @@ export const UserProfile = ({
|
|
|
17
17
|
} = useWindowDimensions()
|
|
18
18
|
const isMobile = width < MOBILE_WIDTH
|
|
19
19
|
return (
|
|
20
|
-
<Flex alignItems="center" gap={['1', 'base']}>
|
|
20
|
+
<Flex alignItems="center" gap={['1', 'base']} data-testid="user-profile">
|
|
21
21
|
{!isMobile && (
|
|
22
22
|
<Text minW="fit-content" noOfLines={1}>{`${t(
|
|
23
23
|
'welcome.greeting2'
|
|
@@ -18,6 +18,12 @@ export enum RoomEnum {
|
|
|
18
18
|
STRUCTURE = 'structure',
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
export interface VideoI {
|
|
22
|
+
bucketName: string
|
|
23
|
+
fileName: string
|
|
24
|
+
extension: string
|
|
25
|
+
}
|
|
26
|
+
|
|
21
27
|
export interface RoomItemI {
|
|
22
28
|
active: boolean
|
|
23
29
|
_id: string
|
|
@@ -27,7 +33,7 @@ export interface RoomItemI {
|
|
|
27
33
|
order?: number
|
|
28
34
|
subTypes?: string[]
|
|
29
35
|
items?: ReportsI[]
|
|
30
|
-
videos?:
|
|
36
|
+
videos?: VideoI[]
|
|
31
37
|
}
|
|
32
38
|
|
|
33
39
|
export interface AddRoomI {
|