barbican-reset 1.5.6 → 1.5.7

package/components/br_button/components.js

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

package/components/br_button/dot_typing.vue

@@ -0,0 +1,43 @@
+<template>
+  
+  <!-- https://codepen.io/nzbin/pen/GGrXbp -->
+
+  <div>
+
+    <svg ref="a" version="1.1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+      <path d="M12,7c0,2.8-2.2,5-5,5S2,9.8,2,7s2.2-5,5-5S12,4.2,12,7z"/>
+    </svg>
+
+    <svg ref="b" version="1.1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+      <path d="M12,7c0,2.8-2.2,5-5,5S2,9.8,2,7s2.2-5,5-5S12,4.2,12,7z"/>
+    </svg>
+
+    <svg ref="c" version="1.1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+      <path d="M12,7c0,2.8-2.2,5-5,5S2,9.8,2,7s2.2-5,5-5S12,4.2,12,7z"/>
+    </svg>
+
+  </div>
+
+</template>
+
+<script>
+import { gsap } from 'gsap'
+export default {
+  name: 'DotTyping',
+  mounted() {
+    const tl = gsap.timeline({ repeat: 9 });
+    const a = this.$refs.a;
+    const b = this.$refs.b;
+    const c = this.$refs.c;
+    const dots = [a,b,c];
+    const speed = 0.3;
+
+    tl.to(dots,{
+      stagger: speed, 
+      keyframes: [
+      { y: -8, duration: speed },
+      { y: 0, duration: speed }
+    ]});
+  }
+}
+</script>

package/components/br_button/outline_primary.vue

@@ -0,0 +1,60 @@
+<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>

package/components/br_button.vue

@@ -10,6 +10,12 @@
       </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'">
@@ -55,7 +61,7 @@
 
 <script>
 import { BButton } from 'bootstrap-vue'
-import { RemoveTicket } from './br_button/components'
+import { RemoveTicket, OutlinePrimary } from './br_button/components'
 
 export default {
   name: "BrButton",
@@ -79,7 +85,8 @@ export default {
   },
   components: {
     BButton,
-    RemoveTicket
+    RemoveTicket,
+    OutlinePrimary
   }
 }
 </script>

package/helpers/mixins/_buttons.scss

@@ -70,6 +70,10 @@
   @if $display { @include button-display($display, $padding * 0.625); }
   @if $line { line-height: $line; }
 
+  path {
+    fill: $color;    
+  }
+
   @include focus {
     border: $border solid $color;
     background-color: $color;
@@ -77,7 +81,7 @@
     box-shadow: none;
     outline: none;
 
-    svg {
+    path {
       fill: $background;
     }
   }

package/helpers/mixins/_focus.scss

@@ -1,7 +1,8 @@
 @mixin focus {
   &:not([disabled=disabled]) {
-    &[data-focus-visible-added], 
+    &[data-focus-visible-added],
     &:focus-visible,
+    &:focus,
     &:hover {
       @content;
     }

package/package.json

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