barbican-reset 1.7.0 → 1.7.4

package/{scss → helpers/mixins}/table/_resale.scss

@@ -1,4 +1,5 @@
-table.resale {
+
+@mixin resale-table {
   margin-right: auto;
   margin-left: auto;
   max-width: 11rem;

package/{scss → helpers/mixins}/table/_section.scss

@@ -1,5 +1,5 @@
 
-table.section {
+@mixin section-table {
   padding-bottom: 0.75rem;
   padding-top: 0.75rem;
   display: block;

package/{scss → helpers/mixins}/table/_tickets.scss

@@ -1,5 +1,5 @@
-table.tickets {
 
+@mixin tickets-table {
   $mq: sm;
 
   th {
@@ -9,7 +9,7 @@ table.tickets {
   tr {
     @include media-breakpoint-up($mq) {
       @include table-row;
-      @include table-tickets-row;
+      grid-template-columns: $columns-tickets;
       display: grid;
       gap: 0.75rem;
   

package/helpers/variables/_alerts.scss

@@ -0,0 +1,7 @@
+$neutral_wrap: $c-status-neutral, $c-status-neutral-fade, $c-status-neutral-light;
+$success_wrap: $c-status-success, $c-status-success-fade, $c-status-success-light;
+$error_wrap: $c-status-error, $c-status-error-fade, $c-status-error-light;
+
+$neutral_focus: $c-status-neutral, $c-status-neutral-fade;
+$success_focus: $c-status-success, $c-status-success-fade;
+$error_focus: $c-status-error, $c-status-error-fade;

package/helpers/variables/_layout.scss

@@ -1,13 +1,10 @@
 /// Constrained content
 $layout-padding: 5%;
 $layout-width-title: 20rem;
-$layout-width-thin: 50rem;
-$layout-width-videos: 60rem;
-$layout-width-wide: 75rem;
+$layout-width-sm: 50rem;
+$layout-width-md: 60rem;
+$layout-width-lg: 75rem;
 
-$space: 0.625rem;
-// Default large amount of space.
-$space--large: $space * 3;
 $border-radius-lg: 0.375rem;
 
 // Basket layout

package/helpers/variables/_typography.scss

@@ -1,14 +1,10 @@
 
-$f-primary-name: "FuturaLTPro";
-$f-primary: #{$f-primary-name}, "Helvetica", "Arial", sans-serif;
-
 $line-height-xs: 1.1;
 $line-height-sm: 1.2;
 $line-height-md: 1.4;
 $line-height-lg: 1.8;
 
 $headings-line-height: $line-height-sm;
-$font-family-sans-serif: $f-primary;
 $headings-letter-spacing: -0.015em;
 $link-decoration: underline;
 $headings-font-weight: 700;

package/helpers/variables/colors/_brand.scss

@@ -1,6 +1,7 @@
 
 $c-brand-orange-faint: hsl(21, 60%, 99%);
 $c-brand-orange-light: hsl(21, 100%, 95%);
+$c-brand-orange-shade: hsl(21, 50%, 90%);
 $c-brand-orange: hsl(21, 100%, 41%);
 $c-brand-orange-dark: hsl(21, 100%, 38%);
 

package/helpers/variables/index.scss

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

package/icons/city_of_london_lockup.vue

@@ -1,5 +1,5 @@
 <template>
-  <a :class="$style.lockup" href="//www.cityoflondon.gov.uk" target="_blank">
+  <a class="city-of-london-lockup" href="//www.cityoflondon.gov.uk" target="_blank">
     <city-of-london-logo />
     <small>
       The City of London<br />Corporation is the founder<br />and principal funder of<br />the Barbican Centre
@@ -15,22 +15,4 @@ export default {
     CityOfLondonLogo
   }
 }
-</script>
-
-<style lang="scss" module>
-
-@import "../helpers";
-
-.lockup {
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.625rem;
-
-  @include focus {
-    text-decoration: underline;
-    outline: none;
-  }
-}
-
-</style>
+</script>

package/index.js

@@ -6,9 +6,7 @@ import RelatedRow from './components/related_row'
 import TypeText from './components/type_text'
 import Placeholder from './components/placeholder'
 import CardDisplay from './components/card_display'
-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 VideoContent from './components/video_content'
@@ -26,6 +24,8 @@ import BrFormRow from './components/br_form_row'
 import BrFormUpdate from './components/br_form_update'
 import BrLoader from './components/br_loader'
 import BrWrap from './components/br_wrap'
+import BrFooterUpper from './components/br_footer/upper'
+import BrFooterLower from './components/br_footer/lower'
 
 export { 
   BrLoader, 
@@ -41,9 +41,9 @@ export {
   BrFormUpdate,
   BrFormRow,
   EventSummary,
-  FooterUpper,
+  BrFooterLower,
+  BrFooterUpper,
   FooterLogos,
-  FooterLower,
   FluidIframe,
   HelpRow,
   CardDisplay,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.7.0",
+  "version": "1.7.4",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {
@@ -28,7 +28,6 @@
   "dependencies": {
     "bootstrap": "^5.1.3",
     "bootstrap-vue": "^2.21.2",
-    "bourbon": "^7.0.0",
     "focus-visible": "^5.2.0",
     "gsap": "^3.7.1",
     "gulp": "^4.0.2",

package/scss/_br-alert.scss

@@ -0,0 +1,49 @@
+
+.br-alert {
+  @include br-alert--setup;
+
+  &.center {
+    @include br-alert--center;
+  }
+
+  .wrap {
+    @include br-alert-wrap--colors($neutral_wrap...);
+    @include br-alert-wrap--setup;
+
+    .btn.btn-link, a {
+      @include br-alert-link($neutral_focus...);
+    }
+
+    &.error {
+      @include br-alert-wrap--colors($error_wrap...);
+
+      .btn.btn-link, a {
+        @include br-alert-link($error_focus...);
+      }
+    }
+
+    &.success {
+      @include br-alert-wrap--colors($success_wrap...);
+
+      .btn.btn-link, a {
+        @include br-alert-link($success_focus...);
+      }
+    }
+
+    &.inline {
+      @include inline-block;
+    }
+
+    &.toggle {
+      @include br-alert-wrap--toggle;
+    }
+
+    p {
+      margin-bottom: 0;
+
+      + p {
+        margin-top: 1rem;
+      }
+    }
+  }
+}

package/scss/_br-footer.scss

@@ -0,0 +1,8 @@
+
+.br-footer-upper {
+  @include br-footer-upper;
+}
+
+.br-footer-lower {
+  @include br-footer-lower;
+}

package/scss/{_form-row.scss → _br-form-row.scss}

@@ -1,33 +1,9 @@
 
 .br-form-row {
-
-  &:not(:last-of-type) {
-    margin-bottom: 1rem;
-  }
-
-  @include media-breakpoint-up(sm) {
-    grid-template-columns: 33fr 67fr;
-    gap: $gap-account;
-    display: grid;
-  }
-
-  > label {
-    @include media-breakpoint-up(sm) {
-      margin-top: 1rem;
-    }
-  }
+  @include br-form-row;
 
   label {
     font-weight: normal;
-
-    @include media-breakpoint-down(sm) {
-      margin-bottom: 0.5rem;
-    }
-  }
-
-  input {
-    width: 100%;
-    margin: 0;
   }
 
   .content {

package/scss/_br-form-update.scss

@@ -0,0 +1,8 @@
+
+.br-form-update {
+  @include br-form-update;
+}
+
+.br-form-update--input {
+  @include br-form-update--input;
+}

package/scss/_br-wrap.scss

@@ -1,6 +1,6 @@
 
 .br_wrap {
-  max-width: $layout-width-wide;
+  max-width: $layout-width-lg;
   margin-right: auto;
   margin-left: auto;
 
@@ -9,10 +9,10 @@
   }
 
   &.videos {
-    max-width: $layout-width-videos;    
+    max-width: $layout-width-md;    
   }
 
   &.thin {
-    max-width: $layout-width-thin;
+    max-width: $layout-width-sm;
   }
 }

package/scss/_city-of-london.scss

@@ -0,0 +1,4 @@
+
+.city-of-london-lockup {
+  @include city-of-london-lockup;
+}

package/scss/_fonts.scss

@@ -1,36 +1,34 @@
 
-$f-file-path: "~barbican-reset/fonts/";
+$futura: "FuturaLTPro";
+$font-family: #{$futura}, "Helvetica", "Arial", sans-serif;
+$font-file-path: "../fonts/";
 
-@include font-face(
-  "#{$f-primary-name}",
-  "#{$f-file-path}#{$f-primary-name}-Book",
-  ("woff", "woff2")
-) {
+@font-face {
+  font-family: "#{$futura}";
+  src: url("#{$font-file-path}#{$futura}-Book.woff") format("woff"),
+       url("#{$font-file-path}#{$futura}-Book.woff2") format("woff2");
   font-style: normal;
 }
 
-@include font-face(
-  "#{$f-primary-name}",
-  "#{$f-file-path}#{$f-primary-name}-BookOblique",
-  ("woff", "woff2")
-) {
+@font-face {
+  font-family: "#{$futura}";
+  src: url("#{$font-file-path}#{$futura}-BookOblique.woff") format("woff"),
+       url("#{$font-file-path}#{$futura}-BookOblique.woff2") format("woff2");
   font-style: italic;
 }
 
-@include font-face(
-  "#{$f-primary-name}",
-  "#{$f-file-path}#{$f-primary-name}-Bold",
-  ("woff", "woff2")
-) {
+@font-face {
+  font-family: "#{$futura}";
+  src: url("#{$font-file-path}#{$futura}-Bold.woff") format("woff"),
+       url("#{$font-file-path}#{$futura}-Bold.woff2") format("woff2");
   font-style: normal;
   font-weight: bold;
 }
 
-@include font-face(
-  "#{$f-primary-name}",
-  "#{$f-file-path}#{$f-primary-name}-BoldOblique",
-  ("woff", "woff2")
-) {
+@font-face {
+  font-family: "#{$futura}";
+  src: url("#{$font-file-path}#{$futura}-BoldOblique.woff") format("woff"),
+       url("#{$font-file-path}#{$futura}-BoldOblique.woff2") format("woff2");
   font-style: italic;
   font-weight: bold;
-}
+}

package/scss/_input.scss

@@ -1,7 +1,7 @@
 
 .form-control {
   @include focus {
-    @include input-focus;
+    @include input-focus-defaults;
   }
 }
 
@@ -12,7 +12,7 @@ input::placeholder {
 input[type=checkbox],
 input[type=radio] {
   margin-bottom: 0.5rem;
-  margin-right: $space;
+  margin-right: 0.5rem;
 }
 
 input[type=button],
@@ -23,13 +23,13 @@ input[type=submit] {
 
 input[type=number] {
   @include focus {
-    @include input-focus;
+    @include input-focus-defaults;
   }
 }
 
-#{$all-text-inputs} {
-  @include all-text-inputs;
+@include all-text-inputs {
+  @include text-input-defaults;
   @include focus {
-    @include input-focus;
+    @include input-focus-defaults;
   }
-}
+}

package/scss/_list.scss

@@ -1,5 +1,5 @@
 menu, ol, ul {
-  padding: 0 0 0 ($space * 2);
+  padding: 0 0 0 1.25rem;
 }
 
 nav > ul {

package/scss/_table.scss

@@ -0,0 +1,25 @@
+
+table {
+  border-spacing: 0;
+  width: 100%;
+
+  &.basket { @include basket-table; }
+  &.details { @include details-table; }
+  &.gifts { @include gifts-table; }
+  &.etickets { @include etickets-table; }
+  &.details.membership { @include membership-table; }
+  &.preferences { @include preferences-table; }
+  &.resale { @include resale-table; }
+  &.section { @include section-table; }
+  &.tickets { @include tickets-table; }
+}
+
+table.orders {
+  @include orders-table($columns-orders);
+  @include default-table-style;
+}
+
+td {
+  padding: 0;
+}
+

package/scss/card/index.scss

@@ -10,40 +10,25 @@
 @import "slim";
 
 .card {
-  border: 1px solid $c-grey-pearl;
-  border-radius: $border-radius-lg;
-}
-
-.card + .card {
-  margin-top: 1.25rem;
+  @include card;
 }
 
 .card-header {
-  border-bottom: 1px solid $c-grey-pearl;
-  background-color: transparent;
+  @include card-header;
 }
 
 .card-subtitle {
-  color: $c-grey-steel !important;
-  font-size: $font-size-sm;
-  font-weight: 400;
-  margin: 0;
+  @include card-subtitle;
 }
 
 .card-body {
-  padding: 1.5rem;
+  @include card-body;  
 }
 
 .card-img {
-  border: 1px solid $c-grey-concrete;
-  margin-bottom: 1rem;
-  max-width: 100%;
+  @include card-img;
 }
 
 .card-footer {
-  padding: 1rem;
-
-  @include media-breakpoint-up(md) {
-    border-top: 1px solid $c-grey-concrete;
-  }
+  @include card-footer;
 }

package/scss/index.scss

@@ -10,13 +10,16 @@
 @import "footer";
 @import "klaro";
 @import "fonts";
-@import "br-loader";
 @import "close-icon";
-@import "table/index";
+@import "table";
 @import "promo";
-@import "alert";
-@import "form-row";
+
+@import "br-alert";
+@import "br-form-row";
+@import "br-loader";
 @import "br-wrap";
+@import "br-footer";
+@import "city-of-london";
 
 // bootstrap component styles
 @import "btn";
@@ -34,7 +37,7 @@
 
 body {
   line-height: $line-height-md;
-  font-family: $f-primary;
+  font-family: $font-family;
   color: $c-grey-night;
 }
 

package/components/footer_lower.vue

@@ -1,20 +0,0 @@
-<template>
-  <div :class="$style.lower">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default { 
-  name: 'FooterLower'
-}
-</script>
-
-<style lang="scss" module>
-
-.lower {
-  padding-bottom: 1.875rem;
-  padding-top: 1.875rem;
-}
-
-</style>

package/components/footer_upper.vue

@@ -1,51 +0,0 @@
-<template>
-  <div :class="styleUpper">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default { 
-  name: 'FooterUpper',
-  props: {
-    splash: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    styleUpper() {
-      const style = this.$style;
-      let output = [style.upper];
-      if (this.splash) { output.push(style.splash); }
-      return output;
-    },
-  }
-}
-</script>
-
-<style lang="scss" module>
-
-.upper {
-  padding-top: 3.75rem;
-
-  @include media-breakpoint-up(md) {
-    grid-template-columns: 11rem auto;
-    display: grid;
-    gap: 1rem;
-  }
-
-  nav a {
-    @include focus {
-      @include single-box($white);
-      background-color: $white;
-      color: $black;
-    }
-  }
-
-  &:not(.splash) {
-    padding-bottom: 3.75rem;
-  }
-}
-
-</style>