barbican-reset 2.36.0 → 2.37.0

package/components/event_summary.vue

@@ -1,26 +1,26 @@
 <template>
-  <div :class="$style.container">
-    <img :class="styleImage" v-bind:src="data.image" alt="" />
-    <div>
+  <div :class="wrapperClasses">
+    <img :class="$style.image" v-bind:src="data.image" alt="" />
+    <div :class="$style.event_info">
       <div :class="$style.title">{{ data.title }}</div>
       <div :class="$style.date_time">{{ data.date_formatted }}</div>
       <div :class="$style.venue">{{ data.venue }}</div>
-      <router-link
-        v-if="data.socially_distanced"
-        :to="{
-          name: 'chooseSeats',
-          params: { instanceIdShort: data.id_short },
-        }"
-        class="btn btn-outline-primary margin-top-1">
-        Update seat selection
-      </router-link>
+      <br-button v-if="!basket && hasSeeInside" variant="link" :class="$style.show_see_inside" @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>
   </div>
+
 </template>
 
 <script>
+
+import SeeInside from './see_inside';
+
 export default {
   name: 'EventSummary',
+  components: { SeeInside },
   props: {
     data: {
       type: Object,
@@ -31,10 +31,21 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      showSeeInside: false
+    }
+  },
   computed: {
-    styleImage() {
-      return this.basket ? this.$style.basket_image : this.$style.seats_image;
+    wrapperClasses() {
+      return [
+          this.$style.event_summary,
+          this.basket ? this.$style.in_basket : ''
+      ]
     },
+    hasSeeInside() {
+      return this.data.see_inside.length > 0;
+    }
   },
 };
 </script>
@@ -57,57 +68,65 @@ export default {
   }
 }
 
-.container {
-  @include media-breakpoint-up(md) {
-    align-items: flex-start;
-    display: flex;
-  }
+.title {
+  @include title;
+  font-size: $h2-font-size;
+  margin-bottom: 0.75rem;
 }
 
-.image {
-  border: 1px solid $c-grey-l87;
-  border-radius: $border-radius-lg;
-  max-width: 24rem;
-  width: 100%;
-
-  @include media-breakpoint-down(md) {
-    margin-bottom: $gap-instance;
-  }
+.date_time {
+  @include subtitle;
+  margin-bottom: 0.25rem;
+}
 
-  @include media-breakpoint-up(md) {
-    margin-right: $gap-instance;
-    width: 50%;
-  }
+.venue {
+  @include subtitle;
 }
 
-.seats_image {
-  composes: image;
+.show_see_inside {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 
+.event_summary {
   @include media-breakpoint-up(md) {
-    max-width: 20rem;
+    display: grid;
+    grid-template-columns: 20rem auto;
+    grid-template-rows: auto auto auto;
+
+    column-gap: 1.5rem;
+  }
+  &.in_basket {
+    grid-template-columns: 16rem auto;
   }
 }
 
-.basket_image {
-  composes: image;
-
+.image {
+  grid-row-start: 1;
+  grid-row-end: 4;
+  border: 1px solid $c-grey-l87;
+  border-radius: $border-radius-lg;
+  max-width: 100%;
+  width: 100%;
+  margin-bottom: $gap-instance;
   @include media-breakpoint-up(md) {
-    max-width: 16rem;
+    margin-bottom: 0;
   }
 }
 
-.title {
-  @include title;
-  font-size: $h2-font-size;
-  margin-bottom: 0.75rem;
+.event_info {
+  grid-row-end:2;
 }
 
-.date_time {
-  @include subtitle;
-  margin-bottom: 0.25rem;
-}
+.see_inside {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  margin-top: 1rem;
+  @include media-breakpoint-up(lg) {
+    margin-top: 0;
+    grid-column-start: 2;
 
-.venue {
-  @include subtitle;
+  }
 }
+
 </style>

package/components/see_inside.vue

@@ -0,0 +1,116 @@
+<template>
+  <div :class="$style.see_inside">
+    <div :class="$style.see_inside_content">
+      <div :class="$style.venue_sections" v-if="multipleSeeInside">
+        <div :class="$style.sections_title">
+          <span>Section:</span>
+          <b-button
+              variant="exit"
+              @click="$emit('closeSeeInside')"
+              :class="$style.close_mobile"
+          >
+            <close-icon />
+          </b-button>
+        </div>
+        <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>
+        <b-button
+            @click="$emit('closeSeeInside')"
+            variant="exit"
+            :class="$style.close_desktop"
+        >
+          <close-icon />
+        </b-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>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+import { CloseIcon } from "barbican-reset/icons/stream";
+
+export default {
+  name: 'SeeInside',
+  components: {
+    CloseIcon
+  },
+  data() {
+    return {
+      visibleMapIndex: null,
+    }
+  },
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    multipleSeeInside() {
+      return this.data.length > 1;
+    },
+  },
+}
+</script>
+
+<style lang="scss" module>
+
+.see_inside_content {
+  padding: 1rem;
+  border: 1px solid $c-grey-l87;;
+  border-radius: $border-radius;
+}
+
+.sections_title {
+  display: flex;
+  span {
+    padding-top: 2px; // To line up with the button text
+    width: 100%;
+    @include media-breakpoint-up(sm) {
+      width: auto;
+    }
+  }
+  .close_mobile {
+    margin-left: auto;
+    @include media-breakpoint-up(sm) {
+      display: none;
+    }
+  }
+}
+
+.venue_sections {
+  display: flex;
+  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) {
+    flex-direction: row;
+  }
+
+  .venue_section {
+    margin-right: 1rem;
+  }
+  .venue_section_active {
+    text-decoration: none;
+  }
+}
+
+.close_desktop {
+  margin-left: auto;
+  @include media-breakpoint-down(sm) {
+    display: none;
+  }
+}
+
+.see_inside_map {
+  margin-top: 1rem;
+  iframe {
+    width: 100%;
+  }
+}
+
+</style>

package/index.js

@@ -24,6 +24,7 @@ import PaymentLogo from "./components/payment_logo";
 import RelatedCard from "./components/related_card";
 import RelatedTitle from "./components/related_title";
 import RelatedRow from "./components/related_row";
+import SeeInside from './components/see_inside'
 import TypeText from "./components/type_text";
 import VideoContent from "./components/video_content";
 
@@ -53,6 +54,7 @@ export {
   RelatedCard,
   RelatedTitle,
   RelatedRow,
+  SeeInside,
   TypeText,
   VideoContent,
 };

package/package.json

@@ -104,5 +104,5 @@
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.36.0"
+  "version": "2.37.0"
 }