From 84aff4a15aa10968d72a175927a557aeaf9bf6f4 Mon Sep 17 00:00:00 2001
From: Ross Chapman <rosschapman@users.noreply.github.com>
Date: Mon, 7 Oct 2024 13:35:49 -0700
Subject: [PATCH] [OUR415-297] [OUR415-298] Updates secondary headers for
 Browse and Search pages (#221)

* Updates browse and search headers

* Remove all categories from category dropdown

---------

Co-authored-by: Adrien Young <adrien.elizabeth@gmail.com>
Co-authored-by: Adrien Young <60076088+adriencyberspace@users.noreply.github.com>
---
 .../search/Header/BrowseHeaderSection.tsx     | 20 ++++++++++++++++
 .../search/Header/CustomDropdown.tsx          | 11 ---------
 .../search/Header/Header.module.scss          |  8 -------
 app/components/search/Header/Header.tsx       | 23 ++++++++-----------
 .../search/Header/SearchHeaderSection.tsx     | 14 ++++++++++-
 .../SearchAndServiceResultsPage.module.scss   |  1 +
 .../SearchResultsPage/SearchResultsPage.tsx   |  2 +-
 .../ServiceDiscoveryResults.tsx               |  4 ++--
 8 files changed, 46 insertions(+), 37 deletions(-)
 create mode 100644 app/components/search/Header/BrowseHeaderSection.tsx

diff --git a/app/components/search/Header/BrowseHeaderSection.tsx b/app/components/search/Header/BrowseHeaderSection.tsx
new file mode 100644
index 000000000..18e13789d
--- /dev/null
+++ b/app/components/search/Header/BrowseHeaderSection.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "./SearchHeaderSection.module.scss";
+
+/**
+ * Renders mobile and desktop views for Listings navigation
+ */
+export const BrowseHeaderSection = ({
+  descriptionText,
+}: {
+  descriptionText: string;
+}) => {
+  return (
+    <div className={styles.searchHeaderContainer}>
+      <div className={styles.searchHeaderContainerLeft}>
+        <h1>Services</h1>
+      </div>
+      <span>{descriptionText}</span>
+    </div>
+  );
+};
diff --git a/app/components/search/Header/CustomDropdown.tsx b/app/components/search/Header/CustomDropdown.tsx
index 91680bc58..656bee960 100644
--- a/app/components/search/Header/CustomDropdown.tsx
+++ b/app/components/search/Header/CustomDropdown.tsx
@@ -132,17 +132,6 @@ export const CustomDropdown: React.FC<DropdownProps> = ({
           aria-activedescendant={currentCategory}
           tabIndex={-1}
         >
-          <li
-            onClick={() => handleCategoryChange("/search")}
-            className={currentCategory === "/search" ? styles.active : ""}
-            role="option"
-            aria-selected={currentCategory === "/search"}
-            id="all-categories"
-            tabIndex={0}
-            onKeyDown={(event) => handleItemKeyDown(event, "/search", 0)}
-          >
-            All categories
-          </li>
           {categories.map((category, index) => (
             <li
               key={category.slug}
diff --git a/app/components/search/Header/Header.module.scss b/app/components/search/Header/Header.module.scss
index 84d79a411..6bcdeb835 100644
--- a/app/components/search/Header/Header.module.scss
+++ b/app/components/search/Header/Header.module.scss
@@ -1,13 +1,5 @@
 @import "~styles/utils/_helpers.scss";
 
-.header {
-  margin-bottom: $general-spacing-lg;
-
-  @media screen and (max-width: $break-tablet-s) {
-    margin-bottom: $general-spacing-xs;
-  }
-}
-
 .headerInner {
   display: flex;
   margin: 0 auto;
diff --git a/app/components/search/Header/Header.tsx b/app/components/search/Header/Header.tsx
index d7b624c46..547ebafc7 100644
--- a/app/components/search/Header/Header.tsx
+++ b/app/components/search/Header/Header.tsx
@@ -10,23 +10,18 @@ import styles from "./Header.module.scss";
 const { showPrintResultsBtn } = websiteConfig;
 
 interface Props {
-  currentCategory?: string;
+  currentCategory: string;
 }
 
-const DROPDOWN_LINKS = [
-  {
-    id: "all-categories",
-    url: "/search",
-    text: "All categories",
-  },
-  ...CATEGORIES.map((category) => ({
-    id: category.slug,
-    url: `/${category.slug}/results`,
-    text: category.name,
-  })),
-];
+// TODO: This should be the same as the dropdown links in the Navigation dropdown (which comes from Strapi)
+const DROPDOWN_LINKS = CATEGORIES.map((category) => ({
+  id: category.slug,
+  url: `/${category.slug}/results`,
+  text: category.name,
+}));
+
 export const Header = ({ currentCategory }: Props) => {
-  const title = currentCategory || "All categories";
+  const title = currentCategory;
 
   const uuid = crypto.randomUUID();
 
diff --git a/app/components/search/Header/SearchHeaderSection.tsx b/app/components/search/Header/SearchHeaderSection.tsx
index 5fc466903..e285dc82a 100644
--- a/app/components/search/Header/SearchHeaderSection.tsx
+++ b/app/components/search/Header/SearchHeaderSection.tsx
@@ -1,3 +1,4 @@
+import { Button } from "components/ui/inline/Button/Button";
 import React from "react";
 import { useSearchBox } from "react-instantsearch-core";
 import styles from "./SearchHeaderSection.module.scss";
@@ -20,7 +21,18 @@ export const SearchHeaderSection = ({
           <h1>Search results</h1>
         )}
       </div>
-      <span>{descriptionText}</span>
+      <Button
+        iconName="fas fa-print"
+        iconVariant="before"
+        variant="secondary"
+        size="lg"
+        onClick={() => {
+          window.print();
+        }}
+        addClass={`${styles.printAllBtn} ${styles.showBtn}`}
+      >
+        Print this page
+      </Button>
     </div>
   );
 };
diff --git a/app/components/search/SearchAndServiceResultsPage.module.scss b/app/components/search/SearchAndServiceResultsPage.module.scss
index 6e606b70b..213b51953 100644
--- a/app/components/search/SearchAndServiceResultsPage.module.scss
+++ b/app/components/search/SearchAndServiceResultsPage.module.scss
@@ -8,6 +8,7 @@
   display: flex;
   width: 100%;
   margin: auto;
+  padding-top: $spacing-6;
 
   @media screen and (max-width: $break-desktop-s) {
     flex-direction: column;
diff --git a/app/pages/SearchResultsPage/SearchResultsPage.tsx b/app/pages/SearchResultsPage/SearchResultsPage.tsx
index 27ff39802..8cdd087e0 100644
--- a/app/pages/SearchResultsPage/SearchResultsPage.tsx
+++ b/app/pages/SearchResultsPage/SearchResultsPage.tsx
@@ -19,7 +19,7 @@ export const SearchResultsPage = () => {
         aroundRadius={aroundUserLocationRadius}
         aroundPrecision={DEFAULT_AROUND_PRECISION}
       />
-      <Header />
+
       <div className={styles.flexContainer}>
         <Sidebar
           isSearchResultsPage
diff --git a/app/pages/ServiceDiscoveryResults/ServiceDiscoveryResults.tsx b/app/pages/ServiceDiscoveryResults/ServiceDiscoveryResults.tsx
index abc4d2e5a..af99fa7f0 100644
--- a/app/pages/ServiceDiscoveryResults/ServiceDiscoveryResults.tsx
+++ b/app/pages/ServiceDiscoveryResults/ServiceDiscoveryResults.tsx
@@ -7,7 +7,7 @@ import SearchResults from "components/search/SearchResults/SearchResults";
 import Sidebar from "components/search/Sidebar/Sidebar";
 import { Header } from "components/search/Header/Header";
 import { SecondaryNavigationWrapper } from "components/navigation/SecondaryNavigationWrapper";
-import { SearchHeaderSection } from "components/search/Header/SearchHeaderSection";
+import { BrowseHeaderSection } from "components/search/Header/BrowseHeaderSection";
 
 import {
   useEligibilitiesForCategory,
@@ -71,7 +71,7 @@ export const ServiceDiscoveryResults = ({
   return (
     <>
       <SecondaryNavigationWrapper>
-        <SearchHeaderSection descriptionText="Sign up for programs and access resources." />
+        <BrowseHeaderSection descriptionText="Sign up for programs and access resources." />
       </SecondaryNavigationWrapper>
       <div className={styles.container}>
         <Header currentCategory={categoryName} />