Add promo notifications for AI assist (#26514)

* Add promo notifications for AI assist

* format pug

GitOrigin-RevId: 8895145e1e5dcd8e28f29bf2601a4bd21456a407

services/web/frontend/js/shared/components/notification.tsx

@@ -18,6 +18,7 @@ export type NotificationProps = {
   className?: string
   content: React.ReactNode
   customIcon?: React.ReactElement | null
+  iconPlacement?: 'top' | 'center'
   disclaimer?: React.ReactElement | string
   isDismissible?: boolean
   isActionBelowContent?: boolean
@@ -30,9 +31,11 @@ export type NotificationProps = {
 export function NotificationIcon({
   notificationType,
   customIcon,
+  iconPlacement,
 }: {
   notificationType: NotificationType
   customIcon?: ReactElement
+  iconPlacement?: 'top' | 'center'
 }) {
   let icon = <MaterialIcon type="info" />
 
@@ -47,7 +50,16 @@ export function NotificationIcon({
   } else if (notificationType === 'offer') {
     icon = <MaterialIcon type="campaign" />
   }
-  return <div className="notification-icon">{icon}</div>
+  return (
+    <div
+      className={classNames(
+        'notification-icon',
+        iconPlacement ? `notification-icon-${iconPlacement}` : ''
+      )}
+    >
+      {icon}
+    </div>
+  )
 }
 
 function Notification({
@@ -56,6 +68,7 @@ function Notification({
   className = '',
   content,
   customIcon,
+  iconPlacement = 'top',
   disclaimer,
   isActionBelowContent,
   isDismissible,
@@ -94,7 +107,11 @@ function Notification({
       id={id}
     >
       {customIcon !== null && (
-        <NotificationIcon notificationType={type} customIcon={customIcon} />
+        <NotificationIcon
+          notificationType={type}
+          customIcon={customIcon}
+          iconPlacement={iconPlacement}
+        />
       )}
 
       <div className="notification-content-and-cta">