fix(ouiMessage): add dismissable property to force the close button visibility (#69)

Author: neolitec

packages/oui-message/src/index.spec.js

@@ -130,6 +130,23 @@ describe("oui-message: ", () => {
                 expect(getCloseButton(element)).not.toBeDefined();
             });
         });
+
+        describe("when dismissable property is defined", () => {
+            it("should show the close button if no value", () => {
+                const element = TestUtils.compileTemplate('<oui-message type="error" dismissable></oui-message>');
+                expect(getCloseButton(element)).toBeDefined();
+            });
+
+            it("should show the close button if property is true", () => {
+                const element = TestUtils.compileTemplate('<oui-message type="error" dismissable="true"></oui-message>');
+                expect(getCloseButton(element)).toBeDefined();
+            });
+
+            it("should not show the close button if property is false", () => {
+                const element = TestUtils.compileTemplate('<oui-message type="error" dismissable="false"></oui-message>');
+                expect(getCloseButton(element)).not.toBeDefined();
+            });
+        });
     });
 
     function getCloseButton (element) {

packages/oui-message/src/message.component.js

@@ -7,6 +7,7 @@ export default {
     bindings: {
         type: "@",
         ariaCloseButtonLabel: "@?",
+        dismissable: "<?",
         onDismissed: "&?"
     },
     transclude: true

packages/oui-message/src/message.controller.js

@@ -1,9 +1,21 @@
-export default class {
-    dismiss () {
-        this.dismissed = true;
-
-        if (this.onDismissed) {
-            this.onDismissed();
-        }
-    }
-}
+import { addBooleanParameter } from "@oui-angular/common/component-utils";
+
+export default class {
+    constructor ($attrs) {
+        "ngInject";
+
+        this.$attrs = $attrs;
+    }
+
+    $onInit () {
+        addBooleanParameter(this, "dismissable");
+    }
+
+    dismiss () {
+        this.dismissed = true;
+
+        if (this.onDismissed) {
+            this.onDismissed();
+        }
+    }
+}

packages/oui-message/src/message.html

@@ -4,7 +4,7 @@
     <div class="oui-message__body" ng-class=":: 'oui-message__body_' + $ctrl.type" ng-transclude>
     </div>
 
-    <button ng-if=":: $ctrl.type === 'info' || $ctrl.type === 'success'"
+    <button ng-if=":: $ctrl.type === 'info' || $ctrl.type === 'success' || $ctrl.dismissable"
       class="oui-icon oui-icon-close oui-message__close-button"
       type="button"
       ng-click="$ctrl.dismiss()"