barbican-reset 1.5.3 → 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/components/related_card.vue

@@ -2,11 +2,12 @@
   <b-card related no-body>
     <b-img v-if="content.image" :src="content.image" />
     <b-card-body>
-      <b-link :href="content.link" target="_blank">
-        <b-card-title v-html="content.title" />
-        <b-card-sub-title v-if="content.start_date" v-html="handleDate(content.start_date)" />
-        <b-card-text v-html="limitLength(content.description)" />
-      </b-link>
+      <b-card-title>
+        <b-link v-if="content.title" v-html="content.title" :href="content.link" target="_blank" />
+        <b-link v-else :href="content.link" target="_blank">More Info</b-link>
+      </b-card-title>
+      <b-card-sub-title v-if="content.start_date" v-html="handleDate(content.start_date)" />
+      <b-card-text v-html="limitLength(content.description)" />
     </b-card-body>
   </b-card>
 </template>

package/components/skip_link.vue

@@ -29,6 +29,7 @@ export default {
   opacity: 0;
   
   @include focus {
+    outline: none;
     opacity: 1;
     z-index: 2;
   }

package/helpers/mixins/_buttons.scss

@@ -70,13 +70,18 @@
   @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;
     color: $background;
+    box-shadow: none;
     outline: none;
 
-    svg {
+    path {
       fill: $background;
     }
   }
@@ -95,10 +100,6 @@
   color: $color;
   
   @if $line { line-height: $line; }
-
-  @include focus {
-    @content;
-  }
 }
 
 @mixin btn-outline-header {
@@ -112,6 +113,11 @@
 @mixin btn-primary {
   @include button-solid;
   min-width: 8rem;
+
+  &[disabled=disabled] {
+    @include button-solid($c-grey-night);
+    cursor: not-allowed;
+  }
 }
 
 @mixin btn-outline-primary {
@@ -157,7 +163,8 @@
 }
 
 @mixin btn-link {
-  @include button-link {
+  @include button-link;
+  @include focus {
     @include single-box($c-grey-night);
     background-color: $c-grey-night;
     color: $white;
@@ -167,17 +174,20 @@
 @mixin btn-video-help {
   @include button-link(
     $padding: 1.25rem,
-    $background: $c-grey-alpine) {
-    background-color: $c-grey-steel;
-    color: $white;
-  }
+    $background: $c-grey-alpine);
   font-weight: 700;
   text-align: left;
   width: 100%;
+
+  @include focus {
+    background-color: $c-grey-steel;
+    color: $white;
+  }
 }
 
 @mixin btn-exit {
-  @include button-link {
+  @include button-link;
+  @include focus {
     @include single-box($c-grey-night);
     background-color: $white;
     border-radius: 50%;
@@ -264,20 +274,6 @@
   }
 }
 
-@mixin btn-invisible {
-  &, &:focus {
-    background: transparent;
-    line-height: 1;
-    padding: 0;
-
-    @include focus {
-      background: transparent;
-      line-height: 1;
-      padding: 0;
-    }
-  }
-}
-
 @mixin btn-expand {
   display: block;
 }

package/helpers/mixins/_focus.scss

@@ -1,11 +1,12 @@
 @mixin focus {
-  // &:focus { <-- better remove this, but could cause bugs
-  //   box-shadow: none; 
-  //   outline: none; 
-  // }
-  &:hover, &:focus-visible, &[data-focus-visible-added] {
-    @content;
-  }
+  &:not([disabled=disabled]) {
+    &[data-focus-visible-added],
+    &:focus-visible,
+    &:focus,
+    &:hover {
+      @content;
+    }
+  }  
 }
 
 @mixin box-setup {

package/helpers/mixins/_input.scss

@@ -1,19 +1,7 @@
 
+@import "input/generic";
+@import "input/status";
 @import "input/checkbox";
+@import "input/dropdown";
 @import "input/radio";
-
-@mixin all-text-inputs {
-  border: solid $border-width $c-border-strong;
-  padding: 0.875rem 0.875rem 0.75rem;
-  background-color: $c-grey-alpine;
-  border-radius: $border-radius-lg;  
-}
-
-@mixin input-dropdown {
-  background-color: $c-grey-alpine;
-  border-radius: $border-radius-lg;
-  border-color: $c-grey-concrete;
-  padding: 0.875rem 0.5rem;
-  color: $c-grey-night;
-  width: 100%;
-}
+@import "input/text";

package/helpers/mixins/input/_checkbox.scss

@@ -1,46 +1,6 @@
-@mixin checkbox-input {
-  position: relative;
-  display: grid;
-
-  input[type=checkbox] {
-    $size: 0.875rem;
-    position: absolute;
-    cursor: pointer;
-    height: $size;
-    margin: auto;
-    width: $size;
-    right: auto;
-    z-index: 3;
-    left: 1rem;
-    bottom: 0;
-    top: 0;
-
-    @include focus {
-      outline: none;
-
-      ~ label {
-        @include single-box($c-grey-steel, 0.0625rem);
-        border: 1px solid $c-grey-steel;
-        background-color: $c-grey-alpine;
-      }
-      &:checked ~ label {
-        @include focus_colors;
-        @include single-box($c-status-neutral, 0.0625rem);
-      }      
-    }
-
-    &:checked ~ label {
-      @include focus_colors;
-    }
-  }
-
-  label {
-    padding: 0.875rem 0.75rem 0.625rem 2.5rem;
-    border: 1px solid $c-grey-concrete;
-    border-radius: $border-radius-lg;
-    background-color: $white;  
-    color: $c-grey-night;
-    font-weight: normal;
-    cursor: pointer;
-  }
+@mixin checkbox-input(
+  $state: neutral,
+  $type: checkbox) {
+  @include generic-input($state,$type);
+  display: block;
 }

package/helpers/mixins/input/_dropdown.scss

@@ -0,0 +1,9 @@
+
+@mixin input-dropdown {
+  background-color: $c-grey-alpine;
+  border-radius: $border-radius-lg;
+  border-color: $c-grey-concrete;
+  padding: 0.875rem 0.5rem;
+  color: $c-grey-night;
+  width: 100%;
+}

package/helpers/mixins/input/_generic.scss

@@ -0,0 +1,62 @@
+@mixin generic-input($state,$type) {
+  position: relative;
+  padding: 0;
+
+  input[type=#{$type}] {
+    $size: 0.875rem;
+    position: absolute;
+    height: $size;
+    margin: auto;
+    width: $size;
+    right: auto;
+    z-index: 3;
+    left: 1rem;
+    bottom: 0;
+    top: 0;
+
+    @if $state != disabled {
+      cursor: pointer;
+
+      @include focus {
+        outline: none;
+        
+        ~ label {
+          @include single-box($c-grey-steel, 0.0625rem);
+          border: 1px solid $c-grey-steel;
+          background-color: $c-grey-alpine;
+        }
+        
+        &:checked ~ label {
+          @include focus_colors;
+          @include single-box($c-status-neutral, 0.0625rem);
+        }
+      }
+  
+      &:checked ~ label {
+        @include focus_colors;
+      }
+    }
+  }
+
+  label {
+    padding: 0.75rem 0.75rem 0.625rem 2.75rem;
+    border: 1px solid $c-grey-concrete;
+    border-radius: $border-radius-lg;
+    background-color: $white;
+    font-weight: 400;
+
+    @if $state != disabled {
+      color: $c-grey-night;
+      cursor: pointer;
+    }
+
+    @if $state == disabled {
+      color: $c-grey-steel;
+      cursor: not-allowed;
+
+      &.spx-label-field__checkout, .spx-data-delivery-type {
+        text-decoration: line-through;
+      }
+    }
+  }
+}

package/helpers/mixins/input/_radio.scss

@@ -3,77 +3,17 @@
   margin: -0.25rem;
 }
 
-@mixin radio-input($state:neutral,$display:inline-block) {
-  position: relative;
-  display: $display;
-  padding: 0;
-
-  @if $display != flex {
-    margin: 0.25rem;
-  } @else {
-    margin: 0;
-    gap: 1rem;
-
-    &:not(:first-of-type) {
-      margin-top: 1rem;
-    }
-  }
-
-  input[type=radio] {
-    $size: 0.875rem;
-    position: absolute;
-    height: $size;
-    margin: auto;
-    width: $size;
-    right: auto;
-    z-index: 3;
-    left: 1rem;
-    bottom: 0;
-    top: 0;
-
-    @if $state != disabled {
-      cursor: pointer;
-
-      @include focus {
-        outline: none;
-        
-        ~ label {
-          @include single-box($c-grey-steel, 0.0625rem);
-          border: 1px solid $c-grey-steel;
-          background-color: $c-grey-alpine;
-        }
-        
-        &:checked ~ label {
-          @include focus_colors;
-          @include single-box($c-status-neutral, 0.0625rem);
-        }
-      }
-  
-      &:checked ~ label {
-        @include focus_colors;
-      }
-    }
-  }
-
-  label {
-    padding: 0.75rem 0.75rem 0.625rem 2.75rem;
-    border: 1px solid $c-grey-concrete;
-    border-radius: $border-radius-lg;
-    background-color: $white;
-    font-weight: 400;
-
-    @if $state != disabled {
-      color: $c-grey-night;
-      cursor: pointer;
-    }
+@mixin radio-input(
+  $state: neutral,
+  $type: radio) {
+  @include generic-input($state,$type);
+  display: inline-block;
+  margin: 0.25rem;
+}
 
-    @if $state == disabled {
-      color: $c-grey-steel;
-      cursor: not-allowed;
+// margin: 0;
+// gap: 1rem;
 
-      .spx-data-delivery-type {
-        text-decoration: line-through;
-      }
-    }
-  }
-}
+// &:not(:first-of-type) {
+//   margin-top: 1rem;
+// }

package/helpers/mixins/input/_status.scss

@@ -0,0 +1,16 @@
+@mixin status-input($color) {
+  @include focus {
+    &:checked ~ label {
+      @include single-box(map-get($color, base), 0.0625rem);
+      border: 1px solid map-get($color, base);
+      background-color: map-get($color, fade);
+      color: map-get($color, base);
+    }
+  }
+
+  &:checked ~ label {
+    border: 1px solid map-get($color, base);
+    background-color: map-get($color, fade);
+    color: map-get($color, base);
+  }
+}

package/helpers/mixins/input/_text.scss

@@ -0,0 +1,7 @@
+
+@mixin all-text-inputs {
+  border: solid $border-width $c-border-strong;
+  padding: 0.875rem 0.875rem 0.75rem;
+  background-color: $c-grey-alpine;
+  border-radius: $border-radius-lg;  
+}

package/icons/city_of_london_lockup.vue

@@ -29,6 +29,7 @@ export default {
 
   @include focus {
     text-decoration: underline;
+    outline: none;
   }
 }
 

package/package.json

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

package/scss/_atomic.scss

@@ -64,4 +64,8 @@ $aligns: "left", "center", "right";
 
 .width-100 {
   width: 100%;
+}
+
+.background-color-alt {
+  background-color: $c-page-global-content-bg-alt;
 }

package/scss/_btn.scss

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

package/scss/_checkbox-group.scss

@@ -1,85 +1,17 @@
 
-.checkbox-group {
-  
-  .custom-control {
-    position: relative;
+.custom-checkbox {
+  @include checkbox-input;
 
-    &:not(:last-of-type) {
-      margin-bottom: 0.5rem;
-    }
-  
-    input[type=checkbox] {
-      $size: 0.875rem;
-      position: absolute;
-      cursor: pointer;
-      height: $size;
-      margin: auto;
-      width: $size;
-      right: auto;
-      z-index: 3;
-      left: 1rem;
-      bottom: 0;
-      top: 0;
-
-      @mixin focus_colors {
-        background-color: $c-status-neutral-fade;
-        border: 1px solid $c-status-neutral;
-        color: $c-status-neutral;
-      }
-
-      &:hover, &[data-focus-visible-added] {
-        &:focus {
-          box-shadow: none; 
-          outline: none; 
-        }
-        
-        ~ label {
-          @include single-box($c-grey-steel, 0.0625rem);
-          border: 1px solid $c-grey-steel;
-          background-color: $c-grey-alpine;
-        }
-
-        &:checked ~ label {
-          @include focus_colors;
-          @include single-box($c-status-neutral, 0.0625rem);
-        }
-      }
-
-      &:checked ~ label {
-        @include focus_colors;
-      }
-    }
-  
-    label {
-      padding: 0.875rem 0.75rem 0.625rem 2.5rem;
-      border: 1px solid $c-grey-concrete;
-      border-radius: $border-radius-lg;
-      background-color: $white;  
-      color: $c-grey-night;
-      cursor: pointer;
-    }
-  }
+  &:not(:last-of-type) {
+    margin-bottom: 0.5rem;
+  }    
 }
 
 @each $status, $color in $statees {
   @if $status != 'neutral' {
-    .checkbox-group.#{$status} {
-      input[type=checkbox] {
-        &:hover, &[data-focus-visible-added] {
-          &:checked ~ label {
-            @include single-box(map-get($color, base), 0.0625rem);
-            border: 1px solid map-get($color, base);
-            background-color: map-get($color, fade);
-            color: map-get($color, base);
-          }
-        }
-  
-        &:checked ~ label {
-          border: 1px solid map-get($color, base);
-          background-color: map-get($color, fade);
-          color: map-get($color, base);
-        }
-      }
-    }    
+    [#{$status}] input[type=radio],
+    input[type=radio][#{$status}] {
+      @include status-input($color);
+    }
   }
-}
+}

package/scss/_input.scss

@@ -1,6 +1,4 @@
 
-@import "input/radio";
-
 .form-control {
   @include focus {
     @include input-focus;
@@ -11,12 +9,6 @@ input::placeholder {
   color: $c-grey-concrete;
 }
 
-input[type=number], input[type=text] {
-  @include focus {
-    @include input-focus;
-  }
-}
-
 input[type=checkbox],
 input[type=radio] {
   margin-bottom: 0.5rem;
@@ -29,6 +21,15 @@ input[type=submit] {
   appearance: none;
 }
 
+input[type=number] {
+  @include focus {
+    @include input-focus;
+  }
+}
+
 #{$all-text-inputs} {
   @include all-text-inputs;
+  @include focus {
+    @include input-focus;
+  }
 }

package/scss/_radio-group.scss

@@ -0,0 +1,17 @@
+
+[role=radiogroup] {
+  @include radio-group;
+}
+
+.custom-radio {
+  @include radio-input;
+}
+
+@each $status, $color in $statees {
+  @if $status != 'neutral' {
+    [#{$status}] input[type=radio],
+    input[type=radio][#{$status}] {
+      @include status-input($color);
+    }
+  }
+}

package/scss/card/_related.scss

@@ -13,11 +13,21 @@
 
   .card-title {
     font-size: $font-size-lg;
+    margin-bottom: 0.75rem;
+
+    a {
+      @include btn-link;
+    }
   }
 
+  .card-subtitle[date],
   .card-text:not(:last-child) {
     margin-bottom: 0.5rem;
   }
+
+  * + .card-text[date] {
+    margin-top: 0.75rem;
+  }
 }
 
 .card[related][hero=true] {

package/scss/card/_slim.scss

@@ -0,0 +1,11 @@
+
+.card[slim] {
+
+  .card-header {
+    padding: 1.5rem 1.25rem 1rem;
+  }
+
+  .card-body {
+    padding: 1.5rem 1.25rem;
+  }
+}

package/scss/card/index.scss

@@ -7,6 +7,7 @@
 @import "related";
 @import "block";
 @import "membership";
+@import "slim";
 
 .card {
   border: 1px solid $c-grey-pearl;

package/scss/index.scss

@@ -18,7 +18,7 @@
 // bootstrap component styles
 @import "btn";
 @import "card/index";
-@import "card-group";
+@import "card-deck";
 @import "checkbox";
 @import "checkbox-group";
 @import "custom-select";

package/scss/input/_radio.scss

@@ -1,31 +0,0 @@
-
-.radio-group {
-  @include radio-group;
-}
-
-.custom-radio {
-  @include radio-input;
-}
-
-@each $status, $color in $statees {
-  @if $status != 'neutral' {
-    .radio-group.#{$status} {
-      input[type=radio] {
-        @include focus {
-          &:checked ~ label {
-            @include single-box(map-get($color, base), 0.0625rem);
-            border: 1px solid map-get($color, base);
-            background-color: map-get($color, fade);
-            color: map-get($color, base);
-          }
-        }
-  
-        &:checked ~ label {
-          border: 1px solid map-get($color, base);
-          background-color: map-get($color, fade);
-          color: map-get($color, base);
-        }
-      }
-    }
-  }
-}