@databiosphere/findable-ui 13.0.1 → 14.0.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [14.0.0](https://github.com/DataBiosphere/findable-ui/compare/v13.0.1...v14.0.0) (2024-11-05)
+
+
+### ⚠ BREAKING CHANGES
+
+* update banner components ([#253](https://github.com/DataBiosphere/findable-ui/issues/253)) (#255)
+* simplify alert components ([#252](https://github.com/DataBiosphere/findable-ui/issues/252)) (#254)
+* fix mui error "cannot resolve @mui/utils/getReactNodeRef" ([#242](https://github.com/DataBiosphere/findable-ui/issues/242)) (#243)
+
+### Features
+
+* add 'testid' prop interface ([#247](https://github.com/DataBiosphere/findable-ui/issues/247)) ([#250](https://github.com/DataBiosphere/findable-ui/issues/250)) ([1e494e0](https://github.com/DataBiosphere/findable-ui/commit/1e494e0b7279035b820dcacf16efc4d1f55d7a1e))
+* added and updated index export tracking ([#222](https://github.com/DataBiosphere/findable-ui/issues/222)) ([#224](https://github.com/DataBiosphere/findable-ui/issues/224)) ([15e861d](https://github.com/DataBiosphere/findable-ui/commit/15e861de5a2411e5cbb9d24b137ef62ff48695c4))
+* remove unused titlecell component ([#248](https://github.com/DataBiosphere/findable-ui/issues/248)) ([#249](https://github.com/DataBiosphere/findable-ui/issues/249)) ([51a7c4f](https://github.com/DataBiosphere/findable-ui/commit/51a7c4f8877990dd4a7fef23ddce543e4913f885))
+* simplify alert components ([#252](https://github.com/DataBiosphere/findable-ui/issues/252)) ([#254](https://github.com/DataBiosphere/findable-ui/issues/254)) ([18f3e54](https://github.com/DataBiosphere/findable-ui/commit/18f3e54ef73bedd585b1c162fcabd0cbe74cc8bf))
+* update banner components ([#253](https://github.com/DataBiosphere/findable-ui/issues/253)) ([#255](https://github.com/DataBiosphere/findable-ui/issues/255)) ([d9c87c7](https://github.com/DataBiosphere/findable-ui/commit/d9c87c73c7b0e018c639c98ca8100b12112afe5d))
+* update mui link theme styles ([#245](https://github.com/DataBiosphere/findable-ui/issues/245)) ([#246](https://github.com/DataBiosphere/findable-ui/issues/246)) ([7f401b8](https://github.com/DataBiosphere/findable-ui/commit/7f401b8eba6c53daec2a40e825220e8506bc95b3))
+
+
+### Bug Fixes
+
+* fix cookie banner color ([#239](https://github.com/DataBiosphere/findable-ui/issues/239)) ([#251](https://github.com/DataBiosphere/findable-ui/issues/251)) ([54b2802](https://github.com/DataBiosphere/findable-ui/commit/54b2802ce83168c5f79860c2baf53c7148e19767))
+* fix mui error "cannot resolve @mui/utils/getReactNodeRef" ([#242](https://github.com/DataBiosphere/findable-ui/issues/242)) ([#243](https://github.com/DataBiosphere/findable-ui/issues/243)) ([4b832ac](https://github.com/DataBiosphere/findable-ui/commit/4b832acd7b18511781ce4046df9c4e9454896991))
+
 ## [13.0.1](https://github.com/DataBiosphere/findable-ui/compare/v13.0.0...v13.0.1) (2024-10-18)
 
 

package/lib/common/analytics/entities.d.ts

@@ -7,19 +7,18 @@ export declare enum EVENT_NAME {
     ENTITY_SELECTED = "entity_selected",
     ENTITY_TABLE_PAGINATED = "entity_table_paginated",
     ENTITY_TABLE_SORTED = "entity_table_sorted",
-    FILTER_SELECTED = "filter_selected"
+    FILTER_SELECTED = "filter_selected",
+    INDEX_ANALYZE_IN_TERRA_REQUESTED = "index_analyze_in_terra_requested",
+    INDEX_FILE_MANIFEST_REQUESTED = "index_file_manifest_requested"
 }
 /**
  * Set of analytics event parameters.
  */
 export declare enum EVENT_PARAM {
-    CATALOG = "catalog",
     COLUMN_NAME = "column_name",
-    CURRENT_QUERY = "current_query",
     ENTITY_NAME = "entity_name",
     FILTER_NAME = "filter_name",
     FILTER_VALUE = "filter_value",
-    INDEX = "index",
     PAGINATION_DIRECTION = "pagination_direction",
     SORT_DIRECTION = "sort_direction",
     TOOL_NAME = "tool_name"
@@ -43,9 +42,7 @@ export declare enum SORT_DIRECTION {
  */
 export type EventParams = {
     [EVENT_NAME.BULK_DOWNLOAD_REQUESTED]: {
-        [EVENT_PARAM.CATALOG]: string;
-        [EVENT_PARAM.CURRENT_QUERY]: string;
-        [EVENT_PARAM.INDEX]: string;
+        [EVENT_PARAM.ENTITY_NAME]: string;
         [EVENT_PARAM.TOOL_NAME]: string;
     };
     [EVENT_NAME.ENTITY_SELECTED]: {
@@ -64,4 +61,10 @@ export type EventParams = {
         [EVENT_PARAM.FILTER_NAME]: string;
         [EVENT_PARAM.FILTER_VALUE]: string;
     };
+    [EVENT_NAME.INDEX_ANALYZE_IN_TERRA_REQUESTED]: {
+        [EVENT_PARAM.ENTITY_NAME]: string;
+    };
+    [EVENT_NAME.INDEX_FILE_MANIFEST_REQUESTED]: {
+        [EVENT_PARAM.ENTITY_NAME]: string;
+    };
 };

package/lib/common/analytics/entities.js

@@ -8,19 +8,18 @@ export var EVENT_NAME;
     EVENT_NAME["ENTITY_TABLE_PAGINATED"] = "entity_table_paginated";
     EVENT_NAME["ENTITY_TABLE_SORTED"] = "entity_table_sorted";
     EVENT_NAME["FILTER_SELECTED"] = "filter_selected";
+    EVENT_NAME["INDEX_ANALYZE_IN_TERRA_REQUESTED"] = "index_analyze_in_terra_requested";
+    EVENT_NAME["INDEX_FILE_MANIFEST_REQUESTED"] = "index_file_manifest_requested";
 })(EVENT_NAME || (EVENT_NAME = {}));
 /**
  * Set of analytics event parameters.
  */
 export var EVENT_PARAM;
 (function (EVENT_PARAM) {
-    EVENT_PARAM["CATALOG"] = "catalog";
     EVENT_PARAM["COLUMN_NAME"] = "column_name";
-    EVENT_PARAM["CURRENT_QUERY"] = "current_query";
     EVENT_PARAM["ENTITY_NAME"] = "entity_name";
     EVENT_PARAM["FILTER_NAME"] = "filter_name";
     EVENT_PARAM["FILTER_VALUE"] = "filter_value";
-    EVENT_PARAM["INDEX"] = "index";
     EVENT_PARAM["PAGINATION_DIRECTION"] = "pagination_direction";
     EVENT_PARAM["SORT_DIRECTION"] = "sort_direction";
     EVENT_PARAM["TOOL_NAME"] = "tool_name";

package/lib/components/Export/common/tracking.d.ts

@@ -1,7 +1,16 @@
 /**
  * Executes event tracking for bulk download.
- * @param index - Index.
+ * @param entity_name - Entity (tab) name.
  * @param toolName - Tool name.
- * @param requestParams - Request params.
  */
-export declare function bulkDownloadTracking(index: string, toolName: string, requestParams?: URLSearchParams): void;
+export declare function bulkDownloadTracking(entity_name: string, toolName: string): void;
+/**
+ * Executes event tracking for the file manifest export.
+ * @param entity_name - Entity (tab) name.
+ */
+export declare function fileManifestTracking(entity_name: string): void;
+/**
+ * Executes event tracking for the Terra export.
+ * @param entity_name - Entity (tab) name.
+ */
+export declare function exportToTerraTracking(entity_name: string): void;

package/lib/components/Export/common/tracking.js

@@ -2,22 +2,33 @@ import { track } from "../../../common/analytics/analytics";
 import { EVENT_NAME, EVENT_PARAM } from "../../../common/analytics/entities";
 /**
  * Executes event tracking for bulk download.
- * @param index - Index.
+ * @param entity_name - Entity (tab) name.
  * @param toolName - Tool name.
- * @param requestParams - Request params.
  */
-export function bulkDownloadTracking(index, toolName, requestParams) {
-    if (!requestParams) {
-        return;
-    }
-    // Grab catalog and current query from the request params.
-    const catalog = requestParams.get("catalog"); // Catalog will be defined.
-    const currentQuery = requestParams.get("filters"); // Filters will be defined.
+export function bulkDownloadTracking(entity_name, toolName) {
     // Track the bulk download requested event.
     track(EVENT_NAME.BULK_DOWNLOAD_REQUESTED, {
-        [EVENT_PARAM.CATALOG]: catalog,
-        [EVENT_PARAM.CURRENT_QUERY]: currentQuery,
-        [EVENT_PARAM.INDEX]: index,
+        [EVENT_PARAM.ENTITY_NAME]: entity_name,
         [EVENT_PARAM.TOOL_NAME]: toolName,
     });
 }
+/**
+ * Executes event tracking for the file manifest export.
+ * @param entity_name - Entity (tab) name.
+ */
+export function fileManifestTracking(entity_name) {
+    // Track the file manifest requested event.
+    track(EVENT_NAME.INDEX_FILE_MANIFEST_REQUESTED, {
+        [EVENT_PARAM.ENTITY_NAME]: entity_name,
+    });
+}
+/**
+ * Executes event tracking for the Terra export.
+ * @param entity_name - Entity (tab) name.
+ */
+export function exportToTerraTracking(entity_name) {
+    // Track the export to terra event.
+    track(EVENT_NAME.INDEX_ANALYZE_IN_TERRA_REQUESTED, {
+        [EVENT_PARAM.ENTITY_NAME]: entity_name,
+    });
+}

package/lib/components/Export/components/DownloadCurlCommand/downloadCurlCommand.d.ts

@@ -13,5 +13,5 @@ interface DownloadCurlCommandProps {
     filters: Filters;
     formFacet: FormFacet;
 }
-export declare const DownloadCurlCommand: ({ DownloadCurlForm, DownloadCurlStart, DownloadCurlSuccess, fileManifestState, fileManifestType, fileSummaryFacetName, filters, formFacet, }: DownloadCurlCommandProps) => JSX.Element;
+export declare const DownloadCurlCommand: ({ DownloadCurlForm, DownloadCurlStart, DownloadCurlSuccess, fileManifestState, fileSummaryFacetName, filters, formFacet, }: DownloadCurlCommandProps) => JSX.Element;
 export {};

package/lib/components/Export/components/DownloadCurlCommand/downloadCurlCommand.js

@@ -1,23 +1,21 @@
 import React, { useState } from "react";
 import { MANIFEST_DOWNLOAD_FORMAT } from "../../../../apis/azul/common/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";
-import { FILE_MANIFEST_TYPE, } from "../../../../hooks/useFileManifest/common/entities";
 import { useFileManifest } from "../../../../hooks/useFileManifest/useFileManifest";
 import { useRequestFileManifest } from "../../../../hooks/useFileManifest/useRequestFileManifest";
 import { BULK_DOWNLOAD_EXECUTION_ENVIRONMENT, } from "../../common/entities";
 import { bulkDownloadTracking } from "../../common/tracking";
 import { DownloadCurlCommandNotStarted } from "./components/DownloadCurlCommandNotStarted/downloadCurlCommandNotStarted";
 import { DownloadCurlCommandReady } from "./components/DownloadCurlCommandReady/downloadCurlCommandReady";
-export const DownloadCurlCommand = ({ DownloadCurlForm, DownloadCurlStart, DownloadCurlSuccess, fileManifestState, fileManifestType, fileSummaryFacetName, filters, formFacet, }) => {
+export const DownloadCurlCommand = ({ DownloadCurlForm, DownloadCurlStart, DownloadCurlSuccess, fileManifestState, fileSummaryFacetName, filters, formFacet, }) => {
     useRequestFileManifest(MANIFEST_DOWNLOAD_FORMAT.CURL, filters, fileSummaryFacetName);
     const [executionEnvironment, setExecutionEnvironment] = useState(BULK_DOWNLOAD_EXECUTION_ENVIRONMENT.BASH);
     const { exploreState: { tabValue: entityList }, } = useExploreState();
-    const { requestParams } = fileManifestState;
     const { data, isLoading, run } = useFileManifest();
     const curlCommand = getBulkDownloadCurlCommand(data, executionEnvironment);
     return curlCommand ? (React.createElement(DownloadCurlCommandReady, { curlCommand: curlCommand, DownloadCurlSuccess: DownloadCurlSuccess })) : (React.createElement(DownloadCurlCommandNotStarted, { DownloadCurlForm: DownloadCurlForm, DownloadCurlStart: DownloadCurlStart, executionEnvironment: executionEnvironment, fileManifestState: fileManifestState, formFacet: formFacet, isLoading: isLoading, onRequestManifest: () => {
             // Execute GTM tracking.
-            track(fileManifestType, entityList, executionEnvironment, requestParams);
+            bulkDownloadTracking(entityList, executionEnvironment);
             // Request manifest.
             run();
         }, setExecutionEnvironment: setExecutionEnvironment }));
@@ -35,15 +33,3 @@ function getBulkDownloadCurlCommand(fileLocation, executionEnvironment) {
     }
     return commandLine[executionEnvironment];
 }
-/**
- * Executes GTM tracking.
- * @param fileManifestType - File manifest type.
- * @param index - Index.
- * @param toolName - Execution environment.
- * @param requestParams - Request params.
- */
-function track(fileManifestType, index, toolName, requestParams) {
-    if (fileManifestType === FILE_MANIFEST_TYPE.BULK_DOWNLOAD) {
-        bulkDownloadTracking(index, toolName, requestParams);
-    }
-}

package/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/NIHAccountExpiryWarning/nihAccountExpiryWarning.js

@@ -1,13 +1,16 @@
 import React from "react";
 import { expireTimeInSeconds, useAuthenticationNIHExpiry, } from "../../../../../../../../hooks/useAuthentication/useAuthenticationNIHExpiry";
-import { FluidAlert } from "../../../../../../../common/Alert/alert.styles";
+import { Alert } from "../../../../../../../common/Alert/alert";
+import { ALERT_PROPS } from "../../../../../../../common/Alert/constants";
+import { FluidPaper } from "../../../../../../../common/Paper/paper.styles";
 import { Link } from "../../../../../../../Links/components/Link/link";
 export const NIHAccountExpiryWarning = () => {
     const expiryStatus = useAuthenticationNIHExpiry();
     const { isReady, linkExpired, linkExpireTime, linkWillExpire } = expiryStatus || {};
     if (!isReady)
         return null;
-    return linkWillExpire || linkExpired ? (React.createElement(FluidAlert, { severity: "warning", title: React.createElement(React.Fragment, null,
+    return linkWillExpire || linkExpired ? (React.createElement(Alert, { ...ALERT_PROPS.STANDARD_WARNING, component: FluidPaper },
+        React.createElement("span", null,
             React.createElement("span", null, getExpiryMessage(linkExpired, linkExpireTime)),
             " ",
             React.createElement("span", null,
@@ -15,7 +18,7 @@ export const NIHAccountExpiryWarning = () => {
                 " ",
                 React.createElement(Link, { label: "renew your account", url: "https://support.terra.bio/hc/en-us/articles/360038086332-Linking-authorization-accessing-controlled-data-on-external-servers#heading-4" }),
                 " ",
-                "link.")), variant: "banner" })) : null;
+                "link.")))) : null;
 };
 /**
  * Calculates the remaining days until the link expires.

package/lib/components/Export/components/ExportToTerra/exportToTerra.js

@@ -1,13 +1,21 @@
 import React from "react";
+import { useExploreState } from "../../../../hooks/useExploreState";
 import { useExportToTerraResponseURL } from "../../../../hooks/useExportToTerraResponseURL";
 import { useFileManifest } from "../../../../hooks/useFileManifest/useFileManifest";
 import { useRequestFileManifest } from "../../../../hooks/useFileManifest/useRequestFileManifest";
+import { exportToTerraTracking } from "../../common/tracking";
 import { ExportToTerraNotStarted } from "./components/ExportToTerraNotStarted/exportToTerraNotStarted";
 import { ExportToTerraReady } from "./components/ExportToTerraReady/exportToTerraReady";
 export const ExportToTerra = ({ ExportForm, ExportToTerraStart, ExportToTerraSuccess, fileManifestState, fileSummaryFacetName, filters, formFacet, manifestDownloadFormat, manifestDownloadFormats, }) => {
+    const { exploreState: { tabValue: entityList }, } = useExploreState();
     useRequestFileManifest(manifestDownloadFormat, filters, fileSummaryFacetName);
     const { requestParams } = fileManifestState;
     const { data, isLoading, run } = useFileManifest();
     const exportURL = useExportToTerraResponseURL(requestParams, data);
-    return exportURL ? (React.createElement(ExportToTerraReady, { ExportToTerraSuccess: ExportToTerraSuccess, exportURL: exportURL })) : (React.createElement(ExportToTerraNotStarted, { ExportTerraForm: ExportForm, ExportToTerraStart: ExportToTerraStart, fileManifestState: fileManifestState, formFacet: formFacet, isLoading: isLoading, manifestDownloadFormats: manifestDownloadFormats, onRequestManifest: run }));
+    return exportURL ? (React.createElement(ExportToTerraReady, { ExportToTerraSuccess: ExportToTerraSuccess, exportURL: exportURL })) : (React.createElement(ExportToTerraNotStarted, { ExportTerraForm: ExportForm, ExportToTerraStart: ExportToTerraStart, fileManifestState: fileManifestState, formFacet: formFacet, isLoading: isLoading, manifestDownloadFormats: manifestDownloadFormats, onRequestManifest: () => {
+            // Execute GA tracking
+            exportToTerraTracking(entityList);
+            // Request manifest
+            run();
+        } }));
 };

package/lib/components/Export/components/ManifestDownload/manifestDownload.js

@@ -1,14 +1,20 @@
 import React from "react";
 import { MANIFEST_DOWNLOAD_FORMAT } from "../../../../apis/azul/common/entities";
+import { useExploreState } from "../../../../hooks/useExploreState";
 import { useFileManifest } from "../../../../hooks/useFileManifest/useFileManifest";
 import { useRequestFileManifest } from "../../../../hooks/useFileManifest/useRequestFileManifest";
+import { fileManifestTracking } from "../../common/tracking";
 import { ManifestDownloadNotStarted } from "./components/ManifestDownloadNotStarted/manifestDownloadNotStarted";
 import { ManifestDownloadReady } from "./components/ManifestDownloadReady/manifestDownloadReady";
 export const ManifestDownload = ({ fileManifestState, fileSummaryFacetName, filters, formFacet, ManifestDownloadForm, ManifestDownloadStart, ManifestDownloadSuccess, }) => {
     useRequestFileManifest(MANIFEST_DOWNLOAD_FORMAT.COMPACT, filters, fileSummaryFacetName);
+    const { exploreState: { tabValue: entityList }, } = useExploreState();
     const { data, isLoading, run } = useFileManifest();
     const manifestURL = getManifestDownloadURL(data);
-    return manifestURL ? (React.createElement(ManifestDownloadReady, { ManifestDownloadSuccess: ManifestDownloadSuccess, manifestURL: manifestURL })) : (React.createElement(ManifestDownloadNotStarted, { ManifestDownloadForm: ManifestDownloadForm, ManifestDownloadStart: ManifestDownloadStart, fileManifestState: fileManifestState, formFacet: formFacet, isLoading: isLoading, onRequestManifest: run }));
+    return manifestURL ? (React.createElement(ManifestDownloadReady, { ManifestDownloadSuccess: ManifestDownloadSuccess, manifestURL: manifestURL })) : (React.createElement(ManifestDownloadNotStarted, { ManifestDownloadForm: ManifestDownloadForm, ManifestDownloadStart: ManifestDownloadStart, fileManifestState: fileManifestState, formFacet: formFacet, isLoading: isLoading, onRequestManifest: () => {
+            fileManifestTracking(entityList);
+            run();
+        } }));
 };
 /**
  * Returns the manifest download URL for the generated manifest.

package/lib/components/Layout/components/Header/components/Content/components/Logo/logo.d.ts

@@ -1,8 +1,8 @@
 import { ImageSrc } from "../../../../../../../common/StaticImage/staticImage";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
-export interface LogoProps {
+import { BaseComponentProps } from "../../../../../../../types";
+export interface LogoProps extends BaseComponentProps {
     alt: string;
-    className?: string;
     height?: number;
     link: string;
     src: ImageSrc;

package/lib/components/Layout/components/Header/components/Content/components/Logo/logo.js

@@ -3,5 +3,5 @@ import { StaticImage, } from "../../../../../../../common/StaticImage/staticImag
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
 import { StyledLink } from "./logo.styles";
 export const Logo = ({ alt, className, height, link, src, target = ANCHOR_TARGET.SELF, width, }) => {
-    return (React.createElement(StyledLink, { className: className, label: React.createElement(StaticImage, { alt: alt, height: height, src: src, width: width }), target: target, url: link }));
+    return (React.createElement(StyledLink, { className: className, label: React.createElement(StaticImage, { alt: alt, height: height, src: src, width: width }), target: target, underline: "none", url: link }));
 };

package/lib/components/Layout/components/Header/components/Content/components/Logo/logo.styles.js

@@ -3,7 +3,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/lib/components/Links/components/Link/link.d.ts

@@ -1,12 +1,11 @@
 import { LinkProps as MLinkProps } from "@mui/material";
 import { ReactNode } from "react";
 import { TypographyProps } from "../../../common/Typography/common/entities";
+import { BaseComponentProps } from "../../../types";
 import { ANCHOR_TARGET, Url } from "../../common/entities";
-export interface LinkProps {
-    className?: string;
+export interface LinkProps extends BaseComponentProps, Omit<MLinkProps, "children" | "component"> {
     copyable?: boolean;
     label: ReactNode;
-    noWrap?: MLinkProps["noWrap"];
     onClick?: () => void;
     target?: ANCHOR_TARGET;
     TypographyProps?: TypographyProps;

package/lib/components/Links/components/Link/link.js

@@ -15,8 +15,7 @@ export const Link = ({ className, copyable = false, label, noWrap = false, onCli
         if (isClientSideNavigation(url)) {
             /* Client-side navigation */
             return (React.createElement(React.Fragment, null,
-                React.createElement(NLink, { href: url, legacyBehavior: true, passHref: true },
-                    React.createElement(MLink, { className: className, rel: REL_ATTRIBUTE.NO_OPENER, noWrap: noWrap, target: target || ANCHOR_TARGET.SELF, onClick: onClick, ...TypographyProps, ...props }, label)),
+                React.createElement(MLink, { className: className, component: NLink, href: url, noWrap: noWrap, onClick: onClick, rel: REL_ATTRIBUTE.NO_OPENER, target: target || ANCHOR_TARGET.SELF, ...TypographyProps, ...props }, label),
                 copyable && React.createElement(CopyToClipboard, { copyStr: url })));
         }
         if (isValidUrl(url)) {

package/lib/components/common/Alert/alert.d.ts

@@ -1,12 +1,4 @@
-import { AlertProps as MAlertProps } from "@mui/material";
-import { ReactNode } from "react";
-export interface AlertProps {
-    children?: ReactNode;
-    className?: string;
-    color?: MAlertProps["color"];
-    icon?: MAlertProps["icon"];
-    severity: MAlertProps["severity"];
-    title?: ReactNode;
-    variant?: MAlertProps["variant"];
-}
-export declare const Alert: ({ children, className, color, icon, severity, title, variant, }: AlertProps) => JSX.Element;
+import { AlertProps } from "@mui/material";
+import React from "react";
+import { BaseComponentProps } from "../../types";
+export declare const Alert: React.ForwardRefExoticComponent<Omit<AlertProps & BaseComponentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/components/common/Alert/alert.js

@@ -1,7 +1,5 @@
-import { AlertTitle, Alert as MAlert, } from "@mui/material";
-import React from "react";
-export const Alert = ({ children, className, color, icon, severity, title, variant = "standard", }) => {
-    return (React.createElement(MAlert, { className: className, color: color, icon: icon, severity: severity, variant: variant },
-        title && React.createElement(AlertTitle, null, title),
-        children));
-};
+import React, { forwardRef } from "react";
+import { StyledAlert } from "./alert.styles";
+export const Alert = forwardRef(function Alert({ children, className, ...props }, ref) {
+    return (React.createElement(StyledAlert, { className: className, ref: ref, ...props }, children));
+});

package/lib/components/common/Alert/alert.styles.d.ts

@@ -1,13 +1,3 @@
-/**
- * Flat alert - typically used when in full stretch or full "bleed" across a container.
- * e.g. the entire width of mobile viewports.
- */
-export declare const FlatAlert: import("@emotion/styled").StyledComponent<import("./alert").AlertProps & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;
-/**
- * Fluid alert - typically used to transition between flat paper (mobile) and rounded paper (tablet or desktop).
- */
-export declare const FluidAlert: import("@emotion/styled").StyledComponent<import("./alert").AlertProps & {
+export declare const StyledAlert: import("@emotion/styled").StyledComponent<import("@mui/material").AlertProps & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/common/Alert/alert.styles.js

@@ -1,26 +1,20 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { TABLET } from "../../../theme/common/breakpoints";
-import { Alert } from "./alert";
-/**
- * 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;
-  }
+import { Alert } from "@mui/material";
+import { SIZE } from "../../../styles/common/constants/size";
+import { textBody4002Lines, textBodyLarge500, } from "../../../styles/common/mixins/fonts";
+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/lib/components/common/Alert/constants.d.ts

@@ -0,0 +1,2 @@
+import { AlertProps } from "@mui/material";
+export declare const ALERT_PROPS: Record<string, Partial<AlertProps>>;

package/lib/components/common/Alert/constants.js

@@ -0,0 +1,27 @@
+import { COLOR, SEVERITY, VARIANT } from "../../../styles/common/mui/alert";
+export const ALERT_PROPS = {
+    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/lib/components/common/Alert/hooks/useTransition/types.d.ts

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

package/lib/components/common/Alert/hooks/useTransition/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/common/Alert/hooks/useTransition/useTransition.d.ts

@@ -0,0 +1,7 @@
+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 declare const useTransition: (initialState?: boolean) => UseTransition;

package/lib/components/common/Alert/hooks/useTransition/useTransition.js

@@ -0,0 +1,20 @@
+import { useCallback, useState } from "react";
+/**
+ * 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) => {
+    const [isIn, setIsIn] = useState(initialState || false);
+    const onEnter = useCallback(() => {
+        setIsIn(true);
+    }, []);
+    const onExit = useCallback(() => {
+        setIsIn(false);
+    }, []);
+    return {
+        isIn,
+        onEnter,
+        onExit,
+    };
+};

package/lib/components/common/Banner/banner.d.ts

@@ -1,7 +1,4 @@
-import { AlertProps as MAlertProps } from "@mui/material";
-import React, { ReactNode } from "react";
-export interface BannerProps extends MAlertProps {
-    children: ReactNode;
-    className?: string;
-}
-export declare const Banner: React.ForwardRefExoticComponent<Omit<BannerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+import { AlertProps } from "@mui/material";
+import React from "react";
+import { BaseComponentProps } from "../../types";
+export declare const Banner: React.ForwardRefExoticComponent<Omit<AlertProps & BaseComponentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/components/common/Banner/banner.js

@@ -1,5 +1,6 @@
-import { Alert as MAlert } from "@mui/material";
 import React, { forwardRef } from "react";
-export const Banner = forwardRef(function Banner({ children, className, ...props /* Spread props to allow for Mui AlertProps specific prop overrides. */ }, ref) {
-    return (React.createElement(MAlert, { className: className, ref: ref, ...props }, children));
+import { StyledAlert } from "./banner.styles";
+import { ALERT_PROPS } from "./constants";
+export const Banner = forwardRef(function Alert({ ...props }, ref) {
+    return React.createElement(StyledAlert, { ...ALERT_PROPS, ref: ref, ...props });
 });

package/lib/components/common/Banner/banner.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledAlert: import("@emotion/styled").StyledComponent<import("@mui/material").AlertProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/common/Banner/banner.styles.js

@@ -0,0 +1,28 @@
+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/lib/components/common/Banner/components/CookieBanner/constants.d.ts

@@ -0,0 +1,2 @@
+import { AlertProps } from "@mui/material";
+export declare const ALERT_PROPS: Partial<AlertProps>;

package/lib/components/common/Banner/components/CookieBanner/constants.js

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

package/lib/components/common/Banner/components/CookieBanner/cookieBanner.d.ts

@@ -1,7 +1,7 @@
-import { AlertProps as MAlertProps } from "@mui/material";
+import { AlertProps } from "@mui/material";
 import { ReactNode } from "react";
-export interface CookieBannerProps extends MAlertProps {
-    className?: string;
+import { BaseComponentProps } from "../../../../types";
+export interface CookieBannerProps extends Omit<AlertProps, "children">, BaseComponentProps {
     localStorageKey: string;
     message?: ReactNode;
     secondaryAction?: ReactNode;