feat: Update DaoDataListItem component to support isExternal property (#421)

Author: cgero-eth

CHANGELOG.md

@@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- Update `<DaoDataListItem.Structure />` module component to support new `isExternal` property
+
 ### Changed
 
 - Update Manrope font weight for Regular variant from 500 to 400

src/modules/components/dao/daoDataListItem/daoDataListItemStructure/daoDataListItemStructure.stories.tsx

@@ -20,22 +20,21 @@ type Story = StoryObj<typeof DaoDataListItemStructure>;
 export const Default: Story = {
     args: {
         name: 'Patito DAO',
-        logoSrc: 'https://cdn.discordapp.com/icons/672466989217873929/acffa3e9e09ac5962ff803a5f8649040.webp?size=240',
+        logoSrc: 'https://pbs.twimg.com/profile_images/1851934141782331394/Z0ZqlyIo_400x400.png',
         description:
             'Papito DAO is responsible for maximizing effective coordination and collaboration between different Patito teams and enabling them to perform at their best ability with the highest velocity they can achieve. Our main focus is on managing the day-to-day tasks of the Patito Guilds, such as enabling contractual relationships, legal operations, accounting, finance, and HR. We are also responsible for addressing any issues that may arise within the teams and deploying new tools, and infrastructure to ensure smooth operations.',
-        network: 'Ethereum Mainnet',
-        ens: 'patito.dao.eth',
+        network: 'Ethereum',
+        address: '0xc6B61B776367b236648399ACF4A0bc5aDe70708F',
     },
 };
 
 /* Usage with extra long strings for name & ENS */
 export const LongNames: Story = {
     args: {
         name: 'A DAO With An Extremely Long Name That Should Be Truncated DAO',
-        logoSrc: 'https://cdn.discordapp.com/icons/672466989217873929/acffa3e9e09ac5962ff803a5f8649040.webp?size=240',
         description:
             'Papito DAO is responsible for maximizing effective coordination and collaboration between different Patito teams and enabling them to perform at their best ability with the highest velocity they can achieve. Our main focus is on managing the day-to-day tasks of the Patito Guilds, such as enabling contractual relationships, legal operations, accounting, finance, and HR. We are also responsible for addressing any issues that may arise within the teams and deploying new tools, and infrastructure to ensure smooth operations.',
-        network: 'Ethereum Mainnet',
+        network: 'Ethereum',
         ens: 'a_dao_with_an_extremely_long_ens_name_that_should_be_truncated.dao.eth',
     },
 };
@@ -48,9 +47,25 @@ export const Fallback: Story = {
         name: 'Patito DAO',
         description:
             'Papito DAO is responsible for maximizing effective coordination and collaboration between different Patito teams and enabling them to perform at their best ability with the highest velocity they can achieve. Our main focus is on managing the day-to-day tasks of the Patito Guilds, such as enabling contractual relationships, legal operations, accounting, finance, and HR. We are also responsible for addressing any issues that may arise within the teams and deploying new tools, and infrastructure to ensure smooth operations.',
-        network: 'Ethereum Mainnet',
+        network: 'Ethereum',
         ens: 'patito.dao.eth',
     },
 };
 
+/**
+ * Usage of the DaoDataListItem component with external link.
+ */
+export const External: Story = {
+    args: {
+        name: 'Lido',
+        logoSrc: 'https://pbs.twimg.com/profile_images/1721880644345622528/G2czctJJ_400x400.jpg',
+        description:
+            "The Lido DAO governs key parameters of Ethereum's largest liquid staking protocol using the voting power of LDO.",
+        network: 'Ethereum',
+        href: 'https://vote.lido.fi/',
+        target: '_blank',
+        isExternal: true,
+    },
+};
+
 export default meta;

src/modules/components/dao/daoDataListItem/daoDataListItemStructure/daoDataListItemStructure.test.tsx

@@ -1,4 +1,6 @@
 import { render, screen } from '@testing-library/react';
+import { IconType } from '../../../../../core';
+import { addressUtils } from '../../../../utils';
 import { DaoDataListItemStructure, type IDaoDataListItemStructureProps } from './daoDataListItemStructure';
 
 describe('<DaoDataListItemStructure /> component', () => {
@@ -10,20 +12,20 @@ describe('<DaoDataListItemStructure /> component', () => {
         return <DaoDataListItemStructure {...completeProps} />;
     };
 
-    it('renders ensName and the daoName (in uppercase) as the avatar fallback', () => {
+    it('renders the dao ens name and its name in uppercase as avatar fallback', () => {
         const name = 'a';
         const ens = 'a.eth';
         render(createTestComponent({ name, ens }));
         expect(screen.getByText(name.toUpperCase())).toBeInTheDocument();
         expect(screen.getByText(ens)).toBeInTheDocument();
     });
 
-    it('renders name and the address', () => {
+    it('renders the dao name and its address', () => {
         const name = 'ab';
-        const address = '0x123';
+        const address = '0xc6B61B776367b236648399ACF4A0bc5aDe70708F';
         render(createTestComponent({ name, address }));
         expect(screen.getByText(name.toUpperCase())).toBeInTheDocument();
-        expect(screen.getByText(address)).toBeInTheDocument();
+        expect(screen.getByText(addressUtils.truncateAddress(address))).toBeInTheDocument();
     });
 
     it('does not render the dao ENS name if it is not provided', () => {
@@ -45,4 +47,10 @@ describe('<DaoDataListItemStructure /> component', () => {
         render(createTestComponent({ network }));
         expect(screen.getByText(network)).toBeInTheDocument();
     });
+
+    it('displays an external link icon when the isExternal property is set to true', () => {
+        const isExternal = true;
+        render(createTestComponent({ isExternal }));
+        expect(screen.getByTestId(IconType.LINK_EXTERNAL)).toBeInTheDocument();
+    });
 });

src/modules/components/dao/daoDataListItem/daoDataListItemStructure/daoDataListItemStructure.tsx

@@ -1,5 +1,6 @@
 import type React from 'react';
-import { DataList, Heading, Icon, IconType, type IDataListItemProps } from '../../../../../core';
+import { AvatarIcon, DataList, Heading, Icon, IconType, type IDataListItemProps } from '../../../../../core';
+import { addressUtils } from '../../../../utils';
 import { DaoAvatar } from '../../daoAvatar';
 
 export type IDaoDataListItemStructureProps = IDataListItemProps & {
@@ -27,10 +28,16 @@ export type IDaoDataListItemStructureProps = IDataListItemProps & {
      * The network on which the DAO operates.
      */
     network?: string;
+    /**
+     * Displays an external link icon and updates the information shown when set to true.
+     */
+    isExternal?: boolean;
 };
 
 export const DaoDataListItemStructure: React.FC<IDaoDataListItemStructureProps> = (props) => {
-    const { name, logoSrc, description, network, address, ens, ...otherProps } = props;
+    const { name, logoSrc, description, network, address, ens, isExternal, ...otherProps } = props;
+
+    const truncatedAddress = addressUtils.truncateAddress(address);
 
     return (
         <DataList.Item className="grid gap-y-3 py-4 md:gap-y-4 md:py-6" {...otherProps}>
@@ -40,15 +47,18 @@ export const DaoDataListItemStructure: React.FC<IDaoDataListItemStructureProps>
                         {name}
                     </Heading>
                     <Heading size="h5" as="h3" className="truncate">
-                        {ens ?? address}
+                        {ens ?? truncatedAddress}
                     </Heading>
                 </div>
                 <DaoAvatar name={name} src={logoSrc} size="md" responsiveSize={{ md: 'lg' }} />
             </div>
             <p className="line-clamp-2 text-base leading-normal text-neutral-500 md:text-lg">{description}</p>
-            <div className="mt-1 flex items-center gap-x-1 text-neutral-400 md:mt-0 md:gap-x-2">
-                <span className="text-sm capitalize leading-tight md:text-base">{network}</span>
-                <Icon icon={IconType.BLOCKCHAIN_BLOCKCHAIN} size="sm" responsiveSize={{ md: 'md' }} />
+            <div className="flex flex-row justify-between">
+                <div className="mt-1 flex items-center gap-x-1 text-neutral-400 md:mt-0 md:gap-x-2">
+                    <span className="text-sm capitalize leading-tight md:text-base">{network}</span>
+                    <Icon icon={IconType.BLOCKCHAIN_BLOCKCHAIN} size="sm" responsiveSize={{ md: 'md' }} />
+                </div>
+                {isExternal && <AvatarIcon size="sm" variant="primary" icon={IconType.LINK_EXTERNAL} />}
             </div>
         </DataList.Item>
     );