[OUR415-297] [OUR415-298] Updates secondary headers for Browse and Se…

…arch pages (#221) * Updates browse and search headers * Remove all categories from category dropdown --------- Co-authored-by: Adrien Young <[email protected]> Co-authored-by: Adrien Young <[email protected]>
Exygy · Oct 7, 2024 · 84aff4a · 84aff4a
1 parent 1150eeb
commit 84aff4a
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 37 deletions.
diff --git a/app/components/search/Header/BrowseHeaderSection.tsx 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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} />