cozy-viewer 6.0.0 → 7.0.0

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.0.0](https://github.com/cozy/cozy-libs/compare/cozy-viewer@6.0.1...cozy-viewer@7.0.0) (2024-12-05)
+
+
+### Features
+
+* **Viewer:** Add icons on qualification items ([b723037](https://github.com/cozy/cozy-libs/commit/b7230373edb395d06640992591fbd0f4320f1555))
+* **Viewer:** Add new qualification item ([4f76701](https://github.com/cozy/cozy-libs/commit/4f767014ad3faf2023fbbcb52915357efee0c41b))
+* **Viewer:** Upgrade cozy-ui ([806f310](https://github.com/cozy/cozy-libs/commit/806f3100af004654e0246d38d9937c4a015f0428))
+
+
+### BREAKING CHANGES
+
+* **Viewer:** You must have `cozy-ui >= 113.8.0`
+
+
+
+
+
+## [6.0.1](https://github.com/cozy/cozy-libs/compare/cozy-viewer@6.0.0...cozy-viewer@6.0.1) (2024-12-04)
+
+**Note:** Version bump only for package cozy-viewer
+
+
+
+
+
 # [6.0.0](https://github.com/cozy/cozy-libs/compare/cozy-viewer@5.1.1...cozy-viewer@6.0.0) (2024-12-03)
 
 

package/dist/Panel/ActionMenuWrapper.js

@@ -148,7 +148,7 @@ ActionMenuWrapper.propTypes = {
   file: _propTypes.default.object,
   optionFile: _propTypes.default.shape({
     name: _propTypes.default.string,
-    value: _propTypes.default.string
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
   })
 };
 var _default = ActionMenuWrapper;

package/dist/Panel/Qualification.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _paper = require("cozy-client/dist/models/paper");
 
+var _Divider = _interopRequireDefault(require("cozy-ui/transpiled/react/Divider"));
+
 var _List = _interopRequireDefault(require("cozy-ui/transpiled/react/List"));
 
 var _ActionMenuWrapper = _interopRequireDefault(require("./ActionMenuWrapper"));
@@ -27,6 +29,8 @@ var _QualificationListItemInformation = _interopRequireDefault(require("./Qualif
 
 var _QualificationListItemOther = _interopRequireDefault(require("./QualificationListItemOther"));
 
+var _QualificationListItemQualification = _interopRequireDefault(require("./QualificationListItemQualification"));
+
 var _ExpirationAlert = _interopRequireDefault(require("../components/ExpirationAlert"));
 
 var _withViewerLocales = require("../hoc/withViewerLocales");
@@ -93,6 +97,9 @@ var Qualification = function Qualification(_ref) {
     var _file$bills, _file$bills$data;
 
     var relatedBills = (_file$bills = file.bills) === null || _file$bills === void 0 ? void 0 : (_file$bills$data = _file$bills.data) === null || _file$bills$data === void 0 ? void 0 : _file$bills$data[0];
+    var formattedMetadataQualification = (0, _paper.formatMetadataQualification)(metadata).sort(function (a, b) {
+      return a.name === 'qualification' ? -1 : b.name === 'qualification' ? 1 : 0;
+    }); // move "qualification" metadata in first position
 
     if (relatedBills) {
       var formattedBillsMetadata = _paper.KNOWN_BILLS_ATTRIBUTES_NAMES.map(function (attrName) {
@@ -102,10 +109,10 @@ var Qualification = function Qualification(_ref) {
         };
       });
 
-      return (0, _paper.formatMetadataQualification)(metadata).concat(formattedBillsMetadata);
+      return formattedMetadataQualification.concat(formattedBillsMetadata);
     }
 
-    return (0, _paper.formatMetadataQualification)(metadata);
+    return formattedMetadataQualification;
   }, [metadata, (_file$bills2 = file.bills) === null || _file$bills2 === void 0 ? void 0 : _file$bills2.data]);
   (0, _react.useEffect)(function () {
     actionBtnRef.current = formattedMetadataQualification.map(function (_, idx) {
@@ -116,21 +123,31 @@ var Qualification = function Qualification(_ref) {
   }, [formattedMetadataQualification]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _paper.isExpiringSoon)(file) && !isExpirationAlertHidden(file) && /*#__PURE__*/_react.default.createElement(_ExpirationAlert.default, {
     file: file
-  }), /*#__PURE__*/_react.default.createElement(_List.default, {
-    className: "u-pv-1"
-  }, formattedMetadataQualification.map(function (meta, idx) {
+  }), /*#__PURE__*/_react.default.createElement(_QualificationListItemQualification.default, {
+    file: file,
+    ref: actionBtnRef.current[0],
+    formattedMetadataQualification: formattedMetadataQualification[0],
+    toggleActionsMenu: function toggleActionsMenu(val) {
+      return _toggleActionsMenu(0, formattedMetadataQualification[0].name, val);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_List.default, null, formattedMetadataQualification.map(function (meta, idx) {
     var name = meta.name;
+    if (name === 'qualification') return null;
     var metadataQualificationType = (0, _paper.getMetadataQualificationType)(name);
     var QualificationListItemComp = ComponentFromMetadataQualificationType[metadataQualificationType];
-    return /*#__PURE__*/_react.default.createElement(QualificationListItemComp, {
-      key: idx,
+    var isLastItem = idx === formattedMetadataQualification.length - 1;
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: idx
+    }, /*#__PURE__*/_react.default.createElement(QualificationListItemComp, {
       file: file,
       ref: actionBtnRef.current[idx],
       formattedMetadataQualification: meta,
       toggleActionsMenu: function toggleActionsMenu(val) {
         return _toggleActionsMenu(idx, name, val);
       }
-    });
+    }), !isLastItem && /*#__PURE__*/_react.default.createElement(_Divider.default, {
+      variant: "inset"
+    }));
   }), optionFile.name && /*#__PURE__*/_react.default.createElement(_ActionMenuWrapper.default, {
     onClose: hideActionsMenu,
     file: file,

package/dist/Panel/QualificationListItemContact.js

@@ -21,8 +21,12 @@ var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconB
 
 var _Dots = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Dots"));
 
+var _People = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/People"));
+
 var _ListItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItem"));
 
+var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
+
 var _ListItemSecondaryAction = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemSecondaryAction"));
 
 var _Spinner = _interopRequireDefault(require("cozy-ui/transpiled/react/Spinner"));
@@ -80,9 +84,7 @@ var QualificationListItemContact = function QualificationListItemContact(_ref) {
       isLoadingContacts = _useReferencedContact.isLoadingContacts;
 
   if (isLoadingContacts) {
-    return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
-      className: "u-pl-2 u-pr-3"
-    }, /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+    return /*#__PURE__*/_react.default.createElement(_ListItem.default, null, /*#__PURE__*/_react.default.createElement(_Spinner.default, {
       color: "var(--secondaryTextColor)"
     }));
   }
@@ -96,9 +98,9 @@ var QualificationListItemContact = function QualificationListItemContact(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
-    className: "u-ph-2"
-  }, /*#__PURE__*/_react.default.createElement(_QualificationListItemText.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _People.default
+  })), /*#__PURE__*/_react.default.createElement(_QualificationListItemText.default, {
     primary: formattedTitle,
     secondary: formattedValue
   }), /*#__PURE__*/_react.default.createElement(_ListItemSecondaryAction.default, null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {

package/dist/Panel/QualificationListItemDate.js

@@ -17,10 +17,14 @@ var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
 
 var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
 
+var _Calendar = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Calendar"));
+
 var _Dots = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Dots"));
 
 var _ListItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItem"));
 
+var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
+
 var _ListItemSecondaryAction = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemSecondaryAction"));
 
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
@@ -54,9 +58,9 @@ var QualificationListItemDate = /*#__PURE__*/(0, _react.forwardRef)(function (_r
     lang: lang
   });
   var isExpirationDate = name === 'expirationDate';
-  return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
-    className: "u-pl-2 u-pr-3"
-  }, /*#__PURE__*/_react.default.createElement(_QualificationListItemText.default, {
+  return /*#__PURE__*/_react.default.createElement(_ListItem.default, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Calendar.default
+  })), /*#__PURE__*/_react.default.createElement(_QualificationListItemText.default, {
     primary: formattedTitle,
     secondary: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
       component: "span",

package/dist/Panel/QualificationListItemInformation.js

@@ -17,10 +17,22 @@ var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
 
 var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
 
+var _Bell = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Bell"));
+
+var _Contract = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Contract"));
+
 var _Dots = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Dots"));
 
+var _Euro = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Euro"));
+
+var _Globe = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Globe"));
+
+var _Number = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Number"));
+
 var _ListItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItem"));
 
+var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
+
 var _ListItemSecondaryAction = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemSecondaryAction"));
 
 var _MidEllipsis = _interopRequireDefault(require("cozy-ui/transpiled/react/MidEllipsis"));
@@ -33,6 +45,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var KNOWN_INFORMATION_METADATA_ICONS = [_Number.default, _Number.default, _Globe.default, _Euro.default, _Contract.default, _Euro.default, _Euro.default, _Number.default, _Number.default, _Bell.default];
+
+var makeInformationMetadataIcon = function makeInformationMetadataIcon(name) {
+  return KNOWN_INFORMATION_METADATA_ICONS[_paper.KNOWN_INFORMATION_METADATA_NAMES.findIndex(function (el) {
+    return el === name;
+  })];
+};
+
 var QualificationListItemInformation = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var formattedMetadataQualification = _ref.formattedMetadataQualification,
       file = _ref.file,
@@ -53,12 +73,13 @@ var QualificationListItemInformation = /*#__PURE__*/(0, _react.forwardRef)(funct
     name: name,
     qualificationLabel: qualificationLabel
   });
+  var InformationIcon = makeInformationMetadataIcon(name);
   var titleComponent = formattedTitle === name ? /*#__PURE__*/_react.default.createElement(_MidEllipsis.default, {
     text: name
   }) : formattedTitle;
-  return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
-    className: "u-pl-2 u-pr-3"
-  }, /*#__PURE__*/_react.default.createElement(_QualificationListItemText.default, {
+  return /*#__PURE__*/_react.default.createElement(_ListItem.default, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: InformationIcon
+  })), /*#__PURE__*/_react.default.createElement(_QualificationListItemText.default, {
     primary: titleComponent,
     secondary: formattedValue,
     disabled: !value

package/dist/Panel/QualificationListItemOther.js

@@ -19,8 +19,12 @@ var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconB
 
 var _Dots = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Dots"));
 
+var _File = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/File"));
+
 var _ListItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItem"));
 
+var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
+
 var _ListItemSecondaryAction = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemSecondaryAction"));
 
 var _MidEllipsis = _interopRequireDefault(require("cozy-ui/transpiled/react/MidEllipsis"));
@@ -50,9 +54,9 @@ var QualificationListItemOther = /*#__PURE__*/(0, _react.forwardRef)(function (_
     lang: lang,
     name: name
   });
-  return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
-    className: "u-pl-2 u-pr-3"
-  }, /*#__PURE__*/_react.default.createElement(_QualificationListItemText.default, {
+  return /*#__PURE__*/_react.default.createElement(_ListItem.default, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _File.default
+  })), /*#__PURE__*/_react.default.createElement(_QualificationListItemText.default, {
     primary: formattedTitle,
     secondary: /*#__PURE__*/_react.default.createElement(_MidEllipsis.default, {
       text: formattedValue

package/dist/Panel/QualificationListItemQualification.d.ts

@@ -0,0 +1,14 @@
+export default QualificationListItemQualification;
+declare function QualificationListItemQualification({ formattedMetadataQualification }: {
+    formattedMetadataQualification: any;
+}): JSX.Element | null;
+declare namespace QualificationListItemQualification {
+    const displayName: string;
+    namespace propTypes {
+        const formattedMetadataQualification: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Requireable<string>;
+            value: PropTypes.Requireable<string>;
+        }>>;
+    }
+}
+import PropTypes from "prop-types";

package/dist/Panel/QualificationListItemQualification.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _paper = require("cozy-client/dist/models/paper");
+
+var _ListItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItem"));
+
+var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
+
+var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
+
+var _MidEllipsis = _interopRequireDefault(require("cozy-ui/transpiled/react/MidEllipsis"));
+
+var _QualificationIconStack = _interopRequireDefault(require("cozy-ui/transpiled/react/QualificationIconStack"));
+
+var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
+
+var QualificationListItemQualification = function QualificationListItemQualification(_ref) {
+  var formattedMetadataQualification = _ref.formattedMetadataQualification;
+
+  var _useI18n = (0, _I18n.useI18n)(),
+      lang = _useI18n.lang;
+
+  var name = formattedMetadataQualification.name,
+      value = formattedMetadataQualification.value;
+  if (!value) return null;
+  var formattedValue = (0, _paper.formatOtherMetadataValue)(value, {
+    lang: lang,
+    name: name
+  });
+  return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+    size: "large",
+    divider: true
+  }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_QualificationIconStack.default, {
+    qualification: value
+  })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: /*#__PURE__*/_react.default.createElement(_MidEllipsis.default, {
+      text: formattedValue
+    }),
+    primaryTypographyProps: {
+      variant: 'h6'
+    }
+  }));
+};
+
+QualificationListItemQualification.displayName = 'QualificationListItemQualification';
+QualificationListItemQualification.propTypes = {
+  formattedMetadataQualification: _propTypes.default.shape({
+    name: _propTypes.default.string,
+    value: _propTypes.default.string
+  })
+};
+var _default = QualificationListItemQualification;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-viewer",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "Cozy-Viewer provides a component to show files in a viewer.",
   "main": "dist/index.js",
   "license": "MIT",
@@ -27,11 +27,11 @@
     "babel-preset-cozy-app": "^2.8.1",
     "cozy-client": "50.0.0",
     "cozy-device-helper": "2.0.0",
-    "cozy-harvest-lib": "^31.0.1",
+    "cozy-harvest-lib": "^31.0.3",
     "cozy-intent": "^2.29.1",
     "cozy-logger": "^1.16.1",
-    "cozy-sharing": "^16.8.0",
-    "cozy-ui": "^113.7.0",
+    "cozy-sharing": "^16.9.0",
+    "cozy-ui": "^113.8.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
@@ -56,9 +56,9 @@
     "cozy-intent": ">=2.26.0",
     "cozy-logger": ">=1.9.0",
     "cozy-sharing": ">=16.8.0",
-    "cozy-ui": ">=113.7.0",
+    "cozy-ui": ">=113.8.0",
     "react": ">=16.12.0",
     "react-dom": ">=16.12.0"
   },
-  "gitHead": "1ef3aa4ead2e15345ae0274fea1580d0cb175023"
+  "gitHead": "b49bd1f6b71446235b2c5a702a13584765787ce8"
 }

package/src/Panel/ActionMenuWrapper.jsx

@@ -97,7 +97,7 @@ ActionMenuWrapper.propTypes = {
   file: PropTypes.object,
   optionFile: PropTypes.shape({
     name: PropTypes.string,
-    value: PropTypes.string
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   })
 }
 

package/src/Panel/Qualification.jsx

@@ -1,5 +1,12 @@
 import PropTypes from 'prop-types'
-import React, { useRef, useState, createRef, useMemo, useEffect } from 'react'
+import React, {
+  Fragment,
+  useRef,
+  useState,
+  createRef,
+  useMemo,
+  useEffect
+} from 'react'
 
 import {
   isExpiringSoon,
@@ -7,6 +14,7 @@ import {
   KNOWN_BILLS_ATTRIBUTES_NAMES,
   getMetadataQualificationType
 } from 'cozy-client/dist/models/paper'
+import Divider from 'cozy-ui/transpiled/react/Divider'
 import List from 'cozy-ui/transpiled/react/List'
 
 import ActionMenuWrapper from './ActionMenuWrapper'
@@ -14,6 +22,7 @@ import QualificationListItemContact from './QualificationListItemContact'
 import QualificationListItemDate from './QualificationListItemDate'
 import QualificationListItemInformation from './QualificationListItemInformation'
 import QualificationListItemOther from './QualificationListItemOther'
+import QualificationListItemQualification from './QualificationListItemQualification'
 import ExpirationAlert from '../components/ExpirationAlert'
 import { withViewerLocales } from '../hoc/withViewerLocales'
 
@@ -51,18 +60,21 @@ const Qualification = ({ file }) => {
 
   const formattedMetadataQualification = useMemo(() => {
     const relatedBills = file.bills?.data?.[0]
+    const formattedMetadataQualification = formatMetadataQualification(
+      metadata
+    ).sort((a, b) =>
+      a.name === 'qualification' ? -1 : b.name === 'qualification' ? 1 : 0
+    ) // move "qualification" metadata in first position
 
     if (relatedBills) {
       const formattedBillsMetadata = KNOWN_BILLS_ATTRIBUTES_NAMES.map(
         attrName => ({ name: attrName, value: relatedBills[attrName] })
       )
 
-      return formatMetadataQualification(metadata).concat(
-        formattedBillsMetadata
-      )
+      return formattedMetadataQualification.concat(formattedBillsMetadata)
     }
 
-    return formatMetadataQualification(metadata)
+    return formattedMetadataQualification
   }, [metadata, file.bills?.data])
 
   useEffect(() => {
@@ -76,24 +88,37 @@ const Qualification = ({ file }) => {
       {isExpiringSoon(file) && !isExpirationAlertHidden(file) && (
         <ExpirationAlert file={file} />
       )}
-      <List className="u-pv-1">
+      <QualificationListItemQualification
+        file={file}
+        ref={actionBtnRef.current[0]}
+        formattedMetadataQualification={formattedMetadataQualification[0]}
+        toggleActionsMenu={val =>
+          toggleActionsMenu(0, formattedMetadataQualification[0].name, val)
+        }
+      />
+      <List>
         {formattedMetadataQualification.map((meta, idx) => {
           const { name } = meta
+          if (name === 'qualification') return null
+
           const metadataQualificationType = getMetadataQualificationType(name)
           const QualificationListItemComp =
             ComponentFromMetadataQualificationType[metadataQualificationType]
 
+          const isLastItem = idx === formattedMetadataQualification.length - 1
+
           return (
-            <QualificationListItemComp
-              key={idx}
-              file={file}
-              ref={actionBtnRef.current[idx]}
-              formattedMetadataQualification={meta}
-              toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
-            />
+            <Fragment key={idx}>
+              <QualificationListItemComp
+                file={file}
+                ref={actionBtnRef.current[idx]}
+                formattedMetadataQualification={meta}
+                toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
+              />
+              {!isLastItem && <Divider variant="inset" />}
+            </Fragment>
           )
         })}
-
         {optionFile.name && (
           <ActionMenuWrapper
             onClose={hideActionsMenu}

package/src/Panel/QualificationListItemContact.jsx

@@ -8,7 +8,9 @@ import {
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Dots from 'cozy-ui/transpiled/react/Icons/Dots'
+import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
@@ -36,7 +38,7 @@ const QualificationListItemContact = ({ file }) => {
 
   if (isLoadingContacts) {
     return (
-      <ListItem className="u-pl-2 u-pr-3">
+      <ListItem>
         <Spinner color="var(--secondaryTextColor)" />
       </ListItem>
     )
@@ -51,7 +53,10 @@ const QualificationListItemContact = ({ file }) => {
 
   return (
     <>
-      <ListItem className="u-ph-2">
+      <ListItem>
+        <ListItemIcon>
+          <Icon icon={PeopleIcon} />
+        </ListItemIcon>
         <QualificationListItemText
           primary={formattedTitle}
           secondary={formattedValue}

package/src/Panel/QualificationListItemDate.jsx

@@ -9,8 +9,10 @@ import {
 } from 'cozy-client/dist/models/paper'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import CalendarIcon from 'cozy-ui/transpiled/react/Icons/Calendar'
 import Dots from 'cozy-ui/transpiled/react/Icons/Dots'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
@@ -30,7 +32,10 @@ const QualificationListItemDate = forwardRef(
     const isExpirationDate = name === 'expirationDate'
 
     return (
-      <ListItem className="u-pl-2 u-pr-3">
+      <ListItem>
+        <ListItemIcon>
+          <Icon icon={CalendarIcon} />
+        </ListItemIcon>
         <QualificationListItemText
           primary={formattedTitle}
           secondary={

package/src/Panel/QualificationListItemInformation.jsx

@@ -3,18 +3,43 @@ import React, { forwardRef } from 'react'
 
 import {
   getTranslatedNameForInformationMetadata,
-  formatInformationMetadataValue
+  formatInformationMetadataValue,
+  KNOWN_INFORMATION_METADATA_NAMES
 } from 'cozy-client/dist/models/paper'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import BellIcon from 'cozy-ui/transpiled/react/Icons/Bell'
+import ContractIcon from 'cozy-ui/transpiled/react/Icons/Contract'
 import Dots from 'cozy-ui/transpiled/react/Icons/Dots'
+import EuroIcon from 'cozy-ui/transpiled/react/Icons/Euro'
+import GlobeIcon from 'cozy-ui/transpiled/react/Icons/Globe'
+import NumberIcon from 'cozy-ui/transpiled/react/Icons/Number'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
 import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import QualificationListItemText from './QualificationListItemText'
 
+const KNOWN_INFORMATION_METADATA_ICONS = [
+  NumberIcon,
+  NumberIcon,
+  GlobeIcon,
+  EuroIcon,
+  ContractIcon,
+  EuroIcon,
+  EuroIcon,
+  NumberIcon,
+  NumberIcon,
+  BellIcon
+]
+
+const makeInformationMetadataIcon = name =>
+  KNOWN_INFORMATION_METADATA_ICONS[
+    KNOWN_INFORMATION_METADATA_NAMES.findIndex(el => el === name)
+  ]
+
 const QualificationListItemInformation = forwardRef(
   ({ formattedMetadataQualification, file, toggleActionsMenu }, ref) => {
     const { lang } = useI18n()
@@ -30,12 +55,16 @@ const QualificationListItemInformation = forwardRef(
       name,
       qualificationLabel
     })
+    const InformationIcon = makeInformationMetadataIcon(name)
 
     const titleComponent =
       formattedTitle === name ? <MidEllipsis text={name} /> : formattedTitle
 
     return (
-      <ListItem className="u-pl-2 u-pr-3">
+      <ListItem>
+        <ListItemIcon>
+          <Icon icon={InformationIcon} />
+        </ListItemIcon>
         <QualificationListItemText
           primary={titleComponent}
           secondary={formattedValue}

package/src/Panel/QualificationListItemOther.jsx

@@ -8,7 +8,9 @@ import {
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Dots from 'cozy-ui/transpiled/react/Icons/Dots'
+import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
 import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
@@ -31,7 +33,10 @@ const QualificationListItemOther = forwardRef(
     })
 
     return (
-      <ListItem className="u-pl-2 u-pr-3">
+      <ListItem>
+        <ListItemIcon>
+          <Icon icon={FileIcon} />
+        </ListItemIcon>
         <QualificationListItemText
           primary={formattedTitle}
           secondary={<MidEllipsis text={formattedValue} />}

package/src/Panel/QualificationListItemQualification.jsx

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { formatOtherMetadataValue } from 'cozy-client/dist/models/paper'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis'
+import QualificationIconStack from 'cozy-ui/transpiled/react/QualificationIconStack'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+const QualificationListItemQualification = ({
+  formattedMetadataQualification
+}) => {
+  const { lang } = useI18n()
+  const { name, value } = formattedMetadataQualification
+
+  if (!value) return null
+
+  const formattedValue = formatOtherMetadataValue(value, {
+    lang,
+    name
+  })
+
+  return (
+    <ListItem size="large" divider>
+      <ListItemIcon>
+        <QualificationIconStack qualification={value} />
+      </ListItemIcon>
+      <ListItemText
+        primary={<MidEllipsis text={formattedValue} />}
+        primaryTypographyProps={{ variant: 'h6' }}
+      />
+    </ListItem>
+  )
+}
+
+QualificationListItemQualification.displayName =
+  'QualificationListItemQualification'
+
+QualificationListItemQualification.propTypes = {
+  formattedMetadataQualification: PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.string
+  })
+}
+
+export default QualificationListItemQualification