diff --git a/src/app/components/CollapsibleNavigation/index.styles.ts b/src/app/components/CollapsibleNavigation/index.styles.ts
index dd0e6f40ce1..f68b860d84f 100644
--- a/src/app/components/CollapsibleNavigation/index.styles.ts
+++ b/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',
diff --git a/src/app/components/ThemeProvider/chameleonLogos/ws.tsx b/src/app/components/ThemeProvider/chameleonLogos/ws.tsx
index 566a2e4eb18..5874c5e0d7f 100644
--- a/src/app/components/ThemeProvider/chameleonLogos/ws.tsx
+++ b/src/app/components/ThemeProvider/chameleonLogos/ws.tsx
@@ -1,12 +1,11 @@
import build from '.';
export default build({
- width: 2220,
- height: 425,
group: (
<>
-
-
+
+
),
+ viewbox: { minY: 0, minX: 0, width: 290, height: 24 },
});
diff --git a/src/app/legacy/containers/Brand/index.jsx b/src/app/legacy/containers/Brand/index.jsx
index d85529a3e3b..8b172ff0013 100644
--- a/src/app/legacy/containers/Brand/index.jsx
+++ b/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 (
{children}
diff --git a/src/app/legacy/containers/Header/NewLogoBanner.tsx b/src/app/legacy/containers/Header/NewLogoBanner.tsx
index b1a7e7a319d..c98421a5d3a 100644
--- a/src/app/legacy/containers/Header/NewLogoBanner.tsx
+++ b/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(/\/$/, '');
diff --git a/src/app/legacy/containers/Header/index.jsx b/src/app/legacy/containers/Header/index.jsx
index d108f6b5806..7945faaa0fd 100644
--- a/src/app/legacy/containers/Header/index.jsx
+++ b/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 (
- {shouldUseNewNav && }
+ {shouldShowNewLogoBanner && }
{isAmp ? (
(
);
+export const GlobalLanguages = () => (
+
+
+
+);
+
export default {
title: 'Containers/Header',
Component,
diff --git a/src/app/legacy/containers/Header/index.test.jsx b/src/app/legacy/containers/Header/index.test.jsx
index b49f0f391fb..347f234a099 100644
--- a/src/app/legacy/containers/Header/index.test.jsx
+++ b/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();
+ });
+ });
});
diff --git a/src/app/legacy/psammead/psammead-brand/src/index.jsx b/src/app/legacy/psammead/psammead-brand/src/index.jsx
index 360fb7529e8..18223b2513f 100644
--- a/src/app/legacy/psammead/psammead-brand/src/index.jsx
+++ b/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 ? (
<>
{
focusable="false"
aria-hidden="true"
height="32"
+ isLanguagesPage={isLanguagesPage && linkId !== 'footer'}
>
{svg.group}
@@ -152,11 +163,18 @@ const Brand = forwardRef((props, ref) => {
skipLink = null,
linkId = null,
children,
+ serviceLocalisedName,
+ isLanguagesPage,
...rest
} = props;
return (
-
+
{url ? (