From 38160ae5a3cbd4709a7aa53102ae2ba6cdd0a08f Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Mon, 31 Oct 2022 10:23:19 +0000 Subject: [PATCH 01/18] initial refactor --- .../ClimateCrisisMomentBanner.stories.tsx | 1 + .../banners/common/BannerContentRenderer.tsx | 1 + .../modules/banners/common/BannerWrapper.tsx | 2 + .../src/modules/banners/common/types.tsx | 1 + .../MomentTemplateBanner.stories.tsx | 1 + .../momentTemplate/MomentTemplateBanner.tsx | 257 +++++++++--------- packages/server/src/api/bannerRouter.ts | 6 +- packages/shared/src/types/props/banner.ts | 1 + 8 files changed, 148 insertions(+), 122 deletions(-) diff --git a/packages/modules/src/modules/banners/climateCrisisMoment/ClimateCrisisMomentBanner.stories.tsx b/packages/modules/src/modules/banners/climateCrisisMoment/ClimateCrisisMomentBanner.stories.tsx index 21ad3453d..22a5d7575 100644 --- a/packages/modules/src/modules/banners/climateCrisisMoment/ClimateCrisisMomentBanner.stories.tsx +++ b/packages/modules/src/modules/banners/climateCrisisMoment/ClimateCrisisMomentBanner.stories.tsx @@ -53,4 +53,5 @@ ClimateCrisis.args = { }, }, numArticles: 50, + isMobile: false, }; diff --git a/packages/modules/src/modules/banners/common/BannerContentRenderer.tsx b/packages/modules/src/modules/banners/common/BannerContentRenderer.tsx index 86c33426d..a8ff7c79d 100644 --- a/packages/modules/src/modules/banners/common/BannerContentRenderer.tsx +++ b/packages/modules/src/modules/banners/common/BannerContentRenderer.tsx @@ -16,6 +16,7 @@ export const BannerContentRenderer: React.FC = ({ content, render, }) => { + console.log('BannerContentRenderer invoked') const { mainContent } = content; const mobileContent = content.mobileContent || mainContent; diff --git a/packages/modules/src/modules/banners/common/BannerWrapper.tsx b/packages/modules/src/modules/banners/common/BannerWrapper.tsx index a80ce5c58..8c8caf7ea 100644 --- a/packages/modules/src/modules/banners/common/BannerWrapper.tsx +++ b/packages/modules/src/modules/banners/common/BannerWrapper.tsx @@ -80,6 +80,7 @@ const withBannerData = ( tickerSettings, isSupporter, separateArticleCount, + isMobile, } = bannerProps; const [hasBeenSeen, setNode] = useHasBeenSeen( @@ -259,6 +260,7 @@ const withBannerData = ( isSupporter, numArticles, separateArticleCount, + isMobile, }; return (
diff --git a/packages/modules/src/modules/banners/common/types.tsx b/packages/modules/src/modules/banners/common/types.tsx index e804a51ab..f0b169026 100644 --- a/packages/modules/src/modules/banners/common/types.tsx +++ b/packages/modules/src/modules/banners/common/types.tsx @@ -65,6 +65,7 @@ export interface BannerRenderProps { fetchEmail?: () => Promise; tickerSettings?: TickerSettings; isSupporter?: boolean; + isMobile?: boolean; numArticles?: number; separateArticleCount?: boolean; } diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx index 9b65f690e..200f2bac0 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx @@ -106,6 +106,7 @@ GlobalNY.args = { }, }, numArticles: 50, + isMobile: true, }; const AusElectionBanner = bannerWrapper( diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx index ef1482e8f..dee314b8b 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx @@ -29,6 +29,7 @@ export function getMomentTemplateBanner( onSecondaryCtaClick, reminderTracking, separateArticleCount, + isMobile, }: BannerRenderProps): JSX.Element { const [isReminderActive, setIsReminderActive] = useState(false); @@ -37,71 +38,34 @@ export function getMomentTemplateBanner( setIsReminderActive(!isReminderActive); }; - const mobileReminderRef = useRef(null); - - useEffect(() => { - if (mobileReminderRef.current && isReminderActive) { - mobileReminderRef.current.scrollIntoView({ behavior: 'smooth' }); - } - }, [mobileReminderRef.current, isReminderActive]); - - return ( -
- -
- + console.log('isMobile?', isMobile); + if (isMobile) { + const mobileReminderRef = useRef(null); + + useEffect(() => { + if (mobileReminderRef.current && isReminderActive) { + mobileReminderRef.current.scrollIntoView({ behavior: 'smooth' }); + } + }, [mobileReminderRef.current, isReminderActive]); + + return ( +
+ +
- -
- - {hasVisual && ( -
- {templateSettings.imageSettings && ( - - )} - {templateSettings.alternativeVisual} -
- )} - -
- - - - - -
- - - -
-
- - -
{hasVisual && ( -
+
{templateSettings.imageSettings && ( )} + -
-
- -
+ +
- {separateArticleCount && numArticles !== undefined && numArticles > 5 && ( -
- +
+
- )} -
- -
+ {separateArticleCount && numArticles != null && numArticles > 5 && ( +
+ +
+ )} -
- -
+
+ +
+ +
+ +
+
-
- + -
{content.mobileContent.secondaryCta?.type === SecondaryCtaType.ContributionsReminder && @@ -166,9 +133,74 @@ export function getMomentTemplateBanner( /> )}
- +
+ ); + } else { + return ( +
+ +
+
+ +
+ + {hasVisual && ( +
+ {templateSettings.imageSettings && ( + + )} + {templateSettings.alternativeVisual} +
+ )} + +
+
+ +
+ + {separateArticleCount && numArticles != null && numArticles > 5 && ( +
+ +
+ )} + +
+ +
+ +
+ +
+
+
+ - {content.mainContent.secondaryCta?.type === SecondaryCtaType.ContributionsReminder && isReminderActive && ( @@ -177,12 +209,12 @@ export function getMomentTemplateBanner( trackReminderSetClick={reminderTracking.onReminderSetClick} setReminderCtaSettings={templateSettings.setReminderCtaSettings} /> - )} - -
- ); + ) + } +
+ ); + } } - return MomentTemplateBanner; } @@ -232,26 +264,13 @@ const styles = { padding-bottom: ${space[2]}px; ` : ''} - - ${from.tablet} { - display: none; - } `, visualContainer: css` - display: none; - - ${from.mobileMedium} { - display: block; - } - ${from.tablet} { - display: none; - } `, desktopVisualContainer: css` - display: none; + display: block; ${from.tablet} { - display: block; width: 238px; margin-left: ${space[3]}px; } @@ -287,12 +306,8 @@ const styles = { } `, desktopHeaderContainer: css` - display: none; + width: 80%; margin-top: ${space[2]}px; - - ${from.tablet} { - display: block; - } `, articleCountContainer: css` margin-top: ${space[4]}px; diff --git a/packages/server/src/api/bannerRouter.ts b/packages/server/src/api/bannerRouter.ts index 3620908ae..fa7c4c4d9 100644 --- a/packages/server/src/api/bannerRouter.ts +++ b/packages/server/src/api/bannerRouter.ts @@ -70,10 +70,13 @@ export const buildBannerRouter = ( return {}; } + const fromMobileDevice = isMobile(req); + const selectedTest = selectBannerTest( targeting, pageTracking, - isMobile(req), + // isMobile(req), + fromMobileDevice, baseUrl(req), bannerTests.get(), bannerDeployTimes, @@ -113,6 +116,7 @@ export const buildBannerRouter = ( tickerSettings, separateArticleCount: variant.separateArticleCount, prices: productPrices.get(), + isMobile: fromMobileDevice, }; return { diff --git a/packages/shared/src/types/props/banner.ts b/packages/shared/src/types/props/banner.ts index 12857877c..238c6e8a0 100644 --- a/packages/shared/src/types/props/banner.ts +++ b/packages/shared/src/types/props/banner.ts @@ -64,6 +64,7 @@ export interface BannerProps extends EmotionJSX.IntrinsicAttributes { numArticles?: number; hasOptedOutOfArticleCount?: boolean; email?: string; + isMobile?: boolean; fetchEmail?: () => Promise; separateArticleCount?: boolean; prices?: Prices; From 57b1dc86c4b3984061196be1707f90f9c07b1f1a Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Mon, 31 Oct 2022 17:11:39 +0000 Subject: [PATCH 02/18] remove unnecessary Hide elements; investigate image styling --- .../MomentTemplateBanner.stories.tsx | 2 +- .../momentTemplate/MomentTemplateBanner.tsx | 32 ++--- .../components/MomentTemplateBannerBody.tsx | 23 +--- .../components/MomentTemplateBannerCtas.tsx | 125 ++++++------------ .../components/MomentTemplateBannerHeader.tsx | 8 +- .../src/modules/shared/ResponsiveImage.tsx | 7 +- 6 files changed, 68 insertions(+), 129 deletions(-) diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx index 200f2bac0..20f22fd40 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx @@ -106,7 +106,7 @@ GlobalNY.args = { }, }, numArticles: 50, - isMobile: true, + isMobile: false, }; const AusElectionBanner = bannerWrapper( diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx index dee314b8b..ede2fd269 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx @@ -57,13 +57,6 @@ export function getMomentTemplateBanner( SecondaryCtaType.ContributionsReminder, )} > -
- -
- {hasVisual && (
{templateSettings.imageSettings && ( @@ -74,6 +67,13 @@ export function getMomentTemplateBanner( {templateSettings.alternativeVisual}
)} + +
+ +
@@ -82,8 +82,7 @@ export function getMomentTemplateBanner(
@@ -99,8 +98,7 @@ export function getMomentTemplateBanner(
@@ -178,8 +174,7 @@ export function getMomentTemplateBanner(
- - {createBannerBodyCopy( - mobileContent.paragraphs, - mobileContent.highlightedText, - styles, - )} - - - - {createBannerBodyCopy(mainContent.paragraphs, mainContent.highlightedText, styles)} - + {createBannerBodyCopy( + content.paragraphs, + content.highlightedText, + styles, + )}
); } diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx index 9e304d85a..4037ae5ff 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { css } from '@emotion/react'; import { neutral, space } from '@guardian/src-foundations'; -import { Hide } from '@guardian/src-layout'; import { Button, LinkButton } from '@guardian/src-button'; import { SecondaryCtaType } from '@sdc/shared/types'; import { BannerRenderedContent } from '../../common/types'; @@ -12,8 +11,7 @@ import { from } from '@guardian/src-foundations/mq'; // ---- Component ---- // interface MomentTemplateBannerCtasProps { - mainContent: BannerRenderedContent; - mobileContent: BannerRenderedContent; + content: BannerRenderedContent; onPrimaryCtaClick: () => void; onSecondaryCtaClick: () => void; onReminderCtaClick: () => void; @@ -22,8 +20,7 @@ interface MomentTemplateBannerCtasProps { } export function MomentTemplateBannerCtas({ - mainContent, - mobileContent, + content, onPrimaryCtaClick, onSecondaryCtaClick, onReminderCtaClick, @@ -33,89 +30,45 @@ export function MomentTemplateBannerCtas({ return (
- -
- {mobileContent.primaryCta && ( - - {mobileContent.primaryCta.ctaText} - - )} - - {mobileContent.secondaryCta?.type === SecondaryCtaType.Custom && ( - - {mobileContent.secondaryCta.cta.ctaText} - - )} - - {mobileContent.secondaryCta?.type === - SecondaryCtaType.ContributionsReminder && ( - - )} -
- - - -
- {mainContent.primaryCta && ( - - {mainContent.primaryCta.ctaText} - - )} - - {mainContent.secondaryCta?.type === SecondaryCtaType.Custom && ( - - {mainContent.secondaryCta.cta.ctaText} - - )} - - {mainContent.secondaryCta?.type === - SecondaryCtaType.ContributionsReminder && ( - - )} -
- +
+ {content.primaryCta && ( + + {content.primaryCta.ctaText} + + )} + + {content.secondaryCta?.type === SecondaryCtaType.Custom && ( + + {content.secondaryCta.cta.ctaText} + + )} + + {content.secondaryCta?.type === + SecondaryCtaType.ContributionsReminder && ( + + )} +
-
- {mobileContent.primaryCta && } - {mainContent.primaryCta && } -
+
{content.primaryCta && }
); } diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerHeader.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerHeader.tsx index c932af062..257b2e716 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerHeader.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerHeader.tsx @@ -3,26 +3,20 @@ import { css } from '@emotion/react'; import { from } from '@guardian/src-foundations/mq'; import { headline } from '@guardian/src-foundations/typography'; import { neutral } from '@guardian/src-foundations/palette'; -import { Hide } from '@guardian/src-layout'; // ---- Component ---- // interface MomentTemplateBannerHeaderProps { heading: JSX.Element | JSX.Element[] | null; - mobileHeading: JSX.Element | JSX.Element[] | null; } export function MomentTemplateBannerHeader({ heading, - mobileHeading, }: MomentTemplateBannerHeaderProps): JSX.Element { return (
-

- {mobileHeading} - {heading} -

+

{heading}

); diff --git a/packages/modules/src/modules/shared/ResponsiveImage.tsx b/packages/modules/src/modules/shared/ResponsiveImage.tsx index 7d5636f43..997306ea8 100644 --- a/packages/modules/src/modules/shared/ResponsiveImage.tsx +++ b/packages/modules/src/modules/shared/ResponsiveImage.tsx @@ -1,6 +1,11 @@ import React, { ReactElement } from 'react'; +import { css } from '@emotion/react'; +const styles = css` + border: 1px solid blue; +`; export type ImageAttrs = { + url: string; media: string; alt?: string; @@ -20,7 +25,7 @@ export const ResponsiveImage: React.FC = ({ baseImage, }: ResponsiveImageProps) => { return ( - + {images.map(createSource)} {baseImage.alt} From f8a85ef207cd3d31bf4357d18f8e1dca466f418f Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Tue, 1 Nov 2022 14:20:16 +0000 Subject: [PATCH 03/18] initial image positioning experiement; sign-in component --- .../MomentTemplateBanner.stories.tsx | 7 +++ .../momentTemplate/MomentTemplateBanner.tsx | 32 +++++++--- .../components/MomentTemplateBannerVisual.tsx | 19 +++++- .../components/MomentTemplateSignInCta.tsx | 59 +++++++++++++++++++ .../banners/momentTemplate/settings.ts | 3 + packages/shared/src/types/props/shared.ts | 6 ++ 6 files changed, 116 insertions(+), 10 deletions(-) create mode 100644 packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx index 20f22fd40..57d9a37fa 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx @@ -52,6 +52,9 @@ const GlobalNYBanner = bannerWrapper( mainUrl: 'https://media.guim.co.uk/a1087c3f7e6da4f1e97947acccdd7f0d15f327d4/0_0_142_124/140.png', altText: 'Guardian logo being held up by supporters of the Guardian', + mobilePosition: 'end', + tabletPosition: 'end', + desktopPosition: 'end', }, }), 'global-new-year-banner', @@ -172,7 +175,11 @@ const AusElectionBanner = bannerWrapper( 'https://i.guim.co.uk/img/media/4fa98ca4b70ee9b21b74d16f2586b5d6c513297f/0_319_2836_1837/2000.png?quality=85&s=3ef36bd5ab569f310b0f975372f54d29', altText: 'Head shots of Anthony Albanese, leader of the Australian Labor Party, and Scott Morrison, current Prime Minister and leader of the Liberal Party of Australia, who are running for the office of Prime Minister in the Australian federal election, to be held on 21 May 2022.', + mobilePosition: 'end', + tabletPosition: 'center', + desktopPosition: 'end', }, + signInComponentAfter: 'BODY', }), 'aus-moment-banner', ); diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx index ede2fd269..fcd2c14b4 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx @@ -13,6 +13,7 @@ import { BannerTemplateSettings } from './settings'; import { from } from '@guardian/src-foundations/mq'; import { SecondaryCtaType } from '@sdc/shared/types'; import { MomentTemplateBannerReminder } from './components/MomentTemplateBannerReminder'; +import { MomentTemplateSignInCta } from './components/MomentTemplateSignInCta'; // ---- Banner ---- // @@ -38,6 +39,8 @@ export function getMomentTemplateBanner( setIsReminderActive(!isReminderActive); }; + const signInComponent = templateSettings.signInComponentAfter; + console.log('isMobile?', isMobile); if (isMobile) { const mobileReminderRef = useRef(null); @@ -137,13 +140,6 @@ export function getMomentTemplateBanner(
-
- -
- {hasVisual && (
{templateSettings.imageSettings && ( @@ -155,6 +151,13 @@ export function getMomentTemplateBanner(
)} +
+ +
+
+ {signInComponent === 'BODY' && ( + {}} + signInUrlTrackingValue={'SIGN_IN_FROM_TEMPLATE_BANNER'} + /> + )} +
+ + {signInComponent === 'CTA' && ( + {}} + signInUrlTrackingValue={'SIGN_IN_FROM_TEMPLATE_BANNER'} + /> + )} +
diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerVisual.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerVisual.tsx index 651e2a129..c0a2f9839 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerVisual.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerVisual.tsx @@ -37,7 +37,11 @@ export function MomentTemplateBannerVisual({ } return ( -
+
); @@ -45,10 +49,15 @@ export function MomentTemplateBannerVisual({ // ---- Styles ---- // -const container = css` +const container = ( + mobilePosition: string, + tabletPosition: string, + desktopPosition: string, +) => css` height: 140px; display: flex; justify-content: center; + align-items: ${mobilePosition}; img { height: 100%; @@ -59,6 +68,10 @@ const container = css` ${from.tablet} { height: 100%; width: 100%; - align-items: center; + align-items: ${tabletPosition}; + } + + ${from.desktop} { + align-items: ${desktopPosition}; } `; diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx new file mode 100644 index 000000000..cd80c5614 --- /dev/null +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { css } from '@emotion/react'; +import { neutral, space } from '@guardian/src-foundations'; +import { Link } from '@guardian/src-link'; + +/* +Existing SignIn URLs + +ContributionsWithSignIn +'https://profile.theguardian.com/signin??utm_source=gdnwb&utm_medium=banner&utm_campaign=SigninContributionsBanner_Existing&CMP_TU=mrtn&CMP_BUNIT=subs' + +DigitalSubscriptionsBanner +'https://profile.theguardian.com/signin?utm_source=gdnwb&utm_medium=banner&utm_campaign=SubsBanner_Existing&CMP_TU=mrtn&CMP_BUNIT=subs' + +GuardianWeeklyBanner +'https://profile.theguardian.com/signin?utm_source=gdnwb&utm_medium=banner&utm_campaign=SubsBanner_gWeekly&CMP_TU=mrtn&CMP_BUNIT=subs' + +... Which gives us a more general sign-in URL of +`https://profile.theguardian.com/signin?utm_source=gdnwb&utm_medium=banner&utm_campaign=${BANNER_TEMPLATE_AND_OR_POSSIBLY_CAMPAIGN_STRING}&CMP_TU=mrtn&CMP_BUNIT=subs` +*/ +// const signInUrl = +// 'https://profile.theguardian.com/signin?utm_source=gdnwb&utm_medium=banner&utm_campaign=SigninContributionsBanner_Existing&CMP_TU=mrtn&CMP_BUNIT=subs'; + +const boldText = css` + font-family: inherit; + font-size: inherit; + font-weight: 700; +`; + +const signInCta = css` + margin: ${space[4]}px 0; +`; + +type MomentTemplateSignInCtaProps = { + onSignInClick?: () => void; + signInUrlTrackingValue: string; +}; + +export const MomentTemplateSignInCta: React.FC = ({ + onSignInClick, + signInUrlTrackingValue, +}) => { + const signInUrl = `https://profile.theguardian.com/signin?utm_source=gdnwb&utm_medium=banner&utm_campaign=${signInUrlTrackingValue}&CMP_TU=mrtn&CMP_BUNIT=subs`; + + return ( +

+ Already a supporter?{' '} + + Sign in + {' '} + and we promise to ask you less. +

+ ); +}; diff --git a/packages/modules/src/modules/banners/momentTemplate/settings.ts b/packages/modules/src/modules/banners/momentTemplate/settings.ts index de50b2d64..2a2ab0b78 100644 --- a/packages/modules/src/modules/banners/momentTemplate/settings.ts +++ b/packages/modules/src/modules/banners/momentTemplate/settings.ts @@ -17,6 +17,8 @@ export interface HighlightedTextSettings { highlightColour?: string; } +type SignInComponentAfter = 'BODY' | 'CTA'; + export interface BannerTemplateSettings { backgroundColour: string; primaryCtaSettings: CtaSettings; @@ -27,4 +29,5 @@ export interface BannerTemplateSettings { articleCountTextColour?: string; imageSettings?: Image; alternativeVisual?: ReactNode; + signInComponentAfter?: SignInComponentAfter; } diff --git a/packages/shared/src/types/props/shared.ts b/packages/shared/src/types/props/shared.ts index 0eafcfbb0..308de15c8 100644 --- a/packages/shared/src/types/props/shared.ts +++ b/packages/shared/src/types/props/shared.ts @@ -139,6 +139,9 @@ export interface Image { leftColUrl?: string; wideUrl?: string; altText: string; + mobilePosition?: string; + tabletPosition?: string; + desktopPosition?: string; } export const imageSchema = z.object({ @@ -149,6 +152,9 @@ export const imageSchema = z.object({ leftColUrl: z.string().optional(), wideUrl: z.string().optional(), altText: z.string(), + mobilePosition: z.string().optional(), + tabletPosition: z.string().optional(), + desktopPosition: z.string().optional(), }); export interface BylineWithImage { From e5a6877c572a9fdd9fe57ad4e4642b3ef4ce8f4a Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Tue, 1 Nov 2022 14:24:39 +0000 Subject: [PATCH 04/18] linting --- .../banners/common/BannerContentRenderer.tsx | 2 +- .../momentTemplate/MomentTemplateBanner.tsx | 16 +++++++--------- .../components/MomentTemplateBannerBody.tsx | 6 +----- .../components/MomentTemplateBannerCtas.tsx | 3 +-- .../components/MomentTemplateBannerVisual.tsx | 18 ++++++++---------- .../components/MomentTemplateSignInCta.tsx | 2 +- .../src/modules/shared/ResponsiveImage.tsx | 1 - 7 files changed, 19 insertions(+), 29 deletions(-) diff --git a/packages/modules/src/modules/banners/common/BannerContentRenderer.tsx b/packages/modules/src/modules/banners/common/BannerContentRenderer.tsx index a8ff7c79d..c4cadb653 100644 --- a/packages/modules/src/modules/banners/common/BannerContentRenderer.tsx +++ b/packages/modules/src/modules/banners/common/BannerContentRenderer.tsx @@ -16,7 +16,7 @@ export const BannerContentRenderer: React.FC = ({ content, render, }) => { - console.log('BannerContentRenderer invoked') + console.log('BannerContentRenderer invoked'); const { mainContent } = content; const mobileContent = content.mobileContent || mainContent; diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx index fcd2c14b4..f4da8c68a 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect, useRef } from 'react'; import { css } from '@emotion/react'; import { neutral, space } from '@guardian/src-foundations'; -import { Container, Hide } from '@guardian/src-layout'; +import { Container } from '@guardian/src-layout'; import { BannerRenderProps } from '../common/types'; import { MomentTemplateBannerHeader } from './components/MomentTemplateBannerHeader'; import { MomentTemplateBannerArticleCount } from './components/MomentTemplateBannerArticleCount'; @@ -28,6 +28,7 @@ export function getMomentTemplateBanner( numArticles, onCtaClick, onSecondaryCtaClick, + onSignInClick, reminderTracking, separateArticleCount, isMobile, @@ -81,7 +82,6 @@ export function getMomentTemplateBanner(
-
{signInComponent === 'BODY' && ( - {}} + )} @@ -203,12 +203,11 @@ export function getMomentTemplateBanner( {signInComponent === 'CTA' && ( - {}} + )} -
@@ -221,8 +220,7 @@ export function getMomentTemplateBanner( trackReminderSetClick={reminderTracking.onReminderSetClick} setReminderCtaSettings={templateSettings.setReminderCtaSettings} /> - ) - } + )}
); } diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerBody.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerBody.tsx index f0190a6d1..088b0c862 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerBody.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerBody.tsx @@ -23,11 +23,7 @@ export function MomentTemplateBannerBody({ return (
- {createBannerBodyCopy( - content.paragraphs, - content.highlightedText, - styles, - )} + {createBannerBodyCopy(content.paragraphs, content.highlightedText, styles)}
); } diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx index 4037ae5ff..4f73e6c59 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx @@ -55,8 +55,7 @@ export function MomentTemplateBannerCtas({ )} - {content.secondaryCta?.type === - SecondaryCtaType.ContributionsReminder && ( + {content.secondaryCta?.type === SecondaryCtaType.ContributionsReminder && (
); } else { return ( -
+
{hasVisual && ( @@ -221,6 +265,14 @@ export function getMomentTemplateBanner( setReminderCtaSettings={templateSettings.setReminderCtaSettings} /> )} + +
); } @@ -280,7 +332,6 @@ const styles = { `, desktopVisualContainer: css` display: block; - border: 1px solid gold; ${from.tablet} { width: 238px; @@ -318,7 +369,6 @@ const styles = { } `, desktopHeaderContainer: css` - width: 80%; margin-top: ${space[2]}px; `, articleCountContainer: css` @@ -348,4 +398,9 @@ const styles = { top: ${space[2]}px; right: ${space[4]}px; `, + hiddenCloseButton: css` + position: absolute; + left: -1000px; + font-size: 0.001rem; + `, }; diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx index 14099f146..3bc9874c0 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx @@ -157,9 +157,6 @@ const styles = { font-weight: inherit; font-style: inherit; color: inherit; - &:focus { - outline: none !important; - } `, overlayContainer: css` position: absolute; diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCloseButton.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCloseButton.tsx index c36fcc0a4..038391f8a 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCloseButton.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCloseButton.tsx @@ -27,12 +27,14 @@ export function MomentTemplateBannerCloseButton({
); @@ -57,4 +59,7 @@ const styles = { margin-right: ${space[2]}px; } `, + button: css` + font-size: 0.001rem; + `, }; diff --git a/packages/modules/src/modules/shared/ResponsiveImage.tsx b/packages/modules/src/modules/shared/ResponsiveImage.tsx index 56038c8c4..7d5636f43 100644 --- a/packages/modules/src/modules/shared/ResponsiveImage.tsx +++ b/packages/modules/src/modules/shared/ResponsiveImage.tsx @@ -1,9 +1,5 @@ import React, { ReactElement } from 'react'; -import { css } from '@emotion/react'; -const styles = css` - border: 1px solid blue; -`; export type ImageAttrs = { url: string; media: string; @@ -24,7 +20,7 @@ export const ResponsiveImage: React.FC = ({ baseImage, }: ResponsiveImageProps) => { return ( - + {images.map(createSource)} {baseImage.alt} From 6b9a69e0d37abec53e2d7d1ebf596166edf4fcf5 Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Wed, 2 Nov 2022 16:47:45 +0000 Subject: [PATCH 06/18] remove console.log --- .../modules/src/modules/banners/common/BannerContentRenderer.tsx | 1 - packages/server/src/api/bannerRouter.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/modules/src/modules/banners/common/BannerContentRenderer.tsx b/packages/modules/src/modules/banners/common/BannerContentRenderer.tsx index c4cadb653..86c33426d 100644 --- a/packages/modules/src/modules/banners/common/BannerContentRenderer.tsx +++ b/packages/modules/src/modules/banners/common/BannerContentRenderer.tsx @@ -16,7 +16,6 @@ export const BannerContentRenderer: React.FC = ({ content, render, }) => { - console.log('BannerContentRenderer invoked'); const { mainContent } = content; const mobileContent = content.mobileContent || mainContent; diff --git a/packages/server/src/api/bannerRouter.ts b/packages/server/src/api/bannerRouter.ts index fa7c4c4d9..8259793cc 100644 --- a/packages/server/src/api/bannerRouter.ts +++ b/packages/server/src/api/bannerRouter.ts @@ -75,7 +75,6 @@ export const buildBannerRouter = ( const selectedTest = selectBannerTest( targeting, pageTracking, - // isMobile(req), fromMobileDevice, baseUrl(req), bannerTests.get(), From 54cc7b92af42c0eba42db06542c1a75b26a47f89 Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Wed, 2 Nov 2022 16:53:09 +0000 Subject: [PATCH 07/18] focus on document.body when banner closes --- packages/modules/src/modules/banners/hocs/withCloseable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/modules/src/modules/banners/hocs/withCloseable.tsx b/packages/modules/src/modules/banners/hocs/withCloseable.tsx index f7d921da2..bbd01cae0 100644 --- a/packages/modules/src/modules/banners/hocs/withCloseable.tsx +++ b/packages/modules/src/modules/banners/hocs/withCloseable.tsx @@ -14,6 +14,7 @@ const withCloseable = (CloseableBanner: React.FC): React.F const onClose = (): void => { setChannelClosedTimestamp(bannerProps.bannerChannel); setIsOpen(false); + document.body.focus(); }; useEscapeShortcut(onClose, []); From 6bc384498ccee1964919b263505205a7c038ae99 Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Thu, 3 Nov 2022 17:00:20 +0000 Subject: [PATCH 08/18] remove reliance on isMobile attribute --- .../ClimateCrisisMomentBanner.stories.tsx | 1 - .../modules/banners/common/BannerWrapper.tsx | 2 - .../src/modules/banners/common/types.tsx | 1 - .../MomentTemplateBanner.stories.tsx | 3 +- .../momentTemplate/MomentTemplateBanner.tsx | 264 ++++++------------ .../components/MomentTemplateBannerBody.tsx | 14 +- .../components/MomentTemplateBannerCtas.tsx | 119 +++++--- .../components/MomentTemplateBannerHeader.tsx | 8 +- packages/server/src/api/bannerRouter.ts | 5 +- packages/shared/src/types/props/banner.ts | 1 - 10 files changed, 192 insertions(+), 226 deletions(-) diff --git a/packages/modules/src/modules/banners/climateCrisisMoment/ClimateCrisisMomentBanner.stories.tsx b/packages/modules/src/modules/banners/climateCrisisMoment/ClimateCrisisMomentBanner.stories.tsx index 22a5d7575..21ad3453d 100644 --- a/packages/modules/src/modules/banners/climateCrisisMoment/ClimateCrisisMomentBanner.stories.tsx +++ b/packages/modules/src/modules/banners/climateCrisisMoment/ClimateCrisisMomentBanner.stories.tsx @@ -53,5 +53,4 @@ ClimateCrisis.args = { }, }, numArticles: 50, - isMobile: false, }; diff --git a/packages/modules/src/modules/banners/common/BannerWrapper.tsx b/packages/modules/src/modules/banners/common/BannerWrapper.tsx index 8c8caf7ea..a80ce5c58 100644 --- a/packages/modules/src/modules/banners/common/BannerWrapper.tsx +++ b/packages/modules/src/modules/banners/common/BannerWrapper.tsx @@ -80,7 +80,6 @@ const withBannerData = ( tickerSettings, isSupporter, separateArticleCount, - isMobile, } = bannerProps; const [hasBeenSeen, setNode] = useHasBeenSeen( @@ -260,7 +259,6 @@ const withBannerData = ( isSupporter, numArticles, separateArticleCount, - isMobile, }; return (
diff --git a/packages/modules/src/modules/banners/common/types.tsx b/packages/modules/src/modules/banners/common/types.tsx index f0b169026..e804a51ab 100644 --- a/packages/modules/src/modules/banners/common/types.tsx +++ b/packages/modules/src/modules/banners/common/types.tsx @@ -65,7 +65,6 @@ export interface BannerRenderProps { fetchEmail?: () => Promise; tickerSettings?: TickerSettings; isSupporter?: boolean; - isMobile?: boolean; numArticles?: number; separateArticleCount?: boolean; } diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx index 57d9a37fa..257b4f388 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx @@ -88,7 +88,7 @@ GlobalNY.args = { }, }, mobileContent: { - heading: 'As 2022 begins, will you support us?', + heading: 'Please support us in 2022', messageText: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus', paragraphs: [ @@ -109,7 +109,6 @@ GlobalNY.args = { }, }, numArticles: 50, - isMobile: false, }; const AusElectionBanner = bannerWrapper( diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx index a56125be8..aedfc2f1d 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect, useRef } from 'react'; import { css } from '@emotion/react'; import { neutral, space } from '@guardian/src-foundations'; -import { Container } from '@guardian/src-layout'; +import { Container, Hide } from '@guardian/src-layout'; import { Button } from '@guardian/src-button'; import { BannerRenderProps } from '../common/types'; import { MomentTemplateBannerHeader } from './components/MomentTemplateBannerHeader'; @@ -32,7 +32,6 @@ export function getMomentTemplateBanner( onSignInClick, reminderTracking, separateArticleCount, - isMobile, }: BannerRenderProps): JSX.Element { const [isReminderActive, setIsReminderActive] = useState(false); @@ -79,26 +78,20 @@ export function getMomentTemplateBanner( } }, [bannerRef.current]); - if (isMobile) { - const mobileReminderRef = useRef(null); + const mobileReminderRef = useRef(null); - useEffect(() => { - if (mobileReminderRef.current && isReminderActive) { - mobileReminderRef.current.scrollIntoView({ behavior: 'smooth' }); - } - }, [mobileReminderRef.current, isReminderActive]); - - return ( -
- + useEffect(() => { + if (mobileReminderRef.current && isReminderActive) { + mobileReminderRef.current.scrollIntoView({ behavior: 'smooth' }); + } + }, [mobileReminderRef.current, isReminderActive]); + + return ( +
+ +
{hasVisual && ( -
+
{templateSettings.imageSettings && (
- - - -
-
-
- -
- {separateArticleCount && numArticles != null && numArticles > 5 && ( -
- -
- )} +
+
+ +
-
- 5 && ( +
+
+ )} -
- -
+
+
-
- -
- {content.mobileContent.secondaryCta?.type === - SecondaryCtaType.ContributionsReminder && - isReminderActive && ( - )} -
- - -
- ); - } else { - return ( -
- -
- {hasVisual && ( -
- {templateSettings.imageSettings && ( - - )} - {templateSettings.alternativeVisual} -
- )} -
- + -
- -
-
- -
+ - {separateArticleCount && numArticles != null && numArticles > 5 && ( -
- -
- )} - -
- -
- - {signInComponent === 'BODY' && ( - - )} - -
- -
- - {signInComponent === 'CTA' && ( - - )} -
+ {signInComponent === 'CTA' && ( + + )}
- +
+ - {content.mainContent.secondaryCta?.type === - SecondaryCtaType.ContributionsReminder && - isReminderActive && ( + {content.mainContent.secondaryCta?.type === + SecondaryCtaType.ContributionsReminder && + isReminderActive && ( + - )} - - -
- ); - } + + )} + + {content.mobileContent.secondaryCta?.type === + SecondaryCtaType.ContributionsReminder && + isReminderActive && ( + +
+ +
+ + )} + + +
+ ); } return MomentTemplateBanner; } @@ -327,9 +251,6 @@ const styles = { ` : ''} `, - visualContainer: css` - border: 1px solid red; - `, desktopVisualContainer: css` display: block; @@ -360,14 +281,6 @@ const styles = { width: 780px; } `, - headerContainer: css` - display: flex; - align-items: center; - - ${from.mobileMedium} { - margin-top: ${space[2]}px; - } - `, desktopHeaderContainer: css` margin-top: ${space[2]}px; `, @@ -390,9 +303,6 @@ const styles = { margin-top: ${space[6]}px; } `, - mobileCloseButtonContainer: css` - margin-left: ${space[3]}px; - `, closeButtonContainer: css` position: absolute; top: ${space[2]}px; diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerBody.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerBody.tsx index 088b0c862..082bee57d 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerBody.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerBody.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { css } from '@emotion/react'; import { neutral } from '@guardian/src-foundations'; import { from } from '@guardian/src-foundations/mq'; +import { Hide } from '@guardian/src-layout'; import { body } from '@guardian/src-foundations/typography'; import { createBannerBodyCopy } from '../../common/BannerText'; @@ -12,18 +13,29 @@ import { BannerRenderedContent } from '../../common/types'; interface MomentTemplateBannerBodyProps { content: BannerRenderedContent; + mobileContent: BannerRenderedContent; highlightedTextSettings: HighlightedTextSettings; } export function MomentTemplateBannerBody({ content, + mobileContent, highlightedTextSettings, }: MomentTemplateBannerBodyProps): JSX.Element { const styles = getStyles(highlightedTextSettings); return (
- {createBannerBodyCopy(content.paragraphs, content.highlightedText, styles)} + + {createBannerBodyCopy(content.paragraphs, content.highlightedText, styles)} + + + {createBannerBodyCopy( + mobileContent.paragraphs, + mobileContent.highlightedText, + styles, + )} +
); } diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx index 4f73e6c59..3b79b754e 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { css } from '@emotion/react'; import { neutral, space } from '@guardian/src-foundations'; +import { Hide } from '@guardian/src-layout'; import { Button, LinkButton } from '@guardian/src-button'; import { SecondaryCtaType } from '@sdc/shared/types'; import { BannerRenderedContent } from '../../common/types'; @@ -12,6 +13,7 @@ import { from } from '@guardian/src-foundations/mq'; interface MomentTemplateBannerCtasProps { content: BannerRenderedContent; + mobileContent: BannerRenderedContent; onPrimaryCtaClick: () => void; onSecondaryCtaClick: () => void; onReminderCtaClick: () => void; @@ -21,6 +23,7 @@ interface MomentTemplateBannerCtasProps { export function MomentTemplateBannerCtas({ content, + mobileContent, onPrimaryCtaClick, onSecondaryCtaClick, onReminderCtaClick, @@ -30,44 +33,88 @@ export function MomentTemplateBannerCtas({ return (
-
- {content.primaryCta && ( - - {content.primaryCta.ctaText} - - )} - - {content.secondaryCta?.type === SecondaryCtaType.Custom && ( - - {content.secondaryCta.cta.ctaText} - - )} - - {content.secondaryCta?.type === SecondaryCtaType.ContributionsReminder && ( - - )} -
+ +
+ {mobileContent.primaryCta && ( + + {mobileContent.primaryCta.ctaText} + + )} + + {mobileContent.secondaryCta?.type === SecondaryCtaType.Custom && ( + + {mobileContent.secondaryCta.cta.ctaText} + + )} + + {mobileContent.secondaryCta?.type === + SecondaryCtaType.ContributionsReminder && ( + + )} +
+ + + +
+ {content.primaryCta && ( + + {content.primaryCta.ctaText} + + )} + + {content.secondaryCta?.type === SecondaryCtaType.Custom && ( + + {content.secondaryCta.cta.ctaText} + + )} + + {content.secondaryCta?.type === SecondaryCtaType.ContributionsReminder && ( + + )} +
+
-
{content.primaryCta && }
+
+ {mobileContent.primaryCta && } + {content.primaryCta && } +
); } diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerHeader.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerHeader.tsx index 257b2e716..c932af062 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerHeader.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerHeader.tsx @@ -3,20 +3,26 @@ import { css } from '@emotion/react'; import { from } from '@guardian/src-foundations/mq'; import { headline } from '@guardian/src-foundations/typography'; import { neutral } from '@guardian/src-foundations/palette'; +import { Hide } from '@guardian/src-layout'; // ---- Component ---- // interface MomentTemplateBannerHeaderProps { heading: JSX.Element | JSX.Element[] | null; + mobileHeading: JSX.Element | JSX.Element[] | null; } export function MomentTemplateBannerHeader({ heading, + mobileHeading, }: MomentTemplateBannerHeaderProps): JSX.Element { return (
-

{heading}

+

+ {mobileHeading} + {heading} +

); diff --git a/packages/server/src/api/bannerRouter.ts b/packages/server/src/api/bannerRouter.ts index 8259793cc..3620908ae 100644 --- a/packages/server/src/api/bannerRouter.ts +++ b/packages/server/src/api/bannerRouter.ts @@ -70,12 +70,10 @@ export const buildBannerRouter = ( return {}; } - const fromMobileDevice = isMobile(req); - const selectedTest = selectBannerTest( targeting, pageTracking, - fromMobileDevice, + isMobile(req), baseUrl(req), bannerTests.get(), bannerDeployTimes, @@ -115,7 +113,6 @@ export const buildBannerRouter = ( tickerSettings, separateArticleCount: variant.separateArticleCount, prices: productPrices.get(), - isMobile: fromMobileDevice, }; return { diff --git a/packages/shared/src/types/props/banner.ts b/packages/shared/src/types/props/banner.ts index 238c6e8a0..12857877c 100644 --- a/packages/shared/src/types/props/banner.ts +++ b/packages/shared/src/types/props/banner.ts @@ -64,7 +64,6 @@ export interface BannerProps extends EmotionJSX.IntrinsicAttributes { numArticles?: number; hasOptedOutOfArticleCount?: boolean; email?: string; - isMobile?: boolean; fetchEmail?: () => Promise; separateArticleCount?: boolean; prices?: Prices; From c4a3fec600cbc6967fd798f100cb6d10eeff09a6 Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Mon, 7 Nov 2022 16:55:05 +0000 Subject: [PATCH 09/18] fix outline to match main site requirements --- .../src/modules/banners/momentTemplate/buttonStyles.ts | 4 ++++ .../components/MomentTemplateBannerArticleCountOptOut.tsx | 3 +++ .../momentTemplate/components/MomentTemplateBannerCtas.tsx | 4 ++++ .../momentTemplate/components/MomentTemplateSignInCta.tsx | 5 ++++- 4 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/modules/src/modules/banners/momentTemplate/buttonStyles.ts b/packages/modules/src/modules/banners/momentTemplate/buttonStyles.ts index 3f6943c79..1ffecd2b3 100644 --- a/packages/modules/src/modules/banners/momentTemplate/buttonStyles.ts +++ b/packages/modules/src/modules/banners/momentTemplate/buttonStyles.ts @@ -8,6 +8,10 @@ export function buttonStyles(settings: CtaSettings): SerializedStyles { &:hover { ${toCssString(settings.hover)} } + + &:focus { + outline: 5px solid #0077B6; + } `; } diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx index 3bc9874c0..d11aa4f10 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx @@ -157,6 +157,9 @@ const styles = { font-weight: inherit; font-style: inherit; color: inherit; + &:focus { + outline: 5px solid #0077B6; + } `, overlayContainer: css` position: absolute; diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx index 3b79b754e..d44917189 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx @@ -200,6 +200,7 @@ function PaymentCards() { const styles = { container: css` padding-bottom: ${space[5]}px; + padding-left: ${space[2]}px; ${from.tablet} { padding-bottom: ${space[6]}px; @@ -228,5 +229,8 @@ const styles = { `, reminderCta: css` color: ${neutral[0]}; + &:focus { + outline: 5px solid #0077B6; + } `, }; diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx index 83708e025..d83b0bffb 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { css } from '@emotion/react'; -import { space } from '@guardian/src-foundations'; +import { space } from '@guardian/src-foundations'; import { Link } from '@guardian/src-link'; /* @@ -25,6 +25,9 @@ const boldText = css` font-family: inherit; font-size: inherit; font-weight: 700; + &:focus { + outline: 5px solid #0077B6; + } `; const signInCta = css` From 488a79b1ee7947bbb1b41162600cfa5a17f224b5 Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Mon, 7 Nov 2022 16:56:45 +0000 Subject: [PATCH 10/18] linting --- .../src/modules/banners/momentTemplate/buttonStyles.ts | 2 +- .../components/MomentTemplateBannerArticleCountOptOut.tsx | 2 +- .../momentTemplate/components/MomentTemplateBannerCtas.tsx | 2 +- .../momentTemplate/components/MomentTemplateSignInCta.tsx | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/modules/src/modules/banners/momentTemplate/buttonStyles.ts b/packages/modules/src/modules/banners/momentTemplate/buttonStyles.ts index 1ffecd2b3..714067ed2 100644 --- a/packages/modules/src/modules/banners/momentTemplate/buttonStyles.ts +++ b/packages/modules/src/modules/banners/momentTemplate/buttonStyles.ts @@ -10,7 +10,7 @@ export function buttonStyles(settings: CtaSettings): SerializedStyles { } &:focus { - outline: 5px solid #0077B6; + outline: 5px solid #0077b6; } `; } diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx index d11aa4f10..7e7f68449 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx @@ -158,7 +158,7 @@ const styles = { font-style: inherit; color: inherit; &:focus { - outline: 5px solid #0077B6; + outline: 5px solid #0077b6; } `, overlayContainer: css` diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx index d44917189..e6915eb59 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx @@ -230,7 +230,7 @@ const styles = { reminderCta: css` color: ${neutral[0]}; &:focus { - outline: 5px solid #0077B6; + outline: 5px solid #0077b6; } `, }; diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx index d83b0bffb..29ea990f0 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { css } from '@emotion/react'; -import { space } from '@guardian/src-foundations'; +import { space } from '@guardian/src-foundations'; import { Link } from '@guardian/src-link'; /* @@ -26,7 +26,7 @@ const boldText = css` font-size: inherit; font-weight: 700; &:focus { - outline: 5px solid #0077B6; + outline: 5px solid #0077b6; } `; From b28441f0d4d834b910a12feb9f11a7afd62298de Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Tue, 8 Nov 2022 10:44:55 +0000 Subject: [PATCH 11/18] fix outline visual --- .../MomentTemplateBanner.stories.tsx | 2 +- .../momentTemplate/MomentTemplateBanner.tsx | 18 ++---------------- .../MomentTemplateBannerArticleCountOptOut.tsx | 1 + .../components/MomentTemplateBannerCtas.tsx | 1 + .../components/MomentTemplateBannerHeader.tsx | 4 ++++ .../components/MomentTemplateBannerVisual.tsx | 4 +--- .../components/MomentTemplateSignInCta.tsx | 1 + packages/shared/src/types/props/shared.ts | 2 -- 8 files changed, 11 insertions(+), 22 deletions(-) diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx index 257b4f388..482637aff 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx @@ -176,7 +176,7 @@ const AusElectionBanner = bannerWrapper( 'Head shots of Anthony Albanese, leader of the Australian Labor Party, and Scott Morrison, current Prime Minister and leader of the Liberal Party of Australia, who are running for the office of Prime Minister in the Australian federal election, to be held on 21 May 2022.', mobilePosition: 'end', tabletPosition: 'center', - desktopPosition: 'end', + desktopPosition: 'center', }, signInComponentAfter: 'BODY', }), diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx index aedfc2f1d..70adc51fa 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx @@ -236,25 +236,11 @@ const styles = { justify-content: flex-end; } `, - mobileStickyHeaderContainer: (background: string, hasReminderCta: boolean) => css` - background: ${background}; - position: sticky; - top: 0px; - z-index: 100; - border-top: 1px solid ${neutral[0]}; - padding-top: ${space[2]}px; - - ${hasReminderCta - ? ` - border-bottom: 1px solid ${neutral[0]}; - padding-bottom: ${space[2]}px; - ` - : ''} - `, desktopVisualContainer: css` - display: block; + display: none; ${from.tablet} { + display: block; width: 238px; margin-left: ${space[3]}px; } diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx index 7e7f68449..bcfc8a5de 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerArticleCountOptOut.tsx @@ -159,6 +159,7 @@ const styles = { color: inherit; &:focus { outline: 5px solid #0077b6; + border-radius: 4px; } `, overlayContainer: css` diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx index e6915eb59..40f8ce3c3 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx @@ -231,6 +231,7 @@ const styles = { color: ${neutral[0]}; &:focus { outline: 5px solid #0077b6; + border-radius: 10px; } `, }; diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerHeader.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerHeader.tsx index c932af062..987b6a3c3 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerHeader.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerHeader.tsx @@ -35,6 +35,10 @@ const styles = { position: relative; `, header: css` + width: calc(100% - 50px); + ${from.tablet} { + width: 100%; + } h2 { ${headline.xsmall({ fontWeight: 'bold' })} margin: 0; diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerVisual.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerVisual.tsx index 53d7b6bb1..96511ed0a 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerVisual.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerVisual.tsx @@ -39,7 +39,6 @@ export function MomentTemplateBannerVisual({ return (
css` +const container = (tabletPosition: string, desktopPosition: string) => css` height: 140px; display: flex; justify-content: center; - align-items: ${mobilePosition}; img { height: 100%; diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx index 29ea990f0..22cf1cf60 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateSignInCta.tsx @@ -27,6 +27,7 @@ const boldText = css` font-weight: 700; &:focus { outline: 5px solid #0077b6; + border-radius: 4px; } `; diff --git a/packages/shared/src/types/props/shared.ts b/packages/shared/src/types/props/shared.ts index 308de15c8..02dceaaee 100644 --- a/packages/shared/src/types/props/shared.ts +++ b/packages/shared/src/types/props/shared.ts @@ -139,7 +139,6 @@ export interface Image { leftColUrl?: string; wideUrl?: string; altText: string; - mobilePosition?: string; tabletPosition?: string; desktopPosition?: string; } @@ -152,7 +151,6 @@ export const imageSchema = z.object({ leftColUrl: z.string().optional(), wideUrl: z.string().optional(), altText: z.string(), - mobilePosition: z.string().optional(), tabletPosition: z.string().optional(), desktopPosition: z.string().optional(), }); From d1a9c281978d937ce5905484c75017c0fe621204 Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Tue, 8 Nov 2022 10:52:52 +0000 Subject: [PATCH 12/18] fix TS error --- .../banners/momentTemplate/MomentTemplateBanner.stories.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx index 482637aff..9c2bd9f98 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx @@ -52,7 +52,6 @@ const GlobalNYBanner = bannerWrapper( mainUrl: 'https://media.guim.co.uk/a1087c3f7e6da4f1e97947acccdd7f0d15f327d4/0_0_142_124/140.png', altText: 'Guardian logo being held up by supporters of the Guardian', - mobilePosition: 'end', tabletPosition: 'end', desktopPosition: 'end', }, @@ -174,7 +173,6 @@ const AusElectionBanner = bannerWrapper( 'https://i.guim.co.uk/img/media/4fa98ca4b70ee9b21b74d16f2586b5d6c513297f/0_319_2836_1837/2000.png?quality=85&s=3ef36bd5ab569f310b0f975372f54d29', altText: 'Head shots of Anthony Albanese, leader of the Australian Labor Party, and Scott Morrison, current Prime Minister and leader of the Liberal Party of Australia, who are running for the office of Prime Minister in the Australian federal election, to be held on 21 May 2022.', - mobilePosition: 'end', tabletPosition: 'center', desktopPosition: 'center', }, From 8afb8bcd69991eb4b8c147d873d84a6babee736b Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Tue, 8 Nov 2022 16:11:44 +0000 Subject: [PATCH 13/18] build storybook stories --- .../modules/src/modules/banners/common/types.tsx | 3 +++ .../momentTemplate/MomentTemplateBanner.stories.tsx | 13 ++++++------- .../banners/momentTemplate/MomentTemplateBanner.tsx | 7 +++---- .../src/modules/banners/momentTemplate/settings.ts | 3 --- 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/modules/src/modules/banners/common/types.tsx b/packages/modules/src/modules/banners/common/types.tsx index e804a51ab..6c8d94ac4 100644 --- a/packages/modules/src/modules/banners/common/types.tsx +++ b/packages/modules/src/modules/banners/common/types.tsx @@ -52,6 +52,8 @@ export interface BannerTextContent { mobileContent: BannerRenderedContent; } +type SignInComponentValue = 'BODY' | 'CTA'; + export interface BannerRenderProps { onCtaClick: () => void; onSecondaryCtaClick: () => void; @@ -67,4 +69,5 @@ export interface BannerRenderProps { isSupporter?: boolean; numArticles?: number; separateArticleCount?: boolean; + includeSignIn?: SignInComponentValue; } diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx index 9c2bd9f98..e2d35b6f9 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx @@ -59,10 +59,10 @@ const GlobalNYBanner = bannerWrapper( 'global-new-year-banner', ); -const GlobalNYTemplate: Story = (props: BannerProps) => ; +const GlobalNewYearTemplate: Story = (props: BannerProps) => ; -export const GlobalNY = GlobalNYTemplate.bind({}); -GlobalNY.args = { +export const GlobalNewYear = GlobalNewYearTemplate.bind({}); +GlobalNewYear.args = { ...props, content: { heading: 'As 2022 begins, will you support us?', @@ -176,7 +176,6 @@ const AusElectionBanner = bannerWrapper( tabletPosition: 'center', desktopPosition: 'center', }, - signInComponentAfter: 'BODY', }), 'aus-moment-banner', ); @@ -187,15 +186,15 @@ const AusElectionTemplate: Story = (props: BannerProps) => ( export const AusElection = AusElectionTemplate.bind({}); AusElection.args = { - ...GlobalNY.args, + ...GlobalNewYear.args, content: { - ...GlobalNY.args.content, + ...GlobalNewYear.args.content, secondaryCta: { type: SecondaryCtaType.ContributionsReminder, }, }, mobileContent: { - ...GlobalNY.args.mobileContent, + ...GlobalNewYear.args.mobileContent, secondaryCta: { type: SecondaryCtaType.ContributionsReminder, }, diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx index 70adc51fa..03e3c290d 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx @@ -32,6 +32,7 @@ export function getMomentTemplateBanner( onSignInClick, reminderTracking, separateArticleCount, + includeSignIn, }: BannerRenderProps): JSX.Element { const [isReminderActive, setIsReminderActive] = useState(false); @@ -40,8 +41,6 @@ export function getMomentTemplateBanner( setIsReminderActive(!isReminderActive); }; - const signInComponent = templateSettings.signInComponentAfter; - const bannerRef = useRef(null); useEffect(() => { @@ -136,7 +135,7 @@ export function getMomentTemplateBanner( />
- {signInComponent === 'BODY' && ( + {includeSignIn === 'BODY' && ( - {signInComponent === 'CTA' && ( + {includeSignIn === 'CTA' && ( Date: Wed, 9 Nov 2022 12:05:28 +0000 Subject: [PATCH 14/18] automate display of support CTA payment icons --- .../modules/banners/common/BannerWrapper.tsx | 2 + .../src/modules/banners/common/types.tsx | 4 +- .../MomentTemplateBanner.stories.tsx | 81 ++++++++++++++++--- .../momentTemplate/MomentTemplateBanner.tsx | 3 + .../components/MomentTemplateBannerCtas.tsx | 17 +++- packages/shared/src/types/props/banner.ts | 2 + 6 files changed, 94 insertions(+), 15 deletions(-) diff --git a/packages/modules/src/modules/banners/common/BannerWrapper.tsx b/packages/modules/src/modules/banners/common/BannerWrapper.tsx index 9f1d02084..433b3852e 100644 --- a/packages/modules/src/modules/banners/common/BannerWrapper.tsx +++ b/packages/modules/src/modules/banners/common/BannerWrapper.tsx @@ -81,6 +81,7 @@ const withBannerData = ( tickerSettings, isSupporter, separateArticleCount, + includeSignIn, } = bannerProps; const [hasBeenSeen, setNode] = useHasBeenSeen( @@ -261,6 +262,7 @@ const withBannerData = ( isSupporter, numArticles, separateArticleCount, + includeSignIn, }; return (
diff --git a/packages/modules/src/modules/banners/common/types.tsx b/packages/modules/src/modules/banners/common/types.tsx index 6c8d94ac4..4159da310 100644 --- a/packages/modules/src/modules/banners/common/types.tsx +++ b/packages/modules/src/modules/banners/common/types.tsx @@ -52,8 +52,6 @@ export interface BannerTextContent { mobileContent: BannerRenderedContent; } -type SignInComponentValue = 'BODY' | 'CTA'; - export interface BannerRenderProps { onCtaClick: () => void; onSecondaryCtaClick: () => void; @@ -69,5 +67,5 @@ export interface BannerRenderProps { isSupporter?: boolean; numArticles?: number; separateArticleCount?: boolean; - includeSignIn?: SignInComponentValue; + includeSignIn?: string; } diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx index e2d35b6f9..2dd29e406 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx @@ -59,7 +59,9 @@ const GlobalNYBanner = bannerWrapper( 'global-new-year-banner', ); -const GlobalNewYearTemplate: Story = (props: BannerProps) => ; +const GlobalNewYearTemplate: Story = (props: BannerProps) => ( + +); export const GlobalNewYear = GlobalNewYearTemplate.bind({}); GlobalNewYear.args = { @@ -110,7 +112,7 @@ GlobalNewYear.args = { numArticles: 50, }; -const AusElectionBanner = bannerWrapper( +const WithImageBanner = bannerWrapper( getMomentTemplateBanner({ backgroundColour: '#e4e4e3', primaryCtaSettings: { @@ -180,23 +182,84 @@ const AusElectionBanner = bannerWrapper( 'aus-moment-banner', ); -const AusElectionTemplate: Story = (props: BannerProps) => ( - +const WithImageTemplate: Story = (props: BannerProps) => ( + ); -export const AusElection = AusElectionTemplate.bind({}); -AusElection.args = { - ...GlobalNewYear.args, +export const WithImage = WithImageTemplate.bind({}); +WithImage.args = { + ...props, content: { - ...GlobalNewYear.args.content, + heading: 'As 2022 begins, will you support us?', + messageText: + 'Fearless, investigative reporting shapes a fairer world. At the Guardian, our independence allows us to chase the truth wherever it takes us. We have no shareholders. No vested interests. Just the determination and passion to bring readers quality reporting, including groundbreaking investigations. We do not shy away. And we provide all this for free, for everyone.', + paragraphs: [ + 'Fearless, investigative reporting shapes a fairer world. At the Guardian, our independence allows us to chase the truth wherever it takes us. We have no shareholders. No vested interests. Just the determination and passion to bring readers quality reporting, including groundbreaking investigations.', + 'We do not shy away. And we provide all this for free, for everyone.', + ], + highlightedText: + 'Show your support today from just %%CURRENCY_SYMBOL%%1, or sustain us long term with a little more. Thank you.', + cta: { + text: 'Support the Guardian', + baseUrl: 'https://support.theguardian.com/contribute', + }, secondaryCta: { type: SecondaryCtaType.ContributionsReminder, }, }, mobileContent: { - ...GlobalNewYear.args.mobileContent, + heading: 'Please support us in 2022', + messageText: + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus', + paragraphs: [ + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus', + ], + highlightedText: + 'Show your support today from just %%CURRENCY_SYMBOL%%1, or sustain us long term with a little more. Thank you.', + cta: { + text: 'Support us', + baseUrl: 'https://support.theguardian.com/contribute', + }, secondaryCta: { type: SecondaryCtaType.ContributionsReminder, }, }, + numArticles: 50, +}; + +export const WithImageNoArticleCount = WithImageTemplate.bind({}); +WithImageNoArticleCount.args = { + ...WithImage.args, + numArticles: 0, +}; + +export const WithImageSignInAfterBody = WithImageTemplate.bind({}); +WithImageSignInAfterBody.args = { + ...WithImage.args, + includeSignIn: 'BODY', +}; + +export const WithImageSignInAfterCta = WithImageTemplate.bind({}); +WithImageSignInAfterCta.args = { + ...WithImage.args, + includeSignIn: 'CTA', +}; + +export const WithImageNoSupportCtaIcons = WithImageTemplate.bind({}); +WithImageNoSupportCtaIcons.args = { + ...WithImage.args, + content: { + ...WithImage.args.content, + cta: { + baseUrl: 'https://theguardian.com', + text: 'The Guardian', + }, + }, + mobileContent: { + ...WithImage.args.mobileContent, + cta: { + baseUrl: 'https://theguardian.com', + text: 'The Guardian', + }, + }, }; diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx index 03e3c290d..a6e066f08 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx @@ -36,6 +36,9 @@ export function getMomentTemplateBanner( }: BannerRenderProps): JSX.Element { const [isReminderActive, setIsReminderActive] = useState(false); + console.log('includeSignIn', includeSignIn); + console.log('content', content); + const onReminderCtaClick = () => { reminderTracking.onReminderCtaClick(); setIsReminderActive(!isReminderActive); diff --git a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx index 40f8ce3c3..ffffff8f5 100644 --- a/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/components/MomentTemplateBannerCtas.tsx @@ -4,10 +4,11 @@ import { neutral, space } from '@guardian/src-foundations'; import { Hide } from '@guardian/src-layout'; import { Button, LinkButton } from '@guardian/src-button'; import { SecondaryCtaType } from '@sdc/shared/types'; -import { BannerRenderedContent } from '../../common/types'; +import { BannerRenderedContent, BannerEnrichedCta } from '../../common/types'; import { buttonStyles } from '../buttonStyles'; import { CtaSettings } from '../settings'; import { from } from '@guardian/src-foundations/mq'; +import { isSupportUrl } from '@sdc/shared/dist/lib'; // ---- Component ---- // @@ -30,6 +31,12 @@ export function MomentTemplateBannerCtas({ primaryCtaSettings, secondaryCtaSettings, }: MomentTemplateBannerCtasProps): JSX.Element { + const checkForSupportCtaLink = (cta: BannerEnrichedCta | null): boolean => { + if (!cta || !cta.ctaUrl) { + return false; + } + return isSupportUrl(cta.ctaUrl); + }; return (
@@ -112,8 +119,12 @@ export function MomentTemplateBannerCtas({
- {mobileContent.primaryCta && } - {content.primaryCta && } + + {checkForSupportCtaLink(mobileContent.primaryCta) && } + + + {checkForSupportCtaLink(content.primaryCta) && } +
); diff --git a/packages/shared/src/types/props/banner.ts b/packages/shared/src/types/props/banner.ts index 12857877c..703883f91 100644 --- a/packages/shared/src/types/props/banner.ts +++ b/packages/shared/src/types/props/banner.ts @@ -66,6 +66,7 @@ export interface BannerProps extends EmotionJSX.IntrinsicAttributes { email?: string; fetchEmail?: () => Promise; separateArticleCount?: boolean; + includeSignIn?: string; prices?: Prices; } @@ -82,6 +83,7 @@ export const bannerSchema = z.object({ hasOptedOutOfArticleCount: z.boolean().optional(), email: z.string().optional(), fetchEmail: z.any().optional(), + includeSignIn: z.string().optional(), separateArticleCount: z .boolean() .nullable() From 434235de3f87d5c8411915d152e11ddd073366f6 Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Thu, 10 Nov 2022 09:40:34 +0000 Subject: [PATCH 15/18] remove console.log --- .../modules/banners/momentTemplate/MomentTemplateBanner.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx index a6e066f08..03e3c290d 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx @@ -36,9 +36,6 @@ export function getMomentTemplateBanner( }: BannerRenderProps): JSX.Element { const [isReminderActive, setIsReminderActive] = useState(false); - console.log('includeSignIn', includeSignIn); - console.log('content', content); - const onReminderCtaClick = () => { reminderTracking.onReminderCtaClick(); setIsReminderActive(!isReminderActive); From adf659e71944cce77c2b73d016421c14bc2b3625 Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Thu, 17 Nov 2022 10:07:00 +0000 Subject: [PATCH 16/18] remove includeSignIn attribute --- .../src/modules/banners/common/BannerWrapper.tsx | 2 -- .../modules/src/modules/banners/common/types.tsx | 1 - .../MomentTemplateBanner.stories.tsx | 12 ------------ .../momentTemplate/MomentTemplateBanner.tsx | 16 ---------------- packages/shared/src/types/props/banner.ts | 2 -- 5 files changed, 33 deletions(-) diff --git a/packages/modules/src/modules/banners/common/BannerWrapper.tsx b/packages/modules/src/modules/banners/common/BannerWrapper.tsx index 433b3852e..9f1d02084 100644 --- a/packages/modules/src/modules/banners/common/BannerWrapper.tsx +++ b/packages/modules/src/modules/banners/common/BannerWrapper.tsx @@ -81,7 +81,6 @@ const withBannerData = ( tickerSettings, isSupporter, separateArticleCount, - includeSignIn, } = bannerProps; const [hasBeenSeen, setNode] = useHasBeenSeen( @@ -262,7 +261,6 @@ const withBannerData = ( isSupporter, numArticles, separateArticleCount, - includeSignIn, }; return (
diff --git a/packages/modules/src/modules/banners/common/types.tsx b/packages/modules/src/modules/banners/common/types.tsx index 4159da310..e804a51ab 100644 --- a/packages/modules/src/modules/banners/common/types.tsx +++ b/packages/modules/src/modules/banners/common/types.tsx @@ -67,5 +67,4 @@ export interface BannerRenderProps { isSupporter?: boolean; numArticles?: number; separateArticleCount?: boolean; - includeSignIn?: string; } diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx index 2dd29e406..e8828a425 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx @@ -233,18 +233,6 @@ WithImageNoArticleCount.args = { numArticles: 0, }; -export const WithImageSignInAfterBody = WithImageTemplate.bind({}); -WithImageSignInAfterBody.args = { - ...WithImage.args, - includeSignIn: 'BODY', -}; - -export const WithImageSignInAfterCta = WithImageTemplate.bind({}); -WithImageSignInAfterCta.args = { - ...WithImage.args, - includeSignIn: 'CTA', -}; - export const WithImageNoSupportCtaIcons = WithImageTemplate.bind({}); WithImageNoSupportCtaIcons.args = { ...WithImage.args, diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx index 03e3c290d..bb112f15c 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx @@ -29,10 +29,8 @@ export function getMomentTemplateBanner( numArticles, onCtaClick, onSecondaryCtaClick, - onSignInClick, reminderTracking, separateArticleCount, - includeSignIn, }: BannerRenderProps): JSX.Element { const [isReminderActive, setIsReminderActive] = useState(false); @@ -135,13 +133,6 @@ export function getMomentTemplateBanner( />
- {includeSignIn === 'BODY' && ( - - )} -
- - {includeSignIn === 'CTA' && ( - - )}
diff --git a/packages/shared/src/types/props/banner.ts b/packages/shared/src/types/props/banner.ts index 703883f91..12857877c 100644 --- a/packages/shared/src/types/props/banner.ts +++ b/packages/shared/src/types/props/banner.ts @@ -66,7 +66,6 @@ export interface BannerProps extends EmotionJSX.IntrinsicAttributes { email?: string; fetchEmail?: () => Promise; separateArticleCount?: boolean; - includeSignIn?: string; prices?: Prices; } @@ -83,7 +82,6 @@ export const bannerSchema = z.object({ hasOptedOutOfArticleCount: z.boolean().optional(), email: z.string().optional(), fetchEmail: z.any().optional(), - includeSignIn: z.string().optional(), separateArticleCount: z .boolean() .nullable() From 839972239fd3e734417fd8d913ccad280d97c2f4 Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Thu, 17 Nov 2022 10:12:28 +0000 Subject: [PATCH 17/18] lint fix --- .../src/modules/banners/momentTemplate/MomentTemplateBanner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx index bb112f15c..52a15dcfe 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx @@ -14,7 +14,7 @@ import { BannerTemplateSettings } from './settings'; import { from } from '@guardian/src-foundations/mq'; import { SecondaryCtaType } from '@sdc/shared/types'; import { MomentTemplateBannerReminder } from './components/MomentTemplateBannerReminder'; -import { MomentTemplateSignInCta } from './components/MomentTemplateSignInCta'; +// import { MomentTemplateSignInCta } from './components/MomentTemplateSignInCta'; // ---- Banner ---- // From 48e9fe432c51a99f95d0eb9dfdb8a7e9e9d9c70a Mon Sep 17 00:00:00 2001 From: Rik Roots Date: Fri, 18 Nov 2022 10:07:02 +0000 Subject: [PATCH 18/18] show image from mobileLandscape --- .../modules/banners/momentTemplate/MomentTemplateBanner.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx index 52a15dcfe..69992b642 100644 --- a/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx +++ b/packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.tsx @@ -14,7 +14,6 @@ import { BannerTemplateSettings } from './settings'; import { from } from '@guardian/src-foundations/mq'; import { SecondaryCtaType } from '@sdc/shared/types'; import { MomentTemplateBannerReminder } from './components/MomentTemplateBannerReminder'; -// import { MomentTemplateSignInCta } from './components/MomentTemplateSignInCta'; // ---- Banner ---- // @@ -222,8 +221,10 @@ const styles = { desktopVisualContainer: css` display: none; - ${from.tablet} { + ${from.mobileLandscape} { display: block; + } + ${from.tablet} { width: 238px; margin-left: ${space[3]}px; }