feat: create dismissible cookie banner (#543)

packages/data-explorer-ui/src/components/common/Banner/banner.tsx

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

packages/data-explorer-ui/src/components/common/Banner/components/CookieBanner/cookieBanner.styles.ts

@@ -0,0 +1,48 @@
+import styled from "@emotion/styled";
+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)`
+  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 {
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: flex-start;
+    margin: 0;
+    padding: 0;
+  }
+
+  ${mediaTabletUp} {
+    box-sizing: content-box;
+    margin: 16px;
+    max-width: 400px;
+    width: unset;
+  }
+`;

packages/data-explorer-ui/src/components/common/Banner/components/CookieBanner/cookieBanner.tsx

@@ -0,0 +1,86 @@
+import { AlertProps as MAlertProps, ButtonProps } from "@mui/material";
+import React, { forwardRef, Fragment, ReactNode } from "react";
+import { FLAG } from "../../../../../hooks/useFeatureFlag/common/entities";
+import {
+  getLocalStorage,
+  setLocalStorage,
+} from "../../../../../hooks/useFeatureFlag/common/utils";
+import { ButtonPrimary } from "../../../Button/components/ButtonPrimary/buttonPrimary";
+import { DismissibleBanner } from "../DismissibleBanner/dismissibleBanner";
+import { CookieBanner as Banner } from "./cookieBanner.styles";
+
+export interface CookieBannerProps extends MAlertProps {
+  className?: string;
+  localStorageKey: string;
+  message?: ReactNode;
+  secondaryAction?: ReactNode;
+}
+
+export const CookieBanner = ({
+  className,
+  localStorageKey,
+  message,
+  secondaryAction,
+}: CookieBannerProps): JSX.Element => {
+  const isCookieAccepted = getLocalStorage(localStorageKey) === FLAG.TRUE;
+
+  // Callback fired when the banner requests to be closed.
+  const onDismiss = (): void => {
+    setLocalStorage(localStorageKey, FLAG.TRUE);
+  };
+
+  return (
+    <DismissibleBanner
+      Alert={Alert}
+      className={className}
+      onDismiss={onDismiss}
+      open={!isCookieAccepted}
+      slots={{
+        closeButton: (props) => renderCloseButton(props, secondaryAction),
+      }}
+    >
+      {message}
+    </DismissibleBanner>
+  );
+};
+
+/**
+ * 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>
+  );
+}

packages/data-explorer-ui/src/components/common/Banner/components/DismissibleBanner/dismissibleBanner.tsx

@@ -0,0 +1,39 @@
+import {
+  Alert as MAlert,
+  AlertProps as MAlertProps,
+  Fade,
+} from "@mui/material";
+import React, { ElementType, ReactNode, useState } from "react";
+
+export interface CookieBannerProps extends MAlertProps {
+  Alert?: ElementType;
+  children: ReactNode;
+  className?: string;
+  onDismiss?: () => void;
+  open: boolean;
+}
+
+export const DismissibleBanner = ({
+  Alert = MAlert /* Requires forwardRef to be used as a child of Fade. */,
+  className,
+  children,
+  onDismiss,
+  open,
+  ...props /* Spread props to allow for Mui AlertProps specific prop overrides. */
+}: CookieBannerProps): JSX.Element => {
+  const [isIn, setIsIn] = useState<boolean>(open);
+
+  // Callback fired when the component requests to be closed.
+  const onClose = (): void => {
+    onDismiss?.();
+    setIsIn(false);
+  };
+
+  return (
+    <Fade in={isIn} unmountOnExit>
+      <Alert className={className} onClose={onClose} {...props}>
+        {children}
+      </Alert>
+    </Fade>
+  );
+};

packages/data-explorer-ui/src/components/common/Button/components/ButtonOutline/buttonOutline.styles.ts

@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+import { white } from "../../../../../styles/common/mixins/colors";
+import { alpha32, alpha64 } from "../../../../../theme/common/palette";
+import { Button } from "../../button";
+
+export const ButtonOutline = styled(Button)`
+  box-shadow: inset 0 0 0 1px ${white}${alpha32};
+  color: ${white};
+
+  &:hover {
+    box-shadow: inset 0 0 0 1px ${white}${alpha64};
+  }
+
+  &:disabled {
+    box-shadow: inset 0 0 0 1px ${white}${alpha32};
+    color: ${white};
+  }
+`;

packages/data-explorer-ui/src/components/common/Button/components/ButtonOutline/buttonOutline.tsx

@@ -0,0 +1,23 @@
+import React, { forwardRef } from "react";
+import { ButtonProps } from "../../button";
+import { ButtonOutline as Button } from "./buttonOutline.styles";
+
+export const ButtonOutline = forwardRef<HTMLButtonElement, ButtonProps>(
+  function ButtonOutline(
+    {
+      className,
+      ...props /* Spread props to allow for Mui ButtonProps specific prop overrides e.g. "onClick". */
+    }: ButtonProps,
+    ref
+  ): JSX.Element {
+    return (
+      <Button
+        className={className}
+        color="secondary"
+        ref={ref}
+        variant="outlined"
+        {...props}
+      />
+    );
+  }
+);

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

@@ -20,6 +20,7 @@ import { GridTrackSize } from "../src/config/entities";
  */
 declare module "@mui/material/Alert" {
   interface AlertPropsColorOverrides {
+    ink: true;
     primary: true;
   }