Merge pull request #14793 from overleaf/jel-new-alert-content-string

[web] Option to pass content as string to notification component

GitOrigin-RevId: 05196a44d25dab5ba85b58965c3bb5ac071a3897

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

@@ -8,7 +8,7 @@ type NotificationType = 'info' | 'success' | 'warning' | 'error'
 type NotificationProps = {
   action?: React.ReactElement
   ariaLive?: 'polite' | 'off' | 'assertive'
-  content: React.ReactElement
+  content: React.ReactElement | string
   customIcon?: React.ReactElement
   isDismissible?: boolean
   isActionBelowContent?: boolean

services/web/frontend/stories/notification.stories.tsx

@@ -300,6 +300,10 @@ export const SuccessFlow = (args: Args) => {
   return startNotification
 }
 
+export const ContentAsAString = (args: Args) => {
+  return <Notification {...args} content="An alert" />
+}
+
 export default {
   title: 'Shared / Components / Notification',
   component: Notification,

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

@@ -41,7 +41,7 @@ describe('<Notification />', function () {
     screen.getByRole('button', { name: 'Close' })
   })
 
-  it('renders with title', function () {
+  it('renders with title and content passed as HTML', function () {
     render(
       <Notification
         type="info"
@@ -50,5 +50,13 @@ describe('<Notification />', function () {
       />
     )
     screen.getByText('A title')
+    screen.getByText('A notification')
+  })
+
+  it('renders with content when passed as a string', function () {
+    render(
+      <Notification type="info" content="A notification" title="A title" />
+    )
+    screen.getByText('A notification')
   })
 })