enhance(UserNotification): add possibility to make user notification dismissible

Author: sjschlapbach

packages/design-system/src/UserNotification.stories.mdx

@@ -1,4 +1,5 @@
 import UserNotification from './UserNotification'
+import { useState } from 'react'
 
 {/* START README */}
 <div className="prose prose-sm max-w-none">
@@ -22,6 +23,9 @@ The UserNotification component accepts the following props:
 - @param type - The type of the notification. This can be either 'success', 'info' or 'error'. This determines the icon that is displayed and some conditional styling. If not type is provided, the information icon is displayed.
 - @param children - The optional children are displayed in the notification in addition to the provided message icon.
 - @param className - The optional className object allows you to override the default styling.
+- @param dismissible - If true, shows an X button in the top-right.
+- @param hidden - If true, hides the notification (useful with dismissible).
+- @param onDismiss - Callback when the X button is clicked.
 </div>
 {/* END README */}
 
@@ -210,6 +214,26 @@ export const Default = () => {
   )
 }
 
+export const Dismissible = () => {
+  const [hidden, setHidden] = useState(false)
+
+  return (
+    <div>
+      <UserNotification 
+        dismissible
+        hidden={hidden}
+        onDismiss={() => setHidden(true)}
+        message="This is the default notif style when the provided type is not 'success', 'error', or 'info'" 
+      />
+      {hidden && (
+        <button onClick={() => setHidden(false)}>
+          Show notification again
+        </button>
+      )}
+    </div>
+  )
+}
+
 export const Success = () => {
   return (
     <UserNotification

packages/design-system/src/UserNotification.tsx

@@ -3,6 +3,7 @@ import {
   faCircleInfo,
   faCircleXmark,
   faTriangleExclamation,
+  faXmark,
   IconDefinition,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -17,10 +18,14 @@ export interface UserNotificationProps {
   }
   message?: string
   type?: 'default' | 'info' | 'success' | 'warning' | 'error'
+  dismissible?: boolean
+  hidden?: boolean
+  onDismiss?: () => void
   children?: React.ReactNode
   className?: {
     root?: string
     icon?: string
+    closeIcon?: string
     message?: string
     content?: string
   }
@@ -42,6 +47,9 @@ export interface UserNotificationChildrenProps extends UserNotificationProps {
  * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy)
  * @param message - The message that is displayed in the notification.
  * @param type - The type of the notification. This can be either 'success', 'info' or 'error'. This determines the icon that is displayed and some conditional styling. If not type is provided, the information icon is displayed.
+ * @param dismissible - If true, a close button is displayed in the top right corner of the notification. When clicked, the onDismiss function is called.
+ * @param hidden - If true, the notification is hidden. This can be used in combination with the dismissible prop to hide the notification when the close button is clicked.
+ * @param onDismiss - The function that is called when the close button is clicked. This prop is required if the dismissible prop is set to true.
  * @param children - The optional children are displayed in the notification in addition to the provided message icon.
  * @param className - The optional className object allows you to override the default styling.
  * @returns UserNotification component
@@ -51,12 +59,19 @@ export function UserNotification({
   data,
   message,
   type = 'default',
+  dismissible = false,
+  hidden = false,
+  onDismiss,
   children,
   className,
 }: UserNotificationMessageProps | UserNotificationChildrenProps) {
   let notifIcon: IconDefinition
   let computedClassName: string
 
+  if (hidden) {
+    return null
+  }
+
   switch (type) {
     case 'warning':
       computedClassName = 'text-uzh-red-100 bg-uzh-red-20'
@@ -85,11 +100,26 @@ export function UserNotification({
       data-cy={data?.cy}
       data-test={data?.test}
       className={twMerge(
-        'flex flex-row gap-2 rounded-md p-2 text-sm',
+        'relative flex flex-row gap-2 rounded-md p-2 text-sm',
         className?.root,
-        computedClassName!
+        computedClassName!,
+        dismissible && 'pr-8'
       )}
     >
+      {dismissible && (
+        <button
+          type="button"
+          aria-label="Dismiss notification"
+          title="Dismiss"
+          onClick={onDismiss}
+          className={twMerge(
+            'focus:ring-uzh-blue-100 absolute top-2 right-2 inline-flex h-5 w-5 items-center justify-center rounded text-base hover:opacity-80 focus:ring-2 focus:ring-offset-2 focus:outline-none',
+            className?.closeIcon
+          )}
+        >
+          <FontAwesomeIcon icon={faXmark} className="h-4 w-4" />
+        </button>
+      )}
       <span>
         <FontAwesomeIcon icon={notifIcon!} className={className?.icon} />
       </span>

packages/design-system/types/index.d.ts

@@ -3173,11 +3173,14 @@ export declare const useFormField: () => {
  * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy)
  * @param message - The message that is displayed in the notification.
  * @param type - The type of the notification. This can be either 'success', 'info' or 'error'. This determines the icon that is displayed and some conditional styling. If not type is provided, the information icon is displayed.
+ * @param dismissible - If true, a close button is displayed in the top right corner of the notification. When clicked, the onDismiss function is called.
+ * @param hidden - If true, the notification is hidden. This can be used in combination with the dismissible prop to hide the notification when the close button is clicked.
+ * @param onDismiss - The function that is called when the close button is clicked. This prop is required if the dismissible prop is set to true.
  * @param children - The optional children are displayed in the notification in addition to the provided message icon.
  * @param className - The optional className object allows you to override the default styling.
  * @returns UserNotification component
  */
-export declare function UserNotification({ id, data, message, type, children, className, }: UserNotificationMessageProps | UserNotificationChildrenProps): JSX.Element;
+export declare function UserNotification({ id, data, message, type, dismissible, hidden, onDismiss, children, className, }: UserNotificationMessageProps | UserNotificationChildrenProps): JSX.Element | null;
 
 export declare interface UserNotificationChildrenProps extends UserNotificationProps {
     message?: never;
@@ -3197,10 +3200,14 @@ export declare interface UserNotificationProps {
     };
     message?: string;
     type?: 'default' | 'info' | 'success' | 'warning' | 'error';
+    dismissible?: boolean;
+    hidden?: boolean;
+    onDismiss?: () => void;
     children?: default_3.ReactNode;
     className?: {
         root?: string;
         icon?: string;
+        closeIcon?: string;
         message?: string;
         content?: string;
     };