added new prop to change the search url (#62)

* added new prop to change the search url * Update README.md --------- Co-authored-by: Jack Pettit [SSW] <[email protected]>
SSWConsulting · Feb 12, 2024 · f9cfd51 · f9cfd51
1 parent 03c447e
commit f9cfd51
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -102,6 +102,7 @@ export function getStaticProps() {
 | `title` | `string` | The title text displayed next to the SSW logo. | Yes (If there is no `tagline` provided) |
 | `subtitle` | `string` | The text displayed underneath the SSW logo | No |
 | `tagline` | `string` | The URL of the menu bar item. | No |
+| `searchUrl` | `string` | The absolute URL the search takes you to. If not provided, will default to the host address. i.e. for SSW <www.ssw.com.au> | No |
 | `rightSideActionsOverride` | `() => JSX.Element` | The component to replace the "Call Us" and search buttons that are displayed by default on the right side of the menu. | No |
 
 

diff --git a/lib/components/DesktopMenu/DesktopMenu.tsx b/lib/components/DesktopMenu/DesktopMenu.tsx
@@ -11,6 +11,7 @@ export interface DesktopMenuProps {
   menuGroups: NavMenuGroup[];
   sideActionsOverride?: () => JSX.Element;
   hidePhone?: boolean;
+  searchUrl?: string;
 }
 
 export const ClosePopoverContext = createContext<(() => void) | null>(null);
@@ -19,6 +20,7 @@ const DesktopMenu: React.FC<DesktopMenuProps> = ({
   menuGroups,
   sideActionsOverride,
   hidePhone,
+  searchUrl,
 }) => {
   const SideActions = sideActionsOverride;
 
@@ -73,7 +75,7 @@ const DesktopMenu: React.FC<DesktopMenuProps> = ({
         {SideActions ? (
           <SideActions />
         ) : (
-          <DefaultSideActions hidePhone={hidePhone} />
+          <DefaultSideActions hidePhone={hidePhone} searchUrl={searchUrl} />
         )}
       </div>
     </>
@@ -82,13 +84,17 @@ const DesktopMenu: React.FC<DesktopMenuProps> = ({
 
 type DefaultSideActionsProps = {
   hidePhone?: boolean;
+  searchUrl?: string;
 };
 
-const DefaultSideActions = ({ hidePhone }: DefaultSideActionsProps) => {
+const DefaultSideActions = ({
+  hidePhone,
+  searchUrl,
+}: DefaultSideActionsProps) => {
   return (
     <>
       {!hidePhone && <PhoneButton hideMobile />}
-      <Search />
+      <Search url={searchUrl} />
       <Divider />
       <CountryDropdown />
     </>

diff --git a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
@@ -12,6 +12,7 @@ import { Search } from "../Search";
 export type MegaMenuWrapperProps = {
   menuBarItems?: NavMenuGroup[];
   subtitle?: string;
+  searchUrl?: string;
   rightSideActionsOverride?: () => JSX.Element;
 } & React.PropsWithChildren &
   (Tagline | Title);
@@ -30,6 +31,7 @@ const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
   tagline,
   title,
   subtitle,
+  searchUrl,
   menuBarItems,
   rightSideActionsOverride,
 }) => {
@@ -77,7 +79,7 @@ const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
             ) : (
               <PhoneButton className="max-sm:hidden" />
             )}
-            <Search />
+            <Search url={searchUrl} />
             <Divider />
             <button
               type="button"
@@ -89,6 +91,7 @@ const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
             </button>
           </div>
           <DesktopMenu
+            searchUrl={searchUrl}
             menuGroups={menuItems}
             sideActionsOverride={rightSideActionsOverride}
           />

diff --git a/lib/components/Search/Search.tsx b/lib/components/Search/Search.tsx
@@ -4,7 +4,11 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { useLocation } from "react-use";
 import { MegaIcon } from "../MegaIcon";
 
-export const Search: React.FC = () => {
+export interface SearchProps {
+  url?: string;
+}
+
+export const Search: React.FC<SearchProps> = ({ url }) => {
   const searchRef = useRef(null);
   const location = useLocation();
   const [isOpen, setIsOpen] = useState(false);
@@ -30,7 +34,7 @@ export const Search: React.FC = () => {
   const performSearch = () => {
     if (searchTerm) {
       const searchUrl = `https://www.google.com.au/search?q=site:${
-        location.hostname
+        url || location.hostname
       }%20${encodeURIComponent(searchTerm)}`;
       window.open(searchUrl, "_blank");
     }