cozy-ui 86.1.0 → 86.3.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [86.3.0](https://github.com/cozy/cozy-ui/compare/v86.2.0...v86.3.0) (2023-06-27)
+
+
+### Features
+
+* **Paywall:** Add MaxPapersPaywall ([a9b744f](https://github.com/cozy/cozy-ui/commit/a9b744f))
+* **Paywall:** Change `I understood` in `I understand` ([ba43862](https://github.com/cozy/cozy-ui/commit/ba43862))
+
+# [86.2.0](https://github.com/cozy/cozy-ui/compare/v86.1.0...v86.2.0) (2023-06-21)
+
+
+### Features
+
+* Add "ArrowUp" UI Icon ([b0c3711](https://github.com/cozy/cozy-ui/commit/b0c3711))
+
 # [86.1.0](https://github.com/cozy/cozy-ui/compare/v86.0.0...v86.1.0) (2023-06-20)
 
 

package/assets/icons/ui/arrow-up.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 3.414v11.58C9 15.548 8.556 16 8 16c-.552 0-1-.45-1-1.007V3.414L1.707 8.707A1 1 0 0 1 .293 7.293l7-7a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1-1.414 1.414L9 3.414Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "86.1.0",
+  "version": "86.3.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -29,7 +29,8 @@
     "build:doc:react": "styleguidist build --config docs/styleguide.config.js",
     "build:types": "tsc -p tsconfig-build.json",
     "build:all": "yarn makeSpriteAndPalette && yarn build && yarn build:css:all && yarn build:doc",
-    "build": "yarn build:types && env BABEL_ENV=transpilation babel --extensions .ts,.tsx,.js,.jsx react/ --out-dir transpiled/react --verbose",
+    "build:js": "env BABEL_ENV=transpilation babel --extensions .ts,.tsx,.js,.jsx react/ --out-dir transpiled/react --verbose",
+    "build": "yarn build:types && yarn build:js",
     "clean:doc:kss": "rm -rf build/styleguide",
     "deploy:doc": "git-directory-deploy --directory build/ --branch gh-pages",
     "makeSvgr": "scripts/generate-svgr-icon.sh",

package/react/Icon/Readme.md

@@ -32,6 +32,7 @@ import AlbumRemove from 'cozy-ui/transpiled/react/Icons/AlbumRemove'
 import Answer from 'cozy-ui/transpiled/react/Icons/Answer'
 import Apple from 'cozy-ui/transpiled/react/Icons/Apple'
 import Archive from 'cozy-ui/transpiled/react/Icons/Archive'
+import ArrowUp from 'cozy-ui/transpiled/react/Icons/ArrowUp'
 import Attachment from 'cozy-ui/transpiled/react/Icons/Attachment'
 import Attention from 'cozy-ui/transpiled/react/Icons/Attention'
 import Bank from 'cozy-ui/transpiled/react/Icons/Bank'
@@ -258,6 +259,7 @@ const icons = [
   Answer,
   Apple,
   Archive,
+  ArrowUp,
   Attachment,
   Attention,
   Bank,
@@ -856,7 +858,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check','checkbox','circle-filled','clock','clock-outline','cloud-happy','cloud','collect','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','refresh','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway', 'swap', 'sync-cozy','sync','tag','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check','checkbox','circle-filled','clock','clock-outline','cloud-happy','cloud','collect','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','refresh','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway', 'swap', 'sync-cozy','sync','tag','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
 ;
 <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
   <Sprite />

package/react/Icon/icons-sprite.js

@@ -179,7 +179,7 @@ animation: checkmark 0.5s ease-in-out 0.16s backwards
     <path fill-rule="evenodd" d="M11.88 8.5c.023 2.422 2.125 3.227 2.148 3.238-.018.056-.336 1.148-1.107 2.275-.667.975-1.36 1.946-2.45 1.966-1.07.02-1.415-.635-2.64-.635s-1.607.615-2.622.655c-1.052.04-1.853-1.054-2.526-2.025C1.31 11.987.26 8.36 1.67 5.912c.7-1.215 1.952-1.985 3.31-2.005 1.034-.02 2.01.695 2.641.695.632 0 1.817-.86 3.063-.733.522.022 1.986.21 2.927 1.587-.076.047-1.748 1.02-1.73 3.044M9.868 2.555c.559-.677.935-1.618.832-2.555-.805.032-1.779.537-2.357 1.213-.517.598-.97 1.556-.848 2.475.897.069 1.814-.457 2.373-1.133"/>
 </symbol><symbol id="archive" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M1 4h14v10.004a1 1 0 0 1-1.007.996H2.007A1 1 0 0 1 1 14.004V4zM0 2c0-.552.445-1 1-1h14c.552 0 1 .444 1 1v1H0V2zm5 4v2h6V6H5z"/>
-</symbol><symbol id="attachment" viewBox="0 0 16 16">
+</symbol><symbol id="arrow-up" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 3.414v11.58C9 15.548 8.556 16 8 16c-.552 0-1-.45-1-1.007V3.414L1.707 8.707A1 1 0 0 1 .293 7.293l7-7a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1-1.414 1.414L9 3.414Z"/></symbol><symbol id="attachment" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M2.43 14.43C.457 12.457.337 9.385 2.16 7.56l6.3-6.3c1.327-1.325 3.563-1.237 4.997.197 1.434 1.434 1.522 3.67.196 4.996l-5.1 5.1c-.828.828-2.227.773-3.123-.123-.895-.895-.95-2.294-.122-3.122l4.5-4.5 1.298 1.298L6.552 9.66c-.33.33.319.979.649.649l5.154-5.154c.66-.66.616-1.784-.098-2.498-.714-.714-1.838-.758-2.498-.098l-6.3 6.3c-1.158 1.158-1.081 3.119.171 4.371 1.253 1.253 3.214 1.33 4.372.172l5.7-5.7L15 9l-5.7 5.7c-1.824 1.824-4.897 1.703-6.87-.27z"/>
 </symbol><symbol id="attention" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M8 2l8 12H0L8 2zM7 6v4h2V6H7zm0 5v2h2v-2H7z"/>

package/react/Icons/ArrowUp.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/arrow-up.svg` to regenerate;
+import React from 'react'
+
+function SvgArrowUp(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 3.414v11.58C9 15.548 8.556 16 8 16c-.552 0-1-.45-1-1.007V3.414L1.707 8.707A1 1 0 01.293 7.293l7-7a1 1 0 011.414 0l7 7a1 1 0 01-1.414 1.414L9 3.414z"
+      />
+    </svg>
+  )
+}
+
+export default SvgArrowUp

package/react/MuiCozyTheme/List/Readme.md

@@ -35,7 +35,9 @@ import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemSecondaryAction'
-import ActionMenu, { ActionMenuItem, ActionMenuRadio, ActionMenuHeader } from 'cozy-ui/transpiled/react/ActionMenu'
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import ActionsMenuWrapper from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuWrapper'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Menu from 'cozy-ui/transpiled/react/MuiCozyTheme/Menus'
 import MenuItem from '@material-ui/core/MenuItem'
@@ -127,25 +129,35 @@ const initialVariants = [{ dense: false, disabledGutters: false, doubleGutters:
               </ListItemSecondaryAction>
             </ListItem>
             {state.showMenu && (
-              <ActionMenu
-                anchorElRef={anchorRef}
+              <ActionsMenuWrapper
+                anchorEl={anchorRef.current}
+                open
                 autoclose
+                getContentAnchorEl={null}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'right'
+                }}
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right'
+                }}
+                keepMounted
                 onClose={hideMenu}
               >
-                <ActionMenuItem left={<Icon icon={FileIcon} />}>
-                  <Typography variant="body1" gutterBottom>
-                    Item 1
-                  </Typography>
-                  <Typography variant="caption" color="textSecondary">
-                    Descriptive text to elaborate on what item 3 does.
-                  </Typography>
-                </ActionMenuItem>
-                <ActionMenuItem left={<Icon icon={FileIcon} />}>
-                  <Typography variant="body1" gutterBottom>
-                    Item 2
-                  </Typography>
-                </ActionMenuItem>
-              </ActionMenu>
+                <ActionsMenuItem>
+                  <ListItemIcon>
+                    <Icon icon={FileIcon} />
+                  </ListItemIcon>
+                  <ListItemText primary="Item 1" secondary="Descriptive text to elaborate on what item 3 does."/>
+                </ActionsMenuItem>
+                <ActionsMenuItem>
+                  <ListItemIcon>
+                    <Icon icon={FileIcon} />
+                  </ListItemIcon>
+                  <ListItemText primary="Item 2" />
+                </ActionsMenuItem>
+              </ActionsMenuWrapper>
             )}
             <Divider component="li" variant="inset" />
 

package/react/Paywall/MaxAccountsByKonnectorPaywall.jsx

@@ -2,20 +2,17 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import Paywall from './Paywall'
-import { useI18n } from '../I18n'
 import withPaywallLocales from './locales/withPaywallLocales'
 
 /**
  * Paywall displayed when the user reach the maximum accounts allowed for a konnector
  */
 const MaxAccountsByKonnectorPaywall = ({ max, konnectorName, onClose }) => {
-  const { t } = useI18n()
-
   return (
     <Paywall
       variant="maxAccountsByKonnector"
       contentInterpolation={{
-        maxAccount: t('maxAccount', { smart_count: max }),
+        smart_count: max,
         konnectorName
       }}
       onClose={onClose}

package/react/Paywall/MaxAccountsPaywall.jsx

@@ -3,20 +3,15 @@ import PropTypes from 'prop-types'
 
 import Paywall from './Paywall'
 import withPaywallLocales from './locales/withPaywallLocales'
-import { useI18n } from '../I18n'
 
 /**
  * Paywall displayed when the user reach the maximum accounts allowed for all konnectors
  */
 const MaxAccountsPaywall = ({ max, onClose }) => {
-  const { t } = useI18n()
-
   return (
     <Paywall
       variant="maxAccounts"
-      contentInterpolation={{
-        maxAccount: t('maxAccount', { smart_count: max })
-      }}
+      contentInterpolation={{ smart_count: max }}
       onClose={onClose}
     />
   )

package/react/Paywall/MaxPapersPaywall.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Paywall from './Paywall'
+import withPaywallLocales from './locales/withPaywallLocales'
+
+/**
+ * Paywall displayed when the user reaches the maximum number of papers created via the Mespapiers application.
+ *
+ * @param {number} max - Maximum papers allowed
+ * @param {function} onClose - Callback used when the user close the paywall
+ * @returns {React.Component} - React component
+ */
+const MaxPapersPaywall = ({ max, onClose }) => {
+  return (
+    <Paywall
+      variant="maxPapers"
+      contentInterpolation={{ smart_count: max }}
+      onClose={onClose}
+    />
+  )
+}
+
+MaxPapersPaywall.propTypes = {
+  max: PropTypes.number.isRequired,
+  onClose: PropTypes.func.isRequired
+}
+
+export default withPaywallLocales(MaxPapersPaywall)

package/react/Paywall/Readme.md

@@ -7,7 +7,8 @@ import {
   OnlyOfficePaywall,
   PasswordSharingPaywall,
   MaxAccountsByKonnectorPaywall,
-  MaxAccountsPaywall
+  MaxAccountsPaywall,
+  MaxPapersPaywall
 } from "cozy-ui/transpiled/react/Paywall"
 import { CozyProvider } from "cozy-client"
 import { BreakpointsProvider } from "cozy-ui/transpiled/react/hooks/useBreakpoints"
@@ -61,6 +62,10 @@ const paywalls = [
   {
     name: 'MaxAccountsPaywall',
     component: MaxAccountsPaywall
+  },
+  {
+    name: 'MaxPapersPaywall',
+    component: MaxPapersPaywall
   }
 ]
 

package/react/Paywall/index.jsx

@@ -4,3 +4,4 @@ export {
   default as MaxAccountsByKonnectorPaywall
 } from './MaxAccountsByKonnectorPaywall'
 export { default as MaxAccountsPaywall } from './MaxAccountsPaywall'
+export { default as MaxPapersPaywall } from './MaxPapersPaywall'

package/react/Paywall/locales/en.json

@@ -1,6 +1,6 @@
 {
   "mobileApp": {
-    "action": "I understood"
+    "action": "I understand"
   },
   "onlyOfficePaywall": {
     "premium": {
@@ -11,12 +11,12 @@
     "public": {
       "title": "Information",
       "content": "You cannot edit this file online. Please ask the document owner to update their Cozy subscription.",
-      "action": "I understood"
+      "action": "I understand"
     },
     "default": {
       "title": "Information",
       "content": "Your current offer does not allow you to take advantage of this feature.",
-      "action": "I understood"
+      "action": "I understand"
     }
   },
   "passwordSharingPaywall": {
@@ -28,32 +28,43 @@
     "default": {
       "title": "Information",
       "content": "Your current offer does not allow you to take advantage of this feature.",
-      "action": "I understood"
+      "action": "I understand"
     }
   },
-  "maxAccount": "%{smart_count} account |||| %{smart_count} accounts",
   "maxAccountsByKonnectorPaywall": {
     "premium": {
       "title": "Upgrade your Cozy!",
-      "content": "Your offer allows you to connect %{maxAccount} %{konnectorName} in your Cozy.  \n  \nTo unlock this feature, or simply support us, you can change your Cozy offer.",
+      "content": "Your offer allows you to connect %{smart_count} account %{konnectorName} in your Cozy.\n\nTo unlock this feature, or simply support us, you can change your Cozy offer. |||| Your offer allows you to connect %{smart_count} accounts %{konnectorName} in your Cozy.\n\nTo unlock this feature, or simply support us, you can change your Cozy offer.",
       "action": "Check our plans"
     },
     "default": {
       "title": "Information",
       "content": "Your current offer does not allow you to take advantage of this feature.",
-      "action": "I understood"
+      "action": "I understand"
     }
   },
   "maxAccountsPaywall": {
     "premium": {
       "title": "Upgrade your Cozy!",
-      "content": "Your offer allows you to connect %{maxAccount} in your Cozy.  \n  \nTo unlock this feature, or simply support us, you can change your Cozy offer.",
+      "content": "Your offer allows you to connect %{smart_count} account in your Cozy.\n\nTo unlock this feature, or simply support us, you can change your Cozy offer. |||| Your offer allows you to connect %{smart_count} accounts in your Cozy.\n\nTo unlock this feature, or simply support us, you can change your Cozy offer.",
       "action": "Check our plans"
     },
     "default": {
       "title": "Information",
       "content": "Your current offer does not allow you to take advantage of this feature.",
-      "action": "I understood"
+      "action": "I understand"
+    }
+  },
+  "maxPapersPaywall": {
+    "premium": {
+      "title": "Upgrade your Cozy!",
+      "content": "Your offer allows you to manually add up to %{smart_count} paper.\n\nTo unlock this feature, or simply support us, you can modify the offer of your Cozy. |||| Your offer allows you to manually add up to %{smart_count} papers.\n\nTo unlock this feature, or simply support us, you can modify the offer of your Cozy.",
+      "action": "Check our plans"
+    },
+    "default": {
+      "title": "Information",
+      "content": "Your current offer does not allow you to take advantage of this feature.",
+      "action": "I understand"
     }
   }
 }

package/react/Paywall/locales/fr.json

@@ -31,11 +31,10 @@
       "action": "J'ai compris"
     }
   },
-  "maxAccount": "%{smart_count} compte |||| %{smart_count} comptes",
   "maxAccountsByKonnectorPaywall": {
     "premium": {
       "title": "Augmenter votre Cozy !",
-      "content": "Votre offre vous permet de connecter %{maxAccount} %{konnectorName} dans votre Cozy.  \n  \nPour débloquer cette fonctionnalité, ou simplement nous soutenir, vous pouvez modifier l'offre de votre Cozy.",
+      "content": "Votre offre vous permet de connecter %{smart_count} compte %{konnectorName} dans votre Cozy.\n\nPour débloquer cette fonctionnalité, ou simplement nous soutenir, vous pouvez modifier l'offre de votre Cozy. |||| Votre offre vous permet de connecter %{smart_count} comptes %{konnectorName} dans votre Cozy.\n\nPour débloquer cette fonctionnalité, ou simplement nous soutenir, vous pouvez modifier l'offre de votre Cozy.",
       "action": "Voir les offres"
     },
     "default": {
@@ -47,7 +46,19 @@
   "maxAccountsPaywall": {
     "premium": {
       "title": "Augmenter votre Cozy !",
-      "content": "Votre offre vous permet de connecter %{maxAccount} dans votre Cozy.  \n  \nPour débloquer cette fonctionnalité, ou simplement nous soutenir, vous pouvez modifier l'offre de votre Cozy.",
+      "content": "Votre offre vous permet de connecter %{smart_count} compte dans votre Cozy.\n\nPour débloquer cette fonctionnalité, ou simplement nous soutenir, vous pouvez modifier l'offre de votre Cozy. |||| Votre offre vous permet de connecter %{smart_count} comptes dans votre Cozy.\n\nPour débloquer cette fonctionnalité, ou simplement nous soutenir, vous pouvez modifier l'offre de votre Cozy.",
+      "action": "Voir les offres"
+    },
+    "default": {
+      "title": "Information",
+      "content": "Votre offre actuelle ne vous permet pas de profiter de cette fonctionnalité.",
+      "action": "J'ai compris"
+    }
+  },
+  "maxPapersPaywall": {
+    "premium": {
+      "title": "Augmenter votre Cozy !",
+      "content": "Votre offre vous permet d'ajouter manuellement jusqu'à %{smart_count} papier.\n\nPour débloquer cette fonctionnalité, ou simplement nous soutenir, vous pouvez modifier l'offre de votre Cozy. |||| Votre offre vous permet d'ajouter manuellement jusqu'à %{smart_count} papiers.\n\nPour débloquer cette fonctionnalité, ou simplement nous soutenir, vous pouvez modifier l'offre de votre Cozy.",
       "action": "Voir les offres"
     },
     "default": {