Merge pull request #15462 from strapi/chore/notification-variant

Add new notification variant to notification component

packages/core/admin/admin/src/components/Notifications/Notification/index.js

@@ -6,7 +6,7 @@ import { Link } from '@strapi/design-system/v2/Link';
 
 const Notification = ({ dispatch, notification }) => {
   const { formatMessage } = useIntl();
-  const { message, link, type, id, onClose, timeout, blockTransition } = notification;
+  const { message, link, type, id, onClose, timeout, blockTransition, title } = notification;
 
   const formattedMessage = (msg) =>
     typeof msg === 'string' ? msg : formatMessage(msg, msg.values);
@@ -37,6 +37,7 @@ const Notification = ({ dispatch, notification }) => {
   let variant;
   let alertTitle;
 
+  // TODO break out this logic into separate file
   if (type === 'info') {
     variant = 'default';
     alertTitle = formatMessage({
@@ -44,17 +45,29 @@ const Notification = ({ dispatch, notification }) => {
       defaultMessage: 'Information:',
     });
   } else if (type === 'warning') {
+    // type should be renamed to danger in the future, but it might introduce changes if done now
+    variant = 'danger';
+    alertTitle = formatMessage({
+      id: 'notification.warning.title',
+      defaultMessage: 'Warning:',
+    });
+  } else if (type === 'softWarning') {
+    // type should be renamed to just warning in the future
+    variant = 'warning';
     alertTitle = formatMessage({
       id: 'notification.warning.title',
       defaultMessage: 'Warning:',
     });
-    variant = 'danger';
   } else {
+    variant = 'success';
     alertTitle = formatMessage({
       id: 'notification.success.title',
       defaultMessage: 'Success:',
     });
-    variant = 'success';
+  }
+
+  if (title) {
+    alertTitle = typeof title === 'string' ? title : formatMessage(title);
   }
 
   return (
@@ -125,6 +138,14 @@ Notification.propTypes = {
     onClose: PropTypes.func,
     timeout: PropTypes.number,
     blockTransition: PropTypes.bool,
+    title: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        defaultMessage: PropTypes.string,
+        values: PropTypes.object,
+      }),
+    ]),
   }),
 };
 

packages/core/admin/admin/src/components/Notifications/reducer.js

@@ -23,6 +23,7 @@ const notificationReducer = (state = initialState, action) =>
           timeout: get(action, ['config', 'timeout'], 2500),
           blockTransition: get(action, ['config', 'blockTransition'], false),
           onClose: get(action, ['config', 'onClose'], null),
+          title: get(action, ['config', 'title'], null),
         });
         draftState.notifId = state.notifId + 1;
         break;

packages/core/admin/admin/src/components/Notifications/tests/reducer.test.js

@@ -36,6 +36,7 @@ describe('ADMIN | COMPONENTS | NOTIFICATIONS | reducer', () => {
             timeout: 2500,
             blockTransition: false,
             onClose: null,
+            title: null,
           },
         ],
         notifId: 1,

packages/core/helper-plugin/lib/src/hooks/useNotification/useNotification.stories.mdx

@@ -20,7 +20,7 @@ const HomePage = () => {
   const handleClick = () => {
     toggleNotification({
         // required
-        type: 'info|success|warning',
+        type: 'info|success|warning|softWarning',
         // required
         message: { id: 'notification.version.update.message', defaultMessage: 'A new version is available' },
         // optional
@@ -35,6 +35,8 @@ const HomePage = () => {
         blockTransition: true,
         // optional
         onClose: () => localStorage.setItem('STRAPI_UPDATE_NOTIF', true),
+        // optional
+        title: { id: 'notification.default.title, defaultMessage: 'Warning: '}
       });
   }