From 8965e8a226e177894d5e18f8f2ce8cb7cdbb6d4f Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Mon, 10 Jun 2024 15:01:17 +0100 Subject: [PATCH 1/4] Add stories for logo styling in branding for Advertising partner --- .../components/ArticleMeta.apps.stories.tsx | 57 +++++++++++++++++++ .../src/components/ArticleMeta.stories.tsx | 54 ++++++++++++++++++ .../src/components/FrontSection.stories.tsx | 42 +++++++++++++- 3 files changed, 152 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/ArticleMeta.apps.stories.tsx b/dotcom-rendering/src/components/ArticleMeta.apps.stories.tsx index 18cd5af65eb..31033d38766 100644 --- a/dotcom-rendering/src/components/ArticleMeta.apps.stories.tsx +++ b/dotcom-rendering/src/components/ArticleMeta.apps.stories.tsx @@ -76,6 +76,31 @@ const branding: BrandingType = { 'https://www.theguardian.com/environment/2023/jan/06/about-animals-farmed-investigating-modern-farming-around-the-world', }; +const brandingForAdvertisingPartner: BrandingType = { + brandingType: { name: 'sponsored' }, + sponsorName: 'theguardian.org', + logo: { + src: 'https://static.theguardian.com/commercial/sponsor/19/Dec/2022/57ba1d00-b2bd-4f6d-ba35-15a82b8d9507-0094b90a-bdb8-4e97-b866-dcf49179b29d-theguardian.org.png', + dimensions: { + width: 280, + height: 180, + }, + link: 'https://theguardian.org/', + label: 'Advertising partner', + }, + logoForDarkBackground: { + src: 'https://static.theguardian.com/commercial/sponsor/19/Dec/2022/58a1e08d-cd4a-47a5-966a-4846b0461642-46629471-cb0b-4c59-9a06-1ef23778b41f-theguardian.org2.png', + dimensions: { + width: 280, + height: 180, + }, + link: 'https://theguardian.org/', + label: 'Advertising partner', + }, + aboutThisLink: + 'https://www.theguardian.com/environment/2023/jan/06/about-animals-farmed-investigating-modern-farming-around-the-world', +}; + export default { component: ArticleMetaApps, title: 'Components/ArticleMetaApps', @@ -329,3 +354,35 @@ ArticleAppsWithBrandingStory.parameters = { config: { renderingTarget: 'Apps' }, }; ArticleAppsWithBrandingStory.decorators = [splitTheme([defaultFormat])]; + +export const ArticleAppsWithBrandingStoryForAdvertisingPartner: StoryObj = ({ + format, + isCommentable = true, +}: StoryArgs) => { + return ( + + + + ); +}; +/** @see /dotcom-rendering/docs/development/storybook.md */ +ArticleAppsWithBrandingStoryForAdvertisingPartner.args = { + format: defaultFormat, +}; +ArticleAppsWithBrandingStoryForAdvertisingPartner.parameters = { + config: { renderingTarget: 'Apps', updateLogoAdPartnerSwitch: true }, +}; +ArticleAppsWithBrandingStoryForAdvertisingPartner.decorators = [ + splitTheme([defaultFormat]), +]; diff --git a/dotcom-rendering/src/components/ArticleMeta.stories.tsx b/dotcom-rendering/src/components/ArticleMeta.stories.tsx index 18162e7aa63..4c501acc644 100644 --- a/dotcom-rendering/src/components/ArticleMeta.stories.tsx +++ b/dotcom-rendering/src/components/ArticleMeta.stories.tsx @@ -120,6 +120,31 @@ const branding: BrandingType = { 'https://www.theguardian.com/environment/2023/jan/06/about-animals-farmed-investigating-modern-farming-around-the-world', }; +const brandingForAdvertisingPartner: BrandingType = { + brandingType: { name: 'sponsored' }, + sponsorName: 'theguardian.org', + logo: { + src: 'https://static.theguardian.com/commercial/sponsor/19/Dec/2022/57ba1d00-b2bd-4f6d-ba35-15a82b8d9507-0094b90a-bdb8-4e97-b866-dcf49179b29d-theguardian.org.png', + dimensions: { + width: 280, + height: 180, + }, + link: 'https://theguardian.org/', + label: 'Advertising partner', + }, + logoForDarkBackground: { + src: 'https://static.theguardian.com/commercial/sponsor/19/Dec/2022/58a1e08d-cd4a-47a5-966a-4846b0461642-46629471-cb0b-4c59-9a06-1ef23778b41f-theguardian.org2.png', + dimensions: { + width: 280, + height: 180, + }, + link: 'https://theguardian.org/', + label: 'Advertising partner', + }, + aboutThisLink: + 'https://www.theguardian.com/environment/2023/jan/06/about-animals-farmed-investigating-modern-farming-around-the-world', +}; + export const Branding: StoryObj = ({ format }: StoryArgs) => { return ( @@ -143,6 +168,35 @@ Branding.args = { format: defaultFormat }; Branding.parameters = { config: { darkModeAvailable: true } }; Branding.decorators = [browserThemeDecorator(defaultFormat)]; +export const BrandingForAdvertisingPartner: StoryObj = ({ + format, +}: StoryArgs) => { + return ( + + + + ); +}; +BrandingForAdvertisingPartner.args = { format: defaultFormat }; +BrandingForAdvertisingPartner.parameters = { + config: { darkModeAvailable: true, updateLogoAdPartnerSwitch: true }, +}; +BrandingForAdvertisingPartner.decorators = [ + browserThemeDecorator(defaultFormat), +]; + export const BrandingLiveBlog: StoryObj = ({ format }: StoryArgs) => { return (
{ TreatsStory.storyName = 'with treats and date header'; /** - * Use the same logo for each of the stories with branding + * Use the same logo for each of the stories with branding except stories for Advertising partner and Exclusive advertising partner labels */ const logo = { src: 'https://static.theguardian.com/commercial/sponsor/28/Oct/2020/daa941da-14fd-46cc-85cb-731ce59050ee-Grounded_badging-280x180.png', @@ -277,6 +277,16 @@ const logo = { label: 'Paid for by', }; +const logoForAdvertisingPartner = { + src: 'https://static.theguardian.com/commercial/sponsor/28/Oct/2020/daa941da-14fd-46cc-85cb-731ce59050ee-Grounded_badging-280x180.png', + dimensions: { + width: 140, + height: 90, + }, + link: '/', + label: 'Advertising partner', +}; + export const WithSponsoredBranding = () => { return ( { }; WithSponsoredBranding.storyName = 'with sponsored branding'; +export const WithSponsoredBrandingAdPartnerLabel = () => { + return ( + + + + ); +}; +WithSponsoredBrandingAdPartnerLabel.storyName = + 'with sponsored branding for Advertising partner'; + export const WithPaidBranding = () => { return ( Date: Mon, 10 Jun 2024 17:54:38 +0100 Subject: [PATCH 2/4] Update the max-width so it would work with the story --- dotcom-rendering/src/components/Branding.importable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/dotcom-rendering/src/components/Branding.importable.tsx b/dotcom-rendering/src/components/Branding.importable.tsx index 25bd2064c62..570df210c2c 100644 --- a/dotcom-rendering/src/components/Branding.importable.tsx +++ b/dotcom-rendering/src/components/Branding.importable.tsx @@ -68,6 +68,7 @@ const brandingLogoAdvertisingPartnerStyle = css` padding: 0; & img { display: block; + max-width: 140px; ${between.leftCol.and.wide} { max-width: 130px; } From 259b19019028b43da6a4c54ec501da25516baf0f Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Tue, 11 Jun 2024 10:30:12 +0100 Subject: [PATCH 3/4] Change isFrontBranding to true and add story for TagPages --- .../src/components/FrontSection.stories.tsx | 37 +++++++++++++++++-- 1 file changed, 34 insertions(+), 3 deletions(-) diff --git a/dotcom-rendering/src/components/FrontSection.stories.tsx b/dotcom-rendering/src/components/FrontSection.stories.tsx index 4662c829806..1732092aedf 100644 --- a/dotcom-rendering/src/components/FrontSection.stories.tsx +++ b/dotcom-rendering/src/components/FrontSection.stories.tsx @@ -315,7 +315,7 @@ export const WithSponsoredBranding = () => { }; WithSponsoredBranding.storyName = 'with sponsored branding'; -export const WithSponsoredBrandingAdPartnerLabel = () => { +export const WithSponsoredBrandingAdvertisingPartner = () => { return ( { editionId={'UK'} collectionBranding={{ kind: 'sponsored', - isFrontBranding: false, + isFrontBranding: true, branding: { brandingType: { name: 'sponsored', @@ -342,9 +342,40 @@ export const WithSponsoredBrandingAdPartnerLabel = () => { ); }; -WithSponsoredBrandingAdPartnerLabel.storyName = +WithSponsoredBrandingAdvertisingPartner.storyName = 'with sponsored branding for Advertising partner'; +export const WithSponsoredBrandingAdvertisingPartnerTagPages = () => { + return ( + + + + ); +}; +WithSponsoredBrandingAdvertisingPartnerTagPages.storyName = + 'with sponsored branding for Advertising partner TagPages'; + export const WithPaidBranding = () => { return ( Date: Tue, 11 Jun 2024 16:25:52 +0100 Subject: [PATCH 4/4] Changed isContainerBranding to true to show branding --- dotcom-rendering/src/components/FrontSection.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/FrontSection.stories.tsx b/dotcom-rendering/src/components/FrontSection.stories.tsx index 1732092aedf..4945a5dfb33 100644 --- a/dotcom-rendering/src/components/FrontSection.stories.tsx +++ b/dotcom-rendering/src/components/FrontSection.stories.tsx @@ -305,7 +305,7 @@ export const WithSponsoredBranding = () => { aboutThisLink: 'https://www.theguardian.com/global-development/2021/feb/21/about-the-rights-and-freedom-series', }, - isContainerBranding: false, + isContainerBranding: true, hasMultipleBranding: false, }} > @@ -394,7 +394,7 @@ export const WithPaidBranding = () => { aboutThisLink: 'https://www.theguardian.com/global-development/2021/feb/21/about-the-rights-and-freedom-series', }, - isContainerBranding: false, + isContainerBranding: true, hasMultipleBranding: false, }} >