Edm 363 update lce UI (#33304)

* Align header for mobile | display result count beside to keyword suggestion * Align cancel icon styles with search input | reduce number of typeahed suggestions dipslayed * touchup styles | change license state if it differs from name selection * slot conditional alert into dropdown label * set state filter field to all when switching to certification category type * filter typeahead suggestions based on filter options * update filter options based on typeahead suggestion selected * rename functions more clearly | correct state managment for filters when clearing input * cleanup * update results to va-card component * enable routing for new lce result info page * align breadcrumbs with result details url * cleanup * delete unit test for unused component * update unit test for helper function
department-of-veterans-affairs · Dec 3, 2024 · 213f2a8 · 213f2a8
1 parent f915ff9
commit 213f2a8
Show file tree

Hide file tree

Showing 13 changed files with 240 additions and 222 deletions.
diff --git a/src/applications/gi/components/Dropdown.jsx b/src/applications/gi/components/Dropdown.jsx
@@ -18,6 +18,7 @@ const Dropdown = ({
   value,
   visible,
   required,
+  children,
 }) => {
   if (!visible) {
     return null;
@@ -28,6 +29,7 @@ const Dropdown = ({
     <label htmlFor={name}>
       {label}{' '}
       {required ? <span className="required-label">(*Required)</span> : null}{' '}
+      {children}
     </label>
   );
 
@@ -91,6 +93,7 @@ Dropdown.propTypes = {
   visible: PropTypes.bool,
   onFocus: PropTypes.func,
   required: PropTypes.bool,
+  children: PropTypes.node,
 };
 
 Dropdown.defaultProps = {

diff --git a/src/applications/gi/components/GiBillBreadcrumbs.jsx b/src/applications/gi/components/GiBillBreadcrumbs.jsx
@@ -11,6 +11,7 @@ const GiBillBreadcrumbs = () => {
   const compareMatch = useRouteMatch('/compare');
   const lcMatch = useRouteMatch('/lc-search');
   const lcResultsMatch = useRouteMatch('/lc-search/results');
+  const lcResultInfoMatch = useRouteMatch('/lc-search/:type/:id');
   const crumbLiEnding = giDocumentTitle();
   const formatedProgramType = formatProgramType(
     ProgramsTypeMatch?.params?.programType,
@@ -55,7 +56,7 @@ const GiBillBreadcrumbs = () => {
   if (lcMatch) {
     crumbs.push({
       href: '/education/gi-bill-comparison-tool/lc-search',
-      label: 'Licensces and Certifications',
+      label: 'Licensces & Certifications',
     });
   }
   if (lcResultsMatch) {
@@ -64,6 +65,14 @@ const GiBillBreadcrumbs = () => {
       label: 'Search Results',
     });
   }
+  if (lcResultInfoMatch) {
+    crumbs.push({
+      href: `/education/gi-bill-comparison-tool/lc-search/results/${
+        lcResultInfoMatch.params.type
+      }/${lcResultInfoMatch.params.id}`,
+      label: 'Result Details',
+    });
+  }
 
   return (
     <div className="row">

diff --git a/src/applications/gi/components/LcKeywordSearch.jsx b/src/applications/gi/components/LcKeywordSearch.jsx
@@ -9,22 +9,19 @@ export default function LcKeywordSearch({
   suggestions,
   onSelection,
   onUpdateAutocompleteSearchTerm,
+  handleClearInput,
 }) {
   const handleChange = e => {
     const { value } = e.target;
     onUpdateAutocompleteSearchTerm(value);
   };
 
   const handleSuggestionSelected = selected => {
-    onUpdateAutocompleteSearchTerm(selected.label);
+    const { name, type } = selected;
 
-    if (onSelection) {
-      onSelection(selected);
-    }
-  };
+    onUpdateAutocompleteSearchTerm(name);
 
-  const handleClearInput = () => {
-    onUpdateAutocompleteSearchTerm('');
+    onSelection({ type, state: type === 'license' ? 'FL' : 'all' }); // remove hardcoded state
   };
 
   return (
@@ -56,6 +53,11 @@ export default function LcKeywordSearch({
             </label>
             <div className="lc-name-search-container vads-u-display--flex">
               <input
+                style={
+                  inputValue === ''
+                    ? { maxWidth: '30rem' }
+                    : { width: '100%', borderRight: 'none' }
+                }
                 aria-controls="lcKeywordSearch"
                 className="lc-name-search-input"
                 {...getInputProps({
@@ -70,7 +72,7 @@ export default function LcKeywordSearch({
                     size={3}
                     icon="cancel"
                     id="clear-input"
-                    class="vads-u-display--flex vads-u-align-items--center"
+                    class="lc-clear vads-u-display--flex vads-u-align-items--center"
                     onClick={handleClearInput}
                   />
                 )}
@@ -83,21 +85,38 @@ export default function LcKeywordSearch({
                   id="lcKeywordSearch"
                   style={{ maxWidth: '30rem' }}
                 >
-                  {suggestions.map((item, index) => (
-                    <div
-                      key={index}
-                      role="option"
-                      aria-selected={
-                        selectedItem === item.label ? 'true' : 'false'
-                      }
-                      className={classNames('suggestion', {
-                        'suggestion-highlighted': highlightedIndex === index,
-                      })}
-                      {...getItemProps({ item })}
-                    >
-                      {item.name}
-                    </div>
-                  ))}
+                  {suggestions
+                    .map((item, index) => (
+                      <div
+                        key={index}
+                        role="option"
+                        aria-selected={
+                          selectedItem === item.label ? 'true' : 'false'
+                        }
+                        className={classNames('suggestion', {
+                          'suggestion-highlighted': highlightedIndex === index,
+                        })}
+                        {...getItemProps({ item })}
+                      >
+                        {index !== 0 ? (
+                          item.name
+                        ) : (
+                          <div className="keyword-suggestion-container">
+                            <span className="vads-u-padding-right--1">
+                              {item.name}
+                            </span>
+                            <span>
+                              {`(${
+                                suggestions.length > 1
+                                  ? suggestions.length
+                                  : 'No'
+                              } results)`}
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                    ))
+                    .slice(0, 6)}
                 </div>
               )}
           </div>
@@ -108,8 +127,8 @@ export default function LcKeywordSearch({
 }
 
 LcKeywordSearch.propTypes = {
+  onSelection: PropTypes.func.isRequired,
   inputValue: PropTypes.string,
   suggestions: PropTypes.array,
-  onSelection: PropTypes.func,
   onUpdateAutocompleteSearchTerm: PropTypes.func,
 };
diff --git a/src/applications/gi/components/LicenseCertificationResultInfo.jsx b/src/applications/gi/components/LicenseCertificationResultInfo.jsx
diff --git a/src/applications/gi/components/LicenseCertificationSearch.jsx b/src/applications/gi/components/LicenseCertificationSearch.jsx
@@ -27,7 +27,7 @@ function LicenseCertificationSearch({
       <div>
         <section className="vads-u-display--flex vads-u-flex-direction--column vads-u-padding-x--2p5 mobile-lg:vads-u-padding-x--2">
           <div className="row">
-            <h1 className="vads-u-text-align--center mobile-lg:vads-u-text-align--left">
+            <h1 className=" mobile-lg:vads-u-text-align--left">
               Licenses and Certifications
             </h1>
             <p className="vads-u-font-size--h3 vads-u-color--gray-dark">