docs: add phosphor icons callout

docs/foundation/Icons/Library.mdx

@@ -1,11 +1,9 @@
-import { Meta, Unstyled } from "@storybook/addon-docs";
+import { Meta, Story } from "@storybook/addon-docs";
 
-import IconLibrary from "./Library";
+import * as IconLibraryStories from "./Library.stories";
 
-<Meta title="Foundation/Icons/Library" />
+<Meta of={IconLibraryStories} title="Foundation/Icons/Library" />
 
 # Icon Library
 
-<Unstyled>
-  <IconLibrary />
-</Unstyled>
+<Story of={IconLibraryStories.Library} />

docs/foundation/Icons/Library.tsx → docs/foundation/Icons/Library.stories.tsx

@@ -1,11 +1,14 @@
 import { ComponentType, useMemo, useState } from "react";
 import { css } from "@emotion/css";
+import { Meta } from "@storybook/react";
 import {
+  HvBannerContent,
   HvInput,
   HvOption,
   HvSelect,
   HvSimpleGrid,
   HvTypography,
+  useTheme,
 } from "@hitachivantara/uikit-react-core";
 import {
   IconBaseProps,
@@ -80,9 +83,29 @@ const Group = ({
   );
 };
 
-const Library = () => {
+const Callout = () => {
+  return (
+    <HvBannerContent
+      showIcon
+      variant="warning"
+      classes={{ root: "mb-md", closeAction: "hidden" }}
+    >
+      Pentaho projects are transitioning to{" "}
+      <HvTypography link component="a" href="https://phosphoricons.com">
+        Phosphor Icons
+      </HvTypography>
+      .
+      <br />
+      Please ensure you use the correct icon set according to your project
+      guidelines.
+    </HvBannerContent>
+  );
+};
+
+export const Library = () => {
   const [search, setSearch] = useState("");
   const [iconSize, setIconSize] = useState<IconSize>("S");
+  const { selectedTheme } = useTheme();
 
   const filteredIcons = useMemo(() => {
     if (!search) return iconList;
@@ -97,6 +120,7 @@ const Library = () => {
 
   return (
     <>
+      {selectedTheme === "pentahoPlus" && <Callout />}
       <HvSimpleGrid spacing="sm" cols={2} className={classes.grid}>
         <HvSelect
           label="Select icon size"
@@ -124,4 +148,6 @@ const Library = () => {
   );
 };
 
-export default Library;
+export default {
+  title: "Foundation/Icons/Library",
+} satisfies Meta;

packages/core/src/Banner/BannerContent/BannerContent.styles.tsx

@@ -15,6 +15,8 @@ export const { useClasses, staticClasses } = createClasses("HvBannerContent", {
     alignItems: "center",
     padding: theme.spacing("xs", 0),
     paddingLeft: theme.space.sm,
+    ...theme.typography.body,
+    color: theme.colors.base_dark,
   },
   action: {
     padding: theme.spacing("xs"),
@@ -41,4 +43,30 @@ export const { useClasses, staticClasses } = createClasses("HvBannerContent", {
     width: "100%",
     position: "relative",
   },
+  messageContainer: {
+    wordBreak: "break-word",
+    maxWidth: 700,
+    overflow: "hidden",
+    marginRight: 10,
+  },
+  iconContainer: {
+    marginRight: theme.space.xs,
+    marginLeft: -theme.space.xs,
+  },
+  messageActions: {
+    flex: "0 0 auto",
+  },
+  actionContainer: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "space-between",
+  },
+  actionsInnerContainer: {
+    flexDirection: "row",
+    marginTop: "8px", // avoid overlap with close button outline focus ring
+  },
+  closeAction: {
+    alignSelf: "flex-end",
+  },
 });

packages/core/src/Banner/BannerContent/BannerContent.tsx

@@ -2,23 +2,26 @@ import { forwardRef } from "react";
 import SnackbarContent, {
   SnackbarContentProps as MuiSnackbarContentProps,
 } from "@mui/material/SnackbarContent";
+import { Close } from "@hitachivantara/uikit-react-icons";
 import { type ExtractNames } from "@hitachivantara/uikit-react-utils";
 
-import { HvActionsGenericProps } from "../../ActionsGeneric";
+import { HvActionsGeneric, HvActionsGenericProps } from "../../ActionsGeneric";
+import { HvButton, HvButtonProps } from "../../Button";
 import { iconVariant } from "../../utils/iconVariant";
+import { setId } from "../../utils/setId";
 import { HvBannerActionPosition, HvBannerVariant } from "../types";
-import { HvActionContainer, HvActionContainerProps } from "./ActionContainer";
 import { staticClasses, useClasses } from "./BannerContent.styles";
-import { HvMessageContainer } from "./MessageContainer";
 
 export { staticClasses as bannerContentClasses };
 
 export type HvBannerContentClasses = ExtractNames<typeof useClasses>;
 
 export interface HvBannerContentProps
   extends Omit<MuiSnackbarContentProps, "variant" | "classes" | "onClose"> {
-  /** The message to display. */
+  /** The message to display. @deprecated use `children` instead */
   content?: string;
+  /** The message to display. */
+  children?: React.ReactNode;
   /** Variant of the snackbar. */
   variant?: HvBannerVariant;
   /** Controls if the associated icon to the variant should be shown. */
@@ -40,7 +43,7 @@ export interface HvBannerContentProps
   /** The position property of the header. */
   actionsPosition?: HvBannerActionPosition;
   /** The props to pass down to the Action Container. */
-  actionProps?: HvActionContainerProps;
+  actionProps?: Partial<HvButtonProps>;
   /** A Jss Object used to override or extend the styles applied to the component. */
   classes?: HvBannerContentClasses;
 }
@@ -50,6 +53,7 @@ export const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(
     const {
       id,
       classes: classesProp,
+      className,
       showIcon = false,
       customIcon,
       variant = "default",
@@ -59,6 +63,7 @@ export const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(
       onAction,
       actionsPosition = "auto",
       content,
+      children,
       actionProps,
       ...others
     } = props;
@@ -72,6 +77,11 @@ export const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(
     const effectiveActionsPosition =
       actionsPosition === "auto" ? "inline" : actionsPosition;
 
+    const handleAction: HvBannerContentProps["onAction"] = (evt, action) => {
+      onAction?.(evt, action);
+      actionsCallback?.(evt, id!, action);
+    };
+
     return (
       <div className={classes.outContainer}>
         <SnackbarContent
@@ -82,30 +92,54 @@ export const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(
             message: classes.message,
             action: classes.action,
           }}
-          className={cx(classes?.baseVariant, classes?.[variant])}
+          className={cx(classes.baseVariant, classes[variant], className)}
           message={
-            <HvMessageContainer
-              id={id}
-              icon={icon}
-              {...(effectiveActionsPosition === "inline" && {
-                actions,
-                actionsOnMessageCallback: actionsCallback,
-                onAction,
-              })}
-              message={content}
-            />
+            <>
+              {icon && <div className={classes.iconContainer}>{icon}</div>}
+              <div
+                id={setId(id, "message-text")}
+                className={classes.messageContainer}
+              >
+                {children ?? content}
+              </div>
+              {actions && effectiveActionsPosition === "inline" && (
+                <div
+                  id={setId(id, "message-actions")}
+                  className={classes.messageActions}
+                >
+                  <HvActionsGeneric
+                    id={id}
+                    variant="semantic"
+                    actions={actions}
+                    onAction={handleAction}
+                  />
+                </div>
+              )}
+            </>
           }
           action={
-            <HvActionContainer
-              id={id}
-              onClose={onClose}
-              {...(effectiveActionsPosition === "bottom-right" && {
-                action: actions,
-                actionCallback: actionsCallback,
-                onAction,
-              })}
-              {...actionProps}
-            />
+            <div className={classes.actionContainer}>
+              <HvButton
+                icon
+                className={classes.closeAction}
+                variant="semantic"
+                aria-label="Close"
+                onClick={onClose}
+                {...actionProps}
+              >
+                <Close size="XS" />
+              </HvButton>
+              {actions && effectiveActionsPosition === "bottom-right" && (
+                <div className={classes.actionsInnerContainer}>
+                  <HvActionsGeneric
+                    id={id}
+                    variant="semantic"
+                    actions={actions}
+                    onAction={handleAction}
+                  />
+                </div>
+              )}
+            </div>
           }
           {...others}
         />