Revert BackToTop to element to avoid breaking change

guardian · Jan 22, 2024 · d1cf15e · d1cf15e
1 parent 592088a
commit d1cf15e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 16 deletions.
diff --git a/...urce-react-components-development-kitchen/src/footer-with-contents/FooterWithContents.tsx b/...urce-react-components-development-kitchen/src/footer-with-contents/FooterWithContents.tsx
@@ -32,9 +32,7 @@ export const FooterWithContents = ({
 			<ContainerComponent {...footerContainerProps}>
 				<div css={contentWrapperStyles}>
 					{children}
-					<div css={backToTopStyles}>
-						<BackToTop />
-					</div>
+					<div css={backToTopStyles}>{BackToTop}</div>
 				</div>
 			</ContainerComponent>
 			<ContainerComponent

diff --git a/libs/@guardian/source-react-components/src/footer/BackToTop.stories.tsx b/libs/@guardian/source-react-components/src/footer/BackToTop.stories.tsx
@@ -2,12 +2,12 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { BackToTop } from './BackToTop';
 
 const meta: Meta<typeof BackToTop> = {
-	component: BackToTop,
+	component: () => BackToTop,
 	title: 'BackToTop',
 };
 
 export default meta;
 
-const Template: StoryFn<typeof BackToTop> = () => <BackToTop />;
+const Template: StoryFn<typeof BackToTop> = () => BackToTop;
 
 export const Default: StoryFn<typeof BackToTop> = Template.bind({});
diff --git a/libs/@guardian/source-react-components/src/footer/BackToTop.tsx b/libs/@guardian/source-react-components/src/footer/BackToTop.tsx
@@ -3,13 +3,11 @@ import { SvgChevronUpSingle } from '../../vendor/icons/SvgChevronUpSingle';
 import type { Theme } from '../@types/Theme';
 import { backToTop, backToTopIcon } from './styles';
 
-export const BackToTop = (): EmotionJSX.Element => {
-	return (
-		<a href="#top" css={(theme: Theme) => backToTop(theme.footer)}>
-			Back to top
-			<div css={(theme: Theme) => backToTopIcon(theme.footer)}>
-				<SvgChevronUpSingle />
-			</div>
-		</a>
-	);
-};
+export const BackToTop: EmotionJSX.Element = (
+	<a href="#top" css={(theme: Theme) => backToTop(theme.footer)}>
+		Back to top
+		<div css={(theme: Theme) => backToTopIcon(theme.footer)}>
+			<SvgChevronUpSingle />
+		</div>
+	</a>
+);
diff --git a/libs/@guardian/source-react-components/src/footer/Footer.tsx b/libs/@guardian/source-react-components/src/footer/Footer.tsx
@@ -45,7 +45,7 @@ export const Footer = ({
 				]}
 			>
 				<div css={(theme: Theme) => links(theme.footer)}>{children}</div>
-				{showBackToTop ? <BackToTop /> : ''}
+				{showBackToTop ? BackToTop : ''}
 			</div>
 			<small css={[copyright, showBackToTop ? copyrightExtraPadding : '']}>
 				&copy; 2021 Guardian News and Media Limited or its affiliated companies.