Implement no-* attributes

Implement positive attribute higher priority

Remove redundant icon type

Update code based on comments

src/TipBox.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="alert container" :class="[boxStyle, addClass, lightStyle, seamlessStyle]" :style="customStyle">
-        <div v-if="!isDefault" class="icon-wrapper" :class="[iconStyle]">
+    <div class="alert container" :class="[boxStyle, addClass, lightStyle, seamlessStyle, noBackgroundStyle, noBorderStyle]" :style="customStyle">
+        <div v-if="hasIcon" class="icon-wrapper" :class="[iconStyle]">
             <slot name="_icon">
                 <span v-html="iconType"></span>
             </slot>
@@ -74,11 +74,20 @@
         type: Boolean,
         default: false,
       },
+      noIcon: {
+        type: Boolean,
+        default: false,
+      },
+      noBackground: {
+        type: Boolean,
+        default: false,
+      },
+      noBorder: {
+        type: Boolean,
+        default: false,
+      }
     },
     computed: {
-      isDefault() {
-        return this.type === 'none'
-      },
       isSeamless() {
         return toBoolean(this.seamless);
       },
@@ -129,7 +138,7 @@
           style.borderColor = this.backgroundColor;
         }
         if (this.borderColor) {
-          style.borderColor = this.borderColor;
+          style.border = `1px solid ${this.borderColor}`;
         }
         if (this.borderLeftColor) {
           style.borderLeft = `5px solid ${this.borderLeftColor}`;
@@ -151,6 +160,11 @@
         }
         return '';
       },
+      hasIcon() {
+        // this.$slots._icon is either undefined or an object
+        const isIconSlotFilled = !!this.$slots._icon;
+        return !this.noIcon || isIconSlotFilled;
+      },
       iconType() {
         switch (this.type) {
           case 'wrong':
@@ -168,14 +182,26 @@
           case 'definition':
             return '<i class="fas fa-atlas"></i>';
           default:
-            return '<i class="fas fa-exclamation"></i>';
+            return '';
         }
       },
       iconStyle() {
         if (this.iconSize) {
           return `fa-${this.iconSize}`;
         }
         return '';
+      },
+      noBackgroundStyle() {
+        if (this.noBackground) {
+          return 'no-background';
+        }
+        return '';
+      },
+      noBorderStyle() {
+        if (this.noBorder) {
+          return 'no-border';
+        }
+        return '';
       }
     }
   }
@@ -250,4 +276,12 @@
     .vertical-divider {
         width: 4px;
     }
+
+    .no-background {
+      background: none;
+    }
+
+    .no-border {
+      border: none;
+    }
 </style>