add support for notifications of type 'warning'

web/static/src/scss/app.scss

@@ -1,6 +1,5 @@
 $navbar-height: 46px;
 $main-color: #875a7b;
-$o-notification-info-bg-color: #fcfbea;
 $o-main-text-color: #666666;
 
 html {
@@ -139,6 +138,9 @@ body {
 }
 
 /***** Notifications *****/
+$o-notification-info-bg-color: #fcfbea;
+$o-notification-error-bg-color: #f16567;
+
 .o_notification_container {
   position: absolute;
   width: 300px;
@@ -153,6 +155,11 @@ body {
     box-shadow: 0px 0px 5px 1px $o-main-text-color;
     position: relative;
 
+    &.o_error {
+      color: white;
+      background-color: $o-notification-error-bg-color;
+    }
+
     .o_close {
       position: absolute;
       top: 5px;

web/static/src/ts/discuss/discuss.ts

@@ -52,6 +52,15 @@ export class Discuss extends Widget<{}, State> {
       sticky
     });
   }
+
+  addWarning() {
+    this.env.addNotification({
+      title: "This is a warning",
+      message: "All your bases are belong to us",
+      type: "warning",
+      sticky: true
+    });
+  }
 }
 
 class ColorWidget extends Widget<{ color: "red" | "blue" }, {}> {

web/static/src/ts/ui/notification.ts

@@ -9,4 +9,8 @@ export class Notification extends Widget<INotification, {}> {
     ev.preventDefault();
     this.env.closeNotification(this.props.id);
   }
+
+  get icon() {
+    return this.props.type === "warning" ? "fa-exclamation" : "fa-lightbulb";
+  }
 }

web/static/src/xml/templates.xml

@@ -61,9 +61,10 @@
     </div>
   </div>
 
-  <div t-name="web.notification" class="o_notification">
+  <div t-name="web.notification" class="o_notification" t-att-class="props.type === 'warning' ? 'o_error' : ''">
     <a t-if="props.sticky" class="fa fa-times o_close" href="#" title="Close" aria-label="Close" t-on-click="close"/>
     <div class="o_notification_title">
+      <span t-attf-class="o_icon fa fa-3x {{icon}}" role="img" t-attf-aria-label="Notification {{props.title}}" t-attf-title="Notification {{props.title}}"/>
       <t t-raw="props.title"/>
     </div>
     <div class="o_notification_content" t-if="props.message.length">
@@ -89,6 +90,7 @@
     <t t-widget="ColorWidget" t-props="{color: state.color}"/>
     <button t-on-click="addNotif(false)">Add notif</button>
     <button t-on-click="addNotif(true)">Add sticky notif</button>
+    <button t-on-click="addWarning">Add warning</button>
   </div>
 
 </templates>

web/static/tests/ui/__snapshots__/notification.test.ts.snap

@@ -1,9 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`can be rendered 1`] = `
-"<div class=\\"o_notification\\">
+exports[`can be rendered (type = warning) 1`] = `
+"<div class=\\"o_notification o_error\\">
     
     <div class=\\"o_notification_title\\">
+      <span class=\\"o_icon fa fa-3x fa-exclamation\\" role=\\"img\\" aria-label=\\"Notification title\\" title=\\"Notification title\\"></span>
+      title
+    </div>
+    <div class=\\"o_notification_content\\">
+      message
+    </div>
+  </div>"
+`;
+
+exports[`can be rendered 1`] = `
+"<div class=\\"o_notification\\">
+    
+    <div class=\\"o_notification_title\\">
+      <span class=\\"o_icon fa fa-3x fa-lightbulb\\" role=\\"img\\" aria-label=\\"Notification title\\" title=\\"Notification title\\"></span>
       title
     </div>
     <div class=\\"o_notification_content\\">

web/static/tests/ui/__snapshots__/root.test.ts.snap

@@ -75,6 +75,7 @@ exports[`if url has action_id, will render action and navigate to proper menu_id
     </div>
     <button>Add notif</button>
     <button>Add sticky notif</button>
+    <button>Add warning</button>
   </div></div>
     <div class=\\"o_notification_container\\">
       
@@ -124,6 +125,7 @@ exports[`start with no action => clicks on client action => discuss is rendered
     </div>
     <button>Add notif</button>
     <button>Add sticky notif</button>
+    <button>Add warning</button>
   </div></div>
     <div class=\\"o_notification_container\\">
       

web/static/tests/ui/notification.test.ts

@@ -49,6 +49,17 @@ test("can be rendered", async () => {
   expect(fixture.innerHTML).toMatchSnapshot();
 });
 
+test("can be rendered (type = warning)", async () => {
+  const notif = makeNotification({
+    title: "title",
+    message: "message",
+    type: "warning"
+  });
+  const navbar = new Notification(env, notif);
+  await navbar.mount(fixture);
+  expect(fixture.innerHTML).toMatchSnapshot();
+});
+
 test("can be closed by clicking on it (if sticky)", async () => {
   env.addNotification({
     title: "title",