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 4c06d9a7b0b..3cea4b6281a 100644 --- a/src/app/components/Header/ScriptLink/__snapshots__/index.test.tsx.snap +++ b/src/app/components/Header/ScriptLink/__snapshots__/index.test.tsx.snap @@ -2,72 +2,149 @@ 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.9375rem; + line-height: 1; + position: relative; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -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; - } +.emotion-0:focus::after, +.emotion-0:hover::after { + content: ""; + position: absolute; + inset: 0; + box-sizing: border-box; + border: 0.25rem solid #FFFFFF; + pointer-events: none; } -@media (min-width: 37.5rem) { - .emotion-0 { - font-size: 1rem; - line-height: 1.25rem; - } +.emotion-1 { + 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; } -.emotion-0:focus span, -.emotion-0:hover span { - margin: 0; - border: 0.1875rem solid #FFFFFF; -} +
+ + + Ћир + + +
+`; -@media (min-width: 25rem) { - .emotion-0 { - line-height: calc(2.25rem - 0.5rem); - } +exports[`Script Link should render correctly for new navigation 1`] = ` +.emotion-0 { + font-family: Helvetica,Arial,STHeiti,华文黑体,"Microsoft YaHei",微软雅黑,SimSun,宋体; + font-style: normal; + font-weight: 400; + font-size: 0.9375rem; + line-height: 1; + position: relative; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -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.25rem; + width: 2.125rem; + border: 0.0625rem solid #FFFFFF; + text-align: center; + white-space: nowrap; } -@media (max-width: 24.9375rem) { - .emotion-0 { - margin: 0.5rem 0 0.5rem 0; - } +.emotion-0:focus::after, +.emotion-0:hover::after { + content: ""; + position: absolute; + inset: 0; + box-sizing: border-box; + border: 0.25rem solid #FFFFFF; + 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/Header/ScriptLink/index.styles.ts b/src/app/components/Header/ScriptLink/index.styles.ts index 3975bc5f374..baf5579a46f 100644 --- a/src/app/components/Header/ScriptLink/index.styles.ts +++ b/src/app/components/Header/ScriptLink/index.styles.ts @@ -1,3 +1,4 @@ +import pixelsToRem from '#app/utilities/pixelsToRem'; import { css, Theme } from '@emotion/react'; const styles = { @@ -26,6 +27,32 @@ const styles = { margin: `${spacings.FULL}rem 0 ${spacings.FULL}rem 0`, }, }), + newNavLink: ({ fontVariants, palette }: Theme) => + css({ + ...fontVariants.sansRegular, + fontSize: `${pixelsToRem(15)}rem`, + lineHeight: 1, + position: 'relative', + display: 'inline-flex', + alignItems: 'stretch', + justifyContent: 'center', + boxSizing: 'border-box', + color: palette.WHITE, + textDecoration: 'none', + height: `${pixelsToRem(36)}rem`, + width: `${pixelsToRem(34)}rem`, + border: `${pixelsToRem(1)}rem solid ${palette.WHITE}`, + textAlign: 'center', + whiteSpace: 'nowrap', + '&:focus::after, &:hover::after': { + content: '""', + position: 'absolute', + inset: 0, + boxSizing: 'border-box', + border: `${pixelsToRem(4)}rem solid ${palette.WHITE}`, + pointerEvents: 'none', + }, + }), container: ({ spacings }: Theme) => css({ marginTop: '0.1875rem', @@ -34,5 +61,15 @@ const styles = { height: 'calc(100%)', lineHeight: `calc(2.75rem - ${spacings.FULL}rem)`, }), + newNavContainer: () => + css({ + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + boxSizing: 'border-box', + height: '100%', + paddingInline: `${pixelsToRem(6)}rem`, + lineHeight: 1, + }), }; export default styles; diff --git a/src/app/components/Header/ScriptLink/index.test.tsx b/src/app/components/Header/ScriptLink/index.test.tsx index 6ac2235c105..877d58bc88a 100644 --- a/src/app/components/Header/ScriptLink/index.test.tsx +++ b/src/app/components/Header/ScriptLink/index.test.tsx @@ -25,6 +25,16 @@ describe(`Script Link`, () => { expect(container).toMatchSnapshot(); }); + it('should render correctly for new navigation', () => { + const { container } = render(, { + toggles: enabledToggleState, + service: 'ukchina', + variant: 'trad', + pathname: '/ukchina/trad/articles/c0e8weny66ko', + }); + expect(container).toMatchSnapshot(); + }); + describe('assertions', () => { describe.each(['canonical', 'amp', 'lite'])('%s', platform => { it.each` diff --git a/src/app/components/Header/ScriptLink/index.tsx b/src/app/components/Header/ScriptLink/index.tsx index 65795317d54..4cc7b02381a 100644 --- a/src/app/components/Header/ScriptLink/index.tsx +++ b/src/app/components/Header/ScriptLink/index.tsx @@ -1,11 +1,12 @@ import { use } from 'react'; import useToggle from '#hooks/useToggle'; import { RequestContext } from '#app/contexts/RequestContext'; +import SERVICES_WITH_NEW_NAV from '#app/components/Navigation/config'; import { ServiceContext } from '../../../contexts/ServiceContext'; import styles from './index.styles'; const ScriptLink = () => { - const { scriptLink } = use(ServiceContext); + const { scriptLink, service } = use(ServiceContext); const { pathname, variant: currentVariant } = use(RequestContext); const { enabled: scriptLinkEnabled } = useToggle('scriptLink'); @@ -26,15 +27,20 @@ const ScriptLink = () => { pathPartsWithoutExtension[currentVariantIndex] = alternateVariant; const pathToVariant = pathPartsWithoutExtension.join('/'); + const useNewNavigationStyles = SERVICES_WITH_NEW_NAV.includes(service); + const linkStyles = useNewNavigationStyles ? styles.newNavLink : styles.link; + const containerStyles = useNewNavigationStyles + ? styles.newNavContainer + : styles.container; return ( - {text} + {text} ); }; diff --git a/src/app/components/Navigation/config.ts b/src/app/components/Navigation/config.ts index ed657b7cfc7..021494e376f 100644 --- a/src/app/components/Navigation/config.ts +++ b/src/app/components/Navigation/config.ts @@ -13,13 +13,17 @@ const SERVICES_WITH_NEW_NAV: Services[] = [ 'marathi', 'pidgin', 'punjabi', + 'serbian', 'somali', 'swahili', 'tamil', 'telugu', 'tigrinya', + 'ukchina', 'urdu', + 'uzbek', 'yoruba', + 'zhongwen', ] as const; export default SERVICES_WITH_NEW_NAV; diff --git a/src/app/components/PageLayoutWrapper/__snapshots__/index.test.tsx.snap b/src/app/components/PageLayoutWrapper/__snapshots__/index.test.tsx.snap index 439fa34d4ca..f182275b637 100644 --- a/src/app/components/PageLayoutWrapper/__snapshots__/index.test.tsx.snap +++ b/src/app/components/PageLayoutWrapper/__snapshots__/index.test.tsx.snap @@ -1198,11 +1198,11 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] class="emotion-17 emotion-18 emotion-19" >
@@ -1633,11 +1633,11 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] class="emotion-17 emotion-142 emotion-19" >
diff --git a/src/app/legacy/containers/Brand/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/Brand/__snapshots__/index.test.jsx.snap index 993119b8c04..1e3cfa3eb59 100644 --- a/src/app/legacy/containers/Brand/__snapshots__/index.test.jsx.snap +++ b/src/app/legacy/containers/Brand/__snapshots__/index.test.jsx.snap @@ -147,11 +147,11 @@ exports[`BrandContainer should render correctly 1`] = ` class="emotion-0 emotion-1 emotion-2" >
diff --git a/src/app/legacy/containers/Header/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/Header/__snapshots__/index.test.jsx.snap index 9e033e25efb..186c1513903 100644 --- a/src/app/legacy/containers/Header/__snapshots__/index.test.jsx.snap +++ b/src/app/legacy/containers/Header/__snapshots__/index.test.jsx.snap @@ -913,11 +913,11 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = ` class="emotion-16 emotion-17 emotion-18" >
@@ -2248,11 +2248,11 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` class="emotion-16 emotion-17 emotion-18" >
@@ -3583,11 +3583,11 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` class="emotion-16 emotion-17 emotion-18" >
@@ -4918,11 +4918,11 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` class="emotion-16 emotion-17 emotion-18" >
diff --git a/src/app/legacy/containers/Header/index.jsx b/src/app/legacy/containers/Header/index.jsx index f4a73e104c1..d108f6b5806 100644 --- a/src/app/legacy/containers/Header/index.jsx +++ b/src/app/legacy/containers/Header/index.jsx @@ -86,6 +86,8 @@ const HeaderContainer = ({ navItems, propsForTopBarOJComponent }) => { ); + const shouldUseNewNav = SERVICES_WITH_NEW_NAV.includes(service); + let shouldRenderScriptSwitch = false; if (scriptLink) { @@ -102,8 +104,7 @@ const HeaderContainer = ({ navItems, propsForTopBarOJComponent }) => { } if (isApp) return null; - - const shouldUseNewNav = SERVICES_WITH_NEW_NAV.includes(service); + const headerBrandCss = shouldUseNewNav ? styles.headerBrand : null; const NavigationComponent = shouldUseNewNav ? NewNavigationContainer @@ -117,7 +118,7 @@ const HeaderContainer = ({ navItems, propsForTopBarOJComponent }) => { linkId="brandLink" skipLink={skipLink} scriptLink={shouldRenderScriptSwitch && } - css={shouldUseNewNav ? styles.headerBrand : null} + css={headerBrandCss} > @@ -126,7 +127,7 @@ const HeaderContainer = ({ navItems, propsForTopBarOJComponent }) => { brandRef={brandRef} skipLink={skipLink} scriptLink={shouldRenderScriptSwitch && } - css={shouldUseNewNav ? styles.headerBrand : null} + css={headerBrandCss} > diff --git a/src/app/legacy/containers/Header/index.styles.ts b/src/app/legacy/containers/Header/index.styles.ts index 6011711be1c..f7656822ea6 100644 --- a/src/app/legacy/containers/Header/index.styles.ts +++ b/src/app/legacy/containers/Header/index.styles.ts @@ -29,34 +29,53 @@ export default { }), headerBrand: ({ mq, spacings }: Theme) => css({ - minHeight: 'auto', - height: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`, + minHeight: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`, [mq.GROUP_1_MIN_WIDTH]: { minHeight: 'auto', }, [mq.GROUP_2_MIN_WIDTH]: { - minHeight: 'auto', padding: `0 ${spacings.FULL}rem`, - height: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`, + minHeight: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`, }, [mq.GROUP_3_MIN_WIDTH]: { - minHeight: 'auto', padding: `0 ${spacings.DOUBLE}rem`, - height: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`, + minHeight: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`, }, - svg: { - height: '1.5rem', + '.brand-link': { + paddingTop: `${pixelsToRem(2)}rem`, + + svg: { + height: '1.5rem', - [mq.GROUP_3_MIN_WIDTH]: { - height: '1.875rem', + [mq.GROUP_3_MIN_WIDTH]: { + height: '1.875rem', + }, + }, + [mq.GROUP_1_MIN_WIDTH]: { + flex: '0 1 auto', + minWidth: 0, }, }, - - a: { - paddingTop: `${pixelsToRem(2)}rem`, + '.brand-svg-wrapper': { + [mq.GROUP_1_MIN_WIDTH]: { + flexWrap: 'nowrap', + }, + }, + '.script-link-wrapper': { + [mq.GROUP_0_MAX_WIDTH]: { + flexBasis: '100%', + margin: `0 0 ${spacings.FULL}rem 0`, + }, + [mq.GROUP_1_MIN_WIDTH]: { + display: 'flex', + alignItems: 'center', + flex: '0 0 auto', + marginInlineStart: 'auto', + marginInlineEnd: `${pixelsToRem(-4)}rem`, + }, }, }), logoSvg: ({ palette }: Theme) => diff --git a/src/app/legacy/containers/Header/index.test.jsx b/src/app/legacy/containers/Header/index.test.jsx index 040b0cca3c5..c29b85b2120 100644 --- a/src/app/legacy/containers/Header/index.test.jsx +++ b/src/app/legacy/containers/Header/index.test.jsx @@ -157,6 +157,30 @@ describe(`Header`, () => { expect(container.querySelectorAll(scriptLinkSelector).length).toBe(0); }); + it('should render script link for ukchina article pages', () => { + const { container } = HeaderContainerWithContext({ + renderOptions: { + pageType: ARTICLE_PAGE, + service: 'ukchina', + variant: 'trad', + }, + }); + + expect(container.querySelectorAll(scriptLinkSelector).length).toBe(1); + }); + + it('should render script link for ukchina home pages', () => { + const { container } = HeaderContainerWithContext({ + renderOptions: { + pageType: HOME_PAGE, + service: 'ukchina', + variant: 'trad', + }, + }); + + expect(container.querySelectorAll(scriptLinkSelector).length).toBe(1); + }); + describe('when service is uzbek', () => { describe.each(['cyr', 'lat'])('and variant is %s', variant => { const supportedUzbekPageTypes = [ diff --git a/src/app/legacy/psammead/psammead-brand/src/__snapshots__/index.test.jsx.snap b/src/app/legacy/psammead/psammead-brand/src/__snapshots__/index.test.jsx.snap index 2edb68e3ff3..ecc4fcc2f84 100644 --- a/src/app/legacy/psammead/psammead-brand/src/__snapshots__/index.test.jsx.snap +++ b/src/app/legacy/psammead/psammead-brand/src/__snapshots__/index.test.jsx.snap @@ -104,7 +104,7 @@ exports[`Brand should render correctly with link not provided 1`] = ` class="emotion-0 emotion-1" >
{scriptLink}
} + {scriptLink &&
{scriptLink}
} );