@databiosphere/findable-ui 13.0.1 → 15.0.0

package/src/components/Layout/components/Footer/components/VersionInfo/versionInfo.styles.ts

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+import { Chip } from "@mui/material";
+import { inkLight } from "../../../../../../styles/common/mixins/colors";
+
+export const StyledChip = styled(Chip)`
+  border-radius: 4px;
+  .MuiChip-label {
+    color: ${inkLight};
+  }
+`;

package/src/components/Layout/components/Footer/components/VersionInfo/versionInfo.tsx

@@ -0,0 +1,31 @@
+import { Tooltip } from "@mui/material";
+import React from "react";
+import { BaseComponentProps } from "../../../../../types";
+import { Title } from "./components/Tooltip/components/Title/title";
+import { CHIP_PROPS, TOOLTIP_PROPS } from "./constants";
+import { VersionInfoProps } from "./types";
+
+import { getLabel } from "./utils";
+import { StyledChip } from "./versionInfo.styles";
+
+export const VersionInfo = ({
+  chipProps,
+  className,
+  tooltipProps,
+  versionInfo,
+}: BaseComponentProps & VersionInfoProps): JSX.Element | null => {
+  return (
+    <Tooltip
+      {...TOOLTIP_PROPS}
+      title={<Title versionInfo={versionInfo} />}
+      {...tooltipProps}
+    >
+      <StyledChip
+        {...CHIP_PROPS}
+        className={className}
+        label={getLabel(versionInfo)}
+        {...chipProps}
+      />
+    </Tooltip>
+  );
+};

package/src/components/Layout/components/Footer/footer.tsx

@@ -6,10 +6,11 @@ import { NavLinkItem } from "../Header/components/Content/components/Navigation/
 import { AppBar, Link, Links, Socials } from "./footer.styles";
 
 export interface FooterProps {
-  Branding: ReactNode;
+  Branding?: ReactNode;
   className?: string;
   navLinks?: NavLinkItem[];
   socials?: Social[];
+  versionInfo?: ReactNode;
 }
 
 export const Footer = ({
@@ -17,6 +18,7 @@ export const Footer = ({
   className,
   navLinks,
   socials,
+  versionInfo,
 }: FooterProps): JSX.Element => {
   return (
     <AppBar
@@ -27,7 +29,7 @@ export const Footer = ({
     >
       <Toolbar variant="dense">
         {Branding}
-        {(navLinks || socials) && (
+        {(navLinks || socials || versionInfo) && (
           <Links>
             {navLinks &&
               navLinks.map(({ label, target = ANCHOR_TARGET.SELF, url }, i) => (
@@ -39,6 +41,7 @@ export const Footer = ({
                 />
               ))}
             {socials && <Socials buttonSize="small" socials={socials} />}
+            {versionInfo}
           </Links>
         )}
       </Toolbar>

package/src/components/Layout/components/Header/components/Content/components/Logo/logo.styles.ts

@@ -4,7 +4,6 @@ import { Link } from "../../../../../../../Links/components/Link/link";
 export const StyledLink = styled(Link)`
   &.MuiLink-root {
     flex: none;
-    text-decoration: none !important;
     img {
       margin: 0;
     }

package/src/components/Layout/components/Header/components/Content/components/Logo/logo.tsx

@@ -4,11 +4,11 @@ import {
   StaticImage,
 } from "../../../../../../../common/StaticImage/staticImage";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
+import { BaseComponentProps } from "../../../../../../../types";
 import { StyledLink } from "./logo.styles";
 
-export interface LogoProps {
+export interface LogoProps extends BaseComponentProps {
   alt: string;
-  className?: string;
   height?: number;
   link: string;
   src: ImageSrc;
@@ -30,6 +30,7 @@ export const Logo = ({
       className={className}
       label={<StaticImage alt={alt} height={height} src={src} width={width} />}
       target={target}
+      underline="none"
       url={link}
     />
   );

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

@@ -8,6 +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 { BaseComponentProps } from "../../../types";
 import { ANCHOR_TARGET, REL_ATTRIBUTE, Url } from "../../common/entities";
 import {
   isClientSideNavigation,
@@ -16,11 +17,11 @@ import {
 } from "../../common/utils";
 import { ExploreViewLink } from "./components/ExploreViewLink/exploreViewLink";
 
-export interface LinkProps {
-  className?: string;
+export interface LinkProps
+  extends BaseComponentProps,
+    Omit<MLinkProps, "children" | "component"> {
   copyable?: boolean;
   label: ReactNode /* link label may be an element */;
-  noWrap?: MLinkProps["noWrap"];
   onClick?: () => void;
   target?: ANCHOR_TARGET;
   TypographyProps?: TypographyProps;
@@ -55,19 +56,19 @@ export const Link = ({
       /* Client-side navigation */
       return (
         <>
-          <NLink href={url} legacyBehavior passHref>
-            <MLink
-              className={className}
-              rel={REL_ATTRIBUTE.NO_OPENER}
-              noWrap={noWrap}
-              target={target || ANCHOR_TARGET.SELF}
-              onClick={onClick}
-              {...TypographyProps}
-              {...props}
-            >
-              {label}
-            </MLink>
-          </NLink>
+          <MLink
+            className={className}
+            component={NLink}
+            href={url}
+            noWrap={noWrap}
+            onClick={onClick}
+            rel={REL_ATTRIBUTE.NO_OPENER}
+            target={target || ANCHOR_TARGET.SELF}
+            {...TypographyProps}
+            {...props}
+          >
+            {label}
+          </MLink>
           {copyable && <CopyToClipboard copyStr={url} />}
         </>
       );

package/src/components/Support/components/SupportRequest/components/Dialog/dialog.styles.ts

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { Fab as MFab, Popover as MPopover } from "@mui/material";
+import { mediaTabletUp } from "../../../../../../styles/common/mixins/breakpoints";
 import { smokeMain } from "../../../../../../styles/common/mixins/colors";
 import { shadows02 } from "../../../../../../styles/common/mixins/shadows";
 import { tabletUp } from "../../../../../../theme/common/breakpoints";
@@ -15,6 +16,10 @@ export const Fab = styled(MFab)<Props>`
   position: fixed;
   right: 16px;
   z-index: ${({ open }) => (open ? 1350 : 1050)}; // Above backdrop component.
+
+  ${mediaTabletUp} {
+    bottom: 72px;
+  }
 `;
 
 export const Popover = styled(MPopover)`

package/src/components/Support/components/ViewSupport/viewSupport.styles.ts

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { mediaTabletUp } from "../../../../styles/common/mixins/breakpoints";
 import {
   primaryDark,
   primaryMain,
@@ -27,4 +28,8 @@ export const Fab = styled("a")`
   &:hover {
     background-color: ${primaryDark};
   }
+
+  ${mediaTabletUp} {
+    bottom: 72px;
+  }
 `;

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

@@ -344,7 +344,6 @@ export function getTableStatePagination(
  * @returns list of headers.
  */
 function getHeadersTableData<T extends RowData>(rows: Row<T>[]): TableData[] {
-  console.log(rows[0].getAllCells());
   return rows[0]
     .getAllCells()
     .filter((cell) => cell.column.id !== ACCESSOR_KEYS.SELECT)

package/src/components/common/Alert/alert.styles.ts

@@ -1,28 +1,25 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { TABLET } from "../../../theme/common/breakpoints";
-import { Alert } from "./alert";
+import { Alert } from "@mui/material";
+import { SIZE } from "../../../styles/common/constants/size";
+import {
+  textBody4002Lines,
+  textBodyLarge500,
+} from "../../../styles/common/mixins/fonts";
 
-/**
- * Flat alert - typically used when in full stretch or full "bleed" across a container.
- * e.g. the entire width of mobile viewports.
- */
-export const FlatAlert = styled(Alert)`
-  border-left: none;
-  border-radius: 0;
-  border-right: none;
-  box-shadow: none;
-`;
-
-/* eslint-disable valid-jsdoc -- disable require param */
-/**
- * Fluid alert - typically used to transition between flat paper (mobile) and rounded paper (tablet or desktop).
- */
-/* eslint-enable valid-jsdoc -- disable require param */
-export const FluidAlert = styled(Alert)`
-  ${({ theme }) => theme.breakpoints.down(TABLET)} {
-    border-left: none;
-    border-radius: 0;
-    border-right: none;
-    box-shadow: none;
-  }
+export const StyledAlert = styled(Alert)`
+  ${(props) =>
+    props.size === SIZE.LARGE &&
+    css`
+      padding: 20px;
+      .MuiAlert-icon {
+        padding: 2px 0;
+      }
+      .MuiAlert-message {
+        ${textBody4002Lines(props)};
+        .MuiAlertTitle-root {
+          ${textBodyLarge500(props)};
+        }
+      }
+    `}
 `;

package/src/components/common/Alert/alert.tsx

@@ -1,39 +1,18 @@
-import {
-  AlertTitle,
-  Alert as MAlert,
-  AlertProps as MAlertProps,
-} from "@mui/material";
-import React, { ReactNode } from "react";
+import { AlertProps } from "@mui/material";
+import React, { forwardRef } from "react";
+import { BaseComponentProps } from "../../types";
+import { StyledAlert } from "./alert.styles";
 
-export interface AlertProps {
-  children?: ReactNode;
-  className?: string;
-  color?: MAlertProps["color"];
-  icon?: MAlertProps["icon"];
-  severity: MAlertProps["severity"];
-  title?: ReactNode;
-  variant?: MAlertProps["variant"];
-}
-
-export const Alert = ({
-  children,
-  className,
-  color,
-  icon,
-  severity,
-  title,
-  variant = "standard",
-}: AlertProps): JSX.Element => {
+export const Alert = forwardRef<
+  HTMLDivElement,
+  AlertProps & BaseComponentProps
+>(function Alert(
+  { children, className, ...props }: AlertProps & BaseComponentProps,
+  ref
+): JSX.Element {
   return (
-    <MAlert
-      className={className}
-      color={color}
-      icon={icon}
-      severity={severity}
-      variant={variant}
-    >
-      {title && <AlertTitle>{title}</AlertTitle>}
+    <StyledAlert className={className} ref={ref} {...props}>
       {children}
-    </MAlert>
+    </StyledAlert>
   );
-};
+});

package/src/components/common/Alert/constants.ts

@@ -0,0 +1,29 @@
+import { AlertProps } from "@mui/material";
+import { COLOR, SEVERITY, VARIANT } from "../../../styles/common/mui/alert";
+
+export const ALERT_PROPS: Record<string, Partial<AlertProps>> = {
+  FILLED_INK: {
+    color: COLOR.INK,
+    variant: VARIANT.FILLED,
+  },
+  FILLED_PRIMARY: {
+    color: COLOR.PRIMARY,
+    variant: VARIANT.FILLED,
+  },
+  FILLED_SMOKE: {
+    color: COLOR.SMOKE,
+    variant: VARIANT.FILLED,
+  },
+  STANDARD_ERROR: {
+    severity: SEVERITY.ERROR,
+  },
+  STANDARD_INFO: {
+    severity: SEVERITY.INFO,
+  },
+  STANDARD_SUCCESS: {
+    severity: SEVERITY.SUCCESS,
+  },
+  STANDARD_WARNING: {
+    severity: SEVERITY.WARNING,
+  },
+};

package/src/components/common/Alert/hooks/useTransition/types.ts

@@ -0,0 +1,5 @@
+export interface UseTransition {
+  isIn: boolean;
+  onEnter: () => void;
+  onExit: () => void;
+}

package/src/components/common/Alert/hooks/useTransition/useTransition.ts

@@ -0,0 +1,25 @@
+import { useCallback, useState } from "react";
+import { UseTransition } from "./types";
+
+/**
+ * Hook to manage transition state for alert component wrapped in a transition component.
+ * @param initialState - Initial state of the transition.
+ * @returns transition state and handlers.
+ */
+export const useTransition = (initialState?: boolean): UseTransition => {
+  const [isIn, setIsIn] = useState<boolean>(initialState || false);
+
+  const onEnter = useCallback((): void => {
+    setIsIn(true);
+  }, []);
+
+  const onExit = useCallback((): void => {
+    setIsIn(false);
+  }, []);
+
+  return {
+    isIn,
+    onEnter,
+    onExit,
+  };
+};

package/src/components/common/Banner/banner.styles.ts

@@ -0,0 +1,29 @@
+import styled from "@emotion/styled";
+import { Alert } from "@mui/material";
+import { mediaDesktopUp } from "../../../styles/common/mixins/breakpoints";
+import { textBodySmall400 } from "../../../styles/common/mixins/fonts";
+
+export const StyledAlert = styled(Alert)`
+  justify-content: center;
+  padding: 8px 12px;
+  text-align: center;
+
+  .MuiAlert-message {
+    ${textBodySmall400};
+    align-self: center;
+    flex: 1;
+
+    .MuiLink-root {
+      color: inherit;
+    }
+  }
+
+  .MuiAlert-action {
+    margin: -8px;
+    padding: 0;
+  }
+
+  ${mediaDesktopUp} {
+    padding: 8px 16px;
+  }
+`;

package/src/components/common/Banner/banner.tsx

@@ -1,22 +1,15 @@
-import { Alert as MAlert, AlertProps as MAlertProps } from "@mui/material";
-import React, { forwardRef, ReactNode } from "react";
+import { AlertProps } from "@mui/material";
+import React, { forwardRef } from "react";
+import { BaseComponentProps } from "../../types";
+import { StyledAlert } from "./banner.styles";
+import { ALERT_PROPS } from "./constants";
 
-export interface BannerProps extends MAlertProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
-  {
-    children,
-    className,
-    ...props /* Spread props to allow for Mui AlertProps specific prop overrides. */
-  }: BannerProps,
+export const Banner = forwardRef<
+  HTMLDivElement,
+  AlertProps & BaseComponentProps
+>(function Alert(
+  { ...props }: AlertProps & BaseComponentProps,
   ref
 ): JSX.Element {
-  return (
-    <MAlert className={className} ref={ref} {...props}>
-      {children}
-    </MAlert>
-  );
+  return <StyledAlert {...ALERT_PROPS} ref={ref} {...props} />;
 });

package/src/components/common/Banner/components/CookieBanner/constants.ts

@@ -0,0 +1,9 @@
+import { AlertProps } from "@mui/material";
+import { COLOR, VARIANT } from "../../../../../styles/common/mui/alert";
+
+export const ALERT_PROPS: Partial<AlertProps> = {
+  color: COLOR.INK,
+  elevation: 2,
+  icon: false,
+  variant: VARIANT.FILLED,
+};

package/src/components/common/Banner/components/CookieBanner/cookieBanner.styles.ts

@@ -1,34 +1,20 @@
 import styled from "@emotion/styled";
+import { Alert } from "@mui/material";
 import { mediaTabletUp } from "../../../../../styles/common/mixins/breakpoints";
-import { white } from "../../../../../styles/common/mixins/colors";
 import { textBody400 } from "../../../../../styles/common/mixins/fonts";
-import { shadows02 } from "../../../../../styles/common/mixins/shadows";
-import { Banner } from "../../banner";
 
-export const CookieBanner = styled(Banner)`
+export const StyledAlert = styled(Alert)`
   bottom: 0;
-  box-shadow: ${shadows02};
-  color: ${white};
   flex-direction: column;
   gap: 16px;
   left: 0;
   margin: 8px;
-  padding: 16px;
   position: fixed;
   width: calc(100vw - 16px);
   z-index: 1100; // Above support fab, below support form.
 
   .MuiAlert-message {
     ${textBody400};
-
-    .MuiLink-root {
-      color: inherit;
-      text-decoration: underline;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
   }
 
   .MuiAlert-action {

package/src/components/common/Banner/components/CookieBanner/cookieBanner.tsx

@@ -1,14 +1,16 @@
-import { ButtonProps, AlertProps as MAlertProps } from "@mui/material";
-import React, { forwardRef, Fragment, ReactNode } from "react";
+import { AlertProps, Button, Fade } from "@mui/material";
+import React, { Fragment, ReactNode, useEffect } from "react";
 import { FLAG } from "../../../../../hooks/useFeatureFlag/common/entities";
 import { setLocalStorage } from "../../../../../hooks/useLocalStorage/common/utils";
 import { useLocalStorage } from "../../../../../hooks/useLocalStorage/useLocalStorage";
-import { ButtonPrimary } from "../../../Button/components/ButtonPrimary/buttonPrimary";
-import { DismissibleBanner } from "../DismissibleBanner/dismissibleBanner";
-import { CookieBanner as Banner } from "./cookieBanner.styles";
+import { BaseComponentProps } from "../../../../types";
+import { useTransition } from "../../../Alert/hooks/useTransition/useTransition";
+import { ALERT_PROPS } from "./constants";
+import { StyledAlert } from "./cookieBanner.styles";
 
-export interface CookieBannerProps extends MAlertProps {
-  className?: string;
+export interface CookieBannerProps
+  extends Omit<AlertProps, "children">,
+    BaseComponentProps {
   localStorageKey: string;
   message?: ReactNode;
   secondaryAction?: ReactNode;
@@ -20,66 +22,36 @@ export const CookieBanner = ({
   message,
   secondaryAction,
 }: CookieBannerProps): JSX.Element => {
+  const { isIn, onEnter, onExit } = useTransition();
   const localStorage = useLocalStorage(localStorageKey);
-  const isCookieAccepted = localStorage === FLAG.TRUE;
 
-  // Callback fired when the banner requests to be closed.
-  const onDismiss = (): void => {
-    setLocalStorage(localStorageKey, FLAG.TRUE);
-  };
+  useEffect(() => {
+    if (localStorage === null) onEnter();
+  }, [localStorage, onEnter]);
 
   return (
-    <DismissibleBanner
-      Alert={Alert}
-      className={className}
-      onDismiss={onDismiss}
-      open={!isCookieAccepted}
-      slots={{
-        closeButton: (props) => renderCloseButton(props, secondaryAction),
-      }}
-    >
-      {message}
-    </DismissibleBanner>
+    <Fade in={isIn} unmountOnExit>
+      <StyledAlert
+        {...ALERT_PROPS}
+        action={
+          <Fragment>
+            <Button
+              color="primary"
+              onClick={(): void => {
+                setLocalStorage(localStorageKey, FLAG.TRUE);
+                onExit();
+              }}
+              variant="contained"
+            >
+              Ok, Got It
+            </Button>
+            {secondaryAction}
+          </Fragment>
+        }
+        className={className}
+      >
+        {message}
+      </StyledAlert>
+    </Fade>
   );
 };
-
-/**
- * Return the cookie banner alert.
- * @param props - Alert props e.g. "onClick" to close banner.
- * @returns alert element.
- */
-const Alert = forwardRef<HTMLDivElement, MAlertProps>(function Alert(
-  { ...props },
-  ref
-): JSX.Element {
-  return (
-    <Banner
-      color="ink"
-      elevation={2}
-      icon={false}
-      ref={ref}
-      variant="filled"
-      {...props}
-    >
-      {props.children}
-    </Banner>
-  );
-});
-
-/**
- * Returns the close action component(s).
- * @param buttonProps - Button props e.g. "onClick" to close banner.
- * @param secondaryAction - Secondary action component.
- * @returns close button element(s).
- */
-function renderCloseButton(
-  buttonProps: ButtonProps,
-  secondaryAction?: ReactNode
-): JSX.Element {
-  return (
-    <Fragment>
-      <ButtonPrimary onClick={buttonProps.onClick}>Ok, Got It</ButtonPrimary>
-      {secondaryAction}
-    </Fragment>
-  );
-}

package/src/components/common/Banner/components/SessionTimeout/sessionTimeout.tsx

@@ -1,26 +1,21 @@
-import { AlertProps as MAlertProps } from "@mui/material";
-import React, { Fragment, ReactNode } from "react";
+import { AlertProps, Fade } from "@mui/material";
+import React from "react";
 import { useSessionTimeout } from "../../../../../hooks/useSessionTimeout";
-import { Banner } from "./sessionTimeout.styles";
-
-export interface SessionTimeoutProps extends Omit<MAlertProps, "title"> {
-  className?: string;
-  title?: ReactNode;
-}
+import { BaseComponentProps, ContentProps } from "../../../../types";
+import { Banner } from "../../banner";
 
 export const SessionTimeout = ({
+  children,
   className,
-  title = "For your security, you have been logged out due to 15 minutes of inactivity.",
+  content,
   ...props
-}: SessionTimeoutProps): JSX.Element => {
+}: AlertProps & BaseComponentProps & ContentProps): JSX.Element => {
   const { clearSessionTimeout, isSessionTimeout } = useSessionTimeout();
   return (
-    <Fragment>
-      {isSessionTimeout && (
-        <Banner className={className} onClose={clearSessionTimeout} {...props}>
-          {title}
-        </Banner>
-      )}
-    </Fragment>
+    <Fade in={isSessionTimeout} unmountOnExit>
+      <Banner className={className} onClose={clearSessionTimeout} {...props}>
+        {content || children}
+      </Banner>
+    </Fade>
   );
 };