@databiosphere/findable-ui 10.0.0 → 10.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "10.0.0",
+  "version": "10.1.0",
   "description": "",
   "scripts": {
     "test": "jest",

package/src/components/Filter/components/Filter/filter.styles.ts

@@ -6,13 +6,14 @@ import { IconButton as DXIconButton } from "../../../common/IconButton/iconButto
 
 export const FilterPopover = styled(Popover)`
   .MuiPaper-menu {
-    margin: 0;
+    margin: 4px 0;
   }
 
   ${mediaDesktopSmallDown} {
     .MuiPaper-root {
       background-color: ${smokeLight};
       height: 100%;
+      margin: 0;
       max-height: 100%;
       overflow: visible; // required; allows backdrop button to render outside of drawer container.
     }

package/src/components/Filter/components/Filter/filter.tsx

@@ -79,6 +79,7 @@ export const Filter = ({
       <FilterLabel
         count={categoryView.values.length}
         disabled={categoryView.isDisabled}
+        isOpen={isOpen}
         label={categoryView.label}
         onClick={onOpenFilter}
       />

package/src/components/Filter/components/FilterLabel/filterLabel.stories.tsx

@@ -6,6 +6,7 @@ export default {
   argTypes: {
     count: { control: "number" },
     disabled: { control: "boolean" },
+    isOpen: { control: "boolean" },
     label: { control: "text" },
   },
   component: FilterLabel,
@@ -27,5 +28,6 @@ export const FilterLabelStory = FilterLabelTemplate.bind({});
 FilterLabelStory.args = {
   count: 123,
   disabled: false,
+  isOpen: false,
   label: "Label",
 };

package/src/components/Filter/components/FilterLabel/filterLabel.styles.ts

@@ -1,17 +1,25 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Button } from "@mui/material";
 import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
+import { inkLight, smokeMain } from "../../../../styles/common/mixins/colors";
 
-export const FilterLabel = styled(Button)`
+interface Props {
+  isOpen: boolean;
+}
+
+export const FilterLabel = styled(Button, {
+  shouldForwardProp: (prop) => prop !== "isOpen",
+})<Props>`
   font-weight: inherit;
   gap: 0;
   justify-content: space-between;
-  padding: 10px 16px;
+  padding: 10px 8px;
   text-transform: none;
   text-align: left;
 
   :hover {
-    background-color: transparent;
+    background-color: ${smokeMain};
   }
 
   &.Mui-disabled {
@@ -19,16 +27,28 @@ export const FilterLabel = styled(Button)`
   }
 
   & .MuiButton-endIcon {
+    color: ${inkLight};
     margin-right: -4px;
     transform: rotate(-90deg);
   }
 
   ${mediaDesktopSmallUp} {
-    padding: 6px 0;
+    padding: 6px 8px;
 
     & .MuiButton-endIcon {
-      margin-right: 0;
       transform: unset;
     }
   }
+
+  ${(props) =>
+    props.isOpen &&
+    css`
+      background-color: ${smokeMain(props)};
+
+      ${mediaDesktopSmallUp(props)} {
+        & .MuiButton-endIcon {
+          transform: rotate(180deg);
+        }
+      }
+    `};
 `;

package/src/components/Filter/components/FilterLabel/filterLabel.tsx

@@ -5,6 +5,7 @@ import { FilterLabel as Label } from "./filterLabel.styles";
 export interface FilterLabelProps {
   count?: number;
   disabled?: boolean;
+  isOpen: boolean;
   label: string;
   onClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
@@ -12,6 +13,7 @@ export interface FilterLabelProps {
 export const FilterLabel = ({
   count,
   disabled = false,
+  isOpen,
   label,
   onClick,
 }: FilterLabelProps): JSX.Element => {
@@ -22,6 +24,7 @@ export const FilterLabel = ({
       disabled={disabled}
       endIcon={<ArrowDropDownRoundedIcon fontSize="small" />}
       fullWidth
+      isOpen={isOpen}
       onClick={onClick}
     >
       {filterLabel}

package/src/components/Filter/components/FilterTags/filterTags.styles.ts

@@ -1,18 +1,13 @@
 import styled from "@emotion/styled";
-import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
 
 export const FilterTags = styled.span`
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
-  margin-bottom: 8px;
-  padding: 0 16px;
+  margin: 4px 0 8px;
+  padding: 0 8px;
 
   &:last-child {
     margin-bottom: 0;
   }
-
-  ${mediaDesktopSmallUp} {
-    padding: 0;
-  }
 `;

package/src/components/Filter/components/Filters/filters.styles.ts

@@ -3,25 +3,22 @@ import styled from "@emotion/styled";
 import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
 import { inkLight, inkMain } from "../../../../styles/common/mixins/colors";
 import {
-  textBody400,
   textBody500,
+  textUppercase500,
 } from "../../../../styles/common/mixins/fonts";
 
 interface Props {
   disabled: boolean;
   height: number;
-  isBaseStyle: boolean;
 }
 
-export const Filters = styled("div", {
-  shouldForwardProp: (prop) => prop !== "height" && prop !== "isBaseStyle",
-})<Props>`
-  ${(props) => (props.isBaseStyle ? textBody500(props) : textBody400(props))};
-  color: ${(props) => (props.isBaseStyle ? inkMain(props) : inkLight(props))};
+export const Filters = styled("div")<Props>`
+  ${textBody500};
+  color: ${inkMain};
   height: ${({ height }) => height}px;
   margin: 8px 0;
   overflow: auto;
-  padding: 0 0 8px;
+  padding: 0 8px 8px;
 
   // Filters are globally "disabled".
   ${({ disabled }) =>
@@ -31,22 +28,18 @@ export const Filters = styled("div", {
     `};
 
   .MuiDivider-root {
-    margin: 8px 0;
+    margin: 8px;
   }
 
   ${mediaDesktopSmallUp} {
     height: unset;
     overflow: unset;
-    padding: 0 12px 0 16px;
+    padding: 0 8px;
   }
 `;
 
 export const CategoryViewsLabel = styled("div")`
-  ${textBody500};
-  color: ${inkMain};
-  padding: 8px 16px;
-
-  ${mediaDesktopSmallUp} {
-    padding: 8px 0;
-  }
+  ${textUppercase500};
+  color: ${inkLight};
+  padding: 8px;
 `;

package/src/components/Filter/components/Filters/filters.tsx

@@ -1,5 +1,5 @@
 import { Divider } from "@mui/material";
-import React, { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import React, { Fragment, useEffect, useRef, useState } from "react";
 import { CategoryTag, SelectCategoryView } from "../../../../common/entities";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import {
@@ -76,22 +76,13 @@ export const Filters = ({
   const { height: windowHeight } = useWindowResize();
   const filterListRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number>(0);
-  const isLabeled = useMemo(
-    () => isCategoryViewsLabeled(categoryFilters),
-    [categoryFilters]
-  );
 
   useEffect(() => {
     setHeight(calculateListHeight(windowHeight, filterListRef.current));
   }, [windowHeight]);
 
   return (
-    <FilterList
-      disabled={disabled}
-      height={height}
-      isBaseStyle={!isLabeled}
-      ref={filterListRef}
-    >
+    <FilterList disabled={disabled} height={height} ref={filterListRef}>
       {categoryFilters.map(({ categoryViews, label }, i) => (
         <Fragment key={i}>
           {i !== 0 && <Divider />}
@@ -126,12 +117,3 @@ function calculateListHeight(
 ): number {
   return windowHeight - (filterListEl?.getBoundingClientRect()?.top ?? 0);
 }
-
-/**
- * Returns true if any category views are labelled.
- * @param categoryFilters - Category filters.
- * @returns true if any category views are labelled.
- */
-function isCategoryViewsLabeled(categoryFilters: CategoryFilter[]): boolean {
-  return categoryFilters.some(({ label }) => label);
-}

package/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>
+  );
+}

package/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;
+  }
+`;

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/common/constants.ts

@@ -0,0 +1,9 @@
+import { DialogProps as MDialogProps } from "@mui/material";
+
+export const DIALOG_PROPS: Partial<MDialogProps> = {
+  PaperProps: { elevation: 0 },
+  TransitionProps: { easing: "ease-out" },
+  fullScreen: true,
+  hideBackdrop: true,
+  keepMounted: false,
+};

package/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,6 +42,7 @@ export const Toolbar = ({
           <Actions>
             {/* Search */}
             <Search
+              Button={renderSearchIconButton}
               closeMenu={onClose}
               searchEnabled={searchEnabled}
               searchURL={searchURL}
@@ -43,6 +50,7 @@ export const Toolbar = ({
             {/* Authentication */}
             <Authentication
               authenticationEnabled={authenticationEnabled}
+              Button={renderAuthenticationIconButton}
               closeMenu={onClose}
             />
             {/* Additional actions i.e. call-to-action button */}

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

@@ -1,12 +1,12 @@
 import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
 import { Dialog as MDialog, Fade, IconButton } from "@mui/material";
 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";
 import { Slogan } from "../../../Slogan/slogan";
+import { DIALOG_PROPS } from "./common/constants";
 import { Navigation } from "./components/Content/components/Navigation/navigation.styles";
 import { Socials } from "./components/Content/components/Socials/socials.styles";
 import { Toolbar } from "./components/Toolbar/toolbar";
@@ -14,6 +14,7 @@ import { Toolbar } from "./components/Toolbar/toolbar";
 export interface MenuProps {
   closeMenu: () => void;
   headerProps: HeaderProps;
+  isMenuIn: boolean;
   open: boolean;
   openMenu: () => void;
   pathname?: string;
@@ -22,19 +23,26 @@ export interface MenuProps {
 
 export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
   function HeaderMenu(
-    { closeMenu, headerProps, open, openMenu, pathname, style }: MenuProps,
+    {
+      closeMenu,
+      headerProps,
+      isMenuIn,
+      open,
+      openMenu,
+      pathname,
+      style,
+    }: MenuProps,
     ref
   ): JSX.Element | null {
     const { navigation, slogan, socialMedia } = headerProps;
-    const { smDown } = useBreakpoint();
 
     // Set drawer open state to false on change of media breakpoint from small desktop "md" and up.
     useEffect(() => {
-      if (smDown) return;
+      if (isMenuIn) return;
       closeMenu();
-    }, [closeMenu, smDown]);
+    }, [closeMenu, isMenuIn]);
 
-    if (!smDown) return null;
+    if (!isMenuIn) return null;
 
     return (
       <Fragment>
@@ -42,16 +50,11 @@ export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
           <MenuRoundedIcon />
         </IconButton>
         <MDialog
-          disableScrollLock
-          fullScreen
-          hideBackdrop
-          keepMounted={false}
+          {...DIALOG_PROPS}
           onClose={closeMenu}
           open={open}
-          PaperProps={{ elevation: 0 }}
           TransitionComponent={Fade}
-          transitionDuration={smDown ? 600 : 0}
-          TransitionProps={{ easing: "ease-out" }}
+          transitionDuration={isMenuIn ? 600 : 0}
         >
           <AppBar component="div" elevation={0}>
             <Toolbar onClose={closeMenu} {...headerProps} />
@@ -61,6 +64,7 @@ export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
             <Navigation
               closeAncestor={closeMenu}
               headerProps={headerProps}
+              isMenuIn={isMenuIn}
               links={getMenuNavigationLinks(navigation)}
               pathname={pathname}
             />

package/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;
+  }
+`;

package/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>
+  );
+}

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/common/constants.ts

@@ -0,0 +1,9 @@
+import { DialogProps as MDialogProps } from "@mui/material";
+
+export const DIALOG_PROPS: Partial<MDialogProps> = {
+  PaperProps: { elevation: 0 },
+  fullScreen: true,
+  hideBackdrop: true,
+  keepMounted: false,
+  transitionDuration: 300,
+};

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

@@ -8,6 +8,7 @@ import { AppBar } from "../../../../../../header.styles";
 import { DrawerNavigation as Navigation } from "../../../Actions/components/Menu/components/Content/components/Navigation/navigation.styles";
 import { Toolbar } from "../../../Actions/components/Menu/components/Toolbar/toolbar";
 import { MenuItem } from "../NavigationMenuItems/navigationMenuItems";
+import { DIALOG_PROPS } from "./common/constants";
 import { Slide } from "./components/Slide/slide";
 import {
   Button as BackButton,
@@ -18,6 +19,7 @@ import {
 export interface NavigationDrawerProps {
   closeAncestor?: () => void;
   headerProps?: HeaderProps;
+  isMenuIn: boolean;
   isSelected?: boolean;
   menuItems: MenuItem[];
   menuLabel: ReactNode;
@@ -27,6 +29,7 @@ export interface NavigationDrawerProps {
 export const NavigationDrawer = ({
   closeAncestor,
   headerProps,
+  isMenuIn,
   isSelected = false,
   menuItems,
   menuLabel,
@@ -47,15 +50,10 @@ export const NavigationDrawer = ({
         {menuLabel}
       </Button>
       <Dialog
-        disableScrollLock
-        fullScreen
-        hideBackdrop
-        keepMounted={false}
+        {...DIALOG_PROPS}
         onClose={closeDrawers}
         open={open}
-        PaperProps={{ elevation: 0 }}
         TransitionComponent={Slide}
-        transitionDuration={300}
       >
         <AppBar component="div" elevation={1}>
           <Toolbar onClose={closeDrawers} {...headerProps} />
@@ -72,6 +70,7 @@ export const NavigationDrawer = ({
           <Navigation
             closeAncestor={closeDrawers}
             headerProps={headerProps}
+            isMenuIn={isMenuIn}
             links={menuItems}
             pathname={pathname}
           />

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/common/constants.ts

@@ -1,23 +1,15 @@
-import { MenuProps as MMenuProps } from "@mui/material";
+import { PopperProps as MPopperProps } from "@mui/material";
 
-export const MENU_ANCHOR_ORIGIN_LEFT_BOTTOM: MMenuProps["anchorOrigin"] = {
-  horizontal: "left",
-  vertical: "bottom",
-};
-
-export const MENU_ANCHOR_ORIGIN_RIGHT_TOP: MMenuProps["anchorOrigin"] = {
-  horizontal: "right",
-  vertical: "top",
-};
-
-export const MENU_PROPS: Partial<MMenuProps> = {
-  slotProps: {
-    paper: {
-      variant: "menu",
+export const POPPER_PROPS: Partial<MPopperProps> = {
+  modifiers: [
+    {
+      name: "flip",
+      options: {
+        padding: 16,
+      },
     },
-  },
-  transformOrigin: {
-    horizontal: "left",
-    vertical: "top",
-  },
+  ],
+  placement: "bottom-start",
+  role: "presentation",
+  transition: true,
 };