barbican-reset 1.6.2 → 1.6.3

package/components/br_anchor.vue

@@ -0,0 +1,35 @@
+<template>
+
+  <a v-on:click="loading = true" :href="href" :class="variant ? `btn btn-${variant}` : ``">
+
+    <slot v-if="!loading" />
+
+    <dot-typing v-else />
+
+  </a>
+
+</template>
+
+<script>
+import { DotTyping } from './br_button/components'
+
+export default {
+  name: "BrAnchor",
+  data() {
+    return {
+      loading: false
+    }
+  },
+  props: {
+    variant: {
+      type: String
+    },
+    href: {
+      type: String
+    }
+  },
+  components: {
+    DotTyping
+  }
+}
+</script>

package/helpers/mixins/_buttons.scss

@@ -106,14 +106,6 @@
   @if $line { line-height: $line; }
 }
 
-@mixin btn-outline-header {
-  @include button-outline(
-    $color: $white, 
-    $background: $c-brand-orange,
-    $border: 0.125rem,
-    $display: 'flex');
-}
-
 @mixin btn-primary {
   @include button-solid;
   min-width: 8rem;
@@ -136,6 +128,14 @@
   @include button-outline($c-grey-night);
 }
 
+@mixin btn-outline-header {
+  @include button-outline(
+    $color: $white, 
+    $background: $c-brand-orange,
+    $border: 0.125rem,
+    $display: 'flex');
+}
+
 @mixin btn-input-edit {
   @include button-outline($c-grey-steel);
   background-color: $c-grey-pearl;
@@ -287,6 +287,15 @@
   }
 }
 
+@mixin btn-invisible {
+  color: inherit;
+  padding: 0;
+  
+  @include focus {
+    box-shadow: none;
+  }
+}
+
 @mixin btn-expand {
   display: block;
 }

package/index.js

@@ -22,6 +22,7 @@ import PaymentLogo from './components/payment_logo'
 import SkipLink from './components/skip_link'
 import BrAlert from './components/br_alert'
 import BrButton from './components/br_button'
+import BrAnchor from './components/br_anchor'
 import BrFormGroup from './components/br_form_group'
 
 export { 
@@ -49,5 +50,6 @@ export {
   VideoContent,
   PaymentLogo,
   SkipLink,
-  BrButton
+  BrButton,
+  BrAnchor
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "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/_btn.scss

@@ -80,6 +80,10 @@
     @include btn-carousel;
   }
 
+  &.btn-invisible {
+    @include btn-invisible;
+  }
+
   // modifyers
   &.expand {
     @include btn-expand;