23947418961

Committed 03 Apr 2026 01:13PM UTC coverage: 9.056% (+6.6%) from 2.453%

Build # 23947418961

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #529 from CBIIT/3.3.0

3.3.0 Release

Coverage Stats

244 of 1858 branches covered (13.13%)

Branch coverage included in aggregate %.

125 of 217 new or added lines in 28 files covered. (57.6%)

6 existing lines in 6 files now uncovered.

227 of 3343 relevant lines covered (6.79%)

29.34 hits per line

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

0.0

/src/components/Header/HeaderTablet.tsx

import React, { useState } from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import styled from 'styled-components';
import Logo from "./components/LogoTablet.tsx";
import SearchBar from "./components/SearchBarTablet.tsx";
import NavMobileSubItem from "./components/NavMobileSubItem.tsx";
import menuClearIcon from '../../assets/header/Menu_Cancel_Icon.svg';
import rightArrowIcon from '../../assets/header/Right_Arrow.svg';
import leftArrowIcon from '../../assets/header/Left_Arrow.svg';
import { navMobileList, navbarSublists } from '../../config/globalHeaderData.tsx';

const HeaderBanner = styled.div`
  width: 100%;
`;

const HeaderContainer = styled.div`
    margin: 0 auto;
    padding-left: 16px;
    box-shadow: -0.1px 6px 9px -6px rgba(0, 0, 0, 0.5);

    .searchBarArea {
        padding: 0 16px 0 0;
        margin-left: 24px;
    }

    .headerLowerContainer {
        display: flex;
        margin: 16px 0 4px 0;
        height: 51px;
    }

    .menuButton {
        width: 89px;
        height: 45px;
        background: #1F4671;
        border-radius: 5px;
        font-family: 'Open Sans';
        font-weight: 700;
        font-size: 20px;
        line-height: 45px;
        color: #FFFFFF;
        text-align: center;
    }

    .menuButton:hover {
        cursor: pointer;
    }

    // .menuButton:active {
    //     outline: 0.25rem solid #2491ff;
    //     outline-offset: 0.25rem
    // }
`;

const NavMobileContainer = styled.div<{ $display?: string; }>`
    display: ${(props) => props.$display};
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1200;
`;

const MenuArea = styled.div`
    height: 100%;
    width: 100%;
    display: flex;

    .menuContainer {
        background: #ffffff;
        width: 385px;
        height: 100%;
        padding: 21px 16px;
    }

    .greyContainer {
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.2);
    }

    .closeIcon {
        height: 14px;
        margin-bottom: 29px;
    }

    .closeIconImg {
        float: right;
    }

    .closeIconImg:hover {
        cursor: pointer;
    }

    // .closeIconImg:active {
    //     outline: 0.25rem solid #2491ff;
    //     outline-offset: 0.5rem
    // }

    .backButton {
        font-family: Open Sans;
        font-weight: 600;
        font-size: 16px;
        line-height: 16px;
        color: #007BBD;
        padding-left: 16px;
        background: url(${leftArrowIcon}) left no-repeat;
    }

    .backButton:hover {
        cursor: pointer;
    }

    // .backButton:active {
    //     outline: 0.25rem solid #2491ff;
    //     outline-offset: 0.5rem;
    // }

    .navMobileContainer {
        padding: 24px 0 0 0;

        a {
            text-decoration: none;
            color: #3D4551;
        }
    }

    .navMobileItem {
        width: 353px;
        padding: 8px 24px 8px 16px;
        font-family: Open Sans;
        font-weight: 400;
        font-size: 16px;
        line-height: 16px;
        border-top: 1px solid #F0F0F0;
        border-bottom: 1px solid #F0F0F0;
        color: #3D4551;
    }

    .navMobileItem:hover {
        background-color: #f9f9f7;
    }

    // .navMobileItem:active {
    //     outline: 0.25rem solid #2491ff;
    // }

    .SubItem {
        padding-left: 24px;
    }

    .clickable {
        background: url(${rightArrowIcon}) 90% no-repeat;
    }

    .clickable {
        cursor: pointer;
    }
`;

const Header = () => {
  const path = useLocation().pathname;
  const [navMobileDisplay, setNavMobileDisplay] = useState('none');
  const [navbarMobileList, setNavbarMobileList] = useState(navMobileList);

  const clickNavItem = (e) => {
    const clickTitle = e.target.innerText;
    setNavbarMobileList(navbarSublists[clickTitle]);
  };

  return (
    <>
      <HeaderBanner role="banner">
        <HeaderContainer>
          <Logo />
          <div className="headerLowerContainer">
            <div
              id="header-navbar-open-menu-button"
              role="button"
              tabIndex={0}
              className="menuButton"
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  setNavMobileDisplay('block');
                }
              }}
              onClick={() => setNavMobileDisplay('block')}
            >
              Menu
            </div>
            {!path.includes("/globalsearch") && <div className="searchBarArea"><SearchBar /></div>}
          </div>
        </HeaderContainer>
      </HeaderBanner>
      <NavMobileContainer $display={navMobileDisplay}>
        <MenuArea>
          <div className="menuContainer">
            <div
              role="button"
              id="navbar-close-navbar-button"
              tabIndex={0}
              className="closeIcon"
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  setNavMobileDisplay('none');
                }
              }}
              onClick={() => setNavMobileDisplay('none')}
            >
              <img className="closeIconImg" src={menuClearIcon} alt="menuClearButton" />
            </div>
            {navbarMobileList !== navMobileList
              && (
                <div
                  role="button"
                  id="navbar-back-to-main-menu-button"
                  tabIndex={0}
                  className="backButton"
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      setNavbarMobileList(navMobileList);
                    }
                  }}
                  onClick={() => setNavbarMobileList(navMobileList)}
                >
                  Main Menu
                </div>
              )}
            <div className="navMobileContainer">
              {
                navbarMobileList.map((navMobileItem, idx) => {
                  const mobilekey = `mobile_${idx}`;
                  const isExternal = navMobileItem.externalLink || navMobileItem.link.startsWith('http');
                  return (
                    <React.Fragment key={mobilekey}>
                      {navMobileItem.className === 'navMobileItem' && (isExternal
                        ? (
                          <a
                            id={navMobileItem.id}
                            href={navMobileItem.link}
                            target="_blank"
                            rel="noopener noreferrer"
                            onClick={() => setNavMobileDisplay('none')}
                          >
                            <div className="navMobileItem">{navMobileItem.name}</div>
                          </a>
                        )
                        : <NavLink id={navMobileItem.id} to={navMobileItem.link} onClick={() => setNavMobileDisplay('none')}><div className="navMobileItem">{navMobileItem.name}</div></NavLink>)}
                      {navMobileItem.className === 'navMobileItem clickable' && <div id={navMobileItem.id} role="button" tabIndex={0} className="navMobileItem clickable" onKeyDown={(e) => { if (e.key === "Enter") { clickNavItem(e); } }} onClick={clickNavItem}>{navMobileItem.name}</div>}
                      {navMobileItem.className === 'navMobileSubItem' && (
                        <NavMobileSubItem item={navMobileItem} onClose={() => setNavMobileDisplay('none')} />
                      )}
                      {navMobileItem.className === 'navMobileSubTitle' && <div className="navMobileItem">{navMobileItem.name}</div>}
                    </React.Fragment>
                  );
                })
              }
            </div>
          </div>
          <div
            role="button"
            id="navbar-close-navbar-grey-section"
            tabIndex={0}
            className="greyContainer"
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                setNavMobileDisplay('none');
              }
            }}
            onClick={() => setNavMobileDisplay('none')}
            aria-label="greyContainer"
          />
        </MenuArea>
      </NavMobileContainer>
    </>
  );
};

export default Header;

1	import React, { useState } from 'react';	×
NEW 2	import { NavLink, useLocation } from 'react-router-dom';	×
3	import styled from 'styled-components';	×
4	import Logo from "./components/LogoTablet.tsx";	×
5	import SearchBar from "./components/SearchBarTablet.tsx";	×
NEW 6	import NavMobileSubItem from "./components/NavMobileSubItem.tsx";	×
7	import menuClearIcon from '../../assets/header/Menu_Cancel_Icon.svg';	×
8	import rightArrowIcon from '../../assets/header/Right_Arrow.svg';	×
9	import leftArrowIcon from '../../assets/header/Left_Arrow.svg';	×
10	import { navMobileList, navbarSublists } from '../../config/globalHeaderData.tsx';	×
11
12	const HeaderBanner = styled.div`	×
13	width: 100%;
14	`;
15
16	const HeaderContainer = styled.div`	×
17	margin: 0 auto;
18	padding-left: 16px;
19	box-shadow: -0.1px 6px 9px -6px rgba(0, 0, 0, 0.5);
20
21	.searchBarArea {
22	padding: 0 16px 0 0;
23	margin-left: 24px;
24	}
25
26	.headerLowerContainer {
27	display: flex;
28	margin: 16px 0 4px 0;
29	height: 51px;
30	}
31
32	.menuButton {
33	width: 89px;
34	height: 45px;
35	background: #1F4671;
36	border-radius: 5px;
37	font-family: 'Open Sans';
38	font-weight: 700;
39	font-size: 20px;
40	line-height: 45px;
41	color: #FFFFFF;
42	text-align: center;
43	}
44
45	.menuButton:hover {
46	cursor: pointer;
47	}
48
49	// .menuButton:active {
50	// outline: 0.25rem solid #2491ff;
51	// outline-offset: 0.25rem
52	// }
53	`;
54
55	const NavMobileContainer = styled.div<{ $display?: string; }>`	×
56	display: ${(props) => props.$display};	×
57	position: absolute;
58	left: 0;
59	top: 0;
60	height: 100%;
61	width: 100%;
62	z-index: 1200;
63	`;
64
65	const MenuArea = styled.div`	×
66	height: 100%;
67	width: 100%;
68	display: flex;
69
70	.menuContainer {
71	background: #ffffff;
72	width: 385px;
73	height: 100%;
74	padding: 21px 16px;
75	}
76
77	.greyContainer {
78	width: 100%;
79	height: 100%;
80	background: rgba(0,0,0,.2);
81	}
82
83	.closeIcon {
84	height: 14px;
85	margin-bottom: 29px;
86	}
87
88	.closeIconImg {
89	float: right;
90	}
91
92	.closeIconImg:hover {
93	cursor: pointer;
94	}
95
96	// .closeIconImg:active {
97	// outline: 0.25rem solid #2491ff;
98	// outline-offset: 0.5rem
99	// }
100
101	.backButton {
102	font-family: Open Sans;
103	font-weight: 600;
104	font-size: 16px;
105	line-height: 16px;
106	color: #007BBD;
107	padding-left: 16px;
108	background: url(${leftArrowIcon}) left no-repeat;
109	}
110
111	.backButton:hover {
112	cursor: pointer;
113	}
114
115	// .backButton:active {
116	// outline: 0.25rem solid #2491ff;
117	// outline-offset: 0.5rem;
118	// }
119
120	.navMobileContainer {
121	padding: 24px 0 0 0;
122
123	a {
124	text-decoration: none;
125	color: #3D4551;
126	}
127	}
128
129	.navMobileItem {
130	width: 353px;
131	padding: 8px 24px 8px 16px;
132	font-family: Open Sans;
133	font-weight: 400;
134	font-size: 16px;
135	line-height: 16px;
136	border-top: 1px solid #F0F0F0;
137	border-bottom: 1px solid #F0F0F0;
138	color: #3D4551;
139	}
140
141	.navMobileItem:hover {
142	background-color: #f9f9f7;
143	}
144
145	// .navMobileItem:active {
146	// outline: 0.25rem solid #2491ff;
147	// }
148
149	.SubItem {
150	padding-left: 24px;
151	}
152
153	.clickable {
154	background: url(${rightArrowIcon}) 90% no-repeat;
155	}
156
157	.clickable {
158	cursor: pointer;
159	}
160	`;
161
162	const Header = () => {	×
163	const path = useLocation().pathname;	×
164	const [navMobileDisplay, setNavMobileDisplay] = useState('none');	×
165	const [navbarMobileList, setNavbarMobileList] = useState(navMobileList);	×
166
167	const clickNavItem = (e) => {	×
168	const clickTitle = e.target.innerText;	×
169	setNavbarMobileList(navbarSublists[clickTitle]);	×
170	};
171
172	return (	×
173	<>
174	<HeaderBanner role="banner">
175	<HeaderContainer>
176	<Logo />
177	<div className="headerLowerContainer">
178	<div
179	id="header-navbar-open-menu-button"
180	role="button"
181	tabIndex={0}
182	className="menuButton"
183	onKeyDown={(e) => {
184	if (e.key === "Enter") {	×
185	setNavMobileDisplay('block');	×
186	}
187	}}
188	onClick={() => setNavMobileDisplay('block')}	×
189	>
190	Menu
191	</div>
192	{!path.includes("/globalsearch") && <div className="searchBarArea"><SearchBar /></div>}	×
193	</div>
194	</HeaderContainer>
195	</HeaderBanner>
196	<NavMobileContainer $display={navMobileDisplay}>
197	<MenuArea>
198	<div className="menuContainer">
199	<div
200	role="button"
201	id="navbar-close-navbar-button"
202	tabIndex={0}
203	className="closeIcon"
204	onKeyDown={(e) => {
205	if (e.key === "Enter") {	×
206	setNavMobileDisplay('none');	×
207	}
208	}}
209	onClick={() => setNavMobileDisplay('none')}	×
210	>
211	<img className="closeIconImg" src={menuClearIcon} alt="menuClearButton" />
212	</div>
213	{navbarMobileList !== navMobileList	×
214	&& (
215	<div
216	role="button"
217	id="navbar-back-to-main-menu-button"
218	tabIndex={0}
219	className="backButton"
220	onKeyDown={(e) => {
221	if (e.key === "Enter") {	×
222	setNavbarMobileList(navMobileList);	×
223	}
224	}}
225	onClick={() => setNavbarMobileList(navMobileList)}	×
226	>
227	Main Menu
228	</div>
229	)}
230	<div className="navMobileContainer">
231	{
232	navbarMobileList.map((navMobileItem, idx) => {
233	const mobilekey = `mobile_${idx}`;	×
NEW 234	const isExternal = navMobileItem.externalLink \|\| navMobileItem.link.startsWith('http');	×
UNCOV 235	return (	×
236	<React.Fragment key={mobilekey}>
237	{navMobileItem.className === 'navMobileItem' && (isExternal	×
238	? (
239	<a	×
240	id={navMobileItem.id}
241	href={navMobileItem.link}
242	target="_blank"
243	rel="noopener noreferrer"
NEW 244	onClick={() => setNavMobileDisplay('none')}	×
245	>
246	<div className="navMobileItem">{navMobileItem.name}</div>
247	</a>
248	)
NEW 249	: <NavLink id={navMobileItem.id} to={navMobileItem.link} onClick={() => setNavMobileDisplay('none')}><div className="navMobileItem">{navMobileItem.name}</div></NavLink>)}	×
250	{navMobileItem.className === 'navMobileItem clickable' && <div id={navMobileItem.id} role="button" tabIndex={0} className="navMobileItem clickable" onKeyDown={(e) => { if (e.key === "Enter") { clickNavItem(e); } }} onClick={clickNavItem}>{navMobileItem.name}</div>}	×
251	{navMobileItem.className === 'navMobileSubItem' && (	×
NEW 252	<NavMobileSubItem item={navMobileItem} onClose={() => setNavMobileDisplay('none')} />	×
253	)}
254	{navMobileItem.className === 'navMobileSubTitle' && <div className="navMobileItem">{navMobileItem.name}</div>}	×
255	</React.Fragment>
256	);
257	})
258	}
259	</div>
260	</div>
261	<div
262	role="button"
263	id="navbar-close-navbar-grey-section"
264	tabIndex={0}
265	className="greyContainer"
266	onKeyDown={(e) => {
267	if (e.key === "Enter") {	×
268	setNavMobileDisplay('none');	×
269	}
270	}}
271	onClick={() => setNavMobileDisplay('none')}	×
272	aria-label="greyContainer"
273	/>
274	</MenuArea>
275	</NavMobileContainer>
276	</>
277	);
278	};	×
279
280	export default Header;

CBIIT / INS-WebPortal / 23947418961

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