refactor: Use svgr icons

cozy · Nov 12, 2020 · 88649ee · 88649ee
1 parent c4fdc6e
commit 88649ee
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 16 deletions.
diff --git a/src/ducks/balance/NoAccount.jsx b/src/ducks/balance/NoAccount.jsx
@@ -7,6 +7,9 @@ import { Container, Content } from 'components/VerticalBox'
 import BarTheme from 'ducks/bar/BarTheme'
 import styles from 'ducks/balance/NoAccount.styl'
 
+import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+
 const NoAccount = () => {
   const { isMobile } = useBreakpoints()
   const { t, lang } = useI18n()
@@ -27,7 +30,7 @@ const NoAccount = () => {
       <AddAccountLink>
         <Button
           theme="highlight"
-          icon="plus"
+          icon={<Icon icon={PlusIcon} />}
           size="large"
           className={styles.NoAccount_addButton}
           label={t('Accounts.add_bank')}

diff --git a/src/ducks/categories/AddAccountButton.jsx b/src/ducks/categories/AddAccountButton.jsx
@@ -5,6 +5,9 @@ import styles from 'ducks/categories/AddAccountButton.styl'
 import cx from 'classnames'
 import { trackEvent } from 'ducks/tracking/browser'
 
+import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+
 const sleep = time => new Promise(resolve => setTimeout(resolve, time))
 const AddAccountButton = ({
   label,
@@ -16,7 +19,7 @@ const AddAccountButton = ({
   <AddAccountLink>
     <Button
       theme="highlight"
-      icon="plus"
+      icon={<Icon icon={PlusIcon} />}
       size="large"
       className={cx(
         styles.AddAccountLink,

diff --git a/src/ducks/recurrence/RecurrencePage.jsx b/src/ducks/recurrence/RecurrencePage.jsx
@@ -45,7 +45,7 @@ import { BarTitle } from 'components/Title/PageTitle'
 import TransactionsTableHead from 'ducks/transactions/header/TableHead'
 
 import { BarRight } from 'components/Bar'
-import { BarButton, ActionMenu, Icon } from 'cozy-ui/transpiled/react'
+import { BarButton, ActionMenu } from 'cozy-ui/transpiled/react'
 import {
   ActionMenuItem,
   ActionMenuRadio
@@ -63,6 +63,9 @@ import PenIcon from 'cozy-ui/transpiled/react/Icons/Pen'
 import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
 import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
 
+import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+
 // TODO We should need to do this (isMobile ? portal : identity) but see
 // Cozy-UI's issue: https://github.com/cozy/cozy-ui/issues/1462
 const identity = x => x
@@ -338,7 +341,7 @@ const BundleInfo = ({ bundle }) => {
                       iconOnly
                       label={t('Recurrence.action-menu.open-button')}
                       extension="narrow"
-                      icon="dots"
+                      icon={<Icon icon={DotsIcon} />}
                       theme="secondary"
                     />
                   }

diff --git a/src/ducks/settings/AddRuleButton.jsx b/src/ducks/settings/AddRuleButton.jsx
@@ -3,11 +3,14 @@ import styles from './Rules.styl'
 import cx from 'classnames'
 import Button from 'cozy-ui/transpiled/react/Button'
 
+import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+
 const AddRuleButton = ({ label, busy, onClick }) => (
   <Button
     className={cx('u-ml-1 u-mb-0', styles.AddRuleButton)}
     theme="subtle"
-    icon="plus"
+    icon={<Icon icon={PlusIcon} />}
     size="small"
     label={label}
     busy={busy}

diff --git a/src/ducks/transactions/TransactionActions.spec.jsx b/src/ducks/transactions/TransactionActions.spec.jsx
@@ -27,8 +27,8 @@ jest.mock('cozy-ui/transpiled/react/Icon', () => {
   const OriginalIcon = jest.requireActual('cozy-ui/transpiled/react/Icon')
   const mockIcon = props => {
     const icon = props.icon
-    return OriginalIcon.default.isProperIcon(icon) ? (
-      <span data-icon-id={icon.id || icon} />
+    return OriginalIcon.default.isProperIcon(icon) || icon.name ? (
+      <span data-icon-id={icon.id || icon.name || icon} />
     ) : (
       icon
     )
@@ -42,17 +42,17 @@ jest.mock('cozy-ui/transpiled/react/Icon', () => {
 /* eslint-disable */
 const tests = [
   // transaction id, class variant, text, icon, action name, [action props], [test name]
-  ['paiementdocteur', null, 'Ameli+17.50€|Malakoff Mederic+7.50€', 'file-outline|file-outline', 'AttachedDocs'],
-  ['paiementdocteur2', 'error', 'Late reimbursement', 'hourglass', 'ReimbursementStatus'],
-  ['depsantelou1', 'error', 'Late reimbursement', 'hourglass', 'ReimbursementStatus'],
-  ['depsantegene4', 'error', 'Late reimbursement', 'hourglass', 'ReimbursementStatus'],
-  ['depsanteisa2', 'error', 'Late reimbursement', 'hourglass', 'ReimbursementStatus'],
-  ['depsantecla3', 'error', 'Late reimbursement', 'hourglass', 'ReimbursementStatus'],
-  ['facturebouygues', null, 'Invoice', 'file-outline', 'AttachedDocs', {
+  ['paiementdocteur', null, 'Ameli+17.50€|Malakoff Mederic+7.50€', 'SvgFileOutline|SvgFileOutline', 'AttachedDocs'],
+  ['paiementdocteur2', 'error', 'Late reimbursement', 'SvgHourglass', 'ReimbursementStatus'],
+  ['depsantelou1', 'error', 'Late reimbursement', 'SvgHourglass', 'ReimbursementStatus'],
+  ['depsantegene4', 'error', 'Late reimbursement', 'SvgHourglass', 'ReimbursementStatus'],
+  ['depsanteisa2', 'error', 'Late reimbursement', 'SvgHourglass', 'ReimbursementStatus'],
+  ['depsantecla3', 'error', 'Late reimbursement', 'SvgHourglass', 'ReimbursementStatus'],
+  ['facturebouygues', null, 'Invoice', 'SvgFileOutline', 'AttachedDocs', {
     brands: brands.filter(x => x.name === 'Bouygues Telecom').map(b => ({ ...b, hasTrigger: true }))
   }],
-  ['salaireisa1', null, 'Accéder à votre paie', 'openwith', 'url'],
-  ['fnac', null, 'Accéder au site Fnac', 'openwith', 'url'],
+  ['salaireisa1', null, 'Accéder à votre paie', 'SvgOpenwith', 'url'],
+  ['fnac', null, 'Accéder au site Fnac', 'SvgOpenwith', 'url'],
   ['edf', null, 'EDF', null, 'app'],
   ['remboursementcomplementaire', null, 'Invoice', null, 'AttachedDocs', {
     brands: brands.filter(x => x.name == 'Malakoff Mederic')