cozy-ui 82.14.0 → 83.1.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [83.1.0](https://github.com/cozy/cozy-ui/compare/v83.0.0...v83.1.0) (2023-04-18)
+
+
+### Features
+
+* Add success/fail animations to SquareAppIcon ([abbb4ed](https://github.com/cozy/cozy-ui/commit/abbb4ed))
+
+# [83.0.0](https://github.com/cozy/cozy-ui/compare/v82.14.0...v83.0.0) (2023-04-17)
+
+
+### Features
+
+* Update react-pdf from 4.0.5 to 5.7.2 ([fe9608e](https://github.com/cozy/cozy-ui/commit/fe9608e))
+* **Viewer:** Navigate between pdf pages with keyboard ([d05f712](https://github.com/cozy/cozy-ui/commit/d05f712))
+
+
+### BREAKING CHANGES
+
+* This update requires the two changes above in your application if you use the `Viewer` to display PDF. You can find more detail in `Viewer` documentation : https://docs.cozy.io/cozy-ui/react/#!/Viewer
+
+Before :
+- react-pdf alias : `react-pdf/dist/entry.webpack.js`
+- public import for pdf worker : `react-pdf/dist/pdf.worker.entry.js`
+
+After :
+- react-pdf alias : `react-pdf/dist/esm/entry.webpack`
+- public import for pdf worker : `react-pdf/dist/esm/pdf.worker.entry`
+
 # [82.14.0](https://github.com/cozy/cozy-ui/compare/v82.13.0...v82.14.0) (2023-04-13)
 
 

package/assets/icons/animated/icon-check-animated.svg

@@ -0,0 +1,41 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+@-webkit-keyframes checkmark 
+{
+0% {
+    stroke-dashoffset: 100px
+}
+
+100% {
+    stroke-dashoffset: 200px
+}
+}
+
+@-ms-keyframes checkmark 
+{
+0% {
+    stroke-dashoffset: 100px
+}
+
+100% {
+    stroke-dashoffset: 200px
+}
+}
+
+@keyframes checkmark 
+{
+0% {
+    stroke-dashoffset: 100px
+}
+
+100% {
+    stroke-dashoffset: 0px
+}
+}
+path {
+-webkit-animation: checkmark 1.0s ease-in-out backwards;
+animation: checkmark 1.0s ease-in-out backwards
+}
+</style>
+<path d="M1 11L4 14L15 3" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="stroke-dasharray:100px, 100px; stroke-dashoffset: 200px;"/>
+</svg>

package/assets/icons/animated/icon-cross-animated.svg

@@ -0,0 +1,41 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+@-webkit-keyframes checkmark 
+{
+0% {
+    stroke-dashoffset: 100px
+}
+100% {
+    stroke-dashoffset: 200px
+}
+}
+@-ms-keyframes checkmark 
+{
+0% {
+    stroke-dashoffset: 100px
+}
+100% {
+    stroke-dashoffset: 200px
+}
+}
+@keyframes checkmark 
+{
+0% {
+    stroke-dashoffset: 100px
+}
+100% {
+    stroke-dashoffset: 0px
+}
+}
+path.l1 {
+-webkit-animation: checkmark 0.5s ease-in-out backwards;
+animation: checkmark 0.5s ease-in-out backwards
+}
+path.l2 {
+-webkit-animation: checkmark 0.5s ease-in-out 0.16s backwards;
+animation: checkmark 0.5s ease-in-out 0.16s backwards
+}
+</style>
+<path class="l1" d="M2 2L14 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="stroke-dasharray:100px, 100px; stroke-dashoffset: 200px;"/>
+<path class="l2" d="M14 2L2 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="stroke-dasharray:100px, 100px; stroke-dashoffset: 200px;"/>
+</svg>

package/jest.config.js

@@ -11,7 +11,7 @@ module.exports = {
     'react-styleguidist.+\\.jsx?$': 'babel-jest',
     '^rsg-components(.*)$':
       '<rootDir>/node_modules/react-styleguidist/lib/client/rsg-components$1',
-    'react-pdf/dist/entry.webpack.js': 'react-pdf',
+    'react-pdf/dist/esm/entry.webpack': 'react-pdf',
     '^cozy-client$': 'cozy-client/dist/index'
   },
   transformIgnorePatterns: ['node_modules/(?!(react-styleguidist)/)'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "82.14.0",
+  "version": "83.1.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -172,7 +172,7 @@
     "piwik-react-router": "0.12.1",
     "react-chartjs-2": "4.1.0",
     "react-markdown": "^4.0.8",
-    "react-pdf": "^4.0.5",
+    "react-pdf": "^5.7.2",
     "react-popper": "^2.2.3",
     "react-remove-scroll": "^2.4.0",
     "react-select": "^4.3.0",

package/react/ActionMenu/Readme.md

@@ -14,11 +14,10 @@ Use `makeActions` method and create (or use the predefined actions) to build the
 
 An action is a simple function that returns an object with specific keys:
 
-- **name** : `<string>` – Action's name
-- **action** : `<func>` – Method triggered when clicking the action
-- **isEnabled** : `<bool>` – Used to add `disable` effect (the action is still displayed)
-- **Component** : `<func>` – The returned component that manages the display
-
+* **name** : `<string>` – Action's name
+* **action** : `<func>` – Method triggered when clicking the action
+* **isEnabled** : `<bool>` – Used to add `disable` effect (the action is still displayed)
+* **Component** : `<func>` – The returned component that manages the display
 
 ```bash
 const expl = () => ({
@@ -83,7 +82,6 @@ const actions = makeActions([ modify, hr, call, customAction ])
 </DemoProvider>
 ```
 
-
 ### With a manual creation of the actions
 
 ```jsx

package/react/BottomSheet/README.md

@@ -4,6 +4,7 @@ Display content coming up from the bottom of the screen. The pane can be swiped
 ### Usages
 
 * BottomSheet with header, text title and text content
+
 ```bash
 import BottomSheet, { BottomSheetHeader, BottomSheetItem, BottomSheetTitle } from  'cozy-ui/transpiled/react/BottomSheet'
 
@@ -19,6 +20,7 @@ import BottomSheet, { BottomSheetHeader, BottomSheetItem, BottomSheetTitle } fr
 ```
 
 * BottomSheet with list title and list content
+
 ```bash
 import BottomSheet, { BottomSheetItem, BottomSheetTitle } from  'cozy-ui/transpiled/react/BottomSheet'
 

package/react/Icon/icons-sprite.js

@@ -14,7 +14,87 @@ module.exports = `<svg><defs>
         <path id="plus-small" d="M4 4V1a1 1 0 1 1 2 0v3h3a1 1 0 1 1 0 2H6v3a1 1 0 1 1-2 0V6H1a1 1 0 1 1 0-2h3z"/>
     
     <polygon id="plus-a" points="7 0 9 0 9 7 16 7 16 9 9 9 9 16 7 16 7 9 0 9 0 7 7 7"/>
-  </defs><symbol id="bottom-select" viewBox="0 0 24 24">
+  </defs><symbol id="icon-check-animated" viewBox="0 0 16 16">
+<style>
+@-webkit-keyframes checkmark 
+{
+0% {
+    stroke-dashoffset: 100px
+}
+
+100% {
+    stroke-dashoffset: 200px
+}
+}
+
+@-ms-keyframes checkmark 
+{
+0% {
+    stroke-dashoffset: 100px
+}
+
+100% {
+    stroke-dashoffset: 200px
+}
+}
+
+@keyframes checkmark 
+{
+0% {
+    stroke-dashoffset: 100px
+}
+
+100% {
+    stroke-dashoffset: 0px
+}
+}
+path {
+-webkit-animation: checkmark 1.0s ease-in-out backwards;
+animation: checkmark 1.0s ease-in-out backwards
+}
+</style>
+<path d="M1 11L4 14L15 3" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="stroke-dasharray:100px, 100px; stroke-dashoffset: 200px;"/>
+</symbol><symbol id="icon-cross-animated" viewBox="0 0 16 16">
+<style>
+@-webkit-keyframes checkmark 
+{
+0% {
+    stroke-dashoffset: 100px
+}
+100% {
+    stroke-dashoffset: 200px
+}
+}
+@-ms-keyframes checkmark 
+{
+0% {
+    stroke-dashoffset: 100px
+}
+100% {
+    stroke-dashoffset: 200px
+}
+}
+@keyframes checkmark 
+{
+0% {
+    stroke-dashoffset: 100px
+}
+100% {
+    stroke-dashoffset: 0px
+}
+}
+path.l1 {
+-webkit-animation: checkmark 0.5s ease-in-out backwards;
+animation: checkmark 0.5s ease-in-out backwards
+}
+path.l2 {
+-webkit-animation: checkmark 0.5s ease-in-out 0.16s backwards;
+animation: checkmark 0.5s ease-in-out 0.16s backwards
+}
+</style>
+<path class="l1" d="M2 2L14 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="stroke-dasharray:100px, 100px; stroke-dashoffset: 200px;"/>
+<path class="l2" d="M14 2L2 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="stroke-dasharray:100px, 100px; stroke-dashoffset: 200px;"/>
+</symbol><symbol id="bottom-select" viewBox="0 0 24 24">
   <g fill="#95999d" fill-rule="evenodd" transform="translate(12.285714, 12.000000) rotate(90.000000) translate(-12.285714, -12.000000)">
     <path d="M6.46026077,20.3174036 C5.84657974,20.9310847 5.84657974,21.9260582 6.46026077,22.5397392 C7.0739418,23.1534203 8.06891534,23.1534203 8.68259637,22.5397392 L18.1111678,13.1111678 C18.7248488,12.4974868 18.7248488,11.5025132 18.1111678,10.8888322 L8.68259637,1.46026077 C8.06891534,0.846579743 7.0739418,0.846579743 6.46026077,1.46026077 C5.84657974,2.0739418 5.84657974,3.06891534 6.46026077,3.68259637 L14.7776644,12 L6.46026077,20.3174036 Z"/>
   </g>

package/react/Icons/IconCheckAnimated.jsx

@@ -0,0 +1,29 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/animated/icon-check-animated.svg` to regenerate;
+import React from 'react'
+
+function SvgIconCheckAnimated(props) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" {...props}>
+      <style>
+        {
+          '@-webkit-keyframes checkmark{0%{stroke-dashoffset:100px}to{stroke-dashoffset:200px}}@-ms-keyframes checkmark{0%{stroke-dashoffset:100px}to{stroke-dashoffset:200px}}@keyframes checkmark{0%{stroke-dashoffset:100px}to{stroke-dashoffset:0}}'
+        }
+      </style>
+      <path
+        d="M1 11l3 3L15 3"
+        stroke="#000"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{
+          WebkitAnimation: 'checkmark 1s ease-in-out backwards',
+          animation: 'checkmark 1s ease-in-out backwards'
+        }}
+        strokeDasharray="100px,100px"
+        strokeDashoffset={200}
+      />
+    </svg>
+  )
+}
+
+export default SvgIconCheckAnimated

package/react/Icons/IconCrossAnimated.jsx

@@ -0,0 +1,44 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/animated/icon-cross-animated.svg` to regenerate;
+import React from 'react'
+
+function SvgIconCrossAnimated(props) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" {...props}>
+      <style>
+        {
+          '@-webkit-keyframes checkmark{0%{stroke-dashoffset:100px}to{stroke-dashoffset:200px}}@-ms-keyframes checkmark{0%{stroke-dashoffset:100px}to{stroke-dashoffset:200px}}@keyframes checkmark{0%{stroke-dashoffset:100px}to{stroke-dashoffset:0}}'
+        }
+      </style>
+      <path
+        className="icon-cross-animated_svg__l1"
+        d="M2 2l12 12"
+        stroke="#000"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{
+          WebkitAnimation: 'checkmark .5s ease-in-out backwards',
+          animation: 'checkmark .5s ease-in-out backwards'
+        }}
+        strokeDasharray="100px,100px"
+        strokeDashoffset={200}
+      />
+      <path
+        className="icon-cross-animated_svg__l2"
+        d="M14 2L2 14"
+        stroke="#000"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{
+          WebkitAnimation: 'checkmark .5s ease-in-out .16s backwards',
+          animation: 'checkmark .5s ease-in-out .16s backwards'
+        }}
+        strokeDasharray="100px,100px"
+        strokeDashoffset={200}
+      />
+    </svg>
+  )
+}
+
+export default SvgIconCrossAnimated

package/react/SquareAppIcon/Readme.md

@@ -13,12 +13,15 @@ import Button from 'cozy-ui/transpiled/react/Buttons'
 const theme = useCozyTheme()
 const app = { name: "Test App", slug: "testapp", type: "app" }
 const [isLoading, setLoading] = React.useState(false)
+const [isError, setIsError] = React.useState(false)
+
 
 
 ;
 
 <>
-  <Button className="u-mb-1" label="Toggle Loading" onClick={() => setLoading(!isLoading)} />
+  <Button className="u-mb-1 u-mr-1" label="Toggle Loading" onClick={() => setLoading(!isLoading)} />
+  <Button className="u-mb-1" label="Toggle Loading Error" onClick={() => setIsError(!isError)} />
 
   <Grid container spacing={1} style={{ background: `center / cover no-repeat url(${cloudWallpaper})` }}
   >
@@ -43,6 +46,9 @@ const [isLoading, setLoading] = React.useState(false)
     <Grid item>
       <SquareAppIcon IconContent={<Icon icon={CozyIcon} size="48" />} name="Loading" variant={isLoading ? 'loading' : 'default'} />
     </Grid>
+    <Grid item>
+      <SquareAppIcon IconContent={<Icon icon={CozyIcon} size="48" />} name="Loading" variant={isError ? 'error' : 'loading'} />
+    </Grid>
     <Grid item>
       <SquareAppIcon name="Shortcut" variant="shortcut" IconContent={<img
               src={`data:image/svg+xml;base64,${window.btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap

@@ -36,6 +36,9 @@ exports[`SquareAppIcon component should render an app correctly with the app nam
       <div
         class="styles__SquareAppIcon-icon-container___39MRl"
       >
+        <div
+          class="styles__onEnd___1O6Q7"
+        />
         <svg
           class="styles__c-app-icon___2_O40 styles__c-app-icon-default___3CEmt styles__icon___23x3R"
           height="100%"
@@ -100,6 +103,9 @@ exports[`SquareAppIcon component should render an app correctly with the given n
       <div
         class="styles__SquareAppIcon-icon-container___39MRl"
       >
+        <div
+          class="styles__onEnd___1O6Q7"
+        />
         <svg
           class="styles__c-app-icon___2_O40 styles__c-app-icon-default___3CEmt styles__icon___23x3R"
           height="100%"
@@ -164,6 +170,9 @@ exports[`SquareAppIcon component should render an app with the app slug if no na
       <div
         class="styles__SquareAppIcon-icon-container___39MRl"
       >
+        <div
+          class="styles__onEnd___1O6Q7"
+        />
         <svg
           class="styles__c-app-icon___2_O40 styles__c-app-icon-default___3CEmt styles__icon___23x3R"
           height="100%"
@@ -206,6 +215,9 @@ exports[`SquareAppIcon component should render correctly an app in add state 1`]
       <div
         class="styles__SquareAppIcon-icon-container___39MRl"
       >
+        <div
+          class="styles__onEnd___1O6Q7"
+        />
         <svg
           class="styles__icon___23x3R"
           height="16"
@@ -247,12 +259,37 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
   <span
     class="MuiBadge-root"
   >
+    <div
+      class="styles__c-spinner___1snK7 styles__SquareAppIcon-spinner___o0LO1 u-m-0"
+    >
+      <svg
+        aria-busy="true"
+        class="styles__icon___23x3R styles__icon--spin___ybfC1"
+        height="16"
+        role="progressbar"
+        style="fill: var(--spinnerColor);"
+        viewBox="0 0 32 32"
+        width="16"
+      >
+        <path
+          d="M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24"
+          opacity="0.25"
+        />
+        <path
+          d="M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z"
+        />
+      </svg>
+      
+    </div>
     <span
       class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-33"
     >
       <div
         class="styles__SquareAppIcon-icon-container___39MRl"
       >
+        <div
+          class="styles__onEnd___1O6Q7"
+        />
         <svg
           class="styles__c-app-icon___2_O40 styles__c-app-icon-default___3CEmt styles__icon___23x3R"
           height="100%"
@@ -307,6 +344,9 @@ exports[`SquareAppIcon component should render correctly an app in ghost state 1
       <div
         class="styles__SquareAppIcon-icon-container___39MRl"
       >
+        <div
+          class="styles__onEnd___1O6Q7"
+        />
         <svg
           class="styles__c-app-icon___2_O40 styles__c-app-icon-default___3CEmt styles__icon___23x3R"
           height="100%"
@@ -349,6 +389,9 @@ exports[`SquareAppIcon component should render correctly an app in maintenance s
       <div
         class="styles__SquareAppIcon-icon-container___39MRl"
       >
+        <div
+          class="styles__onEnd___1O6Q7"
+        />
         <svg
           class="styles__c-app-icon___2_O40 styles__c-app-icon-default___3CEmt styles__icon___23x3R"
           height="100%"
@@ -458,6 +501,9 @@ exports[`SquareAppIcon component should render correctly an app with custom cont
       <div
         class="styles__SquareAppIcon-icon-container___39MRl"
       >
+        <div
+          class="styles__onEnd___1O6Q7"
+        />
         <svg
           class="styles__icon___23x3R"
           height="16"

package/react/SquareAppIcon/index.jsx

@@ -1,19 +1,21 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import get from 'lodash/get'
 
-import { makeStyles } from '../styles'
 import AppIcon from '../AppIcon'
 import Badge from '../Badge'
+import Icon from '../Icon'
+import IconCheckAnimated from '../Icons/IconCheckAnimated'
 import InfosBadge from '../InfosBadge'
-import { nameToColor } from '../Avatar'
 import Spinner from '../Spinner'
+import SvgIconCrossAnimated from '../Icons/IconCrossAnimated'
 import Typography from '../Typography'
-import Icon from '../Icon'
+import iconOut from '../Icons/LinkOut'
 import iconPlus from '../Icons/Plus'
 import iconWarning from '../Icons/WarningCircle'
-import iconOut from '../Icons/LinkOut'
+import { makeStyles } from '../styles'
+import { nameToColor } from '../Avatar'
 
 import { color } from './constants.json'
 import styles from './styles.styl'
@@ -72,6 +74,23 @@ export const SquareAppIcon = ({
   const appName =
     name || get(appIconProps, 'app.name') || get(appIconProps, 'app') || ''
   const letter = appName[0] || ''
+  const prevVariant = React.useRef(variant)
+  const [animationState, setAnimationState] = useState()
+
+  const handleAnimationEnd = e => {
+    if (e.animationName.startsWith('end')) setAnimationState()
+  }
+
+  useEffect(() => {
+    const curr = prevVariant.current
+
+    if (curr === 'loading' && variant === 'error') setAnimationState('failed')
+
+    if (curr === 'loading' && (variant === 'default' || variant === undefined))
+      setAnimationState('success')
+
+    prevVariant.current = variant
+  }, [variant])
 
   return (
     <div data-testid="square-app-icon" className={cx(classes.tileWrapper)}>
@@ -82,7 +101,7 @@ export const SquareAppIcon = ({
         overlap="rectangular"
         invisible={variant !== 'shortcut'}
       >
-        {['default', 'loading'].includes(variant) && (
+        {['default', 'loading', 'error'].includes(variant) && (
           <Spinner className={cx(styles['SquareAppIcon-spinner'], 'u-m-0')} />
         )}
         <Badge
@@ -124,6 +143,26 @@ export const SquareAppIcon = ({
             </Typography>
           ) : (
             <div className={styles['SquareAppIcon-icon-container']}>
+              <div
+                className={cx(
+                  styles['onEnd'],
+                  { [styles['isSuccess']]: animationState === 'success' },
+                  { [styles['isFailed']]: animationState === 'failed' }
+                )}
+                onAnimationEnd={handleAnimationEnd}
+              >
+                {animationState && (
+                  <Icon
+                    size="32"
+                    icon={
+                      animationState === 'success'
+                        ? IconCheckAnimated
+                        : SvgIconCrossAnimated
+                    }
+                  />
+                )}
+              </div>
+
               {variant === 'add' ? (
                 <Icon icon={iconPlus} color={color} />
               ) : IconContent ? (

package/react/SquareAppIcon/styles.styl

@@ -55,7 +55,77 @@ $color = constants['color'] // hard-coded color, because the component is curren
         transform scale(0.8334)
 
 .SquareAppIcon-spinner
+    margin 0 !important
+
     svg
         position absolute
         height 100%
         width 100%
+
+animation-duration = 1.50s
+icon-duration = 0.2s
+icon-start = 0.2s
+border-radius-start = 50%
+border-radius-end = rem(12)
+opacity-start = 0
+opacity-end = 1
+
+.onEnd
+    align-items center
+    border-radius border-radius-start
+    display flex
+    height 100%
+    opacity opacity-start
+    position absolute
+    width 100%
+    z-index 1
+
+    svg
+        fill transparent !important
+
+        path
+            animation-duration icon-duration !important
+
+        path:first-of-type
+            animation-delay icon-start !important
+
+        // The second path is a part of the cross, 
+        // since it has its own hardcoded animation delay we need to add it again (.16s)
+        path+path
+            animation-delay icon-start + .16s !important
+
+        *
+            stroke var(--white) !important
+
+.onEnd.isFailed
+    --animationColor var(--errorColor)
+
+.onEnd.isSuccess
+    --animationColor var(--successColor)
+
+.isSuccess
+.isFailed
+    animation end-animation animation-duration forwards
+
+@keyframes end-animation {
+  0% {
+    background-color transparent
+    border-radius border-radius-start
+    opacity opacity-start
+  }
+  13.33% {
+    background-color var(--animationColor)
+    border-radius border-radius-end
+    opacity opacity-end
+  }
+  66.67% {
+    background-color var(--animationColor)
+    border-radius border-radius-end
+    opacity opacity-end
+  }
+  100% {
+    border-radius border-radius-end
+    opacity opacity-start
+    background-color transparent
+  }
+}