fix: fix cookie banner color (#239) (#251)

Co-authored-by: Fran McDade <[email protected]>

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

@@ -1,10 +1,10 @@
 import React from "react";
-import { BaseComponentProps } from "../../../../../../../../theme/common/types";
 import {
   ImageSrc,
   StaticImage,
 } from "../../../../../../../common/StaticImage/staticImage";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
+import { BaseComponentProps } from "../../../../../../../types";
 import { StyledLink } from "./logo.styles";
 
 export interface LogoProps extends BaseComponentProps {

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

@@ -6,9 +6,9 @@ import {
 import NLink from "next/link";
 import React, { ReactNode } from "react";
 import { isValidUrl } from "../../../../common/utils";
-import { BaseComponentProps } from "../../../../theme/common/types";
 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,

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,
+  },
+};

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

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

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,
+  };
+};

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,
+};

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

@@ -1,29 +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;
-    }
   }
 
   .MuiAlert-action {

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 { BaseComponentProps } from "../../../../../theme/common/types";
-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 BaseComponentProps, MAlertProps {
+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>
-  );
-}

src/components/common/Breadcrumbs/breadcrumbs.tsx

@@ -2,7 +2,7 @@ import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded";
 import { Link, Breadcrumbs as MBreadcrumbs, Typography } from "@mui/material";
 import NLink from "next/link";
 import React, { ReactNode } from "react";
-import { BaseComponentProps } from "../../../theme/common/types";
+import { BaseComponentProps } from "../../types";
 
 export interface Breadcrumb {
   path: string;

src/components/types.ts

@@ -0,0 +1,3 @@
+export interface BaseComponentProps {
+  className?: string;
+}

src/hooks/useLocalStorage/useLocalStorage.ts

@@ -6,8 +6,8 @@ import { getLocalStorage } from "./common/utils";
  * @param key - Local storage key.
  * @returns local storage value.
  */
-export function useLocalStorage(key: string): string | null {
-  const [value, setValue] = useState<string | null>(null);
+export function useLocalStorage(key: string): string | null | undefined {
+  const [value, setValue] = useState<string | null>();
 
   useEffect(() => {
     setValue(getLocalStorage(key));

src/styles/common/mui/alert.ts

@@ -0,0 +1,24 @@
+import { AlertProps } from "@mui/material";
+
+export const COLOR: Record<string, AlertProps["color"]> = {
+  ERROR: "error",
+  INFO: "info",
+  INK: "ink",
+  PRIMARY: "primary",
+  SMOKE: "smoke",
+  SUCCESS: "success",
+  WARNING: "warning",
+};
+
+export const SEVERITY: Record<string, AlertProps["severity"]> = {
+  ERROR: "error",
+  INFO: "info",
+  SUCCESS: "success",
+  WARNING: "warning",
+};
+
+export const VARIANT: Record<string, AlertProps["variant"]> = {
+  FILLED: "filled",
+  OUTLINED: "outlined",
+  STANDARD: "standard",
+};

src/styles/common/mui/icon.ts

@@ -0,0 +1,8 @@
+import { IconProps } from "@mui/material";
+
+export const FONT_SIZE: Record<string, IconProps["fontSize"]> = {
+  INHERIT: "inherit",
+  LARGE: "large",
+  MEDIUM: "medium",
+  SMALL: "small",
+};