cozy-ui 57.5.5 → 57.9.0

package/CHANGELOG.md

@@ -1,3 +1,49 @@
+# [57.9.0](https://github.com/cozy/cozy-ui/compare/v57.8.0...v57.9.0) (2021-11-17)
+
+
+### Bug Fixes
+
+* Allow `Radio` to be part of a `RadioGroup` ([0e3cb6c](https://github.com/cozy/cozy-ui/commit/0e3cb6c)), closes [cozy/cozy-ui#1901](https://github.com/cozy/cozy-ui/issues/1901)
+
+
+### Features
+
+* Refactor Radio documentation with variants ([fa2efc4](https://github.com/cozy/cozy-ui/commit/fa2efc4))
+
+# [57.8.0](https://github.com/cozy/cozy-ui/compare/v57.7.0...v57.8.0) (2021-11-15)
+
+
+### Bug Fixes
+
+* Set correct action opacity for Mui theme ([ebb4f45](https://github.com/cozy/cozy-ui/commit/ebb4f45))
+* Set correct border opacities in Mui theme ([7b4c6e0](https://github.com/cozy/cozy-ui/commit/7b4c6e0))
+
+
+### Features
+
+* New Button component conform to the figma specifications ([46e551b](https://github.com/cozy/cozy-ui/commit/46e551b))
+
+# [57.7.0](https://github.com/cozy/cozy-ui/compare/v57.6.0...v57.7.0) (2021-11-12)
+
+
+### Bug Fixes
+
+* Add viewBox to LogoutLarge icon ([6196caa](https://github.com/cozy/cozy-ui/commit/6196caa))
+
+
+### Features
+
+* Add IconComponent prop to SquareAppIcon ([22591ff](https://github.com/cozy/cozy-ui/commit/22591ff))
+* Add type prop to SquareAppIcon ([d9799c7](https://github.com/cozy/cozy-ui/commit/d9799c7))
+* Do not use backdrop-filter on SquareAppIcon anymore ([451d54f](https://github.com/cozy/cozy-ui/commit/451d54f))
+
+# [57.6.0](https://github.com/cozy/cozy-ui/compare/v57.5.5...v57.6.0) (2021-11-08)
+
+
+### Features
+
+* Add `autoCapitalize` prop in Fields ([54efb34](https://github.com/cozy/cozy-ui/commit/54efb34))
+
 ## [57.5.5](https://github.com/cozy/cozy-ui/compare/v57.5.4...v57.5.5) (2021-11-08)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "57.5.5",
+  "version": "57.9.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/AppSections/Readme.md

@@ -1,25 +1,22 @@
 ```jsx
 import { useState } from 'react'
-import mockApps from './_mockApps';
-import { I18n } from '../I18n';
-import { BreakpointsProvider } from '../hooks/useBreakpoints';
-import Sections from 'cozy-ui/transpiled/react/AppSections';
-import Variants from 'cozy-ui/docs/components/Variants';
+import mockApps from './_mockApps'
+import { I18n } from '../I18n'
+import { BreakpointsProvider } from '../hooks/useBreakpoints'
+import Sections from 'cozy-ui/transpiled/react/AppSections'
+import Variants from 'cozy-ui/docs/components/Variants'
 
-const locale = {};
+const locale = {}
 
 const WrapperSections = () => {
   const handleAppClick = app => {
     alert(JSON.stringify(app, null, 2))
   }
 
-  const initialVariants = [
-    { displaySpecificMaintenanceStyle: false},
-    { displaySpecificMaintenanceStyle: true },
-  ]
+  const initialVariants = [{ displaySpecificMaintenanceStyle: false}]
 
   return (
-    <Variants initialVariants={initialVariants}>
+    <Variants initialVariants={initialVariants} screenshotAllVariants>
       {
       variant =>
         <Sections
@@ -31,6 +28,8 @@ const WrapperSections = () => {
   )
 }
 
+;
+
 <BreakpointsProvider>
   <I18n dictRequire={lang => locale} lang="en">
      <WrapperSections />

package/react/Badge/Readme.md

@@ -6,76 +6,65 @@ The default version of badges is used to indicate an amount of new things that t
 
 The `dot` variant can be used to indicate that the item _itself_ is new. A `dot` badge on a folder for example indicates that the folder is new, not that it contains new elements.
 
-```
-import Badge from 'cozy-ui/transpiled/react/Badge';
-import Icon from 'cozy-ui/transpiled/react/Icon';
-import Variants from 'cozy-ui/docs/components/Variants';
-
-import CircleFilledIcon from "cozy-ui/transpiled/react/Icons/CircleFilled";
+```jsx
+import Badge from 'cozy-ui/transpiled/react/Badge'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Variants from 'cozy-ui/docs/components/Variants'
+import CircleFilledIcon from "cozy-ui/transpiled/react/Icons/CircleFilled"
 
 const initialVariants = [
-  { error: false, dot: false, large: false, small: false, withBorder: false, overlap: true},
-  { error: true, dot: true, large: false, small: false, withBorder: true, overlap: false},
-  { error: false, dot: false, large: false, small: false, withBorder: false, overlap: true },
-];
+  { overlap: true, error: false, dot: false, withBorder: false, left: false, bottom: false, small: false, large: false }
+]
 
-testingProps = [
-  { color: 'primary', variant: 'standard', size: 'small', vertical: 'top', horizontal: 'left', withBorder: false, overlap: true},
-  { color: 'secondary', variant: 'dot', size: 'medium', vertical: 'bottom', horizontal: 'right', withBorder: true, overlap: true},
-  { color: 'error', variant: 'standard', size: 'large', vertical: 'top', horizontal: 'left', withBorder: false, overlap: true},
-  { color: 'secondary', variant: 'dot', size: 'small', vertical: 'top', horizontal: 'right', withBorder: true, overlap: true},
-  { color: 'error', variant: 'standard', size: 'medium', vertical: 'bottom', horizontal: 'left', withBorder: false, overlap: true},
-  { color: 'primary', variant: 'dot', size: 'large', vertical: 'top', horizontal: 'right', withBorder: true, overlap: true},
-  { color: 'error', variant: 'standard', size: 'medium', vertical: 'bottom', horizontal: 'left', withBorder: false, overlap: false},
-  { color: 'primary', variant: 'dot', size: 'large', vertical: 'top', horizontal: 'right', withBorder: true, overlap: false}
-];
+;
 
-<>
-  {isTesting()
-    ? <>
-        {testingProps.map(({color, variant, size, vertical, horizontal, withBorder, overlap}) =>
-          <p>
-            <h5>color = {color}, variant = {variant}, size = {size}, vertical = {vertical}, horizontal = {horizontal}, withBorder = {withBorder.toString()}, overlap = {overlap ? 'circle': 'rectangle'}</h5>
-            <Badge badgeContent={4} color={color} variant={variant} size={size} anchorOrigin={{vertical, horizontal}} withBorder={withBorder} overlap={overlap ? 'circle': 'rectangle'}>
-              <Icon icon={CircleFilledIcon} size={size === 'large' ? '32' : size === 'small' ? '16' : '24'} color="var(--slateGrey)" />
-            </Badge>
-          </p>
-        )}
-  </>
-  : <Variants initialVariants={initialVariants}>{
-  variant => (
-    <p>
-      <Badge badgeContent={4} color={variant.error ? 'error' : variant.secondaryColor ? 'secondary' : 'primary'} variant={variant.dot ? 'dot' : 'standard'} size={variant.large ? 'large' : variant.small ? 'small' : 'medium'} anchorOrigin={{vertical: variant.bottom ? 'bottom' : 'top', 'horizontal': variant.left ? 'left' : 'right'}} withBorder={variant.withBorder} overlap={variant.overlap ? 'circle': 'rectangle'}>
-        <Icon icon={CircleFilledIcon} size={variant.large ? '32' : variant.small ? '16' : '24'} color="var(--slateGrey)" />
-      </Badge>
-    </p>
-  )
-}</Variants>
-}
-</>
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <Badge
+      className="u-m-half"
+      badgeContent={4}
+      color={
+        variant.error ? "error" : variant.secondaryColor ? "secondary" : "primary"
+      }
+      variant={variant.dot ? "dot" : "standard"}
+      size={variant.large ? "large" : variant.small ? "small" : "medium"}
+      anchorOrigin={{
+        vertical: variant.bottom ? "bottom" : "top",
+        horizontal: variant.left ? "left" : "right",
+      }}
+      withBorder={variant.withBorder}
+      overlap={variant.overlap ? "circle" : "rectangle"}
+    >
+      <Icon
+        icon={CircleFilledIcon}
+        size={variant.large ? "32" : variant.small ? "16" : "24"}
+        color="var(--slateGrey)"
+      />
+    </Badge>
+  )}
+</Variants>
 ```
 
 ### Double badges
 
 Badges can be combined — in this example, we have an item with a new qualification.
 
-```
-import Badge from 'cozy-ui/transpiled/react/Badge';
-import InfosBadge from 'cozy-ui/transpiled/react/InfosBadge';
-import Icon from 'cozy-ui/transpiled/react/Icon';
-import Avatar from 'cozy-ui/transpiled/react/Avatar';
+```jsx
+import Badge from 'cozy-ui/transpiled/react/Badge'
+import InfosBadge from 'cozy-ui/transpiled/react/InfosBadge'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import LinkIcon from "cozy-ui/transpiled/react/Icons/Link"
 
-import LinkIcon from "cozy-ui/transpiled/react/Icons/Link";
+;
 
-<p>
-  <InfosBadge
-    badgeContent={
-      <Badge color="error" variant="dot" size="small">
-        <Icon icon={LinkIcon} size="10" />
-      </Badge>
-    }
-  >
-    <Avatar text="CD" size="small" />
-  </InfosBadge>
-</p>
+<InfosBadge
+  badgeContent={
+    <Badge color="error" variant="dot" size="small">
+      <Icon icon={LinkIcon} size="10" />
+    </Badge>
+  }
+>
+  <Avatar text="CD" size="small" />
+</InfosBadge>
 ```

package/react/Button/Readme.md

@@ -1,6 +1,9 @@
-There's two kinds of Button at your disposal : `<Button />` & `<ButtonLink />`.
+⚠️  This `<Button />` is going to be deprecated, please use [Buttons](#/Buttons) instead.
+
+There's two kinds of Button at your disposal : `<Button />` and `<ButtonLink />`.
+
 The first is a basic `<button>` for a click event, the second is a `<a>`, a link.
-Both look exactly the same, they share the same `className`, `disabled`, `onClick` & `theme` parameters but `<Button>` has also:
+Both look exactly the same, they share the same `className`, `disabled`, `onClick` and `theme` parameters but `<Button>` has also:
 
 * `busy` that adds a spinner (default `false`)
 * `type`, eg. `submit` or `reset` (default `submit`)

package/react/Buttons/Readme.md

@@ -0,0 +1,202 @@
+### Default
+
+```jsx
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
+import CozyTheme from 'cozy-ui/transpiled/react/CozyTheme'
+
+const variants = ['primary', 'secondary', 'ghost', 'text']
+const propsArr = [{}, { disabled: true }, { busy: true }]
+
+;
+
+<Grid container>
+  {propsArr.map(props =>
+    <Grid item xs={12} sm={4} className="u-mb-1" key={JSON.stringify(props)}>
+      <Stack spacing="s">
+        <div>{Object.keys(props)[0] || 'default'}</div>
+        {variants.map(variant =>
+          <div key={variant + JSON.stringify(props)}>
+            <Button label={variant} variant={variant} {...props} />
+          </div>
+        )}
+      </Stack>
+    </Grid>
+  )}
+</Grid>
+```
+
+### Sizes
+
+```jsx
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+import CozyTheme from 'cozy-ui/transpiled/react/CozyTheme'
+
+const variants = ['primary', 'secondary', 'ghost', 'text']
+const sizes = ['small', 'medium', 'large']
+
+;
+
+<Grid container>
+  {sizes.map(size =>
+    <Grid item xs={12} sm={4} className="u-mb-1" key={size}>
+      <Stack spacing="s">
+        <div>{size}</div>
+        {variants.map(variant =>
+          <div key={variant + size}>
+            <Button label={variant} variant={variant} size={size} />
+          </div>
+        )}
+      </Stack>
+    </Grid>
+  )}
+</Grid>
+```
+
+### Icons
+
+```jsx
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+import CozyTheme from 'cozy-ui/transpiled/react/CozyTheme'
+import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+
+const variants = ['primary', 'secondary', 'ghost', 'text']
+const iconPositions = ['startIcon', 'endIcon']
+
+;
+
+<Grid container>
+  {iconPositions.map(iconPosition =>
+    <Grid item xs={12} sm={4} className="u-mb-1" key={iconPosition}>
+      <Stack spacing="s">
+        <div>{iconPosition}</div>
+        {variants.map(variant =>
+          <div key={variant + iconPosition}>
+            <Button
+              label={variant}
+              variant={variant}
+              {...({[`${iconPosition}`]: <Icon icon={PlusIcon}/>})}
+            />
+          </div>
+        )}
+      </Stack>
+    </Grid>
+  )}
+  <Grid item xs={12} sm={4} className="u-mb-1">
+    <Stack spacing="s">
+      <div>label is only icon</div>
+        {variants.map(variant =>
+          <div key={variant}>
+            <Button
+              className="u-miw-auto"
+              label={<Icon icon={PlusIcon}/>}
+              variant={variant}
+            />
+          </div>
+        )}
+    </Stack>
+  </Grid>
+</Grid>
+```
+
+### Colors
+
+```jsx
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+import CozyTheme from 'cozy-ui/transpiled/react/CozyTheme'
+
+const variants = ['primary', 'secondary', 'ghost', 'text']
+const colors = ['success', 'error', 'warning', 'info']
+
+;
+
+<Grid container>
+  {colors.map(color =>
+    <Grid item xs={12} sm={6} md={3} className="u-mb-1" key={color}>
+      <Stack spacing="s">
+        <div>{color}</div>
+        {variants.map(variant =>
+          <div key={variant + color}>
+            <Button label={variant} variant={variant} color={color} />
+          </div>
+        )}
+      </Stack>
+    </Grid>
+  )}
+</Grid>
+```
+
+### Disabled colors
+
+```jsx
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+import CozyTheme from 'cozy-ui/transpiled/react/CozyTheme'
+
+const variants = ['primary', 'secondary', 'ghost', 'text']
+const colors = ['success', 'error', 'warning', 'info']
+
+;
+
+<Grid container>
+  {colors.map(color =>
+    <Grid item xs={12} sm={6} md={3} className="u-mb-1" key={color}>
+      <Stack spacing="s">
+        <div>{color}</div>
+        {variants.map(variant =>
+          <div key={variant + color}>
+            <Button label={variant} variant={variant} color={color} disabled={true} />
+          </div>
+        )}
+      </Stack>
+    </Grid>
+  )}
+</Grid>
+```
+
+### Busy colors
+
+```jsx
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+import CozyTheme from 'cozy-ui/transpiled/react/CozyTheme'
+
+const variants = ['primary', 'secondary', 'ghost', 'text']
+const colors = ['success', 'error', 'warning', 'info']
+
+;
+
+<Grid container>
+  {colors.map(color =>
+    <Grid item xs={12} sm={6} md={3} className="u-mb-1" key={color}>
+      <Stack spacing="s">
+        <div>{color}</div>
+        {variants.map(variant =>
+          <div key={variant + color}>
+            <Button label={variant} variant={variant} color={color} busy={true} />
+          </div>
+        )}
+      </Stack>
+    </Grid>
+  )}
+</Grid>
+```

package/react/Buttons/index.jsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+
+import MuiButton from '@material-ui/core/Button'
+
+import Icon from '../Icon'
+import SpinnerIcon from '../Icons/Spinner'
+
+const DefaultButton = ({
+  className,
+  color,
+  label,
+  busy,
+  disabled,
+  endIcon,
+  ...props
+}) => {
+  return (
+    <MuiButton
+      {...props}
+      className={cx({ [`customColor-${color}`]: color }, className)}
+      color="primary"
+      disabled={disabled || busy}
+      endIcon={
+        busy ? (
+          <Icon icon={SpinnerIcon} spin aria-hidden focusable="false" />
+        ) : (
+          endIcon
+        )
+      }
+      disableElevation={true}
+    >
+      {label}
+    </MuiButton>
+  )
+}
+
+DefaultButton.defaultProps = {
+  variant: 'contained',
+  color: 'primary'
+}
+
+const Buttons = ({ variant, ...props }) => {
+  switch (variant) {
+    case 'ghost':
+      return <DefaultButton className="ghost" variant="outlined" {...props} />
+
+    case 'secondary':
+      return <DefaultButton variant="outlined" {...props} />
+
+    case 'text':
+      return <DefaultButton variant="text" {...props} />
+
+    case 'primary':
+      return <DefaultButton {...props} />
+
+    default:
+      return <DefaultButton {...props} />
+  }
+}
+
+Buttons.propTypes = {
+  variant: PropTypes.oneOf(['primary', 'secondary', 'ghost', 'text']),
+  color: PropTypes.oneOf(['success', 'error', 'warning', 'info'])
+}
+
+Buttons.defaultProps = {
+  variant: 'primary'
+}
+
+export default Buttons

package/react/CompositeRow/Readme.md

@@ -1,18 +1,18 @@
 ```js
-import { Media, Bd, Img } from '../Media';
-import UIChip from '../Chip';
-import Icon from '../Icon';
-import Circle from '../Circle';
-import Variants from 'cozy-ui/docs/components/Variants';
-import CompositeRow from 'cozy-ui/transpiled/react/CompositeRow';
+import { Media, Bd, Img } from '../Media'
+import UIChip from '../Chip'
+import Icon from '../Icon'
+import Circle from '../Circle'
+import Variants from 'cozy-ui/docs/components/Variants'
+import CompositeRow from 'cozy-ui/transpiled/react/CompositeRow'
 
-import Typography from 'cozy-ui/transpiled/react/Typography';
+import Typography from 'cozy-ui/transpiled/react/Typography'
 
-import WalletIcon from 'cozy-ui/transpiled/react/Icons/Wallet';
-import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots';
-import palette from 'cozy-ui/transpiled/react/palette';
+import WalletIcon from 'cozy-ui/transpiled/react/Icons/Wallet'
+import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
+import palette from 'cozy-ui/transpiled/react/palette'
 
-const fnacLogoURL = 'https://upload.wikimedia.org/wikipedia/commons/2/2e/Fnac_Logo.svg';
+const fnacLogoURL = 'https://upload.wikimedia.org/wikipedia/commons/2/2e/Fnac_Logo.svg'
 
 const Chip = React.memo(({ children, ...props }) => (
   <UIChip
@@ -21,32 +21,32 @@ const Chip = React.memo(({ children, ...props }) => (
     size='small'
     children={children} {...props}
   />
-));
+))
 
 const ChipImage = React.memo(({ src }) => (
   <img className='u-mr-half' src={src} height='50%' />
-));
+))
 
 const compositeStyle = {
   boxShadow: '0 0 10px rgba(0, 0, 0, 0.15)',
   boxSizing: 'border-box',
-};
+}
 
 
 const CompositeImage = () => (
   <Circle backgroundColor={palette.melon}>
     <Icon icon={WalletIcon} />
   </Circle>
-);
+)
 
 const Amount = () => (
   <Typography tag='span' variant="h6">12,15€</Typography>
-);
+)
 
 const onDotsClick = () => { alert('clicked dots !')}
 const Dots = () => (
   <Icon className="u-c-pointer" color="var(--coolGrey)" icon={DotsIcon} onClick={onDotsClick}/>
-);
+)
 
 const Chips = () => (
   <Bd className='u-row-xs'>
@@ -57,7 +57,7 @@ const Chips = () => (
       <ChipImage src={fnacLogoURL} /> Fnac
     </Chip>
   </Bd>
-);
+)
 
 const Actions = ({ extraInformation }) => (
   <Media>
@@ -71,33 +71,32 @@ const Actions = ({ extraInformation }) => (
     </Bd>
     { extraInformation ? <Shrink><Typography variant="caption" color="textSecondary">Extra information to the right of the card</Typography></Shrink> : null }
   </Media>
-);
+)
 
-const Shrink = Img;
+const Shrink = Img
 
 const initialVariants = [
-  { chips: true, secondaryText: true, dots: true, icon: true, extraInformation: true },
-  { chips: false, secondaryText: true, icon: true, dots: true },
-  { dense: true, chips: false, secondaryText: false, dots: false, icon: true },
-  { chips: false, secondaryText: false, dots: false, icon: false },
-  { dense: true, chips: false, secondaryText: false, dots: false, icon: false }
-];
-
-<Variants initialVariants={initialVariants}>{
-  variant => (
+  { chips: true, dense: false, secondaryText: true, dots: true, icon: true, extraInformation: true }
+]
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
     <CompositeRow
       primaryText='Primary text'
       secondaryText={variant.secondaryText ? 'Secondary Text' : null}
       image={variant.icon ? <CompositeImage /> : null}
-      right={<>
-        <Shrink><Amount /></Shrink>
-        { variant.dots ? <Shrink><Dots /></Shrink> : null }
-      </>}
+      right={
+        <>
+          <Shrink><Amount /></Shrink>
+          { variant.dots ? <Shrink><Dots /></Shrink> : null }
+        </>
+      }
       actions={variant.chips ? <Actions extraInformation={variant.extraInformation} /> : null}
       dense={variant.dense}
       style={compositeStyle}
     />
-  )
-}</Variants>
-
+  )}
+</Variants>
 ```

package/react/ContactsList/helpers.spec.js

@@ -1,7 +1,7 @@
 import { sortLastNameFirst, sortHeaders } from './helpers'
 describe('Sort contacts', () => {
   describe('By Last Name', () => {
-    test('should sort contact by last name', () => {
+    it('should sort contact by last name', () => {
       const contacts = [
         { name: { givenName: '', familyName: '' } },
         { name: { givenName: 'A', familyName: 'A' } },
@@ -32,7 +32,8 @@ describe('Sort contacts', () => {
         { name: { givenName: 'B', familyName: 'C' } }
       ])
     })
-    test('should work with incomplete data', () => {
+
+    it('should work with incomplete data', () => {
       const contacts = [
         { name: { givenName: '' } },
         { name: { givenName: 'A' } },