barbican-reset 1.2.9 → 1.3.0

package/components/display_stream.vue

@@ -10,9 +10,6 @@
 <script>
 export default {
   name: "DisplayStream",
-  mounted() {
-    console.log(this.$props);
-  },
   props: {
     image: {
       type: String,

package/components/new_carousel.vue

@@ -0,0 +1,31 @@
+<template>
+  <div :class="$style.component">
+    <slot />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "NewCarousel",
+};
+</script>
+
+<style lang="scss" module>
+
+.component {
+  column-gap: 0.75rem;
+  display: grid;
+
+  @include media-breakpoint-up(sm) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @include media-breakpoint-up(md) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  @include media-breakpoint-up(lg) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+</style>

package/components/related_card.vue

@@ -0,0 +1,38 @@
+<template>
+  <b-card related no-body>
+    <b-img v-if="content.image" :src="content.image" />
+    <b-card-body>
+      <b-link :href="content.link" target="_blank">
+        <b-card-title v-html="content.title" />
+        <b-card-sub-title v-if="content.start_date" v-html="handleDate(content.start_date)" />
+        <b-card-text v-html="limitLength(content.description)" />
+      </b-link>
+    </b-card-body>
+  </b-card>
+</template>
+
+<script>
+import moment from 'moment'
+import { BCard, BImg, BCardBody, BLink, BCardTitle, BCardSubTitle, BCardText } from 'bootstrap-vue'
+
+export default {
+  name: "RelatedCard",
+  props: ['content'],
+  components: { BCard, BImg, BCardBody, BLink, BCardTitle, BCardSubTitle, BCardText },
+  methods: {
+    limitLength(title, limit = 140, output) {
+      if (title.length > limit) {
+        output = title.slice(0, limit);
+        output = output.substr(0, Math.min(output.length, output.lastIndexOf(' ')));
+        output += ' ...';
+      } else {
+        output = title;
+      }
+      return output;
+    },
+    handleDate(date) {
+      return moment(date).format("MMM Do, h:mma");
+    },
+  },
+};
+</script>

package/components/related_row.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="component">
+    <slot />
+  </div>  
+</template>
+
+<script>
+export default {
+  name: 'RelatedRow'
+}
+</script>
+
+<style lang="scss" scoped>
+
+.component {
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 20rem;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 1.25rem;
+    max-width: 60rem;
+    display: grid;
+
+    .card {
+      margin-bottom: 0;
+    }
+  }
+}
+
+</style>

package/components/related_title.vue

@@ -2,7 +2,7 @@
   <div :class="$style.container">
     <div :class="styleTitle">
       <div :class="$style.line"></div>
-      <div :class="$style.text">{{ title }}</div>
+      <div :class="$style.text"><slot /></div>
       <div :class="$style.line"></div>
     </div>
     <span v-if="tagline" :class="$style.tagline" v-html="tagline"></span>
@@ -13,9 +13,6 @@
 export default {
   name: "RelatedTitle",
   props: {
-    title: {
-      type: String,
-    },
     tagline: {
       type: String,
     },

package/components/videos_row.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <h4 :class="$style.title">{{ title }}</h4>
+    <div :class="$style.slider">
+      <b-button @click="$emit('back')">back</b-button>
+      <new-carousel>
+        <slot />
+      </new-carousel>
+      <b-button @click="$emit('next')">next</b-button>
+    </div>    
+  </div>
+</template>
+
+<script>
+import { NewCarousel, Alert } from '../index'
+export default {
+  name: "VideosRow",
+  components: { NewCarousel, Alert },
+  props: {
+    title: {
+      type: String
+    }
+  }
+}
+</script>
+
+<style lang="scss" module>
+
+.title {
+  border-bottom: 1px solid $c-grey-steel;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+}
+
+.slider {
+  align-items: center;
+  display: flex;
+  gap: 1.5rem;
+}
+
+</style>

package/index.js

@@ -10,9 +10,12 @@ import Banner from './components/banner'
 import Alert from './components/alert'
 import LoadingAnimation from './components/loading_animation'
 import RelatedTitle from './components/related_title'
+import RelatedCard from './components/related_card'
+import RelatedRow from './components/related_row'
 import TypeText from './components/type_text'
 import Placeholder from './components/placeholder'
 import Carousel from './components/carousel'
+import NewCarousel from './components/new_carousel'
 import CardDeck from './components/card_deck'
 import FormSection from './components/form_section'
 import FormUpdate from './components/form_update'
@@ -24,16 +27,20 @@ import FooterLower from './components/footer_lower'
 import FluidIframe from './components/fluid_iframe'
 import HelpRow from './components/help_row'
 import DisplayStream from './components/display_stream'
+import VideosRow from './components/videos_row'
 
 export { 
   LoadingAnimation, 
   Alert,
   RelatedTitle,
+  RelatedCard,
+  RelatedRow,
   TypeText,
   Container,
   Wrap,
   Card,
   Carousel,
+  NewCarousel,
   Banner,
   AccountTitle,
   Placeholder,
@@ -50,5 +57,6 @@ export {
   FooterLower,
   FluidIframe,
   HelpRow,
-  DisplayStream
+  DisplayStream,
+  VideosRow
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {
@@ -39,6 +39,7 @@
     "node-sass-tilde-importer": "^1.0.2",
     "placeholder-loading": "^0.4.0",
     "sass": "^1.41.0",
+    "vue-moment": "^4.1.0",
     "vue-slick-carousel": "^1.0.6"
   }
 }

package/scss/card/_related.scss

@@ -0,0 +1,9 @@
+
+.card[related] {
+  border: 1px solid $c-grey-pearl;
+  overflow: hidden;
+
+  .card-title {
+    font-size: $font-size-lg;
+  }
+}

package/scss/card/index.scss

@@ -4,6 +4,7 @@
 @import "password.scss";
 @import "account.scss";
 @import "video-help.scss";
+@import "related.scss";
 
 .card {
   border: 1px solid $c-grey-pearl;