Replace old ODS icons with new ODS icons (#1207)

aragon · Jan 31, 2024 · 4640a75 · 4640a75
1 parent 626226f
commit 4640a75
Show file tree

Hide file tree

Showing 103 changed files with 557 additions and 586 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+    'babel-preset-vite',
+  ],
+};
diff --git a/jest.config.js b/jest.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   transform: {
-    '^.+\\.tsx?$': 'babel-jest',
+    '^.+\\.m?[tj]sx?$': 'babel-jest',
     '^.+\\.svg$': '<rootDir>/svgTransform.ts',
   },
   testEnvironment: 'jsdom',
@@ -13,4 +13,5 @@ module.exports = {
   // using this to include utils folder so jest is aware of where the test-utils file resides
   moduleDirectories: ['node_modules', 'utils', __dirname],
   setupFiles: ['dotenv/config'],
+  transformIgnorePatterns: ['node_modules/(?!(.*\\.mjs$|react-merge-refs))'],
 };
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.8",
-    "@aragon/ods": "^1.0.8",
+    "@aragon/ods": "^1.0.9",
     "@aragon/sdk-client": "^1.22.1",
     "@aragon/sdk-client-common": "^1.14.1",
     "@elastic/apm-rum-react": "^2.0.0",

diff --git a/src/components/accordionMethod/index.tsx b/src/components/accordionMethod/index.tsx
@@ -3,13 +3,10 @@ import * as Accordion from '@radix-ui/react-accordion';
 import {
   AlertInline,
   ButtonIcon,
-  IconChevronDown,
-  IconMenuVertical,
-  IconSuccess,
-  IconWarning,
   Dropdown,
   ListItemProps,
 } from '@aragon/ods-old';
+import {Icon, IconType} from '@aragon/ods';
 import styled from 'styled-components';
 import {shortenAddress} from 'utils/library';
 
@@ -91,7 +88,11 @@ export const AccordionItem: React.FC<AccordionMethodType & {name: string}> = ({
                     {shortenAddress(smartContractAddress)}
                   </p>
                 )}
-                {verified ? <IconSuccess /> : <IconWarning />}
+                {verified ? (
+                  <Icon icon={IconType.RADIO_CHECK} />
+                ) : (
+                  <Icon icon={IconType.WARNING} />
+                )}
                 <p
                   className={`ml-2 font-semibold ${
                     verified ? 'text-primary-500' : 'text-warning-500'
@@ -115,7 +116,7 @@ export const AccordionItem: React.FC<AccordionMethodType & {name: string}> = ({
                   <ButtonIcon
                     mode="ghost"
                     size="medium"
-                    icon={<IconMenuVertical />}
+                    icon={<Icon icon={IconType.MENU_VERTICAL} />}
                   />
                 }
               />
@@ -124,7 +125,7 @@ export const AccordionItem: React.FC<AccordionMethodType & {name: string}> = ({
               <AccordionButton
                 mode={type === 'action-builder' ? 'ghost' : 'secondary'}
                 size="medium"
-                icon={<IconChevronDown />}
+                icon={<Icon icon={IconType.CHEVRON_DOWN} />}
               />
             </Accordion.Trigger>
           </VStack>

diff --git a/src/components/addCommittee/addCommitteeWallet.tsx b/src/components/addCommittee/addCommitteeWallet.tsx
@@ -1,11 +1,11 @@
 import {
   ButtonIcon,
   Dropdown,
-  IconMenuVertical,
   Label,
   ListItemAction,
   InputValue as WalletInputValue,
 } from '@aragon/ods-old';
+import {Icon, IconType} from '@aragon/ods';
 import React, {useCallback} from 'react';
 import {Controller, useFormContext, useWatch} from 'react-hook-form';
 import {useTranslation} from 'react-i18next';
@@ -121,7 +121,7 @@ const AddCommitteeWalletRow: React.FC<WalletRowProps> = ({index, onDelete}) => {
               mode="ghost"
               size="large"
               bgWhite
-              icon={<IconMenuVertical />}
+              icon={<Icon icon={IconType.MENU_VERTICAL} />}
               data-testid="trigger"
             />
           }

diff --git a/src/components/addCommittee/index.tsx b/src/components/addCommittee/index.tsx
@@ -3,7 +3,6 @@ import {
   ButtonIcon,
   ButtonText,
   Dropdown,
-  IconMenuVertical,
   ListItemAction,
 } from '@aragon/ods-old';
 import React, {useEffect, useRef} from 'react';
@@ -19,6 +18,7 @@ import Row from './addCommitteeWallet';
 import {useNetwork} from '../../context/network';
 import {Address, useEnsName} from 'wagmi';
 import {CHAIN_METADATA} from '../../utils/constants';
+import {Icon, IconType} from '@aragon/ods';
 
 const AddCommittee: React.FC = () => {
   const {t} = useTranslation();
@@ -98,7 +98,7 @@ const AddCommittee: React.FC = () => {
               mode="ghost"
               size="large"
               bgWhite
-              icon={<IconMenuVertical />}
+              icon={<Icon icon={IconType.MENU_VERTICAL} />}
               data-testid="trigger"
             />
           }

diff --git a/src/components/addLinks/index.tsx b/src/components/addLinks/index.tsx
@@ -1,4 +1,4 @@
-import {ButtonText, IconAdd} from '@aragon/ods-old';
+import {ButtonText} from '@aragon/ods-old';
 import {useAlertContext} from 'context/alert';
 import React from 'react';
 import {useFieldArray, useFormContext, useWatch} from 'react-hook-form';
@@ -7,6 +7,7 @@ import styled from 'styled-components';
 
 import Header from './header';
 import Row from './row';
+import {Icon, IconType} from '@aragon/ods';
 
 export type AddLinks = {
   /** Name of the fieldArray that is the target of the link inputs. Defaults to
@@ -66,7 +67,7 @@ const AddLinks: React.FC<AddLinks> = ({
         mode={bgWhite ? 'ghost' : 'secondary'}
         size="large"
         onClick={handleAddLink}
-        {...(buttonPlusIcon ? {iconLeft: <IconAdd />} : {})}
+        {...(buttonPlusIcon ? {iconLeft: <Icon icon={IconType.ADD} />} : {})}
       />
     </Container>
   );

diff --git a/src/components/addLinks/row.tsx b/src/components/addLinks/row.tsx
@@ -2,7 +2,6 @@ import {
   AlertInline,
   ButtonIcon,
   Dropdown,
-  IconMenuVertical,
   Label,
   ListItemAction,
   TextInput,
@@ -19,6 +18,7 @@ import {
 } from 'utils/constants';
 import {isOnlyWhitespace} from 'utils/library';
 import {BgWhite} from './header';
+import {Icon, IconType} from '@aragon/ods';
 
 type LinkRowProps = {
   index: number;
@@ -183,7 +183,7 @@ const LinkRow: React.FC<LinkRowProps & BgWhite> = ({
               mode="ghost"
               size="large"
               bgWhite
-              icon={<IconMenuVertical />}
+              icon={<Icon icon={IconType.MENU_VERTICAL} />}
               data-testid="trigger"
             />
           }

diff --git a/src/components/addWallets/index.tsx b/src/components/addWallets/index.tsx
@@ -2,9 +2,9 @@ import {
   ButtonIcon,
   ButtonText,
   Dropdown,
-  IconMenuVertical,
   ListItemAction,
 } from '@aragon/ods-old';
+import {Icon, IconType} from '@aragon/ods';
 import React, {useEffect, useRef} from 'react';
 import {useFieldArray, useFormContext, useWatch} from 'react-hook-form';
 import {useTranslation} from 'react-i18next';
@@ -115,7 +115,7 @@ const AddWallets: React.FC = () => {
               mode="ghost"
               size="large"
               bgWhite
-              icon={<IconMenuVertical />}
+              icon={<Icon icon={IconType.MENU_VERTICAL} />}
               data-testid="trigger"
             />
           }

diff --git a/src/components/addWallets/row.tsx b/src/components/addWallets/row.tsx
@@ -2,13 +2,13 @@ import {
   AlertInline,
   ButtonIcon,
   Dropdown,
-  IconMenuVertical,
   Label,
   ListItemAction,
   NumberInput,
   TextInput,
   InputValue as WalletInputValue,
 } from '@aragon/ods-old';
+import {Icon, IconType} from '@aragon/ods';
 import Big from 'big.js';
 import {constants} from 'ethers';
 import React, {useCallback, useState} from 'react';
@@ -236,7 +236,7 @@ const WalletRow: React.FC<WalletRowProps> = ({index, onDelete}) => {
               mode="ghost"
               size="large"
               bgWhite
-              icon={<IconMenuVertical />}
+              icon={<Icon icon={IconType.MENU_VERTICAL} />}
               data-testid="trigger"
             />
           }

diff --git a/src/components/breadcrumbs/index.tsx b/src/components/breadcrumbs/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import {Link} from 'react-router-dom';
 import {BreadcrumbData} from 'use-react-router-breadcrumbs';
-import {IconChevronRight} from '@aragon/ods-old';
+import {Icon, IconType} from '@aragon/ods';
 
 type Props = {
   breadcrumbs: BreadcrumbData[];
@@ -24,7 +24,7 @@ const Breadcrumbs: React.FC<Props> = ({breadcrumbs}) => {
             >
               {breadcrumb}
             </Link>
-            {!isLast && <IconChevronRight />}
+            {!isLast && <Icon icon={IconType.CHEVRON_RIGHT} />}
           </Breadcrumb>
         );
       })}

diff --git a/src/components/daoCard/index.tsx b/src/components/daoCard/index.tsx
@@ -1,4 +1,5 @@
-import {AvatarDao, IconBlock, IconCommunity} from '@aragon/ods-old';
+import {AvatarDao} from '@aragon/ods-old';
+import {Icon, IconType} from '@aragon/ods';
 import React from 'react';
 import {useTranslation} from 'react-i18next';
 import styled from 'styled-components';
@@ -52,11 +53,11 @@ export const DaoCard = (props: IDaoCardProps) => {
       </DaoDataWrapper>
       <DaoMetadataWrapper>
         <IconWrapper>
-          <StyledIconBlock />
+          <Icon icon={IconType.BLOCKCHAIN} className="text-neutral-600" />
           <IconLabel>{CHAIN_METADATA[network].name}</IconLabel>
         </IconWrapper>
         <IconWrapper>
-          <StyledIconCommunity />
+          <Icon icon={IconType.APP_COMMUNITY} className="text-neutral-600" />
           <IconLabel>{daoType}</IconLabel>
         </IconWrapper>
       </DaoMetadataWrapper>
@@ -118,11 +119,3 @@ const IconWrapper = styled.div.attrs({
 const DaoDataWrapper = styled.div.attrs({
   className: 'flex flex-col grow space-y-3 flex-1',
 })``;
-
-const StyledIconBlock = styled(IconBlock).attrs({
-  className: 'text-neutral-600',
-})``;
-
-const StyledIconCommunity = styled(IconCommunity).attrs({
-  className: 'text-neutral-600',
-})``;
diff --git a/src/components/daoSelector/index.tsx b/src/components/daoSelector/index.tsx
@@ -2,9 +2,9 @@ import {
   AvatarDao,
   AvatarDaoProps,
   ButtonIcon,
-  IconChevronDown,
   shortenAddress,
 } from '@aragon/ods-old';
+import {Icon, IconType} from '@aragon/ods';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -39,7 +39,7 @@ export const DaoSelector: React.FC<DaoSelectorProps> = ({
       </LeftContent>
 
       <ButtonIcon
-        icon={<IconChevronDown />}
+        icon={<Icon icon={IconType.CHEVRON_DOWN} />}
         mode="secondary"
         size="small"
         bgWhite={!isDesktop}

diff --git a/src/components/executionWidget/actions/mintTokenCard.tsx b/src/components/executionWidget/actions/mintTokenCard.tsx
@@ -1,7 +1,8 @@
-import {IconLinkExternal, Link, ListItemAddress} from '@aragon/ods-old';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {Link, ListItemAddress} from '@aragon/ods-old';
 import {useTranslation} from 'react-i18next';
 import styled from 'styled-components';
+import {Icon, IconType} from '@aragon/ods';
 
 import {AccordionMethod} from 'components/accordionMethod';
 import {useNetwork} from 'context/network';
@@ -170,7 +171,7 @@ export const MintTokenCard: React.FC<{
           <Link
             label={t('labels.seeAllHolders')}
             href={`${CHAIN_METADATA[network].explorer}/token/tokenholderchart/${action.summary.daoTokenAddress}`}
-            iconRight={<IconLinkExternal />}
+            iconRight={<Icon icon={IconType.LINK_EXTERNAL} />}
           />
         </SummaryContainer>
       </Container>

diff --git a/src/components/executionWidget/index.tsx b/src/components/executionWidget/index.tsx
@@ -1,11 +1,6 @@
-import {
-  AlertCard,
-  AlertInline,
-  ButtonText,
-  IconAdd,
-  IconLinkExternal,
-} from '@aragon/ods-old';
 import React from 'react';
+import {AlertCard, AlertInline, ButtonText} from '@aragon/ods-old';
+import {Icon, IconType} from '@aragon/ods';
 import {useTranslation} from 'react-i18next';
 import styled from 'styled-components';
 
@@ -51,7 +46,7 @@ export const ExecutionWidget: React.FC<ExecutionWidgetProps> = ({
             onAddAction && {
               label: t('governance.executionCard.addAction'),
               onClick: onAddAction,
-              iconLeft: <IconAdd />,
+              iconLeft: <Icon icon={IconType.ADD} />,
             }
           }
         />
@@ -135,7 +130,7 @@ const WidgetFooter: React.FC<FooterProps> = ({
             <StyledButtonText
               label={t('governance.executionCard.seeTransaction')}
               mode="secondary"
-              iconRight={<IconLinkExternal />}
+              iconRight={<Icon icon={IconType.LINK_EXTERNAL} />}
               size="large"
               bgWhite
               onClick={handleTxViewButtonClick}
@@ -154,7 +149,7 @@ const WidgetFooter: React.FC<FooterProps> = ({
             <StyledButtonText
               label={t('governance.executionCard.seeTransaction')}
               mode="secondary"
-              iconRight={<IconLinkExternal />}
+              iconRight={<Icon icon={IconType.LINK_EXTERNAL} />}
               size="large"
               bgWhite
               onClick={handleTxViewButtonClick}

diff --git a/src/components/fullScreenStepper/fullScreenStepper.tsx b/src/components/fullScreenStepper/fullScreenStepper.tsx
@@ -1,10 +1,3 @@
-import {
-  Breadcrumb,
-  ButtonText,
-  IconChevronLeft,
-  IconChevronRight,
-  Wizard,
-} from '@aragon/ods-old';
 import React, {
   createContext,
   useCallback,
@@ -13,6 +6,8 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import {Breadcrumb, ButtonText, Wizard} from '@aragon/ods-old';
+import {Icon, IconType} from '@aragon/ods';
 import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router-dom';
 import styled from 'styled-components';
@@ -171,7 +166,7 @@ export const FullScreenStepper: React.FC<FullScreenStepperProps> = ({
                   onBackButtonClicked ? onBackButtonClicked() : prev()
                 }
                 disabled={currentStep === 1}
-                iconLeft={<IconChevronLeft />}
+                iconLeft={<Icon icon={IconType.CHEVRON_LEFT} />}
               />
               <ButtonValidationTrigger onClick={onNextButtonDisabledClicked}>
                 <ButtonText
@@ -181,7 +176,7 @@ export const FullScreenStepper: React.FC<FullScreenStepperProps> = ({
                     onNextButtonClicked ? onNextButtonClicked(next) : next()
                   }
                   disabled={isNextButtonDisabled}
-                  iconRight={<IconChevronRight />}
+                  iconRight={<Icon icon={IconType.CHEVRON_RIGHT} />}
                 />
               </ButtonValidationTrigger>
             </FormFooter>