diff --git a/CHANGELOG.md b/CHANGELOG.md index 2c895d903..f48525ddd 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/components/headers/headerDao.stories.tsx b/src/components/headers/headerDao.stories.tsx index a76e22ec1..ec955cee3 100644 --- a/src/components/headers/headerDao.stories.tsx +++ b/src/components/headers/headerDao.stories.tsx @@ -23,6 +23,8 @@ Dao.args = { translation: { readMore: 'Read more', readLess: 'Read less', + follow: 'follow', + following: 'following', }, links: [ { diff --git a/src/components/headers/headerDao.tsx b/src/components/headers/headerDao.tsx index d32b8750e..0c451ad96 100644 --- a/src/components/headers/headerDao.tsx +++ b/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,7 +28,7 @@ export type HeaderDaoProps = { created_at: string; daoChain: string; daoType: string; - favorited?: boolean; + following?: boolean; links?: Array<{ label: string; href: string; @@ -38,6 +36,8 @@ export type HeaderDaoProps = { translation?: { readMore: string; readLess: string; + follow: string; + following: string; }; onCopy?: (input: string) => void; onFavoriteClick?: (e: React.MouseEvent) => void; @@ -57,12 +57,14 @@ export const HeaderDao: React.FC = ({ 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 = ({ {shouldClamp && ( , + } + : { + label: labels.readMore, + iconRight: , + })} className="ft-text-base" onClick={() => setShowAll((prevState) => !prevState)} /> @@ -221,12 +227,14 @@ export const HeaderDao: React.FC = ({ }))} /> )} - : } + , label: labels.following } + : { label: labels.follow })} />