Merge pull request #625 from Financial-Times/CI-809-refactor-x-live-b…

…log-post-component refactored the x-live-blog-component.
Financial-Times · Nov 17, 2021 · 4bae64a · 4bae64a
2 parents 122144c + b1570c0
commit 4bae64a
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 45 deletions.
diff --git a/components/x-live-blog-post/src/LiveBlogPost.jsx b/components/x-live-blog-post/src/LiveBlogPost.jsx
@@ -1,8 +1,49 @@
-import { h } from '@financial-times/x-engine'
+import { h, Fragment } from '@financial-times/x-engine'
 import ShareButtons from './ShareButtons'
 import Timestamp from './Timestamp'
 import styles from './LiveBlogPost.scss'
 
+/**
+ * Triggers a page scroll depending on what the type of `backToTopProp` is.
+ * A function will be called onClick.
+ * A string with be transformed to a hashed href. e.g  backToTopProp="top" becomes "#top"
+ *
+ * @param {(function | string)} backToTopProp
+ * @returns
+ */
+function generateBackToTopComponent(backToTopProp) {
+	if (!backToTopProp) {
+		return
+	}
+
+	if (typeof backToTopProp === 'string') {
+		const processTopRef = (ref) => {
+			return ref.includes('#') ? ref : `#${ref}`
+		}
+		return (
+			<a
+				href={processTopRef(backToTopProp)}
+				aria-labelledby="Back to top"
+				className={styles['live-blog-post-controls__back-to-top-link']}
+			>
+				Back to top
+			</a>
+		)
+	}
+
+	if (typeof backToTopProp === 'function') {
+		return (
+			<button
+				onClick={backToTopProp}
+				aria-labelledby="Back to top"
+				className={styles['live-blog-post-controls__back-to-top-button']}
+			>
+				Back to top
+			</button>
+		)
+	}
+}
+
 const LiveBlogPost = (props) => {
 	const {
 		id,
@@ -23,36 +64,7 @@ const LiveBlogPost = (props) => {
 
 	const showBreakingNewsLabel = standout.breakingNews || isBreakingNews
 
-	let BackToTopComponent
-
-	if (backToTop) {
-		if (typeof backToTop === 'string') {
-			const processTopRef = (ref) => {
-				return ref.includes('#') ? ref : `#${ref}`
-			}
-			BackToTopComponent = (
-				<a
-					href={processTopRef(backToTop)}
-					aria-labelledby="Back to top"
-					className={styles['live-blog-post-controls__right__back-to-top-link']}
-				>
-					Back to top
-				</a>
-			)
-		}
-
-		if (typeof backToTop === 'function') {
-			BackToTopComponent = (
-				<button
-					onClick={backToTop}
-					aria-labelledby="Back to top"
-					className={styles['live-blog-post-controls__right__back-to-top-button']}
-				>
-					Back to top
-				</button>
-			)
-		}
-	}
+	const BackToTopComponent = generateBackToTopComponent(backToTop)
 
 	return (
 		<article
@@ -73,9 +85,7 @@ const LiveBlogPost = (props) => {
 			/>
 			<div className={styles['live-blog-post__controls']}>
 				{showShareButtons && <ShareButtons postId={id || postId} articleUrl={articleUrl} title={title} />}
-				{Boolean(BackToTopComponent) && (
-					<div className={styles['live-blog-post__controls__right']}>{BackToTopComponent}</div>
-				)}
+				{Boolean(BackToTopComponent) && <Fragment>{BackToTopComponent}</Fragment>}
 			</div>
 
 			{ad}

diff --git a/components/x-live-blog-post/src/LiveBlogPost.scss b/components/x-live-blog-post/src/LiveBlogPost.scss
@@ -79,27 +79,24 @@
 	margin-top: oSpacingByName('s6');
 }
 
-.live-blog-post__controls__right {
-	margin-left: auto;
-}
-
-.live-blog-post__controls__right .live-blog-post-controls__right__back-to-top-link,
-.live-blog-post__controls__right .live-blog-post-controls__right__back-to-top-button  {
+.live-blog-post__controls .live-blog-post-controls__back-to-top-link,
+.live-blog-post__controls .live-blog-post-controls__back-to-top-button  {
 	@include oTypographySans($scale: 1);
 	color: oColorsByName('teal');
 	text-decoration: underline;
+	margin-left: auto;
 }
 
-.live-blog-post__controls__right .live-blog-post-controls__right__back-to-top-button {
+.live-blog-post__controls .live-blog-post-controls__back-to-top-button {
 	background: unset;
 	border: unset;
 }
 
-.live-blog-post__controls__right .live-blog-post-controls__right__back-to-top-button:hover {
+.live-blog-post__controls .live-blog-post-controls__back-to-top-button:hover {
 	cursor: pointer;
 }
 
-.live-blog-post:first-child .live-blog-post-controls__right__back-to-top-link, 
-.live-blog-post:first-child .live-blog-post-controls__right__back-to-top-button {
+.live-blog-post:first-child .live-blog-post-controls__back-to-top-link, 
+.live-blog-post:first-child .live-blog-post-controls__back-to-top-button {
 	display: none;
-}
+}