@databiosphere/findable-ui 9.1.0 → 10.1.0

package/src/components/Layout/components/Header/components/Content/components/Navigation/navigation.tsx

@@ -1,14 +1,13 @@
 import { Button, Divider } from "@mui/material";
 import { useRouter } from "next/router";
 import React, { CSSProperties, forwardRef, Fragment, ReactNode } from "react";
-import { useBreakpoint } from "../../../../../../../../hooks/useBreakpoint";
 import { BreakpointKey } from "../../../../../../../../hooks/useBreakpointHelper";
 import {
   ANCHOR_TARGET,
   REL_ATTRIBUTE,
 } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
-import { SELECTED_MATCH } from "../../../../common/entities";
+import { SelectedMatch } from "../../../../common/entities";
 import { HeaderProps } from "../../../../header";
 import { isNavigationLinkSelected } from "./common/utils";
 import { NavigationButtonLabel } from "./components/NavigationButtonLabel/navigationButtonLabel";
@@ -22,7 +21,8 @@ export interface NavLinkItem {
   flatten?: Partial<Record<BreakpointKey, boolean>>;
   label: ReactNode;
   menuItems?: MenuItem[];
-  selectedMatch?: SELECTED_MATCH;
+  selectedMatch?: SelectedMatch;
+  selectedPatterns?: string[];
   target?: ANCHOR_TARGET;
   url: string;
   visible?: Partial<Record<BreakpointKey, boolean>>;
@@ -32,6 +32,7 @@ export interface NavigationProps {
   className?: string;
   closeAncestor?: () => void;
   headerProps?: HeaderProps;
+  isMenuIn?: boolean;
   links: NavLinkItem[];
   pathname?: string;
   style?: CSSProperties; // Required for Fade component. See https://mui.com/material-ui/transitions/#child-requirement.
@@ -43,23 +44,23 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
       className,
       closeAncestor,
       headerProps,
+      isMenuIn = false,
       links,
       pathname,
       style,
     }: NavigationProps,
     ref
   ): JSX.Element {
-    const { mdUp } = useBreakpoint();
     const router = useRouter();
     return (
-      <Links ref={ref} className={className} style={style}>
+      <Links ref={ref} className={className} isMenuIn={isMenuIn} style={style}>
         {links.map(
           (
             {
               divider,
               label,
               menuItems,
-              selectedMatch,
+              selectedPatterns,
               target = ANCHOR_TARGET.SELF,
               url,
             },
@@ -67,17 +68,26 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
           ) =>
             menuItems ? (
               <Fragment key={i}>
-                {mdUp ? (
-                  <NavigationMenu
+                {isMenuIn ? (
+                  <NavigationDrawer
                     closeAncestor={closeAncestor}
+                    headerProps={headerProps}
+                    isMenuIn={isMenuIn}
+                    isSelected={isNavigationLinkSelected(
+                      pathname,
+                      selectedPatterns
+                    )}
                     menuItems={menuItems}
                     menuLabel={label}
                     pathname={pathname}
                   />
                 ) : (
-                  <NavigationDrawer
+                  <NavigationMenu
                     closeAncestor={closeAncestor}
-                    headerProps={headerProps}
+                    isSelected={isNavigationLinkSelected(
+                      pathname,
+                      selectedPatterns
+                    )}
                     menuItems={menuItems}
                     menuLabel={label}
                     pathname={pathname}
@@ -100,7 +110,7 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
                         );
                   }}
                   variant={
-                    isNavigationLinkSelected(url, pathname, selectedMatch)
+                    isNavigationLinkSelected(pathname, selectedPatterns)
                       ? "activeNav"
                       : "nav"
                   }

package/src/components/Layout/components/Header/header.stories.tsx

@@ -71,7 +71,6 @@ export const HeaderStory: Story = {
     searchEnabled: true,
     slogan: "Header Slogan",
     socialMedia: {
-      label: "Follow Us",
       socials: [
         {
           Icon: XIcon,

package/src/components/Layout/components/Header/header.styles.ts

@@ -1,10 +1,11 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { AppBar as MAppBar } from "@mui/material";
+import { smokeMain } from "../../../../styles/common/mixins/colors";
 import { HEADER_HEIGHT } from "./common/constants";
 
 export const AppBar = styled(MAppBar)`
-  border-bottom: 1px solid ${({ theme }) => theme.palette.smoke.main};
+  border-bottom: 1px solid ${smokeMain};
 
   &.MuiPaper-elevation0 {
     border-bottom: 1px solid transparent;

package/src/components/Layout/components/Header/header.tsx

@@ -2,27 +2,34 @@ import { Fade, Toolbar } from "@mui/material";
 import { usePathname } from "next/navigation";
 import React, { ReactNode } from "react";
 import { ComponentsConfig } from "../../../../config/entities";
-import { useBreakpoint } from "../../../../hooks/useBreakpoint";
-import { useMenu } from "../../../../hooks/useMenu";
 import {
   APP_BAR_PROPS,
   FADE_TRANSITION_PROPS,
   TOOLBAR_PROPS,
 } from "./common/constants";
 import { Navigation, SocialMedia } from "./common/entities";
-import { getNavigationLinks } from "./common/utils";
 import { Announcements } from "./components/Announcements/announcements";
 import { Actions } from "./components/Content/components/Actions/actions";
-import { Authentication } from "./components/Content/components/Actions/components/Authentication/authentication";
+import {
+  Authentication,
+  renderButton as renderAuthenticationButton,
+  renderIconButton as renderAuthenticationIconButton,
+} from "./components/Content/components/Actions/components/Authentication/authentication";
 import { Menu } from "./components/Content/components/Actions/components/Menu/menu";
-import { Search } from "./components/Content/components/Actions/components/Search/search";
+import {
+  renderButton as renderSearchButton,
+  renderIconButton as renderSearchIconButton,
+  Search,
+} from "./components/Content/components/Actions/components/Search/search";
 import { Navigation as DXNavigation } from "./components/Content/components/Navigation/navigation";
 import { Slogan } from "./components/Content/components/Slogan/slogan";
 import { Divider } from "./components/Content/components/Slogan/slogan.styles";
 import { Socials } from "./components/Content/components/Socials/socials.styles";
 import { AppBar, Center, Left, Right } from "./header.styles";
+import { useHeaderNavigation } from "./hooks/useHeaderNavigation";
 import { useHeaderVisibility } from "./hooks/useHeaderVisibility";
 import { useMeasureHeader } from "./hooks/useMeasureHeader";
+import { useMenu } from "./hooks/useMenu";
 
 export interface HeaderProps {
   actions?: ReactNode;
@@ -38,8 +45,8 @@ export interface HeaderProps {
 }
 
 export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
-  const { breakpoint } = useBreakpoint();
-  const { isIn } = useHeaderVisibility(headerProps);
+  const { navigation } = useHeaderNavigation(headerProps);
+  const { isIn } = useHeaderVisibility({ ...headerProps, navigation });
   const { headerRef } = useMeasureHeader();
   const { onClose, onOpen, open } = useMenu();
   const pathname = usePathname() ?? "";
@@ -49,14 +56,16 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
     authenticationEnabled,
     className,
     logo,
-    navigation: [navItemsL, navItemsC, navItemsR] = [],
     searchEnabled,
     searchURL,
     slogan,
     socialMedia,
   } = headerProps;
-  const navigationProps = { headerProps, pathname };
-
+  const [navItemsL, navItemsC, navItemsR] = navigation;
+  const navigationProps = {
+    headerProps: { ...headerProps, navigation },
+    pathname,
+  };
   return (
     <AppBar {...APP_BAR_PROPS} ref={headerRef} className={className}>
       {/* Announcements */}
@@ -74,10 +83,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
             {isIn.isSloganIn && <Slogan slogan={slogan} />}
             {/* Left navigation */}
             {isIn.isLeftNavigationIn && (
-              <DXNavigation
-                {...navigationProps}
-                links={getNavigationLinks(navItemsL, breakpoint)}
-              />
+              <DXNavigation {...navigationProps} links={navItemsL} />
             )}
           </Left>
         </Fade>
@@ -86,10 +92,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
           <Center>
             {/* Center navigation */}
             {isIn.isCenterNavigationIn && (
-              <DXNavigation
-                {...navigationProps}
-                links={getNavigationLinks(navItemsC, breakpoint)}
-              />
+              <DXNavigation {...navigationProps} links={navItemsC} />
             )}
           </Center>
         </Fade>
@@ -98,10 +101,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
           <Right>
             {/* Navigation */}
             {isIn.isRightNavigationIn && (
-              <DXNavigation
-                {...navigationProps}
-                links={getNavigationLinks(navItemsR)}
-              />
+              <DXNavigation {...navigationProps} links={navItemsR} />
             )}
             {/* Socials */}
             {isIn.isSocialsIn && (
@@ -115,12 +115,22 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
               <Actions>
                 {/* Search */}
                 <Search
+                  Button={({ ...props }): JSX.Element =>
+                    isIn.isMenuIn
+                      ? renderSearchIconButton(props)
+                      : renderSearchButton(props)
+                  }
                   closeMenu={onClose}
                   searchEnabled={searchEnabled}
                   searchURL={searchURL}
                 />
                 {/* Authentication */}
                 <Authentication
+                  Button={({ ...props }): JSX.Element =>
+                    isIn.isMenuIn
+                      ? renderAuthenticationIconButton(props)
+                      : renderAuthenticationButton(props)
+                  }
                   authenticationEnabled={authenticationEnabled}
                   closeMenu={onClose}
                 />
@@ -130,6 +140,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
                 <Menu
                   {...navigationProps}
                   closeMenu={onClose}
+                  isMenuIn={isIn.isMenuIn}
                   open={open}
                   openMenu={onOpen}
                 />

package/src/components/Layout/components/Header/hooks/useHeaderNavigation.ts

@@ -0,0 +1,19 @@
+import { useBreakpoint } from "../../../../../hooks/useBreakpoint";
+import { getNavigationLinks } from "../common/utils";
+import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
+import { HeaderProps } from "../header";
+
+export interface UseHeaderNavigation {
+  navigation: [NavLinkItem[], NavLinkItem[], NavLinkItem[]];
+}
+
+export const useHeaderNavigation = (
+  headerProps: HeaderProps
+): UseHeaderNavigation => {
+  const { breakpoint } = useBreakpoint();
+  const { navigation: [navL, navC, navR] = [] } = headerProps;
+  const navItemsL = getNavigationLinks(navL, breakpoint);
+  const navItemsC = getNavigationLinks(navC, breakpoint);
+  const navItemsR = getNavigationLinks(navR, breakpoint);
+  return { navigation: [navItemsL, navItemsC, navItemsR] };
+};

package/src/components/Layout/components/Header/hooks/useHeaderVisibility.ts

@@ -8,6 +8,7 @@ export interface UseHeaderVisibility {
     isCenterNavigationIn: boolean;
     isLeftGroupIn: boolean;
     isLeftNavigationIn: boolean;
+    isMenuIn: boolean;
     isRightGroupIn: boolean;
     isRightNavigationIn: boolean;
     isSloganIn: boolean;
@@ -23,7 +24,7 @@ export interface UseHeaderVisibility {
 export const useHeaderVisibility = (
   headerProps: HeaderProps
 ): UseHeaderVisibility => {
-  const { lgUp, mdUp } = useBreakpoint();
+  const { breakpoint, lgUp, mdUp, smDown, smUp } = useBreakpoint();
   // Header configuration.
   const {
     actions,
@@ -34,19 +35,23 @@ export const useHeaderVisibility = (
     slogan,
     socialMedia,
   } = headerProps;
+  // Breakpoint.
+  const hasBreakpoint = Boolean(breakpoint);
   // Header content.
   const hasActions = Boolean(actions);
   const hasLogo = Boolean(logo);
-  const hasMenu = !mdUp;
-  const hasNavItemsC = Boolean(navItemsC);
-  const hasNavItemsL = Boolean(navItemsL);
-  const hasNavItemsR = Boolean(navItemsR);
+  const hasMenu = smDown;
+  const hasNavItemsC = Boolean(navItemsC && navItemsC.length > 0);
+  const hasNavItemsL = Boolean(navItemsL && navItemsL.length > 0);
+  const hasNavItemsR = Boolean(navItemsR && navItemsR.length > 0);
   const hasSlogan = Boolean(slogan);
   const hasSocials = Boolean(socialMedia);
   // Determines header content visibility.
   const isActionsIn =
-    hasActions || searchEnabled || authenticationEnabled || hasMenu;
-  const isNavigationIn = mdUp;
+    (hasActions || searchEnabled || authenticationEnabled || hasMenu) &&
+    hasBreakpoint;
+  const isNavigationIn = smUp;
+  const isMenuIn = hasMenu;
   const isSloganIn = hasSlogan && mdUp;
   const isSocialsIn = hasSocials && lgUp;
   // Determines navigation visibility.
@@ -54,10 +59,9 @@ export const useHeaderVisibility = (
   const isLeftNavigationIn = isNavigationIn && hasNavItemsL;
   const isRightNavigationIn = isNavigationIn && hasNavItemsR;
   // Determines group visibility.
-  const isLeftGroupIn = hasLogo || isSocialsIn || isLeftNavigationIn;
+  const isLeftGroupIn = hasLogo || isSloganIn || isLeftNavigationIn;
   const isCenterGroupIn = isCenterNavigationIn;
   const isRightGroupIn = isRightNavigationIn || isSocialsIn || isActionsIn;
-
   return {
     isIn: {
       isActionsIn,
@@ -65,6 +69,7 @@ export const useHeaderVisibility = (
       isCenterNavigationIn,
       isLeftGroupIn,
       isLeftNavigationIn,
+      isMenuIn,
       isRightGroupIn,
       isRightNavigationIn,
       isSloganIn,

package/src/{hooks → components/Layout/components/Header/hooks}/useMenu.ts

@@ -13,12 +13,12 @@ export interface UseMenu {
 export const useMenu = (): UseMenu => {
   const [open, setOpen] = useState<boolean>(false);
 
-  // Closes header menu.
+  // Closes menu.
   const onClose = useCallback((): void => {
     setOpen(false);
   }, []);
 
-  // Opens header menu.
+  // Opens menu.
   const onOpen = useCallback((): void => {
     setOpen(true);
   }, []);

package/src/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.styles.ts

@@ -6,6 +6,7 @@ interface Props {
 }
 
 export const SidebarPositioner = styled("div")<Props>`
+  box-sizing: border-box;
   height: 100%;
   overflow: visible;
   padding: 16px 0;

package/src/components/common/CustomIcon/components/InProgressIcon/inProgressIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom in-progress icon.
+ */
+
+export const InProgressIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M9 16.5C7.9625 16.5 6.9875 16.3031 6.075 15.9094C5.1625 15.5156 4.36875 14.9812 3.69375 14.3062C3.01875 13.6312 2.48437 12.8375 2.09062 11.925C1.69687 11.0125 1.5 10.0375 1.5 9C1.5 7.9625 1.69687 6.9875 2.09062 6.075C2.48437 5.1625 3.01875 4.36875 3.69375 3.69375C4.36875 3.01875 5.1625 2.48437 6.075 2.09062C6.9875 1.69687 7.9625 1.5 9 1.5C10.0375 1.5 11.0125 1.69687 11.925 2.09062C12.8375 2.48437 13.6312 3.01875 14.3062 3.69375C14.9812 4.36875 15.5156 5.1625 15.9094 6.075C16.3031 6.9875 16.5 7.9625 16.5 9C16.5 10.0375 16.3031 11.0125 15.9094 11.925C15.5156 12.8375 14.9812 13.6312 14.3062 14.3062C13.6312 14.9812 12.8375 15.5156 11.925 15.9094C11.0125 16.3031 10.0375 16.5 9 16.5ZM9 15C9.8 15 10.5687 14.85 11.3062 14.55C12.0437 14.25 12.6937 13.8187 13.2562 13.2562L9 9V3C7.325 3 5.90625 3.58125 4.74375 4.74375C3.58125 5.90625 3 7.325 3 9C3 10.675 3.58125 12.0937 4.74375 13.2562C5.90625 14.4187 7.325 15 9 15Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/Dialog/hooks/useDialog.ts

@@ -0,0 +1,28 @@
+import { useCallback, useState } from "react";
+
+export interface UseDialog {
+  onClose: () => void;
+  onOpen: () => void;
+  open: boolean;
+}
+
+/**
+ * Dialog functionality.
+ * @param isOpen - Open state (initial).
+ * @returns dialog functionality.
+ */
+export const useDialog = (isOpen = false): UseDialog => {
+  const [open, setOpen] = useState<boolean>(isOpen);
+
+  // Closes dialog.
+  const onClose = useCallback((): void => {
+    setOpen(false);
+  }, []);
+
+  // Opens dialog
+  const onOpen = useCallback((): void => {
+    setOpen(true);
+  }, []);
+
+  return { onClose, onOpen, open };
+};

package/src/{hooks/useMenuWithPosition.ts → components/common/Menu/hooks/useMenu.ts}

@@ -1,9 +1,11 @@
-import { MenuProps as MMenuProps } from "@mui/material";
+import { PopperProps as MPopperProps } from "@mui/material";
 import { MouseEvent, useCallback, useMemo, useState } from "react";
 
-export interface UseMenuWithPosition {
-  anchorEl: MMenuProps["anchorEl"];
+export interface UseMenu {
+  anchorEl: MPopperProps["anchorEl"];
   onClose: () => void;
+  onDisableScrollLock: () => void;
+  onEnableScrollLock: () => void;
   onOpen: (event: MouseEvent<HTMLElement>) => void;
   onToggleOpen: (event: MouseEvent<HTMLElement>) => void;
   open: boolean;
@@ -13,16 +15,26 @@ export interface UseMenuWithPosition {
  * Menu functionality for menu dropdown, with menu position.
  * @returns menu functionality.
  */
-export const useMenuWithPosition = (): UseMenuWithPosition => {
-  const [anchorEl, setAnchorEl] = useState<MMenuProps["anchorEl"]>(null);
+export const useMenu = (): UseMenu => {
+  const [anchorEl, setAnchorEl] = useState<MPopperProps["anchorEl"]>(null);
   const open = useMemo(() => Boolean(anchorEl), [anchorEl]);
 
-  // Closes header menu.
+  // Closes menu.
   const onClose = useCallback((): void => {
     setAnchorEl(null);
   }, []);
 
-  // Opens header menu.
+  // Disables scroll lock.
+  const onDisableScrollLock = useCallback((): void => {
+    document.body.style.removeProperty("overflow");
+  }, []);
+
+  // Enables scroll lock.
+  const onEnableScrollLock = useCallback((): void => {
+    document.body.style.setProperty("overflow", "hidden");
+  }, []);
+
+  // Opens menu.
   const onOpen = useCallback((event: MouseEvent<HTMLElement>): void => {
     setAnchorEl(event.currentTarget);
   }, []);
@@ -42,6 +54,8 @@ export const useMenuWithPosition = (): UseMenuWithPosition => {
   return {
     anchorEl,
     onClose,
+    onDisableScrollLock,
+    onEnableScrollLock,
     onOpen,
     onToggleOpen,
     open,

package/src/hooks/useBreakpoint.ts

@@ -1,3 +1,4 @@
+import { BREAKPOINT_FN_NAME, useBreakpointHelper } from "./useBreakpointHelper";
 import {
   UseCurrentBreakpoint,
   useCurrentBreakpoint,
@@ -27,15 +28,15 @@ export const useBreakpoint = (): UseBreakpoint => {
   const md = breakpoint === "md";
   const lg = breakpoint === "lg";
   // Current breakpoint, down.
-  const xsDown = xs;
-  const smDown = xs || sm;
-  const mdDown = xs || sm || md;
-  const lgDown = xs || sm || md || lg;
+  const xsDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "xs");
+  const smDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "sm");
+  const mdDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
+  const lgDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "lg");
   // Current breakpoint, up.
-  const xsUp = xs || sm || md || lg;
-  const smUp = sm || md || lg;
-  const mdUp = md || lg;
-  const lgUp = lg;
+  const xsUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "xs");
+  const smUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "sm");
+  const mdUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "md");
+  const lgUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "lg");
   return {
     breakpoint,
     lg,

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.styles.ts

@@ -1,10 +0,0 @@
-import styled from "@emotion/styled";
-import { Button as MButton } from "@mui/material";
-import { textBody500 } from "../../../../../../../../../../../../styles/common/mixins/fonts";
-
-export const Button = styled(MButton)`
-  & {
-    ${textBody500};
-    padding: 6px 12px;
-  }
-`;

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.tsx

@@ -1,36 +0,0 @@
-import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
-import { IconButton as MIconButton } from "@mui/material";
-import React from "react";
-import { useBreakpoint } from "../../../../../../../../../../../../hooks/useBreakpoint";
-import { Button } from "./requestAuthentication.styles";
-
-export interface RequestAuthenticationProps {
-  closeMenu: () => void;
-  requestAuthorization: () => void;
-}
-
-export const RequestAuthentication = ({
-  closeMenu,
-  requestAuthorization,
-}: RequestAuthenticationProps): JSX.Element => {
-  const { mdUp } = useBreakpoint();
-  return mdUp ? (
-    <Button
-      onClick={requestAuthorization}
-      startIcon={<LoginRoundedIcon />}
-      variant="nav"
-    >
-      Sign in
-    </Button>
-  ) : (
-    <MIconButton
-      color="ink"
-      onClick={(): void => {
-        closeMenu();
-        requestAuthorization();
-      }}
-    >
-      <LoginRoundedIcon />
-    </MIconButton>
-  );
-};

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.styles.ts

@@ -1,10 +0,0 @@
-import styled from "@emotion/styled";
-import { Button as MButton } from "@mui/material";
-import { textBody500 } from "../../../../../../../../../../../../styles/common/mixins/fonts";
-
-export const Button = styled(MButton)`
-  & {
-    ${textBody500};
-    padding: 6px 12px;
-  }
-`;

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.tsx

@@ -1,22 +0,0 @@
-import { IconButton } from "@mui/material";
-import React from "react";
-import { useBreakpoint } from "../../../../../../../../../../../../hooks/useBreakpoint";
-import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
-import { Button } from "./searchButton.styles";
-
-export interface SearchProps {
-  openSearch: () => void;
-}
-
-export const SearchButton = ({ openSearch }: SearchProps): JSX.Element => {
-  const { mdUp } = useBreakpoint();
-  return mdUp ? (
-    <Button onClick={openSearch} startIcon={<SearchIcon />} variant="nav">
-      Search
-    </Button>
-  ) : (
-    <IconButton color="ink" onClick={openSearch}>
-      <SearchIcon fontSize="medium" />
-    </IconButton>
-  );
-};