diff --git a/dotcom-rendering/src/components/BrandingLabel.tsx b/dotcom-rendering/src/components/BrandingLabel.tsx index a7fb3f15848..51645870404 100644 --- a/dotcom-rendering/src/components/BrandingLabel.tsx +++ b/dotcom-rendering/src/components/BrandingLabel.tsx @@ -102,13 +102,8 @@ const imageAdvertisingPartnerStyles = css` `; const hostedLogoImageStyles = css` - width: 80px; + width: 132px; height: auto; - - ${from.desktop} { - width: 132px; - height: auto; - } `; /** diff --git a/dotcom-rendering/src/components/HostedContentHeader.stories.tsx b/dotcom-rendering/src/components/HostedContentHeader.stories.tsx index 93127bab0e9..cc761882e88 100644 --- a/dotcom-rendering/src/components/HostedContentHeader.stories.tsx +++ b/dotcom-rendering/src/components/HostedContentHeader.stories.tsx @@ -1,9 +1,11 @@ import { palette as sourcePalette } from '@guardian/source/foundations'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; +import type { Branding } from '../types/branding'; import { HostedContentHeader } from './HostedContentHeader'; import type { Props as HostedContentHeaderProps } from './HostedContentHeader'; import { Section } from './Section'; -export default { +const meta = { component: HostedContentHeader, title: 'Components/HostedContentHeader', args: { @@ -17,15 +19,14 @@ export default { height: 575, }, link: 'https://www.wearestillin.com/', + label: 'Paid for by', }, aboutThisLink: 'https://www.theguardian.com/info/2016/jan/25/content-funding', hostedCampaignColour: '#d90c1f', - }, + } satisfies Branding, }, -}; -export const Default = (args: HostedContentHeaderProps) => { - return ( + render: (args: HostedContentHeaderProps) => (
{ shouldCenter={false} backgroundColour={sourcePalette.neutral[7]} padSides={false} - element="aside" + element="header" > - +
- ); -}; -Default.storyName = 'default'; + ), +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default = {} satisfies Story; diff --git a/dotcom-rendering/src/components/HostedContentHeader.tsx b/dotcom-rendering/src/components/HostedContentHeader.tsx index 953566440af..2ad09b23eb4 100644 --- a/dotcom-rendering/src/components/HostedContentHeader.tsx +++ b/dotcom-rendering/src/components/HostedContentHeader.tsx @@ -1,73 +1,94 @@ import { css } from '@emotion/react'; import { + breakpoints, from, palette as sourcePalette, space, - textSans15, - textSans17, + textSans14, textSansBold12, textSansBold14, visuallyHidden, } from '@guardian/source/foundations'; -import { SvgGuardianLogo } from '@guardian/source/react-components'; +import { + Button, + SvgGuardianLogo, + SvgInfoRound, +} from '@guardian/source/react-components'; import { nestedOphanComponents } from '../lib/ophan-helpers'; import type { Branding } from '../types/branding'; import { BrandingLabel } from './BrandingLabel'; export type Props = { branding: Branding; - accentColor?: string; }; -const HOSTED_CONTENT_HEIGHT_MOBILE = 48; -const HOSTED_CONTENT_HEIGHT_DESKTOP = 58; - const headerWrapperStyles = css` - position: relative; display: flex; justify-content: space-between; width: 100%; margin: 0 auto; - padding: 0; - height: ${HOSTED_CONTENT_HEIGHT_MOBILE}px; + padding: 0 10px; + height: 48px; color: ${sourcePalette.neutral[100]}; + ${from.mobileLandscape} { + padding: 0 20px; + } + ${from.tablet} { - height: ${HOSTED_CONTENT_HEIGHT_DESKTOP}px; + height: 58px; + } + + ${from.tablet} { + width: ${breakpoints.tablet}px; } ${from.desktop} { - max-width: 61.25rem; + width: ${breakpoints.desktop}px; } ${from.leftCol} { - max-width: 71.25rem; + width: ${breakpoints.leftCol}px; } ${from.wide} { - max-width: 81.25rem; + width: ${breakpoints.wide}px; } `; -const hostedByStyles = css` - ${textSansBold12}; - display: block; - margin-left: -51px; - margin-bottom: -11px; - letter-spacing: 0.03125rem; - color: ${sourcePalette.neutral[73]}; +const brandingStyles = css` + display: flex; + width: 132px; +`; - ${from.tablet} { - ${textSansBold14}; - margin-left: -60px; +const advertiserContentStyles = css` + min-height: 24px; + width: 100%; + align-self: flex-end; + display: flex; + justify-content: space-around; + align-items: center; + ${textSans14}; + /** Hard-coded to fit. TODO - address this */ + font-size: 13px; + padding: 0 2px; + + button { + width: 16px; + height: 16px; } `; const logoStyles = css` - position: relative; - display: flex; align-self: end; - margin-bottom: 1px; + padding-bottom: ${space[1]}px; + + a { + cursor: pointer; + text-decoration: none; + display: flex; + align-items: flex-end; + } svg { width: 94px; @@ -79,157 +100,33 @@ const logoStyles = css` } `; -const titleStyles = css` - ${textSansBold14}; - position: relative; - height: auto; - line-height: 0.945rem; - padding: 0.3125rem 0.375rem 0.25rem; - letter-spacing: 0.03125rem; +const hostedByStyles = css` + ${textSansBold12}; + display: block; + color: ${sourcePalette.neutral[97]}; + margin-right: ${space[1]}px; - ${from.desktop} { - text-align: center; - margin: 2px 0; + ${from.tablet} { + ${textSansBold14}; } `; const badgeWrapperStyles = css` position: absolute; display: block; - width: 80px; + width: 132px; height: auto; top: 100%; text-align: center; - z-index: 10; - - ${from.desktop} { - width: 132px; - height: auto; - } + z-index: 1; `; -const HeaderWrapper = ({ children }: { children: React.ReactNode }) => ( -
{children}
-); - -const Left = ({ children }: { children: React.ReactNode }) => ( -
- {children} -
-); - -const Right = ({ children }: { children: React.ReactNode }) => ( -
- {children} -
-); - -const HeaderSection = ({ - children, - isFirst, -}: { - children: React.ReactNode; - isFirst?: boolean; -}) => ( -
- {children} -
-); - -const TitleAndBadge = ({ accentColor, branding }: Props) => ( - <> -
-

Advertiser content

-
- -
- -
- -); - -{ - /* TODO: waiting for design confirmation so it's just a placeholder for now */ -} -const About = () => ( -
-

- About -

-
-); - -{ - /* Can't reuse Logo.tsx until we add a new palette to work with hosted. The color doesn't work with palette --masthead-nav-link-text */ -} +/** + * Can't reuse general Logo.tsx until we add a new palette to work with hosted. + * The color doesn't work with palette --masthead-nav-link-text + */ const Logo = () => ( - + ( ); -const HostedContentLogo = () => ( -
-
- -
-
-); - -export const HostedContentHeader = ({ branding, accentColor }: Props) => { +export const HostedContentHeader = ({ branding }: Props) => { + const accentColor = + branding.hostedCampaignColour ?? sourcePalette.neutral[38]; return ( - - - - +
+
+

Advertiser content

+ {/** TODO - add button action ie on click/on hover handlers */} +
+ +
+ +
+
+ +
+ +
+ ); }; diff --git a/dotcom-rendering/src/layouts/HostedArticleLayout.tsx b/dotcom-rendering/src/layouts/HostedArticleLayout.tsx index 3e1e0a9a541..cada7568622 100644 --- a/dotcom-rendering/src/layouts/HostedArticleLayout.tsx +++ b/dotcom-rendering/src/layouts/HostedArticleLayout.tsx @@ -83,12 +83,9 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => { shouldCenter={false} backgroundColour={sourcePalette.neutral[7]} padSides={false} - element="aside" + element="header" > - + ) : null} diff --git a/dotcom-rendering/src/layouts/HostedGalleryLayout.tsx b/dotcom-rendering/src/layouts/HostedGalleryLayout.tsx index a26ddeb2af6..792acaadd6e 100644 --- a/dotcom-rendering/src/layouts/HostedGalleryLayout.tsx +++ b/dotcom-rendering/src/layouts/HostedGalleryLayout.tsx @@ -58,13 +58,10 @@ export const HostedGalleryLayout = (props: WebProps | AppProps) => { showTopBorder={false} shouldCenter={false} backgroundColour={sourcePalette.neutral[7]} - padSides={false} - element="aside" + padSides={true} + element="header" > - + ) : null}