diff --git a/packages/components/assets/icons/chevron-down.svg b/packages/components/assets/icons/chevron-down.svg
new file mode 100644
index 0000000000..3d43c43bd8
--- /dev/null
+++ b/packages/components/assets/icons/chevron-down.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/components/assets/icons/chevron-up.svg b/packages/components/assets/icons/chevron-up.svg
new file mode 100644
index 0000000000..0c8f7faa4a
--- /dev/null
+++ b/packages/components/assets/icons/chevron-up.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/components/src/ButtonShowReplies/ButtonShowReplies.stories.tsx b/packages/components/src/ButtonShowReplies/ButtonShowReplies.stories.tsx
index 3a2a8a5ed8..ba35d08c19 100644
--- a/packages/components/src/ButtonShowReplies/ButtonShowReplies.stories.tsx
+++ b/packages/components/src/ButtonShowReplies/ButtonShowReplies.stories.tsx
@@ -17,7 +17,6 @@ export const Default: StoryFn = () => {
return (
setIsShowReplies(!isShowReplies)}
@@ -30,7 +29,6 @@ export const RepliesShowing: StoryFn = () => {
return (
null}
@@ -43,7 +41,6 @@ export const OneReply: StoryFn = () => {
return (
null}
@@ -54,7 +51,6 @@ export const OneReply: StoryFn = () => {
export const NoReplies: StoryFn = () => {
return (
null}
@@ -67,7 +63,6 @@ export const NoCreatorName: StoryFn = () => {
return (
null}
diff --git a/packages/components/src/ButtonShowReplies/ButtonShowReplies.test.tsx b/packages/components/src/ButtonShowReplies/ButtonShowReplies.test.tsx
index b2078ed0aa..43c2b171e5 100644
--- a/packages/components/src/ButtonShowReplies/ButtonShowReplies.test.tsx
+++ b/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(
,
)
- 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(
,
)
- 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()
- expect(getByText('1 reply to Zelda')).toBeInTheDocument()
+ expect(getByText('Show 1 reply')).toBeInTheDocument()
})
it('renders the number zero when expected', () => {
const { getByText } = render()
- expect(getByText('Reply to Link')).toBeInTheDocument()
+ expect(getByText('Reply')).toBeInTheDocument()
})
})
diff --git a/packages/components/src/ButtonShowReplies/ButtonShowReplies.tsx b/packages/components/src/ButtonShowReplies/ButtonShowReplies.tsx
index 275c2f816c..47fc47799c 100644
--- a/packages/components/src/ButtonShowReplies/ButtonShowReplies.tsx
+++ b/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 (
)
}
diff --git a/packages/components/src/CommentList/CommentList.test.tsx b/packages/components/src/CommentList/CommentList.test.tsx
index 8addabc284..f35b55bc89 100644
--- a/packages/components/src/CommentList/CommentList.test.tsx
+++ b/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()
})
})
diff --git a/packages/components/src/CommentList/CommentList.tsx b/packages/components/src/CommentList/CommentList.tsx
index 93bdca9fa1..cf8888224b 100644
--- a/packages/components/src/CommentList/CommentList.tsx
+++ b/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 (
setIsShowReplies(!isShowReplies)}
diff --git a/packages/components/src/ContentStatistics/ContentStatistics.test.tsx b/packages/components/src/ContentStatistics/ContentStatistics.test.tsx
index 45abe8c185..a361d99e73 100644
--- a/packages/components/src/ContentStatistics/ContentStatistics.test.tsx
+++ b/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'))
diff --git a/packages/components/src/DiscussionContainer/DiscussionContainer.test.tsx b/packages/components/src/DiscussionContainer/DiscussionContainer.test.tsx
index d78b6d6361..8dd8c24107 100644
--- a/packages/components/src/DiscussionContainer/DiscussionContainer.test.tsx
+++ b/packages/components/src/DiscussionContainer/DiscussionContainer.test.tsx
@@ -19,24 +19,19 @@ describe('DiscussionContainer', () => {
it('allows replying to a comment', async () => {
const screen = 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)
})
diff --git a/packages/components/src/Icon/Icon.tsx b/packages/components/src/Icon/Icon.tsx
index 93211b86bd..ce02b23bc8 100644
--- a/packages/components/src/Icon/Icon.tsx
+++ b/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: ,
- 'chevron-down': ,
+ 'chevron-down': iconMap.chevronDown,
'chevron-left': iconMap.chevronLeft,
'chevron-right': iconMap.chevronRight,
- 'chevron-up': ,
+ 'chevron-up': iconMap.chevronUp,
close: iconMap.close,
delete: iconMap.delete,
difficulty: ,
@@ -179,6 +177,9 @@ export const Icon = (props: Props) => {
'& svg': {
fontSize: definedSize,
},
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
...sx,
}}
size={definedSize}
diff --git a/packages/components/src/Icon/svgs.tsx b/packages/components/src/Icon/svgs.tsx
index 183a6ca6d5..9a15189e5e 100644
--- a/packages/components/src/Icon/svgs.tsx
+++ b/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: ,
account: ,
bazar: ,
+ chevronDown: ,
chevronLeft: ,
chevronRight: ,
+ chevronUp: ,
close: ,
comment: ,
contact: ,