cozy-ui 61.1.1 → 62.0.3

package/CHANGELOG.md

@@ -1,3 +1,42 @@
+## [62.0.3](https://github.com/cozy/cozy-ui/compare/v62.0.2...v62.0.3) (2022-02-22)
+
+
+### Bug Fixes
+
+* **Grid:** Use justifyContent props inside Grid component ([d5eb807](https://github.com/cozy/cozy-ui/commit/d5eb807))
+
+## [62.0.2](https://github.com/cozy/cozy-ui/compare/v62.0.1...v62.0.2) (2022-02-21)
+
+
+### Bug Fixes
+
+* Inverted palette opacity values ([c90b554](https://github.com/cozy/cozy-ui/commit/c90b554))
+
+## [62.0.1](https://github.com/cozy/cozy-ui/compare/v62.0.0...v62.0.1) (2022-02-18)
+
+
+### Bug Fixes
+
+* **deps:** bump url-parse from 1.4.3 to 1.5.7 in /examples/webpack-app ([af9429c](https://github.com/cozy/cozy-ui/commit/af9429c))
+
+# [62.0.0](https://github.com/cozy/cozy-ui/compare/v61.1.1...v62.0.0) (2022-02-11)
+
+
+### Bug Fixes
+
+* Use correct color for checkbox in inverted theme ([878c8ad](https://github.com/cozy/cozy-ui/commit/878c8ad))
+* **UploadQueue:** UploadQueue manage internationalized progress message ([ecb00e1](https://github.com/cozy/cozy-ui/commit/ecb00e1))
+
+
+### Features
+
+* Remove useless IconButton stylus ([7749774](https://github.com/cozy/cozy-ui/commit/7749774))
+
+
+### BREAKING CHANGES
+
+* The .IconButton css class is no longer available in the stylesheet
+
 ## [61.1.1](https://github.com/cozy/cozy-ui/compare/v61.1.0...v61.1.1) (2022-02-10)
 
 

package/package.json

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

package/react/Banner/index.jsx

@@ -34,7 +34,7 @@ const Banner = ({
           className={cx(styles['c-banner-wrapper'], className)}
           style={bgcolor && { backgroundColor: bgcolor }}
         >
-          <Grid container justify="space-between">
+          <Grid container justifyContent="space-between">
             <Grid
               container
               item

package/react/Banner/index.spec.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Banner from './index'
+
+describe('Grid', () => {
+  it('should render correctly justify content', () => {
+    // Given
+    console.error = jest.fn()
+
+    // When
+    const { container } = render(<Banner />)
+
+    // Then
+    expect(console.error).not.toHaveBeenCalled()
+    expect(
+      container.querySelector('.MuiGrid-justify-content-xs-space-between')
+    ).toBeInTheDocument()
+  })
+})

package/react/Checkbox/Readme.md

@@ -4,91 +4,37 @@
 import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
 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 CozyTheme from 'cozy-ui/transpiled/react/CozyTheme'
+
+;
 
 <>
   <Grid container>
-    <Grid item xs={6}>
-      <div><Checkbox label="This is a checkbox" /></div>
-      <div><Checkbox label="This is a checked checkbox" checked /></div>
-      <div><Checkbox label="This is a mixed checkbox" mixed /></div>
-      <div><Checkbox label="This is a mixed checked checkbox" checked mixed /></div>
+    <Grid item xs={6} sm={3}>
+      <div><Checkbox label="Checkbox" /></div>
+      <div><Checkbox label="Checked checkbox" checked /></div>
+      <div><Checkbox label="Mixed checkbox" mixed /></div>
+      <div><Checkbox label="Mixed checked checkbox" checked mixed /></div>
     </Grid>
-    <Grid item xs={6}>
-      <div><Checkbox label="This is a disabled checkbox" disabled /></div>
-      <div><Checkbox label="This is a disabled checked checkbox" checked disabled /></div>
-      <div><Checkbox label="This is a disabled mixed checkbox" mixed disabled /></div>
-      <div><Checkbox label="This is a disabled mixed checked checkbox" checked mixed disabled /></div>
+    <Grid item xs={6} sm={3}>
+      <div><Checkbox label="Disabled checkbox" disabled /></div>
+      <div><Checkbox label="Disabled checked checkbox" checked disabled /></div>
+      <div><Checkbox label="Disabled mixed checkbox" mixed disabled /></div>
+      <div><Checkbox label="Disabled mixed checked checkbox" checked mixed disabled /></div>
     </Grid>
-  </Grid>
-
-  {isTesting() &&
-    <CozyTheme variant='inverted'>
-      <Paper className='u-p-1'>
-        <Grid container>
-          <Grid item xs={6}>
-            <div><Checkbox label="This is a checkbox" /></div>
-            <div><Checkbox label="This is a checked checkbox" checked /></div>
-            <div><Checkbox label="This is a mixed checkbox" mixed /></div>
-            <div><Checkbox label="This is a mixed checked checkbox" checked mixed /></div>
-          </Grid>
-          <Grid item xs={6}>
-            <div><Checkbox label="This is a disabled checkbox" disabled /></div>
-            <div><Checkbox label="This is a disabled checked checkbox" checked disabled /></div>
-            <div><Checkbox label="This is a disabled mixed checkbox" mixed disabled /></div>
-            <div><Checkbox label="This is a disabled mixed checked checkbox" checked mixed disabled /></div>
-          </Grid>
-        </Grid>
-      </Paper>
-    </CozyTheme>
-  }
-</>
-```
-
-### Error Checkbox
-
-```jsx
-import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
-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';
-
-<>
-  <Grid container>
-    <Grid item xs={6}>
-      <div><Checkbox label="This is a checkbox with an error" error /></div>
-      <div><Checkbox label="This is a checked checkbox with an error" error checked /></div>
-      <div><Checkbox label="This is a mixed checkbox with an error" error mixed /></div>
-      <div><Checkbox label="This is a mixed checked checkbox with an error" error checked mixed /></div>
+    <Grid item xs={6} sm={3}>
+      <div><Checkbox label="Error checkbox" error /></div>
+      <div><Checkbox label="Error checked checkbox" error checked /></div>
+      <div><Checkbox label="Error mixed checkbox" error mixed /></div>
+      <div><Checkbox label="Error mixed checked checkbox" error checked mixed /></div>
     </Grid>
-    <Grid item xs={6}>
-      <div><Checkbox label="This is a disabled checkbox with an error" error disabled /></div>
-      <div><Checkbox label="This is a disabled checked checkbox with an error" error checked disabled /></div>
-      <div><Checkbox label="This is a disabled mixed checkbox with an error" error mixed disabled /></div>
-      <div><Checkbox label="This is a disabled mixed checked checkbox with an error" error checked mixed disabled /></div>
+    <Grid item xs={6} sm={3}>
+      <div><Checkbox label="Error disabled checkbox" error disabled /></div>
+      <div><Checkbox label="Error disabled checked checkbox" error checked disabled /></div>
+      <div><Checkbox label="Error disabled mixed checkbox" error mixed disabled /></div>
+      <div><Checkbox label="Error disabled mixed checked checkbox" error checked mixed disabled /></div>
     </Grid>
   </Grid>
-
-  {isTesting() &&
-    <CozyTheme variant='inverted'>
-      <Paper className='u-p-1'>
-        <Grid container>
-          <Grid item xs={6}>
-            <div><Checkbox label="This is a checkbox with an error" error /></div>
-            <div><Checkbox label="This is a checked checkbox with an error" error checked /></div>
-            <div><Checkbox label="This is a mixed checkbox with an error" error mixed /></div>
-            <div><Checkbox label="This is a mixed checked checkbox with an error" error checked mixed /></div>
-          </Grid>
-          <Grid item xs={6}>
-            <div><Checkbox label="This is a disabled checkbox with an error" error disabled /></div>
-            <div><Checkbox label="This is a disabled checked checkbox with an error" error checked disabled /></div>
-            <div><Checkbox label="This is a disabled mixed checkbox with an error" error mixed disabled /></div>
-            <div><Checkbox label="This is a disabled mixed checked checkbox with an error" error checked mixed disabled /></div>
-          </Grid>
-        </Grid>
-      </Paper>
-    </CozyTheme>
-  }
 </>
 ```
 
@@ -96,6 +42,7 @@ import CozyTheme from 'cozy-ui/transpiled/react/CozyTheme';
 
 ```jsx
 import Checkbox from 'cozy-ui/transpiled/react/Checkbox';
+
 <div>
   <Checkbox label={(<>This is a <strong>complex</strong> text</>)} />
 </div>

package/react/I18n/format.jsx

@@ -1,12 +1,15 @@
 import format from 'date-fns/format'
 import { DEFAULT_LANG } from '.'
+import formatDistanceToNow from 'date-fns/distance_in_words_to_now'
+
+const locales = {}
+let lang = DEFAULT_LANG
 
 const getWarningMessage = lang =>
   `The "${lang}" locale isn't supported by date-fns. or has not been included in the build. Check if you have configured a ContextReplacementPlugin that is too restrictive.`
 
-export const initFormat = (lang, defaultLang = DEFAULT_LANG) => {
-  const locales = {}
-
+export const provideDateFnsLocale = (userLang, defaultLang = DEFAULT_LANG) => {
+  lang = userLang
   try {
     locales[defaultLang] = require(`date-fns/locale/${defaultLang}/index.js`)
   } catch (err) {
@@ -20,5 +23,16 @@ export const initFormat = (lang, defaultLang = DEFAULT_LANG) => {
       console.warn(getWarningMessage(lang))
     }
   }
-  return (date, formatStr) => format(date, formatStr, { locale: locales[lang] })
+  return locales[lang]
 }
+
+export const initFormat = (userLang, defaultLang = DEFAULT_LANG) => (
+  date,
+  formatStr
+) => {
+  const locale = provideDateFnsLocale(userLang, defaultLang)
+  return format(date, formatStr, { locale })
+}
+
+export const formatLocallyDistanceToNow = date =>
+  formatDistanceToNow(date, { locale: locales[lang] })

package/react/I18n/format.spec.jsx

@@ -1,4 +1,4 @@
-import { initFormat } from './format'
+import { initFormat, formatLocallyDistanceToNow } from './format'
 
 describe('initFormat', () => {
   beforeEach(() => {
@@ -11,3 +11,37 @@ describe('initFormat', () => {
     expect(() => initFormat('unknown-lang', 'unknown-default')).not.toThrow()
   })
 })
+
+describe('formatLocallyDistanceToNow', () => {
+  it('should formatDistanceToNow with small value', () => {
+    const date = Date.now() + 29 * 1000
+
+    const result = formatLocallyDistanceToNow(date)
+
+    expect(result).toEqual('less than a minute')
+  })
+
+  it('should formatDistanceToNow with medium value', () => {
+    const date = Date.now() + 2671 * 1000
+
+    const result = formatLocallyDistanceToNow(date)
+
+    expect(result).toEqual('about 1 hour')
+  })
+
+  it('should formatDistanceToNow with high value', () => {
+    const date = Date.now() + 5371 * 1000
+
+    const result = formatLocallyDistanceToNow(date)
+
+    expect(result).toEqual('about 2 hours')
+  })
+
+  it('should not throw if a date-fns locale can not be found', () => {
+    jest.spyOn(console, 'warn').mockImplementation()
+
+    expect(() => formatLocallyDistanceToNow('unknown-lang')).not.toThrow()
+
+    console.warn.mockRestore()
+  })
+})

package/react/IconButton/Readme.md

@@ -4,64 +4,27 @@ Provides hover, active styles + accessible size (48px).
 ```jsx
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import Stack from 'cozy-ui/transpiled/react/Stack'
-import Typography from 'cozy-ui/transpiled/react/Typography'
+
+import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
 import LeftIcon from 'cozy-ui/transpiled/react/Icons/Left'
 import RestoreIcon from 'cozy-ui/transpiled/react/Icons/Restore'
 import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
-
-const StateRadio = ({ name, ...props }) => {
-  return <input
-    type='radio'
-    name={name}
-    checked={state[name] == props.value}
-    onChange={() => setState({ [name]: props.value })}
-    {...props}
-  />
-}
-
-const Example = ({ color }) => {
-  return <>
-    <IconButton color={color}>
-      <Icon icon={LeftIcon} />
-    </IconButton>
-    <IconButton color={color}>
-      <Icon icon={RestoreIcon} />
-    </IconButton>
-    <IconButton color={color}>
-      <Icon icon={RightIcon} />
-    </IconButton>
-  </>
-}
-
-initialState = {
-  color: 'default'
-}
-
-const colors = ['default', 'primary', 'secondary']
+import CrossIcon from 'cozy-ui/transpiled/react/Icons/Cross'
 
 ;
 
 <>
-  { isTesting ()
-    ? <Stack spacing='l'>
-        {colors.map((color, index) => (
-          <div key={index}>
-            <Typography variant='h3' gutterBottom>color: {color}</Typography>
-            <Example color={color} key={color} />
-          </div>
-        ))}
-    </Stack>
-    : <div>
-      <Stack spacing='l'>
-        <div>
-          <StateRadio value='default' name='color' /> default{' '}
-          <StateRadio value='primary' name='color' /> primary{' '}
-          <StateRadio value='secondary' name='color' /> secondary
-        </div>
-        <Example color={state.color} />
-      </Stack>
-    </div>
-  }
+  <IconButton>
+    <Icon icon={TrashIcon} />
+  </IconButton>
+  <IconButton disabled>
+    <Icon icon={TrashIcon} />
+  </IconButton>
+  <IconButton color="primary">
+    <Icon icon={RestoreIcon} />
+  </IconButton>
+  <IconButton color="secondary">
+    <Icon icon={CrossIcon} />
+  </IconButton>
 </>
 ```

package/react/MuiCozyTheme/makeOverrides.js

@@ -711,7 +711,7 @@ const makeInvertedOverrides = invertedTheme => {
     MuiCheckbox: {
       colorPrimary: {
         '&$checked:not($disabled)': {
-          color: invertedTheme.palette.success.main
+          color: invertedTheme.palette.primary.light
         }
       },
       colorSecondary: {

package/react/MuiCozyTheme/makePalette.js

@@ -1,13 +1,48 @@
+import merge from 'lodash/merge'
+
 import {
   getCssVariableValue,
   getInvertedCssVariableValue
 } from '../utils/color'
 
+const opacityByTheme = {
+  light: {
+    action: {
+      hoverOpacity: 0.04,
+      selectedOpacity: 0.08,
+      disabledOpacity: 0.32,
+      focusOpacity: 0.12,
+      activatedOpacity: 0.12,
+      ghostOpacity: 0.08,
+      hoverGhostOpacity: 0.16
+    },
+    border: {
+      opacity: 0.16,
+      ghostOpacity: 0.48
+    }
+  },
+  dark: {
+    action: {
+      hoverOpacity: 0.08,
+      selectedOpacity: 0.16,
+      disabledOpacity: 0.32,
+      focusOpacity: 0.25,
+      activatedOpacity: 0.24,
+      ghostOpacity: 0.08,
+      hoverGhostOpacity: 0.16
+    },
+    border: {
+      opacity: 0.24,
+      ghostOpacity: 0.48
+    }
+  }
+}
+
 export const makePalette = type => {
   const getCssValue =
     type === 'dark' ? getInvertedCssVariableValue : getCssVariableValue
 
-  return {
+  const paletteByTheme = {
     type,
     primary: {
       light: getCssValue('primaryColorLight'),
@@ -73,27 +108,18 @@ export const makePalette = type => {
     action: {
       active: getCssValue('actionColorActive'),
       hover: getCssValue('actionColorHover'),
-      hoverOpacity: 0.04,
       selected: getCssValue('actionColorSelected'),
-      selectedOpacity: 0.08,
       disabled: getCssValue('actionColorDisabled'),
       disabledBackground: getCssValue('actionColorDisabledBackground'),
-      disabledOpacity: 0.32,
       focus: getCssValue('actionColorFocus'),
-      focusOpacity: 0.12,
       ghost: getCssValue('actionColorGhost'),
-      ghostOpacity: 0.08,
-      hoverGhost: getCssValue('actionColorHoverGhost'),
-      hoverGhostOpacity: 0.16,
-      activatedOpacity: 0.12
+      hoverGhost: getCssValue('actionColorHoverGhost')
     },
     border: {
       main: getCssValue('borderMainColor'),
-      opacity: 0.16,
       disabled: getCssValue('borderDisabledColor'),
       ghost: getCssValue('borderGhostColor'),
-      ghostDisabled: getCssValue('borderGhostDisabledColor'),
-      ghostOpacity: 0.48
+      ghostDisabled: getCssValue('borderGhostDisabledColor')
     },
     background: {
       default: getCssValue('defaultBackgroundColor'),
@@ -101,4 +127,6 @@ export const makePalette = type => {
       selected: '#F5FAFF' // deprecated, should be removed. Use action.selected instead
     }
   }
+
+  return merge(paletteByTheme, opacityByTheme[type])
 }

package/react/Sidebar/Readme.md

@@ -1,45 +1,57 @@
-On desktop show a vertical menu on the left. On mobile, shows a
-horizontal bottom nav.
+On desktop shows a vertical menu on the left. On mobile, shows a horizontal bottom nav.
 
-⚠️ `NavLink` would be imported normally from `react-router-dom` and
-used as follows.
+⚠️ `NavLink` must be imported normally from `react-router-dom` and used as follows.
 
 ```jsx static
-import { NavLink as RRNavLink } from 'react-router'
+import { NavLink as RouterLink } from 'react-router'
 import { genNavLink } from 'cozy-ui/transpiled/react/Nav'
 
-const NavLink = genNavLink(RRNavLink)
+const NavLink = genNavLink(RouterLink)
 ```
 
 In action :
 
 ```jsx
-import Sidebar from 'cozy-ui/transpiled/react/Sidebar';
-import Nav, { NavItem, NavIcon, NavText, genNavLink } from 'cozy-ui/transpiled/react/Nav';
-import cx from 'classnames';
+import Sidebar from 'cozy-ui/transpiled/react/Sidebar'
+import Nav, { NavItem, NavIcon, NavText, genNavLink } from 'cozy-ui/transpiled/react/Nav'
 import WarnIcon from 'cozy-ui/transpiled/react/Icons/Warn'
 import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
 import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
 
-const NavLink = genNavLink(({ children, className, active, activeClassName }) =>
-  <a className={cx(className, active ? activeClassName : null)}>{ children }</a>);
+// <-- only usefull for the documentation,
+// should be `const NavLink = genNavLink(RouterLink)`
+import cx from 'classnames'
+
+const NavLink = genNavLink(
+  ({ children, className, active, activeClassName }) => (
+    <a className={cx(className, active ? activeClassName : null)}>{children}</a>
+  )
+)
+// -->
+
+;
 
 <Sidebar id='sidebar'>
   <Nav>
     <NavItem id='nav-item'>
-      <NavLink active>
+      <NavLink to="/warn" active>
         <NavIcon icon={WarnIcon} />
         <NavText>Warn</NavText>
       </NavLink>
     </NavItem>
     <NavItem>
-      <NavLink>
+      <NavLink to="/check">
         <NavIcon icon={CheckIcon} />
         <NavText>Check</NavText>
       </NavLink>
     </NavItem>
+    <NavItem secondary>
+      <NavLink to="/secondary">
+        <NavText>Secondary link</NavText>
+      </NavLink>
+    </NavItem>
     <NavItem>
-      <NavLink>
+      <NavLink to="/download">
         <NavIcon icon={DownloadIcon} />
         <NavText>Download</NavText>
       </NavLink>

package/react/UploadQueue/Readme.md

@@ -12,6 +12,7 @@ the upload queue:
 ```jsx
 import isTesting from '../helpers/isTesting'
 import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
+import UploadQueue from 'cozy-ui/transpiled/react/UploadQueue';
 
 const initialState = {
   popover: false
@@ -51,7 +52,7 @@ const data = {
 };
 
 <>
-  popover: <input type="checkbox" value={state.popover} onChange={() => setState({ popover: !state.popover })} />
+  popover: <input type="checkbox" value={state.popover} onChange={() => setState({ popover: !state.popover })}/>
   <UploadQueue
     lang='fr'
     app='Cozy Drive'

package/react/UploadQueue/index.jsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import cx from 'classnames'
 import { withStyles } from '@material-ui/core/styles'
 import LinearProgress from '@material-ui/core/LinearProgress'
-import formatDistanceToNow from 'date-fns/distance_in_words_to_now'
 
 import { splitFilename } from 'cozy-client/dist/models/file'
 
@@ -25,6 +24,7 @@ import styles from './styles.styl'
 import localeEn from './locales/en.json'
 import localeEs from './locales/es.json'
 import localeFr from './locales/fr.json'
+import { formatLocallyDistanceToNow } from '../I18n/format'
 
 const locales = {
   en: localeEn,
@@ -64,20 +64,26 @@ const Pending = translate()(props => (
   </Typography>
 ))
 
-const formatRemainingTime = durationInSec => {
+export const formatRemainingTime = durationInSec => {
   const later = Date.now() + durationInSec * 1000
-  return formatDistanceToNow(later)
+  return formatLocallyDistanceToNow(later)
 }
 
+// https://date-fns.org/v2.28.0/docs/formatDistanceToNow
+const numberOfReferencesForPluralForm = durationInSec =>
+  durationInSec < 90 || (durationInSec > 2670 && durationInSec < 5370) ? 1 : 2
+
 const RemainingTime = ({ durationInSec }) => {
   const { t } = useI18n()
+
   return (
     <Typography
       variant="caption"
       className={cx(styles['upload-queue__progress-caption'], 'u-ellipsis')}
     >
       {t('item.remainingTime', {
-        time: formatRemainingTime(durationInSec)
+        time: formatRemainingTime(durationInSec),
+        smart_count: numberOfReferencesForPluralForm(durationInSec)
       })}
     </Typography>
   )
@@ -127,7 +133,7 @@ const Item = translate()(
     let done = false
     let error = false
     /**
-     * Status cames from the Upload Queue, but sometimes we're using
+     * Status came from the Upload Queue, but sometimes we're using
      * manual upload without using the Upload Queue system but we're still
      * using the UI component. When this is the case, the file handles on
      * his own its status.
@@ -210,7 +216,7 @@ const Item = translate()(
   }
 )
 
-class UploadQueue extends Component {
+export class UploadQueue extends Component {
   state = {
     collapsed: false
   }
@@ -256,7 +262,7 @@ class UploadQueue extends Component {
               >
                 {t('header_mobile', {
                   done: doneCount,
-                  total: queue.length
+                  smart_count: queue.length
                 })}
               </Typography>
             </div>
@@ -269,7 +275,7 @@ class UploadQueue extends Component {
               <Typography variant="h6">
                 {t('header_done', {
                   done: successCount,
-                  total: queue.length
+                  smart_count: queue.length
                 })}
               </Typography>
               <Button