From 4cbca527ee90aa9f2b97ed71572fb69e64b22216 Mon Sep 17 00:00:00 2001
From: Emmanuel Enwenede <emmanuel@blueeel.co.uk>
Date: Mon, 1 Nov 2021 13:40:48 +0000
Subject: [PATCH 01/13] added back to top link to liveBlogPost

---
 .../x-live-blog-post/src/LiveBlogPost.jsx     | 38 ++++++++++++++++++-
 .../x-live-blog-post/src/LiveBlogPost.scss    | 23 +++++++++--
 .../x-live-blog-post/src/ShareButtons.jsx     | 15 +++++---
 .../src/__tests__/LiveBlogPost.test.jsx       | 22 +++++++++++
 .../x-live-blog-post/storybook/index.jsx      |  3 +-
 5 files changed, 88 insertions(+), 13 deletions(-)

diff --git a/components/x-live-blog-post/src/LiveBlogPost.jsx b/components/x-live-blog-post/src/LiveBlogPost.jsx
index 709a822a1..dbdfde1a7 100644
--- a/components/x-live-blog-post/src/LiveBlogPost.jsx
+++ b/components/x-live-blog-post/src/LiveBlogPost.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { h } from '@financial-times/x-engine'
 import ShareButtons from './ShareButtons'
 import Timestamp from './Timestamp'
@@ -17,11 +18,29 @@ const LiveBlogPost = (props) => {
 		articleUrl,
 		showShareButtons = false,
 		byline,
-		ad
+		ad,
+		backToTop,
+		topRef
 	} = props
 
 	const showBreakingNewsLabel = standout.breakingNews || isBreakingNews
 
+	let backToTopProps = {}
+
+	if (backToTop) {
+		backToTopProps = {
+			...backToTopProps,
+			onClick: backToTop
+		}
+	}
+
+	if (topRef) {
+		backToTopProps = {
+			...backToTopProps,
+			href: topRef
+		}
+	}
+
 	return (
 		<article
 			className={`live-blog-post ${styles['live-blog-post']}`}
@@ -39,7 +58,22 @@ const LiveBlogPost = (props) => {
 				className={`${styles['live-blog-post__body']} n-content-body article--body`}
 				dangerouslySetInnerHTML={{ __html: bodyHTML || content }}
 			/>
-			{showShareButtons && <ShareButtons postId={id || postId} articleUrl={articleUrl} title={title} />}
+			<div className={styles['live-blog-post__bottom-controls']}>
+				{showShareButtons && <ShareButtons postId={id || postId} articleUrl={articleUrl} title={title} />}
+				{(Boolean(backToTop) || Boolean(topRef)) && (
+					// eslint-disable-next-line jsx-a11y/click-events-have-key-events
+					<a
+						{...backToTopProps}
+						aria-labelledby="Back to top link"
+						{...backToTopProps}
+						className={styles['back-to-top']}
+						onClick={backToTop}
+					>
+						Back to top
+					</a>
+				)}
+			</div>
+
 			{ad}
 		</article>
 	)
diff --git a/components/x-live-blog-post/src/LiveBlogPost.scss b/components/x-live-blog-post/src/LiveBlogPost.scss
index ca983ef58..803bf986e 100644
--- a/components/x-live-blog-post/src/LiveBlogPost.scss
+++ b/components/x-live-blog-post/src/LiveBlogPost.scss
@@ -54,10 +54,6 @@
 	padding-top: oSpacingByName('s1');
 }
 
-.live-blog-post__share-buttons {
-	margin-top: oSpacingByName('s6');
-}
-
 .live-blog-post__breaking-news {
 	@include oTypographySans($scale: -2);
 	color: oColorsByName('crimson');
@@ -74,3 +70,22 @@
 	border-radius: 50%;
 	background-color: oColorsByName('crimson');
 }
+
+.live-blog-post__bottom-controls {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
+	margin-top: oSpacingByName('s6');
+}
+
+.live-blog-post__bottom-controls .back-to-top {
+	@include oTypographySans($scale: 1);
+	color: oColorsByName('teal');
+	text-decoration: underline;
+	margin-left: auto;
+}
+
+.live-blog-post__bottom-controls .back-to-top:hover {
+	cursor: pointer;
+}
diff --git a/components/x-live-blog-post/src/ShareButtons.jsx b/components/x-live-blog-post/src/ShareButtons.jsx
index 0ed3ad888..9c6f3abce 100644
--- a/components/x-live-blog-post/src/ShareButtons.jsx
+++ b/components/x-live-blog-post/src/ShareButtons.jsx
@@ -1,5 +1,4 @@
 import { h } from '@financial-times/x-engine'
-import styles from './LiveBlogPost.scss'
 
 export default ({ postId, articleUrl, title }) => {
 	const shareUrl = articleUrl ? new URL(articleUrl) : null
@@ -18,18 +17,20 @@ export default ({ postId, articleUrl, title }) => {
 	)}&title=${encodeURIComponent(title)}&source=Financial+Times`
 
 	return (
-		<div className={styles['live-blog-post__share-buttons']}>
+		<div>
 			<div
 				data-o-component="o-share"
 				data-o-share-location={`live-blog-post-${postId}`}
-				className="o-share o-share--small">
+				className="o-share o-share--small"
+			>
 				<ul data-toolbar="share">
 					<li className="o-share__action" data-share="twitter">
 						<a
 							className="o-share__icon o-share__icon--twitter"
 							rel="noopener"
 							href={twitterUrl}
-							data-trackable="twitter">
+							data-trackable="twitter"
+						>
 							<span className="o-share__text" aria-label={`Share ${title} on Twitter`}>
 								Share on Twitter (opens new window)
 							</span>
@@ -40,7 +41,8 @@ export default ({ postId, articleUrl, title }) => {
 							className="o-share__icon o-share__icon--facebook"
 							rel="noopener"
 							href={facebookUrl}
-							data-trackable="facebook">
+							data-trackable="facebook"
+						>
 							<span className="o-share__text" aria-label={`Share ${title} on Facebook`}>
 								Share on Facebook (opens new window)
 							</span>
@@ -51,7 +53,8 @@ export default ({ postId, articleUrl, title }) => {
 							className="o-share__icon o-share__icon--linkedin"
 							rel="noopener"
 							href={linkedInUrl}
-							data-trackable="linkedin">
+							data-trackable="linkedin"
+						>
 							<span className="o-share__text" aria-label={`Share ${title} on LinkedIn`}>
 								Share on LinkedIn (opens new window)
 							</span>
diff --git a/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx b/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx
index b038c90fe..f56e998f4 100644
--- a/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx
+++ b/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx
@@ -47,6 +47,19 @@ const regularPostSpark = {
 	showShareButtons: true
 }
 
+const backToTopPostSpark = {
+	id: '12345',
+	title: 'Test title',
+	byline: 'Test author',
+	bodyHTML: '<p><i>Test body</i></p>',
+	publishedDate: new Date().toISOString(),
+	isBreakingNews: false,
+	articleUrl: 'Https://www.ft.com',
+	showShareButtons: true,
+	backToTop: () => {},
+	topRef: '#top'
+}
+
 describe('x-live-blog-post', () => {
 	describe('Spark cms', () => {
 		describe('title property exists', () => {
@@ -107,6 +120,15 @@ describe('x-live-blog-post', () => {
 
 			expect(liveBlogPost.html()).toContain('<p><i>Test body</i></p>')
 		})
+
+		describe('Back to top post', () => {
+			it('renders back to top link', () => {
+				const liveBlogPost = mount(<LiveBlogPost {...backToTopPostSpark} />)
+
+				expect(liveBlogPost.html()).toContain('Back to top')
+				expect(liveBlogPost.html()).toContain('</a>')
+			})
+		})
 	})
 
 	describe('Wordpress cms', () => {
diff --git a/components/x-live-blog-post/storybook/index.jsx b/components/x-live-blog-post/storybook/index.jsx
index f17f6e759..7337fdb35 100644
--- a/components/x-live-blog-post/storybook/index.jsx
+++ b/components/x-live-blog-post/storybook/index.jsx
@@ -34,5 +34,6 @@ ContentBody.args = {
 	id: '12345',
 	publishedDate: '2020-05-13T18:52:28.000Z',
 	articleUrl: 'https://www.ft.com/content/2b665ec7-a88f-3998-8f39-5371f9c791ed',
-	showShareButtons: true
+	showShareButtons: true,
+	backToTop: () => {}
 }

From abd78e28ccdef53b14564861e73a26c38eac577e Mon Sep 17 00:00:00 2001
From: Emmanuel Enwenede <emmanuel@blueeel.co.uk>
Date: Mon, 1 Nov 2021 13:47:26 +0000
Subject: [PATCH 02/13] removed onClick attribute from back to top link

---
 components/x-live-blog-post/src/LiveBlogPost.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/x-live-blog-post/src/LiveBlogPost.jsx b/components/x-live-blog-post/src/LiveBlogPost.jsx
index dbdfde1a7..a243a254b 100644
--- a/components/x-live-blog-post/src/LiveBlogPost.jsx
+++ b/components/x-live-blog-post/src/LiveBlogPost.jsx
@@ -64,10 +64,9 @@ const LiveBlogPost = (props) => {
 					// eslint-disable-next-line jsx-a11y/click-events-have-key-events
 					<a
 						{...backToTopProps}
-						aria-labelledby="Back to top link"
+						aria-labelledby="Back to top"
 						{...backToTopProps}
 						className={styles['back-to-top']}
-						onClick={backToTop}
 					>
 						Back to top
 					</a>

From 2cab00173efd3cac10f470cc59cf537d78159e3b Mon Sep 17 00:00:00 2001
From: Emmanuel Enwenede <emmanuel@blueeel.co.uk>
Date: Mon, 1 Nov 2021 13:57:05 +0000
Subject: [PATCH 03/13] onClick attribute from back to top link

---
 components/x-live-blog-post/src/LiveBlogPost.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/x-live-blog-post/src/LiveBlogPost.jsx b/components/x-live-blog-post/src/LiveBlogPost.jsx
index a243a254b..4983fadd2 100644
--- a/components/x-live-blog-post/src/LiveBlogPost.jsx
+++ b/components/x-live-blog-post/src/LiveBlogPost.jsx
@@ -27,17 +27,17 @@ const LiveBlogPost = (props) => {
 
 	let backToTopProps = {}
 
-	if (backToTop) {
+	if (topRef) {
 		backToTopProps = {
 			...backToTopProps,
-			onClick: backToTop
+			href: topRef
 		}
 	}
 
-	if (topRef) {
+	if (backToTop) {
 		backToTopProps = {
 			...backToTopProps,
-			href: topRef
+			onClick: backToTop
 		}
 	}
 

From 550e0fa95bac9271f5f6827e9d1384c06d9e29f1 Mon Sep 17 00:00:00 2001
From: Emmanuel Enwenede <emmanuel@blueeel.co.uk>
Date: Mon, 1 Nov 2021 14:13:09 +0000
Subject: [PATCH 04/13] updated x-live-blog-post readme

---
 components/x-live-blog-post/readme.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/x-live-blog-post/readme.md b/components/x-live-blog-post/readme.md
index 725846c76..af78ad65d 100644
--- a/components/x-live-blog-post/readme.md
+++ b/components/x-live-blog-post/readme.md
@@ -52,3 +52,6 @@ Feature             | Type   | Notes
 `publishedTimestamp`| String | Deprecated - ISO timestamp of publish date
 `articleUrl`        | String | Url of the main article that includes this post
 `showShareButtons`  | Bool   | default: `false` - Shows social media share buttons when `true`
+`topRef`  			| String   | Shows the back to top link at the bottom of posts and navigates to the hashed section of the page. No defaults, example `#top`
+`backToTop`  		| Function   | Shows the back to top link at the bottom of posts and manages navigating to `selected top` with a javascript function. No defaults. Only pass in `topRef` or `backToTop` props to the component. Please call event.preventDefault() at the top level of this function.
+

From 6e33abc39e2ad0f35bc7d315e278c157430df2e0 Mon Sep 17 00:00:00 2001
From: Emmanuel Enwenede <emmanuel@blueeel.co.uk>
Date: Tue, 2 Nov 2021 10:40:12 +0000
Subject: [PATCH 05/13] renamed css classes inline with BEM

---
 components/x-live-blog-post/src/LiveBlogPost.jsx  | 4 ++--
 components/x-live-blog-post/src/LiveBlogPost.scss | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/x-live-blog-post/src/LiveBlogPost.jsx b/components/x-live-blog-post/src/LiveBlogPost.jsx
index 4983fadd2..feacb09e5 100644
--- a/components/x-live-blog-post/src/LiveBlogPost.jsx
+++ b/components/x-live-blog-post/src/LiveBlogPost.jsx
@@ -58,7 +58,7 @@ const LiveBlogPost = (props) => {
 				className={`${styles['live-blog-post__body']} n-content-body article--body`}
 				dangerouslySetInnerHTML={{ __html: bodyHTML || content }}
 			/>
-			<div className={styles['live-blog-post__bottom-controls']}>
+			<div className={styles['live-blog-post__controls']}>
 				{showShareButtons && <ShareButtons postId={id || postId} articleUrl={articleUrl} title={title} />}
 				{(Boolean(backToTop) || Boolean(topRef)) && (
 					// eslint-disable-next-line jsx-a11y/click-events-have-key-events
@@ -66,7 +66,7 @@ const LiveBlogPost = (props) => {
 						{...backToTopProps}
 						aria-labelledby="Back to top"
 						{...backToTopProps}
-						className={styles['back-to-top']}
+						className={styles['live-blog-post-controls__back-to-top']}
 					>
 						Back to top
 					</a>
diff --git a/components/x-live-blog-post/src/LiveBlogPost.scss b/components/x-live-blog-post/src/LiveBlogPost.scss
index 803bf986e..4cefa8694 100644
--- a/components/x-live-blog-post/src/LiveBlogPost.scss
+++ b/components/x-live-blog-post/src/LiveBlogPost.scss
@@ -71,7 +71,7 @@
 	background-color: oColorsByName('crimson');
 }
 
-.live-blog-post__bottom-controls {
+.live-blog-post__controls {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -79,13 +79,13 @@
 	margin-top: oSpacingByName('s6');
 }
 
-.live-blog-post__bottom-controls .back-to-top {
+.live-blog-post__controls .live-blog-post-controls__back-to-top {
 	@include oTypographySans($scale: 1);
 	color: oColorsByName('teal');
 	text-decoration: underline;
 	margin-left: auto;
 }
 
-.live-blog-post__bottom-controls .back-to-top:hover {
+.live-blog-post__bottom-controls .live-blog-post-controls__back-to-top:hover {
 	cursor: pointer;
 }

From 24a0d01f2875aaab616820d26ee5dae718cf83e3 Mon Sep 17 00:00:00 2001
From: Emmanuel Enwenede <emmanuel@blueeel.co.uk>
Date: Tue, 2 Nov 2021 10:57:57 +0000
Subject: [PATCH 06/13] renamed backToTop props to provide more context

---
 components/x-live-blog-post/readme.md           |  4 ++--
 .../x-live-blog-post/src/LiveBlogPost.jsx       | 17 ++++++++++-------
 .../x-live-blog-post/src/LiveBlogPost.scss      |  2 +-
 components/x-live-blog-post/storybook/index.jsx |  2 +-
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/components/x-live-blog-post/readme.md b/components/x-live-blog-post/readme.md
index af78ad65d..146724d35 100644
--- a/components/x-live-blog-post/readme.md
+++ b/components/x-live-blog-post/readme.md
@@ -52,6 +52,6 @@ Feature             | Type   | Notes
 `publishedTimestamp`| String | Deprecated - ISO timestamp of publish date
 `articleUrl`        | String | Url of the main article that includes this post
 `showShareButtons`  | Bool   | default: `false` - Shows social media share buttons when `true`
-`topRef`  			| String   | Shows the back to top link at the bottom of posts and navigates to the hashed section of the page. No defaults, example `#top`
-`backToTop`  		| Function   | Shows the back to top link at the bottom of posts and manages navigating to `selected top` with a javascript function. No defaults. Only pass in `topRef` or `backToTop` props to the component. Please call event.preventDefault() at the top level of this function.
+`backToTopRef`  			| String   | Shows the back to top link at the bottom of posts and navigates to the hashed section of the page. No defaults, example `#top`
+`backToTopFunction`  		| Function   | Shows the back to top link at the bottom of posts and manages navigating to `selected top` with a javascript function. No defaults. Only pass in `backToTopRef` or `backToTopFunction` props to the component. Please call event.preventDefault() at the top level of this function.
 
diff --git a/components/x-live-blog-post/src/LiveBlogPost.jsx b/components/x-live-blog-post/src/LiveBlogPost.jsx
index feacb09e5..9863778f0 100644
--- a/components/x-live-blog-post/src/LiveBlogPost.jsx
+++ b/components/x-live-blog-post/src/LiveBlogPost.jsx
@@ -19,25 +19,28 @@ const LiveBlogPost = (props) => {
 		showShareButtons = false,
 		byline,
 		ad,
-		backToTop,
-		topRef
+		backToTopFunction,
+		backToTopRef
 	} = props
 
 	const showBreakingNewsLabel = standout.breakingNews || isBreakingNews
 
 	let backToTopProps = {}
 
-	if (topRef) {
+	if (backToTopRef) {
+		const processTopRef = (ref) => {
+			return typeof ref === 'string' && ref.includes('#') ? ref : `#${ref}`
+		}
 		backToTopProps = {
 			...backToTopProps,
-			href: topRef
+			href: processTopRef(backToTopRef)
 		}
 	}
 
-	if (backToTop) {
+	if (backToTopFunction) {
 		backToTopProps = {
 			...backToTopProps,
-			onClick: backToTop
+			onClick: backToTopFunction
 		}
 	}
 
@@ -60,7 +63,7 @@ const LiveBlogPost = (props) => {
 			/>
 			<div className={styles['live-blog-post__controls']}>
 				{showShareButtons && <ShareButtons postId={id || postId} articleUrl={articleUrl} title={title} />}
-				{(Boolean(backToTop) || Boolean(topRef)) && (
+				{(Boolean(backToTopFunction) || Boolean(backToTopRef)) && (
 					// eslint-disable-next-line jsx-a11y/click-events-have-key-events
 					<a
 						{...backToTopProps}
diff --git a/components/x-live-blog-post/src/LiveBlogPost.scss b/components/x-live-blog-post/src/LiveBlogPost.scss
index 4cefa8694..a1a186e0d 100644
--- a/components/x-live-blog-post/src/LiveBlogPost.scss
+++ b/components/x-live-blog-post/src/LiveBlogPost.scss
@@ -86,6 +86,6 @@
 	margin-left: auto;
 }
 
-.live-blog-post__bottom-controls .live-blog-post-controls__back-to-top:hover {
+.live-blog-post__controls .live-blog-post-controls__back-to-top:hover {
 	cursor: pointer;
 }
diff --git a/components/x-live-blog-post/storybook/index.jsx b/components/x-live-blog-post/storybook/index.jsx
index 7337fdb35..2aad2a215 100644
--- a/components/x-live-blog-post/storybook/index.jsx
+++ b/components/x-live-blog-post/storybook/index.jsx
@@ -35,5 +35,5 @@ ContentBody.args = {
 	publishedDate: '2020-05-13T18:52:28.000Z',
 	articleUrl: 'https://www.ft.com/content/2b665ec7-a88f-3998-8f39-5371f9c791ed',
 	showShareButtons: true,
-	backToTop: () => {}
+	backToTopFunction: () => {}
 }

From 884196a0bfa5086f3474733ae768a06efae8fd13 Mon Sep 17 00:00:00 2001
From: Emmanuel Enwenede <emmanuel@blueeel.co.uk>
Date: Tue, 2 Nov 2021 11:05:12 +0000
Subject: [PATCH 07/13] removed duplicate destructured props

---
 components/x-live-blog-post/src/LiveBlogPost.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/x-live-blog-post/src/LiveBlogPost.jsx b/components/x-live-blog-post/src/LiveBlogPost.jsx
index 9863778f0..887e79f41 100644
--- a/components/x-live-blog-post/src/LiveBlogPost.jsx
+++ b/components/x-live-blog-post/src/LiveBlogPost.jsx
@@ -68,7 +68,6 @@ const LiveBlogPost = (props) => {
 					<a
 						{...backToTopProps}
 						aria-labelledby="Back to top"
-						{...backToTopProps}
 						className={styles['live-blog-post-controls__back-to-top']}
 					>
 						Back to top

From bfbccce70a982186915e6e1403d67331fa15eaf2 Mon Sep 17 00:00:00 2001
From: Emmanuel Enwenede <emmanuel@blueeel.co.uk>
Date: Tue, 2 Nov 2021 11:17:19 +0000
Subject: [PATCH 08/13] updated liveBlogPost test

---
 .../x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx b/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx
index f56e998f4..4ba6218a4 100644
--- a/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx
+++ b/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx
@@ -56,8 +56,8 @@ const backToTopPostSpark = {
 	isBreakingNews: false,
 	articleUrl: 'Https://www.ft.com',
 	showShareButtons: true,
-	backToTop: () => {},
-	topRef: '#top'
+	backToTopFunction: () => {},
+	backToTopRef: '#top'
 }
 
 describe('x-live-blog-post', () => {

From df89b1b3a4d9f8617429efbb6867a3c81f6d406e Mon Sep 17 00:00:00 2001
From: Emmanuel Enwenede <emmanuel@blueeel.co.uk>
Date: Tue, 2 Nov 2021 14:13:04 +0000
Subject: [PATCH 09/13] combined backToTopRef and backToTopFunction into a
 single prop

---
 components/x-live-blog-post/readme.md         |  3 +--
 .../x-live-blog-post/src/LiveBlogPost.jsx     | 25 +++++++----------
 .../src/__tests__/LiveBlogPost.test.jsx       |  3 +--
 .../x-live-blog-post/storybook/index.jsx      | 27 ++++++++++++++++++-
 4 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/components/x-live-blog-post/readme.md b/components/x-live-blog-post/readme.md
index 146724d35..08be3b8c5 100644
--- a/components/x-live-blog-post/readme.md
+++ b/components/x-live-blog-post/readme.md
@@ -52,6 +52,5 @@ Feature             | Type   | Notes
 `publishedTimestamp`| String | Deprecated - ISO timestamp of publish date
 `articleUrl`        | String | Url of the main article that includes this post
 `showShareButtons`  | Bool   | default: `false` - Shows social media share buttons when `true`
-`backToTopRef`  			| String   | Shows the back to top link at the bottom of posts and navigates to the hashed section of the page. No defaults, example `#top`
-`backToTopFunction`  		| Function   | Shows the back to top link at the bottom of posts and manages navigating to `selected top` with a javascript function. No defaults. Only pass in `backToTopRef` or `backToTopFunction` props to the component. Please call event.preventDefault() at the top level of this function.
+`backToTop`  		| Function | String   | Shows the back to top link at the bottom of posts and manages navigating to `selected top` with a javascript function or a hashed link. Only pass in. Please call event.preventDefault() at the top level if this prop is a function. If prop is a string, add the string as the `id` to the element that represents the top.
 
diff --git a/components/x-live-blog-post/src/LiveBlogPost.jsx b/components/x-live-blog-post/src/LiveBlogPost.jsx
index 887e79f41..9cc071c96 100644
--- a/components/x-live-blog-post/src/LiveBlogPost.jsx
+++ b/components/x-live-blog-post/src/LiveBlogPost.jsx
@@ -19,28 +19,23 @@ const LiveBlogPost = (props) => {
 		showShareButtons = false,
 		byline,
 		ad,
-		backToTopFunction,
-		backToTopRef
+		backToTop
 	} = props
 
 	const showBreakingNewsLabel = standout.breakingNews || isBreakingNews
 
 	let backToTopProps = {}
 
-	if (backToTopRef) {
-		const processTopRef = (ref) => {
-			return typeof ref === 'string' && ref.includes('#') ? ref : `#${ref}`
+	if (backToTop) {
+		if (typeof backToTop === 'string') {
+			const processTopRef = (ref) => {
+				return ref.includes('#') ? ref : `#${ref}`
+			}
+			backToTopProps.href = processTopRef(backToTop)
 		}
-		backToTopProps = {
-			...backToTopProps,
-			href: processTopRef(backToTopRef)
-		}
-	}
 
-	if (backToTopFunction) {
-		backToTopProps = {
-			...backToTopProps,
-			onClick: backToTopFunction
+		if (typeof backToTop === 'function') {
+			backToTopProps.onClick = backToTop
 		}
 	}
 
@@ -63,7 +58,7 @@ const LiveBlogPost = (props) => {
 			/>
 			<div className={styles['live-blog-post__controls']}>
 				{showShareButtons && <ShareButtons postId={id || postId} articleUrl={articleUrl} title={title} />}
-				{(Boolean(backToTopFunction) || Boolean(backToTopRef)) && (
+				{Boolean(backToTop) && (
 					// eslint-disable-next-line jsx-a11y/click-events-have-key-events
 					<a
 						{...backToTopProps}
diff --git a/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx b/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx
index 4ba6218a4..be108307a 100644
--- a/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx
+++ b/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx
@@ -56,8 +56,7 @@ const backToTopPostSpark = {
 	isBreakingNews: false,
 	articleUrl: 'Https://www.ft.com',
 	showShareButtons: true,
-	backToTopFunction: () => {},
-	backToTopRef: '#top'
+	backToTop: () => {}
 }
 
 describe('x-live-blog-post', () => {
diff --git a/components/x-live-blog-post/storybook/index.jsx b/components/x-live-blog-post/storybook/index.jsx
index 2aad2a215..af253724e 100644
--- a/components/x-live-blog-post/storybook/index.jsx
+++ b/components/x-live-blog-post/storybook/index.jsx
@@ -35,5 +35,30 @@ ContentBody.args = {
 	publishedDate: '2020-05-13T18:52:28.000Z',
 	articleUrl: 'https://www.ft.com/content/2b665ec7-a88f-3998-8f39-5371f9c791ed',
 	showShareButtons: true,
-	backToTopFunction: () => {}
+	backToTop: () => {}
+}
+
+export const ContentBodyWithBackToTopString = (args) => {
+	return (
+		<div className="story-container">
+			{dependencies && <BuildService dependencies={dependencies} />}
+			<LiveBlogPost {...args} />
+		</div>
+	)
+}
+
+ContentBodyWithBackToTopString.args = {
+	title: 'Turkey’s virus deaths may be 25% higher than official figure',
+	byline: 'George Russell',
+	isBreakingNews: false,
+	standout: {
+		breakingNews: false
+	},
+	bodyHTML:
+		'<p>Turkey&#x2019;s death toll from coronavirus could be as much as 25 per cent higher than the government&#x2019;s official tally, adding the country of 83m people to the raft of nations that have struggled to accurately capture the impact of the pandemic.</p>\n<p>Ankara has previously rejected suggestions that municipal data from Istanbul, the epicentre of the country&#x2019;s Covid-19 outbreak, showed that there were more deaths from the disease than reported.</p>\n<p>But an analysis of individual death records by the Financial Times raises questions about the Turkish government&#x2019;s explanation for a spike in all-cause mortality in the city of almost 16m people.</p>\n<p><a href="https://www.ft.com/content/80bb222c-b6eb-40ea-8014-563cbe9e0117" target="_blank">Read the article here</a></p>\n<p><img class="picture" src="http://blogs.ft.com/the-world/files/2020/05/istanbul_excess_morts_l.jpg"></p>',
+	id: '12345',
+	publishedDate: '2020-05-13T18:52:28.000Z',
+	articleUrl: 'https://www.ft.com/content/2b665ec7-a88f-3998-8f39-5371f9c791ed',
+	showShareButtons: true,
+	backToTop: '#Top'
 }

From 3cacdc77022593ec3e8c592399f72f28025b2bf1 Mon Sep 17 00:00:00 2001
From: Emmanuel Enwenede <emmanuel@blueeel.co.uk>
Date: Tue, 2 Nov 2021 15:22:30 +0000
Subject: [PATCH 10/13] updated readme for x-live-blog-psot

---
 components/x-live-blog-post/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/x-live-blog-post/readme.md b/components/x-live-blog-post/readme.md
index 08be3b8c5..be2001f28 100644
--- a/components/x-live-blog-post/readme.md
+++ b/components/x-live-blog-post/readme.md
@@ -52,5 +52,5 @@ Feature             | Type   | Notes
 `publishedTimestamp`| String | Deprecated - ISO timestamp of publish date
 `articleUrl`        | String | Url of the main article that includes this post
 `showShareButtons`  | Bool   | default: `false` - Shows social media share buttons when `true`
-`backToTop`  		| Function | String   | Shows the back to top link at the bottom of posts and manages navigating to `selected top` with a javascript function or a hashed link. Only pass in. Please call event.preventDefault() at the top level if this prop is a function. If prop is a string, add the string as the `id` to the element that represents the top.
+`backToTop`  		| Function | String   | Shows the back to top link at the bottom of posts and manages navigating to `selected top` with a javascript function or a hashed href. Please call event.preventDefault() at the top level if this prop is a function. If prop is a string, add the string as the `id` to the element that represents the top.
 

From d3e8c03321aac17105616824017aa4c276a1255d Mon Sep 17 00:00:00 2001
From: Emmanuel Enwenede <5596564+noelenwenede@users.noreply.github.com>
Date: Wed, 3 Nov 2021 14:02:25 +0000
Subject: [PATCH 11/13] Update components/x-live-blog-post/readme.md

Co-authored-by: Glynn Phillips <524573+GlynnPhillips@users.noreply.github.com>
---
 components/x-live-blog-post/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/x-live-blog-post/readme.md b/components/x-live-blog-post/readme.md
index be2001f28..b3d189401 100644
--- a/components/x-live-blog-post/readme.md
+++ b/components/x-live-blog-post/readme.md
@@ -52,5 +52,5 @@ Feature             | Type   | Notes
 `publishedTimestamp`| String | Deprecated - ISO timestamp of publish date
 `articleUrl`        | String | Url of the main article that includes this post
 `showShareButtons`  | Bool   | default: `false` - Shows social media share buttons when `true`
-`backToTop`  		| Function | String   | Shows the back to top link at the bottom of posts and manages navigating to `selected top` with a javascript function or a hashed href. Please call event.preventDefault() at the top level if this prop is a function. If prop is a string, add the string as the `id` to the element that represents the top.
+`backToTop`                | String | Function   | Shows the back to top link at the bottom of posts and manages navigating to `selected top` with a javascript function or a hashed href (string). If this prop is a string it will rely on standard browser behaviour to navigate to the element `id` provided that represents the top. If this prop is a function then that function should control the experience of navigating/scrolling to the top position. When using a function please call event.preventDefault() at the top level.
 

From 00d53f5f33c2cb62015379f8f6408f6e7c4d3985 Mon Sep 17 00:00:00 2001
From: Emmanuel Enwenede <emmanuel@blueeel.co.uk>
Date: Thu, 4 Nov 2021 14:47:45 +0000
Subject: [PATCH 12/13] used button as BackToTop component when a function is
 passed in as prop and a tag when a hash link is passed

---
 .../x-live-blog-post/src/LiveBlogPost.jsx     | 33 +++++++++++--------
 .../x-live-blog-post/src/LiveBlogPost.scss    | 10 ++++--
 .../x-live-blog-post/storybook/index.jsx      |  8 ++---
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/components/x-live-blog-post/src/LiveBlogPost.jsx b/components/x-live-blog-post/src/LiveBlogPost.jsx
index 9cc071c96..6700e3ae6 100644
--- a/components/x-live-blog-post/src/LiveBlogPost.jsx
+++ b/components/x-live-blog-post/src/LiveBlogPost.jsx
@@ -24,18 +24,34 @@ const LiveBlogPost = (props) => {
 
 	const showBreakingNewsLabel = standout.breakingNews || isBreakingNews
 
-	let backToTopProps = {}
+	let BackToTopComponent
 
 	if (backToTop) {
 		if (typeof backToTop === 'string') {
 			const processTopRef = (ref) => {
 				return ref.includes('#') ? ref : `#${ref}`
 			}
-			backToTopProps.href = processTopRef(backToTop)
+			BackToTopComponent = (
+				<a
+					href={processTopRef(backToTop)}
+					aria-labelledby="Back to top"
+					className={styles['live-blog-post-controls__back-to-top-link']}
+				>
+					Back to top
+				</a>
+			)
 		}
 
 		if (typeof backToTop === 'function') {
-			backToTopProps.onClick = backToTop
+			BackToTopComponent = (
+				<button
+					onClick={backToTop}
+					aria-labelledby="Back to top"
+					className={styles['live-blog-post-controls__back-to-top-button']}
+				>
+					Back to top
+				</button>
+			)
 		}
 	}
 
@@ -58,16 +74,7 @@ const LiveBlogPost = (props) => {
 			/>
 			<div className={styles['live-blog-post__controls']}>
 				{showShareButtons && <ShareButtons postId={id || postId} articleUrl={articleUrl} title={title} />}
-				{Boolean(backToTop) && (
-					// eslint-disable-next-line jsx-a11y/click-events-have-key-events
-					<a
-						{...backToTopProps}
-						aria-labelledby="Back to top"
-						className={styles['live-blog-post-controls__back-to-top']}
-					>
-						Back to top
-					</a>
-				)}
+				{Boolean(BackToTopComponent) && <>{BackToTopComponent}</>}
 			</div>
 
 			{ad}
diff --git a/components/x-live-blog-post/src/LiveBlogPost.scss b/components/x-live-blog-post/src/LiveBlogPost.scss
index a1a186e0d..2e329d21f 100644
--- a/components/x-live-blog-post/src/LiveBlogPost.scss
+++ b/components/x-live-blog-post/src/LiveBlogPost.scss
@@ -79,13 +79,19 @@
 	margin-top: oSpacingByName('s6');
 }
 
-.live-blog-post__controls .live-blog-post-controls__back-to-top {
+.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 .live-blog-post-controls__back-to-top:hover {
+.live-blog-post__controls .live-blog-post-controls__back-to-top-button {
+	background: unset;
+	border: unset;
+}
+
+.live-blog-post__controls .live-blog-post-controls__back-to-top-button:hover {
 	cursor: pointer;
 }
diff --git a/components/x-live-blog-post/storybook/index.jsx b/components/x-live-blog-post/storybook/index.jsx
index af253724e..b8528a179 100644
--- a/components/x-live-blog-post/storybook/index.jsx
+++ b/components/x-live-blog-post/storybook/index.jsx
@@ -35,10 +35,10 @@ ContentBody.args = {
 	publishedDate: '2020-05-13T18:52:28.000Z',
 	articleUrl: 'https://www.ft.com/content/2b665ec7-a88f-3998-8f39-5371f9c791ed',
 	showShareButtons: true,
-	backToTop: () => {}
+	backToTop: '#Top'
 }
 
-export const ContentBodyWithBackToTopString = (args) => {
+export const ContentBodyWithBackToTopButton = (args) => {
 	return (
 		<div className="story-container">
 			{dependencies && <BuildService dependencies={dependencies} />}
@@ -47,7 +47,7 @@ export const ContentBodyWithBackToTopString = (args) => {
 	)
 }
 
-ContentBodyWithBackToTopString.args = {
+ContentBodyWithBackToTopButton.args = {
 	title: 'Turkey’s virus deaths may be 25% higher than official figure',
 	byline: 'George Russell',
 	isBreakingNews: false,
@@ -60,5 +60,5 @@ ContentBodyWithBackToTopString.args = {
 	publishedDate: '2020-05-13T18:52:28.000Z',
 	articleUrl: 'https://www.ft.com/content/2b665ec7-a88f-3998-8f39-5371f9c791ed',
 	showShareButtons: true,
-	backToTop: '#Top'
+	backToTop: () => {}
 }

From df4338c12466b8845b4e48ffe90219e8b580dff7 Mon Sep 17 00:00:00 2001
From: Emmanuel Enwenede <emmanuel@blueeel.co.uk>
Date: Thu, 4 Nov 2021 15:24:26 +0000
Subject: [PATCH 13/13] added Fragment to host BactToTop component

---
 components/x-live-blog-post/src/LiveBlogPost.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/x-live-blog-post/src/LiveBlogPost.jsx b/components/x-live-blog-post/src/LiveBlogPost.jsx
index 6700e3ae6..0f217f2ef 100644
--- a/components/x-live-blog-post/src/LiveBlogPost.jsx
+++ b/components/x-live-blog-post/src/LiveBlogPost.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-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'
@@ -74,7 +74,7 @@ const LiveBlogPost = (props) => {
 			/>
 			<div className={styles['live-blog-post__controls']}>
 				{showShareButtons && <ShareButtons postId={id || postId} articleUrl={articleUrl} title={title} />}
-				{Boolean(BackToTopComponent) && <>{BackToTopComponent}</>}
+				{Boolean(BackToTopComponent) && <Fragment>{BackToTopComponent}</Fragment>}
 			</div>
 
 			{ad}