cozy-ui-plus 5.3.0 → 6.0.0

package/src/CollectionField/index.jsx

@@ -4,7 +4,7 @@ import React, { useRef } from 'react'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import CrossSmallIcon from 'cozy-ui/transpiled/react/Icons/CrossSmall'
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
-import Label from 'cozy-ui/transpiled/react/Label'
+import InputLabel from 'cozy-ui/transpiled/react/InputLabel'
 import Stack from 'cozy-ui/transpiled/react/Stack'
 import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 
@@ -70,7 +70,7 @@ const CollectionField = props => {
 
   return (
     <FieldContainer {...rest}>
-      <Label>{label}</Label>
+      <InputLabel>{label}</InputLabel>
       <Stack>
         {values.length > 0 ? (
           <Stack spacing="s">

package/src/Contacts/AddModal/ContactForm/__snapshots__/HasValueCondition.spec.jsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`HasValueCondition component should not render its children if value is falsy 1`] = `
 <form

package/src/ContactsListModal/ContactsListModal.jsx

@@ -22,7 +22,6 @@ import AddContactDialog from './AddContact/AddContactDialog'
 import ContactsListContent from './ContactsListContent'
 import MobileHeader from './MobileHeader'
 import styles from './styles.styl'
-import CozyTheme from '../providers/CozyTheme'
 
 const ContactsListModal = ({
   onItemClick,
@@ -64,9 +63,7 @@ const ContactsListModal = ({
 
   return (
     <TopAnchoredDialog {...dialogProps}>
-      <CozyTheme variant={isMobile ? 'inverted' : 'normal'}>
-        <DialogCloseButton onClick={dismissAction} />
-      </CozyTheme>
+      <DialogCloseButton onClick={dismissAction} />
       <DialogTitle
         {...dialogTitleProps}
         className={cx(dialogTitleProps.className, {

package/src/ContactsListModal/MobileHeader.jsx

@@ -7,36 +7,32 @@ import PreviousIcon from 'cozy-ui/transpiled/react/Icons/Previous'
 import Input from 'cozy-ui/transpiled/react/Input'
 import Paper from 'cozy-ui/transpiled/react/Paper'
 
-import CozyTheme from '../providers/CozyTheme'
-
 const barStyle = {
   height: 48
 }
 
 const MobileHeader = ({ filter, placeholder, onChange, onDismiss }) => {
   return (
-    <CozyTheme variant="inverted">
-      <Paper
-        square
-        elevation={0}
-        className="u-flex u-flex-items-center u-pr-3 u-pl-half"
-        style={barStyle}
-      >
-        <IconButton className="u-mr-half" onClick={onDismiss} size="medium">
-          <Icon icon={PreviousIcon} />
-        </IconButton>
-        <Input
-          type="text"
-          placeholder={placeholder}
-          id={placeholder}
-          value={filter}
-          onChange={onChange}
-          autoFocus
-          fullWidth
-          disableUnderline
-        />
-      </Paper>
-    </CozyTheme>
+    <Paper
+      square
+      elevation={0}
+      className="u-flex u-flex-items-center u-pr-3 u-pl-half"
+      style={barStyle}
+    >
+      <IconButton className="u-mr-half" onClick={onDismiss} size="medium">
+        <Icon icon={PreviousIcon} />
+      </IconButton>
+      <Input
+        type="text"
+        placeholder={placeholder}
+        id={placeholder}
+        value={filter}
+        onChange={onChange}
+        autoFocus
+        fullWidth
+        disableUnderline
+      />
+    </Paper>
   )
 }
 

package/src/Field/index.jsx

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 
 import labelStyles from 'cozy-ui/react/Label/styles.styl'
-import Label from 'cozy-ui/transpiled/react/Label'
+import InputLabel from 'cozy-ui/transpiled/react/InputLabel'
 import SelectBox from 'cozy-ui/transpiled/react/SelectBox'
-import Textarea from 'cozy-ui/transpiled/react/Textarea'
+import TextField from 'cozy-ui/transpiled/react/TextField'
 import Input from 'cozy-ui/transpiled/react/legacy/Input'
 
 import styles from './styles.styl'
@@ -141,7 +141,8 @@ const Field = props => {
         )
       case 'textarea':
         return (
-          <Textarea
+          <TextField
+            multiline
             autoCapitalize={autoCapitalize}
             disabled={disabled}
             id={id}
@@ -151,7 +152,7 @@ const Field = props => {
             onKeyUp={onKeyUp}
             onFocus={onFocus}
             onBlur={onBlur}
-            readOnly={readOnly}
+            inputProps={{ readOnly }}
             {...controlledProps}
           />
         )
@@ -224,9 +225,9 @@ const Field = props => {
 
   return (
     <FieldContainer className={className} variant={variant}>
-      <Label htmlFor={id} {...labelProps}>
+      <InputLabel htmlFor={id} {...labelProps}>
         {label}
-      </Label>
+      </InputLabel>
       {side && (
         <div
           className={cx(styles['o-side'], labelStyles['c-label'], {

package/src/Field/index.spec.js

@@ -26,7 +26,7 @@ describe('Field component', () => {
           onChange={() => {}}
         />
       )
-    ).not.toThrowError()
+    ).not.toThrow()
     expect(() =>
       render(
         <Field
@@ -36,7 +36,7 @@ describe('Field component', () => {
           onChange={() => {}}
         />
       )
-    ).toThrowError()
+    ).toThrow()
   })
 
   it('should expect string type value for all types but select', () => {
@@ -49,11 +49,11 @@ describe('Field component', () => {
           onChange={() => {}}
         />
       )
-    ).not.toThrowError()
+    ).not.toThrow()
     expect(() =>
       render(
         <Field label="mock field" type="text" value={{}} onChange={() => {}} />
       )
-    ).toThrowError()
+    ).toThrow()
   })
 })

package/src/ListItem/ListItemFile/ItemIcon.jsx

@@ -7,7 +7,6 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
 import FiletypeNoteIcon from 'cozy-ui/transpiled/react/Icons/FileTypeNote'
 import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
 import Skeleton from 'cozy-ui/transpiled/react/Skeleton'
-import Thumbnail from 'cozy-ui/transpiled/react/Thumbnail'
 
 import FileImageLoader from '../../FileImageLoader'
 
@@ -23,19 +22,28 @@ const ItemIcon = ({ icon, file }) => {
       linkType="tiny"
       render={src => {
         return (
-          <Thumbnail>
+          <div className="u-flex u-w-2 u-h-2 u-flex-items-center u-flex-justify-center">
             {src ? (
-              <img src={src} alt="" />
+              <img
+                className="u-w-2 u-h-2"
+                style={{ objectFit: 'contain' }}
+                src={src}
+                alt=""
+              />
             ) : (
-              <Skeleton variant="rect" animation="wave" />
+              <Skeleton
+                className="u-w-100 u-h-100"
+                variant="rect"
+                animation="wave"
+              />
             )}
-          </Thumbnail>
+          </div>
         )
       }}
       renderFallback={() => (
-        <Thumbnail>
+        <div className="u-flex u-w-2 u-h-2 u-flex-items-center u-flex-justify-center">
           <Icon icon={isNote(file) ? FiletypeNoteIcon : FiletypeTextIcon} />
-        </Thumbnail>
+        </div>
       )}
     />
   )

package/src/Paywall/Paywall.spec.jsx

@@ -80,7 +80,7 @@ describe('Paywall', () => {
       name: 'I understand'
     })
     fireEvent.click(actionButton)
-    expect(onCloseSpy).toBeCalledTimes(1)
+    expect(onCloseSpy).toHaveBeenCalledTimes(1)
   })
 
   it('should display the default case when there is a premium link but it is not enabled', async () => {
@@ -94,7 +94,7 @@ describe('Paywall', () => {
       name: 'I understand'
     })
     fireEvent.click(actionButton)
-    expect(onCloseSpy).toBeCalledTimes(1)
+    expect(onCloseSpy).toHaveBeenCalledTimes(1)
   })
 
   it('should display the premium case when the premium link is enabled and available', async () => {
@@ -109,7 +109,7 @@ describe('Paywall', () => {
       name: 'Check our plans'
     })
     fireEvent.click(actionButton)
-    expect(openSpy).toBeCalledWith(
+    expect(openSpy).toHaveBeenCalledWith(
       'http://mycozy.cloud/cozy/instances/123/premium?lang=en',
       '_self'
     )
@@ -132,7 +132,7 @@ describe('Paywall', () => {
       name: 'I understand'
     })
     fireEvent.click(actionButton)
-    expect(onCloseSpy).toBeCalledTimes(1)
+    expect(onCloseSpy).toHaveBeenCalledTimes(1)
   })
 
   it('should display the default case when the premium link is not available in public context', async () => {
@@ -148,7 +148,7 @@ describe('Paywall', () => {
       name: 'I understand'
     })
     fireEvent.click(actionButton)
-    expect(onCloseSpy).toBeCalledTimes(1)
+    expect(onCloseSpy).toHaveBeenCalledTimes(1)
   })
 
   describe('on flagship', () => {
@@ -165,7 +165,7 @@ describe('Paywall', () => {
         name: 'I understand'
       })
       fireEvent.click(actionButton)
-      expect(onCloseSpy).toBeCalledTimes(1)
+      expect(onCloseSpy).toHaveBeenCalledTimes(1)
     })
 
     it('should display the premium case without an action button to access the premium link when flag flagship.iap.enabled is false', async () => {
@@ -182,7 +182,7 @@ describe('Paywall', () => {
         name: 'I understand'
       })
       fireEvent.click(actionButton)
-      expect(onCloseSpy).toBeCalledTimes(1)
+      expect(onCloseSpy).toHaveBeenCalledTimes(1)
     })
 
     it('should display the premium case without an action button to access the premium link when flag flagship.iap.enabled is false and iap is unavailable', async () => {
@@ -201,7 +201,7 @@ describe('Paywall', () => {
       })
 
       fireEvent.click(actionButton)
-      expect(onCloseSpy).toBeCalledTimes(1)
+      expect(onCloseSpy).toHaveBeenCalledTimes(1)
     })
 
     it('should display the premium case with an action button to access the premium link when flag flagship.iap.enabled is true and iap is available', async () => {
@@ -219,7 +219,7 @@ describe('Paywall', () => {
         name: 'Check our plans'
       })
       fireEvent.click(actionButton)
-      expect(openSpy).toBeCalledWith(
+      expect(openSpy).toHaveBeenCalledWith(
         'http://mycozy.cloud/cozy/instances/123/premium?lang=en',
         '_self'
       )

package/src/Qualification/QualificationItem/index.jsx

@@ -3,7 +3,6 @@ import React from 'react'
 
 import ButtonBase from 'cozy-ui/transpiled/react/ButtonBase'
 import Icon, { iconPropType } from 'cozy-ui/transpiled/react/Icon'
-import IconStack from 'cozy-ui/transpiled/react/IconStack'
 import FileDuotoneIcon from 'cozy-ui/transpiled/react/Icons/FileDuotone'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
@@ -27,19 +26,15 @@ const QualificationItem = ({ icon, label, isSelected, onClick, ...props }) => {
 
   return (
     <ButtonBase {...props} className={styles.item} onClick={onClick}>
-      <IconStack
-        className="u-mb-half"
-        foreground={
-          icon && (
-            <Icon
-              icon={icon}
-              color={
-                isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
-              }
-            />
-          )
-        }
-        background={
+      <div className="u-mb-half">
+        {icon ? (
+          <Icon
+            icon={icon}
+            color={
+              isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
+            }
+          />
+        ) : (
           <Icon
             icon={FileDuotoneIcon}
             size="32"
@@ -47,8 +42,8 @@ const QualificationItem = ({ icon, label, isSelected, onClick, ...props }) => {
               isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
             }
           />
-        }
-      />
+        )}
+      </div>
       <Typography variant="caption">{label}</Typography>
     </ButtonBase>
   )

package/src/ShortcutTile/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
+import { nameToColor } from 'cozy-ui/transpiled/react/Avatar/helpers'
 import { TileIcon } from 'cozy-ui/transpiled/react/Tile'
 import Typography from 'cozy-ui/transpiled/react/Typography'
-import { nameToColor } from 'cozy-ui/transpiled/react/legacy/Avatar/helpers'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
 
 import styles from '../AppTile/styles.styl'