cozy-ui 121.1.1 → 121.2.0

package/package.json

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

package/react/Fab/Readme.md

@@ -11,9 +11,10 @@ import Stack from 'cozy-ui/transpiled/react/Stack'
 import Variants from 'cozy-ui/docs/components/Variants'
 
 const props = [{ color: 'primary' }, { color: 'inherit', default: true }]
-const initialVariants = [{ small: false, medium: false, large: true }]
+const initialVariants = [{ small: false, medium: true, large: false }]
 
 ;
+
 <Variants initialVariants={initialVariants} radio screenshotAllVariants>
   {variant => (
     <Grid container>

package/react/Fab/index.js

@@ -1,4 +1,10 @@
 import Fab from '@material-ui/core/Fab'
 
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
+Fab.defaultProps = {
+  size: isTwakeTheme() ? 'medium' : 'large'
+}
+
 export default Fab
 export { default as ExtendableFab } from './ExtendableFab'

package/react/Layout/Layout.jsx

@@ -3,13 +3,15 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
 import styles from './styles.styl'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
 
 export const Layout = ({ children, className, monoColumn, ...rest }) => {
   return (
     <div
       className={cx(
         monoColumn ? styles['o-layout'] : styles['o-layout-2panes'],
-        className
+        className,
+        { [styles['o-layout--rounded']]: isTwakeTheme() }
       )}
       {...rest}
     >

package/react/Sidebar/index.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import styles from './styles.styl'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
 import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
 import { useCozyTheme } from '../providers/CozyTheme'
 
@@ -25,7 +26,12 @@ const Sidebar = ({ children, className, ...restProps }) => {
   return (
     <aside
       id="sidebar"
-      className={cx(styles['o-sidebar'], className)}
+      className={cx(
+        styles['o-sidebar'],
+        { [styles['o-sidebar--border']]: !isTwakeTheme() },
+        { [styles['o-sidebar--large']]: isTwakeTheme() },
+        className
+      )}
       {...restProps}
     >
       {children}

package/react/UploadQueue/FileUploadProgress.jsx

@@ -0,0 +1,49 @@
+import LinearProgress from '@material-ui/core/LinearProgress'
+import React, { useState } from 'react'
+import { useIntervalWhen } from 'rooks'
+
+import RemainingTime from './RemainingTime'
+import styles from './styles.styl'
+import { withStyles } from '../styles'
+
+const FileLinearProgress = withStyles(theme => ({
+  root: {
+    borderRadius: theme.shape.borderRadius
+  },
+  colorPrimary: {
+    backgroundColor: theme.palette.background.default
+  },
+  barColorPrimary: {
+    backgroundColor: 'var(--emerald)'
+  }
+}))(LinearProgress)
+
+const FileUploadProgress = ({ progress: progressProps }) => {
+  const [progress, setProgress] = useState(progressProps)
+  useIntervalWhen(
+    () => {
+      setProgress(progressProps)
+    },
+    1000,
+    true,
+    true
+  )
+
+  return (
+    <div className={styles['upload-queue__upload-progress']}>
+      <div className="u-flex-grow-1 u-pr-1">
+        <FileLinearProgress
+          variant="determinate"
+          value={(progress.loaded / progress.total) * 100}
+        />
+      </div>
+      <div className="u-flex-shrink">
+        {progress.remainingTime ? (
+          <RemainingTime durationInSec={progress.remainingTime} />
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export default FileUploadProgress

package/react/UploadQueue/Item.jsx

@@ -0,0 +1,99 @@
+import cx from 'classnames'
+import React from 'react'
+
+import { splitFilename } from 'cozy-client/dist/models/file'
+
+import FileUploadProgress from './FileUploadProgress'
+import Pending from './Pending'
+import { uploadStatus } from './index'
+import styles from './styles.styl'
+import { useStatusIcon } from './useStatusIcon'
+import Icon from '../Icon'
+import ListItem from '../ListItem'
+import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
+import Typography from '../Typography'
+import { Img } from '../deprecated/Media'
+import { translate } from '../providers/I18n'
+
+const Item = ({ file, status, isDirectory, progress, getMimeTypeIcon }) => {
+  const { CANCEL, LOADING, DONE_STATUSES, ERROR_STATUSES, PENDING } =
+    uploadStatus
+  const { filename, extension } = splitFilename(file)
+  let done = false
+  let error = false
+  /**
+   * 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.
+   */
+  const statusToUse = file.status ? file.status : status
+
+  if (statusToUse !== LOADING && statusToUse !== CANCEL) {
+    if (ERROR_STATUSES.includes(statusToUse)) {
+      error = true
+    } else if (DONE_STATUSES.includes(statusToUse)) {
+      done = true
+    }
+  }
+
+  const statusIcon = useStatusIcon(statusToUse, progress)
+
+  const isPending =
+    statusToUse !== LOADING &&
+    statusToUse !== CANCEL &&
+    !ERROR_STATUSES.includes(statusToUse) &&
+    !DONE_STATUSES.includes(statusToUse) &&
+    statusToUse === PENDING
+
+  return (
+    <ListItem
+      divider
+      data-testid="upload-queue-item"
+      className={cx({
+        [styles['upload-queue-item--done']]: done,
+        [styles['upload-queue-item--error']]: error
+      })}
+    >
+      {getMimeTypeIcon ? (
+        <ListItemIcon className="u-ta-center">
+          <Icon
+            icon={getMimeTypeIcon(isDirectory, file.name, file.type)}
+            size={32}
+            className="u-mr-1"
+          />
+        </ListItemIcon>
+      ) : null}
+      <ListItemText
+        disableTypography
+        primary={
+          <div data-testid="upload-queue-item-name" className="u-ellipsis">
+            <Typography variant="body1" className="u-ellipsis">
+              {filename}
+              {extension && (
+                <Typography
+                  component="span"
+                  variant="body1"
+                  color="textSecondary"
+                  className="u-dib"
+                >
+                  {extension}
+                </Typography>
+              )}
+            </Typography>
+          </div>
+        }
+        secondary={progress ? <FileUploadProgress progress={progress} /> : null}
+      />
+      {statusIcon && (
+        <ListItemIcon>
+          <Img>{statusIcon}</Img>
+        </ListItemIcon>
+      )}
+      {isPending && <Pending />}
+    </ListItem>
+  )
+}
+
+export default translate()(Item)

package/react/UploadQueue/Pending.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+import Typography from '../Typography'
+import { translate } from '../providers/I18n'
+
+const Pending = translate()(props => (
+  <Typography variant="subtitle1" color="primary">
+    {props.t('item.pending')}
+  </Typography>
+))
+
+export default Pending

package/react/UploadQueue/Readme.md

@@ -12,7 +12,8 @@ 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';
+import UploadQueue from 'cozy-ui/transpiled/react/UploadQueue'
+import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
 
 const initialState = {
   popover: false
@@ -34,6 +35,9 @@ const data = {
   }, {
     file: { name: 'Photo - generic failure error.jpg', type: 'file' },
     status: 'failed'
+  }, {
+    file: { name: 'Photo - generic failure error with a very long name - really long - 2020/04/16.txt', type: 'file' },
+    status: 'failed'
   }, {
     file: { name: 'File with a very long name - really long - 2020/04/16.txt', type: 'file' },
     progress: {
@@ -49,10 +53,12 @@ const data = {
   }],
   doneCount: 1,
   successCount: 1
-};
+}
+
+;
 
 <>
-  popover: <input type="checkbox" value={state.popover} onChange={() => setState({ popover: !state.popover })}/>
+  <Checkbox label="Popover" value={state.popover} onChange={() => setState({ popover: !state.popover })} />
   <UploadQueue
     lang='fr'
     app='Cozy Drive'
@@ -61,6 +67,7 @@ const data = {
     doneCount={data.doneCount}
     successCount={data.successCount}
     popover={state.popover}
+    purgeQueue={() => {}}
   />
   {isTesting() && (
     <>

package/react/UploadQueue/RemainingTime.jsx

@@ -0,0 +1,26 @@
+import cx from 'classnames'
+import React from 'react'
+
+import { numberOfReferencesForPluralForm } from './helpers'
+import { formatRemainingTime } from './index'
+import styles from './styles.styl'
+import Typography from '../Typography'
+import { useI18n } from '../providers/I18n'
+
+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),
+        smart_count: numberOfReferencesForPluralForm(durationInSec)
+      })}
+    </Typography>
+  )
+}
+
+export default RemainingTime

package/react/UploadQueue/helpers.js

@@ -0,0 +1,3 @@
+// https://date-fns.org/v2.28.0/docs/formatDistanceToNow
+export const numberOfReferencesForPluralForm = durationInSec =>
+  durationInSec < 90 || (durationInSec > 2670 && durationInSec < 5370) ? 1 : 2

package/react/UploadQueue/index.jsx

@@ -1,27 +1,15 @@
 import LinearProgress from '@material-ui/core/LinearProgress'
 import cx from 'classnames'
-import React, { Component, useState } from 'react'
-import { useIntervalWhen } from 'rooks'
-
-import { splitFilename } from 'cozy-client/dist/models/file'
+import React, { Component } from 'react'
 
+import Item from './Item'
 import localeEn from './locales/en.json'
 import localeEs from './locales/es.json'
 import localeFr from './locales/fr.json'
 import styles from './styles.styl'
-import Icon from '../Icon'
-import CheckIcon from '../Icons/Check'
-import CrossIcon from '../Icons/Cross'
-import WarningIcon from '../Icons/Warning'
-import Spinner from '../Spinner'
-import Typography from '../Typography'
 import List from '../List'
-import ListItem from '../ListItem'
-import ListItemText from '../ListItemText'
-import ListItemIcon from '../ListItemIcon'
-import { Img } from '../deprecated/Media'
+import Typography from '../Typography'
 import Button from '../deprecated/Button'
-import { translate, useI18n } from '../providers/I18n'
 import { formatLocallyDistanceToNow } from '../providers/I18n/format'
 import withLocales from '../providers/I18n/withLocales'
 import { withStyles } from '../styles'
@@ -58,174 +46,17 @@ export const uploadStatus = {
   ERROR_STATUSES
 }
 
-const Pending = translate()(props => (
-  <Typography variant="subtitle1" color="primary">
-    {props.t('item.pending')}
-  </Typography>
-))
-
 export const formatRemainingTime = durationInSec => {
   const later = Date.now() + durationInSec * 1000
   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),
-        smart_count: numberOfReferencesForPluralForm(durationInSec)
-      })}
-    </Typography>
-  )
-}
-
-const FileLinearProgress = withStyles(theme => ({
-  root: {
-    borderRadius: theme.shape.borderRadius
-  },
-  colorPrimary: {
-    backgroundColor: theme.palette.background.default
-  },
-  barColorPrimary: {
-    backgroundColor: 'var(--emerald)'
-  }
-}))(LinearProgress)
-
 const QueueLinearProgress = withStyles({
   root: {
     height: '2px'
   }
 })(LinearProgress)
 
-const FileUploadProgress = ({ progress: progressProps }) => {
-  const [progress, setProgress] = useState(progressProps)
-  useIntervalWhen(
-    () => {
-      setProgress(progressProps)
-    },
-    1000,
-    true,
-    true
-  )
-
-  return (
-    <div className={styles['upload-queue__upload-progress']}>
-      <div className="u-flex-grow-1 u-pr-1">
-        <FileLinearProgress
-          variant="determinate"
-          value={(progress.loaded / progress.total) * 100}
-        />
-      </div>
-      <div className="u-flex-shrink">
-        {progress.remainingTime ? (
-          <RemainingTime durationInSec={progress.remainingTime} />
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
-const Item = translate()(
-  ({ file, status, isDirectory, progress, getMimeTypeIcon }) => {
-    const { CANCEL, LOADING, DONE_STATUSES, ERROR_STATUSES } = uploadStatus
-    const { filename, extension } = splitFilename(file)
-    let statusIcon
-    let done = false
-    let error = false
-    /**
-     * 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.
-     */
-    const statusToUse = file.status ? file.status : status
-
-    if (statusToUse === LOADING) {
-      statusIcon = !progress ? (
-        <Spinner className="u-ml-half" color="var(--primaryColor)" />
-      ) : null
-    } else if (statusToUse === CANCEL) {
-      statusIcon = (
-        <Icon
-          className="u-ml-half"
-          icon={CrossIcon}
-          color="var(--errorColor)"
-        />
-      )
-    } else if (ERROR_STATUSES.includes(statusToUse)) {
-      error = true
-      statusIcon = (
-        <Icon
-          className="u-ml-half"
-          icon={WarningIcon}
-          color="var(--errorColor)"
-        />
-      )
-    } else if (DONE_STATUSES.includes(statusToUse)) {
-      done = true
-      statusIcon = (
-        <Icon
-          className="u-ml-half"
-          icon={CheckIcon}
-          color="var(--successColor)"
-        />
-      )
-    } else if (statusToUse === PENDING) {
-      statusIcon = <Pending />
-    }
-
-    return (
-      <ListItem
-        divider
-        data-testid="upload-queue-item"
-        className={cx('u-ph-1', {
-          [styles['upload-queue-item--done']]: done,
-          [styles['upload-queue-item--error']]: error
-        })}
-      >
-        {getMimeTypeIcon ? (
-          <ListItemIcon className="u-ta-center">
-            <Icon
-              icon={getMimeTypeIcon(isDirectory, file.name, file.type)}
-              size={32}
-              className="u-mr-1"
-            />
-          </ListItemIcon>
-        ) : null}
-        <ListItemText disableTypography>
-          <div data-testid="upload-queue-item-name" className="u-ellipsis">
-            <Typography variant="body1" className="u-ellipsis">
-              {filename}
-              {extension && (
-                <Typography
-                  component="span"
-                  variant="body1"
-                  color="textSecondary"
-                  className="u-dib"
-                >
-                  {extension}
-                </Typography>
-              )}
-            </Typography>
-          </div>
-          {progress ? <FileUploadProgress progress={progress} /> : null}
-        </ListItemText>
-        <Img className={styles['item-status']}>{statusIcon}</Img>
-      </ListItem>
-    )
-  }
-)
-
 export class UploadQueue extends Component {
   state = {
     collapsed: false

package/react/UploadQueue/styles.styl

@@ -7,12 +7,13 @@ $coz-bar-size=3rem
 
 .upload-queue
     border   .0625rem solid var(--dividerColor)
-    border-radius    .25rem
+    border-radius    .5rem
     background-color var(--paperBackgroundColor)
     display          flex
     flex-direction   column
     max-width 90%
     width    30rem
+    overflow hidden
 
 .upload-queue__threshold-bar
     min-width 10rem
@@ -31,7 +32,7 @@ $coz-bar-size=3rem
 .upload-queue--popover
     z-index           var(--zIndex-popover)
     border            rem(1) solid var(--dividerColor)
-    border-radius     rem(4)
+    border-radius     .5rem
     box-shadow        rem(0 1 3 0) rgba(50, 54, 63, .19), rem(0 6 18 0) rgba(50, 54, 63, .19)
     background-color  var(--paperBackgroundColor)
     position fixed
@@ -54,6 +55,7 @@ $coz-bar-size=3rem
     flex-direction   column
     justify-content  center
     height           2rem
+    min-height       2rem
     background-color var(--defaultBackgroundColor)
     font-weight      bold
     margin           0

package/react/UploadQueue/useStatusIcon.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { uploadStatus } from './index'
+import Icon from '../Icon'
+import CheckIcon from '../Icons/Check'
+import CheckCircleIcon from '../Icons/CheckCircle'
+import CrossIcon from '../Icons/Cross'
+import CrossCircleIcon from '../Icons/CrossCircle'
+import WarningIcon from '../Icons/Warning'
+import Spinner from '../Spinner'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
+export const useStatusIcon = (statusToUse, progress) => {
+  const { CANCEL, LOADING, DONE_STATUSES, ERROR_STATUSES, PENDING } =
+    uploadStatus
+  const SuccessIcon = isTwakeTheme() ? CheckCircleIcon : CheckIcon
+  const ErrorIcon = isTwakeTheme() ? CrossCircleIcon : CrossIcon
+
+  let statusIcon
+
+  if (statusToUse === LOADING) {
+    statusIcon = !progress ? <Spinner color="var(--primaryColor)" /> : null
+  } else if (statusToUse === CANCEL) {
+    statusIcon = <Icon icon={ErrorIcon} color="var(--errorColor)" />
+  } else if (ERROR_STATUSES.includes(statusToUse)) {
+    statusIcon = <Icon icon={WarningIcon} color="var(--errorColor)" />
+  } else if (DONE_STATUSES.includes(statusToUse)) {
+    statusIcon = <Icon icon={SuccessIcon} color="var(--successColor)" />
+  } else if (statusToUse === PENDING) {
+    statusIcon = null
+  }
+
+  return statusIcon
+}

package/stylus/components/nav.styl

@@ -65,6 +65,7 @@ $nav-item-icon
     +medium-screen()
         display block
         margin-right 0
+        color var(--secondaryTextColor)
 
         svg
             margin 4px auto 5px
@@ -126,6 +127,7 @@ $nav-link
         line-height          rem(12)
         background-position  center top
         background-size      rem(24)
+        color                color var(--secondaryTextColor)
 
         &.is-active
         &:hover

package/stylus/objects/layouts.styl

@@ -77,7 +77,17 @@ $app
         overflow-x hidden
         overflow-y auto
 
-    +medium-screen()
+    &--rounded
+        +medium-screen('min') // desktop only
+            main
+                background-color var(--defaultBackgroundColor)
+
+                & > [role=main]
+                    margin 1rem 1rem 1rem 0
+                    border-radius 1rem
+                    background-color var(--paperBackgroundColor)
+
+    +medium-screen() // mobile + tablet
         display block
 
         // iPhone X environment tweak
@@ -122,7 +132,7 @@ $app-2panes-sticky
     main > [role=main]
         height auto
 
-    +medium-screen()
+    +medium-screen() // mobile + tablet
         > aside
             position fixed
             bottom 0

package/stylus/objects/sidebar.styl

@@ -10,11 +10,16 @@
 
 $sidebar
     width rem(220)
-    border-right rem(1) solid var(--dividerColor)
     background-color var(--defaultBackgroundColor)
     overflow-y auto
     overflow-x hidden
 
+    &--border
+        border-right rem(1) solid var(--dividerColor)
+
+    &--large
+        width rem(236)
+
     +medium-screen()
         justify-content space-between
         border 0

package/transpiled/react/Fab/index.js

@@ -1,3 +1,7 @@
 import Fab from '@material-ui/core/Fab';
+import { isTwakeTheme } from "cozy-ui/transpiled/react/helpers/isTwakeTheme";
+Fab.defaultProps = {
+  size: isTwakeTheme() ? 'medium' : 'large'
+};
 export default Fab;
 export { default as ExtendableFab } from './ExtendableFab';