cozy-ui 59.3.0 → 60.3.0

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# [60.3.0](https://github.com/cozy/cozy-ui/compare/v60.2.0...v60.3.0) (2022-01-19)
+
+
+### Features
+
+* Add new icons radio-checked and radio-unchecked ([d441d6c](https://github.com/cozy/cozy-ui/commit/d441d6c))
+* Add new Radios button ([13cf089](https://github.com/cozy/cozy-ui/commit/13cf089))
+* Deprecates old Radio component ([b5785b4](https://github.com/cozy/cozy-ui/commit/b5785b4))
+
+# [60.2.0](https://github.com/cozy/cozy-ui/compare/v60.1.0...v60.2.0) (2022-01-19)
+
+
+### Features
+
+* Add `titleRef` on CozyDialogs ([9bd885b](https://github.com/cozy/cozy-ui/commit/9bd885b))
+
+# [60.1.0](https://github.com/cozy/cozy-ui/compare/v60.0.0...v60.1.0) (2022-01-19)
+
+
+### Features
+
+* Add optimized new Icons ([1bae76a](https://github.com/cozy/cozy-ui/commit/1bae76a))
+* Add svgo package ([427e409](https://github.com/cozy/cozy-ui/commit/427e409))
+* Svgr generator script can now deal with folder ([cb65cb5](https://github.com/cozy/cozy-ui/commit/cb65cb5))
+
+# [60.0.0](https://github.com/cozy/cozy-ui/compare/v59.3.0...v60.0.0) (2022-01-14)
+
+
+### Features
+
+* Replace `data-test-id` by `data-testid` on some components ([8087cb1](https://github.com/cozy/cozy-ui/commit/8087cb1))
+
+
+### BREAKING CHANGES
+
+* If you were using `data-test-id` prop to test `NestedSelect` or `UploadQueue` components, you should now use `data-testid`. Besides if something fail on `CozyDialog` components, take a look at our helpers in `react/CozyDialogs` to know how to test these components.
+
 # [59.3.0](https://github.com/cozy/cozy-ui/compare/v59.2.0...v59.3.0) (2022-01-14)
 
 

package/assets/icons/ui/bike.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 3a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM8.457 7.543c.182.156.379.309.588.453C9.816 8.53 10.838 9 12 9a1 1 0 1 0 0-2c-.62 0-1.25-.257-1.819-.65s-.999-.867-1.204-1.164A1.561 1.561 0 0 0 7.701 4.5c-.394 0-.772.156-1.05.435L4.447 7.139a1.527 1.527 0 0 0 .233 2.35L7 11.034V14a1 1 0 1 0 2 0v-3.5a1 1 0 0 0-.445-.832l-1.334-.89 1.236-1.235Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16 13a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-1.5 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM3 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0-1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/></svg>

package/assets/icons/ui/bus.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="M1 11c0 .88.39 1.67 1 2.22v1.28c0 .83.67 1.5 1.5 1.5S5 15.33 5 14.5V14h6v.5c0 .82.67 1.5 1.5 1.5.82 0 1.5-.67 1.5-1.5v-1.28c.61-.55 1-1.34 1-2.22V4c0-3-3-4-7-4S1 1 1 4v7Zm3.5 1c-.83 0-1.5-.67-1.5-1.5S3.67 9 4.5 9 6 9.67 6 10.5 5.33 12 4.5 12Zm7 0c-.83 0-1.5-.67-1.5-1.5S10.67 9 11.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5ZM13 7H3V3h10v4Z"/></svg>

package/assets/icons/ui/fitness.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m14.982 9.273.72-.72a.996.996 0 0 0 0-1.41l-.02-.02a.996.996 0 0 0-1.41 0l-2.86 2.86-5.4-5.4 2.86-2.86a.996.996 0 0 0 0-1.41l-.02-.02a.996.996 0 0 0-1.41 0l-.72.72-.72-.72c-.39-.39-1.03-.39-1.42 0l-1.43 1.43-.72-.72a1.02 1.02 0 0 0-1.43 0 1.02 1.02 0 0 0 0 1.43l.72.72-1.43 1.43a.996.996 0 0 0 0 1.41l.72.72-.72.73a.996.996 0 0 0 0 1.41l.02.02c.39.39 1.02.39 1.41 0l2.86-2.86 5.4 5.4-2.86 2.86a.996.996 0 0 0 0 1.41l.02.02c.39.39 1.02.39 1.41 0l.72-.72.72.72c.39.39 1.02.39 1.41 0l1.43-1.43.72.72c.39.39 1.04.39 1.43 0 .39-.39.39-1.04 0-1.43l-.72-.72 1.44-1.43a.996.996 0 0 0 0-1.41l-.72-.73Z"/></svg>

package/assets/icons/ui/mountain.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="m6.065 7.66-.003.005-1.19-2.116a1 1 0 0 0-1.744 0l-2.79 4.96A1 1 0 0 0 1.21 12h13.538a1 1 0 0 0 .86-1.509l-4.747-8.034a1 1 0 0 0-1.722 0l-2.192 3.71 1.527 2.715a.75.75 0 1 1-1.308.736L6.065 7.66Z"/></svg>

package/assets/icons/ui/movement.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M12.585 7.002H1.001a1 1 0 1 0 0 2.002l11.582-.002-1.29 1.29a1 1 0 0 0 1.414 1.415l3-3a1 1 0 0 0 0-1.414l-3-3a1 1 0 1 0-1.414 1.414L12.586 7l-.001.002Z"/></svg>

package/assets/icons/ui/plane.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="M15.539.461a1.574 1.574 0 0 0-2.25.023L9.88 4.081 2.025 1.135a.51.51 0 0 0-.54.117L.15 2.588a.51.51 0 0 0 .108.804l6.561 3.75-3.57 3.57-1.74-.435a.51.51 0 0 0-.506.158l-.861.98a.51.51 0 0 0 .18.805l2.417 1.042 1.042 2.416a.51.51 0 0 0 .806.181l.979-.861a.51.51 0 0 0 .158-.507l-.435-1.739 3.57-3.57 3.75 6.56a.51.51 0 0 0 .804.108l1.336-1.335a.51.51 0 0 0 .117-.54L11.918 6.12l3.597-3.41a1.576 1.576 0 0 0 .023-2.25Z"/></svg>

package/assets/icons/ui/radio-checked.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 16A8 8 0 108 0a8 8 0 000 16zm0-6a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
+</svg>

package/assets/icons/ui/radio-unchecked.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zm0 14A6 6 0 108 2a6 6 0 000 12z" clip-rule="evenodd"/>
+</svg>

package/assets/icons/ui/restaurant.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="M11 0a4 4 0 0 1 3.995 3.8L15 4v5a1 1 0 0 1-.883.993L14 10h-1.5v4.75a1.25 1.25 0 1 1-2.5 0V1a1 1 0 0 1 .883-.993L11 0ZM7 0a1 1 0 0 1 .993.883L8 1v4a3 3 0 0 1-2.75 2.99v6.76a1.25 1.25 0 1 1-2.5 0V7.99A3 3 0 0 1 .005 5.176L0 5V1A1 1 0 0 1 1.993.883L2 1v4h1V1A1 1 0 0 1 4.993.883L5 1v4h1V1a1 1 0 0 1 1-1Z"/></svg>

package/assets/icons/ui/restore-straight.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="M11 5a3 3 0 1 1 0 6H3a1 1 0 1 0 0 2h8a5 5 0 0 0 0-10H3.414l1.293-1.293A1 1 0 0 0 3.293.293l-3 3a1 1 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414-1.414L3.414 5H11Z"/></svg>

package/assets/icons/ui/school.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="M13 9.102v2.843a.5.5 0 0 1-.255.435l-4.5 2.532a.5.5 0 0 1-.49 0l-4.5-2.532A.5.5 0 0 1 3 11.945V9.102l4.03 2.155a2.06 2.06 0 0 0 1.94 0L13 9.103ZM8.16 1.023l.102.042 7.465 3.992a.522.522 0 0 1 .204.194.492.492 0 0 1-.124.64l-.08.052-7.465 3.992a.56.56 0 0 1-.423.041l-.101-.041L2 6.867V11a1 1 0 1 1-2 0V5.5c0-.148.068-.292.192-.39l.08-.053 7.466-3.992a.558.558 0 0 1 .338-.06l.085.019Z"/></svg>

package/assets/icons/ui/shop.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="M4.5 13a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm8 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM2.5 1a1 1 0 0 1 .986.836L3.847 4H14a1 1 0 0 1 .986 1.164l-.86 5.165A2 2 0 0 1 12.153 12H4.847a2 2 0 0 1-1.973-1.671L1.652 3H1a1 1 0 0 1-.993-.883L0 2a1 1 0 0 1 .883-.993L1 1h1.5Z"/></svg>

package/assets/icons/ui/subway.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="M12.64.64C11.2.072 9.488 0 8 0 6.512 0 4.8.072 3.36.64 1.224 1.472 0 3.24 0 5.488V16h16V5.488C16 3.24 14.776 1.472 12.64.64ZM13 5.857v5c0 1.07-.785 1.958-1.811 2.118l1.097 1.096v.358h-1.429L9.43 13H6.57l-1.428 1.429H3.714v-.358l1.097-1.096A2.143 2.143 0 0 1 3 10.857v-5C3 3.714 5.143 3 8 3s5 .714 5 2.857Zm-8.571-.714V8h7.142V5.143H4.43ZM6.57 10.5a1.071 1.071 0 1 1-2.142 0 1.071 1.071 0 0 1 2.142 0Zm3.929 1.071a1.071 1.071 0 1 0 0-2.142 1.071 1.071 0 0 0 0 2.142Z"/></svg>

package/assets/icons/ui/train.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="M15 4v7a3 3 0 0 1-2.536 2.964L14 15.5v.5h-2l-2-2H6l-2 2H2v-.5l1.536-1.536A3 3 0 0 1 1 11V4c0-3 3-4 7-4s7 1 7 4ZM3 7h4V3H3v4Zm6-4v4h4V3H9Zm-3 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/></svg>

package/assets/icons/ui/unknow.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="M8 12a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm.968-10.9c1.777.372 3.182 1.858 3.472 3.65a4.507 4.507 0 0 1-2.828 4.953l-.112.039V11h-3V8.5a1.5 1.5 0 0 1 1.356-1.493L8 7a1.5 1.5 0 1 0-1.493-1.645L6.5 5.5h-3a4.506 4.506 0 0 1 5.468-4.4Z"/></svg>

package/assets/icons/ui/walk.svg

@@ -0,0 +1 @@
+<svg width="16" height="17" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.602 3.663A2 2 0 1 1 8.38.337a2 2 0 0 1 2.222 3.326Zm-.121 3.73a2.55 2.55 0 0 0 1.51.607 1 1 0 1 1 0 2 4.071 4.071 0 0 1-3-1.29l-.69 1.58 2.33 1.94a1 1 0 0 1 .36.77v2a1 1 0 0 1-2 0v-1.53l-2.58-2.12-1.48 4a1.003 1.003 0 1 1-1.88-.7L5.87 7l-1.12.32-.82 2a1 1 0 1 1-1.86-.74l1-2.5a1 1 0 0 1 .66-.59l3.36-1h.12c.11-.014.22-.014.33 0h.1a2.16 2.16 0 0 1 2 1.51 2.56 2.56 0 0 0 .84 1.394Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "59.3.0",
+  "version": "60.3.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -59,7 +59,8 @@
     "start:doc": "env BUILD_ENV=watch-styleguidist styleguidist server --config docs/styleguide.config.js",
     "start:doc:kss": "nodemon --ext styl,md --watch stylus --exec 'yarn build:doc:kss && http-server build/styleguide -p 4242'",
     "start": "yarn build --watch",
-    "removeEmptyCss": "node scripts/removeEmptyCss.js"
+    "removeEmptyCss": "node scripts/removeEmptyCss.js",
+    "optimizeIcons": "svgo -r --folder assets/icons"
   },
   "sideEffects": [
     "*.css",
@@ -141,6 +142,7 @@
     "stylus": "0.56.0",
     "stylus-loader": "3.0.2",
     "svg-sprite-loader": "4.1.6",
+    "svgo": "2.8.0",
     "svgstore-cli": "1.3.2",
     "url-loader": "1.1.2",
     "webpack": "4.39.3"

package/react/CozyDialogs/ConfirmDialog.jsx

@@ -26,18 +26,18 @@ const ConfirmDialog = props => {
       {!fullScreen && onClose && (
         <DialogCloseButton
           onClick={onClose}
-          data-test-id={`modal-close-button-${id}`}
+          data-testid={`modal-close-button-${id}`}
         />
       )}
       {!fullScreen && onBack && (
         <DialogBackButton
-          data-test-id={`modal-back-button-${id}`}
+          data-testid={`modal-back-button-${id}`}
           onClick={onBack}
         />
       )}
       {fullScreen && onBackOrClose && (
         <DialogBackButton
-          data-test-id={`modal-backclose-button-${id}`}
+          data-testid={`modal-backclose-button-${id}`}
           onClick={onBackOrClose}
         />
       )}

package/react/CozyDialogs/Dialog.jsx

@@ -27,18 +27,18 @@ const Dialog = props => {
       {!fullScreen && onClose && (
         <DialogCloseButton
           onClick={onClose}
-          data-test-id={`modal-close-button-${id}`}
+          data-testid={`modal-close-button-${id}`}
         />
       )}
       {!fullScreen && onBack && (
         <DialogBackButton
           onClick={onBack}
-          data-test-id={`modal-back-button-${id}`}
+          data-testid={`modal-back-button-${id}`}
         />
       )}
       {fullScreen && onBackOrClose && (
         <DialogBackButton
-          data-test-id={`modal-backclose-button-${id}`}
+          data-testid={`modal-backclose-button-${id}`}
           onClick={onBackOrClose}
         />
       )}

package/react/CozyDialogs/FixedActionsDialog.jsx

@@ -26,19 +26,19 @@ const FixedActionsDialog = props => {
     <Dialog {...dialogProps}>
       {!fullScreen && onClose && (
         <DialogCloseButton
-          data-test-id={`modal-close-button-${id}`}
+          data-testid={`modal-close-button-${id}`}
           onClick={onClose}
         />
       )}
       {!fullScreen && onBack && (
         <DialogBackButton
-          data-test-id={`modal-back-button-${id}`}
+          data-testid={`modal-back-button-${id}`}
           onClick={onBack}
         />
       )}
       {fullScreen && onBackOrClose && (
         <DialogBackButton
-          data-test-id={`modal-backclose-button-${id}`}
+          data-testid={`modal-backclose-button-${id}`}
           onClick={onBackOrClose}
         />
       )}

package/react/CozyDialogs/FixedDialog.jsx

@@ -26,19 +26,19 @@ const FixedDialog = props => {
     <Dialog {...dialogProps}>
       {!fullScreen && onClose && (
         <DialogCloseButton
-          data-test-id={`modal-close-button-${id}`}
+          data-testid={`modal-close-button-${id}`}
           onClick={onClose}
         />
       )}
       {!fullScreen && onBack && (
         <DialogBackButton
-          data-test-id={`modal-back-button-${id}`}
+          data-testid={`modal-back-button-${id}`}
           onClick={onBack}
         />
       )}
       {fullScreen && onBackOrClose && (
         <DialogBackButton
-          data-test-id={`modal-backclose-button-${id}`}
+          data-testid={`modal-backclose-button-${id}`}
           onClick={onBackOrClose}
         />
       )}

package/react/CozyDialogs/IllustrationDialog.jsx

@@ -25,19 +25,19 @@ const IllustrationDialog = props => {
     <Dialog {...dialogProps}>
       {!fullScreen && onClose && (
         <DialogCloseButton
-          data-test-id={`modal-close-button-${id}`}
+          data-testid={`modal-close-button-${id}`}
           onClick={onClose}
         />
       )}
       {!fullScreen && onBack && (
         <DialogBackButton
           onClick={onBack}
-          data-test-id={`modal-back-button-${id}`}
+          data-testid={`modal-back-button-${id}`}
         />
       )}
       {fullScreen && onBackOrClose && (
         <DialogBackButton
-          data-test-id={`modal-backclose-button-${id}`}
+          data-testid={`modal-backclose-button-${id}`}
           onClick={onBackOrClose}
         />
       )}

package/react/CozyDialogs/Readme.md

@@ -242,7 +242,7 @@ initialState = {
   {dialogs.map(dialog => (
     <button
       key={`open-btn-${dialog.name}`}
-      data-test-id={`open-btn-${dialog.name}`}
+      data-testid={`open-btn-${dialog.name}`}
       onClick={() => toggleDialog(dialog)}
     >
       Open {dialog.name}

package/react/CozyDialogs/e2e.js

@@ -8,8 +8,8 @@ module.exports = async (page, screenshot) => {
   ]) {
     console.log(`Screenshotting dialog type ${dialogType}`)
 
-    const openBtnSel = `[data-test-id=open-btn-${dialogType}]`
-    const closeBtnSel = '[data-test-id*=modal-close-button]'
+    const openBtnSel = `[data-testid=open-btn-${dialogType}]`
+    const closeBtnSel = '[data-testid*=modal-close-button]'
     await page.waitForSelector(openBtnSel)
     await page.click(openBtnSel)
     await page.waitForSelector(closeBtnSel)

package/react/CozyDialogs/testing.js

@@ -20,20 +20,20 @@ export const getDialog = root => {
 export const getCloseButton = dialogRoot => {
   const buttons = within(dialogRoot).getAllByRole('button')
   return buttons.find(
-    x => x.dataset.testId && x.dataset.testId.includes('modal-close-button')
+    x => x.dataset.testid && x.dataset.testid.includes('modal-close-button')
   )
 }
 
 export const getBackButton = dialogRoot => {
   const buttons = within(dialogRoot).getAllByRole('button')
   return buttons.find(
-    x => x.dataset.testId && x.dataset.testId.includes('modal-back-button')
+    x => x.dataset.testid && x.dataset.testid.includes('modal-back-button')
   )
 }
 
 export const getBackCloseButton = dialogRoot => {
   const buttons = within(dialogRoot).getAllByRole('button')
   return buttons.find(
-    x => x.dataset.testId && x.dataset.testId.includes('modal-backclose-button')
+    x => x.dataset.testid && x.dataset.testid.includes('modal-backclose-button')
   )
 }

package/react/CozyDialogs/useCozyDialog.js

@@ -28,6 +28,7 @@ const useCozyDialog = props => {
     disableTitleAutoPadding,
     isFluidTitle,
     disableGutters,
+    titleRef,
     ...otherProps
   } = props
   const { isMobile } = useBreakpoints()
@@ -62,6 +63,7 @@ const useCozyDialog = props => {
 
   const dialogTitleProps = {
     id: `modal-title-${id}`,
+    ref: titleRef,
     disableTypography: true,
     className: cx({
       'u-ellipsis': !isFluidTitle,

package/react/Icon/Readme.md

@@ -39,6 +39,7 @@ import Bank from 'cozy-ui/transpiled/react/Icons/Bank'
 import Banking from 'cozy-ui/transpiled/react/Icons/Banking'
 import BankingAdd from 'cozy-ui/transpiled/react/Icons/BankingAdd'
 import Bell from 'cozy-ui/transpiled/react/Icons/Bell'
+import Bike from 'cozy-ui/transpiled/react/Icons/Bike'
 import Bill from 'cozy-ui/transpiled/react/Icons/Bill'
 import Bottom from 'cozy-ui/transpiled/react/Icons/Bottom'
 import BrowserBrave from 'cozy-ui/transpiled/react/Icons/BrowserBrave'
@@ -51,9 +52,11 @@ import BrowserIe from 'cozy-ui/transpiled/react/Icons/BrowserIe'
 import BrowserOpera from 'cozy-ui/transpiled/react/Icons/BrowserOpera'
 import BrowserSafari from 'cozy-ui/transpiled/react/Icons/BrowserSafari'
 import Burger from 'cozy-ui/transpiled/react/Icons/Burger'
+import Bus from 'cozy-ui/transpiled/react/Icons/Bus'
 import Calendar from 'cozy-ui/transpiled/react/Icons/Calendar'
 import Camera from 'cozy-ui/transpiled/react/Icons/Camera'
 import Car from 'cozy-ui/transpiled/react/Icons/Car'
+import CarbonCopy from 'cozy-ui/transpiled/react/Icons/CarbonCopy'
 import Categories from 'cozy-ui/transpiled/react/Icons/Categories'
 import Certified from 'cozy-ui/transpiled/react/Icons/Certified'
 import Check from 'cozy-ui/transpiled/react/Icons/Check'
@@ -110,6 +113,7 @@ import FileNone from 'cozy-ui/transpiled/react/Icons/FileNone'
 import FileOutline from 'cozy-ui/transpiled/react/Icons/FileOutline'
 import Filter from 'cozy-ui/transpiled/react/Icons/Filter'
 import Fingerprint from 'cozy-ui/transpiled/react/Icons/Fingerprint'
+import Fitness from 'cozy-ui/transpiled/react/Icons/Fitness'
 import Flag from 'cozy-ui/transpiled/react/Icons/Flag'
 import FlagOutlined from 'cozy-ui/transpiled/react/Icons/FlagOutlined'
 import FlashAuto from 'cozy-ui/transpiled/react/Icons/FlashAuto'
@@ -146,8 +150,10 @@ import MagicTrick from 'cozy-ui/transpiled/react/Icons/MagicTrick'
 import Magnet from 'cozy-ui/transpiled/react/Icons/Magnet'
 import Magnifier from 'cozy-ui/transpiled/react/Icons/Magnifier'
 import Merge from 'cozy-ui/transpiled/react/Icons/Merge'
+import Mountain from 'cozy-ui/transpiled/react/Icons/Mountain'
 import MovementIn from 'cozy-ui/transpiled/react/Icons/MovementIn'
 import MovementOut from 'cozy-ui/transpiled/react/Icons/MovementOut'
+import Movement from 'cozy-ui/transpiled/react/Icons/Movement'
 import Moveto from 'cozy-ui/transpiled/react/Icons/Moveto'
 import MultiFiles from 'cozy-ui/transpiled/react/Icons/MultiFiles'
 import Music from 'cozy-ui/transpiled/react/Icons/Music'
@@ -170,29 +176,39 @@ import Phone from 'cozy-ui/transpiled/react/Icons/Phone'
 import PhoneDownload from 'cozy-ui/transpiled/react/Icons/PhoneDownload'
 import PieChart from 'cozy-ui/transpiled/react/Icons/PieChart'
 import Pin from 'cozy-ui/transpiled/react/Icons/Pin'
+import Plane from 'cozy-ui/transpiled/react/Icons/Plane'
 import Plus from 'cozy-ui/transpiled/react/Icons/Plus'
 import PlusSmall from 'cozy-ui/transpiled/react/Icons/PlusSmall'
 import Previous from 'cozy-ui/transpiled/react/Icons/Previous'
 import Printer from 'cozy-ui/transpiled/react/Icons/Printer'
 import Qualify from 'cozy-ui/transpiled/react/Icons/Qualify'
+import RadioChecked from 'cozy-ui/transpiled/react/Icons/RadioChecked'
+import RadioUnchecked from 'cozy-ui/transpiled/react/Icons/RadioUnchecked'
 import Rename from 'cozy-ui/transpiled/react/Icons/Rename'
 import Repare from 'cozy-ui/transpiled/react/Icons/Repare'
+import Reply from 'cozy-ui/transpiled/react/Icons/Reply'
+import Restaurant from 'cozy-ui/transpiled/react/Icons/Restaurant'
+import RestoreStraight from 'cozy-ui/transpiled/react/Icons/RestoreStraight'
 import Restore from 'cozy-ui/transpiled/react/Icons/Restore'
 import Right from 'cozy-ui/transpiled/react/Icons/Right'
 import Rise from 'cozy-ui/transpiled/react/Icons/Rise'
 import RotateLeft from 'cozy-ui/transpiled/react/Icons/RotateLeft'
 import RotateRight from 'cozy-ui/transpiled/react/Icons/RotateRight'
 import SadCozy from 'cozy-ui/transpiled/react/Icons/SadCozy'
+import Safe from 'cozy-ui/transpiled/react/Icons/Safe'
+import School from 'cozy-ui/transpiled/react/Icons/School'
 import SelectAll from 'cozy-ui/transpiled/react/Icons/SelectAll'
 import Setting from 'cozy-ui/transpiled/react/Icons/Setting'
 import Share from 'cozy-ui/transpiled/react/Icons/Share'
 import ShareCircle from 'cozy-ui/transpiled/react/Icons/ShareCircle'
 import Shield from 'cozy-ui/transpiled/react/Icons/Shield'
+import Shop from 'cozy-ui/transpiled/react/Icons/Shop'
 import Sound from 'cozy-ui/transpiled/react/Icons/Sound'
 import Spinner from 'cozy-ui/transpiled/react/Icons/Spinner'
 import Stack from 'cozy-ui/transpiled/react/Icons/Stack'
 import Star from 'cozy-ui/transpiled/react/Icons/Star'
 import Stats from 'cozy-ui/transpiled/react/Icons/Stats'
+import Subway from 'cozy-ui/transpiled/react/Icons/Subway'
 import Sync from 'cozy-ui/transpiled/react/Icons/Sync'
 import SyncCozy from 'cozy-ui/transpiled/react/Icons/SyncCozy'
 import Target from 'cozy-ui/transpiled/react/Icons/Target'
@@ -200,13 +216,16 @@ import Team from 'cozy-ui/transpiled/react/Icons/Team'
 import Telephone from 'cozy-ui/transpiled/react/Icons/Telephone'
 import ToTheCloud from 'cozy-ui/transpiled/react/Icons/ToTheCloud'
 import Top from 'cozy-ui/transpiled/react/Icons/Top'
+import Train from 'cozy-ui/transpiled/react/Icons/Train'
 import Trash from 'cozy-ui/transpiled/react/Icons/Trash'
 import Trophy from 'cozy-ui/transpiled/react/Icons/Trophy'
+import Unknow from 'cozy-ui/transpiled/react/Icons/Unknow'
 import Unlink from 'cozy-ui/transpiled/react/Icons/Unlink'
 import Unlock from 'cozy-ui/transpiled/react/Icons/Unlock'
 import Up from 'cozy-ui/transpiled/react/Icons/Up'
 import Upload from 'cozy-ui/transpiled/react/Icons/Upload'
 import Videos from 'cozy-ui/transpiled/react/Icons/Videos'
+import Walk from 'cozy-ui/transpiled/react/Icons/Walk'
 import Wallet from 'cozy-ui/transpiled/react/Icons/Wallet'
 import WalletAdd from 'cozy-ui/transpiled/react/Icons/WalletAdd'
 import WalletNew from 'cozy-ui/transpiled/react/Icons/WalletNew'
@@ -214,9 +233,6 @@ import Warn from 'cozy-ui/transpiled/react/Icons/Warn'
 import Warning from 'cozy-ui/transpiled/react/Icons/Warning'
 import WarningCircle from 'cozy-ui/transpiled/react/Icons/WarningCircle'
 import WrenchCircle from 'cozy-ui/transpiled/react/Icons/WrenchCircle'
-import CarbonCopy from 'cozy-ui/transpiled/react/Icons/CarbonCopy'
-import Safe from 'cozy-ui/transpiled/react/Icons/Safe'
-;
 
 const icons = [
   Album,
@@ -231,6 +247,7 @@ const icons = [
   Banking,
   BankingAdd,
   Bell,
+  Bike,
   Bill,
   Bottom,
   BrowserBrave,
@@ -243,6 +260,7 @@ const icons = [
   BrowserOpera,
   BrowserSafari,
   Burger,
+  Bus,
   Calendar,
   Camera,
   Car,
@@ -303,6 +321,7 @@ const icons = [
   FileOutline,
   Filter,
   Fingerprint,
+  Fitness,
   Flag,
   FlagOutlined,
   FlashAuto,
@@ -339,8 +358,10 @@ const icons = [
   Magnet,
   Magnifier,
   Merge,
+  Mountain,
   MovementIn,
   MovementOut,
+  Movement,
   Moveto,
   MultiFiles,
   Music,
@@ -363,13 +384,19 @@ const icons = [
   PhoneDownload,
   PieChart,
   Pin,
+  Plane,
   Plus,
   PlusSmall,
   Previous,
   Printer,
   Qualify,
+  RadioChecked,
+  RadioUnchecked,
   Rename,
   Repare,
+  Reply,
+  Restaurant,
+  RestoreStraight,
   Restore,
   Right,
   Rise,
@@ -377,16 +404,19 @@ const icons = [
   RotateRight,
   SadCozy,
   Safe,
+  School,
   SelectAll,
   Setting,
   Share,
   ShareCircle,
   Shield,
+  Shop,
   Sound,
   Spinner,
   Stack,
   Star,
   Stats,
+  Subway,
   Sync,
   SyncCozy,
   Target,
@@ -394,13 +424,16 @@ const icons = [
   Telephone,
   ToTheCloud,
   Top,
+  Train,
   Trash,
   Trophy,
+  Unknow,
   Unlink,
   Unlock,
   Up,
   Upload,
   Videos,
+  Walk,
   Wallet,
   WalletAdd,
   WalletNew,
@@ -660,12 +693,12 @@ import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning"
 ```jsx
 import Icon from 'cozy-ui/transpiled/react/Icon'
 // Sprite is necessary in order to add in the html rendering
-import Sprite from 'cozy-ui/transpiled/react/Icon/Sprite' 
+import Sprite from 'cozy-ui/transpiled/react/Icon/Sprite'
 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','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','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','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','flag-outlined','flag','flash-auto','flashlight','folder-add','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','heart','help','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock','logout','magic-trick','magnet','magnifier','merge','movement-in','movement-out','moveto','multi-files','music','new','next','note','notification-email','offline','online','openwith','palette','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone','pie-chart','pin','plus-small','plus','previous','printer','qualify','rename','repare','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','select-all','setting','share-circle','share','shield','sound','spinner','stack','star','stats','sync-cozy','sync','target','team','telephone','to-the-cloud','top','trash','trophy','unlink','unlock','up','upload','videos','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','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','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','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','heart','help','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock','logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online','openwith','palette','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','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','sync-cozy','sync','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 />