barbican-reset 1.3.5 → 1.3.9

package/components/alert.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="styleContainer">
+  <div :class="styleContainer" :data-test="testData">
     <div :class="styleWrap">
       <span :class="styleSpan">
         <div :class="$style.title" v-if="title.length > 0 && !toggle">{{ title }}</div>
@@ -56,6 +56,13 @@ export default {
     }
   },
   computed: {
+    testData() {
+      if (this.error) {
+        return 'alert-error';        
+      } else if (this.success) {
+        return 'alert-success';        
+      } return 'alert-neutral';
+    },
     styleContainer() {
       let style = this.$style;
       let output = [style.container];

package/components/card_display.vue

@@ -1,5 +1,8 @@
 <template>
   <div :class="styleComponent">
+    <div v-if="type === 'live'" :class="$style.icon">
+      <div class="btn btn-secondary">live</div>
+    </div>
     <img :class="$style.image" :src="image">
     <div v-if="expired" :class="$style.title">
       <h4>Expired</h4>
@@ -22,7 +25,11 @@ export default {
     hero: {
       type: Boolean,
       default: false,
-    }
+    },
+    type: {
+      type: String,
+      default: 'live',
+    },
   },
   computed: {
     styleComponent() {
@@ -42,24 +49,35 @@ export default {
   position: relative;
   overflow: hidden;
   color: $white;
+}
 
-  .image {
-    position: absolute;
-    height: auto;
-    width: 100%;
-    inset: 0;
-  }
+.icon {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+}
 
-  .title {
-    background-color: rgba($c-grey-midnight, 0.85);
-    place-items: center;
-    position: absolute;
-    display: grid;
-    inset: 0;
-  }
+.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 {
+  .icon {
+    right: 1.5rem;
+    top: 1.5rem;
+  }
+  
   .title {
     h4 {
       font-size: $h2-font-size;

package/components/related_row.vue

@@ -17,15 +17,17 @@ export default {
   margin-left: auto;
   max-width: 20rem;
 
+  @include media-breakpoint-down(md) {
+    .card + .card {
+      margin-top: 1.25rem;
+    }
+  }
+
   @include media-breakpoint-up(md) {
     grid-template-columns: repeat(3, 1fr);
     column-gap: 1.25rem;
     max-width: 60rem;
     display: grid;
-
-    .card {
-      margin-bottom: 0;
-    }
   }
 }
 

package/helpers/mixins/_buttons.scss

@@ -202,6 +202,14 @@
     $color: $white,
     $background: transparent
   );
+  @include focus {
+    &.member {
+      color: $c-member;
+    }
+    &.member-plus {
+      color: $c-member-dark;
+    }
+  }
 }
 
 @mixin btn-video-login {
@@ -211,6 +219,13 @@
   );
 }
 
+@mixin btn-cta {
+  @include button-solid(
+    $background: $c-grey-night,
+    $display: 'flex');
+  fill: $white;
+}
+
 @mixin btn-invisible {
   &, &:focus {
     background: transparent;

package/helpers/variables/index.scss

@@ -1,5 +1,5 @@
 // paths more explicit for gulp-sass
 @import "colors/index.scss";
-@import "layout/index.scss";
+@import "layout.scss";
 @import "breakpoints.scss";
 @import "typography.scss";

package/icons/back_arrow.vue

@@ -1,5 +1,7 @@
 <template>
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 7H3.83L9.42 1.41L8 0L0 8L8 16L9.41 14.59L3.83 9H16V7Z" fill="black"/></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>

package/index.js

@@ -1,7 +1,5 @@
 
-import Card from './components/card'
 import Container from './components/container'
-import Block from './components/block'
 import EventSummary from './components/event_summary'
 import AccountTitle from './components/account_title'
 import Wrap from './components/wrap'
@@ -32,14 +30,12 @@ export {
   TypeText,
   Container,
   Wrap,
-  Card,
   AccountTitle,
   Placeholder,
   FormSection,
   FormUpdate,
   FormGroup,
   RadioGroup,
-  Block,
   EventSummary,
   FooterUpper,
   FooterLogos,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.3.5",
+  "version": "1.3.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/_atomic.scss

@@ -32,6 +32,10 @@ $aligns: "left", "center", "right";
   font-weight: 700;
 }
 
+.font-weight-400 {
+  font-weight: 400;
+}
+
 .font-size-lg {
   font-size: $font-size-lg;
 }

package/scss/_btn.scss

@@ -64,6 +64,10 @@
     @include btn-power-login;
   }
 
+  &.btn-cta {
+    @include btn-cta;
+  }
+
   &.btn-invisible {
     @include btn-invisible;
   }

package/scss/_card-group.scss

@@ -10,8 +10,8 @@
   }
 
   .card {
-    margin-bottom: 0;
     max-width: 20rem;
+    margin-top: 0;
   }
   
   .card-title {

package/scss/card/_account.scss

@@ -3,7 +3,7 @@
   margin-top: $gap-account;
   margin-bottom: 0;
 
-  .card-body {
+  > .card-body {
     padding: $gap-account;
   }
 

package/scss/card/_block.scss

@@ -0,0 +1,5 @@
+
+.card[block] {
+  box-shadow: 0 0 0.625rem rgba($black, 0.1);
+  border: none;
+}

package/scss/card/_membership.scss

@@ -0,0 +1,45 @@
+
+$angle: 120deg;
+
+.card[membership] {
+  box-shadow: 0 0 0.375rem rgba($c-grey-steel, 0.5);
+  background: $c-grey-night;
+  width: calc(100% - 1rem);
+  display: inline-block;
+  margin: 0.5rem;
+  color: $white;
+  border: none;
+
+  @include media-breakpoint-up(sm) {
+    width: 23rem;
+  }
+
+  > .card-body {
+    align-items: flex-start;
+    row-gap: 0.75rem;
+    display: grid;
+
+    @include media-breakpoint-up(sm) {
+      row-gap: 2rem;
+    }
+  }
+
+  &.member {
+    background-color: $c-member;
+  }
+
+  &.member-plus {
+    background-color: $c-member-dark;
+    background-image: linear-gradient($angle, $c-member-dark 20%, $c-member 100%);
+  }
+  
+  &.patron, &.premier-patron {
+    background-color: $c-patron;
+    background-image: linear-gradient($angle, $c-patron 60%, $c-patron-light 75%, $c-patron 90%);
+  }
+  
+  &.principle-patron, &.directors-circle {
+    background-color: $c-principle;
+    background-image: linear-gradient($angle, $c-principle 60%, $c-principle-light 75%, $c-principle 90%);
+  }
+}

package/scss/card/_related.scss

@@ -3,6 +3,10 @@
   border: 1px solid $c-grey-pearl;
   overflow: hidden;
 
+  + .card {
+    margin-top: 0;
+  }
+
   img {
     max-width: 100%;
   }

package/scss/card/_video-help.scss

@@ -2,7 +2,6 @@
 $border: 1px solid $c-grey-pearl;
 
 .card[video-help] {
-  margin-bottom: 0;
   overflow: hidden;
   border: $border;
 
@@ -17,6 +16,10 @@ $border: 1px solid $c-grey-pearl;
     border-bottom: 0;
   }
 
+  + .card {
+    margin-top: 0;
+  }
+
   .card-header {
     border-radius: 0;
     border-bottom: 0;

package/scss/card/index.scss

@@ -5,15 +5,16 @@
 @import "account.scss";
 @import "video-help.scss";
 @import "related.scss";
+@import "block.scss";
+@import "membership.scss";
 
 .card {
   border: 1px solid $c-grey-pearl;
   border-radius: $border-radius-lg;
-  margin-bottom: 1.25rem;
+}
 
-  &:last-child {
-    margin-bottom: 0;
-  }
+.card + .card {
+  margin-top: 1.25rem;
 }
 
 .card-header {

package/components/banner.vue

@@ -1,19 +0,0 @@
-<template>
-  <div :class="$style.outer">
-    <div :class="$style.inner">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" module>
-
-.outer {
-  @include content_masthead;
-}
-
-.inner {
-  @include content_masthead__inner;
-}
-
-</style>

package/components/block.vue

@@ -1,30 +0,0 @@
-<template>
-  <div :class="styleContainer">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {
-  computed: {
-    styleContainer() {
-      return this.$style.container;
-    }
-  }
-}
-</script>
-
-<style lang="scss" module>
-
-@import "../helpers/mixins";
-
-.container {
-  @include card-container;
-  box-shadow: 0 0 0.625rem rgba($black, 0.1);
-  
-  &:not(:last-of-type) {
-    margin-bottom: $gap-basket;
-  }
-}
-
-</style>

package/components/card.vue

@@ -1,59 +0,0 @@
-<template>
-  <div :class="styleContainer">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    wrap: {
-      type: Boolean,
-      default: false,
-    },
-    account: {
-      type: Boolean,
-      default: false,
-    }
-  },
-  computed: {
-    styleContainer() {
-      let styles = [this.$style.container];
-      if (this.wrap) {
-        styles.push(this.$style.wrap);
-      }
-      if (this.account) {
-        styles.push(this.$style.account);
-      }
-      return styles;
-    }
-  }
-}
-</script>
-
-<style lang="scss" module>
-
-@import "../helpers/mixins";
-
-.container {
-  @include card-container;
-  border: 1px solid $c-grey-pearl;
-  align-content: start;
-  display: grid;
-  gap: 1.25rem;
-}
-
-.container.wrap {
-  background-color: $gray-100;
-}
-
-.container.account {
-  padding: $gap-account;
-  display: block;
-
-  &:not(:last-of-type) {
-    margin-bottom: $gap-account;
-  }
-}
-
-</style>