diff --git a/src/app/components/Embeds/EmbedHtml/index.styles.tsx b/src/app/components/Embeds/EmbedHtml/index.styles.tsx index 6f4a854c0fc..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,14 +20,17 @@ const styles = { // TODO: Remove this styling after the US Elections electionBannerOverrides: ({ mq }: Theme) => css({ - [`@media (max-width:${pixelsToRem(320)}rem)`]: { - display: 'none', - }, + paddingLeft: 0, + paddingRight: 0, [mq.GROUP_2_MIN_WIDTH]: { paddingLeft: 0, paddingRight: 0, }, + [mq.GROUP_4_MIN_WIDTH]: { + paddingLeft: 0, + paddingRight: 0, + }, }), }; diff --git a/src/app/pages/ArticlePage/ElectionBanner/config.ts b/src/app/pages/ArticlePage/ElectionBanner/config.ts index 290030858a8..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: 465, - tablet: 480, - mobile: 540, + desktop: 350, + tablet: 320, + mobile: 315, }, 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..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) => @@ -18,7 +14,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]: { @@ -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, @@ -45,7 +37,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]: { diff --git a/src/app/pages/ArticlePage/ElectionBanner/index.test.tsx b/src/app/pages/ArticlePage/ElectionBanner/index.test.tsx index de3d9554abd..85a040a0495 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,15 +123,35 @@ 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'); }); + 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); } @@ -43,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), );