fix(hx-alert): exchange static attr with persist

Author: Cathy Siller

docs/components/alerts/alert-demo.js

@@ -14,14 +14,15 @@ if (document.getElementById('vue-alertDemo')) {
         data: {
             content: 'Nope! Nope! Nope! Nope! Nope!',
             cta: 'burn it',
-            isStatic: false,
+            isPersistent: false,
             status: 'spider',
             type: TYPES[0],
             types: TYPES,
         },
         methods: {
-            onSubmit: function () {
-                alert('The spider didn\'t see that coming!');
+            onEvent: function (evt) {
+                evt.preventDefault();
+                alert(`Event: "${evt.type}"`);
             },
         },
         computed: {
@@ -51,7 +52,7 @@ if (document.getElementById('vue-alertDemo')) {
                     <hx-alert
                       ${this.attrCta}
                       ${this.attrStatus}
-                      ${this.isStatic ? 'static' : ''}
+                      ${this.isPersistent ? 'persist' : ''}
                       ${this.attrType}
                     >
                       ${this.content}

docs/components/alerts/index.html

@@ -40,8 +40,8 @@ <h2 id="basic-alert">Basic Alert</h2>
           <fieldset>
             <legend>Options</legend>
             <label>
-              <input type="checkbox" v-model="isStatic">
-              Static
+              <input type="checkbox" v-model="isPersistent">
+              Persist
             </label>
           </fieldset>
         </form>
@@ -50,10 +50,11 @@ <h2 id="basic-alert">Basic Alert</h2>
       <div>
         <hx-alert
           :cta="cta"
-          :static="isStatic"
+          :persist="isPersistent"
           :status="status"
           :type="type.value"
-          @submit="onSubmit"
+          @dismiss="onEvent"
+          @submit="onEvent"
         >
           {% raw %}{{content}}{% endraw %}
         </hx-alert>

docs/components/toasts/index.html

@@ -41,7 +41,9 @@ <h2 id="basic-toast">Basic Toast</h2>
         <hx-toast
           :type="type.value"
           :cta="cta"
-          @submit="onSubmit">
+          @dismiss="onEvent"
+          @submit="onEvent"
+        >
           {% raw %}{{content}}{% endraw %}
         </hx-toast>
       </div>

docs/components/toasts/toast-demo.js

@@ -17,8 +17,9 @@ if (document.getElementById('vue-toastDemo')) {
             types: TYPES,
         },
         methods: {
-            onSubmit: function () {
-                alert('Unicorn pigeon puppy pop rainbows delight social pop!');
+            onEvent: function (evt) {
+                evt.preventDefault();
+                alert(`Event: "${evt.type}"`);
             },
         },
         computed: {

docs/elements/hx-alert/index.html

@@ -57,7 +57,7 @@ <h2 id="methods">Methods</h2>
       If absent or blank, the CTA button will not be displayed.
     </dd>
 
-    <dt>static {Boolean} <i>(optional)</i></dt>
+    <dt>persist {Boolean}</dt>
     <dd>
       When present, alert will not be dismissable.
     </dd>
@@ -88,7 +88,7 @@ <h2 id="methods">Methods</h2>
       Manipulates the <code>cta</code> attribute.
     </dd>
 
-    <dt>static {Boolean}</dt>
+    <dt>persist {Boolean}</dt>
     <dd>
       When <code>true</code>, alert will not be dismissable.
     </dd>

src/helix-ui/elements/HXAlertElement.js

@@ -50,7 +50,7 @@ export class HXAlertElement extends HXElement {
 
     $onConnect () {
         this.$upgradeProperty('cta');
-        this.$upgradeProperty('static');
+        this.$upgradeProperty('persist');
         this.$upgradeProperty('status');
         this.$upgradeProperty('type');
 
@@ -66,7 +66,6 @@ export class HXAlertElement extends HXElement {
     static get $observedAttributes () {
         return [
             'cta',
-            'static',
             'status',
             'type',
         ];
@@ -112,20 +111,20 @@ export class HXAlertElement extends HXElement {
     }
 
     /**
-     * Property reflecting the `static` HTML attribute, indicating whether the
+     * Property reflecting the `persist` HTML attribute, indicating whether the
      * alert may be dismissed. If true, the dismiss button will not be shown.
      *
      * @default false
      * @type {Boolean}
      */
-    get static () {
-        return this.hasAttribute('static');
+    get persist () {
+        return this.hasAttribute('persist');
     }
-    set static (value) {
+    set persist (value) {
         if (value) {
-            this.setAttribute('static', ''); // boolean
+            this.setAttribute('persist', '');
         } else {
-            this.removeAttribute('static');
+            this.removeAttribute('persist');
         }
     }
 
@@ -169,7 +168,7 @@ export class HXAlertElement extends HXElement {
      * Dismiss the alert (removes element from the DOM).
      */
     dismiss () {
-        if (this.$emit('dismiss')) {
+        if (!this.persist && this.$emit('dismiss')) {
             // only if event was not canceled by consumer
             this.remove();
         }

src/helix-ui/elements/HXAlertElement.less

@@ -56,7 +56,7 @@
   }
 }
 
-:host([static]) {
+:host([persist]) {
   #hxAlert {
     #hxDismiss {
       display: none;