feat(threaded-replies): Create RepliesToggle component (#3294)

* feat(threaded-replies): Create RepliesToggle component

* feat(threaded-replies): Add tests

* feat(threaded-replies): Add stylesheet

* feat(threaded-replies): Update test remove loading prop

* feat(threaded-replies): Remove alwaysExpanded prop

Author: JChan106

i18n/en-US.properties

@@ -176,10 +176,14 @@ be.contentSidebar.activityFeed.comment.commentPostedFullDateTime = {time, date,
 be.contentSidebar.activityFeed.comment.commentResolveMenuItem = Resolve
 # Text to show on menu item to unresolve the comment
 be.contentSidebar.activityFeed.comment.commentUnresolveMenuItem = Unresolve
+# Text to show to hide more replies of comment or annotation
+be.contentSidebar.activityFeed.comment.hideReplies = Hide replies
 # Text to show on button to start replying to comment
 be.contentSidebar.activityFeed.comment.reply = Reply
 # Text to show on reply form input placeholder
 be.contentSidebar.activityFeed.comment.replyInThread = Reply in thread
+# Text to show to get more replies of comment or annotation
+be.contentSidebar.activityFeed.comment.showReplies = See {repliesToLoadCount, plural, one {# reply} other {# replies}}
 # Placeholder for approvers input
 be.contentSidebar.activityFeed.commentForm.approvalAddAssignee = Add an assignee
 # Label for checkbox to add approvers to a comment

src/elements/content-sidebar/activity-feed/comment/RepliesToggle.js

@@ -0,0 +1,41 @@
+// @flow
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import messages from './messages';
+import PlainButton from '../../../../components/plain-button';
+
+import './RepliesToggle.scss';
+
+type Props = {
+    onHideReplies: (index: number) => void,
+    onShowReplies: () => void,
+    repliesShownCount: number,
+    repliesTotalCount: number,
+};
+
+const RepliesToggle = ({ onShowReplies, onHideReplies, repliesShownCount, repliesTotalCount }: Props) => {
+    if (repliesTotalCount <= 1) {
+        return null;
+    }
+
+    const hasMoreRepliesToShow = repliesTotalCount > repliesShownCount;
+    const toggleMessage = hasMoreRepliesToShow ? messages.showReplies : messages.hideReplies;
+    const repliesToLoadCount = Math.max(repliesTotalCount - repliesShownCount, 0);
+
+    const handleToggle = () => {
+        if (hasMoreRepliesToShow) {
+            onShowReplies();
+        } else if (repliesShownCount) {
+            onHideReplies(repliesShownCount - 1);
+        }
+    };
+
+    return (
+        <PlainButton className="bcs-RepliesToggle" onClick={handleToggle} type="button">
+            <FormattedMessage values={{ repliesToLoadCount }} {...toggleMessage} />
+        </PlainButton>
+    );
+};
+
+export default RepliesToggle;

src/elements/content-sidebar/activity-feed/comment/RepliesToggle.scss

@@ -0,0 +1,7 @@
+@import '../../../common/variables';
+
+.bcs-RepliesToggle {
+    margin-bottom: $bdl-grid-unit * 4;
+    color: $bdl-box-blue;
+    font-weight: bold;
+}

src/elements/content-sidebar/activity-feed/comment/__tests__/RepliesToggle.test.js

@@ -0,0 +1,82 @@
+// @flow
+
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { fireEvent, render, screen } from '@testing-library/react';
+import RepliesToggle from '../RepliesToggle';
+
+jest.mock('react-intl', () => ({
+    ...jest.requireActual('react-intl'),
+}));
+
+const showReplies = jest.fn();
+const hideReplies = jest.fn();
+const shownCount = 1;
+const totalCount = 9;
+
+const getWrapper = props =>
+    render(
+        <IntlProvider locale="en">
+            <RepliesToggle
+                id="123"
+                isRepliesLoading={false}
+                onShowReplies={showReplies}
+                onHideReplies={hideReplies}
+                repliesShownCount={shownCount}
+                repliesTotalCount={totalCount}
+                {...props}
+            />
+        </IntlProvider>,
+    );
+
+describe('elements/content-sidebar/ActivityFeed/comment/RepliesToggle', () => {
+    test('should correctly render show toggle', () => {
+        const countDifference = totalCount - 1;
+
+        getWrapper();
+
+        expect(screen.getByText(`See ${countDifference} replies`)).toBeVisible();
+        expect(screen.queryByText('Hide replies')).not.toBeInTheDocument();
+
+        fireEvent.click(screen.getByText(`See ${countDifference} replies`));
+
+        expect(showReplies).toBeCalledTimes(1);
+        expect(hideReplies).not.toBeCalled();
+    });
+
+    test.each`
+        repliesShownCount | repliesTotalCount
+        ${3}              | ${3}
+        ${3}              | ${2}
+    `(
+        `Should correctly render hide toggle when shown count is $repliesShownCount and total count is $repliesTotalCount`,
+        ({ repliesShownCount, repliesTotalCount }) => {
+            getWrapper({ repliesShownCount, repliesTotalCount });
+
+            expect(screen.getByText('Hide replies')).toBeVisible();
+            expect(screen.queryByText(`See ${repliesTotalCount - 1} replies`)).not.toBeInTheDocument();
+
+            fireEvent.click(screen.getByText(`Hide replies`));
+
+            expect(hideReplies).toBeCalledTimes(1);
+            expect(hideReplies).toBeCalledWith(repliesShownCount - 1);
+            expect(showReplies).not.toBeCalled();
+        },
+    );
+
+    test.each`
+        repliesShownCount | repliesTotalCount
+        ${3}              | ${1}
+        ${3}              | ${0}
+        ${1}              | ${0}
+        ${1}              | ${1}
+    `(
+        `Should not render toggle when shown count is $repliesShownCount and total count is $repliesTotalCount`,
+        ({ repliesShownCount, repliesTotalCount }) => {
+            getWrapper({ repliesShownCount, repliesTotalCount });
+
+            expect(screen.queryByText(`Hide replies`)).not.toBeInTheDocument();
+            expect(screen.queryByText(`See ${repliesTotalCount} replies`)).not.toBeInTheDocument();
+        },
+    );
+});

src/elements/content-sidebar/activity-feed/comment/messages.js

@@ -47,6 +47,16 @@ const messages = defineMessages({
         defaultMessage: 'Reply in thread',
         description: 'Text to show on reply form input placeholder',
     },
+    hideReplies: {
+        id: 'be.contentSidebar.activityFeed.comment.hideReplies',
+        defaultMessage: 'Hide replies',
+        description: 'Text to show to hide more replies of comment or annotation',
+    },
+    showReplies: {
+        id: 'be.contentSidebar.activityFeed.comment.showReplies',
+        defaultMessage: 'See {repliesToLoadCount, plural, one {# reply} other {# replies}}',
+        description: 'Text to show to get more replies of comment or annotation',
+    },
 });
 
 export default messages;