Merge pull request #927 from City-of-Helsinki/UHF-X_empty_ul_elements

UHF-X: Check for list item count before rendering ul
City-of-Helsinki · Mar 25, 2024 · b55513e · b55513e
2 parents 0bc0a60 + 1eaaeaf
commit b55513e
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 29 deletions.
diff --git a/dist/js/district-and-project-search.min.js b/dist/js/district-and-project-search.min.js
diff --git a/dist/js/health-station-search.min.js b/dist/js/health-station-search.min.js
diff --git a/dist/js/job-search.min.js b/dist/js/job-search.min.js
diff --git a/dist/js/linkedevents.min.js b/dist/js/linkedevents.min.js
diff --git a/dist/js/maternity-and-child-health-clinic-search.min.js b/dist/js/maternity-and-child-health-clinic-search.min.js
diff --git a/dist/js/news-archive.min.js b/dist/js/news-archive.min.js
diff --git a/dist/js/ploughing-schedule.min.js b/dist/js/ploughing-schedule.min.js
diff --git a/dist/js/school-search.min.js b/dist/js/school-search.min.js
diff --git a/src/js/react/common/Card.tsx b/src/js/react/common/Card.tsx
@@ -154,7 +154,7 @@ function CardItem({
           }
         </div>
 
-        {cardTags &&
+        {cardTags && cardTags.length > 0 &&
           <div className="card__tags">
             <Tags tags={cardTags} langAttribute={langAttribute} />
           </div>

diff --git a/src/js/react/common/SelectionsWrapper.tsx b/src/js/react/common/SelectionsWrapper.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, MouseEventHandler } from 'react';
+import { ReactNode, MouseEventHandler, Children } from 'react';
 import type { DateTime } from 'luxon';
 import { Button, IconCross } from 'hds-react';
 
@@ -8,24 +8,35 @@ type SelectionsWrapperProps = {
   children: ReactNode;
 };
 
-const SelectionsWrapper = ({ showClearButton, resetForm, children }: SelectionsWrapperProps) => (
-  <div className='hdbt-search__selections-wrapper'>
-    <ul className='hdbt-search__selections-container content-tags__tags'>
-      {children}
-      <li className='hdbt-search__clear-all'>
-        <Button
-          aria-hidden={!showClearButton}
-          className='hdbt-search__clear-all-button'
-          iconLeft={<IconCross className='hdbt-search__clear-all-icon' />}
-          onClick={resetForm}
-          style={showClearButton ? {} : { visibility: 'hidden' }}
-          variant='supplementary'
-        >
-        {Drupal.t('Clear selections', {}, { context: 'React search: clear selections' })}
-        </Button>
-      </li>
-    </ul>
-  </div>
-);
+const SelectionsWrapper = ({ showClearButton, resetForm, children }: SelectionsWrapperProps) =>
+{
+  // hasContent checks for string and react children if there would be any content to render and does not render the ul container if there is none
+  const hasContent =
+    typeof children === 'string'
+      ? children.trim().length > 0
+      : Children.toArray(children).some((child) => child !== false && child !== undefined);
+
+  return (
+    <div className='hdbt-search__selections-wrapper'>
+      {hasContent && (
+        <ul className='hdbt-search__selections-container content-tags__tags'>
+          {children}
+          <li className='hdbt-search__clear-all'>
+            <Button
+              aria-hidden={!showClearButton}
+              className='hdbt-search__clear-all-button'
+              iconLeft={<IconCross className='hdbt-search__clear-all-icon' />}
+              onClick={resetForm}
+              style={showClearButton ? {} : { visibility: 'hidden' }}
+              variant='supplementary'
+            >
+              {Drupal.t('Clear selections', {}, { context: 'React search: clear selections' })}
+            </Button>
+          </li>
+        </ul>
+      )}
+    </div>
+  );
+};
 
 export default SelectionsWrapper;