@databiosphere/findable-ui 7.0.0 → 8.0.1

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

@@ -1,15 +1,17 @@
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import { IconButton, Toolbar as MToolbar } from "@mui/material";
 import React, { Fragment, ReactNode } from "react";
+import { ComponentsConfig } from "../../../../../../../../../../../../config/entities";
+import { Announcements } from "../../../../../../../Announcements/announcements";
 import { Actions } from "../../../../actions";
 import { Authentication } from "../../../Authentication/authentication";
 import { Search } from "../../../Search/search";
 
 export interface DialogTitleProps {
   actions?: ReactNode;
-  Announcements?: ReactNode;
+  announcements?: ComponentsConfig;
   authenticationEnabled?: boolean;
-  Logo?: ReactNode;
+  logo?: ReactNode;
   onClose: () => void;
   searchEnabled?: boolean;
   searchURL?: string;
@@ -17,18 +19,18 @@ export interface DialogTitleProps {
 
 export const Toolbar = ({
   actions,
-  Announcements,
+  announcements,
   authenticationEnabled,
-  Logo,
+  logo,
   onClose,
   searchEnabled,
   searchURL,
 }: DialogTitleProps): JSX.Element => {
   return (
     <Fragment>
-      {Announcements}
+      <Announcements announcements={announcements} />
       <MToolbar>
-        {Logo}
+        {logo}
         <Actions>
           {/* Search */}
           <Search

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/menu.tsx

@@ -1,13 +1,8 @@
 import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
 import { Dialog as MDialog, Fade, IconButton } from "@mui/material";
-import React, { CSSProperties, forwardRef, useEffect } from "react";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../../../../../theme/common/breakpoints";
-import { SWITCH_TRANSITION_PROPS } from "../../../../../../common/constants";
-import { flattenNavigationLinks } from "../../../../../../common/utils";
+import React, { CSSProperties, forwardRef, Fragment, useEffect } from "react";
+import { useBreakpoint } from "../../../../../../../../../../hooks/useBreakpoint";
+import { getMenuNavigationLinks } from "../../../../../../common/utils";
 import { HeaderProps } from "../../../../../../header";
 import { AppBar } from "../../../../../../header.styles";
 import { Content } from "../../../../content.styles";
@@ -21,32 +16,31 @@ export interface MenuProps {
   headerProps: HeaderProps;
   open: boolean;
   openMenu: () => void;
+  pathname?: string;
   style?: CSSProperties; // Required for Fade component. See https://mui.com/material-ui/transitions/#child-requirement.
 }
 
 export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
   function HeaderMenu(
-    { closeMenu, headerProps, open, openMenu, style }: MenuProps,
+    { closeMenu, headerProps, open, openMenu, pathname, style }: MenuProps,
     ref
-  ): JSX.Element {
-    const { navLinks, slogan, socialMedia } = headerProps;
-    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
-    const switchProps = SWITCH_TRANSITION_PROPS;
+  ): JSX.Element | null {
+    const { navigation, slogan, socialMedia } = headerProps;
+    const { breakpoint, smDown } = useBreakpoint();
 
-    // Set drawer open state to false on change of media breakpoint from mobile to "small desktop".
+    // Set drawer open state to false on change of media breakpoint from small desktop "md" and up.
     useEffect(() => {
-      if (smDesktop) {
-        closeMenu();
-      }
-    }, [closeMenu, smDesktop]);
+      if (smDown) return;
+      closeMenu();
+    }, [closeMenu, smDown]);
+
+    if (!smDown) return null;
 
     return (
-      <>
-        <Fade in={!smDesktop} {...switchProps}>
-          <IconButton color="ink" onClick={openMenu} ref={ref} style={style}>
-            <MenuRoundedIcon />
-          </IconButton>
-        </Fade>
+      <Fragment>
+        <IconButton color="ink" onClick={openMenu} ref={ref} style={style}>
+          <MenuRoundedIcon />
+        </IconButton>
         <MDialog
           disableScrollLock
           fullScreen
@@ -56,7 +50,7 @@ export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
           open={open}
           PaperProps={{ elevation: 0 }}
           TransitionComponent={Fade}
-          transitionDuration={smDesktop ? 0 : 600}
+          transitionDuration={smDown ? 600 : 0}
           TransitionProps={{ easing: "ease-out" }}
         >
           <AppBar component="div" elevation={0}>
@@ -67,14 +61,15 @@ export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
             <Navigation
               closeAncestor={closeMenu}
               headerProps={headerProps}
-              links={flattenNavigationLinks(navLinks)}
+              links={getMenuNavigationLinks(navigation, breakpoint)}
+              pathname={pathname}
             />
             {socialMedia && (
               <Socials buttonSize="xlarge" socials={socialMedia.socials} />
             )}
           </Content>
         </MDialog>
-      </>
+      </Fragment>
     );
   }
 );

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

@@ -1,12 +1,7 @@
-import { Fade, IconButton } from "@mui/material";
+import { IconButton } from "@mui/material";
 import React from "react";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../../../../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../../../../../../../theme/common/breakpoints";
+import { useBreakpoint } from "../../../../../../../../../../../../hooks/useBreakpoint";
 import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
-import { SWITCH_TRANSITION_PROPS } from "../../../../../../../../common/constants";
 import { Button } from "./searchButton.styles";
 
 export interface SearchProps {
@@ -14,20 +9,14 @@ export interface SearchProps {
 }
 
 export const SearchButton = ({ openSearch }: SearchProps): JSX.Element => {
-  const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
-  const switchProps = SWITCH_TRANSITION_PROPS;
-  return (
-    <>
-      <Fade in={smDesktop} {...switchProps}>
-        <Button onClick={openSearch} startIcon={<SearchIcon />} variant="nav">
-          Search
-        </Button>
-      </Fade>
-      <Fade in={!smDesktop} {...switchProps}>
-        <IconButton color="ink" onClick={openSearch}>
-          <SearchIcon fontSize="medium" />
-        </IconButton>
-      </Fade>
-    </>
+  const { mdUp } = useBreakpoint();
+  return mdUp ? (
+    <Button onClick={openSearch} startIcon={<SearchIcon />} variant="nav">
+      Search
+    </Button>
+  ) : (
+    <IconButton color="ink" onClick={openSearch}>
+      <SearchIcon fontSize="medium" />
+    </IconButton>
   );
 };

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.tsx

@@ -16,6 +16,7 @@ export interface NavigationDrawerProps {
   headerProps?: HeaderProps;
   menuItems: MenuItem[];
   menuLabel: ReactNode;
+  pathname?: string;
 }
 
 export const NavigationDrawer = ({
@@ -23,6 +24,7 @@ export const NavigationDrawer = ({
   headerProps,
   menuItems,
   menuLabel,
+  pathname,
 }: NavigationDrawerProps): JSX.Element => {
   const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
   const openDrawer = (): void => {
@@ -71,6 +73,7 @@ export const NavigationDrawer = ({
             closeAncestor={closeDrawers}
             headerProps={headerProps}
             links={menuItems}
+            pathname={pathname}
           />
         </Content>
       </MDialog>

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.styles.ts

@@ -1,6 +1,11 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Menu as MMenu } from "@mui/material";
+import {
+  inkLight,
+  smokeLight,
+  smokeMain,
+} from "../../../../../../../../../../styles/common/mixins/colors";
 import { Button as DXButton } from "../../../../../../../../../common/Button/button";
 
 interface Props {
@@ -9,7 +14,7 @@ interface Props {
 
 export const Menu = styled(MMenu)`
   .MuiPaper-menu {
-    border-color: ${({ theme }) => theme.palette.smoke.main};
+    border-color: ${smokeMain};
     margin: 4px 0;
     max-width: 324px;
     min-width: 204px;
@@ -36,12 +41,17 @@ export const Menu = styled(MMenu)`
         }
 
         .MuiListItemText-secondary {
-          color: ${({ theme }) => theme.palette.ink.light};
+          color: ${inkLight};
           white-space: normal;
         }
       }
+
+      &.Mui-selected {
+        background-color: ${smokeLight};
+      }
     }
 
+    .MuiButton-activeNav,
     .MuiButton-nav {
       font-weight: 400;
       justify-content: space-between;
@@ -63,9 +73,9 @@ export const Button = styled(DXButton, {
   shouldForwardProp: (prop) => prop !== "isActive",
 })<Props>`
   // Button is "active" i.e. menu is open.
-  ${({ isActive, theme }) =>
-    isActive &&
+  ${(props) =>
+    props.isActive &&
     css`
-      background-color: ${theme.palette.smoke.light};
+      background-color: ${smokeLight(props)};
     `};
 `;

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.tsx

@@ -1,11 +1,7 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
 import { MenuProps as MMenuProps } from "@mui/material";
 import React, { MouseEvent, ReactNode, useState } from "react";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../../../../../theme/common/breakpoints";
+import { useBreakpoint } from "../../../../../../../../../../hooks/useBreakpoint";
 import {
   MenuItem,
   NavigationMenuItems,
@@ -17,6 +13,7 @@ export interface NavLinkMenuProps {
   closeAncestor?: () => void;
   menuItems: MenuItem[];
   menuLabel: ReactNode;
+  pathname?: string;
 }
 
 export const NavigationMenu = ({
@@ -24,8 +21,9 @@ export const NavigationMenu = ({
   closeAncestor,
   menuItems,
   menuLabel,
+  pathname,
 }: NavLinkMenuProps): JSX.Element => {
-  const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
+  const { mdUp } = useBreakpoint();
   const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
   const open = Boolean(anchorEl);
   const openMenu = (event: MouseEvent<HTMLButtonElement>): void => {
@@ -49,14 +47,18 @@ export const NavigationMenu = ({
         anchorEl={anchorEl}
         anchorOrigin={anchorOrigin}
         onClose={closeMenu}
-        open={smDesktop && open}
+        open={mdUp && open}
         slotProps={{ paper: { variant: "menu" } }}
         transformOrigin={{
           horizontal: "left",
           vertical: "top",
         }}
       >
-        <NavigationMenuItems closeMenu={closeMenu} menuItems={menuItems} />
+        <NavigationMenuItems
+          closeMenu={closeMenu}
+          menuItems={menuItems}
+          pathname={pathname}
+        />
       </Menu>
     </>
   );

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.tsx

@@ -24,11 +24,13 @@ export interface MenuItem extends NavLinkItem {
 export interface NavLinkMenuProps {
   closeMenu: () => void;
   menuItems: MenuItem[];
+  pathname?: string;
 }
 
 export const NavigationMenuItems = ({
   closeMenu,
   menuItems,
+  pathname,
 }: NavLinkMenuProps): JSX.Element => {
   const router = useRouter();
   return (
@@ -53,6 +55,7 @@ export const NavigationMenuItems = ({
               closeAncestor={closeMenu}
               menuItems={nestedMenuItems}
               menuLabel={label}
+              pathname={pathname}
             />
           ) : (
             <Fragment key={i}>
@@ -63,6 +66,7 @@ export const NavigationMenuItems = ({
                     ? router.push(url)
                     : window.open(url, target, "noopener noreferrer");
                 }}
+                selected={url === pathname}
               >
                 {icon && <ListItemIcon>{icon}</ListItemIcon>}
                 <ListItemText

package/src/components/Layout/components/Header/components/Content/components/Navigation/navigation.styles.ts

@@ -1,44 +1,20 @@
-import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import {
-  ElementAlignment,
-  ELEMENT_ALIGNMENT,
-} from "../../../../../../../../common/entities";
 import { mediaDesktopSmallUp } from "../../../../../../../../styles/common/mixins/breakpoints";
 import { textBody500 } from "../../../../../../../../styles/common/mixins/fonts";
 
-interface Props {
-  alignment: ElementAlignment;
-}
-
-export const Navigation = styled("div")<Props>`
+export const Navigation = styled("div")`
   display: flex;
   flex: 1;
   flex-direction: row;
   gap: 8px;
   justify-content: flex-start;
 
-  // Left alignment.
-  ${({ alignment }) =>
-    alignment === ELEMENT_ALIGNMENT.LEFT &&
-    css`
-      margin-left: 24px;
-    `};
-
-  // Center alignment.
-  ${({ alignment }) =>
-    alignment === ELEMENT_ALIGNMENT.CENTER &&
-    css`
-      justify-content: center;
-    `};
-
-  // Right alignment.
-  ${({ alignment }) =>
-    alignment === ELEMENT_ALIGNMENT.RIGHT &&
-    css`
-      justify-content: flex-end;
-    `};
+  ${mediaDesktopSmallUp} {
+    flex: unset;
+    justify-content: inherit;
+  }
 
+  .MuiButton-activeNav,
   .MuiButton-nav {
     ${textBody500};
     padding: 6px 12px;

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

@@ -1,15 +1,8 @@
 import { Button, Divider } from "@mui/material";
 import { useRouter } from "next/router";
 import React, { CSSProperties, forwardRef, Fragment, ReactNode } from "react";
-import {
-  ElementAlignment,
-  ELEMENT_ALIGNMENT,
-} from "../../../../../../../../common/entities";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../../../theme/common/breakpoints";
+import { useBreakpoint } from "../../../../../../../../hooks/useBreakpoint";
+import { BreakpointKey } from "../../../../../../../../hooks/useBreakpointHelper";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
 import { HeaderProps } from "../../../../header";
@@ -20,43 +13,39 @@ import { Navigation as Links } from "./navigation.styles";
 
 export interface NavLinkItem {
   divider?: boolean;
-  flatten?: boolean;
+  flatten?: Partial<Record<BreakpointKey, boolean>>;
   label: ReactNode;
   menuItems?: MenuItem[];
   target?: ANCHOR_TARGET;
   url: string;
+  visible?: Partial<Record<BreakpointKey, boolean>>;
 }
 
 export interface NavigationProps {
-  alignment?: ElementAlignment;
   className?: string;
   closeAncestor?: () => void;
   headerProps?: HeaderProps;
   links: NavLinkItem[];
+  pathname?: string;
   style?: CSSProperties; // Required for Fade component. See https://mui.com/material-ui/transitions/#child-requirement.
 }
 
 export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
   function Navigation(
     {
-      alignment = ELEMENT_ALIGNMENT.LEFT,
       className,
       closeAncestor,
       headerProps,
       links,
+      pathname,
       style,
     }: NavigationProps,
     ref
   ): JSX.Element {
-    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
+    const { mdUp } = useBreakpoint();
     const router = useRouter();
     return (
-      <Links
-        ref={ref}
-        alignment={alignment}
-        className={className}
-        style={style}
-      >
+      <Links ref={ref} className={className} style={style}>
         {links.map(
           (
             { divider, label, menuItems, target = ANCHOR_TARGET.SELF, url },
@@ -64,11 +53,12 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
           ) =>
             menuItems ? (
               <Fragment key={i}>
-                {smDesktop ? (
+                {mdUp ? (
                   <NavigationMenu
                     closeAncestor={closeAncestor}
                     menuItems={menuItems}
                     menuLabel={label}
+                    pathname={pathname}
                   />
                 ) : (
                   <NavigationDrawer
@@ -76,6 +66,7 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
                     headerProps={headerProps}
                     menuItems={menuItems}
                     menuLabel={label}
+                    pathname={pathname}
                   />
                 )}
                 {divider && <Divider />}
@@ -89,7 +80,7 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
                       : window.open(url, target, "noopener noreferrer");
                     closeAncestor?.();
                   }}
-                  variant="nav"
+                  variant={url === pathname ? "activeNav" : "nav"}
                 >
                   {label}
                 </Button>

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

@@ -1,23 +1,17 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { ELEMENT_ALIGNMENT } from "../../../../common/entities";
 import logo from "../../../../images/logo.svg";
 import { DiscourseIcon } from "../../../common/CustomIcon/components/DiscourseIcon/discourseIcon";
 import { GitHubIcon } from "../../../common/CustomIcon/components/GitHubIcon/gitHubIcon";
 import { XIcon } from "../../../common/CustomIcon/components/XIcon/xIcon";
 import { YouTubeIcon } from "../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon";
-import { HEADER_NAVIGATION_LABEL } from "./common/constants";
 import { Logo } from "./components/Content/components/Logo/logo";
 import { Header } from "./header";
 
 export default {
   argTypes: {
-    Logo: { control: { disable: true } },
     authenticationEnabled: { control: "boolean" },
-    navAlignment: {
-      control: "select",
-      options: [ELEMENT_ALIGNMENT.LEFT, ELEMENT_ALIGNMENT.CENTER],
-    },
+    logo: { control: { disable: true } },
     navLinks: { control: "array" },
     searchEnabled: { control: "boolean" },
     slogan: { control: "text" },
@@ -36,45 +30,48 @@ const url = "/";
 
 export const HeaderStory: Story = {
   args: {
-    Logo: <Logo alt="Logo" height={40} link="/" src={logo} />,
     authenticationEnabled: false,
-    navAlignment: ELEMENT_ALIGNMENT.CENTER,
-    navLinks: [
-      {
-        label: "Overview",
-        url,
-      },
-      {
-        label: "Learn",
-        url,
-      },
-      {
-        label: "Datasets",
-        url,
-      },
-      {
-        label: "More",
-        menuItems: [
-          {
-            label: "Team",
-            url,
-          },
-          {
-            label: "FAQ",
-            url,
-          },
-          {
-            label: "Help",
-            url,
-          },
-        ],
-        url: "",
-      },
+    logo: <Logo alt="Logo" height={40} link="/" src={logo} />,
+    navigation: [
+      undefined,
+      [
+        {
+          label: "Overview",
+          url,
+        },
+        {
+          label: "Learn",
+          url,
+        },
+        {
+          label: "Datasets",
+          url,
+        },
+        {
+          label: "More",
+          menuItems: [
+            {
+              label: "Team",
+              url,
+            },
+            {
+              label: "FAQ",
+              url,
+            },
+            {
+              label: "Help",
+              url,
+            },
+          ],
+          url: "",
+        },
+      ],
+      undefined,
     ],
     searchEnabled: true,
     slogan: "Header Slogan",
     socialMedia: {
-      label: HEADER_NAVIGATION_LABEL.SOCIALS,
+      label: "Follow Us",
       socials: [
         {
           Icon: XIcon,

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

@@ -1,3 +1,4 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { AppBar as MAppBar } from "@mui/material";
 import { HEADER_HEIGHT } from "./common/constants";
@@ -16,8 +17,30 @@ export const AppBar = styled(MAppBar)`
   }
 ` as typeof MAppBar;
 
-export const HeaderSmAppBar = styled(AppBar)`
-  .MuiToolbar-root {
-    gap: 8px;
+const group = css`
+  align-items: center;
+  display: flex;
+  flex: 1;
+`;
+
+export const Left = styled.div`
+  ${group};
+  gap: 16px;
+  justify-content: flex-start;
+
+  .MuiButton-navPrimary {
+    &:first-of-type {
+      margin-left: 24px;
+    }
   }
-` as typeof MAppBar;
+`;
+
+export const Center = styled.div`
+  ${group};
+  justify-content: center;
+`;
+
+export const Right = styled.div`
+  ${group};
+  justify-content: flex-end;
+`;