barbican-reset 1.2.8 → 1.2.9

package/components/display_stream.vue

@@ -0,0 +1,58 @@
+<template>
+  <div :class="$style.component">
+    <img :class="$style.image" :src="image">
+    <div v-if="expired" :class="$style.title">
+      <h4>Expired</h4>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DisplayStream",
+  mounted() {
+    console.log(this.$props);
+  },
+  props: {
+    image: {
+      type: String,
+      required: true,
+    },
+    expired: {
+      type: Boolean,
+      default: false,
+    }
+  }
+}
+</script>
+
+<style lang="scss" module>
+
+.component {
+  border-radius: $border-radius-lg;
+  padding-top: 56.25%;
+  position: relative;
+  overflow: hidden;
+  color: $white;
+
+  .image {
+    position: absolute;
+    height: auto;
+    width: 100%;
+    inset: 0;
+  }
+
+  .title {
+    background-color: rgba($c-grey-night, 0.8);
+    place-items: center;
+    position: absolute;
+    display: grid;
+    inset: 0;
+
+    h4 {
+      font-size: $h2-font-size;
+    }
+  }
+}
+
+</style>

package/components/fluid_iframe.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="$style.component">
+    <iframe
+      scrolling="auto"
+      allowfullscreen
+      frameborder="0"
+      height="100%"
+      width="100%" 
+      :src="src" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FluidIframe',
+  props: {
+    src: {
+      type: String,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" module>
+
+.component {
+  border-radius: $border-radius-lg;
+  padding-top: 56.25%;
+  position: relative;
+  overflow: hidden;
+}
+
+.component > iframe {
+  position: absolute;
+  inset: 0;
+}
+
+</style>

package/components/help_row.vue

@@ -0,0 +1,33 @@
+<template>
+  <b-card video-help no-body>
+    <b-card-header>
+      <b-button variant="video-help" v-b-toggle="`help-${id}`">
+        {{ title }}
+      </b-button>
+    </b-card-header>
+    <b-collapse :id="`help-${id}`">
+      <b-card-body>
+        <slot />
+      </b-card-body>
+    </b-collapse>
+  </b-card>
+</template>
+
+<script>
+import { BCard, BCardHeader, BCollapse, BCardBody, BButton } from 'bootstrap-vue'
+
+export default {
+  name: 'HelpRow',
+  components: { BCard, BCardHeader, BCollapse, BCardBody, BButton },
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>

package/components/type_text.vue

@@ -1,25 +1,15 @@
 <template>
-  <p ref="checking" class="loading-message" :class="{ slim }">
-    {{ message }}
+  <p ref="checking" :class="$style.component">
+    <slot />
   </p>
 </template>
 
 <script>
-import { gsap } from "gsap";
-import { TextPlugin } from "gsap/TextPlugin";
+import { gsap } from 'gsap'
+import { TextPlugin } from 'gsap/TextPlugin'
 gsap.registerPlugin(TextPlugin);
 
 export default {
-  props: {
-    message: {
-      type: String,
-      default: "Loading",
-    },
-    slim: {
-      type: Boolean,
-      default: false,
-    },
-  },
   methods: { 
     loadingAnim(target) {
       const message = target.innerText;
@@ -54,3 +44,13 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" module>
+
+.component {
+  font-size: $h4-font-size;
+  min-height: 2.25rem;
+  text-align: center;
+}
+
+</style>

package/helpers/mixins/_buttons.scss

@@ -148,17 +148,29 @@
   }
 }
 
+@mixin btn-video-help {
+  @include button-link(
+    $padding: 1.25rem,
+    $background: $c-grey-alpine) {
+    background-color: $c-grey-steel;
+    color: $white;
+  }
+  font-weight: 700;
+  text-align: left;
+  width: 100%;
+}
+
 @mixin btn-exit {
   @include button-link {
     @include single-box($c-grey-night);
     background-color: $white;
     border-radius: 50%;
 
-    path.outline, path.cross {
+    [data-outline], [data-cross] {
       fill: $white;
     }
 
-    path.fill {
+    [data-fill] {
       fill: $c-grey-night;
     }
   }

package/index.js

@@ -21,6 +21,9 @@ import RadioGroup from './components/radio_group'
 import FooterUpper from './components/footer_upper'
 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 DisplayStream from './components/display_stream'
 
 export { 
   LoadingAnimation, 
@@ -44,5 +47,8 @@ export {
   CardDeck,
   FooterUpper,
   FooterLogos,
-  FooterLower
+  FooterLower,
+  FluidIframe,
+  HelpRow,
+  DisplayStream
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "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/_btn.scss

@@ -40,6 +40,10 @@
     @include btn-link;
   }
 
+  &.btn-video-help {
+    @include btn-video-help;
+  }
+
   &.btn-exit {
     @include btn-exit;
   }

package/scss/card/_video-help.scss

@@ -0,0 +1,31 @@
+
+$border: 1px solid $c-grey-pearl;
+
+.card[video-help] {
+  margin-bottom: 0;
+  overflow: hidden;
+  border: $border;
+
+  &:not(:first-of-type) {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  &:not(:last-of-type) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-bottom: 0;
+  }
+
+  .card-header {
+    border-radius: 0;
+    border-bottom: 0;
+    overflow: hidden;
+    padding: 0;
+  }
+
+  .card-body {
+    border-top: $border;
+    padding: 1.25rem;
+  }
+}

package/scss/card/index.scss

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

package/scss/index.scss

@@ -7,7 +7,6 @@
 @import "klaro.scss";
 @import "fonts.scss";
 @import "loading-animation.scss";
-@import "type-text.scss";
 @import "close-icon.scss";
 @import "table/index.scss";
 

package/scss/_type-text.scss

@@ -1,9 +0,0 @@
-.loading-message {
-  min-height: 2.25rem;
-
-  &:not(.slim) {
-    font-size: $h4-font-size;
-    margin: 3.75rem 1.875rem;
-    text-align: center;
-  }
-}