WS-POC: Lite Mode

src/app/components/LiteModeButton/index.styles.tsx

@@ -0,0 +1,46 @@
+import pixelsToRem from '#app/utilities/pixelsToRem';
+import { css, Theme } from '@emotion/react';
+
+export default {
+  container: ({ palette, fontSizes, fontVariants, spacings }: Theme) =>
+    css({
+      color: `${palette.BLACK}`,
+      backgroundColor: `${palette.POSTBOX}`,
+      border: `${pixelsToRem(1)}rem solid ${palette.WHITE}`,
+      '&:nth-child(2)': {
+        ...fontSizes.minion,
+        ...fontVariants.sansRegular,
+        margin: `0.5rem 0.3rem`,
+        display: 'flex',
+        flexDirection: 'column',
+        '& span': {
+          display: 'block',
+          padding: `0.1rem 0.4rem`,
+          flex: '1',
+          alignItems: 'center',
+        },
+      },
+      '&:nth-child(1)': {
+        ...fontSizes.brevier,
+        ...fontVariants.sansRegular,
+        margin: `${pixelsToRem(2)}rem`,
+        padding: `0 ${pixelsToRem(2)}rem`,
+        '& span': {
+          padding: `${spacings.HALF}rem ${spacings.FULL}rem`,
+          margin: `${pixelsToRem(2)}rem 0`,
+        },
+      },
+    }),
+  mode: ({ palette }: Theme) =>
+    css({
+      display: 'inline-block',
+      color: `${palette.WHITE}`,
+      backgroundColor: `${palette.POSTBOX}`,
+      textAlign: 'center',
+    }),
+  on: ({ palette }: Theme) =>
+    css({
+      backgroundColor: `${palette.WHITE}`,
+      color: `${palette.BLACK}`,
+    }),
+};

src/app/components/LiteModeButton/index.tsx

@@ -0,0 +1,34 @@
+import { use } from 'react';
+import { RequestContext } from '#app/contexts/RequestContext';
+import { AUDIO_PAGE, MEDIA_ARTICLE_PAGE } from '#app/routes/utils/pageTypes';
+import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
+import { PageTypes } from '#app/models/types/global';
+import CallToActionLink from '../CallToActionLink';
+import style from './index.styles';
+
+const ignoreList = [MEDIA_ARTICLE_PAGE, AUDIO_PAGE] as PageTypes[];
+
+export default () => {
+  const { canonicalLink, isLite, pageType } = use(RequestContext);
+  const clickTrackerHandler = useClickTrackerHandler({
+    componentName: `switch-to-${isLite ? 'canonical' : 'lite'}`,
+  });
+
+  if (ignoreList.includes(pageType)) {
+    return null;
+  }
+
+  const liteLink = `${canonicalLink}.lite`;
+
+  return (
+    <CallToActionLink
+      url={isLite ? canonicalLink : liteLink}
+      {...(isLite && { 'data-ignore-lite': true })}
+      css={style.container}
+      {...clickTrackerHandler}
+    >
+      <span css={[style.mode, !isLite && style.on]}>Classic</span>
+      <span css={[style.mode, isLite && style.on]}>Lite</span>
+    </CallToActionLink>
+  );
+};

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

@@ -15,6 +15,7 @@ import NewNavigationContainer from '#src/app/components/Navigation';
 import LegacyNavigationContainer from '#src/app/legacy/containers/Navigation';
 import AccountHeader from '#app/components/Account/AccountHeader';
 import SERVICES_WITH_NEW_NAV from '#app/components/Navigation/config';
+import LiteModeButton from '#app/components/LiteModeButton';
 import { ServiceContext } from '../../../contexts/ServiceContext';
 import ConsentBanner from '../ConsentBanner';
 import BrandContainer from '../Brand';
@@ -129,7 +130,10 @@ const HeaderContainer = ({ navItems, propsForTopBarOJComponent }) => {
           scriptLink={shouldRenderScriptSwitch && <ScriptLink />}
           css={headerBrandCss}
         >
-          <AccountHeader />
+          <div css={styles.toggleContainer}>
+            <AccountHeader />
+            <LiteModeButton />
+          </div>
         </Header>
       )}
       {isLite && <LiteSiteSummary />}

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

@@ -55,7 +55,7 @@ export default {
           },
         },
         [mq.GROUP_1_MIN_WIDTH]: {
-          flex: '0 1 auto',
+          // flex: '0 1 auto',
           minWidth: 0,
         },
       },
@@ -66,15 +66,11 @@ export default {
       },
       '.script-link-wrapper': {
         [mq.GROUP_0_MAX_WIDTH]: {
-          flexBasis: '100%',
+          // 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`,
         },
       },
     }),
@@ -86,4 +82,9 @@ export default {
       height: `${SVG_HEIGHT}px`,
       maxWidth: `${LOGO_ASPECT_RATIO * SVG_HEIGHT}px`,
     }),
+  toggleContainer: () =>
+    css({
+      display: 'flex',
+      flexDirection: 'row-reverse',
+    }),
 };