cozy-ui 121.1.2 → 121.3.0

package/package.json

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

package/react/Buttons/Readme.md

@@ -125,14 +125,14 @@ const iconPositions = ['startIcon', 'endIcon']
         {variants.map(variant =>
           <div key={variant}>
             <Button
-              className="u-miw-auto u-w-2 u-h-2 u-bdrs-circle"
+              className="u-miw-auto u-mih-auto u-w-2 u-h-2 u-bdrs-circle"
               classes={{ label: "u-flex u-w-auto" }}
               size={isTwakeTheme() ? "small" : "medium"}
               label={<Icon icon={StopIcon} size={12} />}
               variant={variant}
             />
             <Button
-              className="u-ml-1 u-miw-auto u-w-2 u-h-2 u-bdrs-circle"
+              className="u-ml-1 u-miw-auto u-mih-auto u-w-2 u-h-2 u-bdrs-circle"
               classes={{ label: "u-flex u-w-auto" }}
               label={<Icon icon={StopIcon} size={12} />}
               size={isTwakeTheme() ? "small" : "medium"}
@@ -271,3 +271,38 @@ const colors = ['default', 'inherit', 'primary', 'secondary', 'success', 'error'
   )}
 </Grid>
 ```
+
+### Auto height
+
+```jsx
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Grid from 'cozy-ui/transpiled/react/Grid'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const buttonVariants = ['primary', 'secondary', 'ghost', 'text']
+const sizes = ['small', 'medium', 'large']
+const initialVariants = [{ autoHeight: false }]
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <Grid container>
+      {sizes.map(size =>
+        <Grid item xs={12} sm={4} className="u-mb-1" key={size}>
+          <Stack spacing="s">
+            <div>{size}</div>
+            {buttonVariants.map(buttonVariant =>
+              <div key={buttonVariant + size} className="u-w-4">
+                <Button label={`${buttonVariant} with long label`} variant={buttonVariant} size={size} height={variant.autoHeight ? 'auto' : 'default'} />
+              </div>
+            )}
+          </Stack>
+        </Grid>
+      )}
+    </Grid>
+  )}
+</Variants>
+```

package/react/Buttons/index.jsx

@@ -10,7 +10,17 @@ const CUSTOM_COLORS = ['success', 'error', 'warning', 'info']
 
 const DefaultButton = forwardRef(
   (
-    { variant, className, color, label, busy, disabled, endIcon, ...props },
+    {
+      variant,
+      className,
+      color,
+      label,
+      busy,
+      disabled,
+      height,
+      endIcon,
+      ...props
+    },
     ref
   ) => {
     const customColor = CUSTOM_COLORS.includes(color) ? color : 'primary'
@@ -24,6 +34,7 @@ const DefaultButton = forwardRef(
         ref={ref}
         className={cx(
           { [`customColor-${customColor}`]: customColor },
+          { [`customSize-${height}`]: height },
           className
         )}
         color={_color}
@@ -103,11 +114,13 @@ Buttons.propTypes = {
     'error',
     'warning',
     'info'
-  ])
+  ]),
+  height: PropTypes.oneOf(['default', 'auto'])
 }
 
 Buttons.defaultProps = {
-  variant: 'primary'
+  variant: 'primary',
+  height: 'default'
 }
 
 export default Buttons

package/react/Icon/Readme.md

@@ -720,6 +720,7 @@ import ShareGrey08Icon from 'cozy-ui/transpiled/react/Icons/ShareGrey08'
 import StoreIcon from 'cozy-ui/transpiled/react/Icons/Store'
 import TopSelectIcon from 'cozy-ui/transpiled/react/Icons/TopSelect'
 import TrashDuotoneIcon from 'cozy-ui/transpiled/react/Icons/TrashDuotone'
+import TwakeWorkplace from 'cozy-ui/transpiled/react/Icons/TwakeWorkplace'
 
 const icons = [
   AccountIcon,
@@ -768,7 +769,8 @@ const icons = [
   ShareGrey08Icon,
   StoreIcon,
   TopSelectIcon,
-  TrashDuotoneIcon
+  TrashDuotoneIcon,
+  ...(isTwakeTheme() ? [TwakeWorkplace] : []),
 ]
 
 const wrapperStyle = {

package/react/Icons/TwakeWorkplace.jsx

@@ -0,0 +1,83 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/illus/workplace_twake.svg` to regenerate;
+import React from 'react'
+
+function SvgTwakeWorkplace(props) {
+  return (
+    <svg viewBox="0 0 22 22" fill="none" {...props}>
+      <rect
+        x={0.498}
+        y={0.495}
+        width={21.51}
+        height={21.51}
+        rx={6.563}
+        fill="#fff"
+      />
+      <rect
+        x={0.498}
+        y={0.495}
+        width={21.51}
+        height={21.51}
+        rx={6.563}
+        fill="url(#workplace_twake_svg__paint0_linear_1573_14803)"
+      />
+      <rect
+        x={0.498}
+        y={0.495}
+        width={21.51}
+        height={21.51}
+        rx={6.563}
+        fill="url(#workplace_twake_svg__paint1_linear_1573_14803)"
+      />
+      <rect
+        x={0.498}
+        y={0.495}
+        width={21.51}
+        height={21.51}
+        rx={6.563}
+        fill="url(#workplace_twake_svg__paint2_linear_1573_14803)"
+      />
+      <path
+        d="M11.281 3.7c.008.006.017.01.027.012l.014.002a.405.405 0 01.156.05c.015.007.03.016.044.024l1.068.605 1.25.707.906.512.056.032a.487.487 0 01.229.363l.002.1v3.145a.489.489 0 01-.71.401c-.017-.008-.034-.018-.05-.027l-1.606-.909-1.138-.642-.056-.032a.542.542 0 00-.178-.051h-.058a.462.462 0 00-.213.053c-.02.01-.038.021-.056.032l-1.215.696-1.458.835a3.52 3.52 0 01-.063.036.533.533 0 01-.176.058l-.07.002a.433.433 0 01-.195-.046.48.48 0 01-.283-.433V6.05a.483.483 0 01.224-.404l.05-.029.86-.493 1.021-.585 1.033-.59.256-.147.056-.032a.553.553 0 01.107-.044.53.53 0 01.071-.013.048.048 0 00.025-.012l.07-.002zm-7.514 8.774a.036.036 0 00.026-.032.487.487 0 01.27-.389l.652-.376 1.455-.84.566-.326.063-.036a.49.49 0 01.702.418v3.209a.49.49 0 00.213.394.671.671 0 00.068.04l.62.348 1.278.714.792.442.062.035c.11.064.188.168.22.29a.463.463 0 01.013.192.476.476 0 01-.224.35c-.02.013-.042.024-.063.036L8.411 18.08l-.704.386c-.019.01-.036.022-.057.031a.494.494 0 01-.48-.016l-.217-.127-2.877-1.692a.533.533 0 01-.055-.033.487.487 0 01-.219-.306c-.005-.02-.007-.043-.01-.064a.028.028 0 00-.018-.02.04.04 0 00-.007-.003v-3.763zm11.207 6.103a.078.078 0 00-.017-.012.533.533 0 00-.055-.016.47.47 0 01-.127-.049l-.069-.04-1.063-.613-1.573-.907-.05-.03a.477.477 0 01-.224-.4.477.477 0 01.27-.448l.896-.514 1.21-.692.566-.325.074-.043a.487.487 0 00.227-.35 1.02 1.02 0 00.006-.115v-3.092c0-.024 0-.04.002-.058a.481.481 0 01.356-.43.471.471 0 01.113-.019.492.492 0 01.285.084l.722.415 1.268.733.665.383.062.036a.469.469 0 01.19.218.15.15 0 01.015.048.083.083 0 00.016.032v3.964a.032.032 0 00-.015.023.178.178 0 01-.017.055.48.48 0 01-.18.208.67.67 0 01-.062.035l-.978.56-2.18 1.25a.376.376 0 01-.055.032.468.468 0 01-.127.05.389.389 0 00-.048.013.03.03 0 00-.016.014h-.087z"
+        fill="#fff"
+      />
+      <defs>
+        <linearGradient
+          id="workplace_twake_svg__paint0_linear_1573_14803"
+          x1={22.008}
+          y1={13.042}
+          x2={0.498}
+          y2={13.042}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset={0.13} stopColor="#A033FF" />
+          <stop offset={0.61} stopColor="#0094FF" />
+          <stop offset={1} stopColor="#4FB500" />
+        </linearGradient>
+        <linearGradient
+          id="workplace_twake_svg__paint1_linear_1573_14803"
+          x1={10.356}
+          y1={7.217}
+          x2={3.634}
+          y2={20.66}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFD600" stopOpacity={0} />
+          <stop offset={0.563} stopColor="#FFC700" />
+        </linearGradient>
+        <linearGradient
+          id="workplace_twake_svg__paint2_linear_1573_14803"
+          x1={12.149}
+          y1={13.042}
+          x2={19.767}
+          y2={21.109}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset={0.03} stopColor="#FF3B30" stopOpacity={0} />
+          <stop offset={0.843} stopColor="#E73B2D" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default SvgTwakeWorkplace

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/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -160,9 +160,16 @@ export const makeLightNormalOverrides = theme => ({
   MuiButton: {
     root: {
       borderRadius: 2,
-      height: '2.5rem',
       lineHeight: 'normal',
       padding: '0 1rem',
+      '&.customSize': {
+        '&-default': {
+          height: '2.5rem'
+        },
+        '&-auto': {
+          minHeight: '2.5rem'
+        }
+      },
       '&.ghost': {
         borderStyle: 'dashed !important', // important needed to override disable state
         '&:hover': {
@@ -171,15 +178,29 @@ export const makeLightNormalOverrides = theme => ({
       }
     },
     sizeSmall: {
-      height: '2rem',
       padding: '0 0.75rem',
+      '&.customSize': {
+        '&-default': {
+          height: '2rem'
+        },
+        '&-auto': {
+          minHeight: '2rem'
+        }
+      },
       '&$text': {
         padding: '8px 6px'
       }
     },
     sizeLarge: {
-      height: '3rem',
       padding: '0 1.25rem',
+      '&.customSize': {
+        '&-default': {
+          height: '3rem'
+        },
+        '&-auto': {
+          minHeight: '3rem'
+        }
+      },
       '&$text': {
         padding: '14px 10px'
       }

package/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.js

@@ -64,6 +64,14 @@ export const makeLightNormalTwakeOverrides = theme => {
         }
       }
     },
+    MuiLinearProgress: {
+      root: {
+        height: 3
+      },
+      colorPrimary: {
+        backgroundColor: theme.palette.divider
+      }
+    },
     MuiButton: {
       root: {
         borderRadius: 100,
@@ -76,8 +84,15 @@ export const makeLightNormalTwakeOverrides = theme => {
         }
       },
       sizeSmall: {
-        height: '2.25rem',
         padding: '10px 16px',
+        '&.customSize': {
+          '&-default': {
+            height: '2.25rem'
+          },
+          '&-auto': {
+            minHeight: '2.25rem'
+          }
+        },
         '&$text': {
           padding: '8px 16px'
         }

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