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),
);