barbican-reset 1.3.8 → 1.4.2

package/components/card_display.vue

@@ -1,5 +1,11 @@
 <template>
   <div :class="styleComponent">
+    <div v-if="type === 'concert'" :class="$style.icon">
+      <div :class="[`btn btn-secondary`, { hero }]">
+        <template v-if="hero">Live event</template>
+        <live-icon :class="$style.svg" />
+      </div>
+    </div>
     <img :class="$style.image" :src="image">
     <div v-if="expired" :class="$style.title">
       <h4>Expired</h4>
@@ -8,8 +14,10 @@
 </template>
 
 <script>
+import { LiveIcon } from 'barbican-reset/icons/stream'
 export default {
   name: "CardDisplay",
+  components: { LiveIcon },
   props: {
     image: {
       type: String,
@@ -22,7 +30,11 @@ export default {
     hero: {
       type: Boolean,
       default: false,
-    }
+    },
+    type: {
+      type: String,
+      default: 'concert',
+    },
   },
   computed: {
     styleComponent() {
@@ -31,35 +43,74 @@ export default {
       if (this.hero) { output.push(style.hero); }
       return output;
     },
+    styleButton() {
+      const style = this.$style;
+      let output = [style.button];
+      if (this.hero) { output.push(style.hero); }
+      return output;
+    }
   }
 }
 </script>
 
+<style lang="scss" scoped>
+
+.btn.btn-secondary {
+  &:not(.hero) {
+    border-radius: 50%;
+    padding: 0.5rem;
+  }
+
+  &.hero {
+    align-items: center;
+    padding: 0.75rem;
+    display: flex;
+    gap: 0.5rem;
+  }
+}
+
+</style>
+
 <style lang="scss" module>
 
+.svg {
+  fill: white;
+}
+
 .component {
   padding-top: 56.25%;
   position: relative;
   overflow: hidden;
   color: $white;
+}
 
-  .image {
-    position: absolute;
-    height: auto;
-    width: 100%;
-    inset: 0;
-  }
+.icon {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+}
 
-  .title {
-    background-color: rgba($c-grey-midnight, 0.85);
-    place-items: center;
-    position: absolute;
-    display: grid;
-    inset: 0;
-  }
+.image {
+  position: absolute;
+  height: auto;
+  width: 100%;
+  inset: 0;
+}
+
+.title {
+  background-color: rgba($c-grey-midnight, 0.85);
+  place-items: center;
+  position: absolute;
+  display: grid;
+  inset: 0;
 }
 
 .component.hero {
+  .icon {
+    right: 1.5rem;
+    top: 1.5rem;
+  }
+  
   .title {
     h4 {
       font-size: $h2-font-size;

package/components/payment_logo.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <svg :class="$style.logo" role="presentation">
+      <slot />
+    </svg>
+    <div :class="$style.label">{{ label }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PaymentLogo',
+  props: {
+    label: {
+      type: String,
+      default: 'visa'
+    }
+  }
+}
+</script>
+
+<style lang="scss" module>
+
+  .label {
+    @include hide-text;
+    text-transform: uppercase;
+    height: 0;
+    width: 0;
+  }
+
+  .logo {
+    display: block;
+    height: 2.5rem;
+    width: 4rem;
+  }
+
+</style>

package/components/related_row.vue

@@ -17,15 +17,17 @@ export default {
   margin-left: auto;
   max-width: 20rem;
 
+  @include media-breakpoint-down(md) {
+    .card + .card {
+      margin-top: 1.25rem;
+    }
+  }
+
   @include media-breakpoint-up(md) {
     grid-template-columns: repeat(3, 1fr);
     column-gap: 1.25rem;
     max-width: 60rem;
     display: grid;
-
-    .card {
-      margin-bottom: 0;
-    }
   }
 }
 

package/components/video_content.vue

@@ -0,0 +1,78 @@
+<template>
+
+  <div>
+
+    <fluid-iframe v-if="data.type === 'jwplayer'" :src="data.url" />
+
+    <template v-if="data.type === 'brightcove'">
+
+      <div v-html="data.markup" :class="$style.brightcove"></div>
+
+      <alert v-if="data.isExpired" error center inline>Event has passed.</alert>
+
+    </template>
+
+    <h2 v-html="data.title" class="margin-bottom-1"></h2>
+
+    <p v-html="data.lead_description"></p>
+
+    <template v-if="data.long_description">
+
+      <p v-html="data.long_description"></p>
+
+    </template>
+
+    <template v-if="data.expires">
+
+      <p>Until {{ formatDateTime(data.expires) }}</p>
+
+    </template>
+
+    <template v-if="data.programme">
+
+      <p>Read tonight's <a :href="data.programme" target="_blank">Digital Programme</a></p>
+
+    </template>
+
+  </div>  
+
+</template>
+
+<script>
+import { FluidIframe, Alert } from 'barbican-reset'
+export default {
+  props: {
+    data: {
+      type: Object
+    },
+    concert: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  created() {
+    if (this.concert) {
+      this.data.expires = this.data.brightcove.expires;
+      this.data.markup = this.data.brightcove.markup;
+      this.data.script = this.data.brightcove.script;
+      this.data.isExpired = this.data.brightcove.isExpired;
+    }
+  },
+  components: { FluidIframe, Alert },
+  methods: {
+    formatDateTime(date) {
+      return this.$moment(date).format("LT ddd D MMM YYYY");
+    }
+  }
+}
+</script>
+
+<style lang="scss" module>
+
+.brightcove {
+  border-radius: $border-radius-lg;
+  margin-bottom: 2rem;
+  overflow: hidden;
+}
+
+</style>

package/helpers/mixins/_buttons.scss

@@ -197,11 +197,22 @@
   }
 }
 
+@mixin btn-remove-gift {
+  @include media-breakpoint-down(xl) {
+    @include btn-remove;
+    width: 100%;
+  }
+  @include media-breakpoint-up(xl) {
+    @include btn-link;
+  }
+}
+
 @mixin btn-membership-card {
   @include button-outline(
     $color: $white,
     $background: transparent
   );
+
   @include focus {
     &.member {
       color: $c-member;
@@ -226,6 +237,28 @@
   fill: $white;
 }
 
+@mixin btn-carousel {
+  @include button-solid($c-grey-night);
+  @include single-box($white);
+  border-radius: 50%;
+  font-size: 0;
+  fill: $white;
+
+  @include media-breakpoint-down(lg) {
+    padding: 0.75rem;
+  }
+
+  &:disabled {
+    background-color: $c-grey-pearl;
+    border-color: $c-grey-pearl;
+    opacity: 1;
+  }
+
+  label {
+    visibility: hidden;
+  }
+}
+
 @mixin btn-invisible {
   &, &:focus {
     background: transparent;

package/helpers/variables/index.scss

@@ -1,5 +1,5 @@
 // paths more explicit for gulp-sass
 @import "colors/index.scss";
-@import "layout/index.scss";
+@import "layout.scss";
 @import "breakpoints.scss";
 @import "typography.scss";

package/icons/arrow.vue

@@ -1,9 +1,5 @@
 <template>
-  <svg 
-    xmlns="http://www.w3.org/2000/svg" 
-    viewBox="0 0 83.2 80.9"
-    height="12"
-    width="12">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83.2 80.9" height="12" width="12">
     <path fill="white" d="M42.8.4L31.9 11.2l23.7 22.2H0V48h55.6l-24 21.6 11.2 11.3 40.4-40.7z"></path>
   </svg>
 </template>

package/icons/arrow_back.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+    <path d="M17.51 3.87L15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13z"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ArrowBack'
+}
+</script>

package/icons/arrow_forward.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+    <polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ArrowForward'
+}
+</script>

package/icons/index.js

@@ -4,6 +4,8 @@ import CityOfLondonLockup from './city_of_london_lockup'
 import ArrowIcon from './arrow'
 import BackArrow from './back_arrow'
 import CartIcon from './cart'
+import ArrowBack from './arrow_back'
+import ArrowForward from './arrow_forward'
 
 export {
   BarbicanLogo,
@@ -11,5 +13,7 @@ export {
   CityOfLondonLockup,
   ArrowIcon,
   BackArrow,
-  CartIcon
+  CartIcon,
+  ArrowBack,
+  ArrowForward
 };

package/icons/stream/live.vue

@@ -1,106 +1,11 @@
 <template>
-  <div class="live-icon__container">
-    <div class="live-icon__title">Live event</div>
-    <svg
-      class="live-icon__svg"
-      :class="{ animate: animate }"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 14 15"
-    >
-      <path
-        class="big-echo"
-        d="M14,7.5c0-2.8-1.1-5.3-2.9-7.1l-1,1.1c1.5,1.5,2.5,3.7,2.5,6s-1,4.5-2.5,6l1.1,1.1 C12.9,12.8,14,10.3,14,7.5z"
-      />
-      <path
-        class="small-echo"
-        d="M8.6,7.5C8.6,9,8,10.4,7,11.4l1,1.1c1.3-1.3,2-3,2-5S9.2,3.8,8,2.6l-1.1,1C7.9,4.6,8.6,6,8.6,7.5z"
-      />
-      <path
-        class="echo-ball"
-        d="M6,7.5c0,1.7-1.3,3-3,3s-3-1.3-3-3s1.3-3,3-3S6,5.8,6,7.5z"
-      />
-    </svg>
-  </div>
+  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+    <path d="M7.76,16.24C6.67,15.16,6,13.66,6,12s0.67-3.16,1.76-4.24l1.42,1.42C8.45,9.9,8,10.9,8,12c0,1.1,0.45,2.1,1.17,2.83 L7.76,16.24z M16.24,16.24C17.33,15.16,18,13.66,18,12s-0.67-3.16-1.76-4.24l-1.42,1.42C15.55,9.9,16,10.9,16,12 c0,1.1-0.45,2.1-1.17,2.83L16.24,16.24z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z M20,12 c0,2.21-0.9,4.21-2.35,5.65l1.42,1.42C20.88,17.26,22,14.76,22,12s-1.12-5.26-2.93-7.07l-1.42,1.42C19.1,7.79,20,9.79,20,12z M6.35,6.35L4.93,4.93C3.12,6.74,2,9.24,2,12s1.12,5.26,2.93,7.07l1.42-1.42C4.9,16.21,4,14.21,4,12S4.9,7.79,6.35,6.35z"/>
+  </svg>
 </template>
 
 <script>
-import { gsap } from "gsap";
 export default {
-  name: "LiveIcon",
-  props: {
-    animate: {
-      type: Boolean,
-    },
-  },
-  methods: {
-    doAnimate(input) {
-      if (input) {
-        let tl = gsap.timeline({ repeat: -1, repeatDelay: 0.5 });
-        let parent = ".live-icon__svg.animate";
-        let all = [
-          `${parent} .echo-ball`,
-          `${parent} .small-echo`,
-          `${parent} .big-echo`,
-        ];
-        tl.set(all, {
-          opacity: 0.1,
-        }).to(all, {
-          opacity: 1,
-          stagger: 0.3,
-          duration: 1,
-        });
-      }
-    },
-  },
-  mounted() {
-    this.doAnimate(this.animate);
-  },
+  name: "LiveIcon"
 };
 </script>
-
-<style lang="scss" scoped>
-
-.live-icon {
-  &__container {
-    background-color: $c-grey-midnight;
-    border-radius: $border-radius;
-    font-size: $font-size-sm;
-    padding: 0.6rem 0.8rem;
-    border-color: white;
-    position: absolute;
-    font-weight: bold;
-    border: 1px solid;
-    color: white;
-    right: 1rem;
-    top: 1rem;
-
-    @include media-breakpoint-up(sm) {
-      font-size: $font-size-base;
-      padding: 0.8rem 1rem;
-    }
-
-    @include media-breakpoint-up(md) {
-      right: 2rem;
-      top: 2rem;
-    }
-  }
-
-  &__title {
-    vertical-align: middle;
-    display: inline-block;
-    margin-right: 0.5rem;
-  }
-
-  &__svg {
-    vertical-align: middle;
-    display: inline-block;
-    height: 1.5rem;
-    fill: white;
-
-    @include media-breakpoint-up(sm) {
-      height: 1.75rem;
-    }
-  }
-}
-
-</style>

package/index.js

@@ -20,6 +20,8 @@ import FooterLogos from './components/footer_logos'
 import FooterLower from './components/footer_lower'
 import FluidIframe from './components/fluid_iframe'
 import HelpRow from './components/help_row'
+import VideoContent from './components/video_content'
+import PaymentLogo from './components/payment_logo'
 
 export { 
   Loader, 
@@ -43,4 +45,6 @@ export {
   FluidIframe,
   HelpRow,
   CardDisplay,
+  VideoContent,
+  PaymentLogo
 };

package/package.json

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

@@ -1,11 +1,11 @@
 
-$margins: "margin-top", "margin-bottom", "min-height";
+$gaps: "margin-top", "margin-bottom", "min-height", "padding-left", "padding-right";
 $aligns: "left", "center", "right";
 
-@each $margin in $margins {
+@each $gap in $gaps {
   @for $i from 1 to 5 {
-    .#{$margin}-#{$i} {
-      #{$margin}: 1rem * $i;
+    .#{$gap}-#{$i} {
+      #{$gap}: 1rem * $i;
     }    
   }
 }
@@ -16,16 +16,12 @@ $aligns: "left", "center", "right";
   }
 }
 
-.margin-0 {
-  margin: 0;
+.border-radius-lg {
+  border-radius: $border-radius-lg;
 }
 
-.margin-top-05 {
-  margin-top: 0.5rem;
-}
-
-.width-100 {
-  width: 100%;
+.color-orange {
+  color: $c-brand-orange;
 }
 
 .font-weight-700 {
@@ -44,12 +40,28 @@ $aligns: "left", "center", "right";
   font-size: $h3-font-size;
 }
 
-.c-brand-orange {
-  color: $c-brand-orange;
-}
-
 .list-style-none {
   list-style-type: none;
   padding: 0;
   margin: 0;
+}
+
+.margin-0 {
+  margin: 0;
+}
+
+.margin-top-05 {
+  margin-top: 0.5rem;
+}
+
+.margin-top-025 {
+  margin-top: 0.25rem;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.width-100 {
+  width: 100%;
 }

package/scss/_btn.scss

@@ -52,6 +52,10 @@
     @include btn-remove-ticket;
   }
 
+  &.btn-remove-gift {
+    @include btn-remove-gift;
+  }
+
   &.btn-membership-card {
     @include btn-membership-card;
   }
@@ -68,6 +72,10 @@
     @include btn-cta;
   }
 
+  &.btn-carousel {
+    @include btn-carousel;
+  }
+
   &.btn-invisible {
     @include btn-invisible;
   }

package/scss/_card-group.scss

@@ -10,8 +10,8 @@
   }
 
   .card {
-    margin-bottom: 0;
     max-width: 20rem;
+    margin-top: 0;
   }
   
   .card-title {

package/scss/_custom-select.scss

@@ -0,0 +1,8 @@
+.custom-select {
+  background-color: $c-grey-alpine;
+  border-color: $c-grey-concrete;
+  border-radius: $border-radius;
+  padding: 0.75rem 0.5rem;
+  color: $c-grey-night;
+  width: 100%;
+}

package/scss/_promo.scss

@@ -0,0 +1,11 @@
+.promo-form {
+  @include basket-row-grid;
+  margin-top: 0.5rem;
+}
+
+.promo-added {
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+}

package/scss/card/_related.scss

@@ -3,6 +3,10 @@
   border: 1px solid $c-grey-pearl;
   overflow: hidden;
 
+  + .card {
+    margin-top: 0;
+  }
+
   img {
     max-width: 100%;
   }

package/scss/card/_video-help.scss

@@ -2,7 +2,6 @@
 $border: 1px solid $c-grey-pearl;
 
 .card[video-help] {
-  margin-bottom: 0;
   overflow: hidden;
   border: $border;
 
@@ -17,6 +16,10 @@ $border: 1px solid $c-grey-pearl;
     border-bottom: 0;
   }
 
+  + .card {
+    margin-top: 0;
+  }
+
   .card-header {
     border-radius: 0;
     border-bottom: 0;

package/scss/index.scss

@@ -13,6 +13,7 @@
 @import "loading-animation.scss";
 @import "close-icon.scss";
 @import "table/index.scss";
+@import "promo.scss";
 
 // bootstrap component styles
 @import "btn.scss";
@@ -20,6 +21,7 @@
 @import "card-group.scss";
 @import "checkbox.scss";
 @import "checkbox-group.scss";
+@import "custom-select.scss";
 @import "form.scss";
 @import "list.scss";
 @import "input.scss";

package/scss/table/_details.scss

@@ -4,6 +4,7 @@ table.details {
 
   thead {
     background-color: $c-grey-alpine;
+    margin-bottom: 1rem;
     font-weight: 700;
     display: block;
 
@@ -29,16 +30,10 @@ table.details {
   }
 
   tbody tr {
-    border-bottom: 1px solid $c-grey-pearl;
-    border-right: 1px solid $c-grey-pearl;
-    border-left: 1px solid $c-grey-pearl;
-
-    @include media-breakpoint-down($mq) {
-      border-top: 1px solid $c-grey-pearl;
+    border: 1px solid $c-grey-pearl;
 
-      &:not(:last-of-type) {
-        margin-bottom: 1rem;
-      }    
+    &:not(:last-of-type) {
+      margin-bottom: 1rem;
     }
   }
 

package/scss/table/_etickets.scss

@@ -13,12 +13,16 @@ table.etickets {
     }
   }
 
-  tr {
+  thead tr, tbody tr.active {
     border: 1px solid $c-grey-pearl;
     display: grid;
 
+    &:not(:last-of-type) {
+      margin-bottom: 1rem;
+    }
+
     @include media-breakpoint-up($mq) {
-      grid-template-columns: 9rem auto 9rem;
+      grid-template-columns: 10rem auto 8rem;
     }
 
     @include media-breakpoint-down($mq) {
@@ -47,8 +51,4 @@ table.etickets {
       display: none;
     }
   }
-
-  tbody > div:not(:last-of-type) {
-    margin-bottom: 1rem;
-  }
 }

package/scss/table/_gifts.scss

@@ -0,0 +1,56 @@
+table.gifts {
+
+  $mq: xl;
+
+  thead {
+    @include media-breakpoint-down($mq) {
+      display: none;
+    }
+  }
+
+  th {
+    font-weight: 700;
+  }
+
+  tr {
+    @include media-breakpoint-up($mq) {
+      @include table-row;
+      grid-template-columns: 3fr 5fr 5fr 2fr 2fr;
+      display: grid;
+      gap: 0.75rem;
+  
+      label {
+        display: none;
+      }
+    }
+
+    @include media-breakpoint-down($mq) {
+      border-radius: $border-radius-lg;
+      border: 1px solid $c-grey-pearl;
+      display: block;
+      padding: 1rem;
+  
+      &:not(:last-of-type) {
+        margin-bottom: 1rem;
+      }
+  
+      td {
+        justify-content: space-between;
+        display: flex;
+
+        &:not(:last-of-type) {
+          padding-bottom: 0.25rem;
+          padding-top: 0.25rem;
+        }
+
+        &:not(:first-of-type):not(:last-of-type) {
+          border-top: 1px solid $c-grey-pearl;
+        }
+  
+        &:last-of-type {
+          margin-top: 0.5rem;
+        }
+      }
+    }
+  }
+}

package/scss/table/_membership.scss

@@ -0,0 +1,6 @@
+
+table.details.membership tr {
+  @include media-breakpoint-up(md) {
+    grid-template-columns: auto 10rem 10rem 8rem;
+  }
+}

package/scss/table/_orders.scss

@@ -13,12 +13,16 @@ table.orders {
     }
   }
 
-  tr {
+  thead tr, tbody tr.active {
     border: 1px solid $c-grey-pearl;
     display: grid;
 
+    &:not(:last-of-type) {
+      margin-bottom: 1rem;
+    }
+
     @include media-breakpoint-up($mq) {
-      grid-template-columns: 9rem 8rem auto 7rem;
+      grid-template-columns: 10rem 8rem auto 8rem;
     }
 
     @include media-breakpoint-down($mq) {
@@ -47,8 +51,4 @@ table.orders {
       display: none;
     }
   }
-
-  tbody > div:not(:last-of-type) {
-    margin-bottom: 1rem;
-  }
 }

package/scss/table/index.scss

@@ -6,6 +6,8 @@
 @import "details.scss";
 @import "preferences.scss";
 @import "etickets.scss";
+@import "membership.scss";
+@import "gifts.scss";
 
 table {
   border-spacing: 0;