gatsby-core-theme 30.0.44 → 30.0.45

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [30.0.45](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.44...v30.0.45) (2024-01-05)
+
+
+### Code Refactoring
+
+* add search results to tabs on search page ([1b796cf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1b796cf2f5613d1540769b44ad2f1602e7d6f1fb))
+
+
+* Merge branch 'search-tab-changes' into 'master' ([e0975b0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e0975b015a9c355b967b86d925675549e6278674))
+
 ## [30.0.44](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.43...v30.0.44) (2024-01-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "30.0.44",
+  "version": "30.0.45",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/molecules/search/index.js

@@ -28,6 +28,7 @@ const Search = ({
   children,
   page,
   pageContext,
+  showNumberOfResults = false,
 }) => {
   const { setShowSearch } = useContext(NavigationContext);
   const pageSearchOptionsCopy = pageSearchOptions;
@@ -331,6 +332,8 @@ const Search = ({
                   activeTabClass="searchActive"
                   headerClass="searchHeader"
                   gtmClass="search-tabs-menu-gtm"
+                  showNumberOfResults={showNumberOfResults}
+                  totalResults={searchResultsRef?.current?.length}
                 >
                   {items}
                 </Tabs>
@@ -377,7 +380,12 @@ const Search = ({
 
                 return (
                   // eslint-disable-next-line react/no-unknown-property
-                  <div label={titleObj.title} tabId={type + index} key={keygen()}>
+                  <div
+                    results={items.items.length}
+                    label={titleObj.title}
+                    tabId={type + index}
+                    key={keygen()}
+                  >
                     {pageSearchOptionsCopy.useArchive === undefined ||
                     !pageSearchOptionsCopy.useArchive ? (
                       <div className={styles.searchGrid}>{items}</div>
@@ -463,6 +471,7 @@ Search.propTypes = {
       market: PropTypes.string,
     }),
   }),
+  showNumberOfResults: PropTypes.bool,
 };
 
 export default Search;

package/src/hooks/tabs/index.js

@@ -11,6 +11,8 @@ const Tabs = ({
   HeaderComp,
   headerClass = '',
   gtmClass = '',
+  showNumberOfResults = false,
+  totalResults,
 }) => {
   const showAllTabId = `${showAll}_0`;
   const [activeTab, setActiveTab] = useState(
@@ -36,6 +38,8 @@ const Tabs = ({
             showAll={showAll}
             gtmClass={gtmClass}
             alignRight={tabsAlign === 'right'}
+            showNumberOfResults={showNumberOfResults}
+            totalResults={totalResults}
           />
         )}
         {HeaderComp && <div className={styles.headerComp || ''}>{HeaderComp}</div>}
@@ -65,6 +69,8 @@ Tabs.propTypes = {
   HeaderComp: PropTypes.objectOf(PropTypes.any),
   headerClass: PropTypes.string,
   gtmClass: PropTypes.string,
+  showNumberOfResults: PropTypes.bool,
+  totalResults: PropTypes.number,
 };
 
 export default Tabs;

package/src/hooks/tabs/tab/tab-list.js

@@ -17,6 +17,8 @@ const TabList = ({
   showAll,
   alignRight = false,
   gtmClass = '',
+  showNumberOfResults = false,
+  totalResults,
 }) => {
   const [tabItems, setTabItems] = useState(items);
 
@@ -26,7 +28,10 @@ const TabList = ({
   useEffect(() => {
     if (showAll) {
       // eslint-disable-next-line react/no-unknown-property
-      setTabItems([<div label={showAll} tabId={`${showAll}_0`} key={keygen()} />, ...items]);
+      setTabItems([
+        <div results={totalResults} label={showAll} tabId={`${showAll}_0`} key={keygen()} />,
+        ...items,
+      ]);
     }
   }, [showAll, items]);
 
@@ -53,7 +58,7 @@ const TabList = ({
       <ol ref={tabList} className={styles.list || ''} data-id="select-list">
         {tabItems.map((items, index) => {
           if (items === null) return null;
-          const { label } = items.props;
+          const { label, results } = items.props;
           if (isMobile && label === activeTab.split('_')[0]) return null;
           return (
             <Tab
@@ -66,6 +71,8 @@ const TabList = ({
               // eslint-disable-next-line react/jsx-no-bind
               toggleDropdown={showDropdown}
               gtmClass={gtmClass}
+              showResults={showNumberOfResults}
+              results={results}
             />
           );
         })}
@@ -83,6 +90,8 @@ TabList.propTypes = {
   activeTabClass: PropTypes.string,
   alignRight: PropTypes.bool,
   gtmClass: PropTypes.string,
+  showNumberOfResults: PropTypes.bool,
+  totalResults: PropTypes.number,
 };
 
 export default TabList;

package/src/hooks/tabs/tab/tab.js

@@ -10,6 +10,8 @@ const Tab = ({
   tabId,
   toggleDropdown,
   gtmClass = '',
+  showResults = false,
+  results,
 }) => {
   let className = '';
 
@@ -32,6 +34,7 @@ const Tab = ({
         }}
       >
         {label}
+        {showResults && <span>{results}</span>}
       </button>
     </li>
   );
@@ -44,6 +47,8 @@ Tab.propTypes = {
   tabId: PropTypes.string,
   label: PropTypes.string,
   gtmClass: PropTypes.string,
+  showResults: PropTypes.bool,
+  results: PropTypes.number,
 };
 
 export default Tab;

package/src/hooks/tabs/tab/tab.module.scss

@@ -17,6 +17,8 @@
     color: var(--color-22);
     width: 100%;
     text-align: left;
+    display: flex;
+    gap: 1rem;
 
     @include min(laptop) {
       padding: 1.2rem 2.5rem;