@vector-im/compound-web 9.0.1 → 9.2.0

package/src/components/Toast/Toast.tsx

@@ -6,21 +6,83 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classnames from "classnames";
-import React, { forwardRef, type PropsWithChildren } from "react";
+import React, {
+  forwardRef,
+  type ComponentType,
+  type MouseEventHandler,
+  type PropsWithChildren,
+} from "react";
 import styles from "./Toast.module.css";
+import { Text } from "../Typography/Text";
+import { IconButton } from "../Button";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 
 type ToastProps = {
   className?: string;
+  /**
+   * An icon to display within the button.
+   */
+  Icon?: ComponentType<React.SVGAttributes<SVGElement>>;
+  /**
+   * Whether to show the action button. If true, an action button will be shown on the right side of the toast.
+   */
+  onClose?: MouseEventHandler<HTMLButtonElement>;
+  /**
+   * The tooltip to show on the close button. This is only used if `onClose` is provided.
+   */
+  tooltip?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 export const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(
-  { children, className, ...props }: PropsWithChildren<ToastProps>,
+  {
+    children,
+    className,
+    Icon,
+    onClose,
+    tooltip,
+    ...props
+  }: PropsWithChildren<ToastProps>,
   ref,
 ) {
-  const classes = classnames(styles["toast-container"], className);
+  const hasCloseButton = Boolean(onClose);
+
+  const classes = classnames(styles["toast-container"], className, {
+    [styles["has-close"]]: hasCloseButton,
+  });
+
   return (
-    <div {...props} className={classes} ref={ref}>
-      {children}
-    </div>
+    <Text
+      {...props}
+      as="div"
+      size="sm"
+      weight="medium"
+      className={classes}
+      ref={ref}
+    >
+      <div className={styles.content}>
+        {Icon && (
+          <Icon
+            className={styles.icon}
+            width={20}
+            height={20}
+            aria-hidden={true}
+          />
+        )}
+        {children}
+      </div>
+      {hasCloseButton && (
+        <IconButton
+          size="24px"
+          kind="secondary"
+          noBackground={true}
+          tooltip={tooltip}
+          tooltipPlacement="right"
+          className={styles.close}
+          onClick={onClose}
+        >
+          <CloseIcon />
+        </IconButton>
+      )}
+    </Text>
   );
 });

package/src/index.ts

@@ -35,6 +35,7 @@ export { NavBar, NavItem } from "./components/Nav";
 export { Menu } from "./components/Menu/Menu";
 export { MenuItem } from "./components/Menu/MenuItem";
 export { MenuTitle } from "./components/Menu/MenuTitle";
+export { SubMenu } from "./components/Menu/SubMenu";
 export { RadioMenuItem } from "./components/Menu/RadioMenuItem";
 export { Progress } from "./components/Progress/Progress";
 export { Search } from "./components/Search/Search";
@@ -51,6 +52,7 @@ export { Breadcrumb } from "./components/Breadcrumb";
 export { VisualList, VisualListItem } from "./components/VisualList";
 export { ChatFilter } from "./components/ChatFilter";
 export { UnreadCounter, Pill, Unread } from "./components/ActivityMarker";
+export { PageHeader } from "./components/PageHeader/PageHeader";
 
 export {
   TextControl,