From b6d3e7631b9d76ebbcc9ee29dbf7bd674b3b6d44 Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Mon, 2 Sep 2024 12:39:44 +0100 Subject: [PATCH 01/19] feat: add comment count button --- .../src/assets/comment-icon.js | 29 +++++++++++++++++++ .../src/save-and-share-bar.js | 17 +++++++++-- packages/save-and-share-bar/src/styled.js | 4 +++ 3 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 packages/save-and-share-bar/src/assets/comment-icon.js diff --git a/packages/save-and-share-bar/src/assets/comment-icon.js b/packages/save-and-share-bar/src/assets/comment-icon.js new file mode 100644 index 00000000000..78692b6b1a6 --- /dev/null +++ b/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 }) => ( + + + +); + +CommentIcon.propTypes = { + height: PropTypes.number, + width: PropTypes.number +}; + +CommentIcon.defaultProps = { + height: 16, + width: 16 +}; + +export default CommentIcon; diff --git a/packages/save-and-share-bar/src/save-and-share-bar.js b/packages/save-and-share-bar/src/save-and-share-bar.js index 517c75b51e3..4196af1f034 100644 --- a/packages/save-and-share-bar/src/save-and-share-bar.js +++ b/packages/save-and-share-bar/src/save-and-share-bar.js @@ -22,13 +22,15 @@ import { Popover, PopoverHeader, PopoverContent, - CloseButton + CloseButton, + CommentsLink } from "./styled"; import CloseIcon from "./assets/close-icon"; 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 CommentIcon from "./assets/comment-icon"; function SaveAndShareBar(props) { const { @@ -38,7 +40,8 @@ function SaveAndShareBar(props) { sharingEnabled, onShareOnFB, onShareOnTwitter, - isPreviewMode + isPreviewMode, + commentCount } = props; const [popoverOpen, setPopoverOpen] = React.useState(false); @@ -233,6 +236,15 @@ function SaveAndShareBar(props) { )} + {commentCount && + commentCount > 30 && ( + + + + 1300 + + + )} ) : null} @@ -250,6 +262,7 @@ SaveAndShareBar.propTypes = { onShareOnTwitter: PropTypes.func, savingEnabled: PropTypes.bool.isRequired, sharingEnabled: PropTypes.bool.isRequired, + commentCount: PropTypes.number, isPreviewMode: PropTypes.bool, hostName: PropTypes.string.isRequired }; diff --git a/packages/save-and-share-bar/src/styled.js b/packages/save-and-share-bar/src/styled.js index 4d0350828ad..50efacc3df3 100644 --- a/packages/save-and-share-bar/src/styled.js +++ b/packages/save-and-share-bar/src/styled.js @@ -183,3 +183,7 @@ export const EmailSpinnerContainer = styled.div` border-width: 0.15em; } `; + +export const CommentsLink = styled.a` + all: unset; +`; From be32e3248368fd6e79a4cc6fa5770336ef0f1cb7 Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Mon, 2 Sep 2024 12:40:09 +0100 Subject: [PATCH 02/19] feat: pass commentCount data to component --- packages/article-extras/src/article-extras.js | 4 ++++ packages/article-skeleton/src/article-skeleton.js | 2 ++ 2 files changed, 6 insertions(+) diff --git a/packages/article-extras/src/article-extras.js b/packages/article-extras/src/article-extras.js index 4b03cb2d9bc..968f96f1075 100644 --- a/packages/article-extras/src/article-extras.js +++ b/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} /> )} @@ -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: [] }; diff --git a/packages/article-skeleton/src/article-skeleton.js b/packages/article-skeleton/src/article-skeleton.js index c70ae7380fb..2a9ceab2adf 100644 --- a/packages/article-skeleton/src/article-skeleton.js +++ b/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} From bab3924f1f723c0c5a7b4948dc2f46fe4220a0cb Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Mon, 2 Sep 2024 12:53:44 +0100 Subject: [PATCH 03/19] fix: linting --- packages/save-and-share-bar/src/save-and-share-bar.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/save-and-share-bar/src/save-and-share-bar.js b/packages/save-and-share-bar/src/save-and-share-bar.js index 4196af1f034..2b24eef848f 100644 --- a/packages/save-and-share-bar/src/save-and-share-bar.js +++ b/packages/save-and-share-bar/src/save-and-share-bar.js @@ -273,7 +273,8 @@ SaveAndShareBar.defaultProps = { onShareOnTwitter: () => {}, onShareEmail: () => {}, getTokenisedShareUrl: getTokenisedArticleUrlApi, - isPreviewMode: (PropTypes.bool = false) + isPreviewMode: (PropTypes.bool = false), + commentCount: (PropTypes.number = 0) }; export default withTrackEvents(SaveAndShareBar); From 3f2a0e06bceed2030ec55c2014d175a8d9633373 Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Mon, 2 Sep 2024 14:36:32 +0100 Subject: [PATCH 04/19] fix: tests --- packages/save-and-share-bar/src/save-and-share-bar.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/save-and-share-bar/src/save-and-share-bar.js b/packages/save-and-share-bar/src/save-and-share-bar.js index 2b24eef848f..59af41cfe77 100644 --- a/packages/save-and-share-bar/src/save-and-share-bar.js +++ b/packages/save-and-share-bar/src/save-and-share-bar.js @@ -84,6 +84,8 @@ function SaveAndShareBar(props) { ? barRef.current.getBoundingClientRect().bottom : windowHeight; + const showCommentButton = (commentCount && commentCount > 30) ? true : false; + // Position the popover at the top if the bar length is less than 400px from the bottom function getPosition() { const isLargeDevice = windowWidth && windowWidth > 449; @@ -236,8 +238,7 @@ function SaveAndShareBar(props) { )} - {commentCount && - commentCount > 30 && ( + {showCommentButton && ( From c27e5833cdffbc7d1f571cf5f7dab4eef57b11ec Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Mon, 2 Sep 2024 14:47:25 +0100 Subject: [PATCH 05/19] fix: linting --- .../save-and-share-bar/src/save-and-share-bar.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/save-and-share-bar/src/save-and-share-bar.js b/packages/save-and-share-bar/src/save-and-share-bar.js index 59af41cfe77..c686aecdc86 100644 --- a/packages/save-and-share-bar/src/save-and-share-bar.js +++ b/packages/save-and-share-bar/src/save-and-share-bar.js @@ -84,7 +84,7 @@ function SaveAndShareBar(props) { ? barRef.current.getBoundingClientRect().bottom : windowHeight; - const showCommentButton = (commentCount && commentCount > 30) ? true : false; + const showCommentButton = Boolean(commentCount && commentCount > 30); // Position the popover at the top if the bar length is less than 400px from the bottom function getPosition() { @@ -239,13 +239,13 @@ function SaveAndShareBar(props) { )} {showCommentButton && ( - - - - 1300 - - - )} + + + + 1300 + + + )} ) : null} From 6048ecedc8c6b8c979756f5754057e996b251c9f Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Mon, 2 Sep 2024 15:09:28 +0100 Subject: [PATCH 06/19] reorder imports --- packages/save-and-share-bar/src/save-and-share-bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/save-and-share-bar/src/save-and-share-bar.js b/packages/save-and-share-bar/src/save-and-share-bar.js index c686aecdc86..f7970262cc8 100644 --- a/packages/save-and-share-bar/src/save-and-share-bar.js +++ b/packages/save-and-share-bar/src/save-and-share-bar.js @@ -29,8 +29,8 @@ import CloseIcon from "./assets/close-icon"; 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 CommentIcon from "./assets/comment-icon"; +import ShareIcon from "./assets/share-icon"; function SaveAndShareBar(props) { const { From e01026a480d386f37420cb489bf88848bf514d0c Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Tue, 3 Sep 2024 10:36:49 +0100 Subject: [PATCH 07/19] feat: add experiment check --- .../save-and-share-bar/src/save-and-share-bar.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/save-and-share-bar/src/save-and-share-bar.js b/packages/save-and-share-bar/src/save-and-share-bar.js index f7970262cc8..f4b48261a0e 100644 --- a/packages/save-and-share-bar/src/save-and-share-bar.js +++ b/packages/save-and-share-bar/src/save-and-share-bar.js @@ -47,6 +47,7 @@ function SaveAndShareBar(props) { const [popoverOpen, setPopoverOpen] = React.useState(false); const [windowHeight, setWindowHeight] = React.useState(null); const [windowWidth, setWindowWidth] = React.useState(null); + const [showCommentButton, setShowCommentButton] = React.useState(false); const barRef = React.useRef(); const shareBtnRef = React.useRef(); @@ -60,6 +61,17 @@ function SaveAndShareBar(props) { } }, []); + useEffect( + () => { + if (window.sessionStorage.getItem("showCommentButton") === "true") { + if (commentCount && commentCount > -30) { + setShowCommentButton(true); + } + } + }, + [commentCount] + ); + // Add event listener to close popover when clicked outside useEffect(() => { if (!popoverRef.current) return undefined; @@ -84,8 +96,6 @@ function SaveAndShareBar(props) { ? barRef.current.getBoundingClientRect().bottom : windowHeight; - const showCommentButton = Boolean(commentCount && commentCount > 30); - // Position the popover at the top if the bar length is less than 400px from the bottom function getPosition() { const isLargeDevice = windowWidth && windowWidth > 449; @@ -242,7 +252,7 @@ function SaveAndShareBar(props) { - 1300 + {commentCount} )} From 5d14464473fd3ad12a7d0198a0e0cb03243a1703 Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Tue, 3 Sep 2024 11:00:47 +0100 Subject: [PATCH 08/19] fix: canary --- packages/save-and-share-bar/src/save-and-share-bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/save-and-share-bar/src/save-and-share-bar.js b/packages/save-and-share-bar/src/save-and-share-bar.js index f4b48261a0e..29d45846954 100644 --- a/packages/save-and-share-bar/src/save-and-share-bar.js +++ b/packages/save-and-share-bar/src/save-and-share-bar.js @@ -29,8 +29,8 @@ import CloseIcon from "./assets/close-icon"; import EmailShare from "./components/email-share"; import SaveButton from "./components/save-button"; import { ShareItem, ShareItemLabel } from "./components/share-item"; -import CommentIcon from "./assets/comment-icon"; import ShareIcon from "./assets/share-icon"; +import CommentIcon from "./assets/comment-icon"; function SaveAndShareBar(props) { const { From 1eda8d715e13c0e5ccf9d5eb3dbd096e1ae7acb8 Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Tue, 3 Sep 2024 11:28:54 +0100 Subject: [PATCH 09/19] temp hardcode happy path --- packages/save-and-share-bar/src/save-and-share-bar.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/save-and-share-bar/src/save-and-share-bar.js b/packages/save-and-share-bar/src/save-and-share-bar.js index 29d45846954..2b7badba3e7 100644 --- a/packages/save-and-share-bar/src/save-and-share-bar.js +++ b/packages/save-and-share-bar/src/save-and-share-bar.js @@ -64,7 +64,8 @@ function SaveAndShareBar(props) { useEffect( () => { if (window.sessionStorage.getItem("showCommentButton") === "true") { - if (commentCount && commentCount > -30) { + // if (commentCount && commentCount > -30) { + if (true) { setShowCommentButton(true); } } From 62d15f5b9906a479759235e489479bb2241f2f1d Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Tue, 3 Sep 2024 12:06:14 +0100 Subject: [PATCH 10/19] feat: update styling --- .../web/__snapshots__/shared.web.test.js.snap | 48 +++++++++++++++++++ .../article-comments/src/styles/responsive.js | 3 ++ .../save-and-share-bar.test.js.snap | 4 +- .../src/save-and-share-bar.js | 15 ++++-- packages/save-and-share-bar/src/styled.js | 18 ++++++- 5 files changed, 82 insertions(+), 6 deletions(-) diff --git a/packages/article-comments/__tests__/web/__snapshots__/shared.web.test.js.snap b/packages/article-comments/__tests__/web/__snapshots__/shared.web.test.js.snap index 58480d3a39d..cb2e942dd77 100644 --- a/packages/article-comments/__tests__/web/__snapshots__/shared.web.test.js.snap +++ b/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; } } diff --git a/packages/article-comments/src/styles/responsive.js b/packages/article-comments/src/styles/responsive.js index b5469064f29..cba045d7500 100644 --- a/packages/article-comments/src/styles/responsive.js +++ b/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) { diff --git a/packages/save-and-share-bar/__tests__/web/__snapshots__/save-and-share-bar.test.js.snap b/packages/save-and-share-bar/__tests__/web/__snapshots__/save-and-share-bar.test.js.snap index df53db591c8..8f5943c9a23 100644 --- a/packages/save-and-share-bar/__tests__/web/__snapshots__/save-and-share-bar.test.js.snap +++ b/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`] = `
)} {showCommentButton && ( - + { + e.preventDefault(); + document.getElementById("comments-container").scrollIntoView({ + behavior: "smooth" + }); + }} + > - {commentCount} + Comment + {commentCount.toLocaleString()} )} @@ -286,7 +295,7 @@ SaveAndShareBar.defaultProps = { onShareEmail: () => {}, getTokenisedShareUrl: getTokenisedArticleUrlApi, isPreviewMode: (PropTypes.bool = false), - commentCount: (PropTypes.number = 0) + commentCount: (PropTypes.number = 1300) }; export default withTrackEvents(SaveAndShareBar); diff --git a/packages/save-and-share-bar/src/styled.js b/packages/save-and-share-bar/src/styled.js index 50efacc3df3..fa696e69aa1 100644 --- a/packages/save-and-share-bar/src/styled.js +++ b/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%; `; @@ -186,4 +186,20 @@ export const EmailSpinnerContainer = styled.div` 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; + } + } `; From ece2dd4d655988295bf76d24b5ce0701d50a73e7 Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Tue, 3 Sep 2024 15:18:08 +0100 Subject: [PATCH 11/19] feat: add loading state --- packages/save-and-share-bar/.eslintrc.json | 6 +- .../src/components/comment-button.js | 66 +++++++++++++++++++ .../src/save-and-share-bar.js | 38 ++--------- packages/save-and-share-bar/src/styled.js | 7 ++ 4 files changed, 82 insertions(+), 35 deletions(-) create mode 100644 packages/save-and-share-bar/src/components/comment-button.js diff --git a/packages/save-and-share-bar/.eslintrc.json b/packages/save-and-share-bar/.eslintrc.json index fa1d5db82af..934db0e7e41 100644 --- a/packages/save-and-share-bar/.eslintrc.json +++ b/packages/save-and-share-bar/.eslintrc.json @@ -1,3 +1,7 @@ { - "extends": ["@times-components/thetimes"] + "extends": ["@times-components/thetimes"], + "env": { + "browser": true, + "node": true + } } diff --git a/packages/save-and-share-bar/src/components/comment-button.js b/packages/save-and-share-bar/src/components/comment-button.js new file mode 100644 index 00000000000..8bdf724d192 --- /dev/null +++ b/packages/save-and-share-bar/src/components/comment-button.js @@ -0,0 +1,66 @@ +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") { + // commentCount && commentCount > -30 + if (true) { + setShowCommentButton(true); + } + } + setTimeout(() => setIsLoading(false), 2000); + }, + [commentCount] + ); + + if (!showCommentButton) { + return null; + } + + return ( + { + e.preventDefault(); + const commentsContainer = document.getElementById("comments-container"); + if (commentsContainer) { + commentsContainer.scrollIntoView({ + behavior: "smooth" + }); + } + }} + > + + {isLoading && ( + + + + )} +
+ + Comment + {commentCount.toLocaleString()} +
+ + + ); +}; + +CommentButton.propTypes = { + commentCount: PropTypes.number.isRequired +}; + +export default React.memo(CommentButton); diff --git a/packages/save-and-share-bar/src/save-and-share-bar.js b/packages/save-and-share-bar/src/save-and-share-bar.js index b98d1c5f5c1..4b1f8fdf5b9 100644 --- a/packages/save-and-share-bar/src/save-and-share-bar.js +++ b/packages/save-and-share-bar/src/save-and-share-bar.js @@ -22,15 +22,14 @@ import { Popover, PopoverHeader, PopoverContent, - CloseButton, - CommentsLink + CloseButton } from "./styled"; import CloseIcon from "./assets/close-icon"; 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 CommentIcon from "./assets/comment-icon"; +import CommentButton from "./components/comment-button"; function SaveAndShareBar(props) { const { @@ -47,7 +46,6 @@ function SaveAndShareBar(props) { const [popoverOpen, setPopoverOpen] = React.useState(false); const [windowHeight, setWindowHeight] = React.useState(null); const [windowWidth, setWindowWidth] = React.useState(null); - const [showCommentButton, setShowCommentButton] = React.useState(false); const barRef = React.useRef(); const shareBtnRef = React.useRef(); @@ -61,18 +59,6 @@ function SaveAndShareBar(props) { } }, []); - useEffect( - () => { - if (window.sessionStorage.getItem("showCommentButton") === "true") { - // if (commentCount && commentCount > -30) { - if (true) { - setShowCommentButton(true); - } - } - }, - [commentCount] - ); - // Add event listener to close popover when clicked outside useEffect(() => { if (!popoverRef.current) return undefined; @@ -249,23 +235,7 @@ function SaveAndShareBar(props) {
)} - {showCommentButton && ( - { - e.preventDefault(); - document.getElementById("comments-container").scrollIntoView({ - behavior: "smooth" - }); - }} - > - - - Comment - {commentCount.toLocaleString()} - - - )} + ) : null} @@ -295,7 +265,7 @@ SaveAndShareBar.defaultProps = { onShareEmail: () => {}, getTokenisedShareUrl: getTokenisedArticleUrlApi, isPreviewMode: (PropTypes.bool = false), - commentCount: (PropTypes.number = 1300) + commentCount: (PropTypes.number = 0) }; export default withTrackEvents(SaveAndShareBar); diff --git a/packages/save-and-share-bar/src/styled.js b/packages/save-and-share-bar/src/styled.js index fa696e69aa1..2356c20f485 100644 --- a/packages/save-and-share-bar/src/styled.js +++ b/packages/save-and-share-bar/src/styled.js @@ -202,4 +202,11 @@ export const CommentsLink = styled.a` color: #696969; } } + + div.content { + display: flex; + align-items: center; + gap: 8px; + ${({ isLoading }) => isLoading && "opacity: 0"}; + } `; From 2f86b92cddeeab9f47eccae45c545d1172ce8389 Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Tue, 3 Sep 2024 15:57:37 +0100 Subject: [PATCH 12/19] feat: remove happy path hardcoding --- .../save-and-share-bar/src/components/comment-button.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/save-and-share-bar/src/components/comment-button.js b/packages/save-and-share-bar/src/components/comment-button.js index 8bdf724d192..fa02245b17f 100644 --- a/packages/save-and-share-bar/src/components/comment-button.js +++ b/packages/save-and-share-bar/src/components/comment-button.js @@ -15,12 +15,12 @@ const CommentButton = ({ commentCount }) => { useEffect( () => { if (window.sessionStorage.getItem("showCommentButton") === "true") { - // commentCount && commentCount > -30 - if (true) { + if (commentCount && commentCount > 30) { setShowCommentButton(true); } } - setTimeout(() => setIsLoading(false), 2000); + // Arbitrary loading time to allow iframe to load before allowing + setTimeout(() => setIsLoading(false), 3000); }, [commentCount] ); From f9edc701fbb76d699d1c53412fd37cff823c3aed Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Tue, 3 Sep 2024 16:09:18 +0100 Subject: [PATCH 13/19] fix: comment --- packages/save-and-share-bar/src/components/comment-button.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/save-and-share-bar/src/components/comment-button.js b/packages/save-and-share-bar/src/components/comment-button.js index fa02245b17f..5cb7af4383b 100644 --- a/packages/save-and-share-bar/src/components/comment-button.js +++ b/packages/save-and-share-bar/src/components/comment-button.js @@ -20,6 +20,7 @@ const CommentButton = ({ commentCount }) => { } } // Arbitrary loading time to allow iframe to load before allowing + // the user to scroll to comments section setTimeout(() => setIsLoading(false), 3000); }, [commentCount] From a9a23bf04b04070bb4bf18ecddd80e1ada8882be Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Tue, 10 Sep 2024 10:47:43 +0100 Subject: [PATCH 14/19] fix: content alignment --- .../web/__snapshots__/save-and-share-bar.test.js.snap | 4 ++-- packages/save-and-share-bar/src/styled.js | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/save-and-share-bar/__tests__/web/__snapshots__/save-and-share-bar.test.js.snap b/packages/save-and-share-bar/__tests__/web/__snapshots__/save-and-share-bar.test.js.snap index 43c776a25ab..2024efc7a89 100644 --- a/packages/save-and-share-bar/__tests__/web/__snapshots__/save-and-share-bar.test.js.snap +++ b/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`] = `
Date: Tue, 10 Sep 2024 12:33:31 +0100 Subject: [PATCH 15/19] add 1300 default comment count --- packages/save-and-share-bar/src/save-and-share-bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/save-and-share-bar/src/save-and-share-bar.js b/packages/save-and-share-bar/src/save-and-share-bar.js index 4b1f8fdf5b9..6a4405ac5f8 100644 --- a/packages/save-and-share-bar/src/save-and-share-bar.js +++ b/packages/save-and-share-bar/src/save-and-share-bar.js @@ -265,7 +265,7 @@ SaveAndShareBar.defaultProps = { onShareEmail: () => {}, getTokenisedShareUrl: getTokenisedArticleUrlApi, isPreviewMode: (PropTypes.bool = false), - commentCount: (PropTypes.number = 0) + commentCount: (PropTypes.number = 1300) }; export default withTrackEvents(SaveAndShareBar); From 35491e934dd849b8ce16994e5ba473860b50f65b Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Tue, 10 Sep 2024 12:56:09 +0100 Subject: [PATCH 16/19] reorder imports --- packages/save-and-share-bar/src/save-and-share-bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/save-and-share-bar/src/save-and-share-bar.js b/packages/save-and-share-bar/src/save-and-share-bar.js index 6a4405ac5f8..1f855bef67b 100644 --- a/packages/save-and-share-bar/src/save-and-share-bar.js +++ b/packages/save-and-share-bar/src/save-and-share-bar.js @@ -28,8 +28,8 @@ import CloseIcon from "./assets/close-icon"; 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"; +import ShareIcon from "./assets/share-icon"; function SaveAndShareBar(props) { const { From fbb66ff7bec1e6bba03627501cf2b69a5b0165d7 Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Tue, 10 Sep 2024 14:05:03 +0100 Subject: [PATCH 17/19] reorder imports --- packages/save-and-share-bar/src/save-and-share-bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/save-and-share-bar/src/save-and-share-bar.js b/packages/save-and-share-bar/src/save-and-share-bar.js index 1f855bef67b..6a4405ac5f8 100644 --- a/packages/save-and-share-bar/src/save-and-share-bar.js +++ b/packages/save-and-share-bar/src/save-and-share-bar.js @@ -28,8 +28,8 @@ import CloseIcon from "./assets/close-icon"; import EmailShare from "./components/email-share"; import SaveButton from "./components/save-button"; import { ShareItem, ShareItemLabel } from "./components/share-item"; -import CommentButton from "./components/comment-button"; import ShareIcon from "./assets/share-icon"; +import CommentButton from "./components/comment-button"; function SaveAndShareBar(props) { const { From f40afbe09708d6d4e3c34abc6261d1a384fe3139 Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Thu, 12 Sep 2024 10:11:55 +0100 Subject: [PATCH 18/19] feat: remove hardcoded default --- packages/save-and-share-bar/src/save-and-share-bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/save-and-share-bar/src/save-and-share-bar.js b/packages/save-and-share-bar/src/save-and-share-bar.js index 6a4405ac5f8..4b1f8fdf5b9 100644 --- a/packages/save-and-share-bar/src/save-and-share-bar.js +++ b/packages/save-and-share-bar/src/save-and-share-bar.js @@ -265,7 +265,7 @@ SaveAndShareBar.defaultProps = { onShareEmail: () => {}, getTokenisedShareUrl: getTokenisedArticleUrlApi, isPreviewMode: (PropTypes.bool = false), - commentCount: (PropTypes.number = 1300) + commentCount: (PropTypes.number = 0) }; export default withTrackEvents(SaveAndShareBar); From dcc254502e934bf1955a8903f78f976b6a9bd713 Mon Sep 17 00:00:00 2001 From: Milan Haria Date: Mon, 16 Sep 2024 14:43:17 +0100 Subject: [PATCH 19/19] fix: comment button not appearing in sticky bar --- packages/article-skeleton/src/article-skeleton.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/article-skeleton/src/article-skeleton.js b/packages/article-skeleton/src/article-skeleton.js index 2a9ceab2adf..cc82e3b3260 100644 --- a/packages/article-skeleton/src/article-skeleton.js +++ b/packages/article-skeleton/src/article-skeleton.js @@ -315,6 +315,7 @@ const ArticleSkeleton = ({ savingEnabled={savingEnabled} sharingEnabled={sharingEnabled} hostName={domainSpecificUrl} + commentCount={commentCount} /> )}