@databiosphere/findable-ui 8.0.3 → 9.0.0

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>
-  );
-};