WS-2323 - Add Language Script Switch to New Navigation Dual Script Language Services

src/app/components/Header/ScriptLink/__snapshots__/index.test.tsx.snap

@@ -2,60 +2,91 @@
 
 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;
+  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;
   color: #FFFFFF;
   -webkit-text-decoration: none;
   text-decoration: none;
-  height: 2.75rem;
-  border: 0.0625rem solid #FFFFFF;
-  margin: 0.5rem 0 0.5rem 0.5rem;
+  width: 2.75rem;
   min-width: 2.75rem;
-  text-align: center;
+  height: 2.75rem;
+  padding: 0;
+  margin: 0;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
-@media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-0 {
-    font-size: 1rem;
-    line-height: 1.25rem;
-  }
+.emotion-0:visited {
+  color: #FFFFFF;
 }
 
-@media (min-width: 37.5rem) {
-  .emotion-0 {
-    font-size: 1rem;
-    line-height: 1.25rem;
-  }
+.emotion-0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-0:focus span,
-.emotion-0:hover span {
-  margin: 0;
-  border: 0.1875rem solid #FFFFFF;
+.emotion-0:hover span,
+.emotion-0:focus-visible span,
+.emotion-0:focus span {
+  border-width: 0.25rem;
 }
 
-@media (min-width: 25rem) {
-  .emotion-0 {
-    line-height: calc(2.25rem - 0.5rem);
-  }
+.emotion-0:focus-visible {
+  outline: 0.125rem solid #000000;
+  outline-offset: -0.125rem;
+}
+
+.emotion-0:focus {
+  outline: 0.125rem solid #000000;
+  outline-offset: -0.125rem;
 }
 
-@media (max-width: 24.9375rem) {
+@media (max-width: 14.9375rem) {
   .emotion-0 {
-    margin: 0.5rem 0 0.5rem 0;
+    position: absolute;
+    inset-inline-start: -0.3125rem;
+    inset-block-end: 0;
+    z-index: 1;
   }
 }
 
 .emotion-1 {
-  margin-top: 0.1875rem;
-  width: 100%;
-  display: inline-block;
-  height: calc(100%);
-  line-height: calc(2.75rem - 0.5rem);
+  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  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;
+  min-width: 2.125rem;
+  height: 2.25rem;
+  padding: 0 0.25rem;
+  border: 0.0625rem solid #FFFFFF;
+  line-height: 1;
+  white-space: nowrap;
+  text-align: center;
 }
 
 <div>

src/app/components/Header/ScriptLink/index.styles.ts

@@ -1,38 +1,124 @@
 import { css, Theme } from '@emotion/react';
+import pixelsToRem from '#app/utilities/pixelsToRem';
+import { MAX_NAV_ITEM_HEIGHT } from '#app/components/Navigation/index.styles';
+// logic associated with this can be removed after rollout to support just the new navigation dual script
+type ScriptLinkLayout = 'legacy' | 'new-navigation';
 
-const styles = {
-  link: ({ fontSizes, fontVariants, palette, spacings, mq }: Theme) =>
-    css({
-      ...fontSizes.pica,
-      ...fontVariants.sansRegular,
-      display: 'inline-block',
+const legacyLink = ({
+  fontSizes,
+  fontVariants,
+  palette,
+  spacings,
+  mq,
+}: Theme) =>
+  css({
+    ...fontSizes.pica,
+    ...fontVariants.sansRegular,
+    display: 'inline-block',
+    color: palette.WHITE,
+    textDecoration: 'none',
+    height: '2.75rem',
+    border: `0.0625rem solid ${palette.WHITE}`,
+    margin: `${spacings.FULL}rem 0 ${spacings.FULL}rem ${spacings.FULL}rem`,
+    minWidth: '2.75rem',
+    textAlign: 'center',
+    '&:focus, &:hover': {
+      span: {
+        margin: '0',
+        border: `0.1875rem solid ${palette.WHITE}`,
+      },
+    },
+    [mq.GROUP_2_MIN_WIDTH]: {
+      lineHeight: `calc(2.25rem - ${spacings.FULL}rem)`,
+    },
+    [mq.GROUP_1_MAX_WIDTH]: {
+      margin: `${spacings.FULL}rem 0 ${spacings.FULL}rem 0`,
+    },
+  });
+
+const legacyContainer = ({ spacings }: Theme) =>
+  css({
+    marginTop: '0.1875rem',
+    width: '100%',
+    display: 'inline-block',
+    height: 'calc(100%)',
+    lineHeight: `calc(2.75rem - ${spacings.FULL}rem)`,
+  });
+
+const newNavigationLink = ({ palette, mq }: Theme) =>
+  css({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    color: palette.WHITE,
+    textDecoration: 'none',
+    width: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
+    minWidth: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
+    height: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
+    padding: 0,
+    margin: 0,
+    flexShrink: 0,
+
+    '&:visited': {
       color: palette.WHITE,
+    },
+
+    '&:hover': {
       textDecoration: 'none',
-      height: '2.75rem',
-      border: `0.0625rem solid ${palette.WHITE}`,
-      margin: `${spacings.FULL}rem 0 ${spacings.FULL}rem ${spacings.FULL}rem`,
-      minWidth: '2.75rem',
-      textAlign: 'center',
-      '&:focus, &:hover': {
-        span: {
-          margin: '0',
-          border: `0.1875rem solid ${palette.WHITE}`,
-        },
-      },
-      [mq.GROUP_2_MIN_WIDTH]: {
-        lineHeight: `calc(2.25rem - ${spacings.FULL}rem)`,
-      },
-      [mq.GROUP_1_MAX_WIDTH]: {
-        margin: `${spacings.FULL}rem 0 ${spacings.FULL}rem 0`,
-      },
-    }),
-  container: ({ spacings }: Theme) =>
-    css({
-      marginTop: '0.1875rem',
-      width: '100%',
-      display: 'inline-block',
-      height: 'calc(100%)',
-      lineHeight: `calc(2.75rem - ${spacings.FULL}rem)`,
-    }),
+    },
+
+    '&:hover span, &:focus-visible span, &:focus span': {
+      borderWidth: `${pixelsToRem(4)}rem`,
+    },
+
+    '&:focus-visible': {
+      outline: `${pixelsToRem(2)}rem solid ${palette.BLACK}`,
+      outlineOffset: `${pixelsToRem(-2)}rem`,
+    },
+
+    '&:focus': {
+      outline: `${pixelsToRem(2)}rem solid ${palette.BLACK}`,
+      outlineOffset: `${pixelsToRem(-2)}rem`,
+    },
+
+    [mq.GROUP_0_MAX_WIDTH]: {
+      position: 'absolute',
+      insetInlineStart: `-${pixelsToRem(5)}rem`,
+      insetBlockEnd: 0,
+      zIndex: 1,
+    },
+  });
+
+const newNavigationContainer = ({ fontVariants, palette }: Theme) =>
+  css({
+    ...fontVariants.sansRegular,
+    fontSize: `${pixelsToRem(15)}rem`,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    minWidth: `${pixelsToRem(34)}rem`,
+    height: `${pixelsToRem(36)}rem`,
+    padding: `0 ${pixelsToRem(4)}rem`,
+    border: `${pixelsToRem(1)}rem solid ${palette.WHITE}`,
+    lineHeight: 1,
+    whiteSpace: 'nowrap',
+    textAlign: 'center',
+  });
+
+const styles = {
+  link:
+    (layout: ScriptLinkLayout = 'legacy') =>
+    (theme: Theme) =>
+      layout === 'new-navigation'
+        ? newNavigationLink(theme)
+        : legacyLink(theme),
+  container:
+    (layout: ScriptLinkLayout = 'legacy') =>
+    (theme: Theme) =>
+      layout === 'new-navigation'
+        ? newNavigationContainer(theme)
+        : legacyContainer(theme),
 };
 export default styles;

src/app/components/Header/ScriptLink/index.tsx

@@ -1,19 +1,29 @@
 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 { ARTICLE_PAGE } from '#app/routes/utils/pageTypes';
 import { ServiceContext } from '../../../contexts/ServiceContext';
 import styles from './index.styles';
 
 const ScriptLink = () => {
-  const { scriptLink } = use(ServiceContext);
-  const { pathname, variant: currentVariant } = use(RequestContext);
+  const { scriptLink, service } = use(ServiceContext);
+  const { pathname, pageType, variant: currentVariant } = use(RequestContext);
   const { enabled: scriptLinkEnabled } = useToggle('scriptLink');
 
   const { text, variant: alternateVariant } = scriptLink || {};
+  const isNewNavigationService = SERVICES_WITH_NEW_NAV.includes(service);
 
   if (!pathname) return null;
   if (!scriptLinkEnabled) return null;
   if (!alternateVariant) return null;
+  if (
+    isNewNavigationService &&
+    service === 'ukchina' &&
+    pageType !== ARTICLE_PAGE
+  ) {
+    return null;
+  }
 
   const pathPartsWithoutExtension = pathname
     .replace(/\.[^/.]+$/, '') // remove any extensions, we don't want to link to AMP pages directly
@@ -29,12 +39,18 @@ const ScriptLink = () => {
 
   return (
     <a
-      css={styles.link}
+      css={styles.link(isNewNavigationService ? 'new-navigation' : 'legacy')}
       href={pathToVariant}
       data-variant={alternateVariant}
       className="focusIndicatorRemove"
     >
-      <span css={styles.container}>{text}</span>
+      <span
+        css={styles.container(
+          isNewNavigationService ? 'new-navigation' : 'legacy',
+        )}
+      >
+        {text}
+      </span>
     </a>
   );
 };

src/app/components/Navigation/config.ts

@@ -5,9 +5,13 @@ const SERVICES_WITH_NEW_NAV: Services[] = [
   'bengali',
   'marathi',
   'punjabi',
+  'serbian',
   'tamil',
   'telugu',
+  'ukchina',
   'urdu',
+  'uzbek',
+  'zhongwen',
 ] as const;
 
 export default SERVICES_WITH_NEW_NAV;

src/app/legacy/containers/Header/index.styles.ts

@@ -5,6 +5,7 @@ import { css, Theme } from '@emotion/react';
 const SVG_WRAPPER_MAX_WIDTH_ABOVE_1280PX = '63rem';
 const LOGO_ASPECT_RATIO = 168 / 48;
 const SVG_HEIGHT = 32;
+const BRAND_LINK_SELECTOR = '& > div > a[aria-labelledby^="BrandLink-"]';
 
 export default {
   banner: ({ palette, mq, spacings }: Theme) =>
@@ -31,6 +32,21 @@ export default {
     css({
       minHeight: 'auto',
       height: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
+      [BRAND_LINK_SELECTOR]: {
+        paddingTop: `${pixelsToRem(2)}rem`,
+      },
+
+      [mq.GROUP_0_MAX_WIDTH]: {
+        minHeight: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT * 2)}rem`,
+        height: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT * 2)}rem`,
+
+        [BRAND_LINK_SELECTOR]: {
+          minHeight: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
+          height: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
+          width: '100%',
+          alignSelf: 'flex-start',
+        },
+      },
 
       [mq.GROUP_1_MIN_WIDTH]: {
         minHeight: 'auto',
@@ -54,10 +70,6 @@ export default {
           height: '1.875rem',
         },
       },
-
-      a: {
-        paddingTop: `${pixelsToRem(2)}rem`,
-      },
     }),
   logoSvg: ({ palette }: Theme) =>
     css({