cozy-ui 109.1.1 → 109.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [109.2.0](https://github.com/cozy/cozy-ui/compare/v109.1.1...v109.2.0) (2024-06-17)
+
+
+### Features
+
+* Add Task icon ([2f9d2bc](https://github.com/cozy/cozy-ui/commit/2f9d2bc))
+
 ## [109.1.1](https://github.com/cozy/cozy-ui/compare/v109.1.0...v109.1.1) (2024-06-10)
 
 

package/assets/icons/ui/task.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2H5ZM4 8a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1ZM5 10a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H5Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Zm2 0h12v12H2V2Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "109.1.1",
+  "version": "109.2.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -50,7 +50,7 @@
     "test": "jest",
     "test:noSnapshots": "jest --testPathIgnorePatterns 'react/examples.spec.jsx'",
     "test:snapshots": "jest react/examples.spec.jsx",
-    "test:update:snapshots": "jest react/examples.spec.jsx -u",
+    "test:snapshots:update": "jest react/examples.spec.jsx -u",
     "screenshots:server": "nodemon ./scripts/pixelmatch-server/server.js -e js,hbs",
     "postbuild": "postcss transpiled/react/stylesheet.css --replace",
     "travis-deploy-once": "travis-deploy-once",

package/react/ActionsMenu/Readme.md

@@ -185,11 +185,11 @@ const toggleMenu = () => setState(state => ({ showMenu: !state.showMenu }))
       getContentAnchorEl={null}
       anchorOrigin={{
         vertical: 'bottom',
-        horizontal: 'left'
+        horizontal: 'right'
       }}
       transformOrigin={{
         vertical: 'top',
-        horizontal: 'left'
+        horizontal: 'right'
       }}
       keepMounted
       autoClose

package/react/Empty/Readme.md

@@ -32,10 +32,10 @@ const initialVariants = [
 ### With custom image
 
 ```jsx
-import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
-import PeopleSVGIcon from '../../assets/icons/ui/people.svg'
 import Empty from 'cozy-ui/transpiled/react/Empty'
 import Icon from 'cozy-ui/transpiled/react/Icon'
+import CloudWallpaper from 'cozy-ui/docs/cloud-wallpaper.jpg'
+import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
 
 ;
 
@@ -46,7 +46,7 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
     text="Try adding some content to this list"
   />
   <Empty
-    icon={<img src='https://viewerdemo.cozycloud.cc/IMG_0062.PNG' />}
+    icon={<img src={CloudWallpaper} />}
     title="With IMG"
     text="Try adding some content to this list"
   />

package/react/FileImageLoader/Readme.md

@@ -9,6 +9,7 @@ import FileImageLoader from 'cozy-ui/transpiled/react/FileImageLoader'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import FileDuotoneIcon from "cozy-ui/transpiled/react/Icons/FileDuotone"
 import BankIcon from "cozy-ui/transpiled/react/Icons/Bank"
+import CloudWallpaper from 'cozy-ui/docs/cloud-wallpaper.jpg'
 
 const file = {
   _id: 'image',
@@ -16,7 +17,7 @@ const file = {
   name: 'Demo.img',
   mime: 'application/jpeg',
   links: {
-    large: 'https://viewerdemo.cozycloud.cc/IMG_0062.PNG'
+    large: CloudWallpaper
   }
 }
 

package/react/Icon/Readme.md

@@ -294,6 +294,7 @@ import Sync from 'cozy-ui/transpiled/react/Icons/Sync'
 import SyncCozy from 'cozy-ui/transpiled/react/Icons/SyncCozy'
 import Tag from 'cozy-ui/transpiled/react/Icons/Tag'
 import Target from 'cozy-ui/transpiled/react/Icons/Target'
+import Task from 'cozy-ui/transpiled/react/Icons/Task'
 import Team from 'cozy-ui/transpiled/react/Icons/Team'
 import Telecom from 'cozy-ui/transpiled/react/Icons/Telecom'
 import Telephone from 'cozy-ui/transpiled/react/Icons/Telephone'
@@ -553,6 +554,7 @@ const icons = [
   SyncCozy,
   Tag,
   Target,
+  Task,
   Team,
   Telecom,
   Telephone,
@@ -917,7 +919,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','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','stats','subway', 'support', 'swap', 'sync-cozy','sync','tag','target','team','telecom','telephone','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','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','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','stats','subway', 'support', 'swap', 'sync-cozy','sync','tag','target','task','team','telecom','telephone','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/Icon/icons-sprite.js

@@ -578,7 +578,7 @@ animation: checkmark 0.5s ease-in-out 0.16s backwards
     </g>
 </symbol><symbol id="sync" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M16 7.2V3c0-.6-.4-1-1-1-.5 0-.8.3-.9.7A8.09 8.09 0 0 0 8 0C4.9 0 2 1.8.7 4.6c-.2.5 0 1.1.5 1.3.5.2 1.1 0 1.3-.5C3.5 3.4 5.6 2 8 2c1.5 0 3 .6 4 1.5-.3 0-.6.1-.8.3-.4.4-.3 1.1.1 1.4l3 2.5h.1c.1.1.2.1.3.1h.4c.1 0 .2-.1.3-.1h.1c.1-.1.2-.1.2-.2.2 0 .2-.1.3-.3 0 .1 0 0 0 0m-1.2 2.9c-.5-.2-1.1 0-1.3.5A6 6 0 0 1 8 14c-1.5 0-2.9-.6-4-1.5.3 0 .5-.1.7-.4.4-.4.3-1.1-.1-1.4l-3-2.5h-.1L1.3 8h-.1c-.2 0-.5 0-.7.1H.4c-.1.1-.1.2-.2.3-.1.1-.1.2-.2.3V13c0 .6.4 1 1 1 .5 0 .9-.3 1-.8C3.5 14.9 5.6 16 8 16c3.1 0 5.9-1.8 7.3-4.5.2-.5 0-1.1-.5-1.4"/></symbol><symbol id="tag" viewBox="0 0 16 16"><path d="M5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/><path clip-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v5.89a2 2 0 0 0 .586 1.415l5.98 5.973a2.462 2.462 0 0 0 3.481 0l5.236-5.237.002-.002a2.461 2.461 0 0 0 0-3.47L9.303.587A2 2 0 0 0 7.888 0H2Zm0 2h5.888l5.978 5.98a.461.461 0 0 1 0 .649l-5.234 5.236a.46.46 0 0 1-.652 0L2 7.89V2Z"/></symbol><symbol id="target" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M9 12.899V12a1 1 0 0 0-2 0v.899A5.016 5.016 0 0 1 3.101 9H4a1 1 0 0 0 0-2h-.899A5.016 5.016 0 0 1 7 3.101V4a1 1 0 0 0 2 0v-.899A5.016 5.016 0 0 1 12.899 7H12a1 1 0 0 0 0 2h.899A5.016 5.016 0 0 1 9 12.899zM16 7h-1.08A7.005 7.005 0 0 0 9 1.08V1a1 1 0 0 0-2 0v.08A7.005 7.005 0 0 0 1.08 7H1a1 1 0 0 0 0 2h.08A7.004 7.004 0 0 0 7 14.92V15a1 1 0 0 0 2 0v-.08A7.004 7.004 0 0 0 14.92 9H16V7z"/>
-</symbol><symbol id="team" viewBox="0 0 16 16">
+</symbol><symbol id="task" viewBox="0 0 16 16"><path d="M5 4a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2H5ZM4 8a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1ZM5 10a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H5Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Zm2 0h12v12H2V2Z"/></symbol><symbol id="team" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M11.145 7.75C10.263 7.285 9.647 6.23 9.647 5c0-1.657 1.12-3 2.5-3 1.381 0 2.5 1.343 2.5 3 0 1.231-.618 2.29-1.502 2.752V9l1.105.553c.49.245 1.095.848 1.342 1.342l.106.21c.245.49 0 .895-.55.895H9.142c-.544 0-.797-.4-.55-.895l.106-.21c.245-.49.848-1.095 1.342-1.342L11.145 9V7.75zM4.647 10.8c-1.165-.48-2-1.776-2-3.3 0-1.933 1.343-3.5 3-3.5s3 1.567 3 3.5c0 1.524-.835 2.82-2 3.3V12l2.051.684c.532.177 1.15.717 1.397 1.21l.105.211c.245.49.002.895-.548.895h-8.01c-.539 0-.794-.4-.547-.895l.105-.21c.245-.49.872-1.037 1.397-1.211L4.647 12v-1.2z"/>
 </symbol><symbol id="telecom" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 6.04c1.08 0 1.96.878 1.96 1.96 0 1.08-.88 1.96-1.96 1.96S6.04 9.08 6.04 8c0-1.082.88-1.96 1.96-1.96ZM8 0C3.59 0 0 3.588 0 8c0 4.41 3.59 8 8 8 1.778 0 3.46-.572 4.865-1.65l.138-.106-1.079-1.404-.137.106A6.167 6.167 0 0 1 8 14.228 6.236 6.236 0 0 1 1.77 8 6.236 6.236 0 0 1 8 1.77 6.236 6.236 0 0 1 14.23 8v.711a1.25 1.25 0 0 1-2.498 0v-.174h-.04a3.75 3.75 0 0 0 .04-.537V4.98h-1.565A3.688 3.688 0 0 0 8 4.268 3.736 3.736 0 0 0 4.268 8 3.735 3.735 0 0 0 8 11.73c.986 0 1.938-.405 2.642-1.118a3.02 3.02 0 0 0 2.338 1.119A3.023 3.023 0 0 0 16 8.71V8c0-4.412-3.59-8-8-8Z"/></symbol><symbol id="telephone" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M5.88 4.655a1.68 1.68 0 0 0 .001-2.377L4.097.492a1.685 1.685 0 0 0-2.38 0l-.98.979A2.521 2.521 0 0 0 .42 4.646 39.038 39.038 0 0 0 11.356 15.58c.999.662 2.328.53 3.175-.316l.979-.979a1.681 1.681 0 0 0 0-2.379l-1.785-1.784a1.679 1.679 0 0 0-2.379 0l-.594.593A40.017 40.017 0 0 1 5.285 5.25l.595-.595z"/>

package/react/Icons/Task.jsx

@@ -0,0 +1,17 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/task.svg` to regenerate;
+import React from 'react'
+
+function SvgTask(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M5 4a1 1 0 000 2h6a1 1 0 100-2H5zM4 8a1 1 0 011-1h6a1 1 0 110 2H5a1 1 0 01-1-1zm1 2a1 1 0 100 2h6a1 1 0 100-2H5z" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 2a2 2 0 012-2h12a2 2 0 012 2v12a2 2 0 01-2 2H2a2 2 0 01-2-2V2zm2 0h12v12H2V2z"
+      />
+    </svg>
+  )
+}
+
+export default SvgTask

package/react/Thumbnail/Readme.md

@@ -4,6 +4,7 @@ import Skeleton from 'cozy-ui/transpiled/react/Skeleton'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
 import Box from 'cozy-ui/transpiled/react/Box'
+import CloudWallpaper from 'cozy-ui/docs/cloud-wallpaper.jpg'
 
 ;
 
@@ -15,10 +16,10 @@ import Box from 'cozy-ui/transpiled/react/Box'
     <Skeleton variant="rect" animation="wave" />
   </Thumbnail>
   <Thumbnail className="u-mb-1">
-    <img src="https://viewerdemo.cozycloud.cc/IMG_0062.PNG" alt="" />
+    <img src={CloudWallpaper} alt="" />
   </Thumbnail>
   <Thumbnail className="u-mb-1" isStacked={true}>
-    <img src="https://viewerdemo.cozycloud.cc/IMG_0062.PNG" alt="" />
+    <img src={CloudWallpaper} alt="" />
   </Thumbnail>
   <Thumbnail className="u-mb-1" isStacked={true}>
     <Icon icon={PeopleIcon} />

package/react/__snapshots__/examples.spec.jsx.snap

@@ -2511,7 +2511,7 @@ exports[`Empty should render examples: Empty 2`] = `
     <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary MuiTypography-gutterBottom\\">Try adding some content to this list</p>
     <div class=\\"styles__c-empty-text___3HnvR\\"></div>
   </div>
-  <div class=\\"styles__c-empty___3w5oV\\"><img src=\\"https://viewerdemo.cozycloud.cc/IMG_0062.PNG\\" class=\\"styles__c-empty-img___2GC4d\\">
+  <div class=\\"styles__c-empty___3w5oV\\"><img src=\\"test-file-stub\\" class=\\"styles__c-empty-img___2GC4d\\">
     <h3 class=\\"MuiTypography-root MuiTypography-h3 MuiTypography-colorTextPrimary MuiTypography-gutterBottom\\">With IMG</h3>
     <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary MuiTypography-gutterBottom\\">Try adding some content to this list</p>
     <div class=\\"styles__c-empty-text___3HnvR\\"></div>

package/rsgscreenshots.json

@@ -4,6 +4,19 @@
       "desktop": "1200x700"
     }
   },
+  "BottomSheet": {
+    "viewports": {
+      "desktop": "1200x700",
+      "mobile": "390x840"
+    },
+    "fullPage": false
+  },
+  "ActionsMenu": {
+    "viewports": {
+      "mobile": "390x840"
+    },
+    "fullPage": false
+  },
   "ActionMenu": {
     "perExampleScreenshot": true
   },

package/scripts/screenshots/fetchAllComponents.js

@@ -24,13 +24,14 @@ const getComponentNameFromTestId = testId => {
 const fetchAllComponents = async (page, args, config) => {
   const styleguideIndexURL = `${args.styleguideUrl}/index.html`
 
-  console.log(`Opening styleguide ${styleguideIndexURL}`)
+  console.log(`➡️ Opening styleguide ${styleguideIndexURL}`)
   await page.goto(styleguideIndexURL, {
     waitUntil: 'load',
     timeout: 0
   })
 
-  console.log('Extracting links')
+  console.log('➡️ Extracting links')
+
   // We want to take screenshot for individual example, so we :
   // - extract categories (link from the side menu with no ?id=)
   // - go to category's page
@@ -51,8 +52,10 @@ const fetchAllComponents = async (page, args, config) => {
     })),
     x => x.name
   )
+
   const allLinks = []
   const parsedStyleguideURL = new URL(args.styleguideUrl)
+
   for (const cate of sortedCategoriesNames) {
     await page.goto(cate.link, { waitUntil: 'load', timeout: 0 })
     await sleep(100)
@@ -82,8 +85,10 @@ const fetchAllComponents = async (page, args, config) => {
                 : componentToolbarSelector
             } ${openIsolatedButtonSelector}`
           )
+
           return Array.from(isolateButtons).map(btn => {
             const testId = btn.dataset.testid.replace('-isolate-button', '')
+
             return {
               testId,
               link: btn.getAttribute('href')
@@ -102,6 +107,7 @@ const fetchAllComponents = async (page, args, config) => {
       }))
     )
   }
+
   return allLinks
 }
 

package/scripts/screenshots/screenshotComponent.js

@@ -5,7 +5,7 @@ const rootDirectory = path.join(__dirname, '../')
 
 const formatViewport = viewport => `${viewport.width}x${viewport.height}`
 
-const defaultGetScreenshotName = ({
+const getDefaultScreenshotName = ({
   component,
   viewport,
   suffix,
@@ -22,14 +22,21 @@ const defaultGetScreenshotName = ({
  * component.
  */
 const screenshotComponent = async (page, options) => {
-  const { component, screenshotDir, viewport, type, variant } = options
+  const {
+    component,
+    screenshotDir,
+    viewport,
+    type,
+    variant,
+    componentConfig
+  } = options
   const { link, name } = component
 
   await page.goto(link)
   await sleep(200) // to be sure the page is entirely loaded
 
   const getScreenshotName =
-    options.getScreenshotName || defaultGetScreenshotName
+    options.getScreenshotName || getDefaultScreenshotName
 
   const screenshot = async suffix => {
     await page.screenshot({
@@ -37,7 +44,8 @@ const screenshotComponent = async (page, options) => {
         screenshotDir,
         getScreenshotName({ component, viewport, suffix, type, variant })
       ),
-      fullPage: true,
+      fullPage: componentConfig?.fullPage ?? true,
+      optimizeForSpeed: true,
       captureBeyondViewport: false
     })
   }