WS-2562 - Update WS Languages page navigation

src/app/components/CollapsibleNavigation/index.styles.ts

@@ -45,7 +45,7 @@ const styles = {
         transform: 'translateY(-50%)',
         width: `${pixelsToRem(1)}rem`,
         height: `${pixelsToRem(20)}rem`,
-        backgroundColor: palette.GREY_10,
+        backgroundColor: palette.GREY_5,
       },
       '&:nth-last-child(2)::after': {
         background: 'none',

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

@@ -5,6 +5,7 @@ import { useTheme } from '@emotion/react';
 import { servicesWithVariants } from '#lib/utilities/variantHandler';
 import { ServiceContext } from '../../../contexts/ServiceContext';
 import { RequestContext } from '../../../contexts/RequestContext';
+import { isGlobalLanguageHomepage } from '../Header/NewLogoBanner';
 
 const StyledBrand = styled(Brand)`
   position: relative;
@@ -43,6 +44,8 @@ const BrandContainer = ({
   const maxWidth = svgRatio * svgMaxHeight;
 
   const brandPath = getBrandPath(service, variant);
+  const { pathname } = use(RequestContext);
+  const isLanguagesPage = isGlobalLanguageHomepage(pathname);
 
   return (
     <StyledBrand
@@ -56,6 +59,7 @@ const BrandContainer = ({
       skipLink={skipLink}
       scriptLink={scriptLink}
       ref={brandRef}
+      isLanguagesPage={isLanguagesPage}
       {...props}
     >
       {children}

src/app/legacy/containers/Header/NewLogoBanner.tsx

@@ -2,9 +2,9 @@ import { use } from 'react';
 import { RequestContext } from '#contexts/RequestContext';
 import styles from './index.styles';
 
-const GLOBAL_LANGUAGES_PATH = '/ws/languages';
+export const GLOBAL_LANGUAGES_PATH = '/ws/languages';
 
-const isGlobalLanguageHomepage = (inputPathname?: string) => {
+export const isGlobalLanguageHomepage = (inputPathname?: string) => {
   if (!inputPathname) return false;
 
   const pathname = inputPathname?.split(/[?#]/)?.[0]?.replace(/\/$/, '');

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

@@ -18,7 +18,7 @@ import SERVICES_WITH_NEW_NAV from '#app/components/Navigation/config';
 import { ServiceContext } from '../../../contexts/ServiceContext';
 import ConsentBanner from '../ConsentBanner';
 import BrandContainer from '../Brand';
-import NewLogoBanner from './NewLogoBanner';
+import NewLogoBanner, { isGlobalLanguageHomepage } from './NewLogoBanner';
 import styles from './index.styles';
 
 const Header = ({
@@ -88,6 +88,12 @@ const HeaderContainer = ({ navItems, propsForTopBarOJComponent }) => {
 
   const shouldUseNewNav = SERVICES_WITH_NEW_NAV.includes(service);
 
+  const { pathname } = use(RequestContext);
+
+  const isLanguagesPage = isGlobalLanguageHomepage(pathname);
+
+  const shouldShowNewLogoBanner = shouldUseNewNav || isLanguagesPage;
+
   let shouldRenderScriptSwitch = false;
 
   if (scriptLink) {
@@ -112,7 +118,7 @@ const HeaderContainer = ({ navItems, propsForTopBarOJComponent }) => {
 
   return (
     <header role="banner" lang={serviceLang}>
-      {shouldUseNewNav && <NewLogoBanner />}
+      {shouldShowNewLogoBanner && <NewLogoBanner />}
       {isAmp ? (
         <Header
           linkId="brandLink"

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

@@ -1,3 +1,5 @@
+import { RequestContextProvider } from '#app/contexts/RequestContext';
+import { HOME_PAGE } from '#app/routes/utils/pageTypes';
 import HeaderContainer from '.';
 import { ToggleContextProvider } from '../../../contexts/ToggleContext';
 
@@ -13,6 +15,16 @@ const Component = () => (
   </ToggleContextProvider>
 );
 
+export const GlobalLanguages = () => (
+  <RequestContextProvider
+    service="ws"
+    pathname="/ws/languages"
+    pageType="HOME_PAGE"
+  >
+    <Component service="ws" />
+  </RequestContextProvider>
+);
+
 export default {
   title: 'Containers/Header',
   Component,

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

@@ -320,4 +320,29 @@ describe(`Header`, () => {
       expect(container).not.toContainElement(cookieBanner);
     });
   });
+
+  describe('WSLanguagesHeader', () => {
+    it('should render the logo banner on the WS Languages Homepage', async () => {
+      HeaderContainerWithContext({
+        renderOptions: {
+          pageType: HOME_PAGE,
+          service: 'ws',
+          pathname: '/ws/languages',
+        },
+      });
+      expect(await screen.findByTestId('logo-banner')).toBeInTheDocument();
+    });
+
+    it('should not render the logo banner for ws service on a non-languages page', () => {
+      HeaderContainerWithContext({
+        renderOptions: {
+          pageType: HOME_PAGE,
+          service: 'ws',
+          pathname: '/ws',
+        },
+      });
+
+      expect(screen.queryByTestId('logo-banner')).toBeNull();
+    });
+  });
 });

src/app/legacy/psammead/psammead-brand/src/index.jsx

@@ -36,17 +36,20 @@ const Banner = styled.div`
   align-items: stretch;
 
   @media (min-width: ${GEL_GROUP_1_SCREEN_WIDTH_MIN}) {
-    min-height: ${60 / 16}rem;
+    min-height: ${props =>
+      props.isLanguagesPage ? `${44 / 16}rem` : `${60 / 16}rem`};
     padding: 0 ${GEL_SPACING};
   }
 
   @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) {
-    min-height: ${60 / 16}rem;
+    min-height: ${props =>
+      props.isLanguagesPage ? `${44 / 16}rem` : `${60 / 16}rem`};
     padding: 0 ${GEL_SPACING_DBL};
   }
 
   @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
-    min-height: ${64 / 16}rem;
+    min-height: ${props =>
+      props.isLanguagesPage ? `${44 / 16}rem` : `${64 / 16}rem`};
   }
 `;
 
@@ -89,7 +92,8 @@ const BrandSvg = styled.svg`
   }
 
   @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
-    height: ${30 / 16}rem;
+    height: ${props =>
+      props.isLanguagesPage ? `${24 / 16}rem` : `${30 / 16}rem`};
   }
 
   @media screen and (-ms-high-contrast: active), print {
@@ -115,7 +119,13 @@ const LocalisedBrandName = ({
   );
 };
 
-const StyledBrand = ({ linkId, product, serviceLocalisedName = null, svg }) => {
+const StyledBrand = ({
+  linkId,
+  product,
+  serviceLocalisedName = null,
+  svg,
+  isLanguagesPage = false,
+}) => {
   return svg ? (
     <>
       <BrandSvg
@@ -130,6 +140,7 @@ const StyledBrand = ({ linkId, product, serviceLocalisedName = null, svg }) => {
         focusable="false"
         aria-hidden="true"
         height="32"
+        isLanguagesPage={isLanguagesPage && linkId !== 'footer'}
       >
         {svg.group}
       </BrandSvg>
@@ -152,11 +163,18 @@ const Brand = forwardRef((props, ref) => {
     skipLink = null,
     linkId = null,
     children,
+    serviceLocalisedName,
+    isLanguagesPage,
     ...rest
   } = props;
 
   return (
-    <Banner svgHeight={svgHeight} scriptLink={scriptLink} {...rest}>
+    <Banner
+      svgHeight={svgHeight}
+      scriptLink={scriptLink}
+      isLanguagesPage={isLanguagesPage && linkId !== 'footer'}
+      {...rest}
+    >
       <SvgWrapper ref={ref} className="brand-svg-wrapper">
         {url ? (
           <StyledLink