feat(TMD-724): comment count button experiment

packages/article-comments/__tests__/web/__snapshots__/shared.web.test.js.snap

@@ -5,11 +5,19 @@ exports[`Render comments label, when comments are loaded 1`] = `
   .c0 {
   margin-left: auto;
   margin-right: auto;
+  -webkit-scroll-margin-top: 170px;
+  -moz-scroll-margin-top: 170px;
+  -ms-scroll-margin-top: 170px;
+  scroll-margin-top: 170px;
 }
 
 @media (min-width:768px) {
   .c0 {
     width: 80.8%;
+    -webkit-scroll-margin-top: 130px;
+    -moz-scroll-margin-top: 130px;
+    -ms-scroll-margin-top: 130px;
+    scroll-margin-top: 130px;
   }
 }
 
@@ -148,11 +156,19 @@ exports[`User States enabled comments 1`] = `
   .c0 {
   margin-left: auto;
   margin-right: auto;
+  -webkit-scroll-margin-top: 170px;
+  -moz-scroll-margin-top: 170px;
+  -ms-scroll-margin-top: 170px;
+  scroll-margin-top: 170px;
 }
 
 @media (min-width:768px) {
   .c0 {
     width: 80.8%;
+    -webkit-scroll-margin-top: 130px;
+    -moz-scroll-margin-top: 130px;
+    -ms-scroll-margin-top: 130px;
+    scroll-margin-top: 130px;
   }
 }
 
@@ -186,11 +202,19 @@ exports[`User States uses com host when received 1`] = `
   .c0 {
   margin-left: auto;
   margin-right: auto;
+  -webkit-scroll-margin-top: 170px;
+  -moz-scroll-margin-top: 170px;
+  -ms-scroll-margin-top: 170px;
+  scroll-margin-top: 170px;
 }
 
 @media (min-width:768px) {
   .c0 {
     width: 80.8%;
+    -webkit-scroll-margin-top: 130px;
+    -moz-scroll-margin-top: 130px;
+    -ms-scroll-margin-top: 130px;
+    scroll-margin-top: 130px;
   }
 }
 
@@ -224,6 +248,10 @@ exports[`disabled comments 1`] = `
   .c0 {
   margin-left: auto;
   margin-right: auto;
+  -webkit-scroll-margin-top: 170px;
+  -moz-scroll-margin-top: 170px;
+  -ms-scroll-margin-top: 170px;
+  scroll-margin-top: 170px;
 }
 
 .c2 {
@@ -267,6 +295,10 @@ exports[`disabled comments 1`] = `
 @media (min-width:768px) {
   .c0 {
     width: 80.8%;
+    -webkit-scroll-margin-top: 130px;
+    -moz-scroll-margin-top: 130px;
+    -ms-scroll-margin-top: 130px;
+    scroll-margin-top: 130px;
   }
 }
 
@@ -306,11 +338,19 @@ exports[`single comment 1`] = `
   .c0 {
   margin-left: auto;
   margin-right: auto;
+  -webkit-scroll-margin-top: 170px;
+  -moz-scroll-margin-top: 170px;
+  -ms-scroll-margin-top: 170px;
+  scroll-margin-top: 170px;
 }
 
 @media (min-width:768px) {
   .c0 {
     width: 80.8%;
+    -webkit-scroll-margin-top: 130px;
+    -moz-scroll-margin-top: 130px;
+    -ms-scroll-margin-top: 130px;
+    scroll-margin-top: 130px;
   }
 }
 
@@ -360,11 +400,19 @@ exports[`zero comments 1`] = `
   .c0 {
   margin-left: auto;
   margin-right: auto;
+  -webkit-scroll-margin-top: 170px;
+  -moz-scroll-margin-top: 170px;
+  -ms-scroll-margin-top: 170px;
+  scroll-margin-top: 170px;
 }
 
 @media (min-width:768px) {
   .c0 {
     width: 80.8%;
+    -webkit-scroll-margin-top: 130px;
+    -moz-scroll-margin-top: 130px;
+    -ms-scroll-margin-top: 130px;
+    scroll-margin-top: 130px;
   }
 }
 

packages/article-comments/src/styles/responsive.js

@@ -11,8 +11,11 @@ export const CommentContainer = styled.div`
   margin-left: auto;
   margin-right: auto;
 
+  scroll-margin-top: 170px;
+
   @media (min-width: ${breakpoints.medium}px) {
     width: 80.8%;
+    scroll-margin-top: 130px;
   }
 
   @media (min-width: ${breakpoints.wide}px) {

packages/article-extras/src/article-extras.js

@@ -40,6 +40,7 @@ const ArticleExtras = ({
   topics,
   isSharingSavingEnabled,
   isCommentEnabled,
+  commentCount,
   storefrontConfig,
   breadcrumbs,
   domainSpecificUrl,
@@ -112,6 +113,7 @@ const ArticleExtras = ({
                   onShareOnEmail={() => {}}
                   savingEnabled={savingEnabled}
                   sharingEnabled={sharingEnabled}
+                  commentCount={commentCount}
                 />
               </ShareAndSaveContainer>
             )}
@@ -150,6 +152,7 @@ ArticleExtras.propTypes = {
   sharingEnabled: PropTypes.bool.isRequired,
   isSharingSavingEnabled: PropTypes.bool,
   isCommentEnabled: PropTypes.bool,
+  commentCount: PropTypes.number,
   storefrontConfig: PropTypes.string.isRequired,
   breadcrumbs: PropTypes.arrayOf(PropTypes.shape({})),
   domainSpecificUrl: PropTypes.string.isRequired,
@@ -161,6 +164,7 @@ ArticleExtras.defaultProps = {
   topics: null,
   isSharingSavingEnabled: true,
   isCommentEnabled: true,
+  commentCount: 0,
   breadcrumbs: []
 };
 

packages/article-skeleton/src/article-skeleton.js

@@ -88,6 +88,7 @@ const ArticleSkeleton = ({
     isSavingEnabled,
     isSharingEnabled,
     isCommentEnabled,
+    commentCount,
     isEntitlementFeatureEnabled
   } = article;
 
@@ -428,6 +429,7 @@ const ArticleSkeleton = ({
                       topics={topics}
                       isSharingSavingEnabled={isSharingSavingEnabled}
                       isCommentEnabled={isCommentEnabled}
+                      commentCount={commentCount}
                       storefrontConfig={storefrontConfig}
                       breadcrumbs={breadcrumbs}
                       domainSpecificUrl={domainSpecificUrl}

packages/save-and-share-bar/.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": ["@times-components/thetimes"]
+  "extends": ["@times-components/thetimes"],
+  "env": {
+    "browser": true,
+    "node": true
+  }
 }

packages/save-and-share-bar/__tests__/web/__snapshots__/save-and-share-bar.test.js.snap

@@ -33,7 +33,7 @@ exports[`save and share bar component email icon when tokenising with loading st
 
 exports[`save and share bar component save and share bar renders correctly when logged in 1`] = `
 <div
-  className="styled__SaveAndShareBarContainer-qkwc0r-0 ipJsvA"
+  className="styled__SaveAndShareBarContainer-qkwc0r-0 hgOtsW"
   data-testid="save-and-share-bar"
 >
   <div
@@ -210,7 +210,7 @@ exports[`save and share bar component save and share bar renders correctly when
 
 exports[`save and share bar component save and share bar renders correctly when not logged in 1`] = `
 <div
-  className="styled__SaveAndShareBarContainer-qkwc0r-0 ipJsvA"
+  className="styled__SaveAndShareBarContainer-qkwc0r-0 hgOtsW"
   data-testid="save-and-share-bar"
 >
   <div

packages/save-and-share-bar/src/assets/comment-icon.js

@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const CommentIcon = ({ height, width }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    style={{
+      fill: "rgba(0, 0, 0, 1)",
+      transform: "scaleX(-1)"
+    }}
+  >
+    <path d="M20 2H4c-1.103 0-2 .897-2 2v18l5.333-4H20c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 14H6.667L4 18V4h16v12z" />
+  </svg>
+);
+
+CommentIcon.propTypes = {
+  height: PropTypes.number,
+  width: PropTypes.number
+};
+
+CommentIcon.defaultProps = {
+  height: 16,
+  width: 16
+};
+
+export default CommentIcon;

packages/save-and-share-bar/src/components/comment-button.js

@@ -0,0 +1,67 @@
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import { IconActivityIndicator } from "@times-components/icons";
+import {
+  IconActivityIndicatorContainer,
+  OutlineButton,
+  CommentsLink
+} from "../styled";
+import CommentIcon from "../assets/comment-icon";
+
+const CommentButton = ({ commentCount }) => {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [showCommentButton, setShowCommentButton] = React.useState(false);
+
+  useEffect(
+    () => {
+      if (window.sessionStorage.getItem("showCommentButton") === "true") {
+        if (commentCount && commentCount > 30) {
+          setShowCommentButton(true);
+        }
+      }
+      // Arbitrary loading time to allow iframe to load before allowing
+      // the user to scroll to comments section
+      setTimeout(() => setIsLoading(false), 3000);
+    },
+    [commentCount]
+  );
+
+  if (!showCommentButton) {
+    return null;
+  }
+
+  return (
+    <CommentsLink
+      href="#comments-container"
+      isLoading={isLoading}
+      onClick={e => {
+        e.preventDefault();
+        const commentsContainer = document.getElementById("comments-container");
+        if (commentsContainer) {
+          commentsContainer.scrollIntoView({
+            behavior: "smooth"
+          });
+        }
+      }}
+    >
+      <OutlineButton isLoading={isLoading}>
+        {isLoading && (
+          <IconActivityIndicatorContainer>
+            <IconActivityIndicator />
+          </IconActivityIndicatorContainer>
+        )}
+        <div className="content">
+          <CommentIcon height={14} width={14} />
+          <span>Comment</span>
+          <span>{commentCount.toLocaleString()}</span>
+        </div>
+      </OutlineButton>
+    </CommentsLink>
+  );
+};
+
+CommentButton.propTypes = {
+  commentCount: PropTypes.number.isRequired
+};
+
+export default React.memo(CommentButton);

packages/save-and-share-bar/src/save-and-share-bar.js

@@ -29,6 +29,7 @@ import EmailShare from "./components/email-share";
 import SaveButton from "./components/save-button";
 import { ShareItem, ShareItemLabel } from "./components/share-item";
 import ShareIcon from "./assets/share-icon";
+import CommentButton from "./components/comment-button";
 
 function SaveAndShareBar(props) {
   const {
@@ -38,7 +39,8 @@ function SaveAndShareBar(props) {
     sharingEnabled,
     onShareOnFB,
     onShareOnTwitter,
-    isPreviewMode
+    isPreviewMode,
+    commentCount
   } = props;
 
   const [popoverOpen, setPopoverOpen] = React.useState(false);
@@ -233,6 +235,7 @@ function SaveAndShareBar(props) {
               </SaveStar>
             </div>
           )}
+          <CommentButton commentCount={commentCount} />
         </>
       ) : null}
     </SaveAndShareBarContainer>
@@ -250,6 +253,7 @@ SaveAndShareBar.propTypes = {
   onShareOnTwitter: PropTypes.func,
   savingEnabled: PropTypes.bool.isRequired,
   sharingEnabled: PropTypes.bool.isRequired,
+  commentCount: PropTypes.number,
   isPreviewMode: PropTypes.bool,
   hostName: PropTypes.string.isRequired
 };
@@ -260,7 +264,8 @@ SaveAndShareBar.defaultProps = {
   onShareOnTwitter: () => {},
   onShareEmail: () => {},
   getTokenisedShareUrl: getTokenisedArticleUrlApi,
-  isPreviewMode: (PropTypes.bool = false)
+  isPreviewMode: (PropTypes.bool = false),
+  commentCount: (PropTypes.number = 0)
 };
 
 export default withTrackEvents(SaveAndShareBar);

packages/save-and-share-bar/src/styled.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 export const SaveAndShareBarContainer = styled.div`
   display: flex;
   align-items: center;
-  gap: 24px;
+  gap: 16px;
   height: 100%;
 `;
 
@@ -183,3 +183,30 @@ export const EmailSpinnerContainer = styled.div`
     border-width: 0.15em;
   }
 `;
+
+export const CommentsLink = styled.a`
+  all: unset;
+
+  span:nth-of-type(1) {
+    display: none;
+  }
+  span:nth-of-type(2) {
+    color: #333333;
+  }
+
+  @media (min-width: 768px) {
+    span:nth-of-type(1) {
+      display: block;
+    }
+    span:nth-of-type(2) {
+      color: #696969;
+    }
+  }
+
+  div.content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    ${({ isLoading }) => isLoading && "opacity: 0"};
+  }
+`;