barbican-reset 2.53.0 → 2.55.0

package/index.js

@@ -1,28 +1,36 @@
 import BrAlert from "./components/BrAlert";
 import BrAnchor from "./components/BrAnchor";
 import BrButton from "./components/BrButton";
+
 import BrCard from "./components/BrCard";
+import BrCardBody from "./components/BrCardBody";
 import BrCardText from "./components/BrCardText";
 import BrCardTitle from "./components/BrCardTitle";
 import BrCardSubTitle from "./components/BrCardSubTitle";
-import BrCollapseButton from './components/BrCollapse/Button';
-import BrCollapseContent from './components/BrCollapse/Content';
+
+import BrCollapseButton from "./components/BrCollapse/Button";
+import BrCollapseContent from "./components/BrCollapse/Content";
+
 import BrConfirmDone from "./components/BrConfirmDone";
 import BrConfirmEmail from "./components/BrConfirmEmail";
+
 import BrContainer from "./components/BrContainer";
+
 import BrFooterLower from "./components/BrFooterLower";
 import BrFooterUpper from "./components/BrFooterUpper";
+
 import BrFormBlock from "./components/BrFormBlock";
 import BrFormCheckbox from "./components/BrFormCheckbox/Component";
 import BrFormCheckboxGroup from "./components/BrFormCheckboxGroup/Component";
-import BrFormGroup from './components/BrFormGroup/Component';
-import BrFormInput from './components/BrFormInput/Component';
+import BrFormGroup from "./components/BrFormGroup/Component";
+import BrFormInput from "./components/BrFormInput/Component";
 import BrFormPassword from "./components/BrFormPassword";
-import BrFormRadio from './components/BrFormRadio/Component';
-import BrFormRadioGroup from './components/BrFormRadioGroup/Component';
+import BrFormRadio from "./components/BrFormRadio/Component";
+import BrFormRadioGroup from "./components/BrFormRadioGroup/Component";
 import BrFormRow from "./components/BrFormRow";
-import BrFormTextarea from './components/BrFormTextarea/Component';
+import BrFormTextarea from "./components/BrFormTextarea/Component";
 import BrFormUpdate from "./components/BrFormUpdate";
+
 import BrLoader from "./components/BrLoader";
 import BrSkiplink from "./components/BrSkiplink";
 import BrWrap from "./components/BrWrap";
@@ -38,6 +46,7 @@ export {
   BrAnchor,
   BrButton,
   BrCard,
+  BrCardBody,
   BrCardSubTitle,
   BrCardText,
   BrCardTitle,

package/package.json

@@ -112,5 +112,5 @@
     "style:patterns": "cd patterns && gulp build:css",
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
-  "version": "2.53.0"
+  "version": "2.55.0"
 }

package/patterns/scss/styles.scss

@@ -20,11 +20,10 @@ $tints: "40", "70", "85", "95";
 }
 
 body {
-  @include fontfamily-light;
+  background-color: $c-grey-l96;
   line-height: $line-height-md;
   color: $c-grey-l21;
   margin: 0;
-  background-color: $c-grey-l96;
 }
 
 .topbar {

package/scss/_atomic.scss

@@ -1,66 +1,8 @@
-$gaps: 'margin-top', 'margin-bottom', 'min-height', 'padding-left', 'padding-right';
-$text-aligns: 'left', 'center', 'right';
-$margins05: 'margin-top', 'margin-bottom', 'margin-right', 'margin-left';
-$paddings05: 'padding-top', 'padding-bottom', 'padding-right', 'padding-left';
-
-/// @group Atomic
-/// Generator for gap classes. Creates 5 variations
-/// @example .margin-top-1, .margin-top-2, .margin-top-3, .margin-top-4, .margin-top-5
-@mixin printGapClasses {
-  @each $gap in $gaps {
-    @for $i from 1 to 5 {
-      .#{$gap}-#{$i} {
-        #{$gap}: 1rem * $i;
-      }
-    }
-  }
-}
-
-/// @group Atomic
-/// Generator for text-align classes. Creates 3 variations
-/// @example .text-align-left, .text-align-center, .text-align-right
-@mixin printTextAlignClasses {
-  @each $align in $text-aligns {
-    .text-align-#{$align} {
-      text-align: #{$align};
-    }
-  }
-}
-
-/// @group Atomic
-/// Generator for margin half classes. Creates 4 variations
-/// @example .margin-top-05, .margin-bottom-05, .margin-right-05, .margin-left-05
-@mixin printMarginClasses {
-  @each $margin in $margins05 {
-    .#{$margin}-05 {
-      #{$margin}: 0.5rem;
-    }
-  }
-}
-
-/// @group Atomic
-/// Generator for padding half classes. Creates 4 variations
-/// @example .padding-top-05, .padding-bottom-05, .padding-right-05, .padding-left-05
-@mixin printPaddingClasses {
-  @each $padding in $paddings05 {
-    .#{$padding}-05 {
-      #{$padding}: 0.5rem;
-    }
-  }
-}
-
-@include printGapClasses;
-@include printTextAlignClasses;
-@include printMarginClasses;
-@include printPaddingClasses;
-
-.font-weight-700 {
-  @include fontfamily-black;
-}
-
-.font-weight-400 {
-  @include fontfamily-light;
-}
+@import "atomic/font-weights";
+@import "atomic/margins";
+@import "atomic/min-heights";
+@import "atomic/paddings";
+@import "atomic/text-aligns";
 
 .border-radius-lg {
   border-radius: $br-border-radius-lg;
@@ -84,22 +26,6 @@ $paddings05: 'padding-top', 'padding-bottom', 'padding-right', 'padding-left';
   margin: 0;
 }
 
-.margin-0 {
-  margin: 0;
-}
-
-.padding-0 {
-  padding: 0;
-}
-
-.margin-bottom-0 {
-  margin-bottom: 0;
-}
-
-.margin-top-025 {
-  margin-top: 0.25rem;
-}
-
 .overflow-hidden {
   overflow: hidden;
 }
@@ -108,14 +34,14 @@ $paddings05: 'padding-top', 'padding-bottom', 'padding-right', 'padding-left';
   width: 100%;
 }
 
-.background-color-alt {
-  background-color: brandColor(generic, tint-95);
-}
-
 .min-width-3 {
   min-width: 3rem;
 }
 
+.background-color-alt {
+  background-color: brandColor(generic, tint-95);
+}
+
 /// Class for visually hiding markup, while still allowing screen readers to parse the content
 .sr-only {
   @include sr-only;

package/scss/_br-button.scss

@@ -149,7 +149,7 @@
   &.btn-radio {
     border: 1px solid hsl(0deg, 0%, 65%);
     padding: 0.75rem 0.75rem 0.625rem;
-    font-weight: 400;
+    font-weight: normal;
     margin: 0.25rem;
 
     @include focus {

package/scss/_br-form-row.scss

@@ -2,7 +2,7 @@
   @include br-form-row;
 
   label {
-    font-weight: 400;
+    font-weight: normal;
   }
 
   .content {

package/scss/_btn.scss

@@ -103,7 +103,7 @@
   &.btn-radio {
     border: 1px solid hsl(0deg, 0%, 65%);
     padding: 0.75rem 0.75rem 0.625rem;
-    font-weight: 400;
+    font-weight: normal;
     margin: 0.25rem;
 
     @include focus {

package/scss/_font.scss

@@ -0,0 +1,51 @@
+$name: "Supreme";
+$variant: "LLWeb";
+$path: "https://static.barbican.org.uk/systems-public/fonts";
+
+@font-face {
+  font-family: $name;
+  src: url("#{$path}/#{$name}#{$variant}-Black.woff") format("woff"),
+  url("#{$path}/#{$name}#{$variant}-Black.woff2") format("woff2");
+  font-style: normal;
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: $name;
+  src: url("#{$path}/#{$name}#{$variant}-BlackItalic.woff") format("woff"),
+  url("#{$path}/#{$name}#{$variant}-BlackItalic.woff2") format("woff2");
+  font-style: italic;
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: $name;
+  src: url("#{$path}/#{$name}#{$variant}-Regular.woff") format("woff"),
+  url("#{$path}/#{$name}#{$variant}-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: bolder;
+}
+
+@font-face {
+  font-family: $name;
+  src: url("#{$path}/#{$name}#{$variant}-Italic.woff") format("woff"),
+  url("#{$path}/#{$name}#{$variant}-Italic.woff2") format("woff2");
+  font-style: italic;
+  font-weight: bolder;
+}
+
+@font-face {
+  font-family: "Supreme";
+  src: url("#{$path}/#{$name}#{$variant}-Light.woff") format("woff"),
+  url("#{$path}/#{$name}#{$variant}-Light.woff2") format("woff2");
+  font-style: normal;
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: "Supreme";
+  src: url("#{$path}/#{$name}#{$variant}-LightItalic.woff") format("woff"),
+  url("#{$path}/#{$name}#{$variant}-LightItalic.woff2") format("woff2");
+  font-style: italic;
+  font-weight: normal;
+}

package/scss/_form.scss

@@ -1,5 +1,5 @@
 label {
-  @include fontfamily-black;
+  font-weight: bold;
   display: block;
 }
 
@@ -9,7 +9,7 @@ label {
   p {
     margin-bottom: 0;
 
-    + p {
+    +p {
       margin-top: 0.5rem;
     }
   }
@@ -17,4 +17,4 @@ label {
   &.center {
     text-align: center;
   }
-}
+}

package/scss/_klaro.scss

@@ -1,12 +1,12 @@
 @mixin cm-button {
-  @include fontfamily-black;
-  background: $c-grey-l44;
   border-radius: $br-border-radius;
   font-size: $font-size-sm;
+  background: $c-grey-l44;
   padding: 0.5em 0.75em;
   margin-right: 1em;
-  cursor: pointer;
+  font-weight: bold;
   color: $br-white;
+  cursor: pointer;
   border: 0;
 
   &:focus {
@@ -294,7 +294,7 @@
               }
 
               span.cm-list-title {
-                @include fontfamily-black;
+                font-weight: bold;
               }
 
               p.purposes {
@@ -420,14 +420,14 @@
         }
 
         .cn-learn-more {
-          @include fontfamily-black;
           border-radius: $br-border-radius;
           font-size: $font-size-sm;
           background: $c-grey-l44;
           text-decoration: none;
           display: inline-block;
-          padding: 0.5rem;
+          font-weight: bold;
           color: $br-white;
+          padding: 0.5rem;
 
           @include small-down {
             margin-bottom: 1rem;

package/scss/_list.scss

@@ -3,7 +3,6 @@ menu,
 ol,
 ul {
   padding: 0 0 0 1.25rem;
-  margin: 0;
 }
 
 nav>ul {

package/scss/_table.scss

@@ -1,18 +1,48 @@
-
 table {
+  border-collapse: collapse;
   border-spacing: 0;
+  text-align: left;
   width: 100%;
 
-  &.basket { @include basket-table; }
-  &.details { @include details-table; }
-  &.gifts { @include gifts-table; }
-  &.etickets { @include etickets-table; }
-  &.details.membership { @include membership-table; }
-  &.details.simple { @include simple-table; }
-  &.preferences { @include preferences-table; }
-  &.resale { @include resale-table; }
-  &.section { @include section-table; }
-  &.tickets { @include tickets-table; }
+  &.basket {
+    @include basket-table;
+  }
+
+  &.details {
+    @include details-table;
+  }
+
+  &.gifts {
+    @include gifts-table;
+  }
+
+  &.etickets {
+    @include etickets-table;
+  }
+
+  &.details.membership {
+    @include membership-table;
+  }
+
+  &.details.simple {
+    @include simple-table;
+  }
+
+  &.preferences {
+    @include preferences-table;
+  }
+
+  &.resale {
+    @include resale-table;
+  }
+
+  &.section {
+    @include section-table;
+  }
+
+  &.tickets {
+    @include tickets-table;
+  }
 }
 
 table.orders {
@@ -28,5 +58,4 @@ tr {
 
 td {
   padding: 0;
-}
-
+}

package/scss/atomic/font-weights.scss

@@ -0,0 +1,11 @@
+$font-weights: bold, bolder, normal;
+
+@mixin printFontWeightClasses {
+  @each $weight in $font-weights {
+    .font-weight-#{$weight} {
+      font-weight: $weight;
+    }
+  }
+}
+
+@include printFontWeightClasses;

package/scss/atomic/margins.scss

@@ -0,0 +1,17 @@
+$margins: 'margin', 'margin-top', 'margin-bottom', 'margin-right', 'margin-left';
+
+@mixin printMarginClasses($name, $value) {
+  @each $margin in $margins {
+    .#{$margin}-#{$name} {
+      #{$margin}: #{$value}rem;
+    }
+  }
+}
+
+@include printMarginClasses("0", 0);
+@include printMarginClasses("025", 0.25);
+@include printMarginClasses("05", 0.5);
+
+@for $i from 1 to 5 {
+  @include printMarginClasses($i, $i);
+}

package/scss/atomic/min-heights.scss

@@ -0,0 +1,9 @@
+@mixin printMinHeightClasses($name, $value) {
+  .min-height-#{$name} {
+    min-height: #{$value}rem;
+  }
+}
+
+@for $i from 1 to 5 {
+  @include printMinHeightClasses($i, $i);
+}

package/scss/atomic/paddings.scss

@@ -0,0 +1,16 @@
+$paddings: 'padding', 'padding-top', 'padding-bottom', 'padding-right', 'padding-left';
+
+@mixin printPaddingClasses($name, $value) {
+  @each $padding in $paddings {
+    .#{$padding}-#{$name} {
+      #{$padding}: #{$value}rem;
+    }
+  }
+}
+
+@include printPaddingClasses("0", 0);
+@include printPaddingClasses("05", 0.5);
+
+@for $i from 1 to 5 {
+  @include printPaddingClasses($i, $i);
+}

package/scss/atomic/text-aligns.scss

@@ -0,0 +1,11 @@
+$text-aligns: left, center, right;
+
+@mixin printTextAlignClasses {
+  @each $align in $text-aligns {
+    .text-align-#{$align} {
+      text-align: $align;
+    }
+  }
+}
+
+@include printTextAlignClasses;

package/scss/card/_account.scss

@@ -1,5 +1,6 @@
 .card[account] {
   margin-top: $gap-account;
+  position: relative;
   margin-bottom: 0;
 
   >.card-body {

package/scss/card/_login.scss

@@ -1,5 +1,4 @@
 .card[login] {
-  @include br-form-card;
 
   .card-header {
     justify-content: space-between;
@@ -8,6 +7,6 @@
   }
 
   .card-title {
-    @include br-form-card-title;
+    font-size: $h1-font-size;
   }
 }

package/scss/card/index.scss

@@ -16,6 +16,10 @@
   @include br-card-header;
 }
 
+.card-title {
+  @include br-card-title;
+}
+
 .card-subtitle {
   @include br-card-subtitle;
 }
@@ -30,98 +34,4 @@
 
 .card-footer {
   @include br-card-footer;
-}
-
-// legacy code from bootstrap removal ********************
-
-// .card {
-//   border: 1px solid hsl(0deg, 0%, 85%);
-//   background-color: white;
-//   background-clip: border-box;
-//   border-radius: 0.375rem;
-//   flex-direction: column;
-//   word-wrap: break-word;
-//   position: relative;
-//   display: flex;
-//   min-width: 0;
-// }
-
-// .card[login] .card-header {
-//   border-bottom: 1px solid hsl(0deg, 0%, 85%);
-//   padding: 1.5rem 1.75rem 1.25rem;
-//   justify-content: space-between;
-//   background-color: transparent;
-//   align-items: center;
-//   display: flex;
-// }
-
-// .card[login] .card-body {
-//   color: rgb(51, 51, 51);
-//   padding: 1.75rem;
-//   flex: 1 1 auto;
-// }
-
-// .card[confirm] {
-//   margin-right: auto;
-//   text-align: center;
-//   margin-left: auto;
-//   max-width: 20rem;
-// }
-
-// .card[confirm] .card-body {
-//   padding: 1.75rem;
-// }
-
-// .card[block] {
-//   box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
-//   border: none;
-// }
-
-// .card[slim] .card-body {
-//   padding: 1.25rem;
-// }
-
-// .card[membership] {
-//   box-shadow: 0 0 0.375rem rgba(89, 89, 89, 0.5);
-//   background: hsl(0deg, 0%, 20%);
-//   width: calc(100% - 1rem);
-//   display: inline-block;
-//   margin: 0.5rem;
-//   color: #fff;
-//   border: none;
-// }
-
-// .card[membership] > .card-body {
-//   align-items: flex-start;
-//   row-gap: 0.75rem;
-//   display: grid;
-// }
-
-// @media only screen and (min-width: 520px) {
-//   .card[membership] {
-//     width: 23rem;
-//   }
-
-//   .card[membership] > .card-body {
-//     row-gap: 2rem;
-//   }
-// }
-
-// .card[password] .card-header {
-//   border-bottom: 1px solid hsl(0deg, 0%, 85%);
-//   padding: 1.5rem 1.75rem 1.25rem;
-//   background-color: transparent;
-// }
-
-// .card[password] .card-body {
-//   padding: 1.75rem;
-// }
-
-// .card[account] {
-//   margin-top: 2rem;
-//   margin-bottom: 0;
-// }
-
-// .card[account] > .card-body {
-//   padding: 2rem;
-// }
+}

package/scss/helpers/mixins/_br-alert.scss

@@ -65,8 +65,8 @@
 }
 
 @mixin br-alert--title {
-  @include fontfamily-black;
   margin-bottom: 0.25rem;
+  font-weight: bold;
 }
 
 @mixin br-alert--flex {

package/scss/helpers/mixins/_br-card.scss

@@ -9,20 +9,32 @@
 }
 
 @mixin br-card-header {
-  border-bottom: 1px solid $c-grey-l87;
   padding: 1.5rem 1.75rem 1.25rem;
   background-color: transparent;
+
+  &:not(.noborder) {
+    border-bottom: 1px solid $c-grey-l87;
+  }
+}
+
+@mixin br-card-title {
+  margin: 0;
 }
 
 @mixin br-card-subtitle {
   color: $c-grey-l44 !important;
   font-size: $font-size-sm;
-  font-weight: 400;
+  font-weight: normal;
   margin: 0;
 }
 
 @mixin br-card-body {
   padding: 1.75rem;
+
+  &.wide {
+    padding-right: 0;
+    padding-left: 0;
+  }
 }
 
 @mixin br-card-footer {
@@ -47,9 +59,4 @@
   .card-body {
     @include br-card-body;
   }
-}
-
-@mixin br-form-card-title {
-  font-size: $h1-font-size;
-  margin: 0;
 }