WS-2323 - Add Language Script Switch Button to New Navigation Dual Script Language Services [Do Not Merge]

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;
+  min-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;
-}
+<div>
+  <a
+    class="focusIndicatorRemove emotion-0"
+    data-variant="cyr"
+    href="/serbian/cyr"
+  >
+    <span
+      class="emotion-1"
+    >
+      Ћир
+    </span>
+  </a>
+</div>
+`;
 
-@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;
+  min-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;
 }
 
 <div>
   <a
     class="focusIndicatorRemove emotion-0"
-    data-variant="cyr"
-    href="/serbian/cyr"
+    data-variant="simp"
+    href="/ukchina/simp/articles/c0e8weny66ko"
   >
     <span
       class="emotion-1"
     >
-      Ћир
+      简
     </span>
   </a>
 </div>

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`,
+      minWidth: `${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;

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(<ScriptLink />, {
+      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`

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 (
     <a
-      css={styles.link}
+      css={linkStyles}
       href={pathToVariant}
       data-variant={alternateVariant}
       className="focusIndicatorRemove"
     >
-      <span css={styles.container}>{text}</span>
+      <span css={containerStyles}>{text}</span>
     </a>
   );
 };

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;

src/app/legacy/containers/Header/index.jsx

@@ -86,6 +86,8 @@ const HeaderContainer = ({ navItems, propsForTopBarOJComponent }) => {
     </SkipLink>
   );
 
+  const shouldUseNewNav = SERVICES_WITH_NEW_NAV.includes(service);
+
   let shouldRenderScriptSwitch = false;
 
   if (scriptLink) {
@@ -102,8 +104,10 @@ const HeaderContainer = ({ navItems, propsForTopBarOJComponent }) => {
   }
 
   if (isApp) return null;
-
-  const shouldUseNewNav = SERVICES_WITH_NEW_NAV.includes(service);
+  const headerBrandCss = shouldUseNewNav
+    ? theme =>
+        styles.headerBrand(theme, { hasScriptLink: shouldRenderScriptSwitch })
+    : null;
 
   const NavigationComponent = shouldUseNewNav
     ? NewNavigationContainer
@@ -117,7 +121,7 @@ const HeaderContainer = ({ navItems, propsForTopBarOJComponent }) => {
           linkId="brandLink"
           skipLink={skipLink}
           scriptLink={shouldRenderScriptSwitch && <ScriptLink />}
-          css={shouldUseNewNav ? styles.headerBrand : null}
+          css={headerBrandCss}
         >
           <AccountHeader />
         </Header>
@@ -126,7 +130,7 @@ const HeaderContainer = ({ navItems, propsForTopBarOJComponent }) => {
           brandRef={brandRef}
           skipLink={skipLink}
           scriptLink={shouldRenderScriptSwitch && <ScriptLink />}
-          css={shouldUseNewNav ? styles.headerBrand : null}
+          css={headerBrandCss}
         >
           <AccountHeader />
         </Header>