barbican-reset 1.2.2 → 1.2.6

package/components/{notification.vue → alert.vue}

@@ -15,7 +15,7 @@
 <script>
 import { CloseIcon } from 'barbican-reset/icons/stream'
 export default {
-  name: "Notification",
+  name: "Alert",
   components: {
     CloseIcon,
   },

package/components/{form_row.vue → form_group.vue}

@@ -11,14 +11,11 @@
 
 <script type="text/javascript">
   export default {
-    name: 'FormRow',
+    name: 'FormGroup',
     props: {
       label: {
         type: String
       },
-      id: {
-        type: String
-      },
       required: {
         type: Boolean
       },
@@ -36,6 +33,9 @@
         if (!this.label) { output.push(style.no_label); }
         if (this.submit) { output.push(style.submit); }
         return output;
+      },
+      id() {
+        return this.label.toLowerCase().split(" ").join("_");
       }
     }
   }
@@ -65,6 +65,7 @@
   }
 
   input {
+    width: 100%;
     margin: 0;
   }
 }
@@ -88,4 +89,4 @@
   }
 }
 
-</style>
+</style>

package/components/form_section.vue

@@ -0,0 +1,23 @@
+<template>
+  <div :class="$style.container">
+    <slot />
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    name: 'FormSection',
+  }
+</script>
+
+<style lang="scss" module>
+
+.container {
+  padding: 0.875rem 0.75rem 0.625rem 0.75rem;
+  border-left: 0.25rem solid;
+  background: $c-grey-alpine;
+  margin-bottom: 1rem;
+  font-weight: 700;
+}
+
+</style>

package/components/form_update.vue

@@ -0,0 +1,32 @@
+<template>
+  <div :class="$style.container">
+    <div :class="$style.input"><slot /></div>
+    <b-button class="btn-update" @click.prevent="$emit('update')">update</b-button>
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    name: 'FormUpdate',
+  }
+</script>
+
+<style lang="scss" module>
+
+.container {
+  grid-template-columns: auto 6rem;
+  column-gap: 0.5rem;
+  display: grid;
+
+  @include media-breakpoint-up(sm) {
+    column-gap: 1rem;
+  }
+}
+
+.input {
+  @include all-text-inputs;
+  user-select: none;
+  overflow: hidden;
+}
+
+</style>

package/helpers/mixins/_buttons.scss

@@ -1,5 +1,5 @@
 
-@mixin button_setup {
+@mixin button-setup {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   border-radius: $border-radius-lg;
@@ -11,7 +11,7 @@
   padding: 1em;
 }
 
-@mixin button_display($display:'ib',$gap:1rem) {
+@mixin button-display($display:'ib',$gap:1rem) {
   @if $display == 'ib' {
     vertical-align: middle;
     display: inline-block;
@@ -28,7 +28,7 @@
   }
 }
 
-@mixin button_solid(
+@mixin button-solid(
   $background: $c-brand-orange, 
   $color: $white, 
   $border: 1px,
@@ -40,7 +40,7 @@
   padding: $padding;
   color: $color;
 
-  @if $display { @include button_display($display, $padding * 0.625); }
+  @if $display { @include button-display($display, $padding * 0.625); }
   @if $line { line-height: $line; }
 
   @include focus {
@@ -51,7 +51,7 @@
   }
 }
 
-@mixin button_outline(
+@mixin button-outline(
   $color: $c-brand-orange,
   $background: $white, 
   $border: 1px,
@@ -63,7 +63,7 @@
   padding: $padding;
   color: $color;
 
-  @if $display { @include button_display($display, $padding * 0.625); }
+  @if $display { @include button-display($display, $padding * 0.625); }
   @if $line { line-height: $line; }
 
   @include focus {
@@ -73,7 +73,7 @@
   }
 }
 
-@mixin button_link(
+@mixin button-link(
   $color: inherit,
   $background: transparent,
   $padding: 0,
@@ -93,7 +93,7 @@
 }
 
 @mixin btn-outline-header {
-  @include button_outline(
+  @include button-outline(
     $color: $white, 
     $background: $c-brand-orange,
     $border: 0.125rem,
@@ -101,46 +101,47 @@
 }
 
 @mixin btn-primary {
-  @include button_solid;
+  @include button-solid;
+  min-width: 8rem;
 }
 
 @mixin btn-outline-primary {
-  @include button_outline;
+  @include button-outline;
 }
 
 @mixin btn-secondary {
-  @include button_solid($c-grey-night);
+  @include button-solid($c-grey-night);
 }
 
 @mixin btn-outline-secondary {
-  @include button_outline($c-grey-night);
+  @include button-outline($c-grey-night);
 }
 
 @mixin btn-cinema {
-  @include button_solid($c-brand-cinema);
+  @include button-solid($c-brand-cinema);
 }
 
 @mixin btn-power {
-  @include button_solid($c-power-blue);
+  @include button-solid($c-power-blue);
 }
 
 @mixin btn-info {
-  @include button_solid($c-status-neutral);
+  @include button-solid($c-status-neutral);
 }
 
 @mixin btn-outline-cinema {
-  @include button_outline($c-brand-cinema);
+  @include button-outline($c-brand-cinema);
 }
 
 @mixin btn-remove {
-  @include button_solid(
+  @include button-solid(
     $background: $c-grey-night,
     $padding: 0.625rem,
     $line: 1.375);
 }
 
 @mixin btn-link {
-  @include button_link {
+  @include button-link {
     @include single-box($c-grey-night);
     background-color: $c-grey-night;
     color: $white;
@@ -148,7 +149,7 @@
 }
 
 @mixin btn-exit {
-  @include button_link {
+  @include button-link {
     @include single-box($c-grey-night);
     background-color: $white;
     border-radius: 50%;
@@ -174,14 +175,14 @@
 }
 
 @mixin btn-membership-card {
-  @include button_outline(
+  @include button-outline(
     $color: $white,
     $background: transparent
   );
 }
 
 @mixin btn-video-login {
-  @include button_solid( 
+  @include button-solid( 
     $background: $white,
     $color: $c-splash-videos 
   );

package/helpers/mixins/_card.scss

@@ -0,0 +1,15 @@
+
+@mixin form-card {
+  .card-header {
+    padding: 1.5rem 1.75rem 1.25rem;
+  }
+  .card-body {
+    padding: 1.75rem 1.75rem 1.5rem;
+  }
+}
+
+@mixin clone($top:5.875) {
+  margin-top: -#{$top}rem;
+  margin-bottom: 0;
+  opacity: 0;
+}

package/helpers/mixins/_content.scss

@@ -32,18 +32,6 @@
   }
 }
 
-// @mixin all-text-inputs {
-//   border: solid $border-width $c-border-strong;
-//   $background: lighten($c-grey-alpine, 1%);
-//   border-radius: $border-radius-sm;
-//   background-color: $background;
-//   // padding: 0.8rem 0.8rem 0.6rem;
-
-//   &:focus {
-//     background-color: $background;
-//   }
-// }
-
 @mixin card-container {
   border-radius: $border-radius-lg;
   background-color: $white;

package/helpers/mixins/_font.scss

@@ -8,4 +8,11 @@
     -webkit-font-smoothing: subpixel-antialiased;
     -moz-osx-font-smoothing: auto;
   }
+}
+
+@mixin all-text-inputs {
+  border: solid $border-width $c-border-strong;
+  padding: 0.875rem 0.875rem 0.75rem;
+  background-color: $c-grey-alpine;
+  border-radius: $border-radius-lg;  
 }

package/helpers/mixins/index.scss

@@ -3,6 +3,7 @@
 @import "account/orders.scss";
 @import "basket.scss";
 @import "buttons.scss";
+@import "card.scss";
 @import "content.scss";
 @import "core.scss";
 @import "festival.scss";

package/icons/password/RequestIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" version="1.1" width="100" height="80">
+    <path data-arrow d="M72.6,45.6L87,60L72.6,74.4V63.6H58.2v-7.2h14.4V45.6z" />
+    <path data-outline d="M79.6,38.4	V13.2C79.6,9,76,9.5,76,9.5L18.6,9.7c0,0-3.5-0.3-3.5,3.5v42.9c0,0-0.7,3.9,3.3,3.9H51" fill="none" stroke-width="7" stroke-linejoin="round" stroke-miterlimit="10" />
+    <path data-fold d="M15.2,14.5l32.3,20.2l32.2-20.2" fill="none" stroke-width="6" stroke-miterlimit="10" />
+  </svg>
+</template>
+
+<style lang="scss" scoped>
+
+.svg {
+  stroke: $c-grey-night;
+  fill: $c-grey-night;
+}
+
+</style>

package/icons/password/{ResetIcon/index.vue → ResetIcon.vue}

@@ -23,4 +23,11 @@
   </svg>
 </template>
 
-<style src="./reset_icon.scss" lang="scss"></style>
+<style lang="scss" scoped>
+
+.reset-success__svg {
+  stroke: $c-grey-night;
+  margin-bottom: 0.625rem;
+}
+
+</style>

package/index.js

@@ -6,21 +6,22 @@ import EventSummary from './components/event_summary'
 import AccountCard from './components/account_card'
 import AccountTitle from './components/account_title'
 import Wrap from './components/wrap'
-import LoginForm from './components/login_form'
-import FormRow from './components/form_row'
 import TableRow from './components/table_row'
 import Banner from './components/banner'
-import Notification from './components/notification'
+import Alert from './components/alert'
 import LoadingAnimation from './components/loading_animation'
 import RelatedTitle from './components/related_title'
 import TypeText from './components/type_text'
 import Placeholder from './components/placeholder'
 import Carousel from './components/carousel'
 import CardDeck from './components/card_deck'
+import FormSection from './components/form_section'
+import FormUpdate from './components/form_update'
+import FormGroup from './components/form_group'
 
 export { 
   LoadingAnimation, 
-  Notification,
+  Alert,
   RelatedTitle,
   TypeText,
   Container,
@@ -31,8 +32,9 @@ export {
   AccountCard,
   AccountTitle,
   Placeholder,
-  LoginForm,
-  FormRow,
+  FormSection,
+  FormUpdate,
+  FormGroup,
   TableRow,
   Block,
   EventSummary,

package/package.json

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

@@ -16,6 +16,10 @@ $aligns: "left", "center", "right";
   }
 }
 
+.margin-0 {
+  margin: 0;
+}
+
 .width-100 {
   width: 100%;
 }
@@ -34,4 +38,10 @@ $aligns: "left", "center", "right";
 
 .c-brand-orange {
   color: $c-brand-orange;
+}
+
+.list-style-none {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
 }

package/scss/_btn.scss

@@ -1,5 +1,5 @@
 .btn {
-  @include button_setup;
+  @include button-setup;
 
   &.btn-primary {
     // solid orange

package/scss/_checkbox.scss

@@ -75,4 +75,8 @@
       }
     }    
   }
+}
+
+.custom-checkbox label {
+  font-weight: 400;
 }

package/scss/_input.scss

@@ -34,8 +34,5 @@ input[type=submit] {
 }
 
 #{$all-text-inputs} {
-  border: solid $border-width $c-border-strong;
-  padding: 0.875rem 0.875rem 0.75rem;
-  background-color: $c-grey-alpine;
-  border-radius: $border-radius-lg;
+  @include all-text-inputs;
 }

package/scss/_klaro.scss

@@ -4,7 +4,9 @@
   font-size: $font-size-sm;
   padding: 0.5em 0.75em;
   margin-right: 1em;
+  font-weight: 700;
   cursor: pointer;
+  color: $white;
   border: 0;
 
   &:focus {

package/scss/_radio.scss

@@ -0,0 +1,4 @@
+
+.custom-radio label {
+  font-weight: 400;
+}

package/scss/card/_confirm.scss

@@ -0,0 +1,21 @@
+
+.card[confirm] {
+  @include form-card;
+  max-width: 16.25rem;
+  margin-right: auto;
+  text-align: center;
+  margin-left: auto;
+
+  .card-title {
+    font-size: $h2-font-size;
+    margin-bottom: 1.5rem;
+  }
+}
+
+.card[confirm].request .clone {
+  @include clone;
+}
+
+.card[confirm].reset .clone {
+  @include clone(3.3125);
+}

package/scss/card/_login.scss

@@ -0,0 +1,15 @@
+
+.card[login] {
+  @include form-card;
+
+  .card-header {
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+  }
+
+  .card-title {
+    font-size: $h1-font-size;
+    margin: 0;
+  }
+}

package/scss/card/_password.scss

@@ -0,0 +1,8 @@
+
+.card[password] {
+  @include form-card;
+
+  .card-title {
+    font-size: $h2-font-size;
+  }
+}

package/scss/{_card.scss → card/index.scss}

@@ -1,3 +1,8 @@
+
+@import "confirm.scss";
+@import "login.scss";
+@import "password.scss";
+
 .card {
   border: 1px solid $c-grey-pearl;
   border-radius: $border-radius-lg;
@@ -14,7 +19,14 @@
 }
 
 .card-subtitle {
-  @include card-subtitle;
+  color: $c-grey-steel !important;
+  font-size: $font-size-sm;
+  font-weight: 400;
+  margin: 0;
+}
+
+.card-body {
+  padding: 1.5rem;
 }
 
 .card-img {

package/scss/index.scss

@@ -13,13 +13,14 @@
 
 // bootstrap component styles
 @import "btn.scss";
-@import "card.scss";
+@import "card/index.scss";
 @import "checkbox.scss";
 @import "checkbox-group.scss";
 @import "form.scss";
 @import "list.scss";
 @import "input.scss";
 @import "radio-group.scss";
+@import "radio.scss";
 
 // atomic helper styles
 @import "atomic.scss";

package/scss/table/_basket.scss

@@ -0,0 +1,31 @@
+
+table.basket tr {
+  @include table-row;
+  justify-content: space-between;
+  display: flex;  
+  gap: 0.75rem;
+
+  &.promo {
+    padding-bottom: 1rem;
+  }
+
+  &.donation {
+    @include basket-row-grid;
+    padding-bottom: 1rem;
+    padding-top: 1rem;
+  }
+
+  &.total {
+    font-size: $h4-font-size;
+    border-bottom: none;
+    font-weight: 700;
+  }
+
+  &.continue {
+    border-bottom: none;
+
+    td {
+      width: 100%;
+    } 
+  }
+}

package/scss/table/_orders.scss

@@ -0,0 +1,48 @@
+table.orders {
+
+  thead {
+    background-color: $c-grey-alpine;
+    margin-bottom: 1rem;
+    font-weight: 700;
+    display: block;
+
+    @include media-breakpoint-down(md) {
+      display: none;
+    }
+  }
+
+  tr {
+    border: 1px solid $c-grey-pearl;
+    display: grid;
+
+    @include media-breakpoint-up(md) {
+      grid-template-columns: 9rem 8rem auto 7rem;
+    }
+
+    @include media-breakpoint-down(md) {
+      border-radius: $border-radius-lg;
+    }
+  }
+
+  th, td {
+    padding: 0.75rem;
+
+    @include media-breakpoint-up(md) {
+      &:not(:last-of-type) {
+        border-right: 1px solid $c-grey-pearl;
+      }
+  
+      &:last-of-type {
+        text-align: right;
+      }
+    }
+  }
+
+  label {
+    font-size: $font-size-lg;
+
+    @include media-breakpoint-up(md) {
+      display: none;
+    }
+  }
+}

package/scss/table/_section.scss

@@ -0,0 +1,12 @@
+
+table.section {
+  padding-bottom: 0.75rem;
+  padding-top: 0.75rem;
+  display: block;
+
+  tr:not(:first-of-type) {
+    @include summary-lg {
+      margin-left: 0.75rem;
+    }
+  }
+}

package/scss/table/index.scss

@@ -1,5 +1,8 @@
 
 @import "tickets.scss";
+@import "basket.scss";
+@import "section.scss";
+@import "orders.scss";
 
 table {
   border-spacing: 0;
@@ -8,47 +11,4 @@ table {
 
 td {
   padding: 0;
-}
-
-table.basket tr {
-  @include table-row;
-  justify-content: space-between;
-  display: flex;  
-  gap: 0.75rem;
-
-  &.promo {
-    padding-bottom: 1rem;
-  }
-
-  &.donation {
-    @include basket-row-grid;
-    padding-bottom: 1rem;
-    padding-top: 1rem;
-  }
-
-  &.total {
-    font-size: $h4-font-size;
-    border-bottom: none;
-    font-weight: 700;
-  }
-
-  &.continue {
-    border-bottom: none;
-
-    td {
-      width: 100%;
-    } 
-  }
-}
-
-table.section {
-  padding-bottom: 0.75rem;
-  padding-top: 0.75rem;
-  display: block;
-
-  tr:not(:first-of-type) {
-    @include summary-lg {
-      margin-left: 0.75rem;
-    }
-  }
 }

package/components/login_form.vue

@@ -1,54 +0,0 @@
-<template>
-  <b-card no-body>
-    <div v-if="headerSlot" class="card-header">
-      <slot name="header" />
-    </div>
-    <div v-if="defaultSlot" class="card-body">
-      <slot />
-    </div>
-    <div v-if="footerSlot" class="card-footer">
-      <slot name="footer" />
-    </div>
-  </b-card>
-</template>
-
-<script>
-import { BCard } from 'bootstrap-vue'
-export default { 
-  name: 'LoginForm',
-  components: { BCard },
-  computed: {
-    headerSlot() {
-      return this.$slots.header ? true : false;
-    },
-    defaultSlot() {
-      return this.$slots.default ? true : false;
-    },
-    footerSlot() {
-      return this.$slots.footer ? true : false;
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-.card {
-  
-  .card-header {
-    padding: 1.5rem 1.75rem 1.25rem;
-    justify-content: space-between;
-    align-items: center;
-    display: flex;
-
-    h1 {
-      margin: 0;
-    }
-  }
-
-  .card-body {
-    padding: 1.75rem 1.75rem 1.5rem;
-  }
-}
-
-</style>

package/icons/password/RequestIcon/index.vue

@@ -1,32 +0,0 @@
-<template>
-  <svg
-    class="request-success__svg"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 80"
-    version="1.1"
-    width="100"
-    height="80"
-  >
-    <path
-      class="request-success__arrow"
-      d="M72.6,45.6L87,60L72.6,74.4V63.6H58.2v-7.2h14.4V45.6z"
-    />
-    <path
-      class="request-success__outline"
-      d="M79.6,38.4	V13.2C79.6,9,76,9.5,76,9.5L18.6,9.7c0,0-3.5-0.3-3.5,3.5v42.9c0,0-0.7,3.9,3.3,3.9H51"
-      fill="none"
-      stroke-width="7"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-    />
-    <path
-      class="request-success__fold"
-      d="M15.2,14.5l32.3,20.2l32.2-20.2"
-      fill="none"
-      stroke-width="6"
-      stroke-miterlimit="10"
-    />
-  </svg>
-</template>
-
-<style src="./request_icon.scss" lang="scss"></style>

package/icons/password/RequestIcon/request_icon.scss

@@ -1,5 +0,0 @@
-.request-success__svg {
-  stroke: $c-grey-night;
-  fill: $c-grey-night;
-  margin-bottom: 0.625rem;
-}

package/icons/password/ResetIcon/reset_icon.scss

@@ -1,4 +0,0 @@
-.reset-success__svg {
-  stroke: $c-grey-night;
-  margin-bottom: 0.625rem;
-}