cozy-ui 110.2.0 → 110.4.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [110.4.0](https://github.com/cozy/cozy-ui/compare/v110.3.0...v110.4.0) (2024-07-04)
+
+
+### Features
+
+* Add TextInfo icon ([25488eb](https://github.com/cozy/cozy-ui/commit/25488eb))
+
+# [110.3.0](https://github.com/cozy/cozy-ui/compare/v110.2.0...v110.3.0) (2024-07-01)
+
+
+### Features
+
+* **PermissionDialog:** Force icon background to be white ([8c46e64](https://github.com/cozy/cozy-ui/commit/8c46e64))
+* **SquareAppIcon:** Force icon background to be white ([1ca2ab7](https://github.com/cozy/cozy-ui/commit/1ca2ab7))
+
 # [110.2.0](https://github.com/cozy/cozy-ui/compare/v110.1.1...v110.2.0) (2024-06-28)
 
 

package/assets/icons/ui/text-info.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="M2 3h7.172l2-2H2a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V6.828l-2 2V14H2V3Zm3 7v2h2l7.146-7.146-2-2L5 10Zm10.5-6.5-.646.646-2-2L13.5 1.5a1.414 1.414 0 1 1 2 2Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "110.2.0",
+  "version": "110.4.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -50,7 +50,6 @@
     "test": "jest",
     "test:noSnapshots": "jest --testPathIgnorePatterns 'react/examples.spec.jsx'",
     "test:snapshots": "jest react/examples.spec.jsx",
-    "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/CozyDialogs/PermissionDialog.jsx

@@ -56,7 +56,7 @@ const PermissionDialog = ({
                 elevation={2}
                 className={cx(
                   styles.floatingIcon,
-                  'u-pos-absolute u-bdrs-circle u-flex'
+                  'u-pos-absolute u-bdrs-circle u-flex u-bg-white'
                 )}
               >
                 <Icon className="u-m-auto" icon={icon} size={48} />

package/react/Icon/Readme.md

@@ -298,6 +298,7 @@ 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'
+import TextInfo from 'cozy-ui/transpiled/react/Icons/TextInfo'
 import Top from 'cozy-ui/transpiled/react/Icons/Top'
 import ToTheCloud from 'cozy-ui/transpiled/react/Icons/ToTheCloud'
 import Train from 'cozy-ui/transpiled/react/Icons/Train'
@@ -558,6 +559,7 @@ const icons = [
   Team,
   Telecom,
   Telephone,
+  TextInfo,
   Top,
   ToTheCloud,
   Train,
@@ -919,7 +921,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','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']
+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','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/Icon/icons-sprite.js

@@ -582,7 +582,7 @@ animation: checkmark 0.5s ease-in-out 0.16s backwards
     <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"/>
-</symbol><symbol id="top" viewBox="0 0 24 24">
+</symbol><symbol id="text-info" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 3h7.172l2-2H2a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V6.828l-2 2V14H2V3Zm3 7v2h2l7.146-7.146-2-2L5 10Zm10.5-6.5-.646.646-2-2L13.5 1.5a1.414 1.414 0 1 1 2 2Z"/></symbol><symbol id="top" viewBox="0 0 24 24">
   <g fill-rule="evenodd" transform="translate(12.285714, 12.000000) rotate(270.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/TextInfo.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/text-info.svg` to regenerate;
+import React from 'react'
+
+function SvgTextInfo(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 3h7.172l2-2H2a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2V6.828l-2 2V14H2V3zm3 7v2h2l7.146-7.146-2-2L5 10zm10.5-6.5l-.646.646-2-2L13.5 1.5a1.414 1.414 0 112 2z"
+      />
+    </svg>
+  )
+}
+
+export default SvgTextInfo

package/react/SquareAppIcon/styles.styl

@@ -9,7 +9,7 @@ $color = constants['color'] // hard-coded color, because the component is curren
 
 .SquareAppIcon-wrapper
     box-sizing border-box
-    background-color var(--paperBackgroundColor)
+    background-color var(--white) // we don't want to be theme responsive
     border-radius rem(12)
     height $iconSize
     width $iconSize
@@ -88,7 +88,7 @@ opacity-end = 1
         path:first-of-type
             animation-delay icon-start !important
 
-        // The second path is a part of the cross, 
+        // 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

package/transpiled/react/CozyDialogs/PermissionDialog.js

@@ -47,7 +47,7 @@ var PermissionDialog = function PermissionDialog(_ref) {
     }, /*#__PURE__*/React.createElement(Paper, {
       square: true,
       elevation: 2,
-      className: cx(styles.floatingIcon, 'u-pos-absolute u-bdrs-circle u-flex')
+      className: cx(styles.floatingIcon, 'u-pos-absolute u-bdrs-circle u-flex u-bg-white')
     }, /*#__PURE__*/React.createElement(Icon, {
       className: "u-m-auto",
       icon: icon,