From ce0f5967c8997b972aa4513046d03bb13dcac9d1 Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Sat, 2 Nov 2024 10:46:58 +0000 Subject: [PATCH 1/8] Election banner height fixes --- src/app/pages/ArticlePage/ElectionBanner/config.ts | 6 +++--- src/app/pages/ArticlePage/ElectionBanner/index.styles.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/pages/ArticlePage/ElectionBanner/config.ts b/src/app/pages/ArticlePage/ElectionBanner/config.ts index 290030858a8..a793fcead8c 100644 --- a/src/app/pages/ArticlePage/ElectionBanner/config.ts +++ b/src/app/pages/ArticlePage/ElectionBanner/config.ts @@ -1,8 +1,8 @@ export default { heights: { - desktop: 465, - tablet: 480, - mobile: 540, + desktop: 330, + tablet: 330, + mobile: 360, }, iframeSrc: 'include/vjafwest/1365-2024-us-presidential-election-banner/{service}/app', diff --git a/src/app/pages/ArticlePage/ElectionBanner/index.styles.ts b/src/app/pages/ArticlePage/ElectionBanner/index.styles.ts index 31ed0cfeb1b..6bb55d55551 100644 --- a/src/app/pages/ArticlePage/ElectionBanner/index.styles.ts +++ b/src/app/pages/ArticlePage/ElectionBanner/index.styles.ts @@ -18,7 +18,7 @@ export default { width: '100%', height: `${pixelsToRem(BANNER_CONFIG.heights.mobile)}rem`, - [mq.GROUP_2_MIN_WIDTH]: { + [mq.GROUP_3_MIN_WIDTH]: { height: `${pixelsToRem(BANNER_CONFIG.heights.tablet)}rem`, }, [mq.GROUP_4_MIN_WIDTH]: { @@ -45,7 +45,7 @@ export default { width: '100%', height: `${pixelsToRem(BANNER_CONFIG.heights.mobile)}rem`, - [mq.GROUP_2_MIN_WIDTH]: { + [mq.GROUP_3_MIN_WIDTH]: { height: `${pixelsToRem(BANNER_CONFIG.heights.tablet)}rem`, }, [mq.GROUP_4_MIN_WIDTH]: { From 05b804d33043b7253f33061d7663960d20c21a18 Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Sat, 2 Nov 2024 11:36:03 +0000 Subject: [PATCH 2/8] Account for live updates label --- src/app/pages/ArticlePage/ElectionBanner/config.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/pages/ArticlePage/ElectionBanner/config.ts b/src/app/pages/ArticlePage/ElectionBanner/config.ts index a793fcead8c..0af1cf135ff 100644 --- a/src/app/pages/ArticlePage/ElectionBanner/config.ts +++ b/src/app/pages/ArticlePage/ElectionBanner/config.ts @@ -1,8 +1,8 @@ export default { heights: { desktop: 330, - tablet: 330, - mobile: 360, + tablet: 350, + mobile: 400, }, iframeSrc: 'include/vjafwest/1365-2024-us-presidential-election-banner/{service}/app', From ae89291825671f5effbc62a118c08c533fdfd377 Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Sun, 3 Nov 2024 16:57:14 +0000 Subject: [PATCH 3/8] more height adjustments --- src/app/pages/ArticlePage/ElectionBanner/config.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/pages/ArticlePage/ElectionBanner/config.ts b/src/app/pages/ArticlePage/ElectionBanner/config.ts index 0af1cf135ff..bcaf54cbf93 100644 --- a/src/app/pages/ArticlePage/ElectionBanner/config.ts +++ b/src/app/pages/ArticlePage/ElectionBanner/config.ts @@ -1,8 +1,8 @@ export default { heights: { - desktop: 330, - tablet: 350, - mobile: 400, + desktop: 350, + tablet: 320, + mobile: 315, }, iframeSrc: 'include/vjafwest/1365-2024-us-presidential-election-banner/{service}/app', From 0e4a27c39f9aa83ac898697ac6801b437495530e Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Sun, 3 Nov 2024 17:25:06 +0000 Subject: [PATCH 4/8] Default to `english` banner for News service --- .../ArticlePage/ElectionBanner/index.test.tsx | 19 +++++++++++++++++++ .../ArticlePage/ElectionBanner/index.tsx | 2 ++ 2 files changed, 21 insertions(+) diff --git a/src/app/pages/ArticlePage/ElectionBanner/index.test.tsx b/src/app/pages/ArticlePage/ElectionBanner/index.test.tsx index de3d9554abd..998ae520e58 100644 --- a/src/app/pages/ArticlePage/ElectionBanner/index.test.tsx +++ b/src/app/pages/ArticlePage/ElectionBanner/index.test.tsx @@ -127,6 +127,25 @@ describe('ElectionBanner', () => { expect(iframeSrc).toContain('turkish'); }); + it('should render the correct VJ URL for News service', () => { + const { getByTestId } = render( + , + { + toggles: { electionBanner: { enabled: true } }, + isAmp, + service: 'news', + }, + ); + + const wrappingEl = getByTestId(ELEMENT_ID); + + const iframe = wrappingEl.querySelector('iframe, amp-iframe'); + const iframeSrc = iframe?.getAttribute('src'); + + expect(iframeSrc).not.toContain('news'); + expect(iframeSrc).toContain('english'); + }); + it('should not render ElectionBanner when taggings contain the editorialSensitivityId', () => { const { queryByTestId } = render( { switch (service) { case 'turkce': return url.replace('{service}', 'turkish'); + case 'news': + return url.replace('{service}', 'english'); default: return url.replace('{service}', service); } From b5545176795b930e7944eae03f465ab5e3221a63 Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Sun, 3 Nov 2024 17:28:44 +0000 Subject: [PATCH 5/8] Test fixes --- src/app/pages/ArticlePage/ElectionBanner/index.test.tsx | 6 +++--- src/app/pages/ArticlePage/ElectionBanner/index.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/pages/ArticlePage/ElectionBanner/index.test.tsx b/src/app/pages/ArticlePage/ElectionBanner/index.test.tsx index 998ae520e58..f100a2b27f1 100644 --- a/src/app/pages/ArticlePage/ElectionBanner/index.test.tsx +++ b/src/app/pages/ArticlePage/ElectionBanner/index.test.tsx @@ -84,7 +84,7 @@ describe('ElectionBanner', () => { const configSrc = BANNER_CONFIG[ appEnv === 'live' ? 'iframeSrc' : 'iframeDevSrc' - ].replace('{service}', 'news'); + ].replace('{service}', 'english'); const domain = isAmp ? process.env.SIMORGH_INCLUDES_BASE_AMP_URL @@ -123,7 +123,7 @@ describe('ElectionBanner', () => { const iframe = wrappingEl.querySelector('iframe, amp-iframe'); const iframeSrc = iframe?.getAttribute('src'); - expect(iframeSrc).not.toContain('turkce'); + expect(iframeSrc).not.toContain('/turkce/'); expect(iframeSrc).toContain('turkish'); }); @@ -142,7 +142,7 @@ describe('ElectionBanner', () => { const iframe = wrappingEl.querySelector('iframe, amp-iframe'); const iframeSrc = iframe?.getAttribute('src'); - expect(iframeSrc).not.toContain('news'); + expect(iframeSrc).not.toContain('/news/'); expect(iframeSrc).toContain('english'); }); diff --git a/src/app/pages/ArticlePage/ElectionBanner/index.tsx b/src/app/pages/ArticlePage/ElectionBanner/index.tsx index 38496e0edb1..55952f5c0a9 100644 --- a/src/app/pages/ArticlePage/ElectionBanner/index.tsx +++ b/src/app/pages/ArticlePage/ElectionBanner/index.tsx @@ -45,7 +45,7 @@ export default function ElectionBanner({ aboutTags, taggings }: Props) { usElectionThingId, } = BANNER_CONFIG; - const isEditoriallySensitive = taggings?.find(({ value }) => + const isEditoriallySensitive = taggings?.some(({ value }) => value.includes(editorialSensitivityId), ); From 4c326881db84ed83f89364adb44ea9d20e58671f Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Sun, 3 Nov 2024 17:32:17 +0000 Subject: [PATCH 6/8] Update index.test.tsx --- src/app/pages/ArticlePage/ElectionBanner/index.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/pages/ArticlePage/ElectionBanner/index.test.tsx b/src/app/pages/ArticlePage/ElectionBanner/index.test.tsx index f100a2b27f1..85a040a0495 100644 --- a/src/app/pages/ArticlePage/ElectionBanner/index.test.tsx +++ b/src/app/pages/ArticlePage/ElectionBanner/index.test.tsx @@ -151,6 +151,7 @@ describe('ElectionBanner', () => { Date: Sun, 3 Nov 2024 21:53:04 +0000 Subject: [PATCH 7/8] Remove hiding at <=320px --- src/app/components/Embeds/EmbedHtml/index.styles.tsx | 4 ---- src/app/pages/ArticlePage/ElectionBanner/index.styles.ts | 8 -------- 2 files changed, 12 deletions(-) diff --git a/src/app/components/Embeds/EmbedHtml/index.styles.tsx b/src/app/components/Embeds/EmbedHtml/index.styles.tsx index 6f4a854c0fc..1061177974d 100644 --- a/src/app/components/Embeds/EmbedHtml/index.styles.tsx +++ b/src/app/components/Embeds/EmbedHtml/index.styles.tsx @@ -21,10 +21,6 @@ const styles = { // TODO: Remove this styling after the US Elections electionBannerOverrides: ({ mq }: Theme) => css({ - [`@media (max-width:${pixelsToRem(320)}rem)`]: { - display: 'none', - }, - [mq.GROUP_2_MIN_WIDTH]: { paddingLeft: 0, paddingRight: 0, diff --git a/src/app/pages/ArticlePage/ElectionBanner/index.styles.ts b/src/app/pages/ArticlePage/ElectionBanner/index.styles.ts index 6bb55d55551..002525b370f 100644 --- a/src/app/pages/ArticlePage/ElectionBanner/index.styles.ts +++ b/src/app/pages/ArticlePage/ElectionBanner/index.styles.ts @@ -6,10 +6,6 @@ export default { electionBannerWrapper: ({ spacings }: Theme) => css({ marginBottom: `${spacings.FULL}rem`, - - [`@media (max-width:${pixelsToRem(320)}rem)`]: { - display: 'none', - }, }), electionBannerIframe: ({ mq }: Theme) => @@ -31,10 +27,6 @@ export default { overflow: 'hidden', marginBottom: `${spacings.FULL}rem`, - [`@media (max-width:${pixelsToRem(320)}rem)`]: { - display: 'none', - }, - '> div': { padding: '0' }, '& amp-img': { maxWidth: 640, From d7c169e89205fc2c4d3ff4beda228d65f4cc6767 Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Sun, 3 Nov 2024 21:58:09 +0000 Subject: [PATCH 8/8] Fix padding on homepage banner --- src/app/components/Embeds/EmbedHtml/index.styles.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/components/Embeds/EmbedHtml/index.styles.tsx b/src/app/components/Embeds/EmbedHtml/index.styles.tsx index 1061177974d..bf724f57865 100644 --- a/src/app/components/Embeds/EmbedHtml/index.styles.tsx +++ b/src/app/components/Embeds/EmbedHtml/index.styles.tsx @@ -1,4 +1,3 @@ -import pixelsToRem from '#app/utilities/pixelsToRem'; import { css, Theme } from '@emotion/react'; const styles = { @@ -21,10 +20,17 @@ const styles = { // TODO: Remove this styling after the US Elections electionBannerOverrides: ({ mq }: Theme) => css({ + paddingLeft: 0, + paddingRight: 0, + [mq.GROUP_2_MIN_WIDTH]: { paddingLeft: 0, paddingRight: 0, }, + [mq.GROUP_4_MIN_WIDTH]: { + paddingLeft: 0, + paddingRight: 0, + }, }), };