barbican-reset 1.2.7 → 1.3.1

package/components/alert.vue

@@ -5,18 +5,20 @@
         <div :class="$style.title" v-if="title.length > 0 && !toggle">{{ title }}</div>
         <slot />
       </span>
-      <button v-if="toggle" :class="$style.button" @click="() => $emit('close')">
-        <close-icon :class="styleIcon" />
-      </button>
+      <b-button v-if="toggle" variant="invisible" :class="styleButton" @click="$emit('close')">
+        <close-icon />
+      </b-button>
     </div>
   </div>
 </template>
 
 <script>
+import { BButton } from 'bootstrap-vue'
 import { CloseIcon } from 'barbican-reset/icons/stream'
 export default {
   name: "Alert",
   components: {
+    BButton,
     CloseIcon,
   },
   props: {
@@ -57,7 +59,6 @@ export default {
     styleContainer() {
       let style = this.$style;
       let output = [style.container];
-      
       if (this.center) { output.push(style.center); }
       if (this.margin) {
         switch (this.margin) {
@@ -66,35 +67,29 @@ export default {
           default: output.push(style.margin_sm); break;
         }
       }
-
       return output;
     },
     styleWrap() {
       let style = this.$style;
       let output = [style.wrap];
-
       if (this.error) { output.push(style.error, 'error'); }
       if (this.success) { output.push(style.success, 'success'); }
       if (this.inline) { output.push(style.inline); }
       if (this.toggle) { output.push(style.toggle); }
-
       return output;
     },
     styleSpan() {
       let style = this.$style;
       let output = [];
-
       if (this.flex) { output.push(style.flex); }
-
       return output;
     },
-    styleIcon() {
+    styleButton() {
       let style = this.$style;
-      let output = [style.icon];
-
+      let output = [style.button];
       if (this.error) { output.push(style.error); }
-      if (this.success) { output.push(style.success); }
-
+      else if (this.success) { output.push(style.success); }
+      else { output.push(style.neutral); }
       return output;
     }
   }
@@ -103,29 +98,21 @@ export default {
 
 <style lang="scss" module>
 
+$neutral-colors: $c-status-neutral, $c-status-neutral-fade;
 $success-colors: $c-status-success, $c-status-success-fade;
 $error-colors: $c-status-error, $c-status-error-fade;
 
-@mixin icon(
-  $color: $c-status-neutral, 
-  $fade: $c-status-neutral-fade) {
-    
-  path[data-fill] { fill: $fade; }
-  path[data-outline],
-  path[data-cross] { fill: $color; }
+@mixin icon($color, $fade) {    
+  [data-fill] { fill: $fade; }
+  [data-outline],
+  [data-cross] { fill: $color; }
 
   @include focus {
-    path[data-fill] { fill: $color; }
-    path[data-cross] { fill: $fade; }
+    [data-fill] { fill: $color; }
+    [data-cross] { fill: $fade; }
   }
 }
 
-@mixin invisible {
-  background: transparent;
-  line-height: 1;
-  padding: 0;
-}
-
 .container {
   @include media-breakpoint-down(xs) {
     font-size: $font-size-sm;
@@ -205,26 +192,6 @@ $error-colors: $c-status-error, $c-status-error-fade;
   }
 }
 
-.button, .button:focus {
-  @include invisible;
-  @include focus {
-    @include invisible;
-  }
-}
-
-.icon {
-  @include icon;
-  width: 1.375rem;
-
-  &.error {
-    @include icon($error-colors...);
-  }
-
-  &.success {
-    @include icon($success-colors...);
-  }
-}
-
 .title {
   margin-bottom: 0.25rem;
   font-weight: 700;
@@ -235,6 +202,18 @@ $error-colors: $c-status-error, $c-status-error-fade;
   display: flex;    
 }
 
+.button.neutral {
+  @include icon($neutral-colors...);  
+}
+
+.button.success {
+  @include icon($success-colors...);  
+}
+
+.button.error {
+  @include icon($error-colors...);  
+}
+
 </style>
 
 <style lang="scss" scoped>

package/components/container.vue

@@ -64,7 +64,7 @@ export default {
 }
 
 .inner {
-  max-width: $constrained_content_width--wide;
+  max-width: $layout-width-wide;
   margin: 0 auto;
 
   &:not(.footer) {
@@ -78,7 +78,7 @@ export default {
   }
   
   &.thin {
-    max-width: $constrained_content_width--thin;  
+    max-width: $layout-width-thin;  
   }
 
   &.masthead {

package/components/display_stream.vue

@@ -0,0 +1,70 @@
+<template>
+  <div :class="styleComponent">
+    <img :class="$style.image" :src="image">
+    <div v-if="expired" :class="$style.title">
+      <h4>Expired</h4>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DisplayStream",
+  props: {
+    image: {
+      type: String,
+      required: true,
+    },
+    expired: {
+      type: Boolean,
+      default: false,
+    },
+    hero: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  computed: {
+    styleComponent() {
+      const style = this.$style;
+      let output = [style.component];
+      if (this.hero) { output.push(style.hero); }
+      return output;
+    },
+  }
+}
+</script>
+
+<style lang="scss" module>
+
+.component {
+  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-midnight, 0.85);
+    place-items: center;
+    position: absolute;
+    display: grid;
+    inset: 0;
+  }
+}
+
+.component.hero {
+  .title {
+    h4 {
+      font-size: $h2-font-size;
+    }
+  }
+}
+
+</style>

package/components/event_summary.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script type="text/javascript">
+<script>
 export default {
   name: "EventSummary",
   props: {

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

@@ -0,0 +1,30 @@
+<template>
+  <div :class="$style.logos">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default { 
+  name: 'FooterLogos'
+}
+</script>
+
+<style lang="scss" module>
+
+.logos {
+  margin: -1rem;
+
+  > * {
+    margin: 1rem;
+  }
+  
+  > svg {
+    display: inline-block;
+    height: 3rem;
+    fill: $white;
+    width: auto;
+  }
+}
+
+</style>

package/components/footer_upper.vue

@@ -28,8 +28,12 @@ export default {
 
 .upper {
   padding-top: 3.75rem;
-  display: flex;
-  gap: 3.75rem;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: 11rem auto;
+    display: grid;
+    gap: 1rem;
+  }
 
   &:not(.splash) {
     padding-bottom: 3.75rem;

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

@@ -0,0 +1,27 @@
+<template>
+  <div :class="styleGroup">
+    <slot />
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    name: 'RadioGroup',
+    props: {
+      error: {
+        type: Boolean
+      },
+      success: {
+        type: Boolean
+      }
+    },
+    computed: {
+      styleGroup() {
+        let styles = ['radio-group'];
+        if (this.error) { styles.push('error'); }
+        if (this.success) { styles.push('success'); }
+        return styles;        
+      }
+    }
+  }
+</script>

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/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/components/wrap.vue

@@ -14,6 +14,10 @@ export default {
     thin: {
       type: Boolean,
       default: false,
+    },
+    videos: {
+      type: Boolean,
+      default: false,
     }
   },
   computed: {
@@ -22,6 +26,7 @@ export default {
       let output = [style.container];
       if (this.title) { output.push(style.title); }
       if (this.thin) { output.push(style.thin); }
+      if (this.videos) { output.push(style.videos); }
       return output;
     }
   }
@@ -31,16 +36,20 @@ export default {
 <style lang="scss" module>
 
 .container {
-  max-width: $constrained_content_width--wide;
+  max-width: $layout-width-wide;
   margin-right: auto;
   margin-left: auto;
 
   &.title {
-    @include narrow-width;    
+    max-width: $layout-width-title;    
+  }
+
+  &.videos {
+    max-width: $layout-width-videos;    
   }
 
   &.thin {
-    max-width: $constrained_content_width--thin;
+    max-width: $layout-width-thin;
   }
 }
 

package/helpers/mixins/_buttons.scss

@@ -49,6 +49,10 @@
     background-color: $background;
     color: $color;
   }
+
+  &.hide {
+    visibility: hidden;
+  }
 }
 
 @mixin button-outline(
@@ -148,17 +152,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;
     }
   }
@@ -188,6 +204,20 @@
   );
 }
 
+@mixin btn-invisible {
+  &, &:focus {
+    background: transparent;
+    line-height: 1;
+    padding: 0;
+
+    @include focus {
+      background: transparent;
+      line-height: 1;
+      padding: 0;
+    }
+  }
+}
+
 @mixin btn-expand {
   display: block;
 }

package/helpers/mixins/_content.scss

@@ -2,13 +2,13 @@
 @mixin content_masthead {
   background-color: white;
   box-shadow: 0 5px 5px rgba(black, 0.1);
-  padding: 0 $constrained_grid_padding;
+  padding: 0 $layout-padding;
   // Required to ensure the box-shadow is visible when div.content-main-content uses a background-color.
   position: relative;
 }
 
 @mixin content_masthead__inner {
-  max-width: $constrained_content_width--wide;
+  max-width: $layout-width-wide;
   padding: $space--large * 2 0;
   margin: 0 auto;
 
@@ -23,7 +23,7 @@
 }
 
 @mixin content-main-content__inner {
-  max-width: $constrained_content_width--wide;
+  max-width: $layout-width-wide;
   padding: 1.5rem 0;
   margin: 0 auto;
 

package/helpers/variables/layout/index.scss

@@ -1,7 +1,9 @@
 /// Constrained content
-$constrained_grid_padding: 5%;
-$constrained_content_width--thin: 50rem;
-$constrained_content_width--wide: 75rem;
+$layout-padding: 5%;
+$layout-width-title: 20rem;
+$layout-width-thin: 50rem;
+$layout-width-videos: 60rem;
+$layout-width-wide: 75rem;
 
 $space: 0.625rem;
 // Default large amount of space.

package/icons/account/index.js

@@ -1,9 +1,9 @@
-import PersonalIcon from './PersonalIcon'
-import MembershipIcon from './MembershipIcon'
-import VideoIcon from './VideoIcon'
-import PaymentIcon from './PaymentIcon'
-import OrdersIcon from './OrdersIcon'
-import SupportIcon from './SupportIcon'
+import PersonalIcon from './personal'
+import MembershipIcon from './membership'
+import VideoIcon from './video'
+import PaymentIcon from './payment'
+import OrdersIcon from './orders'
+import SupportIcon from './support'
 
 export {
   PersonalIcon,