feat: updated header action buttons (#173)

src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.tsx

@@ -1,35 +1,73 @@
+import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
+import {
+  ButtonProps as MButtonProps,
+  IconButton as MIconButton,
+  IconButtonProps as MIconButtonProps,
+} from "@mui/material";
 import { useRouter } from "next/router";
-import React, { useCallback } from "react";
+import React, { ElementType, useCallback } from "react";
 import { useAuthentication } from "../../../../../../../../../../hooks/useAuthentication/useAuthentication";
 import { AuthenticationMenu } from "./components/AuthenticationMenu/authenticationMenu";
-import { RequestAuthentication } from "./components/RequestAuthentication/requestAuthentication";
+import { StyledButton } from "./components/Button/button.styles";
 
 export interface AuthenticationProps {
   authenticationEnabled?: boolean;
+  Button: ElementType<MButtonProps> | ElementType<MIconButtonProps>;
   closeMenu: () => void;
 }
 
 export const Authentication = ({
   authenticationEnabled,
+  Button,
   closeMenu,
-}: AuthenticationProps): JSX.Element => {
+}: AuthenticationProps): JSX.Element | null => {
   const { isAuthenticated, requestAuthentication, userProfile } =
     useAuthentication();
   const router = useRouter();
   const onLogout = useCallback((): void => {
     location.href = router.basePath;
   }, [router]);
+
+  if (!authenticationEnabled) return null;
+
   return (
     <>
-      {authenticationEnabled &&
-        (isAuthenticated && userProfile ? (
-          <AuthenticationMenu onLogout={onLogout} userProfile={userProfile} />
-        ) : (
-          <RequestAuthentication
-            closeMenu={closeMenu}
-            requestAuthorization={requestAuthentication}
-          />
-        ))}
+      {isAuthenticated && userProfile ? (
+        <AuthenticationMenu onLogout={onLogout} userProfile={userProfile} />
+      ) : (
+        <Button
+          onClick={(): void => {
+            requestAuthentication();
+            closeMenu();
+          }}
+        />
+      )}
     </>
   );
 };
+
+/**
+ * Renders authentication button.
+ * @param props - Button props.
+ * @returns button.
+ */
+export function renderButton(props: MButtonProps): JSX.Element {
+  return (
+    <StyledButton startIcon={<LoginRoundedIcon />} variant="nav" {...props}>
+      Sign in
+    </StyledButton>
+  );
+}
+
+/**
+ * Renders authentication icon button.
+ * @param props - Button props.
+ * @returns icon button.
+ */
+export function renderIconButton(props: MIconButtonProps): JSX.Element {
+  return (
+    <MIconButton color="ink" {...props}>
+      <LoginRoundedIcon />
+    </MIconButton>
+  );
+}

src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { Button as MButton } from "@mui/material";
+
+export const StyledButton = styled(MButton)`
+  &.MuiButton-nav {
+    padding: 6px 12px;
+  }
+`;

src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.tsx

@@ -5,8 +5,14 @@ import { ComponentsConfig } from "../../../../../../../../../../../../config/ent
 import { Left, Right } from "../../../../../../../../header.styles";
 import { Announcements } from "../../../../../../../Announcements/announcements";
 import { Actions } from "../../../../actions";
-import { Authentication } from "../../../Authentication/authentication";
-import { Search } from "../../../Search/search";
+import {
+  Authentication,
+  renderIconButton as renderAuthenticationIconButton,
+} from "../../../Authentication/authentication";
+import {
+  renderIconButton as renderSearchIconButton,
+  Search,
+} from "../../../Search/search";
 
 export interface DialogTitleProps {
   actions?: ReactNode;
@@ -36,13 +42,15 @@ export const Toolbar = ({
           <Actions>
             {/* Search */}
             <Search
+              Button={renderSearchIconButton}
               closeMenu={onClose}
               searchEnabled={searchEnabled}
               searchURL={searchURL}
             />
             {/* Authentication */}
             <Authentication
               authenticationEnabled={authenticationEnabled}
+              Button={renderAuthenticationIconButton}
               closeMenu={onClose}
             />
             {/* Additional actions i.e. call-to-action button */}

src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/Button/button.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { Button as MButton } from "@mui/material";
+
+export const StyledButton = styled(MButton)`
+  &.MuiButton-nav {
+    padding: 6px 12px;
+  }
+`;

src/components/Layout/components/Header/components/Content/components/Actions/components/Search/search.tsx

@@ -1,24 +1,33 @@
-import React, { useState } from "react";
+import {
+  ButtonProps as MButtonProps,
+  IconButton as MIconButton,
+  IconButtonProps as MIconButtonProps,
+} from "@mui/material";
+import React, { ElementType, useState } from "react";
+import { SearchIcon } from "../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { StyledButton } from "./components/Button/button.styles";
 import SearchBar from "./components/SearchBar/searchBar";
-import { SearchButton } from "./components/SearchButton/searchButton";
 
 export interface SearchProps {
+  Button: ElementType<MButtonProps> | ElementType<MIconButtonProps>;
   closeMenu: () => void;
   searchEnabled?: boolean;
   searchURL?: string;
 }
 
 export const Search = ({
+  Button,
   closeMenu,
   searchEnabled,
   searchURL,
-}: SearchProps): JSX.Element => {
+}: SearchProps): JSX.Element | null => {
   const [searchOpen, setSearchOpen] = useState<boolean>(false);
+
+  if (!searchEnabled) return null;
+
   return (
     <>
-      {searchEnabled && (
-        <SearchButton openSearch={(): void => setSearchOpen(true)} />
-      )}
+      <Button onClick={(): void => setSearchOpen(true)} />
       <SearchBar
         closeMenu={closeMenu}
         closeSearch={(): void => setSearchOpen(false)}
@@ -28,3 +37,29 @@ export const Search = ({
     </>
   );
 };
+
+/**
+ * Renders search button.
+ * @param props - Button props.
+ * @returns button.
+ */
+export function renderButton(props: MButtonProps): JSX.Element {
+  return (
+    <StyledButton startIcon={<SearchIcon />} variant="nav" {...props}>
+      Search
+    </StyledButton>
+  );
+}
+
+/**
+ * Renders search icon button.
+ * @param props - Button props.
+ * @returns icon button.
+ */
+export function renderIconButton(props: MIconButtonProps): JSX.Element {
+  return (
+    <MIconButton color="ink" {...props}>
+      <SearchIcon fontSize="medium" />
+    </MIconButton>
+  );
+}

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

@@ -10,9 +10,17 @@ import {
 import { Navigation, SocialMedia } from "./common/entities";
 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";
@@ -107,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}
                 />