feat: Add QualificationIconStack component

docs/styleguide.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 
 const webpackMerge = require('webpack-merge')
 
 module.exports = {
   title: 'Cozy UI React components',
@@ -94,6 +94,7 @@
         '../react/Sidebar',
         '../react/SquareAppIcon',
         '../react/QualificationGrid',
+        '../react/QualificationIconStack',
         '../react/QualificationItem',
         '../react/UploadQueue'
       ]

react/Icon/Readme.md

@@ -233,6 +233,7 @@ import New from 'cozy-ui/transpiled/react/Icons/New'
 import Next from 'cozy-ui/transpiled/react/Icons/Next'
 import Note from 'cozy-ui/transpiled/react/Icons/Note'
 import NotificationEmail from 'cozy-ui/transpiled/react/Icons/NotificationEmail'
+import Number from 'cozy-ui/transpiled/react/Icons/Number'
 import Offline from 'cozy-ui/transpiled/react/Icons/Offline'
 import Online from 'cozy-ui/transpiled/react/Icons/Online'
 import Openapp from 'cozy-ui/transpiled/react/Icons/Openapp'
@@ -501,6 +502,7 @@ const icons = [
   Next,
   Note,
   NotificationEmail,
+  Number,
   Offline,
   Online,
   Openapp,
@@ -692,6 +694,7 @@ import FileTypeCodeIcon from 'cozy-ui/transpiled/react/Icons/FileTypeCode'
 import FileTypeFilesIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFiles'
 import FileTypeFolderIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'
 import FileTypeImageIcon from 'cozy-ui/transpiled/react/Icons/FileTypeImage'
+import FileTypeNoteIcon from 'cozy-ui/transpiled/react/Icons/FileTypeNote'
 import FileTypePdfIcon from 'cozy-ui/transpiled/react/Icons/FileTypePdf'
 import FileTypeSheetIcon from 'cozy-ui/transpiled/react/Icons/FileTypeSheet'
 import FileTypeSlideIcon from 'cozy-ui/transpiled/react/Icons/FileTypeSlide'
@@ -731,6 +734,7 @@ const icons = [
   FileTypeFilesIcon,
   FileTypeFolderIcon,
   FileTypeImageIcon,
+  FileTypeNoteIcon,
   FileTypePdfIcon,
   FileTypeSheetIcon,
   FileTypeSlideIcon,
@@ -935,7 +939,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-plus-outlined','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-open','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','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','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']
+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-plus-outlined','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-open','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','number','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','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','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 />

react/Icons/Number.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/number.svg` to regenerate;
+import React from 'react'
+
+function SvgNumber(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 12V4h-.452l-.117.024-2.73 1.177v1.883l1.323-.54V12H4zm11.245-7.363C14.8 4.21 14.192 4 13.44 4c-.437 0-.84.096-1.204.29a2.155 2.155 0 00-.864.816c-.17.29-.27.61-.298.957l-.021.527h2.08v-.318l.004-.09a.507.507 0 01.11-.28.276.276 0 01.233-.11c.111 0 .184.035.248.116.077.097.12.252.12.472 0 .24-.045.418-.128.54-.05.073-.118.111-.232.123l-.09.005h-.994v1.757h1.021l.08.004c.301.03.434.238.434.742 0 .228-.05.395-.144.512-.08.1-.178.144-.325.144-.108 0-.188-.04-.265-.137a.647.647 0 01-.132-.337l-.023-.431H11v.318l.007.206c.04.607.265 1.116.673 1.513.453.44 1.042.661 1.75.661.751 0 1.374-.22 1.85-.663.48-.446.72-1.04.72-1.762 0-.447-.098-.843-.296-1.182l-.094-.145-.107-.134a1.798 1.798 0 00-.252-.235l-.008-.006.014-.01.128-.133c.082-.092.157-.192.225-.3a2 2 0 00.305-1.07c0-.714-.222-1.296-.67-1.723zm-5.83-.007C8.996 4.208 8.417 4 7.696 4c-.475 0-.907.118-1.289.354a2.37 2.37 0 00-.888.99 2.98 2.98 0 00-.3 1.123L5.2 7.03h2.05v-.322l.004-.157c.015-.25.066-.44.146-.568.077-.122.157-.17.271-.17.096 0 .152.033.204.12.076.127.12.323.12.59 0 .192-.049.397-.148.618-.085.19-.211.41-.378.66L7.331 8 5.33 10.57V12h4.87v-1.815H8.05l.573-.824.185-.226c.417-.519.722-.98.906-1.374.215-.462.323-.923.323-1.38 0-.739-.205-1.328-.623-1.751z"
+      />
+    </svg>
+  )
+}
+
+export default SvgNumber

react/QualificationIconStack/Readme.md

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

react/QualificationIconStack/index.jsx

@@ -0,0 +1,111 @@
+import PropTypes from 'prop-types'
+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'
+import BillIcon from '../Icons/Bill'
+import CarIcon from '../Icons/Car'
+import ChildIcon from '../Icons/Child'
+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'
+import HeartIcon from '../Icons/Heart'
+import HomeIcon from '../Icons/Home'
+import ImageIcon from '../Icons/Image'
+import JusticeIcon from '../Icons/Justice'
+import LaudryIcon from '../Icons/Laudry'
+import LightningIcon from '../Icons/Lightning'
+import PeopleIcon from '../Icons/People'
+import PlaneIcon from '../Icons/Plane'
+import RemboursementIcon from '../Icons/Remboursement'
+import RestaurantIcon from '../Icons/Restaurant'
+import SchoolIcon from '../Icons/School'
+import ShopIcon from '../Icons/Shop'
+import TeamIcon from '../Icons/Team'
+import TelecomIcon from '../Icons/Telecom'
+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 qualificationIcon = {
+  'bank-check': BankCheckIcon,
+  bank: BankIcon,
+  benefit: BenefitIcon,
+  bill: BillIcon,
+  car: CarIcon,
+  child: ChildIcon,
+  email: EmailIcon,
+  euro: EuroIcon,
+  exchange: ExchangeIcon,
+  'file-type-note': FileTypeNoteIcon,
+  fitness: FitnessIcon,
+  globe: GlobeIcon,
+  gouv: GouvIcon,
+  heart: HeartIcon,
+  home: HomeIcon,
+  image: ImageIcon,
+  justice: JusticeIcon,
+  laudry: LaudryIcon,
+  lightning: LightningIcon,
+  people: PeopleIcon,
+  plane: PlaneIcon,
+  remboursement: RemboursementIcon,
+  restaurant: RestaurantIcon,
+  school: SchoolIcon,
+  shop: ShopIcon,
+  team: TeamIcon,
+  telecom: TelecomIcon,
+  telephone: TelephoneIcon,
+  water: WaterIcon,
+  work: WorkIcon
+}
+
+const QualificationIconStack = ({ qualification, ...props }) => {
+  const QualificationIcon = qualificationIcon[getIconByLabel(qualification)]
+
+  return (
+    <IconStack
+      {...props}
+      backgroundIcon={
+        <>
+          <Icon className="u-pos-absolute" icon={FileDuotoneWhite} size={32} />
+          <Icon icon={FileDuotoneIcon} color="#E049BF" size={32} />
+        </>
+      }
+      foregroundIcon={
+        <Icon icon={QualificationIcon} color="#E049BF" size={16} />
+      }
+    />
+  )
+}
+
+QualificationIconStack.propTypes = {
+  /** The name of the qualification (isp\_invoice, family\_record\_book, etc.) */
+  qualification: PropTypes.string.isRequired
+}
+
+export default QualificationIconStack