barbican-reset 1.4.4 → 1.4.8

package/components/br_button.vue

@@ -0,0 +1,61 @@
+<template>
+  <b-button @click="$emit('click')" :variant="variant">
+    
+    <template v-if="state === 'ready'">
+      <template v-if="$slots.ready">
+        <slot name="ready" />
+      </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 === 'error'">
+      <template v-if="$slots.error">
+        <slot name="error" />
+      </template>
+      <template v-else>
+        {{ state }}
+      </template>
+    </template>
+
+    <template v-else-if="state === 'updated'">
+      <template v-if="$slots.updated">
+        <slot name="updated" />
+      </template>
+      <template v-else>
+        {{ state }}
+      </template>
+    </template>
+
+  </b-button>  
+</template>
+
+<script>
+import { BButton } from 'bootstrap-vue'
+
+export default {
+  name: "BrButton",
+  props: {
+    state: {
+      type: String,
+      default: "ready"
+    },
+    variant: {
+      type: String
+    }
+  },
+  components: {
+    BButton
+  }
+}
+</script>

package/components/card_display.vue

@@ -73,7 +73,7 @@ export default {
 
 <style lang="scss" module>
 
-@import "../helpers/mixins/index.scss";
+@import "../helpers";
 
 .svg {
   fill: white;

package/components/fluid_iframe.vue

@@ -24,7 +24,7 @@ export default {
 
 <style lang="scss" module>
 
-@import "../helpers/mixins/index.scss";
+@import "../helpers";
 
 .component {
   border-radius: $border-radius-lg;

package/components/footer_upper.vue

@@ -35,6 +35,14 @@ export default {
     gap: 1rem;
   }
 
+  nav a {
+    @include focus {
+      @include single-box($white);
+      background-color: $white;
+      color: $black;
+    }
+  }
+
   &:not(.splash) {
     padding-bottom: 3.75rem;
   }

package/components/skip_link.vue

@@ -0,0 +1,37 @@
+<template>
+  <a :href="href" :class="$style.skiplink">
+    <slot></slot>
+  </a>
+</template>
+
+<script>
+export default {
+  name: "SkipLink",
+  props: {
+    href: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" module>
+
+.skiplink {
+  border: 0.25rem solid $c-grey-night;
+  border-radius: $border-radius-lg;
+  background-color: $white;
+  color: $c-grey-night;
+  position: absolute;
+  padding: 0.5rem;
+  z-index: -1;
+  opacity: 0;
+  
+  @include focus {
+    opacity: 1;
+    z-index: 2;
+  }
+}
+
+</style>

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/icons/city_of_london_lockup.vue

@@ -1,12 +1,10 @@
 <template>
-  <div :class="$style.lockup">
-    <a href="//www.cityoflondon.gov.uk" target="_blank">
-      <city-of-london-logo />
-    </a>
+  <a :class="$style.lockup" href="//www.cityoflondon.gov.uk" target="_blank">
+    <city-of-london-logo />
     <small>
       The City of London<br />Corporation is the founder<br />and principal funder of<br />the Barbican Centre
     </small>
-  </div>
+  </a>
 </template>
 
 <script>
@@ -21,10 +19,17 @@ export default {
 
 <style lang="scss" module>
 
+@import "../helpers";
+
 .lockup {
+  text-decoration: none;
   display: inline-flex;
   align-items: center;
-  gap: 0.625rem;  
+  gap: 0.625rem;
+
+  @include focus {
+    text-decoration: underline;
+  }
 }
 
 </style>

package/index.js

@@ -1,4 +1,3 @@
-
 import Container from './components/container'
 import EventSummary from './components/event_summary'
 import AccountTitle from './components/account_title'
@@ -22,6 +21,8 @@ import FluidIframe from './components/fluid_iframe'
 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, 
@@ -46,5 +47,7 @@ export {
   HelpRow,
   CardDisplay,
   VideoContent,
-  PaymentLogo
+  PaymentLogo,
+  SkipLink,
+  BrButton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.4.4",
+  "version": "1.4.8",
   "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;
+  }
 }

package/scss/table/_preferences.scss

@@ -67,6 +67,11 @@ table.preferences {
       input[type=radio] {
         position: relative;
         @include inset(auto);
+
+        @include focus {
+          outline: 0.15rem solid $blue;
+          outline-offset: 0.25rem;
+        }
       }
     }
   }