cozy-ui 113.2.0 → 113.4.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [113.4.0](https://github.com/cozy/cozy-ui/compare/v113.3.0...v113.4.0) (2024-11-25)
+
+
+### Features
+
+* **Actions:** Add viewInDrive ([36bd091](https://github.com/cozy/cozy-ui/commit/36bd091))
+* **Icon:** Add folderOpen ([6d72a55](https://github.com/cozy/cozy-ui/commit/6d72a55))
+
+# [113.3.0](https://github.com/cozy/cozy-ui/compare/v113.2.0...v113.3.0) (2024-11-18)
+
+
+### Features
+
+* **SquareAppIcon:** Hide shortcut badges for a more app like feel ([49d8438](https://github.com/cozy/cozy-ui/commit/49d8438))
+
 # [113.2.0](https://github.com/cozy/cozy-ui/compare/v113.1.0...v113.2.0) (2024-11-14)
 
 

package/assets/icons/ui/folder-open.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M0 13V3a2 2 0 0 1 2-2h3.172a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 8.828 3H12a2 2 0 0 1 2 2H3.5a.5.5 0 0 0-.474.342l-2 6a.5.5 0 1 0 .948.316L3.86 6h11.142a1 1 0 0 1 .952 1.304l-2.01 6.304A2 2 0 0 1 12.039 15H2a2 2 0 0 1-2-2Z"/></svg>

package/package.json

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

package/react/ActionsMenu/Actions/index.js

@@ -6,4 +6,5 @@ export { call } from './call'
 export { emailTo } from './emailTo'
 export { print } from './print'
 export { viewInContacts } from './viewInContacts'
+export { viewInDrive } from './viewInDrive'
 export { others } from './others'

package/react/ActionsMenu/Actions/locales/en.json

@@ -1,5 +1,6 @@
 {
   "viewInContacts": "View in Cozy Contacts",
+  "viewInDrive": "Open",
   "modify": "Modify",
   "emailTo": "Send an email",
   "smsTo": "Send a message",

package/react/ActionsMenu/Actions/locales/fr.json

@@ -1,5 +1,6 @@
 {
   "viewInContacts": "Voir dans Cozy Contacts",
+  "viewInDrive": "Ouvrir",
   "modify": "Modifier",
   "emailTo": "Envoyer un e-mail",
   "smsTo": "Envoyer un message",

package/react/ActionsMenu/Actions/viewInDrive.js

@@ -0,0 +1,52 @@
+import React, { forwardRef } from 'react'
+
+import { generateWebLink } from 'cozy-client'
+
+import { getActionsI18n } from './locales/withActionsLocales'
+import Icon from '../../Icon'
+import FolderOpenIcon from '../../Icons/FolderOpen'
+import ListItemIcon from '../../ListItemIcon'
+import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+
+  Component.displayName = 'viewInDrive'
+
+  return Component
+}
+
+export const viewInDrive = () => {
+  const { t } = getActionsI18n()
+  const icon = FolderOpenIcon
+  const label = t('viewInDrive')
+
+  return {
+    name: 'viewInDrive',
+    icon,
+    label,
+    Component: makeComponent(label, icon),
+    action: (docs, { client }) => {
+      const dirId = docs[0].dir_id
+      const webLink = generateWebLink({
+        slug: 'drive',
+        cozyUrl: client.getStackClient().uri,
+        subDomainType: client.getInstanceOptions().subdomain,
+        pathname: '/',
+        hash: `folder/${dirId}`
+      })
+
+      window.open(webLink, '_blank')
+    }
+  }
+}

package/react/ActionsMenu/Readme.md

@@ -65,7 +65,7 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
 import FileTypeText from 'cozy-ui/transpiled/react/Icons/FileTypeText'
 import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
 
-import { makeActions, modify, emailTo, print, viewInContacts, divider, smsTo, call } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+import { makeActions, modify, emailTo, print, viewInContacts, viewInDrive, divider, smsTo, call } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 
 initialState = { showMenu: isTesting() }
 
@@ -100,7 +100,7 @@ const customAction = () => ({
   })
 })
 
-const actions = makeActions([ modify, viewInContacts, divider, call, smsTo, emailTo, print, divider, customAction ])
+const actions = makeActions([ modify, viewInContacts, viewInDrive, divider, call, smsTo, emailTo, print, divider, customAction ])
 
 ;
 

package/react/Icon/Readme.md

@@ -176,6 +176,7 @@ import Flashlight from 'cozy-ui/transpiled/react/Icons/Flashlight'
 import Folder from 'cozy-ui/transpiled/react/Icons/Folder'
 import FolderAdd from 'cozy-ui/transpiled/react/Icons/FolderAdd'
 import FolderMoveto from 'cozy-ui/transpiled/react/Icons/FolderMoveto'
+import FolderOpen from 'cozy-ui/transpiled/react/Icons/FolderOpen'
 import Forbidden from 'cozy-ui/transpiled/react/Icons/Forbidden'
 import FromUser from 'cozy-ui/transpiled/react/Icons/FromUser'
 import Gear from 'cozy-ui/transpiled/react/Icons/Gear'
@@ -441,6 +442,7 @@ const icons = [
   Folder,
   FolderAdd,
   FolderMoveto,
+  FolderOpen,
   Forbidden,
   FromUser,
   Gear,
@@ -929,7 +931,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','arrowUp','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','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','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud','collect','cocktail','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-outline','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','electric-bike','electric-car','electric-scooter','email-notification','email','eu','euro','exchange','eye-closed','eye','face-id','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','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','mosaic-min','motorcycle','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', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','select-all','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','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','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud','collect','cocktail','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-outline','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','electric-bike','electric-car','electric-scooter','email-notification','email','eu','euro','exchange','eye-closed','eye','face-id','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-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','mosaic-min','motorcycle','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', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','select-all','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
 ;
 <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
   <Sprite />

package/react/Icons/FolderOpen.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/folder-open.svg` to regenerate;
+import React from 'react'
+
+function SvgFolderOpen(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M0 13V3a2 2 0 012-2h3.172a2 2 0 011.414.586l.828.828A2 2 0 008.828 3H12a2 2 0 012 2H3.5a.5.5 0 00-.474.342l-2 6a.5.5 0 10.948.316L3.86 6h11.142a1 1 0 01.952 1.304l-2.01 6.304A2 2 0 0112.039 15H2a2 2 0 01-2-2z" />
+    </svg>
+  )
+}
+
+export default SvgFolderOpen

package/react/SquareAppIcon/Readme.md

@@ -14,12 +14,14 @@ const { variant } = useCozyTheme()
 const app = { name: "Test App", slug: "testapp", type: "app" }
 const [isLoading, setLoading] = React.useState(false)
 const [isError, setIsError] = React.useState(false)
+const [isShortcutBadgeHide, setShortcutBadgeHide] = React.useState(false)
 
 ;
 
 <>
   <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)} />
+  <Button className="u-mb-1 u-mr-1" label="Toggle Loading Error" onClick={() => setIsError(!isError)} />
+  <Button className="u-mb-1" label="Hide shortcut badge" onClick={() => setShortcutBadgeHide(!isShortcutBadgeHide)} />
 
   <Grid container spacing={1} style={{ background: variant === 'inverted' ? `center / cover no-repeat url(${cloudWallpaper})` : 'white' }}
   >
@@ -39,7 +41,7 @@ const [isError, setIsError] = React.useState(false)
       <SquareAppIcon app="testapp" name="No Account long name very very very very long" variant="ghost" />
     </Grid>
     <Grid item>
-      <SquareAppIcon name="Shortcut" variant="shortcut" />
+      <SquareAppIcon name="Shortcut" variant="shortcut" hideShortcutBadge={isShortcutBadgeHide} />
     </Grid>
     <Grid item>
       <SquareAppIcon IconContent={<Icon icon={CozyIcon} size="48" />} name="Loading" variant={isLoading ? 'loading' : 'default'} />
@@ -58,7 +60,7 @@ const [isError, setIsError] = React.useState(false)
               width={32}
               height={32}
               alt={"Shortcut"}
-            />}/>
+            />} hideShortcutBadge={isShortcutBadgeHide} />
     </Grid>
     <Grid item>
       <SquareAppIcon name="Custom Icon" IconContent={<Icon icon={CozyIcon} size="48" />} />
@@ -103,40 +105,78 @@ const { variant } = useCozyTheme()
 const app = { name: "Test App", slug: "testapp", type: "app" }
 const [isLoading, setLoading] = React.useState(false)
 const [isError, setIsError] = React.useState(false)
+const [isShortcutBadgeHide, setShortcutBadgeHide] = React.useState(false)
 
 ;
 
 <>
   <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)} />
+  <Button className="u-mb-1 u-mr-1" label="Toggle Loading Error" onClick={() => setIsError(!isError)} />
+    <Button className="u-mb-1" label="Hide shortcut badge" onClick={() => setShortcutBadgeHide(!isShortcutBadgeHide)} />
 
   <Grid container spacing={4}>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Weather Wiz" description="Get real-time weather updates and forecasts" />
+      <SquareAppIcon
+        display="detailed"
+        name="Weather Wiz"
+        description="Get real-time weather updates and forecasts" />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Meal Planner" description="Plan your meals with nutrition tracking" variant="maintenance" />
+      <SquareAppIcon
+        display="detailed"
+        name="Meal Planner"
+        description="Plan your meals with nutrition tracking"
+        variant="maintenance" />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Travel Tracker" description="Explore and document your travel adventures" variant="error" />
+      <SquareAppIcon
+        display="detailed"
+        name="Travel Tracker"
+        description="Explore and document your travel adventures"
+        variant="error" />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Fitness Friend" variant="add" />
+      <SquareAppIcon
+        display="detailed"
+        name="Fitness Friend"
+        variant="add" />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Mindful Moments" description="Guided meditations for daily mindfulness" variant="ghost" />
+      <SquareAppIcon
+        display="detailed"
+        name="Mindful Moments"
+        description="Guided meditations for daily mindfulness"
+        variant="ghost" />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Study Space" description="Organize your study schedule and resources" variant="shortcut" />
+      <SquareAppIcon
+        display="detailed"
+        name="Study Space"
+        description="Organize your study schedule and resources"
+        variant="shortcut"
+        hideShortcutBadge={isShortcutBadgeHide} />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Quick Notes" IconContent={<Icon icon={CozyIcon} size="48" />} variant={isLoading ? 'loading' : 'default'} />
+      <SquareAppIcon
+        display="detailed"
+        name="Quick Notes"
+        IconContent={<Icon icon={CozyIcon} size="48" />}
+        variant={isLoading ? 'loading' : 'default'} />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Daily Budget" description="Manage your daily expenses and budgets" IconContent={<Icon icon={CozyIcon} size="48" />} variant={isError ? 'error' : 'loading'} />
+      <SquareAppIcon
+        display="detailed"
+        name="Daily Budget"
+        description="Manage your daily expenses and budgets"
+        IconContent={<Icon icon={CozyIcon} size="48" />}
+        variant={isError ? 'error' : 'loading'} />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Event Planner" description="Plan and schedule your events effectively" IconContent={<Icon icon={CozyIcon} size="48" />} />
+      <SquareAppIcon
+        display="detailed"
+        name="Event Planner"
+        description="Plan and schedule your events effectively"
+        IconContent={<Icon icon={CozyIcon} size="48" />} />
     </Grid>
   </Grid>
 </>

package/react/SquareAppIcon/index.jsx

@@ -100,6 +100,7 @@ export const SquareAppIcon = ({
   variant,
   IconContent,
   description,
+  hideShortcutBadge = false,
   ...appIconProps
 }) => {
   const { variant: themeVariant } = useCozyTheme()
@@ -139,11 +140,13 @@ export const SquareAppIcon = ({
       <CozyTheme variant={squareTheme}>
         <InfosBadge
           badgeContent={
-            variant === 'shortcut' ? <Icon size="10" icon={iconOut} /> : null
+            variant === 'shortcut' && !hideShortcutBadge ? (
+              <Icon size="10" icon={iconOut} />
+            ) : null
           }
           className={cx({ ['u-mr-1']: display === 'detailed' })}
           overlap="rectangular"
-          invisible={variant !== 'shortcut'}
+          invisible={variant !== 'shortcut' || hideShortcutBadge}
         >
           <SquareAppIconSpinner
             variant={variant}

package/transpiled/react/ActionsMenu/Actions/index.js

@@ -6,4 +6,5 @@ export { call } from './call';
 export { emailTo } from './emailTo';
 export { print } from './print';
 export { viewInContacts } from './viewInContacts';
+export { viewInDrive } from './viewInDrive';
 export { others } from './others';

package/transpiled/react/ActionsMenu/Actions/locales/withActionsLocales.js

@@ -1,5 +1,6 @@
 var en = {
   viewInContacts: "View in Cozy Contacts",
+  viewInDrive: "Open",
   modify: "Modify",
   emailTo: "Send an email",
   smsTo: "Send a message",
@@ -9,6 +10,7 @@ var en = {
 };
 var fr = {
   viewInContacts: "Voir dans Cozy Contacts",
+  viewInDrive: "Ouvrir",
   modify: "Modifier",
   emailTo: "Envoyer un e-mail",
   smsTo: "Envoyer un message",

package/transpiled/react/ActionsMenu/Actions/viewInDrive.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import { generateWebLink } from 'cozy-client';
+import { getActionsI18n } from "cozy-ui/transpiled/react/ActionsMenu/Actions/locales/withActionsLocales";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import FolderOpenIcon from "cozy-ui/transpiled/react/Icons/FolderOpen";
+import ListItemIcon from "cozy-ui/transpiled/react/ListItemIcon";
+import ListItemText from "cozy-ui/transpiled/react/ListItemText";
+import ActionsMenuItem from "cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem";
+
+var makeComponent = function makeComponent(label, icon) {
+  var Component = /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(ActionsMenuItem, _extends({}, props, {
+      ref: ref
+    }), /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Icon, {
+      icon: icon
+    })), /*#__PURE__*/React.createElement(ListItemText, {
+      primary: label
+    }));
+  });
+  Component.displayName = 'viewInDrive';
+  return Component;
+};
+
+export var viewInDrive = function viewInDrive() {
+  var _getActionsI18n = getActionsI18n(),
+      t = _getActionsI18n.t;
+
+  var icon = FolderOpenIcon;
+  var label = t('viewInDrive');
+  return {
+    name: 'viewInDrive',
+    icon: icon,
+    label: label,
+    Component: makeComponent(label, icon),
+    action: function action(docs, _ref) {
+      var client = _ref.client;
+      var dirId = docs[0].dir_id;
+      var webLink = generateWebLink({
+        slug: 'drive',
+        cozyUrl: client.getStackClient().uri,
+        subDomainType: client.getInstanceOptions().subdomain,
+        pathname: '/',
+        hash: "folder/".concat(dirId)
+      });
+      window.open(webLink, '_blank');
+    }
+  };
+};