fix top border and container spacing

Author: i-hardy

dotcom-rendering/src/components/HostedContentDisclaimer.stories.tsx

@@ -8,9 +8,15 @@ export default {
 
 export const Default = () => {
 	return (
-		<Section showSideBorders={false} showTopBorder={true} element="section">
+		<Section
+			showSideBorders={false}
+			showTopBorder={false}
+			shouldCenter={false}
+			element="section"
+		>
 			<HostedContentDisclaimer />
 		</Section>
 	);
 };
+
 Default.storyName = 'default';

dotcom-rendering/src/components/HostedContentDisclaimer.tsx

@@ -1,21 +1,31 @@
 import { css } from '@emotion/react';
 import {
 	palette as sourcePalette,
+	space,
 	textSans12,
 } from '@guardian/source/foundations';
 
+const containerStyles = css`
+	border-top: 2px solid ${sourcePalette.neutral[46]};
+	margin-top: ${space[4]}px;
+	padding-top: ${space[2]}px;
+`;
+
 const textStyles = css`
 	${textSans12};
 	color: ${sourcePalette.neutral[46]};
 `;
 
 export const HostedContentDisclaimer = () => {
 	return (
-		<p css={textStyles}>
-			This article was paid for, produced and controlled by the advertiser
-			rather than the publisher. It is subject to regulation by the
-			Advertising Standards Authority. This content is produced by the
-			advertiser with no involvement from Guardian News and Media staff.
-		</p>
+		<div css={containerStyles}>
+			<p css={textStyles}>
+				This article was paid for, produced and controlled by the
+				advertiser rather than the publisher. It is subject to
+				regulation by the Advertising Standards Authority. This content
+				is produced by the advertiser with no involvement from Guardian
+				News and Media staff.
+			</p>
+		</div>
 	);
 };

dotcom-rendering/src/layouts/HostedArticleLayout.tsx

@@ -4,7 +4,6 @@ import {
 	from,
 	palette as sourcePalette,
 	space,
-	textSans12,
 } from '@guardian/source/foundations';
 import { ArticleBody } from '../components/ArticleBody';
 import { ArticleContainer } from '../components/ArticleContainer';
@@ -25,6 +24,7 @@ import { palette } from '../palette';
 import type { Article } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { Stuck } from './lib/stickiness';
+import { HostedContentDisclaimer } from '../components/HostedContentDisclaimer';
 
 interface Props {
 	content: Article;
@@ -317,17 +317,8 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 										frontendData.isRightToLeftLang
 									}
 								/>
+								<HostedContentDisclaimer />
 							</ArticleContainer>
-
-							<span
-								css={css`
-									${textSans12}
-									color: ${sourcePalette.neutral[46]};
-									padding-bottom: ${space[4]}px;
-								`}
-							>
-								{'Placeholder - disclaimer text'}
-							</span>
 						</div>
 
 						<div css={onwardContentStyles}>