barbican-reset 2.40.0 → 2.42.0

package/components/{event_summary.vue → EventSummary.vue}

@@ -5,21 +5,31 @@
       <div :class="$style.title">{{ data.title }}</div>
       <div :class="$style.date_time">{{ data.date_formatted }}</div>
       <div :class="$style.venue">{{ data.venue }}</div>
-      <br-button v-if="!basket && hasSeeInside" variant="link" :class="$style.show_see_inside" @click="showSeeInside = !showSeeInside">See inside</br-button>
+      <br-button
+        v-if="!basket && hasSeeInside"
+        variant="link"
+        :class="$style.show_SeeInside"
+        @click="showSeeInside = !showSeeInside"
+        >See inside</br-button
+      >
     </div>
-    <div :class="$style.see_inside" v-if="!basket && hasSeeInside && showSeeInside">
-      <see-inside v-if="!basket && hasSeeInside" :data="data.see_inside" @closeSeeInside="showSeeInside = !showSeeInside"></see-inside>
+    <div
+      :class="$style.SeeInside"
+      v-if="!basket && hasSeeInside && showSeeInside"
+    >
+      <see-inside
+        v-if="!basket && hasSeeInside"
+        :data="data.SeeInside"
+        @closeSeeInside="showSeeInside = !showSeeInside"
+      ></see-inside>
     </div>
   </div>
-
 </template>
 
 <script>
-
-import SeeInside from './see_inside';
+import SeeInside from "./SeeInside";
 
 export default {
-  name: 'EventSummary',
   components: { SeeInside },
   props: {
     data: {
@@ -33,19 +43,19 @@ export default {
   },
   data() {
     return {
-      showSeeInside: false
-    }
+      showSeeInside: false,
+    };
   },
   computed: {
     wrapperClasses() {
       return [
-          this.$style.event_summary,
-          this.basket ? this.$style.in_basket : ''
-      ]
+        this.$style.EventSummary,
+        this.basket ? this.$style.in_basket : "",
+      ];
     },
     hasSeeInside() {
-      return this.data.see_inside.length > 0;
-    }
+      return this.data.SeeInside.length > 0;
+    },
   },
 };
 </script>
@@ -83,13 +93,13 @@ export default {
   @include subtitle;
 }
 
-.show_see_inside {
+.show_SeeInside {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-.event_summary {
-  @include media-breakpoint-up(md) {
+.EventSummary {
+  @include medium-up {
     display: grid;
     grid-template-columns: 20rem auto;
     grid-template-rows: auto auto auto;
@@ -105,28 +115,28 @@ export default {
   grid-row-start: 1;
   grid-row-end: 4;
   border: 1px solid $c-grey-l87;
-  border-radius: $border-radius-lg;
+  border-radius: $br-border-radius-lg;
   max-width: 100%;
   width: 100%;
   margin-bottom: $gap-instance;
-  @include media-breakpoint-up(md) {
+
+  @include medium-up {
     margin-bottom: 0;
   }
 }
 
 .event_info {
-  grid-row-end:2;
+  grid-row-end: 2;
 }
 
-.see_inside {
+.SeeInside {
   grid-column-start: 1;
   grid-column-end: 3;
   margin-top: 1rem;
-  @include media-breakpoint-up(lg) {
+
+  @include large-up {
     margin-top: 0;
     grid-column-start: 2;
-
   }
 }
-
 </style>

package/components/{fluid_iframe.vue → FluidIframe.vue}

@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  name: "FluidIframe",
   props: {
     src: {
       type: String,

package/components/{see_inside.vue → SeeInside.vue}

@@ -1,47 +1,63 @@
 <template>
-  <div :class="$style.see_inside">
-    <div :class="$style.see_inside_content">
+  <div :class="$style.SeeInside">
+    <div :class="$style.SeeInside_content">
       <div :class="$style.venue_sections">
         <div :class="$style.sections_title">
           <span v-if="multipleSeeInside">Section:</span>
-          <b-button
-              variant="exit"
-              @click="$emit('closeSeeInside')"
-              :class="$style.close_mobile"
+          <br-button
+            variant="exit"
+            @click="$emit('closeSeeInside')"
+            :class="$style.close_mobile"
           >
             <close-icon />
-          </b-button>
+          </br-button>
         </div>
-        <br-button variant="link" :class="{[$style.venue_section]: true, [$style.venue_section_active]: visibleMapIndex == index}" v-if="multipleSeeInside" v-for="(item, index) in data" :key="'section-' + index" @click="visibleMapIndex = index">{{item.title}}</br-button>
-        <b-button
-            @click="$emit('closeSeeInside')"
-            variant="exit"
-            :class="$style.close_desktop"
+        <template v-if="multipleSeeInside">
+          <br-button
+            variant="link"
+            :class="{
+              [$style.venue_section]: true,
+              [$style.venue_section_active]: visibleMapIndex == index,
+            }"
+            v-for="(item, index) in data"
+            :key="'section-' + index"
+            @click="visibleMapIndex = index"
+            >{{ item.title }}</br-button
+          >
+        </template>
+
+        <br-button
+          @click="$emit('closeSeeInside')"
+          variant="exit"
+          :class="$style.close_desktop"
         >
           <close-icon />
-        </b-button>
+        </br-button>
       </div>
       <div v-for="(item, index) in data" :key="index">
-        <div :class="$style.see_inside_map" v-if="(visibleMapIndex == index) || !multipleSeeInside" v-html="item.markup"></div>
+        <div
+          :class="$style.SeeInside_map"
+          v-if="visibleMapIndex == index || !multipleSeeInside"
+          v-html="item.markup"
+        ></div>
       </div>
     </div>
-
   </div>
 </template>
 
 <script>
-
+import BrButton from "./BrButton";
 import { CloseIcon } from "barbican-reset/icons/stream";
 
 export default {
-  name: 'SeeInside',
   components: {
-    CloseIcon
+    BrButton,
+    CloseIcon,
   },
   data() {
     return {
       visibleMapIndex: null,
-    }
+    };
   },
   props: {
     data: {
@@ -54,15 +70,14 @@ export default {
       return this.data.length > 1;
     },
   },
-}
+};
 </script>
 
 <style lang="scss" module>
-
-.see_inside_content {
+.SeeInside_content {
   padding: 1rem;
-  border: 1px solid $c-grey-l87;;
-  border-radius: $border-radius;
+  border: 1px solid $c-grey-l87;
+  border-radius: $br-border-radius;
 }
 
 .sections_title {
@@ -70,13 +85,15 @@ export default {
   span {
     padding-top: 2px; // To line up with the button text
     width: 100%;
-    @include media-breakpoint-up(sm) {
+
+    @include small-up {
       width: auto;
     }
   }
   .close_mobile {
     margin-left: auto;
-    @include media-breakpoint-up(sm) {
+
+    @include small-up {
       display: none;
     }
   }
@@ -87,7 +104,8 @@ export default {
   gap: 1rem;
   min-height: 28px; // Due to 28 px close icon, to prevent height change when icon shown.
   flex-direction: column;
-  @include media-breakpoint-up(sm) {
+
+  @include small-up {
     flex-direction: row;
   }
 
@@ -101,16 +119,16 @@ export default {
 
 .close_desktop {
   margin-left: auto;
-  @include media-breakpoint-down(sm) {
+
+  @include small-down {
     display: none;
   }
 }
 
-.see_inside_map {
+.SeeInside_map {
   margin-top: 1rem;
   iframe {
     width: 100%;
   }
 }
-
 </style>

package/components/{video_content.vue → VideoContent.vue}

@@ -1,15 +1,13 @@
 <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>
 
-      <br-alert v-if="data.isExpired" error center inline>Event has passed.</br-alert>
-
+      <br-alert v-if="data.isExpired" error center inline
+        >Event has passed.</br-alert
+      >
     </template>
 
     <h2 v-html="data.title" class="margin-bottom-1"></h2>
@@ -17,41 +15,36 @@
     <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>
-
+      <p>
+        Read tonight's
+        <a :href="data.programme" target="_blank">Digital Programme</a>
+      </p>
     </template>
-
-  </div>  
-
+  </div>
 </template>
 
 <script>
-import { FluidIframe } from 'barbican-reset'
-import BrAlert from './br_alert'
-import { DateTime } from 'luxon';
+import { FluidIframe } from "barbican-reset";
+import BrAlert from "./BrAlert";
+import { DateTime } from "luxon";
 
 export default {
   props: {
     data: {
-      type: Object
+      type: Object,
     },
     concert: {
       type: Boolean,
       default: false,
-    }
+    },
   },
   created() {
     if (this.concert) {
@@ -64,18 +57,16 @@ export default {
   components: { FluidIframe, BrAlert },
   methods: {
     formatDateTime(date) {
-      return DateTime.fromISO(date).toFormat('h:mm a ccc d LLL yyyy');
-    }
-  }
-}
+      return DateTime.fromISO(date).toFormat("h:mm a ccc d LLL yyyy");
+    },
+  },
+};
 </script>
 
 <style lang="scss" module>
-
 .brightcove {
   border-radius: $br-border-radius-lg;
   margin-bottom: 2rem;
   overflow: hidden;
 }
-
-</style>
+</style>

package/icons/account/membership.vue

@@ -10,9 +10,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: "MembershipIcon",
-};
-</script>

package/icons/account/orders.vue

@@ -15,9 +15,3 @@
     <rect height="2" width="2" x="16" y="10" />
   </svg>
 </template>
-
-<script>
-export default {
-  name: "OrdersIcon",
-};
-</script>

package/icons/account/payment.vue

@@ -10,9 +10,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: "PaymentIcon",
-};
-</script>

package/icons/account/personal.vue

@@ -10,9 +10,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: "PersonalIcon",
-};
-</script>

package/icons/account/support.vue

@@ -11,9 +11,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: "SupportIcon",
-};
-</script>

package/icons/account/video.vue

@@ -10,9 +10,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: "VideoIcon",
-};
-</script>

package/icons/arrow_back.vue

@@ -1,11 +1,12 @@
 <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
+    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

@@ -1,11 +1,10 @@
 <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
+    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/back_arrow.vue

@@ -1,11 +1,10 @@
 <template>
-  <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path d="M16 7H3.83L9.42 1.41L8 0L0 8L8 16L9.41 14.59L3.83 9H16V7Z" />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'BackArrow'
-}
-</script>

package/icons/city_of_london_lockup.vue

@@ -1,18 +1,23 @@
 <template>
-  <a class="city-of-london-lockup" href="//www.cityoflondon.gov.uk" target="_blank">
+  <a
+    class="city-of-london-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
+      The City of London<br />Corporation is the founder<br />and principal
+      funder of<br />the Barbican Centre
     </small>
   </a>
 </template>
 
 <script>
-import CityOfLondonLogo from './city_of_london'
-export default { 
-  name: 'CityOfLondonLockup',
+import CityOfLondonLogo from "./city_of_london";
+
+export default {
   components: {
-    CityOfLondonLogo
-  }
-}
-</script>
+    CityOfLondonLogo,
+  },
+};
+</script>

package/icons/information.vue

@@ -3,14 +3,10 @@
     width="16"
     height="16"
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 20 20">
+    viewBox="0 0 20 20"
+  >
     <path
-      d="M9,15h2V9H9V15z M10,7c0.3,0,0.5-0.1,0.7-0.3S11,6.3,11,6s-0.1-0.5-0.3-0.7C10.5,5.1,10.3,5,10,5S9.5,5.1,9.3,5.3	C9.1,5.5,9,5.7,9,6s0.1,0.5,0.3,0.7S9.7,7,10,7z M10,20c-1.4,0-2.7-0.3-3.9-0.8S3.8,18,2.9,17.1s-1.6-2-2.1-3.2S0,11.4,0,10	s0.3-2.7,0.8-3.9S2,3.8,2.9,2.9s2-1.6,3.2-2.1S8.6,0,10,0s2.7,0.3,3.9,0.8s2.3,1.2,3.2,2.1s1.6,2,2.1,3.2S20,8.6,20,10	s-0.3,2.7-0.8,3.9s-1.2,2.3-2.1,3.2s-2,1.6-3.2,2.1S11.4,20,10,20z M10,18c2.2,0,4.1-0.8,5.7-2.3S18,12.2,18,10s-0.8-4.1-2.3-5.7	S12.2,2,10,2S5.9,2.8,4.3,4.3S2,7.8,2,10s0.8,4.1,2.3,5.7S7.8,18,10,18z" />
+      d="M9,15h2V9H9V15z M10,7c0.3,0,0.5-0.1,0.7-0.3S11,6.3,11,6s-0.1-0.5-0.3-0.7C10.5,5.1,10.3,5,10,5S9.5,5.1,9.3,5.3	C9.1,5.5,9,5.7,9,6s0.1,0.5,0.3,0.7S9.7,7,10,7z M10,20c-1.4,0-2.7-0.3-3.9-0.8S3.8,18,2.9,17.1s-1.6-2-2.1-3.2S0,11.4,0,10	s0.3-2.7,0.8-3.9S2,3.8,2.9,2.9s2-1.6,3.2-2.1S8.6,0,10,0s2.7,0.3,3.9,0.8s2.3,1.2,3.2,2.1s1.6,2,2.1,3.2S20,8.6,20,10	s-0.3,2.7-0.8,3.9s-1.2,2.3-2.1,3.2s-2,1.6-3.2,2.1S11.4,20,10,20z M10,18c2.2,0,4.1-0.8,5.7-2.3S18,12.2,18,10s-0.8-4.1-2.3-5.7	S12.2,2,10,2S5.9,2.8,4.3,4.3S2,7.8,2,10s0.8,4.1,2.3,5.7S7.8,18,10,18z"
+    />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'Information',
-}
-</script>

package/icons/password/hide.vue

@@ -5,9 +5,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'HidePassword'
-}
-</script>

package/icons/password/show.vue

@@ -5,9 +5,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'ShowPassword'
-}
-</script>

package/icons/stream/live.vue

@@ -1,11 +1,12 @@
 <template>
-  <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
+    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>
-export default {
-  name: "LiveIcon"
-};
-</script>

package/icons/wheelchair.vue

@@ -1,12 +1,18 @@
 <template>
-  <svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7 4C8.10457 4 9 3.10457 9 2C9 0.89543 8.10457 0 7 0C5.89543 0 5 0.89543 5 2C5 3.10457 5.89543 4 7 4Z" fill="black"/>
-    <path d="M14 11V9.00001C12.46 9.02001 10.91 8.25001 9.93 7.17001L8.64 5.74001C8.47 5.55001 8.26 5.40001 8.03 5.29001C8.02 5.29001 8.02 5.28001 8.01 5.28001H8C7.65 5.08001 7.25 4.98001 6.81 5.02001C5.76 5.11001 5 6.04001 5 7.09001V13C5 14.1 5.9 15 7 15H12V20H14V14.5C14 13.4 13.1 12.5 12 12.5H9V9.05001C10.29 10.12 12.25 10.99 14 11ZM5 18C3.34 18 2 16.66 2 15C2 13.69 2.84 12.59 4 12.17V10.1C1.72 10.56 0 12.58 0 15C0 17.76 2.24 20 5 20C7.42 20 9.44 18.28 9.9 16H7.83C7.42 17.16 6.31 18 5 18Z" fill="black"/>
+  <svg
+    width="14"
+    height="20"
+    viewBox="0 0 14 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7 4C8.10457 4 9 3.10457 9 2C9 0.89543 8.10457 0 7 0C5.89543 0 5 0.89543 5 2C5 3.10457 5.89543 4 7 4Z"
+      fill="black"
+    />
+    <path
+      d="M14 11V9.00001C12.46 9.02001 10.91 8.25001 9.93 7.17001L8.64 5.74001C8.47 5.55001 8.26 5.40001 8.03 5.29001C8.02 5.29001 8.02 5.28001 8.01 5.28001H8C7.65 5.08001 7.25 4.98001 6.81 5.02001C5.76 5.11001 5 6.04001 5 7.09001V13C5 14.1 5.9 15 7 15H12V20H14V14.5C14 13.4 13.1 12.5 12 12.5H9V9.05001C10.29 10.12 12.25 10.99 14 11ZM5 18C3.34 18 2 16.66 2 15C2 13.69 2.84 12.59 4 12.17V10.1C1.72 10.56 0 12.58 0 15C0 17.76 2.24 20 5 20C7.42 20 9.44 18.28 9.9 16H7.83C7.42 17.16 6.31 18 5 18Z"
+      fill="black"
+    />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'WheelchairIcon'
-}
-</script>