@databiosphere/findable-ui 8.0.2 → 9.0.0

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

@@ -11,7 +11,10 @@ export const AppBar = styled(MAppBar)`
   }
 
   .MuiToolbar-root {
+    display: grid;
     gap: 16px;
+    grid-template-areas: "left center right";
+    grid-template-columns: 1fr auto 1fr;
     height: ${HEADER_HEIGHT}px;
     min-height: unset;
   }
@@ -26,6 +29,7 @@ const group = css`
 export const Left = styled.div`
   ${group};
   gap: 16px;
+  grid-area: left;
   justify-content: flex-start;
 
   .MuiButton-navPrimary {
@@ -37,10 +41,13 @@ export const Left = styled.div`
 
 export const Center = styled.div`
   ${group};
+  grid-area: center;
   justify-content: center;
 `;
 
 export const Right = styled.div`
   ${group};
+  gap: 8px;
+  grid-area: right;
   justify-content: flex-end;
 `;

package/src/components/Layout/components/Nav/nav.styles.ts

@@ -51,5 +51,11 @@ export const List = styled(MList)`
         }
       }
     }
+
+    &:first-of-type {
+      .MuiListItemButton-root.Mui-disabled {
+        margin-top: 0;
+      }
+    }
   }
 `;

package/src/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.styles.ts

@@ -1,7 +1,11 @@
 import styled from "@emotion/styled";
 import { Popover as MPopover } from "@mui/material";
 import { mediaDesktopSmallDown } from "../../../../../../styles/common/mixins/breakpoints";
-import { smokeLight } from "../../../../../../styles/common/mixins/colors";
+import {
+  smokeLight,
+  white,
+} from "../../../../../../styles/common/mixins/colors";
+import { IconButton as DXIconButton } from "../../../../../common/IconButton/iconButton";
 
 export const TemporarySidebar = styled(MPopover)`
   &.MuiPopover-root {
@@ -17,3 +21,10 @@ export const TemporarySidebar = styled(MPopover)`
     }
   }
 `;
+
+export const IconButton = styled(DXIconButton)`
+  color: ${white};
+  left: calc(100% + 4px);
+  position: absolute;
+  top: 4px;
+`;

package/src/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.tsx

@@ -1,9 +1,8 @@
 import { CloseRounded } from "@mui/icons-material";
 import { PopoverPosition, PopoverProps } from "@mui/material";
 import React, { ReactNode } from "react";
-import { CloseDrawerIconButton } from "../../../../../common/IconButton/iconButton.styles";
 import { DrawerTransition } from "../../../../../Filter/components/Filter/components/DrawerTransition/drawerTransition";
-import { TemporarySidebar } from "./sidebarDrawer.styles";
+import { IconButton, TemporarySidebar } from "./sidebarDrawer.styles";
 
 const DEFAULT_POSITION: PopoverPosition = { left: 0, top: 0 };
 const DRAWER_SLOT_PROPS: PopoverProps["slotProps"] = {
@@ -34,11 +33,7 @@ export const SidebarDrawer = ({
       TransitionComponent={DrawerTransition}
       transitionDuration={drawerOpen ? 250 : 300}
     >
-      <CloseDrawerIconButton
-        Icon={CloseRounded}
-        onClick={onDrawerClose}
-        size="medium"
-      />
+      <IconButton Icon={CloseRounded} onClick={onDrawerClose} size="medium" />
       {children}
     </TemporarySidebar>
   );

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

@@ -11,7 +11,7 @@ export const SidebarPositioner = styled("div")<Props>`
   padding: 16px 0;
 
   ${mediaDesktopSmallUp} {
-    height: ${({ headerHeight }) => `calc(100vh - ${headerHeight}px)`};
+    max-height: 100vh;
     overflow: auto;
     padding: ${({ headerHeight }) => headerHeight}px 0 0;
     position: sticky;

package/src/components/Layout/components/Sidebar/sidebar.styles.ts

@@ -1,8 +1,9 @@
 import styled from "@emotion/styled";
+import { smokeMain } from "../../../../styles/common/mixins/colors";
 
 export const Sidebar = styled.div`
   align-self: stretch;
-  border-right: 1px solid ${({ theme }) => theme.palette.smoke.main};
+  border-right: 1px solid ${smokeMain};
   box-sizing: content-box;
   width: 264px;
 `;

package/src/components/Links/common/entities.ts

@@ -5,6 +5,11 @@ export enum ANCHOR_TARGET {
   SELF = "_self",
 }
 
+export enum REL_ATTRIBUTE {
+  NO_OPENER = "noopener",
+  NO_OPENER_NO_REFERRER = "noopener noreferrer",
+}
+
 export type StrictUrlObject = Omit<UrlObject, "href" | "query"> & {
   href: string;
   query: string;

package/src/components/Links/common/utils.ts

@@ -7,7 +7,7 @@ import { Url, UrlObjectWithHrefAndQuery } from "./entities";
  * @returns true if the given link is an internal link.
  */
 export function isClientSideNavigation(link: string): boolean {
-  return /^\/(?!\/)/.test(link);
+  return /^\/(?!\/)|^#/.test(link);
 }
 
 /**

package/src/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.tsx

@@ -10,6 +10,7 @@ import {
 } from "../../../../../../providers/exploreState";
 import {
   ANCHOR_TARGET,
+  REL_ATTRIBUTE,
   UrlObjectWithHrefAndQuery,
 } from "../../../../common/entities";
 import { LinkProps } from "../../link";
@@ -51,7 +52,7 @@ export const ExploreViewLink = ({
       className={className}
       href={url.href}
       onClick={onNavigate}
-      rel="noopener"
+      rel={REL_ATTRIBUTE.NO_OPENER}
       target={target}
     >
       {label}

package/src/components/Links/components/Link/link.tsx

@@ -8,7 +8,7 @@ import React, { ReactNode } from "react";
 import { isValidUrl } from "../../../../common/utils";
 import { CopyToClipboard } from "../../../common/CopyToClipboard/copyToClipboard";
 import { TypographyProps } from "../../../common/Typography/common/entities";
-import { ANCHOR_TARGET, Url } from "../../common/entities";
+import { ANCHOR_TARGET, REL_ATTRIBUTE, Url } from "../../common/entities";
 import {
   isClientSideNavigation,
   isURLObjectWithHrefAndQuery,
@@ -36,6 +36,7 @@ export const Link = ({
   target,
   TypographyProps,
   url,
+  ...props /* Spread props to allow for specific MuiLink prop overrides. */
 }: LinkProps): JSX.Element => {
   if (isURLObjectWithHrefAndQuery(url)) {
     /* Internal navigation - explore link */
@@ -57,11 +58,12 @@ export const Link = ({
           <NLink href={url} legacyBehavior passHref>
             <MLink
               className={className}
-              rel="noopener"
+              rel={REL_ATTRIBUTE.NO_OPENER}
               noWrap={noWrap}
               target={target || ANCHOR_TARGET.SELF}
               onClick={onClick}
               {...TypographyProps}
+              {...props}
             >
               {label}
             </MLink>
@@ -79,9 +81,10 @@ export const Link = ({
             href={url}
             noWrap={noWrap}
             onClick={onClick}
-            rel="noopener noreferrer"
+            rel={REL_ATTRIBUTE.NO_OPENER_NO_REFERRER}
             target={target || ANCHOR_TARGET.BLANK}
             {...TypographyProps}
+            {...props}
           >
             {label}
           </MLink>
@@ -92,7 +95,12 @@ export const Link = ({
   }
   /* Invalid URL */
   return (
-    <MTypography component="span" variant="inherit" {...TypographyProps}>
+    <MTypography
+      component="span"
+      variant="inherit"
+      {...TypographyProps}
+      {...props}
+    >
       {label}
     </MTypography>
   );

package/src/components/Table/components/Pagination/pagination.tsx

@@ -2,7 +2,7 @@ import EastRoundedIcon from "@mui/icons-material/EastRounded";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import { Typography } from "@mui/material";
 import React from "react";
-import { IconButtonSecondary } from "../../../common/IconButton/iconButton.styles";
+import { IconButton } from "../../../common/IconButton/iconButton";
 import { Stack } from "../../../common/Stack/stack";
 import { Pagination as TablePagination } from "./pagination.styles";
 
@@ -32,12 +32,14 @@ export const Pagination = ({
         </Typography>
       </div>
       <Stack direction="row" gap={2}>
-        <IconButtonSecondary
+        <IconButton
+          color="secondary"
           disabled={!canPreviousPage}
           Icon={WestRoundedIcon}
           onClick={onPreviousPage}
         />
-        <IconButtonSecondary
+        <IconButton
+          color="secondary"
           disabled={!canNextPage}
           Icon={EastRoundedIcon}
           onClick={onNextPage}

package/src/components/common/Button/components/CallToActionButton/callToActionButton.tsx

@@ -1,6 +1,9 @@
 import NLink from "next/link";
 import React, { ElementType } from "react";
-import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../Links/common/utils";
 import { ButtonPrimary } from "../ButtonPrimary/buttonPrimary";
 
@@ -31,7 +34,7 @@ export const CallToActionButton = ({
         className={className}
         disabled={disabled}
         href="passHref"
-        rel="noopener"
+        rel={REL_ATTRIBUTE.NO_OPENER}
         target={target || ANCHOR_TARGET.SELF}
       >
         {label}
@@ -42,7 +45,7 @@ export const CallToActionButton = ({
       className={className}
       disabled={disabled}
       href={url}
-      rel="noopener noreferrer"
+      rel={REL_ATTRIBUTE.NO_OPENER_NO_REFERRER}
       target={target || ANCHOR_TARGET.BLANK}
     >
       {label}

package/src/components/common/Button/components/HelpIconButton/helpIconButton.tsx

@@ -1,7 +1,10 @@
 import { SvgIconProps } from "@mui/material";
 import Link from "next/link";
 import React from "react";
-import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../Links/common/utils";
 import { HelpIcon } from "../../../CustomIcon/components/HelpIcon/helpIcon";
 import { HelpIconButton as Button } from "./helpIconButton.styles";
@@ -22,7 +25,7 @@ export const HelpIconButton = ({
     <Link href={url} legacyBehavior passHref>
       <Button
         href="passHref"
-        rel="noopener"
+        rel={REL_ATTRIBUTE.NO_OPENER}
         target={target || ANCHOR_TARGET.SELF}
       >
         <HelpIcon fontSize={size} />
@@ -31,7 +34,7 @@ export const HelpIconButton = ({
   ) : (
     <Button
       href={url}
-      rel="noopener noreferrer"
+      rel={REL_ATTRIBUTE.NO_OPENER_NO_REFERRER}
       target={target || ANCHOR_TARGET.BLANK}
     >
       <HelpIcon fontSize={size} />

package/src/components/common/Card/components/CardActionArea/cardActionArea.tsx

@@ -1,7 +1,10 @@
 import { CardActionArea as MCardActionArea } from "@mui/material";
 import { useRouter } from "next/router";
 import React, { ReactNode } from "react";
-import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../Links/common/utils";
 
 export interface CardActionAreaProps {
@@ -22,7 +25,11 @@ export const CardActionArea = ({
       if (isClientSideNavigation(url)) {
         push(url);
       } else {
-        window.open(url, ANCHOR_TARGET.BLANK, "noopener noreferrer");
+        window.open(
+          url,
+          ANCHOR_TARGET.BLANK,
+          REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+        );
       }
     }
   };

package/src/components/common/IconButton/iconButton.styles.ts

@@ -2,7 +2,6 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { IconButton as MIconButton } from "@mui/material";
 import { smokeLightest } from "../../../styles/common/mixins/colors";
-import { IconButton } from "./iconButton";
 
 interface Props {
   open: boolean;
@@ -19,90 +18,3 @@ export const Button = styled(MIconButton, {
       }
     `}
 `;
-
-// Primary icon button.
-export const IconButtonPrimary = styled(IconButton)`
-  background-color: ${({ theme }) => theme.palette.primary.main};
-  box-shadow: 0 1px 0 0 ${({ theme }) => theme.palette.primary.dark};
-  color: ${({ theme }) => theme.palette.common.white};
-
-  // Medium sized primary icon button.
-  &.MuiIconButton-sizeMedium {
-    padding: 6px 8px; // Overrides medium sized button theme top and bottom padding.
-  }
-
-  &:active,
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.primary.dark};
-  }
-
-  &:active {
-    box-shadow: none;
-  }
-
-  &.Mui-disabled {
-    background-color: ${({ theme }) => theme.palette.primary.main};
-    color: ${({ theme }) => theme.palette.common.white};
-    opacity: 0.5;
-  }
-`;
-
-// Secondary icon button.
-export const IconButtonSecondary = styled(IconButton)`
-  background-color: ${({ theme }) => theme.palette.common.white};
-  box-shadow: inset 0 0 0 1px ${({ theme }) => theme.palette.smoke.dark},
-  0px 1px 0px 0px rgba(0, 0, 0, 0.08);
-  color: ${({ theme }) => theme.palette.ink.main};
-
-  &:active, &:hover {
-    background-color: ${({ theme }) => theme.palette.smoke.lightest};
-  }
-
-  &:active {
-    box-shadow: inset 0 0 0 1px ${({ theme }) => theme.palette.smoke.dark};
-  }
-
-  &:disabled {
-    color: inherit;
-    opacity: 0.5;
-  }
-}
-`;
-
-// Mock icon button.
-export const MockIconButtonPrimary = styled.span`
-  background-color: ${({ theme }) => theme.palette.primary.main};
-  border-radius: 4px;
-  box-shadow: 0 1px 0 0 ${({ theme }) => theme.palette.primary.dark};
-  color: ${({ theme }) => theme.palette.common.white};
-  display: flex;
-  flex: none;
-  height: 32px;
-  padding: 6px 8px;
-`;
-
-// Drawer backdrop close icon button.
-export const CloseDrawerIconButton = styled(IconButton)`
-  color: ${({ theme }) => theme.palette.common.white};
-  left: calc(100% + 4px);
-  position: absolute;
-  top: 4px;
-`;
-
-// Socials icon button.
-export const IconButtonSocials = styled(MIconButton)`
-  color: ${({ theme }) => theme.palette.ink.light};
-
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.smoke.light};
-  }
-` as typeof MIconButton;
-
-// Socials icon button - footer component.
-export const IconButtonSocialsFooter = styled(MIconButton)`
-  color: ${({ theme }) => theme.palette.ink.light};
-
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.smoke.main};
-  }
-` as typeof MIconButton;

package/src/components/common/Socials/socials.styles.ts

@@ -1,5 +1,15 @@
 import styled from "@emotion/styled";
+import { IconButton as MIconButton } from "@mui/material";
+import { inkLight, smokeLight } from "../../../styles/common/mixins/colors";
 
 export const Socials = styled.div`
   display: flex;
 `;
+
+export const IconButton = styled(MIconButton)`
+  color: ${inkLight};
+
+  &:hover {
+    background-color: ${smokeLight};
+  }
+` as typeof MIconButton;

package/src/components/common/Socials/socials.tsx

@@ -5,9 +5,11 @@ import React, {
   forwardRef,
   ReactNode,
 } from "react";
-import { ANCHOR_TARGET } from "../../Links/common/entities";
-import { IconButtonSocials } from "../IconButton/iconButton.styles";
-import { Socials as IconButtons } from "./socials.styles";
+import { ANCHOR_TARGET, REL_ATTRIBUTE } from "../../Links/common/entities";
+import {
+  IconButton as StyledIconButton,
+  Socials as StyledSocials,
+} from "./socials.styles";
 
 export interface Social {
   Icon: ElementType;
@@ -18,7 +20,7 @@ export interface Social {
 export interface SocialsProps {
   buttonSize?: MIconButtonProps["size"];
   className?: string;
-  IconButtonElType?: ElementType;
+  IconButton?: ElementType;
   socials: Social[];
   style?: CSSProperties; // Required for Fade component. See https://mui.com/material-ui/transitions/#child-requirement.
 }
@@ -28,26 +30,26 @@ export const Socials = forwardRef<HTMLDivElement, SocialsProps>(
     {
       buttonSize = "medium",
       className,
-      IconButtonElType = IconButtonSocials,
+      IconButton = StyledIconButton,
       socials,
       style,
     }: SocialsProps,
     ref
   ): JSX.Element {
     return (
-      <IconButtons className={className} ref={ref} style={style}>
+      <StyledSocials className={className} ref={ref} style={style}>
         {socials.map(({ Icon, url }, i) => (
-          <IconButtonElType
+          <IconButton
             key={i}
             href={url}
-            rel="noopener noreferrer"
+            rel={REL_ATTRIBUTE.NO_OPENER_NO_REFERRER}
             size={buttonSize}
             target={ANCHOR_TARGET.BLANK}
           >
             <Icon fontSize="small" />
-          </IconButtonElType>
+          </IconButton>
         ))}
-      </IconButtons>
+      </StyledSocials>
     );
   }
 );

package/src/hooks/useMenuWithPosition.ts

@@ -0,0 +1,49 @@
+import { MenuProps as MMenuProps } from "@mui/material";
+import { MouseEvent, useCallback, useMemo, useState } from "react";
+
+export interface UseMenuWithPosition {
+  anchorEl: MMenuProps["anchorEl"];
+  onClose: () => void;
+  onOpen: (event: MouseEvent<HTMLElement>) => void;
+  onToggleOpen: (event: MouseEvent<HTMLElement>) => void;
+  open: boolean;
+}
+
+/**
+ * Menu functionality for menu dropdown, with menu position.
+ * @returns menu functionality.
+ */
+export const useMenuWithPosition = (): UseMenuWithPosition => {
+  const [anchorEl, setAnchorEl] = useState<MMenuProps["anchorEl"]>(null);
+  const open = useMemo(() => Boolean(anchorEl), [anchorEl]);
+
+  // Closes header menu.
+  const onClose = useCallback((): void => {
+    setAnchorEl(null);
+  }, []);
+
+  // Opens header menu.
+  const onOpen = useCallback((event: MouseEvent<HTMLElement>): void => {
+    setAnchorEl(event.currentTarget);
+  }, []);
+
+  // Toggles menu open/close.
+  const onToggleOpen = useCallback(
+    (event: MouseEvent<HTMLElement>): void => {
+      if (open) {
+        setAnchorEl(null);
+      } else {
+        setAnchorEl(event.currentTarget);
+      }
+    },
+    [open]
+  );
+
+  return {
+    anchorEl,
+    onClose,
+    onOpen,
+    onToggleOpen,
+    open,
+  };
+};

package/src/theme/common/components.ts

@@ -23,6 +23,7 @@ import {
   TEXT_BODY_SMALL_400,
   TEXT_BODY_SMALL_500,
   TEXT_HEADING,
+  TEXT_HEADING_SMALL,
 } from "./typography";
 
 // Constants
@@ -427,6 +428,22 @@ export const MuiButton = (theme: Theme): Components["MuiButton"] => {
           },
         },
       },
+      {
+        props: {
+          variant: "backNav", // associated with "nav" variant.
+        },
+        style: {
+          ...theme.typography[TEXT_HEADING_SMALL],
+          color: theme.palette.ink.main,
+          minWidth: 0,
+          textTransform: "capitalize",
+          whiteSpace: "nowrap",
+          // eslint-disable-next-line sort-keys -- disabling key order for readability
+          "&:hover": {
+            backgroundColor: theme.palette.smoke.light,
+          },
+        },
+      },
       {
         props: {
           variant: "nav",
@@ -874,12 +891,54 @@ export const MuiIconButton = (theme: Theme): Components["MuiIconButton"] => {
       disableRipple: true,
     },
     styleOverrides: {
+      colorPrimary: {
+        backgroundColor: theme.palette.primary.main,
+        boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
+        color: theme.palette.common.white,
+        // eslint-disable-next-line sort-keys -- disabling key order for readability
+        "&.Mui-disabled": {
+          backgroundColor: theme.palette.primary.main,
+          color: theme.palette.common.white,
+          opacity: 0.5,
+        },
+        // eslint-disable-next-line sort-keys -- disabling key order for readability
+        "&:hover": {
+          backgroundColor: theme.palette.primary.dark,
+        },
+        // eslint-disable-next-line sort-keys -- disabling key order for readability
+        "&:active": {
+          backgroundColor: theme.palette.primary.dark,
+          boxShadow: "none",
+        },
+      },
+      colorSecondary: {
+        backgroundColor: theme.palette.common.white,
+        boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${black08}`,
+        color: theme.palette.ink.main,
+        // eslint-disable-next-line sort-keys -- disabling key order for readability
+        "&.Mui-disabled": {
+          color: "inherit",
+          opacity: 0.5,
+        },
+        // eslint-disable-next-line sort-keys -- disabling key order for readability
+        "&:hover": {
+          backgroundColor: theme.palette.smoke.lightest,
+        },
+        // eslint-disable-next-line sort-keys -- disabling key order for readability
+        "&:active": {
+          backgroundColor: theme.palette.smoke.lightest,
+          boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}`,
+        },
+      },
       root: {
         borderRadius: 4,
       },
       sizeLarge: {
         padding: 10,
       },
+      sizeMedium: {
+        padding: "6px 8px",
+      },
       sizeSmall: {
         padding: 6,
       },

package/types/data-explorer-ui.d.ts

@@ -60,6 +60,7 @@ declare module "@mui/material/styles" {
 declare module "@mui/material/Button" {
   interface ButtonPropsVariantOverrides {
     activeNav: true;
+    backNav: true;
     nav: true;
   }
 }

package/src/components/common/IconButton/components/LoadingIconButton/loadingIconButton.stories.tsx

@@ -1,15 +0,0 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
-import { LoadingIconButton } from "./loadingIconButton";
-
-export default {
-  component: LoadingIconButton,
-  title: "Components/Common/IconButton/Download",
-} as ComponentMeta<typeof LoadingIconButton>;
-
-const LoadingIconButtonTemplate: ComponentStory<
-  typeof LoadingIconButton
-> = () => <LoadingIconButton />;
-
-export const LoadingIconButtonStory = LoadingIconButtonTemplate.bind({});
-LoadingIconButtonStory.args = {};

package/src/components/common/IconButton/components/LoadingIconButton/loadingIconButton.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { LoadingIcon } from "../../../CustomIcon/components/LoadingIcon/loadingIcon";
-import { MockIconButtonPrimary } from "../../iconButton.styles";
-
-/**
- * Mock "loading" icon button - a placeholder element styled like a primary icon button without the use of a button element.
- */
-
-export const LoadingIconButton = (): JSX.Element => {
-  return (
-    <MockIconButtonPrimary>
-      <LoadingIcon fontSize="small" />
-    </MockIconButtonPrimary>
-  );
-};