Merge pull request #15467 from guardian/ih/hosted-disclaimer

Add hosted content disclaimer component

Author: i-hardy

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

@@ -0,0 +1,22 @@
+import { HostedContentDisclaimer } from './HostedContentDisclaimer';
+import { Section } from './Section';
+
+export default {
+	component: HostedContentDisclaimer,
+	title: 'Components/HostedContentDisclaimer',
+};
+
+export const Default = () => {
+	return (
+		<Section
+			showSideBorders={false}
+			showTopBorder={false}
+			shouldCenter={false}
+			element="section"
+		>
+			<HostedContentDisclaimer />
+		</Section>
+	);
+};
+
+Default.storyName = 'default';

dotcom-rendering/src/components/HostedContentDisclaimer.tsx

@@ -0,0 +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 (
+		<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,13 +4,13 @@ import {
 	from,
 	palette as sourcePalette,
 	space,
-	textSans12,
 } from '@guardian/source/foundations';
 import { ArticleBody } from '../components/ArticleBody';
 import { ArticleContainer } from '../components/ArticleContainer';
 import { ArticleHeadline } from '../components/ArticleHeadline';
 import { CallToActionAtom } from '../components/CallToActionAtom';
 import { Caption } from '../components/Caption';
+import { HostedContentDisclaimer } from '../components/HostedContentDisclaimer';
 import { HostedContentHeader } from '../components/HostedContentHeader';
 import { Island } from '../components/Island';
 import { MainMedia } from '../components/MainMedia';
@@ -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}>