cozy-ui 76.2.0 → 77.1.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [77.1.0](https://github.com/cozy/cozy-ui/compare/v77.0.0...v77.1.0) (2022-10-20)
+
+
+### Features
+
+* **Icon:** Add compare and clock-outline icons ([97e00db](https://github.com/cozy/cozy-ui/commit/97e00db))
+
+# [77.0.0](https://github.com/cozy/cozy-ui/compare/v76.2.0...v77.0.0) (2022-10-17)
+
+
+### Bug Fixes
+
+* **ContactsList:** Adjust list construction ([f301927](https://github.com/cozy/cozy-ui/commit/f301927))
+* **UploadQueue:** Remove default vertical paddings ([830bad3](https://github.com/cozy/cozy-ui/commit/830bad3))
+
+
+### Features
+
+* **List:** Add vertical padding of 8px inside List ([f17d0b7](https://github.com/cozy/cozy-ui/commit/f17d0b7))
+
+
+### BREAKING CHANGES
+
+* **List:** List elements have been readjusted. The result may not be appropriate for your use case, refer to the documentation to apply adjustments if necessary. A simple trick might be to remove the vertical paddings `<List className="u-pv-0">`
+
 # [76.2.0](https://github.com/cozy/cozy-ui/compare/v76.1.0...v76.2.0) (2022-10-10)
 
 

package/assets/icons/ui/clock-outline.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Zm0 2a1 1 0 0 1 .993.883L9 5v2.6l2 1.9a1 1 0 0 1-1.32 1.497l-.094-.083-2.293-2.207a1 1 0 0 1-.284-.576L7 8V5a1 1 0 0 1 1-1Z"/></svg>

package/assets/icons/ui/compare.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M1 6h4.586L4.293 7.293a1 1 0 0 0 1.414 1.414l3-3a1 1 0 0 0 0-1.414l-3-3a1 1 0 0 0-1.414 1.414L5.586 4H1a1 1 0 0 0 0 2Zm14 4h-4.586l1.293-1.293a1 1 0 0 0-1.414-1.414l-3 3a1 1 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414-1.414L10.414 12H15a1 1 0 1 0 0-2Z"/></svg>

package/package.json

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

package/react/ContactsList/ContactsList.jsx

@@ -15,17 +15,15 @@ const ContactsList = ({ contacts, onItemClick, ...rest }) => {
   return (
     <Table {...rest}>
       {sortedHeaders.map(header => (
-        <List key={header}>
-          <ListSubheader>{header}</ListSubheader>
+        <List key={header} subheader={<ListSubheader>{header}</ListSubheader>}>
           {categorizedContacts[header].map((contact, index) => (
-            <List key={contact._id}>
-              <ContactRow
-                id={contact._id}
-                contact={contact}
-                divider={index !== contacts.length - 1}
-                onClick={onItemClick}
-              />
-            </List>
+            <ContactRow
+              key={contact._id}
+              id={contact._id}
+              contact={contact}
+              divider={index !== categorizedContacts[header].length - 1}
+              onClick={onItemClick}
+            />
           ))}
         </List>
       ))}

package/react/Icon/Readme.md

@@ -65,11 +65,13 @@ import CheckList from 'cozy-ui/transpiled/react/Icons/CheckList'
 import CheckSquare from 'cozy-ui/transpiled/react/Icons/CheckSquare'
 import CircleFilled from 'cozy-ui/transpiled/react/Icons/CircleFilled'
 import Clock from 'cozy-ui/transpiled/react/Icons/Clock'
+import ClockOutline from 'cozy-ui/transpiled/react/Icons/ClockOutline'
 import Cloud from 'cozy-ui/transpiled/react/Icons/Cloud'
 import CloudHappy from 'cozy-ui/transpiled/react/Icons/CloudHappy'
 import Collect from 'cozy-ui/transpiled/react/Icons/Collect'
 import Comment from 'cozy-ui/transpiled/react/Icons/Comment'
 import Company from 'cozy-ui/transpiled/react/Icons/Company'
+import Compare from 'cozy-ui/transpiled/react/Icons/Compare'
 import Compass from 'cozy-ui/transpiled/react/Icons/Compass'
 import Connector from 'cozy-ui/transpiled/react/Icons/Connector'
 import Contract from 'cozy-ui/transpiled/react/Icons/Contract'
@@ -286,11 +288,13 @@ const icons = [
   CheckSquare,
   CircleFilled,
   Clock,
+  ClockOutline,
   Cloud,
   CloudHappy,
   Collect,
   Comment,
   Company,
+  Compare,
   Compass,
   Connector,
   Contract,
@@ -834,7 +838,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','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh','cozy-text','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','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-text','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

@@ -161,7 +161,7 @@ module.exports = `<svg><defs>
   </g>
 </symbol><symbol id="circle-filled" viewBox="0 0 16 16">
     <circle cx="8" cy="8" r="8" fill-rule="evenodd"/>
-</symbol><symbol id="clock" viewBox="0 0 16 16">
+</symbol><symbol id="clock-outline" viewBox="0 0 16 16"><path clip-rule="evenodd" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Zm0 2a1 1 0 0 1 .993.883L9 5v2.6l2 1.9a1 1 0 0 1-1.32 1.497l-.094-.083-2.293-2.207a1 1 0 0 1-.284-.576L7 8V5a1 1 0 0 1 1-1Z"/></symbol><symbol id="clock" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M136,48 C140.418278,48 144,44.418278 144,40 C144,35.581722 140.418278,32 136,32 C131.581722,32 128,35.581722 128,40 C128,44.418278 131.581722,48 136,48 Z M135,40 C135,40.2652165 135.105357,40.5195704 135.292893,40.7071068 L138.292893,43.7071068 C138.683418,44.0976311 139.316582,44.0976311 139.707107,43.7071068 C140.097631,43.3165825 140.097631,42.6834175 139.707107,42.2928932 L137,39.6004639 L137,36 C137,35.4477153 136.552285,35 136,35 C135.447715,35 135,35.4477153 135,36 L135,40 Z" transform="translate(-128 -32)"/>
 </symbol><symbol id="cloud-happy" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M4 6a4 4 0 1 1 8 0 4 4 0 1 1 0 8H4a4 4 0 1 1 0-8zm1 3s0 2 3 2 3-2 3-2H5z"/>
@@ -180,7 +180,7 @@ module.exports = `<svg><defs>
     <path fill-rule="evenodd" d="M0 .999A.997.997 0 0 1 1 0h14a1 1 0 0 1 1 .999V12c0 .552-.453.999-.997.999H8l-6 3v-3H1a1 1 0 0 1-1-.999V1zM4 5c0 .556.446 1 .997 1h6.006c.544 0 .997-.448.997-1 0-.556-.446-1-.997-1H4.997C4.453 4 4 4.448 4 5zm0 3c0 .556.444 1 .99 1h4.02A1 1 0 0 0 10 8c0-.556-.444-1-.99-1H4.99A1 1 0 0 0 4 8z"/>
 </symbol><symbol id="company" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M10 0v16H0V0h10zM4 12v-2H2v2h2zm0-4V6H2v2h2zm0-4V2H2v2h2zm4 0V2H6v2h2zm0 4V6H6v2h2zm0 4v-2H6v2h2zm3-8h5v12h-5V4zm3.5 8v-2h-2v2h2zm0-4V6h-2v2h2z"/>
-</symbol><symbol id="compass" viewBox="0 0 16 16">
+</symbol><symbol id="compare" viewBox="0 0 16 16"><path clip-rule="evenodd" d="M1 6h4.586L4.293 7.293a1 1 0 0 0 1.414 1.414l3-3a1 1 0 0 0 0-1.414l-3-3a1 1 0 0 0-1.414 1.414L5.586 4H1a1 1 0 0 0 0 2Zm14 4h-4.586l1.293-1.293a1 1 0 0 0-1.414-1.414l-3 3a1 1 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414-1.414L10.414 12H15a1 1 0 1 0 0-2Z"/></symbol><symbol id="compass" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M7.864 10.663a2.667 2.667 0 0 0 2.8-2.8l1.22-3.175c.197-.51-.058-.77-.572-.573L8.136 5.337a2.667 2.667 0 0 0-2.8 2.8l-1.22 3.175c-.197.51.058.77.572.573l3.176-1.222zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-6.667a1.333 1.333 0 1 1 0-2.666 1.333 1.333 0 0 1 0 2.666z"/>
 </symbol><symbol id="connector" viewBox="0 0 20 27">
 <title>collect</title>

package/react/Icons/ClockOutline.jsx

@@ -0,0 +1,15 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/clock-outline.svg` to regenerate;
+import React from 'react'
+
+function SvgClockOutline(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        clipRule="evenodd"
+        d="M8 0a8 8 0 110 16A8 8 0 018 0zm0 2a6 6 0 100 12A6 6 0 008 2zm0 2a1 1 0 01.993.883L9 5v2.6l2 1.9a1 1 0 01-1.32 1.497l-.094-.083-2.293-2.207a1 1 0 01-.284-.576L7 8V5a1 1 0 011-1z"
+      />
+    </svg>
+  )
+}
+
+export default SvgClockOutline

package/react/Icons/Compare.jsx

@@ -0,0 +1,15 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/compare.svg` to regenerate;
+import React from 'react'
+
+function SvgCompare(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        clipRule="evenodd"
+        d="M1 6h4.586L4.293 7.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 00-1.414 1.414L5.586 4H1a1 1 0 000 2zm14 4h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 12H15a1 1 0 100-2z"
+      />
+    </svg>
+  )
+}
+
+export default SvgCompare