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

@@ -72,3 +72,76 @@ exports[`Script Link should render correctly 1`] = `
   </a>
 </div>
 `;
+
+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;
+  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;
+  min-width: 2.75rem;
+  text-align: center;
+}
+
+@media (min-width: 20rem) and (max-width: 37.4375rem) {
+  .emotion-0 {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+}
+
+@media (min-width: 37.5rem) {
+  .emotion-0 {
+    font-size: 1rem;
+    line-height: 1.75rem;
+  }
+}
+
+.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);
+  }
+}
+
+@media (max-width: 24.9375rem) {
+  .emotion-0 {
+    margin: 0.5rem 0 0.5rem 0;
+  }
+}
+
+.emotion-1 {
+  margin-top: 0.1875rem;
+  width: 100%;
+  display: inline-block;
+  height: calc(100%);
+  line-height: calc(2.75rem - 0.5rem);
+}
+
+<div>
+  <a
+    class="focusIndicatorRemove emotion-0"
+    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,31 @@ const styles = {
         margin: `${spacings.FULL}rem 0 ${spacings.FULL}rem 0`,
       },
     }),
+  newNavLink: ({ fontVariants, fontSizes, palette }: Theme) =>
+    css({
+      ...fontVariants.sansRegular,
+      ...fontSizes.minion,
+      position: 'relative',
+      display: 'flex',
+      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(3)}rem solid ${palette.WHITE}`,
+        pointerEvents: 'none',
+      },
+    }),
   container: ({ spacings }: Theme) =>
     css({
       marginTop: '0.1875rem',
@@ -34,5 +60,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/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"
         >
           <div
-            class="emotion-20 emotion-21"
+            class="brand-svg-wrapper emotion-20 emotion-21"
           >
             <a
               aria-labelledby="BrandLink-topPage"
-              class="focusIndicatorRemove emotion-22 emotion-23"
+              class="brand-link focusIndicatorRemove emotion-22 emotion-23"
               href="/news"
               id="topPage"
             >
@@ -1633,11 +1633,11 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
         class="emotion-17 emotion-142 emotion-19"
       >
         <div
-          class="emotion-20 emotion-21"
+          class="brand-svg-wrapper emotion-20 emotion-21"
         >
           <a
             aria-labelledby="BrandLink-footer"
-            class="focusIndicatorRemove emotion-22 emotion-23"
+            class="brand-link focusIndicatorRemove emotion-22 emotion-23"
             href="/news"
             id="footer"
           >

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"
 >
   <div
-    class="emotion-3 emotion-4"
+    class="brand-svg-wrapper emotion-3 emotion-4"
   >
     <a
       aria-labelledby="BrandLink-null"
-      class="focusIndicatorRemove emotion-5 emotion-6"
+      class="brand-link focusIndicatorRemove emotion-5 emotion-6"
       href="/news"
     >
       <svg

src/app/legacy/containers/Footer/__snapshots__/index.test.jsx.snap

@@ -362,11 +362,11 @@ exports[`FooterContainer snapshots should render correctly 1`] = `
       class="emotion-2 emotion-3 emotion-4"
     >
       <div
-        class="emotion-5 emotion-6"
+        class="brand-svg-wrapper emotion-5 emotion-6"
       >
         <a
           aria-labelledby="BrandLink-footer"
-          class="focusIndicatorRemove emotion-7 emotion-8"
+          class="brand-link focusIndicatorRemove emotion-7 emotion-8"
           href="/news"
           id="footer"
         >

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"
     >
       <div
-        class="emotion-19 emotion-20"
+        class="brand-svg-wrapper emotion-19 emotion-20"
       >
         <a
           aria-labelledby="BrandLink-topPage"
-          class="focusIndicatorRemove emotion-21 emotion-22"
+          class="brand-link focusIndicatorRemove emotion-21 emotion-22"
           href="/news"
           id="topPage"
         >
@@ -2248,11 +2248,11 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
       class="emotion-16 emotion-17 emotion-18"
     >
       <div
-        class="emotion-19 emotion-20"
+        class="brand-svg-wrapper emotion-19 emotion-20"
       >
         <a
           aria-labelledby="BrandLink-topPage"
-          class="focusIndicatorRemove emotion-21 emotion-22"
+          class="brand-link focusIndicatorRemove emotion-21 emotion-22"
           href="/news"
           id="topPage"
         >
@@ -3583,11 +3583,11 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
       class="emotion-16 emotion-17 emotion-18"
     >
       <div
-        class="emotion-19 emotion-20"
+        class="brand-svg-wrapper emotion-19 emotion-20"
       >
         <a
           aria-labelledby="BrandLink-topPage"
-          class="focusIndicatorRemove emotion-21 emotion-22"
+          class="brand-link focusIndicatorRemove emotion-21 emotion-22"
           href="/news"
           id="topPage"
         >
@@ -4918,11 +4918,11 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
       class="emotion-16 emotion-17 emotion-18"
     >
       <div
-        class="emotion-19 emotion-20"
+        class="brand-svg-wrapper emotion-19 emotion-20"
       >
         <a
           aria-labelledby="BrandLink-topPage"
-          class="focusIndicatorRemove emotion-21 emotion-22"
+          class="brand-link focusIndicatorRemove emotion-21 emotion-22"
           href="/news"
           id="topPage"
         >

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,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 && <ScriptLink />}
-          css={shouldUseNewNav ? styles.headerBrand : null}
+          css={headerBrandCss}
         >
           <AccountHeader />
         </Header>
@@ -126,7 +127,7 @@ const HeaderContainer = ({ navItems, propsForTopBarOJComponent }) => {
           brandRef={brandRef}
           skipLink={skipLink}
           scriptLink={shouldRenderScriptSwitch && <ScriptLink />}
-          css={shouldUseNewNav ? styles.headerBrand : null}
+          css={headerBrandCss}
         >
           <AccountHeader />
         </Header>