barbican-reset 1.5.8 → 1.5.9

package/components/alert.vue

@@ -1,12 +1,12 @@
 <template>
-  <div :class="styleContainer" :data-test="testData">
-    <div :class="styleWrap">
-      <span :class="styleSpan">
-        <div :class="$style.title" v-if="title.length > 0 && !toggle">{{ title }}</div>
+  <div :class="[`br-alert`,{ center }]" :data-test="`alert-${this.getStatus}`">
+    <div :class="[`wrap`, getStatus,{ inline },{ toggle }]">
+      <span :class="{ flex }">
+        <div class="title" v-if="title.length > 0 && !toggle">{{ title }}</div>
         <slot />
       </span>
-      <b-button v-if="toggle" variant="invisible" :class="styleButton" @click="$emit('close')">
-        <close-icon />
+      <b-button v-if="toggle" variant="invisible" :class="[`exit`, getStatus]" @click="$emit('close')">
+        <close-icon :status="getStatus" />
       </b-button>
     </div>
   </div>
@@ -21,6 +21,13 @@ export default {
     BButton,
     CloseIcon,
   },
+  computed: {
+    getStatus() {
+      if (this.error) { return "error"; }
+      if (this.success) { return "success"; }
+      return "neutral";
+    }
+  },
   props: {
     inline: {
       type: Boolean,
@@ -42,10 +49,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    margin: {
-      type: String,
-      default: null
-    },
     title: {
       type: String,
       default: ''
@@ -54,202 +57,8 @@ export default {
       type: Boolean,
       default: false,
     }
-  },
-  computed: {
-    testData() {
-      if (this.error) {
-        return 'alert-error';        
-      } else if (this.success) {
-        return 'alert-success';        
-      } return 'alert-neutral';
-    },
-    styleContainer() {
-      let style = this.$style;
-      let output = [style.container];
-      if (this.center) { output.push(style.center); }
-      if (this.margin) {
-        switch (this.margin) {
-          case 'lg': output.push(style.margin_lg); break;  
-          case 'md': output.push(style.margin_md); break;            
-          default: output.push(style.margin_sm); break;
-        }
-      }
-      return output;
-    },
-    styleWrap() {
-      let style = this.$style;
-      let output = [style.wrap];
-      if (this.error) { output.push(style.error, 'error'); }
-      if (this.success) { output.push(style.success, 'success'); }
-      if (this.inline) { output.push(style.inline); }
-      if (this.toggle) { output.push(style.toggle); }
-      return output;
-    },
-    styleSpan() {
-      let style = this.$style;
-      let output = [];
-      if (this.flex) { output.push(style.flex); }
-      return output;
-    },
-    styleButton() {
-      let style = this.$style;
-      let output = [style.button];
-      if (this.error) { output.push(style.error); }
-      else if (this.success) { output.push(style.success); }
-      else { output.push(style.neutral); }
-      return output;
-    }
   }
 };
-</script>
-
-<style lang="scss" module>
-
-$neutral-colors: $c-status-neutral, $c-status-neutral-fade;
-$success-colors: $c-status-success, $c-status-success-fade;
-$error-colors: $c-status-error, $c-status-error-fade;
-
-@mixin icon($color, $fade) {    
-  [data-fill] { fill: $fade; }
-  [data-outline],
-  [data-cross] { fill: $color; }
-
-  @include focus {
-    [data-fill] { fill: $color; }
-    [data-cross] { fill: $fade; }
-  }
-}
-
-.container {
-  @include media-breakpoint-down(xs) {
-    font-size: $font-size-sm;
-  }
-
-  &.margin_sm {
-    margin-bottom: 1rem;
-  }
-
-  &.margin_md {
-    margin-bottom: 1.25rem;
-
-    @include media-breakpoint-up(md) {
-      margin-bottom: 2rem;
-    }
-  }
-  
-  &.center {
-    text-align: center;
-
-    .wrap {
-      justify-content: center;
-    }
-  }
-}
-
-.wrap {
-  background-color: $c-status-neutral-fade;
-  border-color: $c-status-neutral-light;
-  border-radius: $border-radius;
-  border-width: $border-width;
-  color: $c-status-neutral;
-  border-style: solid;
-  padding: $space;
-
-  &.inline {
-    @include inline-block;
-  }
-
-  &.toggle {
-    justify-content: space-between;
-    align-items: center;
-    display: flex;
-    gap: $space;
-
-    &.inline {
-      display: inline-flex;
-    }
-  }
-
-  a {
-    @include focus {
-      @include single-box($c-status-neutral);
-      background-color: $c-status-neutral;
-      color: $c-status-neutral-fade;
-    }
-  }
-
-  p {
-    margin-bottom: 0;
-
-    + p {
-      margin-top: 1rem;
-    }
-  }
-
-  &.error {
-    background-color: $c-status-error-fade;
-    border-color: $c-status-error-light;
-    color: $c-status-error;
-  }
-
-  &.success {
-    background-color: $c-status-success-fade;
-    border-color: $c-status-success-light;
-    color: $c-status-success;
-  }
-}
 
-.title {
-  margin-bottom: 0.25rem;
-  font-weight: 700;
-}
-
-.flex {
-  justify-content: space-between;
-  display: flex;    
-}
-
-.button.neutral {
-  @include icon($neutral-colors...);  
-}
-
-.button.success {
-  @include icon($success-colors...);  
-}
-
-.button.error {
-  @include icon($error-colors...);  
-}
-
-</style>
-
-<style lang="scss" scoped>
-
-@mixin status_focus(
-  $color: $c-status-neutral, 
-  $fade: $c-status-neutral-fade) {
-
-  @include focus {
-    @include single-box($color);
-    background-color: $color;
-    color: $fade;
-  }
-}
-
-.btn.btn-link, a {
-  @include status_focus;
-}
-
-.error {
-  .btn.btn-link, a {
-    @include status_focus($c-status-error, $c-status-error-fade);
-  }
-}
-
-.success {
-  .btn.btn-link, a {
-    @include status_focus($c-status-success, $c-status-success-fade);
-  }
-}
+</script>
 
-</style>

package/icons/stream/close.vue

@@ -1,7 +1,7 @@
 <template>
   <svg width="28" viewBox="0 0 20 20">
-    <path data-fill fill="#fefbfa" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z" />
-    <path data-outline fill="#353535" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M10,18c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8	S14.4,18,10,18z" />
-    <path data-cross fill="#353535" d="M12.6,6L10,8.6L7.4,6L6,7.4L8.6,10L6,12.6L7.4,14l2.6-2.6l2.6,2.6l1.4-1.4L11.4,10L14,7.4L12.6,6z" />
+    <path class="tint" fill="#fefbfa" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z" />
+    <path class="cross" fill="#353535" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M10,18c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8	S14.4,18,10,18z" />
+    <path class="cross" fill="#353535" d="M12.6,6L10,8.6L7.4,6L6,7.4L8.6,10L6,12.6L7.4,14l2.6-2.6l2.6,2.6l1.4-1.4L11.4,10L14,7.4L12.6,6z" />
   </svg>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.5.8",
+  "version": "1.5.9",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {

package/scss/_alert.scss

@@ -0,0 +1,140 @@
+
+$neutral_wrap: $c-status-neutral, $c-status-neutral-fade, $c-status-neutral-light;
+$success_wrap: $c-status-success, $c-status-success-fade, $c-status-success-light;
+$error_wrap: $c-status-error, $c-status-error-fade, $c-status-error-light;
+
+$neutral_focus: $c-status-neutral, $c-status-neutral-fade;
+$success_focus: $c-status-success, $c-status-success-fade;
+$error_focus: $c-status-error, $c-status-error-fade;
+
+@mixin status_focus($main, $fade) {
+  @include focus {
+    @include single-box($main);
+    background-color: $main;
+    color: $fade;
+  }
+}
+
+@mixin exit($main, $fade) {
+  path.cross {
+    fill: $main;
+  }
+  path.tint {
+    fill: $fade;
+  }
+
+  @include focus {
+    outline-color: $main;
+
+    path.cross {
+      fill: $fade;
+    }
+    path.tint {
+      fill: $main;
+    }
+  }
+}
+
+@mixin wrap($main, $fade, $light) {
+  background-color: $fade;
+  border-color: $light;
+  color: $main;
+}
+
+.br-alert {
+  @include media-breakpoint-down(xs) {
+    font-size: $font-size-sm;
+  }
+  
+  &.center {
+    text-align: center;
+
+    .wrap {
+      justify-content: center;
+    }
+  }
+
+  .wrap {
+    @include wrap($neutral_wrap...);
+    border-radius: $border-radius;
+    border-width: $border-width;
+    border-style: solid;
+    padding: $space;
+
+    .btn.btn-link, a {
+      @include status_focus($neutral_focus...);
+    }
+
+    &.error {
+      @include wrap($error_wrap...);
+
+      .btn.btn-link, a {
+        @include status_focus($error_focus...);
+      }
+    }
+
+    &.success {
+      @include wrap($success_wrap...);
+
+      .btn.btn-link, a {
+        @include status_focus($success_focus...);
+      }
+    }
+
+    &.inline {
+      @include inline-block;
+    }
+
+    &.toggle {
+      justify-content: space-between;
+      align-items: center;
+      display: flex;
+      gap: $space;
+
+      &.inline {
+        display: inline-flex;
+      }
+    }
+
+    p {
+      margin-bottom: 0;
+
+      + p {
+        margin-top: 1rem;
+      }
+    }
+  }
+
+  .title {
+    margin-bottom: 0.25rem;
+    font-weight: 700;
+  }
+
+  .flex {
+    justify-content: space-between;
+    display: flex;    
+  }
+
+  .btn.exit {
+    border-radius: 50%;
+    border: none;
+    padding: 0;
+
+    @include focus {
+      outline: 0.1875rem solid;
+      box-shadow: none;
+    }
+    
+    &.error {
+      @include exit($error_focus...);
+    }
+
+    &.success {
+      @include exit($success_focus...);
+    }
+
+    &.neutral {
+      @include exit($neutral_focus...);
+    }
+  }
+}

package/scss/index.scss

@@ -14,6 +14,7 @@
 @import "close-icon";
 @import "table/index";
 @import "promo";
+@import "alert";
 
 // bootstrap component styles
 @import "btn";