barbican-reset 1.3.9 → 1.4.0

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/video_content.vue

@@ -0,0 +1,42 @@
+<template>
+
+  <div>
+
+    <fluid-iframe v-if="type === 'jwplayer'" :src="url" />
+
+    <div v-if="type === 'brightcove'" v-html="markup" :class="$style.brightcove"></div>
+
+    <h2 v-html="title" class="margin-bottom-1"></h2>
+
+    <p v-html="lead_description"></p>
+
+    <p v-html="long_description"></p>
+
+    <p>Until {{ formatDateTime(expires) }}</p>
+
+  </div>  
+
+</template>
+
+<script>
+import { FluidIframe } from 'barbican-reset'
+export default {
+  props: ['type','url','markup','title','lead_description','long_description','expires'],
+  components: { FluidIframe },
+  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

@@ -202,6 +202,7 @@
     $color: $white,
     $background: transparent
   );
+
   @include focus {
     &.member {
       color: $c-member;
@@ -226,6 +227,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/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/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.9",
+  "version": "1.4.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/_atomic.scss

@@ -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,24 @@ $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;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.width-100 {
+  width: 100%;
 }

package/scss/_btn.scss

@@ -68,6 +68,10 @@
     @include btn-cta;
   }
 
+  &.btn-carousel {
+    @include btn-carousel;
+  }
+
   &.btn-invisible {
     @include btn-invisible;
   }

package/scss/table/_basket.scss

@@ -28,4 +28,9 @@ table.basket tr {
       width: 100%;
     } 
   }
-}
+}
+
+table.basket .promo-form {
+  @include basket-row-grid;
+  margin-top: 0.5rem;
+}

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/_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,7 @@
 @import "details.scss";
 @import "preferences.scss";
 @import "etickets.scss";
+@import "membership.scss";
 
 table {
   border-spacing: 0;