From a45d011f33b3035931a94769db645b678b228bcc Mon Sep 17 00:00:00 2001 From: byhow Date: Mon, 20 May 2024 01:31:00 -0700 Subject: [PATCH 1/4] feat(taglist): update text hashtag symbol to actual icon --- src/components/Tag/index.tsx | 2 +- src/views/ArticleDetail/TagList/index.tsx | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx index d987994e49..f4b5273523 100644 --- a/src/components/Tag/index.tsx +++ b/src/components/Tag/index.tsx @@ -146,7 +146,7 @@ export const Tag = ({ const Inner = () => ( <> - # {tagName} + {tagName} {onRemoveTag && ( diff --git a/src/views/ArticleDetail/TagList/index.tsx b/src/views/ArticleDetail/TagList/index.tsx index 63356f2a7b..7961582e99 100644 --- a/src/views/ArticleDetail/TagList/index.tsx +++ b/src/views/ArticleDetail/TagList/index.tsx @@ -1,5 +1,6 @@ import gql from 'graphql-tag' +import { ReactComponent as IconHashTag } from '@/public/static/icons/24px/hashtag.svg' import { ReactComponent as IconMore } from '@/public/static/icons/24px/more.svg' import { TEST_ID } from '~/common/enums' import { analytics } from '~/common/utils' @@ -31,6 +32,10 @@ const TagList = ({ article }: { article: TagListArticleFragment }) => {
  • , + placement: 'right', + }} type="article" onClick={() => { analytics.trackEvent('click_button', { From 25a25677979dc428ac0e6effb456818eaff6805a Mon Sep 17 00:00:00 2001 From: byhow Date: Mon, 20 May 2024 15:27:57 -0700 Subject: [PATCH 2/4] feat(tag): move tag icon into tag component --- src/components/Tag/index.tsx | 3 +++ src/views/ArticleDetail/TagList/index.tsx | 5 ----- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx index f4b5273523..13fb3b8d35 100644 --- a/src/components/Tag/index.tsx +++ b/src/components/Tag/index.tsx @@ -3,6 +3,7 @@ import gql from 'graphql-tag' import Link from 'next/link' import { useIntl } from 'react-intl' +import { ReactComponent as IconHashTag } from '@/public/static/icons/24px/hashtag.svg' import { ReactComponent as IconTimes } from '@/public/static/icons/24px/times.svg' import { clampTag, toPath } from '~/common/utils' import { Icon, IconProps, TextIcon, TextIconProps } from '~/components' @@ -141,6 +142,8 @@ export const Tag = ({ textIconProps = { ...textIconProps, ...customTextIconProps, + icon: , + placement: 'right', } const Inner = () => ( diff --git a/src/views/ArticleDetail/TagList/index.tsx b/src/views/ArticleDetail/TagList/index.tsx index 7961582e99..63356f2a7b 100644 --- a/src/views/ArticleDetail/TagList/index.tsx +++ b/src/views/ArticleDetail/TagList/index.tsx @@ -1,6 +1,5 @@ import gql from 'graphql-tag' -import { ReactComponent as IconHashTag } from '@/public/static/icons/24px/hashtag.svg' import { ReactComponent as IconMore } from '@/public/static/icons/24px/more.svg' import { TEST_ID } from '~/common/enums' import { analytics } from '~/common/utils' @@ -32,10 +31,6 @@ const TagList = ({ article }: { article: TagListArticleFragment }) => {
  • , - placement: 'right', - }} type="article" onClick={() => { analytics.trackEvent('click_button', { From 2c16f838ea896978c79927b13240b48e24b1c45d Mon Sep 17 00:00:00 2001 From: byhow Date: Mon, 20 May 2024 21:05:12 -0700 Subject: [PATCH 3/4] fix(feed-test): flaky unit tests when multiple text elements are present --- src/components/TagDigest/Feed/Feed.test.tsx | 2 +- src/components/TagDigest/Feed/index.tsx | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/TagDigest/Feed/Feed.test.tsx b/src/components/TagDigest/Feed/Feed.test.tsx index a3b60706f6..764610a36e 100644 --- a/src/components/TagDigest/Feed/Feed.test.tsx +++ b/src/components/TagDigest/Feed/Feed.test.tsx @@ -15,7 +15,7 @@ describe('', () => { $digest.click() expect(mockRouter.asPath).toContain(MOCK_TAG.slug) - const $name = screen.getByText(MOCK_TAG.content) + const $name = screen.getAllByText(MOCK_TAG.content)[0] // duplicated items in the mock expect($name).toBeInTheDocument() const $articleCount = screen.getByText(MOCK_TAG.numArticles) diff --git a/src/components/TagDigest/Feed/index.tsx b/src/components/TagDigest/Feed/index.tsx index bc3d72fc98..5969925fcd 100644 --- a/src/components/TagDigest/Feed/index.tsx +++ b/src/components/TagDigest/Feed/index.tsx @@ -1,4 +1,3 @@ -import { VisuallyHidden } from '@reach/visually-hidden' import gql from 'graphql-tag' import Link from 'next/link' @@ -120,9 +119,6 @@ const Feed = ({ tag, ...cardProps }: TagDigestFeedProps) => { > - - {tag.content} - Date: Mon, 20 May 2024 21:13:03 -0700 Subject: [PATCH 4/4] test: add get all text and ignore duplicate on Sidebar as well --- src/components/TagDigest/Sidebar/Sidebar.test.tsx | 2 +- src/components/TagDigest/Sidebar/index.tsx | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/TagDigest/Sidebar/Sidebar.test.tsx b/src/components/TagDigest/Sidebar/Sidebar.test.tsx index 9baabbef82..e36b6e87d0 100644 --- a/src/components/TagDigest/Sidebar/Sidebar.test.tsx +++ b/src/components/TagDigest/Sidebar/Sidebar.test.tsx @@ -15,7 +15,7 @@ describe('', () => { $digest.click() expect(mockRouter.asPath).toContain(MOCK_TAG.slug) - const $name = screen.getByText(MOCK_TAG.content) + const $name = screen.getAllByText(MOCK_TAG.content)[0] // duplicated items in the mock expect($name).toBeInTheDocument() const $articleCount = screen.getByText(MOCK_TAG.numArticles) diff --git a/src/components/TagDigest/Sidebar/index.tsx b/src/components/TagDigest/Sidebar/index.tsx index a9450108ac..0ef87291b7 100644 --- a/src/components/TagDigest/Sidebar/index.tsx +++ b/src/components/TagDigest/Sidebar/index.tsx @@ -1,4 +1,3 @@ -import { VisuallyHidden } from '@reach/visually-hidden' import gql from 'graphql-tag' import Link from 'next/link' @@ -59,9 +58,6 @@ const Sidebar = ({ tag, ...cardProps }: TagDigestSidebarProps) => { > - - {tag.content} -