@arbor-education/design-system.components 0.25.8 → 1.0.0

package/src/components/toast/Toast.tsx

@@ -1,14 +1,17 @@
 import classNames from 'classnames';
+import { Icon } from 'Components/icon/Icon';
 import { Toast as RadixToast } from 'radix-ui';
+import { ToastAction, type ToastActionProps } from './ToastAction.js';
 import { ToastViewport } from './ToastViewport.js';
-import { Icon } from 'Components/icon/Icon';
 
-export type ToastProps = RadixToast.ToastProps & {
+type ToastProps = Omit<RadixToast.ToastProps, 'children'> & {
   variant?: 'information' | 'danger' | 'success' | 'warning';
+  toastContent: React.ReactNode;
+  toastActions?: React.ReactNode;
 };
 
-export const Toast = (props: ToastProps) => {
-  const { children, variant = 'information', ...rest } = props;
+export const Toast = (props: ToastProps): React.JSX.Element => {
+  const { toastContent, toastActions, variant = 'information', ...rest } = props;
   const classes = classNames('ds-toast', `ds-toast--${variant}`);
 
   const iconName = {
@@ -23,7 +26,16 @@ export const Toast = (props: ToastProps) => {
   return (
     <RadixToast.Root {...rest} className={classes}>
       <Icon className="ds-toast__icon" name={icon} />
-      <RadixToast.Title className="ds-toast__title">{children}</RadixToast.Title>
+      <div className="ds-toast__content">
+        <div className="ds-toast__message-row">
+          <RadixToast.Title className="ds-toast__title">{toastContent}</RadixToast.Title>
+          {toastActions && (
+            <div className="ds-toast__actions">
+              {toastActions}
+            </div>
+          )}
+        </div>
+      </div>
       <RadixToast.Close className="ds-toast__close ds-button ds-button--secondary ds-button--icon-only ds-button--borderless">
         <Icon name="x" screenReaderText="Close" />
       </RadixToast.Close>
@@ -33,9 +45,11 @@ export const Toast = (props: ToastProps) => {
 
 Toast.Provider = RadixToast.Provider;
 Toast.Viewport = ToastViewport;
+Toast.Action = ToastAction;
 
 export namespace Toast {
   export type Props = ToastProps;
+  export type ActionProps = ToastActionProps;
   export type ViewportProps = RadixToast.ToastViewportProps;
   export type ProviderProps = RadixToast.ToastProviderProps;
 }

package/src/components/toast/ToastAction.tsx

@@ -0,0 +1,17 @@
+import classNames from 'classnames';
+import { Toast as RadixToast } from 'radix-ui';
+
+export type ToastActionProps = RadixToast.ToastActionProps;
+
+export const ToastAction = (props: ToastActionProps): React.JSX.Element => {
+  const { className, ...rest } = props;
+
+  return (
+    <RadixToast.Action
+      className={classNames('ds-toast__action', className)}
+      {...rest}
+    />
+  );
+};
+
+ToastAction.displayName = 'Toast.Action';

package/src/components/toast/toast.scss

@@ -5,6 +5,7 @@
     top: 0;
     right: 0;
     position: fixed;
+    z-index: var(--z-index-toast);
 }
 
 .ds-toast {
@@ -26,6 +27,42 @@
         flex-shrink: 0;
     }
 
+    &__content {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+    }
+
+    &__message-row {
+        display: flex;
+        align-items: baseline;
+        flex-wrap: wrap;
+        gap: var(--spacing-xsmall);
+        min-width: 0;
+    }
+
+    &__title {
+        min-width: 0;
+    }
+
+    &__actions {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        gap: var(--spacing-xsmall);
+    }
+
+    &__action {
+        flex-shrink: 0;
+        background: transparent;
+        border: none;
+        padding: 0;
+        margin: 0;
+        cursor: pointer;
+        color: inherit;
+        font: inherit;
+    }
+
     &__close {
         flex-shrink: 0;
         background-color: transparent;

package/src/components/tooltip/TooltipWrapper.tsx

@@ -8,6 +8,7 @@ export type TooltipWrapperProps = {
   triggerProps?: TooltipPrimitive.TooltipTriggerProps;
   contentProps?: Omit<TooltipContentProps, 'children'>;
   delayDuration?: number;
+  disableHoverableContent?: boolean;
 };
 
 export const TooltipWrapper = (props: TooltipWrapperProps) => {
@@ -17,10 +18,11 @@ export const TooltipWrapper = (props: TooltipWrapperProps) => {
     triggerProps,
     contentProps,
     delayDuration = 400,
+    disableHoverableContent,
   } = props;
 
   return (
-    <Tooltip delayDuration={delayDuration}>
+    <Tooltip delayDuration={delayDuration} disableHoverableContent={disableHoverableContent}>
       <Tooltip.Trigger {...triggerProps}>
         {children}
       </Tooltip.Trigger>