20350373879

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

Build # 20350373879

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/components/SearchBarMobile.tsx

import React, { useState } from 'react';
import styled from 'styled-components';
import { useHistory } from 'react-router-dom';
import clearIcon from '../../../assets/header/Clear_Icon.svg';
import searchIcon from '../../../assets/header/Search_Small_Icon.svg';

const SearchBarContainer = styled.div`
    display: flex;

    .searchBar {
      margin-left: auto;
      width: 303px;
      height: 43px;
      border: 1px solid #71767A;
    }

    .searchButton {
      height: 43px;
      font-family: Open Sans;
      font-weight: 700;
      font-size: 1rem;
      line-height: 33px;
      text-align: center;
      color: #FFFFFF;
      background: #007BBD;
      padding: 10px 14px;
      border-radius: 0px 5px 5px 0px;
    }

    .searchButton:hover {
      cursor: pointer;
      background: #004971;
    }

    @media (max-width: 512px) {
      .searchBar {
        width: calc(100vw - 210px);
      }
    }
`;

const SearchInput = styled.input`
  margin: -1px 0 0 -1px;
  padding: 0 7px;
  border: none;
  font-family: Open Sans;
  font-weight: 400;
  font-size: 1.27rem;
  line-height: 47px;
  color: #1b1b1b;
  // width: 168px;
  width: 303px;
  height: 43px;
  background: transparent;

  @media (max-width: 512px) {
    width: calc(100vw - 210px);
  }

  ::placeholder {
    color: #004A8B;
  }

  :focus {
    outline: 0.25rem solid #2491ff;
  }

  input[type="search"]::-webkit-search-cancel-button {
    position: relative;
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background: url(${clearIcon}) right center no-repeat;
    background-image: url(${clearIcon}) red;
    background-size: 20px;
    cursor: pointer;
  }

  input[type="search"]:focus::-webkit-search-cancel-button {
    position: relative;
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background: url(${clearIcon}) right center no-repeat;
    background-image: url(${clearIcon}) red;
    background-size: 20px;
    cursor: pointer;
  }
`;

const SearchBar = () => {
  const history = useHistory();
  const [localText, setLocalText] = useState('');

  const handleTextInputChange = (event) => {
    const text = event.target.value;
    setLocalText(text);
  };

  const handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      history.push(`/globalsearch/${localText.trim()}`);
      setLocalText('');
    }
  };

  const handleSearch = () => {
    history.push(`/globalsearch/${localText.trim()}`);
    setLocalText('');
  };

  return (
    <SearchBarContainer>
      <div className="searchBar">
        <label>
          <SearchInput id="header-search-bar" type="search" value={localText} placeholder="" onChange={handleTextInputChange} onKeyDown={handleKeyPress} />
        </label>
      </div>
      <div role="button" tabIndex={0} className="searchButton" onKeyDown={handleKeyPress} onClick={handleSearch}><img src={searchIcon} alt="searchIcon" /></div>
    </SearchBarContainer>
  );
};

export default SearchBar;

NEW 1	import React, { useState } from 'react';	×
NEW 2	import styled from 'styled-components';	×
NEW 3	import { useHistory } from 'react-router-dom';	×
NEW 4	import clearIcon from '../../../assets/header/Clear_Icon.svg';	×
NEW 5	import searchIcon from '../../../assets/header/Search_Small_Icon.svg';	×
6
NEW 7	const SearchBarContainer = styled.div`	×
8	display: flex;
9
10	.searchBar {
11	margin-left: auto;
12	width: 303px;
13	height: 43px;
14	border: 1px solid #71767A;
15	}
16
17	.searchButton {
18	height: 43px;
19	font-family: Open Sans;
20	font-weight: 700;
21	font-size: 1rem;
22	line-height: 33px;
23	text-align: center;
24	color: #FFFFFF;
25	background: #007BBD;
26	padding: 10px 14px;
27	border-radius: 0px 5px 5px 0px;
28	}
29
30	.searchButton:hover {
31	cursor: pointer;
32	background: #004971;
33	}
34
35	@media (max-width: 512px) {
36	.searchBar {
37	width: calc(100vw - 210px);
38	}
39	}
40	`;
41
NEW 42	const SearchInput = styled.input`	×
43	margin: -1px 0 0 -1px;
44	padding: 0 7px;
45	border: none;
46	font-family: Open Sans;
47	font-weight: 400;
48	font-size: 1.27rem;
49	line-height: 47px;
50	color: #1b1b1b;
51	// width: 168px;
52	width: 303px;
53	height: 43px;
54	background: transparent;
55
56	@media (max-width: 512px) {
57	width: calc(100vw - 210px);
58	}
59
60	::placeholder {
61	color: #004A8B;
62	}
63
64	:focus {
65	outline: 0.25rem solid #2491ff;
66	}
67
68	input[type="search"]::-webkit-search-cancel-button {
69	position: relative;
70	-webkit-appearance: none;
71	height: 20px;
72	width: 20px;
73	background: url(${clearIcon}) right center no-repeat;
74	background-image: url(${clearIcon}) red;
75	background-size: 20px;
76	cursor: pointer;
77	}
78
79	input[type="search"]:focus::-webkit-search-cancel-button {
80	position: relative;
81	-webkit-appearance: none;
82	height: 20px;
83	width: 20px;
84	background: url(${clearIcon}) right center no-repeat;
85	background-image: url(${clearIcon}) red;
86	background-size: 20px;
87	cursor: pointer;
88	}
89	`;
90
NEW 91	const SearchBar = () => {	×
NEW 92	const history = useHistory();	×
NEW 93	const [localText, setLocalText] = useState('');	×
94
NEW 95	const handleTextInputChange = (event) => {	×
NEW 96	const text = event.target.value;	×
NEW 97	setLocalText(text);	×
98	};
99
NEW 100	const handleKeyPress = (event) => {	×
NEW 101	if (event.key === 'Enter') {	×
NEW 102	history.push(`/globalsearch/${localText.trim()}`);	×
NEW 103	setLocalText('');	×
104	}
105	};
106
NEW 107	const handleSearch = () => {	×
NEW 108	history.push(`/globalsearch/${localText.trim()}`);	×
NEW 109	setLocalText('');	×
110	};
111
NEW 112	return (	×
113	<SearchBarContainer>
114	<div className="searchBar">
115	<label>
116	<SearchInput id="header-search-bar" type="search" value={localText} placeholder="" onChange={handleTextInputChange} onKeyDown={handleKeyPress} />
117	</label>
118	</div>
119	<div role="button" tabIndex={0} className="searchButton" onKeyDown={handleKeyPress} onClick={handleSearch}><img src={searchIcon} alt="searchIcon" /></div>
120	</SearchBarContainer>
121	);
NEW 122	};	×
123
124	export default SearchBar;

CBIIT / INS-WebPortal / 20350373879

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