a75981ab-0a2f-451f-a246-b17f7278ec4d

Committed 17 Nov 2025 09:36AM UTC coverage: 72.338% (-1.9%) from 74.23%

Build # a75981ab-0a2f-451f-a246-b17f7278ec4d

Build Type

push

circleci

Committed by

ManoelMilchev

Commit Message

add Publication dropdown

Run Details

310 of 414 branches covered (74.88%)

Branch coverage included in aggregate %.

0 of 9 new or added lines in 2 files covered. (0.0%)

2 existing lines in 1 file now uncovered.

485 of 685 relevant lines covered (70.8%)

8.18 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/Header/Header.js

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import oHeaderServices from '@financial-times/o-header-services/main';

import { SecondaryNavigation } from './SecondaryNavigation';
import { MainNavigation } from './MainNavigation';
import PublicationSelect from './PublicationSelect';


const Header = ({
  title,
  name,
  id,
  mainMenuData,
  secondaryMenuData,
  clientMenuData,
  renderProp,
  publicationOptions = [],
  selectedPublication,
  handleChangePublication,
  publicationClassName = ''
}) => {
  useEffect(() => {
    oHeaderServices.init();
  }, []);

  const hasPublicationOptions = publicationOptions && publicationOptions.length > 0;

  return (
    <div className="o-layout__header">
      <header className="o-header-services " data-o-component="o-header-services" data-testid="header-component">
        <div className="o-header-services__top" style={{ position: 'relative' }}>
          <div className="o-header-services__hamburger">
            <a className="o-header-services__hamburger-icon" href="/" role="button">
              <span className="o-header-services__visually-hidden">Open primary navigation</span>
            </a>
          </div>
          <a href="/">
            <div className="o-header-services__logo" />
          </a>
          <div className="o-header-services__title">
            <a className="o-header-services__product-name" href="/">{title}</a>
          </div>
          {hasPublicationOptions && (
            <div
              className="header-publication-select-container"
              style={{
                position: 'absolute',
                right: 0,
                top: 0,
                height: '56px',
                display: 'flex',
                alignItems: 'center',
                zIndex: 10,
                paddingRight: 24
              }}
            >
              <PublicationSelect
                publicationOptions={publicationOptions}
                selectedPublication={selectedPublication}
                handleChangePublication={handleChangePublication}
                className={publicationClassName}
              />
            </div>
          )}
        </div>
        <MainNavigation
          menuData={mainMenuData}
          renderProp={renderProp}
        />
        {secondaryMenuData && secondaryMenuData.length > 0 && (
          <SecondaryNavigation
            name={name}
            id={id}
            menuData={secondaryMenuData}
            clientMenuData={clientMenuData}
            renderProp={renderProp}
          />
        )}
      </header>
    </div>
  );
};


Header.propTypes = {
  title: PropTypes.string,
  name: PropTypes.string,
  id: PropTypes.string,
  mainMenuData: MainNavigation.propTypes.menuData,
  secondaryMenuData: SecondaryNavigation.propTypes.menuData,
  clientMenuData: SecondaryNavigation.propTypes.clientMenuData,
  renderProp: SecondaryNavigation.propTypes.renderProp,
  publicationOptions: PropTypes.array,
  selectedPublication: PropTypes.string,
  handleChangePublication: PropTypes.func,
  publicationClassName: PropTypes.string
};

export default Header;

1	import React, { useEffect } from 'react';
2	import PropTypes from 'prop-types';
3	import oHeaderServices from '@financial-times/o-header-services/main';
4
5	import { SecondaryNavigation } from './SecondaryNavigation';
6	import { MainNavigation } from './MainNavigation';
7	import PublicationSelect from './PublicationSelect';
8
9
10	const Header = ({	×
11	title,
12	name,
13	id,
14	mainMenuData,
15	secondaryMenuData,
16	clientMenuData,
17	renderProp,
18	publicationOptions = [],	×
19	selectedPublication,
20	handleChangePublication,
21	publicationClassName = ''	×
22	}) => {
23	useEffect(() => {	×
24	oHeaderServices.init();	×
25	}, []);
26
NEW 27	const hasPublicationOptions = publicationOptions && publicationOptions.length > 0;	×
28
UNCOV 29	return (	×
30	<div className="o-layout__header">
31	<header className="o-header-services " data-o-component="o-header-services" data-testid="header-component">
32	<div className="o-header-services__top" style={{ position: 'relative' }}>
33	<div className="o-header-services__hamburger">
34	<a className="o-header-services__hamburger-icon" href="/" role="button">
35	<span className="o-header-services__visually-hidden">Open primary navigation</span>
36	</a>
37	</div>
38	<a href="/">
39	<div className="o-header-services__logo" />
40	</a>
41	<div className="o-header-services__title">
42	<a className="o-header-services__product-name" href="/">{title}</a>
43	</div>
44	{hasPublicationOptions && (	×
45	<div
46	className="header-publication-select-container"
47	style={{
48	position: 'absolute',
49	right: 0,
50	top: 0,
51	height: '56px',
52	display: 'flex',
53	alignItems: 'center',
54	zIndex: 10,
55	paddingRight: 24
56	}}
57	>
58	<PublicationSelect
59	publicationOptions={publicationOptions}
60	selectedPublication={selectedPublication}
61	handleChangePublication={handleChangePublication}
62	className={publicationClassName}
63	/>
64	</div>
65	)}
66	</div>
67	<MainNavigation
68	menuData={mainMenuData}
69	renderProp={renderProp}
70	/>
71	{secondaryMenuData && secondaryMenuData.length > 0 && (	×
72	<SecondaryNavigation
73	name={name}
74	id={id}
75	menuData={secondaryMenuData}
76	clientMenuData={clientMenuData}
77	renderProp={renderProp}
78	/>
79	)}
80	</header>
81	</div>
82	);
83	};
84
85
UNCOV 86	Header.propTypes = {	×
87	title: PropTypes.string,
88	name: PropTypes.string,
89	id: PropTypes.string,
90	mainMenuData: MainNavigation.propTypes.menuData,
91	secondaryMenuData: SecondaryNavigation.propTypes.menuData,
92	clientMenuData: SecondaryNavigation.propTypes.clientMenuData,
93	renderProp: SecondaryNavigation.propTypes.renderProp,
94	publicationOptions: PropTypes.array,
95	selectedPublication: PropTypes.string,
96	handleChangePublication: PropTypes.func,
97	publicationClassName: PropTypes.string
98	};
99
100	export default Header;

Financial-Times / cm-react-components / a75981ab-0a2f-451f-a246-b17f7278ec4d

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous