@homefile/components-v2 2.7.6 → 2.7.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.
@@ -3,5 +3,5 @@ import { t } from 'i18next';
3
3
  import { Button, Image } from '@chakra-ui/react';
4
4
  import { NeedHelp } from '../../assets/images';
5
5
  export const HelpButton = ({ children, onClick }) => {
6
- return (_jsxs(_Fragment, { children: [_jsx(Button, { minW: "fit-content", maxW: "fit-content", variant: "icon", onClick: onClick, children: _jsx(Image, { src: NeedHelp, boxSize: "1.8rem", "aria-label": t('help.ariaLabel') }) }), children] }));
6
+ return (_jsxs(_Fragment, { children: [_jsx(Button, { minW: "fit-content", maxW: "fit-content", variant: "icon", onClick: onClick, "data-testid": "help-button", children: _jsx(Image, { src: NeedHelp, boxSize: "1.8rem", "aria-label": t('help.ariaLabel') }) }), children] }));
7
7
  };
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Box, Button, Flex } from '@chakra-ui/react';
3
3
  export const FooterButtons = ({ button1, button2, button3, px = 'base', }) => {
4
- return (_jsxs(Flex, { align: "center", justifyContent: "space-between", w: "full", px: px, children: [_jsxs(Flex, { align: "center", gap: "2", children: [button1 ? (_jsx(Button, { variant: button1.buttonStyle, onClick: button1.onClick, disabled: button1.isDisabled, isLoading: button1.isLoading, children: button1.label })) : (_jsx(Box, {})), button2 && (_jsx(Button, { variant: button2.buttonStyle, onClick: button2.onClick, disabled: button2.isDisabled, isLoading: button2.isLoading, children: button2.label }))] }), button3 && (_jsx(Button, { variant: button3.buttonStyle, onClick: button3.onClick, disabled: button3.isDisabled, isLoading: button3.isLoading, children: button3.label }))] }));
4
+ return (_jsxs(Flex, { align: "center", justifyContent: "space-between", w: "full", px: px, children: [_jsxs(Flex, { align: "center", gap: "2", children: [button1 ? (_jsx(Button, { "data-testid": "footer-button-1", variant: button1.buttonStyle, onClick: button1.onClick, disabled: button1.isDisabled, isLoading: button1.isLoading, children: button1.label })) : (_jsx(Box, {})), button2 && (_jsx(Button, { "data-testid": "footer-button-2", variant: button2.buttonStyle, onClick: button2.onClick, disabled: button2.isDisabled, isLoading: button2.isLoading, children: button2.label }))] }), button3 && (_jsx(Button, { "data-testid": "footer-button-3", variant: button3.buttonStyle, onClick: button3.onClick, disabled: button3.isDisabled, isLoading: button3.isLoading, children: button3.label }))] }));
5
5
  };
@@ -5,5 +5,5 @@ import { Close } from '..';
5
5
  import { getIconAltText } from '../../utils';
6
6
  export const PanelHeader = ({ bg = 'neutral.white', children, handleCloseButton, icon = '', title = '', }) => {
7
7
  const alt = getIconAltText(icon);
8
- return (_jsxs(Flex, { justify: "space-between", bg: bg, py: "base", pl: "base", pr: "2", alignItems: "center", children: [_jsxs(Flex, { gap: "base", children: [icon && _jsx(Image, { src: icon, alt: alt, maxW: "24px", maxH: "24px" }), _jsx(Text, { fontWeight: "regular", textTransform: "capitalize", children: title })] }), _jsxs(Flex, { align: "center", children: [children, _jsx(IconButton, { variant: "menuIconWithShadow", "aria-label": t('myHomes.newHome.btAria'), maxW: "fit-content", onClick: handleCloseButton, icon: _jsx(Close, { size: 32 }) })] })] }));
8
+ return (_jsxs(Flex, { justify: "space-between", bg: bg, py: "base", pl: "base", pr: "2", alignItems: "center", children: [_jsxs(Flex, { gap: "base", children: [icon && _jsx(Image, { src: icon, alt: alt, maxW: "24px", maxH: "24px" }), _jsx(Text, { fontWeight: "regular", textTransform: "capitalize", children: title })] }), _jsxs(Flex, { align: "center", children: [children, _jsx(IconButton, { "data-testid": "panel-header-icon-button", variant: "menuIconWithShadow", "aria-label": t('myHomes.newHome.btAria'), maxW: "fit-content", onClick: handleCloseButton, icon: _jsx(Close, { size: 32 }) })] })] }));
9
9
  };
@@ -18,6 +18,6 @@ export const SelectInput = ({ filterValue = '', handleClick, handleFilter = () =
18
18
  handleClick(item);
19
19
  setSelectedValue(name);
20
20
  };
21
- return (_jsx(SelectItem, { onClick: handleItemClick, children: _jsx(Text, Object.assign({}, textOptionVariants[variant], { children: name })) }, id));
21
+ return (_jsx(SelectItem, { onClick: handleItemClick, "data-testid": id, children: _jsx(Text, Object.assign({}, textOptionVariants[variant], { children: name })) }, id));
22
22
  })] })] }));
23
23
  };
@@ -3,7 +3,7 @@ import { MenuButton, IconButton, Menu, MenuItem, MenuList, Box, } from '@chakra-
3
3
  import { Overlay } from '..';
4
4
  import { Fragment } from 'react/jsx-runtime';
5
5
  export const IconMenu = ({ disabled = false, icon, itemForm, menuItems, onClick, variant = 'menuIcon', width = 'fit-content', zIndex = '999', }) => {
6
- return (_jsx(Box, { zIndex: zIndex, children: _jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: _jsx(Fragment, { children: icon }), variant: variant, w: width, disabled: disabled, marginTop: "0 !important", onClick: onClick }), _jsx(MenuList, { zIndex: "5", children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { onClick: () => handleClick(itemForm), _hover: {
6
+ return (_jsx(Box, { zIndex: zIndex, children: _jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: _jsx(Fragment, { children: icon }), variant: variant, w: width, disabled: disabled, marginTop: "0 !important", onClick: onClick }), _jsx(MenuList, { zIndex: "5", children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { "data-testid": label, onClick: () => handleClick(itemForm), _hover: {
7
7
  bg: 'lightGreen.1',
8
8
  }, _focus: {
9
9
  bg: 'lightGreen.1',
@@ -9,5 +9,5 @@ export const ShareHomeForm = ({ contacts, loading, onAdd, onEmailSave, }) => {
9
9
  return (_jsx(Box, { p: "base", w: "100%", children: _jsxs(Flex, { w: "100%", gap: "base", children: [_jsxs(Flex, { position: "relative", flex: 1, children: [_jsx(ShareWithButton, { marginRight: "-1px", onClick: handleOpen }), _jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: t('forms.errorEmail'), handleChange: handleChange, hasError: hasError, id: "email", placeholder: t('shareHome.placeholder'), value: contact.email, noOfLines: 1 }), open && (_jsx(ShareHomeContactList, { contacts: contacts, onClick: handleSelectContact, onDone: handleOpen, onChange: handleChange, onSave: (contact) => {
10
10
  onEmailSave(contact);
11
11
  handleOpen();
12
- }, selectedContact: contact }))] }), _jsx(SelectInputWithBadge, { handleClick: handleInputSelect, initialValue: accountTypes[0], items: types, width: "70px", height: "md" }), _jsx(Button, { variant: "tertiary", onClick: handleSubmit, disabled: !contact.email, isLoading: loading, h: "48px", children: t('shareHome.btInvite') })] }) }));
12
+ }, selectedContact: contact }))] }), _jsx(SelectInputWithBadge, { handleClick: handleInputSelect, initialValue: accountTypes[0], items: types, width: "70px", height: "md" }), _jsx(Button, { "data-testid": "share-home-form-submit", variant: "tertiary", onClick: handleSubmit, disabled: !contact.email, isLoading: loading, h: "48px", children: t('shareHome.btInvite') })] }) }));
13
13
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homefile/components-v2",
3
- "version": "2.7.6",
3
+ "version": "2.7.7",
4
4
  "author": "Homefile",
5
5
  "license": "UNLICENSED",
6
6
  "typings": "dist/index.d.ts",
@@ -6,8 +6,18 @@ import { HelpButtonI } from '@/interfaces'
6
6
  export const HelpButton = ({ children, onClick }: HelpButtonI) => {
7
7
  return (
8
8
  <>
9
- <Button minW="fit-content" maxW="fit-content" variant="icon" onClick={onClick}>
10
- <Image src={NeedHelp} boxSize="1.8rem" aria-label={t('help.ariaLabel')} />
9
+ <Button
10
+ minW="fit-content"
11
+ maxW="fit-content"
12
+ variant="icon"
13
+ onClick={onClick}
14
+ data-testid="help-button"
15
+ >
16
+ <Image
17
+ src={NeedHelp}
18
+ boxSize="1.8rem"
19
+ aria-label={t('help.ariaLabel')}
20
+ />
11
21
  </Button>
12
22
  {children}
13
23
  </>
@@ -12,6 +12,7 @@ export const FooterButtons = ({
12
12
  <Flex align="center" gap="2">
13
13
  {button1 ? (
14
14
  <Button
15
+ data-testid="footer-button-1"
15
16
  variant={button1.buttonStyle}
16
17
  onClick={button1.onClick}
17
18
  disabled={button1.isDisabled}
@@ -24,6 +25,7 @@ export const FooterButtons = ({
24
25
  )}
25
26
  {button2 && (
26
27
  <Button
28
+ data-testid="footer-button-2"
27
29
  variant={button2.buttonStyle}
28
30
  onClick={button2.onClick}
29
31
  disabled={button2.isDisabled}
@@ -35,6 +37,7 @@ export const FooterButtons = ({
35
37
  </Flex>
36
38
  {button3 && (
37
39
  <Button
40
+ data-testid="footer-button-3"
38
41
  variant={button3.buttonStyle}
39
42
  onClick={button3.onClick}
40
43
  disabled={button3.isDisabled}
@@ -30,6 +30,7 @@ export const PanelHeader = ({
30
30
  <Flex align="center">
31
31
  {children}
32
32
  <IconButton
33
+ data-testid="panel-header-icon-button"
33
34
  variant="menuIconWithShadow"
34
35
  aria-label={t('myHomes.newHome.btAria')}
35
36
  maxW="fit-content"
@@ -71,7 +71,7 @@ export const SelectInput = ({
71
71
  setSelectedValue(name)
72
72
  }
73
73
  return (
74
- <SelectItem key={id} onClick={handleItemClick}>
74
+ <SelectItem key={id} onClick={handleItemClick} data-testid={id}>
75
75
  <Text {...textOptionVariants[variant]}>{name}</Text>
76
76
  </SelectItem>
77
77
  )
@@ -39,6 +39,7 @@ export const IconMenu = <T extends unknown>({
39
39
  <MenuList zIndex="5">
40
40
  {menuItems?.map(({ handleClick, label }) => (
41
41
  <MenuItem
42
+ data-testid={label}
42
43
  key={label}
43
44
  onClick={() => handleClick(itemForm)}
44
45
  _hover={{
@@ -61,6 +61,7 @@ export const ShareHomeForm = ({
61
61
  height="md"
62
62
  />
63
63
  <Button
64
+ data-testid="share-home-form-submit"
64
65
  variant="tertiary"
65
66
  onClick={handleSubmit}
66
67
  disabled={!contact.email}