cozy-ui 68.0.0 → 68.1.1

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [68.1.1](https://github.com/cozy/cozy-ui/compare/v68.1.0...v68.1.1) (2022-05-25)
+
+
+### Bug Fixes
+
+* Do not crash if the component does not find the child ([57f296b](https://github.com/cozy/cozy-ui/commit/57f296b))
+* The name "FooterActionButtons" does not exist in the build version ([2d13777](https://github.com/cozy/cozy-ui/commit/2d13777))
+
+# [68.1.0](https://github.com/cozy/cozy-ui/compare/v68.0.1...v68.1.0) (2022-05-24)
+
+
+### Features
+
+* Update the Viewer buttons to use the new cozy-ui Buttons ([5fa2868](https://github.com/cozy/cozy-ui/commit/5fa2868))
+* **Banner:** Add disableIconStyles props ([fb6d274](https://github.com/cozy/cozy-ui/commit/fb6d274))
+
+## [68.0.1](https://github.com/cozy/cozy-ui/compare/v68.0.0...v68.0.1) (2022-05-24)
+
+
+### Bug Fixes
+
+* Style of Viewer ([d6cfb28](https://github.com/cozy/cozy-ui/commit/d6cfb28))
+
 # [68.0.0](https://github.com/cozy/cozy-ui/compare/v67.0.4...v68.0.0) (2022-05-24)
 
 

package/package.json

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

package/react/Banner/Readme.md

@@ -1,24 +1,32 @@
 ### Banner
 
 ```jsx
-import Variants from 'cozy-ui/docs/components/Variants';
-import palette from 'cozy-ui/transpiled/react/palette';
+import Variants from 'cozy-ui/docs/components/Variants'
+import palette from 'cozy-ui/transpiled/react/palette'
 
-import Banner from 'cozy-ui/transpiled/react/Banner';
-import Button from 'cozy-ui/transpiled/react/Button';
-import Icon from 'cozy-ui/transpiled/react/Icon';
-import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop';
-import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download';
+import Banner from 'cozy-ui/transpiled/react/Banner'
+import Button from 'cozy-ui/transpiled/react/Button'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
+import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
 
-const shortText = 'Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times.';
-const longText = 'You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text.';
-const buttonOne = <Button theme="text" icon={DownloadIcon} label="Download" onClick={() => alert('Clicked!')} />;
-const buttonTwo = <Button theme="text" label="No, thanks!" />;
-const icon = <Icon icon={DeviceLaptopIcon} />;
+const shortText = 'Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times.'
+const longText = 'You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text.'
+const buttonOne = <Button theme="text" icon={DownloadIcon} label="Download" onClick={() => alert('Clicked!')} />
+const buttonTwo = <Button theme="text" label="No, thanks!" />
+const icon = <Icon icon={DeviceLaptopIcon} size={16} />
 
-const initialVariants = [
-  { icon: true, longText: false, buttonOne: true, buttonTwo: true, inline: true, backgroundColor: true }
-];
+const initialVariants = [{
+  icon: true,
+  longText: false,
+  buttonOne: true,
+  buttonTwo: true,
+  inline: true,
+  backgroundColor: true,
+  disableIconStyles: false
+}]
+
+;
 
 <Variants initialVariants={initialVariants}>
   {variant => (
@@ -31,6 +39,7 @@ const initialVariants = [
       buttonOne={variant.buttonOne && buttonOne}
       buttonTwo={variant.buttonTwo && buttonTwo}
       inline={variant.inline}
+      disableIconStyles={variant.disableIconStyles}
     />
   )}
 </Variants>

package/react/Banner/index.jsx

@@ -19,7 +19,8 @@ const Banner = ({
   text,
   buttonOne,
   buttonTwo,
-  inline
+  inline,
+  disableIconStyles
 }) => {
   const position = {
     row: [8, 4],
@@ -40,12 +41,18 @@ const Banner = ({
               item
               xs={12}
               lg={size[0]}
-              alignItems="center"
+              alignItems={disableIconStyles ? 'flex-start' : 'center'}
               wrap="nowrap"
             >
               {icon && (
                 <Grid item>
-                  <div className={styles['c-banner-icon']}>{icon}</div>
+                  <div
+                    className={cx({
+                      [styles['c-banner-icon']]: !disableIconStyles
+                    })}
+                  >
+                    {icon}
+                  </div>
                 </Grid>
               )}
               <Grid item className={styles['c-banner-text']}>
@@ -87,7 +94,9 @@ Banner.propTypes = {
   /** Button to be displayed in second, the right one */
   buttonTwo: PropTypes.node,
   /** Show banner on one line (only desktop) */
-  inline: PropTypes.bool
+  inline: PropTypes.bool,
+  /** Disables the styles of the wrapper around the icon */
+  disableIconWrapper: PropTypes.bool
 }
 
 export default Banner

package/react/Viewer/Footer/BottomSheetContent.jsx

@@ -11,6 +11,7 @@ const BottomSheetContent = ({ file, contactsFullname }) => {
   return panelBlocks.map((PanelBlock, index) => (
     <BottomSheetItem
       key={index}
+      disableGutters
       disableElevation={index === panelBlocks.length - 1}
     >
       <PanelBlock file={file} contactsFullname={contactsFullname} />

package/react/Viewer/Footer/DownloadButton.jsx

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types'
 
 import { useClient } from 'cozy-client'
 
+import Icon from '../../Icon'
 import DownloadIcon from '../../Icons/Download'
-import Button from '../../Button'
+import Button from '../../Buttons'
 import Alerter from '../../Alerter'
 import { withViewerLocales } from '../withViewerLocales'
 
@@ -21,9 +22,9 @@ const DownloadButton = ({ file, t }) => {
 
   return (
     <Button
-      extension="full"
-      theme="secondary"
-      icon={DownloadIcon}
+      fullWidth
+      variant="secondary"
+      startIcon={<Icon icon={DownloadIcon} />}
       label={t('Viewer.download')}
       onClick={() => handleClick(file)}
     />

package/react/Viewer/Footer/FooterActionButtons.jsx

@@ -9,6 +9,8 @@ const FooterActionButtons = ({ children, file }) => {
   return mapToAllChildren(children, child => cloneElement(child, { file }))
 }
 
+FooterActionButtons.displayName = 'FooterActionButtons'
+
 FooterActionButtons.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.node,

package/react/Viewer/Footer/FooterContent.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo, Children, cloneElement } from 'react'
+import React, { useMemo, Children, cloneElement, isValidElement } from 'react'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/core/styles'
 
@@ -27,16 +27,19 @@ const FooterContent = ({ file, toolbarRef, children }) => {
 
   const { contactName, isLoadingContacts } = useReferencedContactName(file)
 
-  const FooterActionButtons = Children.toArray(children).find(child => {
-    return (
-      child.type.name === 'FooterActionButtons' ||
-      child.type.displayName === 'FooterActionButtons'
-    )
-  })
+  const FooterActionButtons =
+    Children.toArray(children).find(child => {
+      return (
+        child.type.name === 'FooterActionButtons' ||
+        child.type.displayName === 'FooterActionButtons'
+      )
+    }) || null
 
-  const FooterActionButtonsWithFile = cloneElement(FooterActionButtons, {
-    file
-  })
+  const FooterActionButtonsWithFile = isValidElement(FooterActionButtons)
+    ? cloneElement(FooterActionButtons, {
+        file
+      })
+    : null
 
   // We have to wait for the Contact request to finish before rendering `BottomSheet`, because it doesn't handle async well.
   if (isValidForPanel({ file }) && !isLoadingContacts) {

package/react/Viewer/Footer/ForwardButton.jsx

@@ -5,9 +5,10 @@ import { useClient, useCapabilities, models } from 'cozy-client'
 import { isIOS, isMobileApp } from 'cozy-device-helper'
 
 import { useI18n } from '../../I18n'
-import Button from '../../Button'
+import Icon from '../../Icon'
 import ReplyIcon from '../../Icons/Reply'
 import ShareIosIcon from '../../Icons/ShareIos'
+import Button from '../../Buttons'
 import Alerter from '../../Alerter'
 import { withViewerLocales } from '../withViewerLocales'
 import { exportFilesNative } from './helpers'
@@ -48,10 +49,10 @@ const ForwardButton = ({ file }) => {
 
   return (
     <Button
-      extension="full"
+      fullWidth
+      variant="secondary"
+      startIcon={<Icon icon={ForwardIcon} />}
       data-testid="openFileButton"
-      theme="secondary"
-      icon={ForwardIcon}
       label={t('Viewer.actions.forward')}
       onClick={() => onFileOpen(file)}
     />

package/react/Viewer/Panel/Certifications.jsx

@@ -11,7 +11,7 @@ import { withViewerLocales } from '../withViewerLocales'
 
 const Certification = ({ icon, title, caption }) => {
   return (
-    <div className="u-mb-1-half">
+    <div className={'u-ph-2 u-pv-1'}>
       <Media className="u-mb-half" align="top">
         <Img className="u-mr-half">
           <Icon icon={icon} />

package/react/Viewer/Panel/PanelContent.jsx

@@ -30,7 +30,7 @@ const PanelContent = ({ file, t }) => {
           elevation={2}
           square
         >
-          <Typography variant="h4" className={'u-pv-1 u-ph-2'}>
+          <Typography variant="h4" className={'u-pv-1'}>
             <PanelBlock file={file} />
           </Typography>
         </Paper>

package/react/Viewer/Panel/Qualification.jsx

@@ -26,9 +26,9 @@ const Qualification = ({ file = {}, contactsFullname, t, f, lang }) => {
   } = metadata
 
   return (
-    <List>
+    <List className={'u-pv-1'}>
       {datetime && (
-        <ListItem className={'u-ph-0'}>
+        <ListItem className={'u-ph-2'}>
           <QualificationListItemText
             primary={t(
               `Viewer.panel.qualification.date.title.${
@@ -42,14 +42,14 @@ const Qualification = ({ file = {}, contactsFullname, t, f, lang }) => {
         </ListItem>
       )}
       {contactsFullname && (
-        <ListItem className={'u-ph-0'}>
+        <ListItem className={'u-ph-2'}>
           <QualificationListItemText
             primary={t('Viewer.panel.qualification.identity')}
             secondary={contactsFullname}
           />
         </ListItem>
       )}
-      <ListItem className={'u-ph-0'}>
+      <ListItem className={'u-ph-2'}>
         <QualificationListItemText
           primary={t('Viewer.panel.qualification.label.title')}
           secondary={
@@ -59,7 +59,7 @@ const Qualification = ({ file = {}, contactsFullname, t, f, lang }) => {
           }
         />
       </ListItem>
-      <ListItem className={'u-ph-0'}>
+      <ListItem className={'u-ph-2'}>
         <QualificationListItemText
           primary={t('Viewer.panel.qualification.qualification')}
           secondary={scannerT(`Scan.items.${qualification.label}`)}

package/react/Viewer/Panel/QualificationListItemText.jsx

@@ -7,7 +7,6 @@ import Typography from '../../Typography'
 const QualificationListItemText = ({ primary, secondary }) => {
   return (
     <ListItemText
-      className={'u-pv-0'}
       disableTypography
       primary={<Typography variant={'caption'}>{primary}</Typography>}
       secondary={<Typography variant={'body1'}>{secondary}</Typography>}

package/react/Viewer/controls.styl

@@ -76,7 +76,7 @@ $footerHeight = 3.5rem
 
     +medium-screen()
         height $toolbarHeightMedium
-        width calc(100% - 1rem)
+        width 100%
         padding var(--flagship-top-height) 1rem 0 0
         background var(--paperBackgroundColor)
         border-bottom 1px solid var(--dividerColor)

package/react/__snapshots__/examples.spec.jsx.snap

@@ -112,7 +112,7 @@ exports[`Badge should render examples: Badge 2`] = `"<div><span class=\\"MuiBadg
 exports[`Banner should render examples: Banner 1`] = `
 "<div>
   <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
-    <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ICON</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LONGTEXT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BUTTONONE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BUTTONTWO</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">INLINE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BACKGROUNDCOLOR</span></label>
+    <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ICON</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LONGTEXT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BUTTONONE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BUTTONTWO</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">INLINE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BACKGROUNDCOLOR</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DISABLEICONSTYLES</span></label>
   </div>
   <div class=\\"MuiPaper-root MuiPaper-elevation0\\">
     <div class=\\"styles__c-banner-wrapper___3KlaG\\">

package/transpiled/react/Banner/index.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -22,7 +23,8 @@ var Banner = function Banner(_ref) {
       text = _ref.text,
       buttonOne = _ref.buttonOne,
       buttonTwo = _ref.buttonTwo,
-      inline = _ref.inline;
+      inline = _ref.inline,
+      disableIconStyles = _ref.disableIconStyles;
   var position = {
     row: [8, 4],
     column: [12, 12]
@@ -44,12 +46,12 @@ var Banner = function Banner(_ref) {
     item: true,
     xs: 12,
     lg: size[0],
-    alignItems: "center",
+    alignItems: disableIconStyles ? 'flex-start' : 'center',
     wrap: "nowrap"
   }, icon && /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles['c-banner-icon']
+    className: cx(_defineProperty({}, styles['c-banner-icon'], !disableIconStyles))
   }, icon)), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     className: styles['c-banner-text']
@@ -85,6 +87,9 @@ Banner.propTypes = {
   buttonTwo: PropTypes.node,
 
   /** Show banner on one line (only desktop) */
-  inline: PropTypes.bool
+  inline: PropTypes.bool,
+
+  /** Disables the styles of the wrapper around the icon */
+  disableIconWrapper: PropTypes.bool
 };
 export default Banner;

package/transpiled/react/Viewer/Footer/BottomSheetContent.js

@@ -13,6 +13,7 @@ var BottomSheetContent = function BottomSheetContent(_ref) {
   return panelBlocks.map(function (PanelBlock, index) {
     return /*#__PURE__*/React.createElement(BottomSheetItem, {
       key: index,
+      disableGutters: true,
       disableElevation: index === panelBlocks.length - 1
     }, /*#__PURE__*/React.createElement(PanelBlock, {
       file: file,

package/transpiled/react/Viewer/Footer/DownloadButton.js

@@ -3,8 +3,9 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useClient } from 'cozy-client';
+import Icon from "cozy-ui/transpiled/react/Icon";
 import DownloadIcon from "cozy-ui/transpiled/react/Icons/Download";
-import Button from "cozy-ui/transpiled/react/Button";
+import Button from "cozy-ui/transpiled/react/Buttons";
 import Alerter from "cozy-ui/transpiled/react/Alerter";
 import { withViewerLocales } from "cozy-ui/transpiled/react/Viewer/withViewerLocales";
 
@@ -46,9 +47,11 @@ var DownloadButton = function DownloadButton(_ref) {
   }();
 
   return /*#__PURE__*/React.createElement(Button, {
-    extension: "full",
-    theme: "secondary",
-    icon: DownloadIcon,
+    fullWidth: true,
+    variant: "secondary",
+    startIcon: /*#__PURE__*/React.createElement(Icon, {
+      icon: DownloadIcon
+    }),
     label: t('Viewer.download'),
     onClick: function onClick() {
       return handleClick(file);

package/transpiled/react/Viewer/Footer/FooterActionButtons.js

@@ -13,6 +13,7 @@ var FooterActionButtons = function FooterActionButtons(_ref) {
   });
 };
 
+FooterActionButtons.displayName = 'FooterActionButtons';
 FooterActionButtons.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   file: PropTypes.object

package/transpiled/react/Viewer/Footer/FooterContent.js

@@ -1,4 +1,4 @@
-import React, { useMemo, Children, cloneElement } from 'react';
+import React, { useMemo, Children, cloneElement, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import BottomSheet, { BottomSheetHeader } from "cozy-ui/transpiled/react/BottomSheet";
@@ -36,10 +36,10 @@ var FooterContent = function FooterContent(_ref) {
 
   var FooterActionButtons = Children.toArray(children).find(function (child) {
     return child.type.name === 'FooterActionButtons' || child.type.displayName === 'FooterActionButtons';
-  });
-  var FooterActionButtonsWithFile = /*#__PURE__*/cloneElement(FooterActionButtons, {
+  }) || null;
+  var FooterActionButtonsWithFile = /*#__PURE__*/isValidElement(FooterActionButtons) ? /*#__PURE__*/cloneElement(FooterActionButtons, {
     file: file
-  }); // We have to wait for the Contact request to finish before rendering `BottomSheet`, because it doesn't handle async well.
+  }) : null; // We have to wait for the Contact request to finish before rendering `BottomSheet`, because it doesn't handle async well.
 
   if (isValidForPanel({
     file: file

package/transpiled/react/Viewer/Footer/ForwardButton.js

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 import { useClient, useCapabilities, models } from 'cozy-client';
 import { isIOS, isMobileApp } from 'cozy-device-helper';
 import { useI18n } from "cozy-ui/transpiled/react/I18n";
-import Button from "cozy-ui/transpiled/react/Button";
+import Icon from "cozy-ui/transpiled/react/Icon";
 import ReplyIcon from "cozy-ui/transpiled/react/Icons/Reply";
 import ShareIosIcon from "cozy-ui/transpiled/react/Icons/ShareIos";
+import Button from "cozy-ui/transpiled/react/Buttons";
 import Alerter from "cozy-ui/transpiled/react/Alerter";
 import { withViewerLocales } from "cozy-ui/transpiled/react/Viewer/withViewerLocales";
 import { exportFilesNative } from "cozy-ui/transpiled/react/Viewer/Footer/helpers";
@@ -99,10 +100,12 @@ var ForwardButton = function ForwardButton(_ref) {
   }();
 
   return /*#__PURE__*/React.createElement(Button, {
-    extension: "full",
+    fullWidth: true,
+    variant: "secondary",
+    startIcon: /*#__PURE__*/React.createElement(Icon, {
+      icon: ForwardIcon
+    }),
     "data-testid": "openFileButton",
-    theme: "secondary",
-    icon: ForwardIcon,
     label: t('Viewer.actions.forward'),
     onClick: function onClick() {
       return onFileOpen(file);

package/transpiled/react/Viewer/Panel/Certifications.js

@@ -13,7 +13,7 @@ var Certification = function Certification(_ref) {
       title = _ref.title,
       caption = _ref.caption;
   return /*#__PURE__*/React.createElement("div", {
-    className: "u-mb-1-half"
+    className: 'u-ph-2 u-pv-1'
   }, /*#__PURE__*/React.createElement(Media, {
     className: "u-mb-half",
     align: "top"

package/transpiled/react/Viewer/Panel/PanelContent.js

@@ -33,7 +33,7 @@ var PanelContent = function PanelContent(_ref) {
       square: true
     }, /*#__PURE__*/React.createElement(Typography, {
       variant: "h4",
-      className: 'u-pv-1 u-ph-2'
+      className: 'u-pv-1'
     }, /*#__PURE__*/React.createElement(PanelBlock, {
       file: file
     })));

package/transpiled/react/Viewer/Panel/Qualification.js

@@ -23,23 +23,25 @@ var Qualification = function Qualification(_ref) {
       pageLabel = metadata.page,
       datetime = metadata.datetime,
       datetimeLabel = metadata.datetimeLabel;
-  return /*#__PURE__*/React.createElement(List, null, datetime && /*#__PURE__*/React.createElement(ListItem, {
-    className: 'u-ph-0'
+  return /*#__PURE__*/React.createElement(List, {
+    className: 'u-pv-1'
+  }, datetime && /*#__PURE__*/React.createElement(ListItem, {
+    className: 'u-ph-2'
   }, /*#__PURE__*/React.createElement(QualificationListItemText, {
     primary: t("Viewer.panel.qualification.date.title.".concat(datetimeLabel === 'datetime' || datetimeLabel === undefined ? 'addedOn' : datetimeLabel)),
     secondary: f(datetime, 'DD/MM/YYYY')
   })), contactsFullname && /*#__PURE__*/React.createElement(ListItem, {
-    className: 'u-ph-0'
+    className: 'u-ph-2'
   }, /*#__PURE__*/React.createElement(QualificationListItemText, {
     primary: t('Viewer.panel.qualification.identity'),
     secondary: contactsFullname
   })), /*#__PURE__*/React.createElement(ListItem, {
-    className: 'u-ph-0'
+    className: 'u-ph-2'
   }, /*#__PURE__*/React.createElement(QualificationListItemText, {
     primary: t('Viewer.panel.qualification.label.title'),
     secondary: pageLabel ? t("Viewer.panel.qualification.label.".concat(pageLabel)) : filename
   })), /*#__PURE__*/React.createElement(ListItem, {
-    className: 'u-ph-0'
+    className: 'u-ph-2'
   }, /*#__PURE__*/React.createElement(QualificationListItemText, {
     primary: t('Viewer.panel.qualification.qualification'),
     secondary: scannerT("Scan.items.".concat(qualification.label))

package/transpiled/react/Viewer/Panel/QualificationListItemText.js

@@ -7,7 +7,6 @@ var QualificationListItemText = function QualificationListItemText(_ref) {
   var primary = _ref.primary,
       secondary = _ref.secondary;
   return /*#__PURE__*/React.createElement(ListItemText, {
-    className: 'u-pv-0',
     disableTypography: true,
     primary: /*#__PURE__*/React.createElement(Typography, {
       variant: 'caption'