diff --git a/src/app/components/Header/ScriptLink/__snapshots__/index.test.tsx.snap b/src/app/components/Header/ScriptLink/__snapshots__/index.test.tsx.snap index c25d32ed113..8d1d1b25677 100644 --- a/src/app/components/Header/ScriptLink/__snapshots__/index.test.tsx.snap +++ b/src/app/components/Header/ScriptLink/__snapshots__/index.test.tsx.snap @@ -2,60 +2,72 @@ exports[`Script Link should render correctly 1`] = ` .emotion-0 { - font-size: 0.9375rem; - line-height: 1.25rem; font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; font-style: normal; font-weight: 400; - display: inline-block; + font-size: 0.75rem; + line-height: 1rem; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + box-sizing: border-box; color: #FFFFFF; -webkit-text-decoration: none; text-decoration: none; - height: 2.75rem; + height: 2.25rem; + width: 2.125rem; border: 0.0625rem solid #FFFFFF; - margin: 0.5rem 0 0.5rem 0.5rem; - min-width: 2.75rem; text-align: center; + white-space: nowrap; } @media (min-width: 20rem) and (max-width: 37.4375rem) { .emotion-0 { - font-size: 1rem; - line-height: 1.25rem; + font-size: 0.75rem; + line-height: 1rem; } } @media (min-width: 37.5rem) { .emotion-0 { - font-size: 1rem; - line-height: 1.25rem; + font-size: 0.75rem; + line-height: 1rem; } } -.emotion-0:focus span, -.emotion-0:hover span { - margin: 0; +.emotion-0:focus::after, +.emotion-0:hover::after { + content: ""; + position: absolute; + inset: 0; + box-sizing: border-box; border: 0.1875rem solid #FFFFFF; -} - -@media (min-width: 25rem) { - .emotion-0 { - line-height: calc(2.25rem - 0.5rem); - } -} - -@media (max-width: 24.9375rem) { - .emotion-0 { - margin: 0.5rem 0 0.5rem 0; - } + pointer-events: none; } .emotion-1 { - margin-top: 0.1875rem; - width: 100%; - display: inline-block; - height: calc(100%); - line-height: calc(2.75rem - 0.5rem); + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + box-sizing: border-box; + height: 100%; + padding-inline: 0.375rem; + line-height: 1; }
@@ -75,60 +87,72 @@ exports[`Script Link should render correctly 1`] = ` exports[`Script Link should render correctly for new navigation 1`] = ` .emotion-0 { - font-size: 1rem; - line-height: 1.375rem; font-family: Helvetica,Arial,STHeiti,华文黑体,"Microsoft YaHei",微软雅黑,SimSun,宋体; font-style: normal; font-weight: 400; - display: inline-block; + font-size: 0.875rem; + line-height: 1rem; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + box-sizing: border-box; color: #FFFFFF; -webkit-text-decoration: none; text-decoration: none; - height: 2.75rem; + height: 2.25rem; + width: 2.125rem; border: 0.0625rem solid #FFFFFF; - margin: 0.5rem 0 0.5rem 0.5rem; - min-width: 2.75rem; text-align: center; + white-space: nowrap; } @media (min-width: 20rem) and (max-width: 37.4375rem) { .emotion-0 { - font-size: 1rem; - line-height: 1.5rem; + font-size: 0.875rem; + line-height: 1rem; } } @media (min-width: 37.5rem) { .emotion-0 { - font-size: 1rem; - line-height: 1.75rem; + font-size: 0.875rem; + line-height: 1rem; } } -.emotion-0:focus span, -.emotion-0:hover span { - margin: 0; +.emotion-0:focus::after, +.emotion-0:hover::after { + content: ""; + position: absolute; + inset: 0; + box-sizing: border-box; border: 0.1875rem solid #FFFFFF; -} - -@media (min-width: 25rem) { - .emotion-0 { - line-height: calc(2.25rem - 0.5rem); - } -} - -@media (max-width: 24.9375rem) { - .emotion-0 { - margin: 0.5rem 0 0.5rem 0; - } + pointer-events: none; } .emotion-1 { - margin-top: 0.1875rem; - width: 100%; - display: inline-block; - height: calc(100%); - line-height: calc(2.75rem - 0.5rem); + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + box-sizing: border-box; + height: 100%; + padding-inline: 0.375rem; + line-height: 1; }
diff --git a/src/app/components/Navigation/config.ts b/src/app/components/Navigation/config.ts index c244e9994a1..648e1058051 100644 --- a/src/app/components/Navigation/config.ts +++ b/src/app/components/Navigation/config.ts @@ -29,6 +29,7 @@ const SERVICES_WITH_NEW_NAV: Services[] = [ 'punjabi', 'romania', 'russian', + 'serbian', 'sinhala', 'somali', 'swahili', @@ -37,10 +38,13 @@ const SERVICES_WITH_NEW_NAV: Services[] = [ 'thai', 'tigrinya', 'turkce', + 'ukchina', 'ukrainian', 'urdu', + 'uzbek', 'vietnamese', 'yoruba', + 'zhongwen', ] as const; export default SERVICES_WITH_NEW_NAV; diff --git a/src/app/components/ThemeProvider/chameleonLogos/serbian.tsx b/src/app/components/ThemeProvider/chameleonLogos/serbian.tsx index 08fc159886f..086b58e83a8 100644 --- a/src/app/components/ThemeProvider/chameleonLogos/serbian.tsx +++ b/src/app/components/ThemeProvider/chameleonLogos/serbian.tsx @@ -1,13 +1,11 @@ import build from '.'; export default build({ - width: 2029, - height: 425, group: ( <> - ), + viewbox: { minY: 145, minX: 690, width: 1200, height: 135 }, }); diff --git a/src/app/components/ThemeProvider/chameleonLogos/ukchina.tsx b/src/app/components/ThemeProvider/chameleonLogos/ukchina.tsx index da90d04e21b..4c68e22ff9e 100644 --- a/src/app/components/ThemeProvider/chameleonLogos/ukchina.tsx +++ b/src/app/components/ThemeProvider/chameleonLogos/ukchina.tsx @@ -1,27 +1,11 @@ import buildLogo from '.'; -const height = 24.59; -const width = 162.6154; - export default buildLogo({ - height, - width, group: ( - - - - - - - + <> + + + ), - viewbox: { - height, - width, - }, + viewbox: { minY: 145, minX: 690, width: 680, height: 135 }, }); diff --git a/src/app/components/ThemeProvider/chameleonLogos/uzbek.tsx b/src/app/components/ThemeProvider/chameleonLogos/uzbek.tsx index 2a097ab14c1..c43969d5f50 100644 --- a/src/app/components/ThemeProvider/chameleonLogos/uzbek.tsx +++ b/src/app/components/ThemeProvider/chameleonLogos/uzbek.tsx @@ -1,13 +1,11 @@ import build from '.'; export default build({ - width: 1722, - height: 425, group: ( <> - ), + viewbox: { minY: 145, minX: 690, width: 892, height: 135 }, }); diff --git a/src/app/components/ThemeProvider/chameleonLogos/zhongwen.tsx b/src/app/components/ThemeProvider/chameleonLogos/zhongwen.tsx index 1350ac0e088..b11118fed1a 100644 --- a/src/app/components/ThemeProvider/chameleonLogos/zhongwen.tsx +++ b/src/app/components/ThemeProvider/chameleonLogos/zhongwen.tsx @@ -1,13 +1,11 @@ import build from '.'; export default build({ - width: 1504, - height: 425, group: ( <> - ), + viewbox: { minY: 145, minX: 690, width: 680, height: 135 }, }); diff --git a/src/app/lib/utilities/fetchConfig/index.test.ts b/src/app/lib/utilities/fetchConfig/index.test.ts index 31cd6647f6d..a718c72af34 100644 --- a/src/app/lib/utilities/fetchConfig/index.test.ts +++ b/src/app/lib/utilities/fetchConfig/index.test.ts @@ -208,7 +208,7 @@ describe('fetchConfig', () => { }, ); - it('should not set the useNewNav param for script services', async () => { + it('should set both variant and useNewNav params for a dual-script service', async () => { global.fetch = jest.fn().mockResolvedValue({ ok: true, json: async () => mockNavResponse, @@ -219,12 +219,13 @@ describe('fetchConfig', () => { await fetchConfig({ service: 'serbian', variant: 'cyr', - pagePath: '/serbian/cyr', + pagePath: '/serbian', configType: 'navigation', }); const fetchUrl = (global.fetch as jest.Mock).mock.calls[0][0]; - expect(fetchUrl).not.toContain('useNewNav=true'); + expect(fetchUrl).toContain('variant=cyr'); + expect(fetchUrl).toContain('useNewNav=true'); }); }); }); diff --git a/ws-nextjs-app/cypress/e2e/testsForAllAMPPages.ts b/ws-nextjs-app/cypress/e2e/testsForAllAMPPages.ts index 7e9d5e71ce4..2b8f49b58db 100644 --- a/ws-nextjs-app/cypress/e2e/testsForAllAMPPages.ts +++ b/ws-nextjs-app/cypress/e2e/testsForAllAMPPages.ts @@ -29,16 +29,8 @@ export default ({ service, pageType }: ServiceParametersType) => { .find('[data-e2e="scrollable-nav"]') .should('be.visible'); - cy.get('nav') - .find('[data-e2e="dropdown-nav"] ul') - .should('not.be.visible'); - cy.get('nav button').click(); - cy.get('nav') - .find('[data-e2e="scrollable-nav"]') - .should('not.be.visible'); - cy.get('nav') .find('[data-e2e="dropdown-nav"] ul') .should('be.visible'); diff --git a/ws-nextjs-app/cypress/e2e/testsForAllCanonicalPages.ts b/ws-nextjs-app/cypress/e2e/testsForAllCanonicalPages.ts index c2e4e6b0a5d..5fc19b58239 100644 --- a/ws-nextjs-app/cypress/e2e/testsForAllCanonicalPages.ts +++ b/ws-nextjs-app/cypress/e2e/testsForAllCanonicalPages.ts @@ -49,14 +49,8 @@ export default ({ service, pageType }: ServiceParametersType) => { cy.viewport(320, 480); cy.get('nav').find('[data-e2e="scrollable-nav"]').should('be.visible'); - cy.get('nav') - .find('[data-e2e="dropdown-nav"] ul') - .should('not.be.visible'); - cy.get('nav button').click(); - cy.get('nav').find('[data-e2e="scrollable-nav"]').should('not.exist'); - cy.get('nav').find('[data-e2e="dropdown-nav"] ul').should('be.visible'); cy.get('nav button').click();