cozy-ui 125.1.0 → 126.1.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [126.1.0](https://github.com/cozy/cozy-ui/compare/v126.0.0...v126.1.0) (2025-06-13)
+
+
+### Features
+
+* Add OnlyOffice icon ([fd8d3c0](https://github.com/cozy/cozy-ui/commit/fd8d3c0))
+
+# [126.0.0](https://github.com/cozy/cozy-ui/compare/v125.1.0...v126.0.0) (2025-06-11)
+
+
+### Features
+
+* Add new QualificationIcon and use it in QualificationModal ([65cadc4](https://github.com/cozy/cozy-ui/commit/65cadc4))
+* Remove QualificationIconStack component ([d520f80](https://github.com/cozy/cozy-ui/commit/d520f80))
+
+
+### BREAKING CHANGES
+
+* You must replace `QualificationIconStack` by `QualificationIcon`
+
 # [125.1.0](https://github.com/cozy/cozy-ui/compare/v125.0.0...v125.1.0) (2025-06-11)
 
 

package/assets/icons/illus/only-office.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6882_51948)" fill-rule="evenodd" clip-rule="evenodd"><path d="m7 15.172-6.58-3.02c-.56-.264-.56-.672 0-.912l2.291-1.055 4.265 1.966c.56.264 1.463.264 1.999 0l4.265-1.966 2.29 1.055c.561.264.561.671 0 .911l-6.58 3.021c-.511.24-1.413.24-1.95 0Z" fill="url(#paint0_linear_6882_51948)"/><path d="M7 11.456.42 8.436c-.56-.265-.56-.672 0-.912l2.243-1.03L7 8.483c.56.263 1.462.263 1.998 0l4.338-1.99 2.242 1.03c.561.264.561.671 0 .911L9 11.456c-.56.264-1.462.264-1.998 0Z" fill="url(#paint1_linear_6882_51948)"/><path d="M7 7.836.42 4.815c-.56-.264-.56-.672 0-.911L7 .883c.561-.264 1.463-.264 2 0l6.58 3.02c.56.264.56.672 0 .912L9 7.835c-.561.24-1.463.24-2 0Z" fill="url(#paint2_linear_6882_51948)"/></g><defs><linearGradient id="paint0_linear_6882_51948" x1="7.994" y1="18.035" x2="7.994" y2="7.007" gradientUnits="userSpaceOnUse"><stop stop-color="#FCC2B1"/><stop offset=".885" stop-color="#D9420B"/></linearGradient><linearGradient id="paint1_linear_6882_51948" x1="7.994" y1="13.26" x2="7.994" y2="6.007" gradientUnits="userSpaceOnUse"><stop stop-color="#DEEDC9"/><stop offset=".661" stop-color="#8BBA25"/></linearGradient><linearGradient id="paint2_linear_6882_51948" x1="7.994" y1="10.323" x2="7.994" y2=".453" gradientUnits="userSpaceOnUse"><stop stop-color="#C2EBFA"/><stop offset="1" stop-color="#26A8DE"/></linearGradient><clipPath id="clip0_6882_51948"><path fill="#fff" transform="translate(0 .556)" d="M0 0h16v14.889H0z"/></clipPath></defs></svg>

package/package.json

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

package/react/Icon/Readme.md

@@ -735,6 +735,7 @@ import KeychainIcon from 'cozy-ui/transpiled/react/Icons/Keychain'
 import LogoutLargeIcon from 'cozy-ui/transpiled/react/Icons/LogoutLarge'
 import MailIcon from 'cozy-ui/transpiled/react/Icons/Mail'
 import NotesIcon from 'cozy-ui/transpiled/react/Icons/Notes'
+import OnlyOfficeIcon from 'cozy-ui/transpiled/react/Icons/OnlyOffice'
 import PapersIcon from 'cozy-ui/transpiled/react/Icons/Papers'
 import PassIcon from 'cozy-ui/transpiled/react/Icons/Pass'
 import ShareGrey08Icon from 'cozy-ui/transpiled/react/Icons/ShareGrey08'
@@ -786,6 +787,7 @@ const icons = [
   LogoutLargeIcon,
   MailIcon,
   NotesIcon,
+  OnlyOfficeIcon,
   PapersIcon,
   PassIcon,
   ShareGrey08Icon,
@@ -1018,7 +1020,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 import Grid from 'cozy-ui/transpiled/react/Grid'
 import Sprite from 'cozy-ui/transpiled/react/Icon/Sprite'
 
-const availableIcons = ['account', 'bottom-select', 'check-white', 'cloud-broken', 'contacts', 'cozy-authentification', 'cozy-logo', 'cozy-upgrade', 'credit-card-large', 'dash-white', 'device-browser', 'device-laptop', 'device-phone', 'device-tablet', 'file-type-audio', 'file-type-banking-account' , 'file-type-bin', 'file-type-code', 'file-type-files', 'file-type-folder', 'file-type-server', 'file-type-image', 'file-type-note', 'file-type-pdf', 'file-type-sheet', 'file-type-slide', 'file-type-text', 'file-type-video', 'file-type-zip', 'forbidden-sign', 'google', 'keychain', 'logout-large', 'papers', 'store', 'top-select', 'trash-duotone', 'cozy']
+const availableIcons = ['account', 'bottom-select', 'check-white', 'cloud-broken', 'contacts', 'cozy-authentification', 'cozy-logo', 'cozy-upgrade', 'credit-card-large', 'dash-white', 'device-browser', 'device-laptop', 'device-phone', 'device-tablet', 'file-type-audio', 'file-type-banking-account' , 'file-type-bin', 'file-type-code', 'file-type-files', 'file-type-folder', 'file-type-server', 'file-type-image', 'file-type-note', 'file-type-pdf', 'file-type-sheet', 'file-type-slide', 'file-type-text', 'file-type-video', 'file-type-zip', 'forbidden-sign', 'google', 'keychain', 'logout-large', 'papers', 'only-office', 'store', 'top-select', 'trash-duotone', 'cozy']
 
 ;
 

package/react/Icons/OnlyOffice.jsx

@@ -0,0 +1,71 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/illus/only-office.svg` to regenerate;
+import React from 'react'
+
+function SvgOnlyOffice(props) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" {...props}>
+      <g
+        clipPath="url(#only-office_svg__clip0_6882_51948)"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      >
+        <path
+          d="M7 15.172l-6.58-3.02c-.56-.264-.56-.672 0-.912l2.291-1.055 4.265 1.966c.56.264 1.463.264 1.999 0l4.265-1.966 2.29 1.055c.561.264.561.671 0 .911l-6.58 3.021c-.511.24-1.413.24-1.95 0z"
+          fill="url(#only-office_svg__paint0_linear_6882_51948)"
+        />
+        <path
+          d="M7 11.456L.42 8.436c-.56-.265-.56-.672 0-.912l2.243-1.03L7 8.483c.56.263 1.462.263 1.998 0l4.338-1.99 2.242 1.03c.561.264.561.671 0 .911L9 11.456c-.56.264-1.462.264-1.998 0z"
+          fill="url(#only-office_svg__paint1_linear_6882_51948)"
+        />
+        <path
+          d="M7 7.836L.42 4.815c-.56-.264-.56-.672 0-.911L7 .883c.561-.264 1.463-.264 2 0l6.58 3.02c.56.264.56.672 0 .912L9 7.835c-.561.24-1.463.24-2 0z"
+          fill="url(#only-office_svg__paint2_linear_6882_51948)"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="only-office_svg__paint0_linear_6882_51948"
+          x1={7.994}
+          y1={18.035}
+          x2={7.994}
+          y2={7.007}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FCC2B1" />
+          <stop offset={0.885} stopColor="#D9420B" />
+        </linearGradient>
+        <linearGradient
+          id="only-office_svg__paint1_linear_6882_51948"
+          x1={7.994}
+          y1={13.26}
+          x2={7.994}
+          y2={6.007}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#DEEDC9" />
+          <stop offset={0.661} stopColor="#8BBA25" />
+        </linearGradient>
+        <linearGradient
+          id="only-office_svg__paint2_linear_6882_51948"
+          x1={7.994}
+          y1={10.323}
+          x2={7.994}
+          y2={0.453}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#C2EBFA" />
+          <stop offset={1} stopColor="#26A8DE" />
+        </linearGradient>
+        <clipPath id="only-office_svg__clip0_6882_51948">
+          <path
+            fill="#fff"
+            transform="translate(0 .556)"
+            d="M0 0h16v14.889H0z"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default SvgOnlyOffice

package/react/QualificationIcon/Readme.md

@@ -0,0 +1,14 @@
+```jsx
+import QualificationIcon from 'cozy-ui/transpiled/react/QualificationIcon'
+
+;
+
+<>
+  <QualificationIcon className="u-mr-1" />
+  <QualificationIcon className="u-mr-1" qualification="isp_invoice" />
+  <QualificationIcon className="u-mr-1" qualification="phone_invoice" />
+  <QualificationIcon className="u-mr-1" qualification="family_record_book" />
+  <QualificationIcon className="u-mr-1" theme="identity" />
+  <QualificationIcon theme="transport" />
+</>
+```

package/react/{QualificationIconStack → QualificationIcon}/index.jsx

@@ -4,7 +4,6 @@ import React from 'react'
 import { getIconByLabel } from 'cozy-client/dist/models/document/qualification'
 
 import Icon from '../Icon'
-import IconStack from '../IconStack'
 import BankIcon from '../Icons/Bank'
 import BankCheckIcon from '../Icons/BankCheck'
 import BenefitIcon from '../Icons/Benefit'
@@ -16,8 +15,6 @@ import DotsIcon from '../Icons/Dots'
 import EmailIcon from '../Icons/Email'
 import EuroIcon from '../Icons/Euro'
 import ExchangeIcon from '../Icons/Exchange'
-import FileDuotoneIcon from '../Icons/FileDuotone'
-import FileTypeNoteIcon from '../Icons/FileTypeNote'
 import FitnessIcon from '../Icons/Fitness'
 import GlobeIcon from '../Icons/Globe'
 import GouvIcon from '../Icons/Gouv'
@@ -27,6 +24,7 @@ import ImageIcon from '../Icons/Image'
 import JusticeIcon from '../Icons/Justice'
 import LaudryIcon from '../Icons/Laudry'
 import LightningIcon from '../Icons/Lightning'
+import NoteIcon from '../Icons/Note'
 import PeopleIcon from '../Icons/People'
 import PlaneIcon from '../Icons/Plane'
 import RemboursementIcon from '../Icons/Remboursement'
@@ -39,20 +37,6 @@ import TelephoneIcon from '../Icons/Telephone'
 import WaterIcon from '../Icons/Water'
 import WorkIcon from '../Icons/Work'
 
-// this is a copy of FileDuotone without the flap and with a white background
-function FileDuotoneWhite(props) {
-  return (
-    <svg viewBox="0 0 26 32" {...props}>
-      <g fillRule="evenodd">
-        <path
-          d="M0 2.002C0 .896.89 0 1.997 0H19l7 7v22.996A2 2 0 0124.003 32H1.997A1.995 1.995 0 010 29.998C.048 16 0 16 0 2.002z"
-          fill="#ffffff"
-        />
-      </g>
-    </svg>
-  )
-}
-
 const IconByLabel = {
   'bank-check': BankCheckIcon,
   bank: BankIcon,
@@ -65,7 +49,7 @@ const IconByLabel = {
   email: EmailIcon,
   euro: EuroIcon,
   exchange: ExchangeIcon,
-  'file-type-note': FileTypeNoteIcon,
+  'file-type-note': NoteIcon,
   fitness: FitnessIcon,
   globe: GlobeIcon,
   gouv: GouvIcon,
@@ -101,32 +85,21 @@ const themeIconByLabel = {
   others: 'dots'
 }
 
-const QualificationIconStack = ({ theme, qualification, ...props }) => {
-  const ForegroundIcon = qualification
+const QualificationIcon = ({ theme, qualification, ...props }) => {
+  const _Icon = qualification
     ? IconByLabel[getIconByLabel(qualification)]
     : theme
     ? IconByLabel[themeIconByLabel[theme]]
     : null
 
-  return (
-    <IconStack
-      {...props}
-      backgroundIcon={
-        <>
-          <Icon className="u-pos-absolute" icon={FileDuotoneWhite} size={32} />
-          <Icon icon={FileDuotoneIcon} color="#E049BF" size={32} />
-        </>
-      }
-      foregroundIcon={<Icon icon={ForegroundIcon} color="#E049BF" size={16} />}
-    />
-  )
+  return <Icon icon={_Icon} color="#E049BF" size={16} {...props} />
 }
 
-QualificationIconStack.propTypes = {
+QualificationIcon.propTypes = {
   /** The name of the qualification (isp\_invoice, family\_record\_book, etc.) */
   qualification: PropTypes.string,
   /** The name of the qualification theme (indentity, family, etc.) */
   theme: PropTypes.string
 }
 
-export default QualificationIconStack
+export default QualificationIcon

package/react/QualificationModal/helpers.js

@@ -5,8 +5,8 @@ import { isQualificationNote } from 'cozy-client/dist/models/document/documentTy
 import { getBoundT } from 'cozy-client/dist/models/document/locales'
 
 import Icon from '../Icon'
-import FileTypeNoteIcon from '../Icons/FileTypeNote'
-import QualificationIconStack from '../QualificationIconStack'
+import NoteIcon from '../Icons/Note'
+import QualificationIcon from '../QualificationIcon'
 
 export const makeOptions = lang => {
   const qualifT = getBoundT(lang)
@@ -16,20 +16,20 @@ export const makeOptions = lang => {
       {
         id: 'none',
         title: qualifT('Scan.themes.none'),
-        icon: <QualificationIconStack />
+        icon: <QualificationIcon />
       },
       ...themesList.map(theme => ({
         id: theme.id,
         title: qualifT(`Scan.themes.${theme.label}`),
-        icon: <QualificationIconStack theme={theme.label} />,
+        icon: <QualificationIcon theme={theme.label} />,
         children: theme.items.map(item => ({
           id: item.label,
           item,
           title: qualifT(`Scan.items.${item.label}`),
           icon: isQualificationNote(item) ? (
-            <Icon icon={FileTypeNoteIcon} size={64} />
+            <Icon icon={NoteIcon} color="#E049BF" size={16} />
           ) : (
-            <QualificationIconStack qualification={item.label} />
+            <QualificationIcon qualification={item.label} />
           )
         }))
       }))

package/react/index.js

@@ -125,7 +125,7 @@ export { default as Thumbnail } from './Thumbnail'
 export { default as ButtonBase } from './ButtonBase'
 export { default as QualificationGrid } from './QualificationGrid'
 export { default as QualificationItem } from './QualificationItem'
-export { default as QualificationIconStack } from './QualificationIconStack'
+export { default as QualificationIcon } from './QualificationIcon'
 export { default as QualificationModal } from './QualificationModal'
 export { default as Timeline } from './Timeline'
 export { default as TimelineConnector } from './TimelineConnector'