barbican-reset 1.0.2 → 1.0.3

package/helpers/mixins/_buttons.scss

@@ -0,0 +1,104 @@
+
+@mixin button_setup($gap: 1em) {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  border-radius: $border-radius-lg;
+  text-decoration: none;
+  display: inline-flex;
+  place-items: center;
+  text-align: center;
+  gap: $gap * 0.75;
+  font-weight: 700;
+  transition: none;
+  cursor: pointer;
+  line-height: 1;
+  padding: $gap;
+}
+
+@mixin button_solid(
+  $background: $c-brand-orange, 
+  $color: $white, 
+  $gap: 1em,
+  $border: 1px) {
+  @include button_setup($gap);  
+  border: $border solid $background;
+  background-color: $background;
+  color: $color;
+
+  @include focus {
+    @include double-box($color, $background);
+    border: $border solid $background;
+    background-color: $background;
+    color: $color;
+  }
+}
+
+@mixin button_outline(
+  $color: $c-brand-orange,
+  $background: $white, 
+  $gap: 1em,
+  $border: 1px) {
+  @include button_setup($gap);
+  border: $border solid $color;
+  background-color: $background;
+  color: $color;
+
+  @include focus {
+    border: $border solid $color;
+    background-color: $color;
+    color: $background;
+  }
+}
+
+@mixin btn-primary {
+  @include button_solid;
+}
+
+@mixin btn-outline-primary {
+  @include button_outline;
+}
+
+@mixin btn-outline-header {
+  @include button_outline(
+    $color: $white, 
+    $background: $c-brand-orange,
+    $border: 0.125rem);
+}
+
+@mixin btn-secondary {
+  @include button_solid($c-grey-night);
+}
+
+@mixin btn-outline-secondary {
+  @include button_outline($c-grey-night);
+}
+
+@mixin btn-cinema {
+  @include button_solid($c-brand-cinema);
+}
+
+@mixin btn-power {
+  @include button_solid($c-power-blue);
+}
+
+@mixin btn-info {
+  @include button_solid($c-status-neutral);
+}
+
+@mixin btn-outline-cinema {
+  @include button_outline($c-brand-cinema);
+}
+
+@mixin btn-remove {
+  @include button_solid(
+    $background: $c-grey-night,
+    $gap: 0.625rem);
+}
+
+@mixin btn-expand {
+  display: block;
+}
+
+@mixin btn-slim {
+  padding: 0.5rem 0.75rem;
+}

package/helpers/mixins/_content.scss

@@ -42,4 +42,11 @@
   &:focus {
     background-color: $background;
   }
+}
+
+@mixin card-container {
+  border-radius: $border-radius-lg;
+  background-color: $white;
+  padding: $gap-power;
+  overflow: hidden;
 }

package/helpers/mixins/_core.scss

@@ -22,63 +22,4 @@
 @mixin set-appearance($value: none) {
   -webkit-appearance: $value;
   -moz-appearance: $value;
-}
-
-@mixin button(
-  $background: $c-brand-orange, 
-  $focus: $c-brand-orange-dark, 
-  $gap: 1em) {
-  
-  $color: $white;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  border-radius: $border-radius-lg;
-  background-color: $background;
-  padding: $gap ($gap * 1.5);
-  text-decoration: none;
-  place-items: center;
-  text-align: center;
-  font-weight: 700;
-  transition: none;
-  gap: $gap * 0.75;
-  cursor: pointer;
-  line-height: 1;
-  display: flex;
-  color: $color;
-
-  @include focus {
-    @include double-box($color, $focus);
-    background-color: $focus;
-    color: $color;
-  }
-}
-
-@mixin button_outline(
-  $background: $c-brand-orange, 
-  $focus: $c-brand-orange-dark, 
-  $gap: 1em) {
-  
-  $color: $white;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  border-radius: $border-radius-lg;
-  border: 1px solid $background;
-  padding: $gap ($gap * 1.5);
-  background-color: $color;
-  text-decoration: none;
-  place-items: center;
-  text-align: center;
-  color: $background;
-  font-weight: 700;
-  transition: none;
-  gap: $gap * 0.75;
-  cursor: pointer;
-  line-height: 1;
-  display: flex;
-
-  @include focus {
-    border: 1px solid $focus;
-    background-color: $focus;
-    color: $color;
-  }
 }

package/helpers/mixins/index.scss

@@ -1,5 +1,6 @@
 // paths more explicit for gulp-sass
 @import "~bourbon/core/bourbon.scss";
+@import "buttons.scss";
 @import "content.scss";
 @import "core.scss";
 @import "focus.scss";

package/helpers/variables/colors/_layout.scss

@@ -4,12 +4,12 @@ $c-list-btn-default:       $white, $c-grey-night, $white;
 $c-list-btn-primary:       $white, $c-brand-orange, null, null, $c-brand-orange-dark;
 $c-list-btn-primary-alt:   $white, $c-status-neutral;
 $c-list-btn-secondary:     $c-brand-orange, $white, $c-brand-orange, $c-brand-orange-dark, $c-brand-orange-light, $c-brand-orange-dark;
-$c-list-btn-secondary-alt: $c-brand-orange, $white, $c-brand-orange, $white, $c-brand-orange;
+$c-list-secondary_outline: $c-brand-orange, $white, $c-brand-orange, $white, $c-brand-orange;
 $c-list-btn-outline:       $c-grey-night, $c-grey-alpine, $c-grey-night, $c-grey-alpine, $c-grey-night;
 $c-list-btn-light:         $c-grey-night, $white;
 
-$c-list-btn-primary-cinema:   $white, $c-brand-cinema, null, null, $c-brand-cinema-dark;
-$c-list-btn-secondary-cinema: $c-brand-cinema, $white, $c-brand-cinema, $c-brand-cinema-dark, $c-status-success-fade, $c-brand-cinema-dark;
+$c-list-btn-cinema:   $white, $c-brand-cinema, null, null, $c-brand-cinema-dark;
+$c-list-btn-outline-cinema: $c-brand-cinema, $white, $c-brand-cinema, $c-brand-cinema-dark, $c-status-success-fade, $c-brand-cinema-dark;
 
 $c-list-btn-primary-power:   $white, $c-power-blue, null, null, $c-power-blue-dark;
 

package/helpers/variables/layout/index.scss

@@ -6,11 +6,14 @@ $constrained_content_width--wide: 1200px;
 $space: 0.625rem;
 // Default large amount of space.
 $space--large: $space * 3;
-// Default gap value for use in CSS grid.
-$grid-gap: $space;
-
 $border-radius-lg: 0.375rem;
 
+// Basket layout
+$gap-basket: 0.625rem;
+
+// Seat Selection
+$gap-instance: 1.5rem;
+
 // Account Area
 $gap-account: 2rem;
 

package/icons/index.js

@@ -2,10 +2,12 @@ import BarbicanLogo from '../vue/Icons/Barbican'
 import CityOfLondonLogo from '../vue/Icons/CityOfLondon'
 import ArrowIcon from '../vue/Icons/ArrowIcon'
 import BackArrow from '../vue/Icons/back_arrow.vue'
+import CartIcon from '../vue/Icons/cart.vue'
 
 export {
   BarbicanLogo,
   CityOfLondonLogo,
   ArrowIcon,
-  BackArrow
+  BackArrow,
+  CartIcon
 };

package/index.js

@@ -2,16 +2,17 @@ import LoadingAnimation from './vue/LoadingAnimation'
 import Notification from './vue/Notification'
 import RelatedTitle from './vue/RelatedTitle'
 import TypeText from './vue/TypeText'
-import Container from './vue/Container'
 import Wrap from './vue/Wrap'
-import Card from './vue/Card'
 import Carousel from './vue/Carousel'
-import Banner from './vue/Banner'
 import AccountCard from './vue/Account/Card'
 import AccountTitle from './vue/Account/Title'
 import Placeholder from './vue/Placeholder'
 import LoginForm from './vue/Login/Form'
 import FormRow from './vue/form_row'
+import Container from './vue/container'
+import EventSummary from './vue/event_summary'
+import Card from './vue/card'
+import Block from './vue/block'
 
 export { 
   LoadingAnimation, 
@@ -22,10 +23,11 @@ export {
   Wrap,
   Card,
   Carousel,
-  Banner,
   AccountCard,
   AccountTitle,
   Placeholder,
   LoginForm,
-  FormRow
+  FormRow,
+  EventSummary,
+  Block
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "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

@@ -5,4 +5,8 @@
 
 .margin-top-2 {
   margin-top: 2rem;
+}
+
+.margin-bottom-1 {
+  margin-bottom: 1rem;
 }

package/scss/_btn.scss

@@ -0,0 +1,52 @@
+.btn {
+  @include button_setup;
+
+  &.btn-primary {
+    // solid orange
+    @include btn-primary;
+  }
+
+  &.btn-outline-primary {
+    // orange outline, fill on focus
+    @include btn-outline-primary;
+  }
+
+  &.btn-outline-header {
+    // orange outline, fill on focus
+    @include btn-outline-header;
+  }
+
+  &.btn-info {
+    // solid blue
+    @include btn-info;
+  }
+
+  &.btn-secondary {
+    // solid grey
+    @include btn-secondary;
+  }
+
+  &.btn-outline-secondary {
+    // grey outline, fill on focus
+    @include btn-outline-secondary;
+  }
+
+  &.btn-remove {
+    // solid grey, slim
+    @include btn-remove;
+  }
+
+  // button modifyers
+  &.expand {
+    @include btn-expand;
+  }
+  &.slim {
+    @include btn-slim;
+  }
+}
+
+input[type="number"] {
+  @include focus {
+    @include double-box($white, $c-grey-steel);
+  }
+}

package/scss/index.scss

@@ -11,6 +11,7 @@
 @import "close-icon.scss";
 
 // bootstrap component styles
+@import "btn.scss";
 @import "checkbox.scss";
 @import "checkbox-group.scss";
 

package/vue/Icons/cart.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="-89 91 20 19">
+    <path d="M-69 91.7c-.1-.3-.3-.5-.5-.6s-.5-.2-.8-.1l-3 1c-.4.1-.7.4-.7.9l-.2 1.7-13.8 1.5c-.3.1-.6.2-.7.4-.2.2-.2.5-.2.8l.9 4.7c.1.6.4.9 1 .9h12.1l.2 1.4h-11.6c-.3 0-.5.1-.7.3s-.3.4-.3.7c0 .3.1.5.3.7s.4.3.7.3h12.9c.3 0 .6-.2.8-.4.2-.2.3-.5.2-.8l-.6-3 .8-8.3 2.5-.8c.6-.2.8-.7.7-1.3zm-4.4 16.7c0-.4-.2-.8-.5-1.1-.3-.3-.7-.5-1.1-.5-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1 0 .4.2.8.5 1.1.3.3.7.5 1.1.5.4 0 .8-.2 1.1-.5.3-.3.5-.7.5-1.1zm-9.5 0c0-.4-.2-.8-.5-1.1-.3-.3-.7-.5-1.1-.5-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1 0 .4.2.8.5 1.1.3.3.7.5 1.1.5.4 0 .8-.2 1.1-.5.4-.3.5-.7.5-1.1z"></path>
+  </svg>
+</template>

package/vue/Notification/external.scss

@@ -10,18 +10,14 @@
   }
 }
 
-.btn-link, a {
+.btn-link {
   @include status_focus;
 }
 
-.error {
-  .btn-link, a {
-    @include status_focus($c-status-error, $c-status-error-fade);
-  }
+.error .btn-link {
+  @include status_focus($c-status-error, $c-status-error-fade);
 }
 
-.success {
-  .btn-link, a {
-    @include status_focus($c-status-success, $c-status-success-fade);
-  }
+.success .btn-link {
+  @include status_focus($c-status-success, $c-status-success-fade);
 }

package/vue/Notification/notification.scss

@@ -50,7 +50,7 @@ $error-colors: $c-status-error, $c-status-error-fade;
 .wrap {
   background-color: $c-status-neutral-fade;
   border-color: $c-status-neutral-light;
-  border-radius: $border-radius;
+  border-radius: $border-radius-lg;
   border-width: $border-width;
   color: $c-status-neutral;
   border-style: solid;

package/vue/block.vue

@@ -0,0 +1,30 @@
+<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/vue/{Card/index.vue → card.vue}

@@ -1,6 +1,6 @@
 <template>
   <div :class="styleContainer">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
@@ -31,4 +31,29 @@ export default {
 }
 </script>
 
-<style src="./card.scss" lang="scss" module></style>
+<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>

package/vue/container.vue

@@ -0,0 +1,84 @@
+<template>
+  <div :class="styleOuter">
+    <div :class="styleInner">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    splash: {
+      type: Boolean,
+      default: false
+    },
+    masthead: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    styleOuter() {
+      if (this.splash) {
+        return this.$style.outer_splash;
+      }
+      if (this.masthead) {
+        return this.$style.outer_masthead;
+      }
+      return this.$style.outer;
+    },
+    styleInner() {
+      if (this.masthead) {
+        return this.$style.inner_masthead;
+      }
+      return this.$style.inner;
+    }
+  }
+}
+</script>
+
+<style lang="scss" module>
+
+.outer {
+  padding-right: 5%;
+  padding-left: 5%;
+}
+
+.outer_splash {
+  padding-right: 10%;
+  padding-left: 10%;  
+}
+
+.outer_masthead {
+  composes: outer;
+  box-shadow: 0 0.375rem 0.375rem rgba($black, 0.1);
+  background-color: $white;
+}
+
+.inner {
+  max-width: $constrained_content_width--wide;
+  padding-bottom: 1.5rem;
+  padding-top: 1.5rem;
+  margin: 0 auto;
+
+  @include media-breakpoint-up(sm) {
+    padding-bottom: 2.5rem;
+    padding-top: 2.5rem;
+  }
+}
+
+.inner_masthead {
+  composes: inner;
+
+  @include media-breakpoint-up(sm) {
+    padding-bottom: 3rem;
+    padding-top: 3rem;
+  }
+
+  h1 {
+    margin: 0;
+  }
+}
+
+</style>

package/vue/event_summary.vue

@@ -0,0 +1,109 @@
+<template>
+  <div :class="$style.container">
+    <img :class="styleImage" v-bind:src="data.image" alt="" />
+    <div>
+      <div :class="$style.title">{{ data.title }}</div>
+      <div :class="$style.date_time">{{ data.date_formatted }}</div>
+      <div :class="$style.venue">{{ data.venue }}</div>
+      <router-link v-if="data.socially_distanced" :to="{ name: 'chooseSeats', params: { instanceIdShort: data.id_short } }" class="btn btn-outline-primary margin-top-1">
+        Update seat selection
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+export default {
+  name: "EventSummary",
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    basket: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    styleImage() {
+      return this.basket ? this.$style.basket_image : this.$style.seats_image; 
+    }
+  }
+};
+</script>
+
+<style lang="scss" module>
+
+@mixin title {
+  letter-spacing: $headings-letter-spacing;
+  line-height: $line-height-sm;
+}
+
+@mixin subtitle {
+  @include title;
+  font-size: $h5-font-size;
+  color: $c-text-secondary;
+  font-weight: normal;
+
+  @include media-breakpoint-up(md) {
+    font-size: $h4-font-size;
+  }
+}
+
+.container {
+  @include media-breakpoint-up(md) {
+    align-items: flex-start;
+    display: flex;
+  }
+}
+
+.image {
+  border: 1px solid $c-border-faint;
+  border-radius: $border-radius-lg;
+  max-width: 24rem;
+  width: 100%;
+
+  @include media-breakpoint-down(md) {
+    margin-bottom: $gap-instance;
+  }
+
+  @include media-breakpoint-up(md) {
+    margin-right: $gap-instance;
+    width: 50%;
+  }
+}
+
+.seats_image {
+  composes: image;
+
+  @include media-breakpoint-up(md) {
+    max-width: 20rem;
+  }
+}
+
+.basket_image {
+  composes: image;
+
+  @include media-breakpoint-up(md) {
+    max-width: 16rem;
+  }
+}
+
+.title {
+  @include title;
+  font-weight: $headings-font-weight;
+  font-size: $h2-font-size;
+  margin-bottom: 0.75rem;
+}
+
+.date_time {
+  @include subtitle;  
+  margin-bottom: 0.25rem;
+}
+
+.venue {
+  @include subtitle;  
+}
+
+</style>

package/vue/form_row.vue

@@ -64,4 +64,4 @@
   }
 }
 
-</style>
+</style>

package/vue/Banner/banner.scss

@@ -1,8 +0,0 @@
-
-.outer {
-  @include content_masthead;
-}
-
-.inner {
-  @include content_masthead__inner;
-}

package/vue/Banner/index.vue

@@ -1,9 +0,0 @@
-<template>
-  <div :class="$style.outer">
-    <div :class="$style.inner">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style src="./banner.scss" lang="scss" module></style>

package/vue/Card/card.scss

@@ -1,24 +0,0 @@
-
-.container {
-  border-radius: $border-radius-lg;
-  border: 1px solid $c-grey-pearl;
-  background-color: $white;
-  align-content: start;
-  overflow: hidden;
-  padding: 1.25rem;
-  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;
-  }
-}

package/vue/Container/container.scss

@@ -1,20 +0,0 @@
-
-.outer {
-  padding-right: 5%;
-  padding-left: 5%;
-}
-
-.outer_splash {
-  padding-right: 10%;
-  padding-left: 10%;  
-}
-
-.inner {
-  max-width: $constrained_content_width--wide;
-  padding: 1.5rem 0;
-  margin: 0 auto;
-
-  @include media-breakpoint-up(sm) {
-    padding: 2.5rem 0;
-  }
-}

package/vue/Container/index.vue

@@ -1,25 +0,0 @@
-<template>
-  <div :class="styleOuter">
-    <div :class="$style.inner">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    splash : {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    styleOuter() {
-      return this.splash ? this.$style.outer_splash : this.$style.outer;
-    }
-  }
-}
-</script>
-
-<style src="./container.scss" lang="scss" module></style>