feat: update reply to comment button text and icon

packages/components/src/ButtonShowReplies/ButtonShowReplies.stories.tsx

@@ -17,7 +17,6 @@ export const Default: StoryFn<typeof ButtonShowReplies> = () => {
 
   return (
     <ButtonShowReplies
-      creatorName="Jeff"
       replies={replies}
       isShowReplies={isShowReplies}
       setIsShowReplies={() => setIsShowReplies(!isShowReplies)}
@@ -30,7 +29,6 @@ export const RepliesShowing: StoryFn<typeof ButtonShowReplies> = () => {
 
   return (
     <ButtonShowReplies
-      creatorName="Annabeth"
       isShowReplies={true}
       replies={replies}
       setIsShowReplies={() => null}
@@ -43,7 +41,6 @@ export const OneReply: StoryFn<typeof ButtonShowReplies> = () => {
 
   return (
     <ButtonShowReplies
-      creatorName="Zelda"
       isShowReplies={false}
       replies={replies}
       setIsShowReplies={() => null}
@@ -54,7 +51,6 @@ export const OneReply: StoryFn<typeof ButtonShowReplies> = () => {
 export const NoReplies: StoryFn<typeof ButtonShowReplies> = () => {
   return (
     <ButtonShowReplies
-      creatorName="Link"
       isShowReplies={false}
       replies={[]}
       setIsShowReplies={() => null}
@@ -67,7 +63,6 @@ export const NoCreatorName: StoryFn<typeof ButtonShowReplies> = () => {
 
   return (
     <ButtonShowReplies
-      creatorName={null}
       isShowReplies={false}
       replies={replies}
       setIsShowReplies={() => null}

packages/components/src/ButtonShowReplies/ButtonShowReplies.test.tsx

@@ -14,33 +14,33 @@ import type { Props } from './ButtonShowReplies'
 
 describe('ButtonShowReplies', () => {
   it('renders the button text', () => {
-    const { getByAltText, getByText } = render(
+    const { getByTestId, getByText } = render(
       <Default {...(Default.args as Props)} />,
     )
-    const icon = getByAltText('icon')
+    const icon = getByTestId('show-replies')
 
-    expect(getByText('7 replies to Jeff')).toBeInTheDocument()
-    expect(icon.getAttribute('src')).toContain('arrow-down')
+    expect(getByText('Show 7 replies')).toBeInTheDocument()
+    expect(icon.getAttribute('icon')).toContain('chevron-down')
   })
 
   it('renders the button text', () => {
-    const { getByAltText } = render(
+    const { getByTestId } = render(
       <RepliesShowing {...(RepliesShowing.args as Props)} />,
     )
-    const icon = getByAltText('icon')
+    const icon = getByTestId('show-replies')
 
-    expect(icon.getAttribute('src')).toContain('arrow-up')
+    expect(icon.getAttribute('icon')).toContain('chevron-up')
   })
 
   it('renders the word reply when expected', () => {
     const { getByText } = render(<OneReply {...(OneReply.args as Props)} />)
 
-    expect(getByText('1 reply to Zelda')).toBeInTheDocument()
+    expect(getByText('Show 1 reply')).toBeInTheDocument()
   })
 
   it('renders the number zero when expected', () => {
     const { getByText } = render(<NoReplies {...(NoReplies.args as Props)} />)
 
-    expect(getByText('Reply to Link')).toBeInTheDocument()
+    expect(getByText('Reply')).toBeInTheDocument()
   })
 })

packages/components/src/ButtonShowReplies/ButtonShowReplies.tsx

@@ -4,31 +4,37 @@ import { nonDeletedCommentsCount } from '../DiscussionTitle/DiscussionTitle'
 import type { IComment } from '../CommentItem/types'
 
 export interface Props {
-  creatorName: string | null
   isShowReplies: boolean
   replies: IComment[]
   setIsShowReplies: () => void
 }
 
 export const ButtonShowReplies = (props: Props) => {
-  const { creatorName, isShowReplies, replies, setIsShowReplies } = props
+  const { isShowReplies, replies, setIsShowReplies } = props
 
   const count = nonDeletedCommentsCount(replies)
-  const icon = isShowReplies ? 'arrow-full-up' : 'arrow-full-down'
+  const icon = isShowReplies ? 'chevron-up' : 'chevron-down'
 
-  const text = count ? `${count} ${count === 1 ? 'reply' : 'replies'}` : `Reply`
+  const text = count
+    ? isShowReplies
+      ? `Hide ${count} ${count === 1 ? 'reply' : 'replies'}`
+      : `Show ${count} ${count === 1 ? 'reply' : 'replies'}`
+    : isShowReplies
+      ? `Hide`
+      : `Reply`
 
   return (
     <Button
       type="button"
       data-cy="show-replies"
+      data-testid="show-replies"
       icon={icon}
       onClick={setIsShowReplies}
       sx={{ alignSelf: 'flex-start' }}
       variant="subtle"
       small
     >
-      {text} {creatorName && ` to ${creatorName}`}
+      {text}
     </Button>
   )
 }

packages/components/src/CommentList/CommentList.test.tsx

@@ -123,11 +123,10 @@ describe('CommentList', () => {
       />,
     )
 
-    fireEvent.click(getByText(`1 reply to ${comment.creatorName}`))
+    fireEvent.click(getByText(`Show 1 reply`))
 
-    expect(() =>
-      getAllByText(`1 reply to ${visibleReply.creatorName}`),
-    ).toThrow()
+    expect(() => getAllByText(`Show 1 reply`)).toThrow()
+    expect(() => getAllByText(`Hide 1 reply`)).not.toThrow()
   })
 
   it('does not show reply once max depth is reached', () => {
@@ -149,10 +148,9 @@ describe('CommentList', () => {
       />,
     )
 
-    fireEvent.click(getByText(`1 reply to ${comment.creatorName}`))
+    fireEvent.click(getByText(`Show 1 reply`))
 
-    expect(() =>
-      getAllByText(`1 reply to ${visibleReply.creatorName}`),
-    ).toThrow()
+    expect(() => getAllByText(`Show 1 reply`)).toThrow()
+    expect(() => getAllByText(`Hide 1 reply`)).not.toThrow()
   })
 })

packages/components/src/CommentList/CommentList.tsx

@@ -49,7 +49,7 @@ export const CommentContainer = (props: IPropsCommentContainer) => {
     maxLength,
     onSubmitReply,
   } = props
-  const { _id, _deleted, creatorName, replies } = comment
+  const { _id, _deleted, replies } = comment
 
   const replyArrow = () => {
     return (
@@ -67,7 +67,6 @@ export const CommentContainer = (props: IPropsCommentContainer) => {
   const repliesButton = () => {
     return (
       <ButtonShowReplies
-        creatorName={!_deleted ? creatorName : null}
         isShowReplies={isShowReplies}
         replies={replies || []}
         setIsShowReplies={() => setIsShowReplies(!isShowReplies)}

packages/components/src/ContentStatistics/ContentStatistics.test.tsx

@@ -16,11 +16,12 @@ describe('ContentStatistics', () => {
       '/assets/icons/icon-star-default.svg',
       '/assets/icons/icon-comment.svg',
       '/assets/icons/icon-update.svg',
+      '/assets/icons/chevron-down.svg',
     ]
 
     const icons = getAllByAltText('icon')
 
-    expect(icons.length).toBe(4)
+    expect(icons.length).toBe(5)
 
     for (const icon of icons) {
       expect(expectedIcons).toContain(icon.getAttribute('src'))

packages/components/src/DiscussionContainer/DiscussionContainer.test.tsx

@@ -19,24 +19,19 @@ describe('DiscussionContainer', () => {
 
   it('allows replying to a comment', async () => {
     const screen = render(<WithReplies.render />)
-
     // Show reply form
-    await waitFor(() => {
-      const replyButton = screen.getAllByText('2 replies to', {
-        exact: false,
-      })[0]
+    act(() => {
+      const replyButton = screen.getByText('Show 2 replies', { exact: false })
       expect(replyButton).toBeInTheDocument()
-
       fireEvent.click(replyButton)
-
+    })
+    await waitFor(() => {
       expect(screen.getAllByText('Leave a reply')).toHaveLength(1)
     })
 
     // Hide reply form
     act(() => {
-      const replyButton = screen.getAllByText('2 replies to', {
-        exact: false,
-      })[0]
+      const replyButton = screen.getAllByText('Hide 2 replies')[0]
       fireEvent.click(replyButton)
     })
     await waitFor(() => {
@@ -45,16 +40,13 @@ describe('DiscussionContainer', () => {
       }).toThrow()
     })
 
-    const SecondReplyButton = screen.getAllByText('Reply to', {
-      exact: false,
-    })[0]
+    const SecondReplyButton = screen.getAllByText('Reply')[0]
     expect(SecondReplyButton).toBeInTheDocument()
 
     // Show reply form
     act(() => {
       fireEvent.click(SecondReplyButton)
     })
-
     await waitFor(() => {
       expect(screen.getAllByText('Leave a reply')).toHaveLength(1)
     })

packages/components/src/Icon/Icon.tsx

@@ -1,8 +1,6 @@
 /** @jsxImportSource theme-ui */
 import styled from '@emotion/styled'
 import { IconContext } from '@react-icons/all-files'
-import { FaChevronDown } from '@react-icons/all-files/fa/FaChevronDown'
-import { FaChevronUp } from '@react-icons/all-files/fa/FaChevronUp'
 import { FaFacebookF } from '@react-icons/all-files/fa/FaFacebookF'
 import { FaInstagram } from '@react-icons/all-files/fa/FaInstagram'
 import { FaSignal } from '@react-icons/all-files/fa/FaSignal'
@@ -67,10 +65,10 @@ export const glyphs: IGlyphs = {
   comment: iconMap.comment,
   contact: iconMap.contact,
   check: <MdCheck />,
-  'chevron-down': <FaChevronDown />,
+  'chevron-down': iconMap.chevronDown,
   'chevron-left': iconMap.chevronLeft,
   'chevron-right': iconMap.chevronRight,
-  'chevron-up': <FaChevronUp />,
+  'chevron-up': iconMap.chevronUp,
   close: iconMap.close,
   delete: iconMap.delete,
   difficulty: <FaSignal />,
@@ -179,6 +177,9 @@ export const Icon = (props: Props) => {
         '& svg': {
           fontSize: definedSize,
         },
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
         ...sx,
       }}
       size={definedSize}

packages/components/src/Icon/svgs.tsx

@@ -1,7 +1,9 @@
 import accountSVG from '../../assets/icons/account.svg'
 import arrowCurvedBottomRightSVG from '../../assets/icons/arrow-curved-bottom-right.svg'
+import chevronDownSVG from '../../assets/icons/chevron-down.svg'
 import chevronLeftSVG from '../../assets/icons/chevron-left.svg'
 import chevronRightSVG from '../../assets/icons/chevron-right.svg'
+import chevronUpSVG from '../../assets/icons/chevron-up.svg'
 import contactSVG from '../../assets/icons/contact.svg'
 import closeSVG from '../../assets/icons/cross-close.svg'
 import deleteSVG from '../../assets/icons/delete.svg'
@@ -56,8 +58,10 @@ export const iconMap = {
   arrowFullUp: <ImageIcon src={arrowFullUpSVG} />,
   account: <ImageIcon src={accountSVG} />,
   bazar: <ImageIcon src={bazarSVG} />,
+  chevronDown: <ImageIcon src={chevronDownSVG} />,
   chevronLeft: <ImageIcon src={chevronLeftSVG} />,
   chevronRight: <ImageIcon src={chevronRightSVG} />,
+  chevronUp: <ImageIcon src={chevronUpSVG} />,
   close: <ImageIcon src={closeSVG} />,
   comment: <ImageIcon src={commentSVG} />,
   contact: <ImageIcon src={contactSVG} />,