Feat: APP-2449 - DAO Header Following status

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+-   `HeaderDao` favorited indicator to labelled button
+-   `HeaderDao` description line clamp indicator icon
+
 ## [0.3.1] - 2023-10-12
 
 ### Changed

src/components/headers/headerDao.stories.tsx

@@ -23,6 +23,8 @@ Dao.args = {
     translation: {
         readMore: 'Read more',
         readLess: 'Read less',
+        follow: 'follow',
+        following: 'following',
     },
     links: [
         {

src/components/headers/headerDao.tsx

@@ -3,22 +3,20 @@ import { styled } from 'styled-components';
 import { useScreen } from '../../hooks';
 import { shortenAddress, shortenDaoUrl } from '../../utils';
 import { AvatarDao } from '../avatar';
-import { ButtonIcon, ButtonText } from '../button';
+import { ButtonText } from '../button';
 import { Dropdown } from '../dropdown';
-import {
-    IconBlock,
-    IconChevronDown,
-    IconCommunity,
-    IconCopy,
-    IconFavoriteDefault,
-    IconFavoriteSelected,
-    IconFlag,
-} from '../icons';
+import { IconBlock, IconCheckmark, IconChevronDown, IconChevronUp, IconCommunity, IconCopy, IconFlag } from '../icons';
 import { Link } from '../link';
 import { ListItemLink } from '../listItem';
 
 const DEFAULT_LINES_SHOWN = 2;
 const DEFAULT_LINKS_SHOWN = 3;
+const DEFAULT_TRANSLATIONS: HeaderDaoProps['translation'] = {
+    follow: 'Follow',
+    following: 'Following',
+    readLess: 'Read less',
+    readMore: 'Read more',
+};
 
 export type HeaderDaoProps = {
     daoName: string;
@@ -30,14 +28,16 @@ export type HeaderDaoProps = {
     created_at: string;
     daoChain: string;
     daoType: string;
-    favorited?: boolean;
+    following?: boolean;
     links?: Array<{
         label: string;
         href: string;
     }>;
     translation?: {
         readMore: string;
         readLess: string;
+        follow: string;
+        following: string;
     };
     onCopy?: (input: string) => void;
     onFavoriteClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -57,12 +57,14 @@ export const HeaderDao: React.FC<HeaderDaoProps> = ({
     created_at,
     daoChain,
     daoType,
-    favorited = false,
+    following = false,
     links = [],
-    translation,
+    translation = {},
     onCopy,
     onFavoriteClick,
 }) => {
+    const labels = { ...DEFAULT_TRANSLATIONS, ...translation };
+
     const [showAll, setShowAll] = useState(true);
     const [shouldClamp, setShouldClamp] = useState(false);
 
@@ -156,11 +158,15 @@ export const HeaderDao: React.FC<HeaderDaoProps> = ({
                         </Description>
                         {shouldClamp && (
                             <Link
-                                label={
-                                    showAll
-                                        ? `${translation?.readLess ?? 'Read less'} ↑`
-                                        : `${translation?.readMore ?? 'Read more'} ↓`
-                                }
+                                {...(showAll
+                                    ? {
+                                          label: labels.readLess,
+                                          iconRight: <IconChevronUp />,
+                                      }
+                                    : {
+                                          label: labels.readMore,
+                                          iconRight: <IconChevronDown />,
+                                      })}
                                 className="ft-text-base"
                                 onClick={() => setShowAll((prevState) => !prevState)}
                             />
@@ -221,12 +227,14 @@ export const HeaderDao: React.FC<HeaderDaoProps> = ({
                                 }))}
                             />
                         )}
-                        <ButtonIcon
-                            icon={favorited ? <IconFavoriteSelected /> : <IconFavoriteDefault />}
+                        <ButtonText
                             onClick={onFavoriteClick}
                             mode="secondary"
                             size="large"
                             bgWhite
+                            {...(following
+                                ? { iconLeft: <IconCheckmark />, label: labels.following }
+                                : { label: labels.follow })}
                         />
                     </ActionContainer>
                 </ActionWrapper>