barbican-reset 1.6.7 → 1.7.1

package/animations/confirm.js

@@ -0,0 +1,62 @@
+import gsap from 'gsap'
+import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'
+
+gsap.registerPlugin(DrawSVGPlugin);
+
+const fadeIn = {
+  duration: 0.3,
+  opacity: 0,
+  delay: 0.3,
+};
+
+const explode = {
+  ease: "power1.out",
+  opacity: 0,
+  scale: 1.5,
+};
+
+const defaults = {
+  duration: 0.6, 
+  ease: "power1.in", 
+  transformOrigin: "center"
+}
+
+export const animateEmail = () => {
+  const query = target => document.querySelector(`.card[email] ${target}`);
+  const title = query(".card-title");
+  const outline = query(".outline");
+  const arrow = query(".arrow");
+  const fold = query(".fold");
+  const tl = gsap.timeline({ defaults });
+
+  const clone = title.cloneNode(true);
+  clone.classList.add("clone");
+  title.after(clone);
+
+  tl.set(arrow, { opacity: 0 })
+    .from(title, fadeIn)
+    .set(clone, { opacity: 0.4 })
+    .from(outline, { drawSVG: "0%" }, "start")
+    .from(fold, { drawSVG: "0%", duration: 0.3 }, "start")
+    .to(clone, explode, "start")
+    .set(arrow, { opacity: 1 })
+    .from(arrow, { x: -6, ease: "power1.out" });
+}
+
+export const animateDone = () => {
+  const query = target => document.querySelector(`.card[done] ${target}`);
+  const title = query(".card-title");
+  const outline = query(".outline");
+  const tick = query(".tick");
+  const tl = gsap.timeline({ defaults });
+
+  const clone = title.cloneNode(true);
+  clone.classList.add("clone");
+  title.after(clone);
+
+  tl.from(title, fadeIn)
+    .set(clone, { opacity: 0.4 })
+    .from(outline, { drawSVG: "0%" }, "start")
+    .from(tick, { drawSVG: "0%", duration: 0.3 }, "start+=0.3")
+    .to(clone, explode, "start");
+}

package/animations/index.js

@@ -0,0 +1,8 @@
+import { animateEmail, animateDone } from './confirm'
+
+export default {
+  methods: {
+    animateEmail,
+    animateDone,
+  },
+};

package/components/br_confirm_done.vue

@@ -0,0 +1,29 @@
+<template>
+  <b-card confirm done>
+    <done-icon />
+    <b-card-title>Done</b-card-title>
+    <b-card-text v-if="$slots.default">
+      <slot />
+    </b-card-text>
+  </b-card>
+</template>
+
+<script>
+import Animations from 'barbican-reset/animations'
+import { DoneIcon } from 'barbican-reset/icons/confirm'
+
+export default {
+  mixins: [Animations],
+  components: {
+    DoneIcon,
+  },
+  props: {
+    type: {
+      type: String
+    },
+  },
+  mounted() {
+    this.animateDone();
+  },
+};
+</script>

package/components/br_confirm_email.vue

@@ -0,0 +1,25 @@
+<template>
+  <b-card confirm email>
+    <email-icon />
+    <b-card-title v-if="$slots.title">
+      <slot name="title" />
+    </b-card-title>
+    <b-card-text v-if="$slots.default">
+      <slot />
+    </b-card-text>
+  </b-card>
+</template>
+
+<script>
+import Animations from 'barbican-reset/animations'
+import { EmailIcon } from 'barbican-reset/icons/confirm'
+export default {
+  mixins: [Animations],
+  components: {
+    EmailIcon
+  },
+  mounted() {
+    this.animateEmail();
+  },
+};
+</script>

package/components/br_container.vue

@@ -70,7 +70,7 @@ export default {
 }
 
 .inner {
-  max-width: $layout-width-wide;
+  max-width: $layout-width-lg;
   margin: 0 auto;
 
   &:not(.footer) {
@@ -89,7 +89,7 @@ export default {
   }
   
   &.thin {
-    max-width: $layout-width-thin;  
+    max-width: $layout-width-sm;  
   }
 
   &.masthead {

package/components/br_footer/lower.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="br-footer-lower">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default { 
+  name: 'BrFooterLower'
+}
+</script>

package/components/br_footer/upper.vue

@@ -0,0 +1,17 @@
+<template>
+  <div :class="[`br-footer-upper`, { splash }]">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default { 
+  name: 'BrFooterUpper',
+  props: {
+    splash: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>

package/components/br_form_row.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="br-form-group">
+  <div class="br-form-row">
     <label v-if="label" :for="id">
       <strong>{{ label }}</strong> <span v-if="label && required">(required)</span><span v-if="label && optional">(optional)</span>
     </label>

package/components/br_wrap.vue

@@ -0,0 +1,24 @@
+<template>
+  <div :class="['br_wrap',{ title },{ videos },{ thin }]">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: Boolean,
+      default: false,
+    },
+    thin: {
+      type: Boolean,
+      default: false,
+    },
+    videos: {
+      type: Boolean,
+      default: false,
+    }
+  },
+}
+</script>

package/components/event_summary.vue

@@ -43,7 +43,7 @@ export default {
 @mixin subtitle {
   @include title;
   font-size: $h5-font-size;
-  color: $c-text-secondary;
+  color: $c-grey-steel;
   font-weight: normal;
 
   @include media-breakpoint-up(md) {

package/components/footer_logos.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+// dont think we need this any longer
 export default { 
   name: 'FooterLogos'
 }

package/helpers/mixins/_basket.scss

@@ -26,10 +26,4 @@
   @include summary-sm {
     grid-auto-flow: row;
   }  
-}
-
-@mixin table-row($gap: 0.75rem) {
-  border-bottom: 1px solid $c-grey-pearl;
-  padding-bottom: $gap;
-  padding-top: $gap;
 }

package/helpers/mixins/_br-alert.scss

@@ -0,0 +1,99 @@
+
+@mixin br-alert-wrap--setup {
+  border-radius: $border-radius-lg;
+  border-width: $border-width;
+  padding: 0.75rem 0.875rem;
+  border-style: solid;
+}
+
+@mixin br-alert-wrap--colors($main, $fade, $light) {
+  background-color: $fade;
+  border-color: $light;
+  color: $main;
+}
+
+@mixin br-alert-wrap--toggle {
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  gap: 0.625rem;
+
+  &.inline {
+    display: inline-flex;
+  }
+}
+
+@mixin br-alert-link($main, $fade) {
+  @include focus {
+    @include single-box($main);
+    background-color: $main;
+    color: $fade;
+  }
+}
+
+@mixin br-alert-exit($main, $fade) {
+  path.cross {
+    fill: $main;
+  }
+  path.tint {
+    fill: $fade;
+  }
+
+  @include focus {
+    outline-color: $main;
+
+    path.cross {
+      fill: $fade;
+    }
+    path.tint {
+      fill: $main;
+    }
+  }
+}
+
+@mixin br-alert--center {
+  text-align: center;
+
+  .wrap {
+    justify-content: center;
+  }
+}
+
+@mixin br-alert--title {
+  margin-bottom: 0.25rem;
+  font-weight: 700;
+}
+
+@mixin br-alert--flex {
+  justify-content: space-between;
+  display: flex;
+}
+
+@mixin br-alert--setup {
+  @include media-breakpoint-down(xs) {
+    font-size: $font-size-sm;
+  }
+
+  .title {
+    @include br-alert--title;
+  }
+
+  .flex {
+    @include br-alert--flex;
+  }
+
+  .btn.btn-exit {
+    
+    &.error {
+      @include br-alert-exit($error_focus...);
+    }
+
+    &.success {
+      @include br-alert-exit($success_focus...);
+    }
+
+    &.neutral {
+      @include br-alert-exit($neutral_focus...);
+    }
+  }
+}

package/helpers/mixins/_br-footer.scss

@@ -0,0 +1,27 @@
+
+@mixin br-footer-upper {
+  padding-top: 3.75rem;
+  display: grid;
+  gap: 1rem;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: 11rem auto;
+  }
+
+  &:not(.splash) {
+    padding-bottom: 3.75rem;
+  }
+
+  nav a {
+    @include focus {
+      @include single-box($white);
+      background-color: $white;
+      color: $black;
+    }
+  }
+}
+
+@mixin br-footer-lower {
+  padding-bottom: 1.875rem;
+  padding-top: 1.875rem;
+}

package/helpers/mixins/_br-form-row.scss

@@ -0,0 +1,29 @@
+
+@mixin br-form-row {
+  &:not(:last-of-type) {
+    margin-bottom: 1rem;
+  }
+
+  @include media-breakpoint-up(sm) {
+    grid-template-columns: 33fr 67fr;
+    gap: $gap-account;
+    display: grid;
+  }
+
+  > label {
+    @include media-breakpoint-up(sm) {
+      margin-top: 1rem;
+    }
+  }
+
+  label {
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  input {
+    width: 100%;
+    margin: 0;
+  }
+}

package/helpers/mixins/_buttons.scss

@@ -8,10 +8,10 @@
   font-weight: 700;
   transition: none;
   line-height: 1;
-  padding: 1em;
+  padding: 1em;  
 }
 
-@mixin button-display($display:'ib',$gap:1rem) {
+@mixin button-display($display:'ib',$gap:1em) {
   @if $display == 'ib' {
     vertical-align: middle;
     display: inline-block;
@@ -32,16 +32,18 @@
   $background: $c-brand-orange, 
   $color: $white, 
   $border: 1px,
-  $padding: 1rem,
-  $line: false,
-  $display: false) {
+  $padding: 1em,
+  $line-height: false,
+  $display: false,
+  $font-size: false) {
   border: $border solid $background;
   background-color: $background;
   padding: $padding;
   color: $color;
 
   @if $display { @include button-display($display, $padding * 0.625); }
-  @if $line { line-height: $line; }
+  @if $line-height { line-height: $line-height; }
+  @if $font-size { font-size: $font-size; }
 
   path {
     fill: $color;    
@@ -63,16 +65,18 @@
   $color: $c-brand-orange,
   $background: $white, 
   $border: 1px,
-  $padding: 1rem,
-  $line: false,
-  $display: false) {
+  $padding: 1em,
+  $line-height: false,
+  $display: false,
+  $font-size: false) {
   background-color: $background;
   border: $border solid $color;
   padding: $padding;
   color: $color;
 
   @if $display { @include button-display($display, $padding * 0.625); }
-  @if $line { line-height: $line; }
+  @if $line-height { line-height: $line-height; }
+  @if $font-size { font-size: $font-size; }
 
   path {
     fill: $color;    
@@ -95,7 +99,7 @@
   $color: inherit,
   $background: transparent,
   $padding: 0,
-  $line: false) {
+  $line-height: false) {
   background-color: $background;
   text-decoration: underline;
   font-weight: inherit;
@@ -103,7 +107,7 @@
   border-radius: 0;
   color: $color;
   
-  @if $line { line-height: $line; }
+  @if $line-height { line-height: $line-height; }
 }
 
 @mixin btn-primary {
@@ -116,10 +120,24 @@
   }
 }
 
+@mixin btn-returns {
+  @include button-solid(
+    $padding: 0.75em,
+    $font-size: $font-size-sm
+  );
+}
+
 @mixin btn-outline-primary {
   @include button-outline;
 }
 
+@mixin btn-resale {
+  @include button-outline(
+    $padding: 0.625em,
+    $font-size: $font-size-sm
+  );
+}
+
 @mixin btn-secondary {
   @include button-solid($c-grey-night);
 }
@@ -171,8 +189,8 @@
 @mixin btn-remove {
   @include button-solid(
     $background: $c-grey-night,
-    $padding: 0.625rem,
-    $line: 1.375);
+    $padding: 0.625em,
+    $line-height: 1.375);
 }
 
 @mixin btn-link {
@@ -186,7 +204,7 @@
 
 @mixin btn-video-help {
   @include button-link(
-    $padding: 1.25rem,
+    $padding: 1.25em,
     $background: $c-grey-alpine);
   font-weight: 700;
   text-align: left;

package/helpers/mixins/_card.scss

@@ -1,15 +1,53 @@
 
+@mixin card {
+  border: 1px solid $c-grey-pearl;
+  border-radius: $border-radius-lg;
+  background-color: white;
+
+  &:not(:first-child) {
+    margin-top: 1.25rem;
+  }
+}
+
+@mixin card-header {
+  border-bottom: 1px solid $c-grey-pearl;
+  padding: 1.5rem 1.75rem 1.25rem;
+  background-color: transparent;
+}
+
+@mixin card-subtitle {
+  color: $c-grey-steel !important;
+  font-size: $font-size-sm;
+  font-weight: 400;
+  margin: 0;
+}
+
+@mixin card-body {
+  padding: 1.75rem 1.75rem 1.5rem;
+  // padding: 1.5rem;
+}
+
+@mixin card-footer {
+  padding: 1rem;
+
+  @include media-breakpoint-up(md) {
+    border-top: 1px solid $c-grey-concrete;
+  }
+}
+
+@mixin card-img {
+  border: 1px solid $c-grey-concrete;
+  margin-bottom: 1rem;
+  max-width: 100%;
+}
+
 @mixin form-card {
   .card-header {
-    padding: 1.5rem 1.75rem 1.25rem;
+    @include card-header;
+    // padding: 1.5rem 1.75rem 1.25rem;
   }
   .card-body {
-    padding: 1.75rem 1.75rem 1.5rem;
+    @include card-body;
+    // padding: 1.75rem 1.75rem 1.5rem;
   }
-}
-
-@mixin clone($top:5.875) {
-  margin-top: -#{$top}rem;
-  margin-bottom: 0;
-  opacity: 0;
 }

package/helpers/mixins/_content.scss

@@ -8,8 +8,8 @@
 }
 
 @mixin content_masthead__inner {
-  max-width: $layout-width-wide;
-  padding: $space--large * 2 0;
+  max-width: $layout-width-lg;
+  padding: 3.75rem 0;
   margin: 0 auto;
 
   h1 {
@@ -23,7 +23,7 @@
 }
 
 @mixin content-main-content__inner {
-  max-width: $layout-width-wide;
+  max-width: $layout-width-lg;
   padding: 1.5rem 0;
   margin: 0 auto;
 

package/helpers/mixins/_table.scss

@@ -0,0 +1,51 @@
+
+@mixin table-row($gap: 0.75rem) {
+  border-bottom: 1px solid $c-grey-pearl;
+  padding-bottom: $gap;
+  padding-top: $gap;
+}
+
+@mixin table-link {
+  @include focus {
+    @include single-box($c-grey-night);
+    background-color: $c-grey-night;
+    color: $white;
+  }
+}
+
+@mixin default-table-style {
+  th, td {
+    @include media-breakpoint-up(md) {
+      &:not(:last-of-type) {
+        border-right: 1px solid $c-grey-pearl;
+      }
+  
+      &:last-of-type {
+        text-align: right;
+      }
+    }
+  }
+}
+
+$columns-orders: 10rem 8rem auto 8rem;
+$columns-details--header: auto 10rem 8rem;
+$columns-details--checkbox: 2.75rem auto 10rem 8rem;
+$columns-etickets: 8rem auto 8rem;
+$columns-gifts: 3fr 5fr 5fr 2fr 2fr;
+$columns-membership: auto 10rem 10rem 8rem;
+$columns-preferences: auto repeat(2, 5rem);
+$columns-tickets: 2fr 5fr 5fr 2fr;
+
+@import "table/basket";
+@import "table/details";
+@import "table/etickets";
+@import "table/gifts";
+@import "table/membership";
+@import "table/orders";
+@import "table/preferences";
+@import "table/resale";
+@import "table/section";
+@import "table/tickets";
+
+
+

package/helpers/mixins/index.scss

@@ -8,6 +8,9 @@
   top: $val;
 }
 
+@import "br-alert";
+@import "br-form-row";
+@import "br-footer";
 @import "account/orders";
 @import "basket";
 @import "buttons";
@@ -19,11 +22,4 @@
 @import "font";
 @import "loading";
 @import "input";
-
-@mixin table_link {
-  @include focus {
-    @include single-box($c-grey-night);
-    background-color: $c-grey-night;
-    color: $white;
-  }
-}
+@import "table";

package/helpers/mixins/input/_generic.scss

@@ -47,6 +47,7 @@
   border-radius: $border-radius-lg;
   background-color: $white;
   font-weight: 400;
+  display: block;
 
   @if $state != disabled {
     color: $c-grey-night;