Add HostedContentHeader story and wrap the component in Stuck

Author: deedeeh

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

@@ -0,0 +1,27 @@
+import { palette as sourcePalette } from '@guardian/source/foundations';
+import { HostedContentHeader } from './HostedContentHeader';
+import { Section } from './Section';
+
+export default {
+	component: HostedContentHeader,
+	title: 'Components/HostedContentHeader',
+};
+
+export const Default = () => {
+	return (
+		<Section
+			fullWidth={true}
+			showSideBorders={false}
+			shouldCenter={false}
+			backgroundColour={sourcePalette.neutral[7]}
+			padSides={false}
+			element="aside"
+		>
+			<HostedContentHeader
+				accentColor={sourcePalette.brand[400]}
+				branding="Branding"
+			/>
+		</Section>
+	);
+};
+Default.storyName = 'default';

dotcom-rendering/src/components/HostedContentHeader.tsx

@@ -24,7 +24,7 @@ const headerWrapperStyles = css`
 	position: relative;
 	display: flex;
 	justify-content: space-between;
-	width: 100vw;
+	width: 100%;
 	margin: 0 auto;
 	padding: 0;
 	height: ${HOSTED_CONTENT_HEIGHT_MOBILE}rem;
@@ -41,13 +41,18 @@ const headerWrapperStyles = css`
 	${from.leftCol} {
 		max-width: 71.25rem;
 	}
+
+	${from.wide} {
+		max-width: 81.25rem;
+	}
 `;
 
 const hostedByStyles = css`
 	${textSansBold12};
 	margin-right: -9px;
 	letter-spacing: 0.03125rem;
-	color: rgba(255, 255, 255, 0.5);
+	color: ${sourcePalette
+		.neutral[73]}; // This is rgba in frontend but stylelint fails in CI as we should use source. Using neutral that passes AAA contrast instead.
 
 	${from.tablet} {
 		${textSansBold14};
@@ -58,15 +63,14 @@ const logoStyles = css`
 	position: relative;
 	display: flex;
 	align-self: end;
-	margin-right: 0.625rem;
 	margin-bottom: 1px;
 
 	svg {
 		width: 94px;
 		height: auto;
 
 		${from.tablet} {
-			width: 125px;
+			width: 120px;
 		}
 	}
 `;
@@ -86,6 +90,7 @@ export const Right = ({ children }: { children: React.ReactNode }) => (
 		css={css`
 			display: flex;
 			padding: ${space[1]}px 10px;
+			margin-right: 0.625rem;
 		`}
 	>
 		{children}

dotcom-rendering/src/layouts/HostedArticleLayout.tsx

@@ -1,8 +1,10 @@
 import { css } from '@emotion/react';
 import { palette as sourcePalette } from '@guardian/source/foundations';
 import { HostedContentHeader } from '../components/HostedContentHeader';
+import { Section } from '../components/Section';
 import { grid } from '../grid';
 import type { RenderingTarget } from '../types/renderingTarget';
+import { Stuck } from './lib/stickiness';
 
 interface Props {
 	renderingTarget: RenderingTarget;
@@ -24,16 +26,21 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 	return (
 		<>
 			{props.renderingTarget === 'Web' ? (
-				<div
-					css={css`
-						background-color: ${sourcePalette.neutral[7]};
-					`}
-				>
-					<HostedContentHeader
-						accentColor="#1b1f71"
-						branding="logo"
-					/>
-				</div>
+				<Stuck>
+					<Section
+						fullWidth={true}
+						showSideBorders={false}
+						shouldCenter={false}
+						backgroundColour={sourcePalette.neutral[7]}
+						padSides={false}
+						element="aside"
+					>
+						<HostedContentHeader
+							accentColor="#1b1f71"
+							branding="logo"
+						/>
+					</Section>
+				</Stuck>
 			) : null}
 			<main>
 				<header css={[grid.container]}>