20350434716

Committed 18 Dec 2025 08:28PM UTC coverage: 2.453%. First build

Build # 20350434716

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #482 from CBIIT/3.2.0

3.2.0 Release

Run Details

43 of 1822 branches covered (2.36%)

Branch coverage included in aggregate %.

7 of 490 new or added lines in 27 files covered. (1.43%)

83 of 3314 relevant lines covered (2.5%)

1.02 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, Link, useLocation } from 'react-router-dom';
import styled from 'styled-components';
import Logo from "./components/LogoTablet.tsx";
import SearchBar from "./components/SearchBarTablet.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}`;
                  return (
                    <React.Fragment key={mobilekey}>
                      {navMobileItem.className === 'navMobileItem' && <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' && <Link id={navMobileItem.id} to={navMobileItem.link}><div role="button" tabIndex={0} className="navMobileItem SubItem" onKeyDown={(e) => { if (e.key === "Enter") { setNavMobileDisplay('none'); } }} onClick={() => setNavMobileDisplay('none')}>{navMobileItem.name}</div></Link>}
                      {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;

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

CBIIT / INS-WebPortal / 20350434716

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