barbican-reset 1.5.7 → 1.6.0

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/components/br_button/components.js

@@ -1,9 +1,7 @@
 import RemoveTicket from './remove_ticket'
 import DotTyping from './dot_typing'
-import OutlinePrimary from './outline_primary'
 
 export {
   RemoveTicket,
-  DotTyping,
-  OutlinePrimary
+  DotTyping
 };

package/components/br_button/remove_ticket.vue

@@ -33,7 +33,7 @@
         <slot name="error" />
       </template>
       <template v-else>
-        {{ state }}
+        {{ state.toUpperCase() }}
       </template>
     </template>
 

package/components/br_button.vue

@@ -10,12 +10,6 @@
       </template>
     </remove-ticket>
 
-    <outline-primary v-else-if="variant === 'outline-primary'" :state="state">
-      <template v-for="(index, name) in $slots" v-slot:[name]>
-        <slot :name="name" />
-      </template>
-    </outline-primary>
-
     <template v-else>
 
       <template v-if="state === 'default'">
@@ -23,7 +17,7 @@
           <slot name="default" />
         </template>
         <template v-else>
-          {{ state }}
+          {{ titleCase(state) }}
         </template>
       </template>
 
@@ -31,9 +25,7 @@
         <template v-if="$slots.loading">
           <slot name="loading" />
         </template>
-        <template v-else>
-          {{ state }}
-        </template>
+        <dot-typing v-else />
       </template>
 
       <template v-else-if="state === 'loaded'">
@@ -41,7 +33,7 @@
           <slot name="loaded" />
         </template>
         <template v-else>
-          {{ state }}
+          {{ titleCase(state) }}
         </template>
       </template>
 
@@ -50,7 +42,7 @@
           <slot name="error" />
         </template>
         <template v-else>
-          {{ state }}
+          {{ titleCase(state) }}
         </template>
       </template>
 
@@ -61,7 +53,7 @@
 
 <script>
 import { BButton } from 'bootstrap-vue'
-import { RemoveTicket, OutlinePrimary } from './br_button/components'
+import { RemoveTicket, DotTyping } from './br_button/components'
 
 export default {
   name: "BrButton",
@@ -78,6 +70,11 @@ export default {
       default: "button"
     }
   },
+  methods: {
+    titleCase(str) {
+      return str.toLowerCase().split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+    }
+  },
   computed: {
     loading() {
       return this.state === "loading" ? "true" : "false";
@@ -86,7 +83,7 @@ export default {
   components: {
     BButton,
     RemoveTicket,
-    OutlinePrimary
+    DotTyping
   }
 }
 </script>

package/helpers/mixins/_buttons.scss

@@ -43,6 +43,10 @@
   @if $display { @include button-display($display, $padding * 0.625); }
   @if $line { line-height: $line; }
 
+  path {
+    fill: $color;    
+  }
+
   @include focus {
     @include double-box($color, $background);
     border: $border solid $background;

package/helpers/mixins/input/_generic.scss

@@ -8,11 +8,9 @@
     height: $size;
     margin: auto;
     width: $size;
-    right: auto;
     z-index: 3;
     left: 1rem;
-    bottom: 0;
-    top: 0;
+    top: 1rem;
 
     @if $state != disabled {
       cursor: pointer;

package/helpers/mixins/input/_radio.scss

@@ -9,11 +9,4 @@
   @include generic-input($state,$type);
   display: inline-block;
   margin: 0.25rem;
-}
-
-// margin: 0;
-// gap: 1rem;
-
-// &:not(:first-of-type) {
-//   margin-top: 1rem;
-// }
+}

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.7",
+  "version": "1.6.0",
   "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";

package/components/br_button/outline_primary.vue

@@ -1,60 +0,0 @@
-<template>
-  <div>
-
-    <template v-if="state === 'default'">
-      <template v-if="$slots.default">
-        <slot name="default" />
-      </template>
-      <template v-else>
-        {{ state }}
-      </template>
-    </template>
-
-    <template v-else-if="state === 'loading'">
-      <template v-if="$slots.loading">
-        <slot name="loading" />
-      </template>
-      <dot-typing v-else />
-    </template>
-
-    <template v-else-if="state === 'loaded'">
-      <template v-if="$slots.loaded">
-        <slot name="loaded" />
-      </template>
-      <template v-else>
-        {{ state }}
-      </template>
-    </template>
-
-    <template v-else-if="state === 'error'">
-      <template v-if="$slots.error">
-        <slot name="error" />
-      </template>
-      <template v-else>
-        {{ state }}
-      </template>
-    </template>
-
-  </div>  
-</template>
-
-<script>
-import { DotTyping } from './components'
-
-export default {
-  name: 'OutlinePrimary',
-  components: {
-    DotTyping
-  },
-  props: {
-    state: {
-      type: String,
-      default: "default"
-    }
-  },
-}
-</script>
-
-<style>
-
-</style>