cozy-ui 125.1.0 → 126.0.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [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/package.json

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

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'

package/transpiled/react/{QualificationIconStack → QualificationIcon}/index.d.ts

@@ -1,10 +1,10 @@
-export default QualificationIconStack;
-declare function QualificationIconStack({ theme, qualification, ...props }: {
+export default QualificationIcon;
+declare function QualificationIcon({ theme, qualification, ...props }: {
     [x: string]: any;
     theme: any;
     qualification: any;
 }): JSX.Element;
-declare namespace QualificationIconStack {
+declare namespace QualificationIcon {
     namespace propTypes {
         const qualification: PropTypes.Requireable<string>;
         const theme: PropTypes.Requireable<string>;

package/transpiled/react/{QualificationIconStack → QualificationIcon}/index.js

@@ -1,11 +1,10 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["theme", "qualification"];
 import PropTypes from 'prop-types';
 import React from 'react';
 import { getIconByLabel } from 'cozy-client/dist/models/document/qualification';
 import Icon from "cozy-ui/transpiled/react/Icon";
-import IconStack from "cozy-ui/transpiled/react/IconStack";
 import BankIcon from "cozy-ui/transpiled/react/Icons/Bank";
 import BankCheckIcon from "cozy-ui/transpiled/react/Icons/BankCheck";
 import BenefitIcon from "cozy-ui/transpiled/react/Icons/Benefit";
@@ -17,8 +16,6 @@ import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
 import EmailIcon from "cozy-ui/transpiled/react/Icons/Email";
 import EuroIcon from "cozy-ui/transpiled/react/Icons/Euro";
 import ExchangeIcon from "cozy-ui/transpiled/react/Icons/Exchange";
-import FileDuotoneIcon from "cozy-ui/transpiled/react/Icons/FileDuotone";
-import FileTypeNoteIcon from "cozy-ui/transpiled/react/Icons/FileTypeNote";
 import FitnessIcon from "cozy-ui/transpiled/react/Icons/Fitness";
 import GlobeIcon from "cozy-ui/transpiled/react/Icons/Globe";
 import GouvIcon from "cozy-ui/transpiled/react/Icons/Gouv";
@@ -28,6 +25,7 @@ import ImageIcon from "cozy-ui/transpiled/react/Icons/Image";
 import JusticeIcon from "cozy-ui/transpiled/react/Icons/Justice";
 import LaudryIcon from "cozy-ui/transpiled/react/Icons/Laudry";
 import LightningIcon from "cozy-ui/transpiled/react/Icons/Lightning";
+import NoteIcon from "cozy-ui/transpiled/react/Icons/Note";
 import PeopleIcon from "cozy-ui/transpiled/react/Icons/People";
 import PlaneIcon from "cozy-ui/transpiled/react/Icons/Plane";
 import RemboursementIcon from "cozy-ui/transpiled/react/Icons/Remboursement";
@@ -38,19 +36,7 @@ import TeamIcon from "cozy-ui/transpiled/react/Icons/Team";
 import TelecomIcon from "cozy-ui/transpiled/react/Icons/Telecom";
 import TelephoneIcon from "cozy-ui/transpiled/react/Icons/Telephone";
 import WaterIcon from "cozy-ui/transpiled/react/Icons/Water";
-import WorkIcon from "cozy-ui/transpiled/react/Icons/Work"; // this is a copy of FileDuotone without the flap and with a white background
-
-function FileDuotoneWhite(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 26 32"
-  }, props), /*#__PURE__*/React.createElement("g", {
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("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"
-  })));
-}
-
+import WorkIcon from "cozy-ui/transpiled/react/Icons/Work";
 var IconByLabel = {
   'bank-check': BankCheckIcon,
   bank: BankIcon,
@@ -63,7 +49,7 @@ var IconByLabel = {
   email: EmailIcon,
   euro: EuroIcon,
   exchange: ExchangeIcon,
-  'file-type-note': FileTypeNoteIcon,
+  'file-type-note': NoteIcon,
   fitness: FitnessIcon,
   globe: GlobeIcon,
   gouv: GouvIcon,
@@ -98,35 +84,25 @@ var themeIconByLabel = {
   others: 'dots'
 };
 
-var QualificationIconStack = function QualificationIconStack(_ref) {
+var QualificationIcon = function QualificationIcon(_ref) {
   var theme = _ref.theme,
       qualification = _ref.qualification,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var ForegroundIcon = qualification ? IconByLabel[getIconByLabel(qualification)] : theme ? IconByLabel[themeIconByLabel[theme]] : null;
-  return /*#__PURE__*/React.createElement(IconStack, _extends({}, props, {
-    backgroundIcon: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
-      className: "u-pos-absolute",
-      icon: FileDuotoneWhite,
-      size: 32
-    }), /*#__PURE__*/React.createElement(Icon, {
-      icon: FileDuotoneIcon,
-      color: "#E049BF",
-      size: 32
-    })),
-    foregroundIcon: /*#__PURE__*/React.createElement(Icon, {
-      icon: ForegroundIcon,
-      color: "#E049BF",
-      size: 16
-    })
-  }));
+  var _Icon = qualification ? IconByLabel[getIconByLabel(qualification)] : theme ? IconByLabel[themeIconByLabel[theme]] : null;
+
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    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/transpiled/react/QualificationModal/helpers.js

@@ -4,20 +4,20 @@ import { themesList } from 'cozy-client/dist/models/document/documentTypeData';
 import { isQualificationNote } from 'cozy-client/dist/models/document/documentTypeDataHelpers';
 import { getBoundT } from 'cozy-client/dist/models/document/locales';
 import Icon from "cozy-ui/transpiled/react/Icon";
-import FileTypeNoteIcon from "cozy-ui/transpiled/react/Icons/FileTypeNote";
-import QualificationIconStack from "cozy-ui/transpiled/react/QualificationIconStack";
+import NoteIcon from "cozy-ui/transpiled/react/Icons/Note";
+import QualificationIcon from "cozy-ui/transpiled/react/QualificationIcon";
 export var makeOptions = function makeOptions(lang) {
   var qualifT = getBoundT(lang);
   return {
     children: [{
       id: 'none',
       title: qualifT('Scan.themes.none'),
-      icon: /*#__PURE__*/React.createElement(QualificationIconStack, null)
+      icon: /*#__PURE__*/React.createElement(QualificationIcon, null)
     }].concat(_toConsumableArray(themesList.map(function (theme) {
       return {
         id: theme.id,
         title: qualifT("Scan.themes.".concat(theme.label)),
-        icon: /*#__PURE__*/React.createElement(QualificationIconStack, {
+        icon: /*#__PURE__*/React.createElement(QualificationIcon, {
           theme: theme.label
         }),
         children: theme.items.map(function (item) {
@@ -26,9 +26,10 @@ export var makeOptions = function makeOptions(lang) {
             item: item,
             title: qualifT("Scan.items.".concat(item.label)),
             icon: isQualificationNote(item) ? /*#__PURE__*/React.createElement(Icon, {
-              icon: FileTypeNoteIcon,
-              size: 64
-            }) : /*#__PURE__*/React.createElement(QualificationIconStack, {
+              icon: NoteIcon,
+              color: "#E049BF",
+              size: 16
+            }) : /*#__PURE__*/React.createElement(QualificationIcon, {
               qualification: item.label
             })
           };

package/transpiled/react/index.d.ts

@@ -84,7 +84,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";

package/transpiled/react/index.js

@@ -98,7 +98,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';

package/react/QualificationIconStack/Readme.md

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