barbican-reset 1.4.6 → 1.5.0

package/components/br_button/components.js

@@ -0,0 +1,5 @@
+import RemoveTicket from './remove_ticket'
+
+export {
+  RemoveTicket
+};

package/components/br_button/remove_ticket.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+
+    <template v-if="state === 'default'">
+      <template v-if="$slots.default">
+        <slot name="default" />
+      </template>
+      <template v-else>
+        remove
+      </template>
+    </template>
+
+    <template v-else-if="state === 'loading'">
+      <template v-if="$slots.loading">
+        <slot name="loading" />
+      </template>
+      <template v-else>
+        removing ...
+      </template>
+    </template>
+
+    <template v-else-if="state === 'loaded'">
+      <template v-if="$slots.loaded">
+        <slot name="loaded" />
+      </template>
+      <template v-else>
+        removed!
+      </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>
+export default {
+  name: 'RemoveTicket',
+  props: {
+    state: {
+      type: String,
+      default: "default"
+    }
+  },
+}
+</script>
+
+<style>
+
+</style>

package/components/br_button.vue

@@ -0,0 +1,77 @@
+<template>
+  <b-button @click="$emit('click')" :variant="variant" :type="type">
+
+    <remove-ticket v-if="variant === 'remove-ticket'" :state="state">
+      <template v-for="(index, name) in $slots" v-slot:[name]>
+        <slot :name="name" />
+      </template>
+    </remove-ticket>
+
+    <template v-else>
+
+      <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>
+        <template v-else>
+          {{ state }}
+        </template>
+      </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>
+
+    </template>
+
+  </b-button>  
+</template>
+
+<script>
+import { BButton } from 'bootstrap-vue'
+import { RemoveTicket } from './br_button/components'
+
+export default {
+  name: "BrButton",
+  props: {
+    state: {
+      type: String,
+      default: "default"
+    },
+    variant: {
+      type: String
+    },
+    type: {
+      type: String,
+      default: "button"
+    }
+  },
+  components: {
+    BButton,
+    RemoveTicket
+  }
+}
+</script>

package/components/skip_link.vue

@@ -19,20 +19,14 @@ export default {
 <style lang="scss" module>
 
 .skiplink {
-  border: 0.25rem solid $black;
+  border: 0.25rem solid $c-grey-night;
+  border-radius: $border-radius-lg;
   background-color: $white;
-  display: inline-block;
-  border-radius: 0.5rem;
+  color: $c-grey-night;
   position: absolute;
   padding: 0.5rem;
-  color: $black;
-  margin: auto;
-  width: 12rem;
   z-index: -1;
-  top: 0.5rem;
   opacity: 0;
-  right: 0;
-  left: 0;
   
   @include focus {
     opacity: 1;

package/helpers/mixins/_buttons.scss

@@ -74,6 +74,10 @@
     border: $border solid $color;
     background-color: $color;
     color: $background;
+
+    svg {
+      fill: $background;
+    }
   }
 }
 

package/helpers/mixins/index.scss

@@ -17,4 +17,12 @@
 @import "festival.scss";
 @import "focus.scss";
 @import "font.scss";
-@import "loading.scss";
+@import "loading.scss";
+
+@mixin table_link {
+  @include focus {
+    @include single-box($c-grey-night);
+    background-color: $c-grey-night;
+    color: $white;
+  }
+}

package/index.js

@@ -1,4 +1,3 @@
-
 import Container from './components/container'
 import EventSummary from './components/event_summary'
 import AccountTitle from './components/account_title'
@@ -23,6 +22,7 @@ import HelpRow from './components/help_row'
 import VideoContent from './components/video_content'
 import PaymentLogo from './components/payment_logo'
 import SkipLink from './components/skip_link'
+import BrButton from './components/br_button'
 
 export { 
   Loader, 
@@ -48,5 +48,6 @@ export {
   CardDisplay,
   VideoContent,
   PaymentLogo,
-  SkipLink
+  SkipLink,
+  BrButton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.4.6",
+  "version": "1.5.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/table/_etickets.scss

@@ -51,4 +51,8 @@ table.etickets {
       display: none;
     }
   }
+
+  a {
+    @include table_link;
+  }
 }

package/scss/table/_orders.scss

@@ -13,7 +13,7 @@ table.orders {
     }
   }
 
-  thead tr, tbody tr.active {
+  thead tr, tbody tr {
     border: 1px solid $c-grey-pearl;
     display: grid;
 
@@ -44,6 +44,12 @@ table.orders {
     }
   }
 
+  tr.full-width {
+    justify-content: center;
+    grid-template: none;
+    border: none;
+  }
+
   label {
     font-size: $font-size-lg;
 
@@ -51,4 +57,8 @@ table.orders {
       display: none;
     }
   }
+
+  a {
+    @include table_link;
+  }
 }