barbican-reset 1.2.7 → 1.2.8

package/components/alert.vue

@@ -5,18 +5,20 @@
         <div :class="$style.title" v-if="title.length > 0 && !toggle">{{ title }}</div>
         <slot />
       </span>
-      <button v-if="toggle" :class="$style.button" @click="() => $emit('close')">
-        <close-icon :class="styleIcon" />
-      </button>
+      <b-button v-if="toggle" variant="invisible" :class="styleButton" @click="$emit('close')">
+        <close-icon />
+      </b-button>
     </div>
   </div>
 </template>
 
 <script>
+import { BButton } from 'bootstrap-vue'
 import { CloseIcon } from 'barbican-reset/icons/stream'
 export default {
   name: "Alert",
   components: {
+    BButton,
     CloseIcon,
   },
   props: {
@@ -57,7 +59,6 @@ export default {
     styleContainer() {
       let style = this.$style;
       let output = [style.container];
-      
       if (this.center) { output.push(style.center); }
       if (this.margin) {
         switch (this.margin) {
@@ -66,35 +67,29 @@ export default {
           default: output.push(style.margin_sm); break;
         }
       }
-
       return output;
     },
     styleWrap() {
       let style = this.$style;
       let output = [style.wrap];
-
       if (this.error) { output.push(style.error, 'error'); }
       if (this.success) { output.push(style.success, 'success'); }
       if (this.inline) { output.push(style.inline); }
       if (this.toggle) { output.push(style.toggle); }
-
       return output;
     },
     styleSpan() {
       let style = this.$style;
       let output = [];
-
       if (this.flex) { output.push(style.flex); }
-
       return output;
     },
-    styleIcon() {
+    styleButton() {
       let style = this.$style;
-      let output = [style.icon];
-
+      let output = [style.button];
       if (this.error) { output.push(style.error); }
-      if (this.success) { output.push(style.success); }
-
+      else if (this.success) { output.push(style.success); }
+      else { output.push(style.neutral); }
       return output;
     }
   }
@@ -103,29 +98,21 @@ export default {
 
 <style lang="scss" module>
 
+$neutral-colors: $c-status-neutral, $c-status-neutral-fade;
 $success-colors: $c-status-success, $c-status-success-fade;
 $error-colors: $c-status-error, $c-status-error-fade;
 
-@mixin icon(
-  $color: $c-status-neutral, 
-  $fade: $c-status-neutral-fade) {
-    
-  path[data-fill] { fill: $fade; }
-  path[data-outline],
-  path[data-cross] { fill: $color; }
+@mixin icon($color, $fade) {    
+  [data-fill] { fill: $fade; }
+  [data-outline],
+  [data-cross] { fill: $color; }
 
   @include focus {
-    path[data-fill] { fill: $color; }
-    path[data-cross] { fill: $fade; }
+    [data-fill] { fill: $color; }
+    [data-cross] { fill: $fade; }
   }
 }
 
-@mixin invisible {
-  background: transparent;
-  line-height: 1;
-  padding: 0;
-}
-
 .container {
   @include media-breakpoint-down(xs) {
     font-size: $font-size-sm;
@@ -205,26 +192,6 @@ $error-colors: $c-status-error, $c-status-error-fade;
   }
 }
 
-.button, .button:focus {
-  @include invisible;
-  @include focus {
-    @include invisible;
-  }
-}
-
-.icon {
-  @include icon;
-  width: 1.375rem;
-
-  &.error {
-    @include icon($error-colors...);
-  }
-
-  &.success {
-    @include icon($success-colors...);
-  }
-}
-
 .title {
   margin-bottom: 0.25rem;
   font-weight: 700;
@@ -235,6 +202,18 @@ $error-colors: $c-status-error, $c-status-error-fade;
   display: flex;    
 }
 
+.button.neutral {
+  @include icon($neutral-colors...);  
+}
+
+.button.success {
+  @include icon($success-colors...);  
+}
+
+.button.error {
+  @include icon($error-colors...);  
+}
+
 </style>
 
 <style lang="scss" scoped>

package/components/event_summary.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script type="text/javascript">
+<script>
 export default {
   name: "EventSummary",
   props: {

package/components/footer_logos.vue

@@ -0,0 +1,30 @@
+<template>
+  <div :class="$style.logos">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default { 
+  name: 'FooterLogos'
+}
+</script>
+
+<style lang="scss" module>
+
+.logos {
+  margin: -1rem;
+
+  > * {
+    margin: 1rem;
+  }
+  
+  > svg {
+    display: inline-block;
+    height: 3rem;
+    fill: $white;
+    width: auto;
+  }
+}
+
+</style>

package/components/footer_upper.vue

@@ -28,8 +28,12 @@ export default {
 
 .upper {
   padding-top: 3.75rem;
-  display: flex;
-  gap: 3.75rem;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: 11rem auto;
+    display: grid;
+    gap: 1rem;
+  }
 
   &:not(.splash) {
     padding-bottom: 3.75rem;

package/components/radio_group.vue

@@ -0,0 +1,27 @@
+<template>
+  <div :class="styleGroup">
+    <slot />
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    name: 'RadioGroup',
+    props: {
+      error: {
+        type: Boolean
+      },
+      success: {
+        type: Boolean
+      }
+    },
+    computed: {
+      styleGroup() {
+        let styles = ['radio-group'];
+        if (this.error) { styles.push('error'); }
+        if (this.success) { styles.push('success'); }
+        return styles;        
+      }
+    }
+  }
+</script>

package/helpers/mixins/_buttons.scss

@@ -188,6 +188,20 @@
   );
 }
 
+@mixin btn-invisible {
+  &, &:focus {
+    background: transparent;
+    line-height: 1;
+    padding: 0;
+
+    @include focus {
+      background: transparent;
+      line-height: 1;
+      padding: 0;
+    }
+  }
+}
+
 @mixin btn-expand {
   display: block;
 }

package/icons/account/index.js

@@ -1,9 +1,9 @@
-import PersonalIcon from './PersonalIcon'
-import MembershipIcon from './MembershipIcon'
-import VideoIcon from './VideoIcon'
-import PaymentIcon from './PaymentIcon'
-import OrdersIcon from './OrdersIcon'
-import SupportIcon from './SupportIcon'
+import PersonalIcon from './personal'
+import MembershipIcon from './membership'
+import VideoIcon from './video'
+import PaymentIcon from './payment'
+import OrdersIcon from './orders'
+import SupportIcon from './support'
 
 export {
   PersonalIcon,

package/icons/{barbican/index.vue → barbican.vue}

@@ -10,4 +10,11 @@
   </svg>
 </template>
 
-<style src="./index.scss" lang="scss" module></style>
+<style lang="scss" module>
+
+.logo {
+  height: auto;
+  width: 10rem;
+}
+
+</style>

package/icons/index.js

@@ -1,7 +1,7 @@
 import BarbicanLogo from './barbican'
 import CityOfLondonLogo from './city_of_london'
 import CityOfLondonLockup from './city_of_london_lockup'
-import ArrowIcon from './arrow_icon'
+import ArrowIcon from './arrow'
 import BackArrow from './back_arrow'
 import CartIcon from './cart'
 

package/icons/password/index.js

@@ -1,5 +1,5 @@
-import RequestIcon from './RequestIcon'
-import ResetIcon from './ResetIcon'
+import RequestIcon from './request'
+import ResetIcon from './reset'
 
 export {
   RequestIcon,

package/icons/power/index.js

@@ -1,6 +1,6 @@
-import AlleyneIcon from './AlleyneIcon'
-import BanffIcon from './BanffIcon'
-import CouncilIcon from './CouncilIcon'
+import AlleyneIcon from './alleyne'
+import BanffIcon from './banff'
+import CouncilIcon from './council'
 
 export {
   AlleyneIcon,

package/icons/snippets/index.js

@@ -1,7 +1,7 @@
-import BarbicanIcon from './BarbicanIcon'
-import ContributorIcon from './ContributorIcon'
-import OtherIcon from './OtherIcon'
-import PinIcon from './PinIcon'
+import BarbicanIcon from './barbican'
+import ContributorIcon from './contributor'
+import OtherIcon from './other'
+import PinIcon from './pin'
 
 export {
   BarbicanIcon,

package/icons/stream/close.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg width="28" viewBox="0 0 20 20">
+    <path data-fill fill="#fefbfa" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z" />
+    <path data-outline fill="#353535" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M10,18c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8	S14.4,18,10,18z" />
+    <path data-cross fill="#353535" d="M12.6,6L10,8.6L7.4,6L6,7.4L8.6,10L6,12.6L7.4,14l2.6-2.6l2.6,2.6l1.4-1.4L11.4,10L14,7.4L12.6,6z" />
+  </svg>
+</template>

package/icons/stream/index.js

@@ -1,10 +1,10 @@
-import AirplayIcon from './AirplayIcon'
-import CastIcon from './CastIcon'
-import ChatIcon from './ChatIcon'
-import CogIcon from './CogIcon'
-import VolumeIcon from './VolumeIcon'
-import LiveIcon from './LiveIcon'
-import CloseIcon from './close_icon'
+import AirplayIcon from './airplay'
+import CastIcon from './cast'
+import ChatIcon from './chat'
+import CogIcon from './cog'
+import VolumeIcon from './volume'
+import LiveIcon from './live'
+import CloseIcon from './close'
 
 export {
   AirplayIcon,

package/icons/stream/{LiveIcon/index.vue → live.vue}

@@ -58,4 +58,49 @@ export default {
 };
 </script>
 
-<style src="./live_icon.scss" lang="scss"></style>
+<style lang="scss" scoped>
+
+.live-icon {
+  &__container {
+    background-color: $c-grey-midnight;
+    border-radius: $border-radius;
+    font-size: $font-size-sm;
+    padding: 0.6rem 0.8rem;
+    border-color: white;
+    position: absolute;
+    font-weight: bold;
+    border: 1px solid;
+    color: white;
+    right: 1rem;
+    top: 1rem;
+
+    @include media-breakpoint-up(sm) {
+      font-size: $font-size-base;
+      padding: 0.8rem 1rem;
+    }
+
+    @include media-breakpoint-up(md) {
+      right: 2rem;
+      top: 2rem;
+    }
+  }
+
+  &__title {
+    vertical-align: middle;
+    display: inline-block;
+    margin-right: 0.5rem;
+  }
+
+  &__svg {
+    vertical-align: middle;
+    display: inline-block;
+    height: 1.5rem;
+    fill: white;
+
+    @include media-breakpoint-up(sm) {
+      height: 1.75rem;
+    }
+  }
+}
+
+</style>

package/index.js

@@ -3,7 +3,6 @@ import Card from './components/card'
 import Container from './components/container'
 import Block from './components/block'
 import EventSummary from './components/event_summary'
-import AccountCard from './components/account_card'
 import AccountTitle from './components/account_title'
 import Wrap from './components/wrap'
 import TableRow from './components/table_row'
@@ -18,7 +17,9 @@ import CardDeck from './components/card_deck'
 import FormSection from './components/form_section'
 import FormUpdate from './components/form_update'
 import FormGroup from './components/form_group'
+import RadioGroup from './components/radio_group'
 import FooterUpper from './components/footer_upper'
+import FooterLogos from './components/footer_logos'
 import FooterLower from './components/footer_lower'
 
 export { 
@@ -31,16 +32,17 @@ export {
   Card,
   Carousel,
   Banner,
-  AccountCard,
   AccountTitle,
   Placeholder,
   FormSection,
   FormUpdate,
   FormGroup,
+  RadioGroup,
   TableRow,
   Block,
   EventSummary,
   CardDeck,
   FooterUpper,
+  FooterLogos,
   FooterLower
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "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/_btn.scss

@@ -56,6 +56,10 @@
     @include btn-video-login;
   }
 
+  &.btn-invisible {
+    @include btn-invisible;
+  }
+
   // modifyers
   &.expand {
     @include btn-expand;

package/scss/_radio-group.scss

@@ -29,13 +29,8 @@ $margin-radio: 0.25rem;
       border: 1px solid $c-status-neutral;
       color: $c-status-neutral;
     }
-    
-    &:hover, &[data-focus-visible-added] {
-      &:focus {
-        box-shadow: none; 
-        outline: none; 
-      }
-      
+
+    @include focus {
       ~ label {
         @include single-box($c-grey-steel, 0.0625rem);
         border: 1px solid $c-grey-steel;
@@ -59,6 +54,7 @@ $margin-radio: 0.25rem;
     border-radius: $border-radius-lg;
     background-color: $white;  
     color: $c-grey-night;
+    font-weight: 400;
     cursor: pointer;
   }
 }
@@ -67,7 +63,7 @@ $margin-radio: 0.25rem;
   @if $status != 'neutral' {
     .radio-group.#{$status} {
       input[type=radio] {
-        &:hover, &[data-focus-visible-added] {
+        @include focus {
           &:checked ~ label {
             @include single-box(map-get($color, base), 0.0625rem);
             border: 1px solid map-get($color, base);

package/scss/card/_account.scss

@@ -0,0 +1,16 @@
+
+.card[account] {
+  margin-top: $gap-account;
+  margin-bottom: 0;
+
+  .card-body {
+    padding: $gap-account;
+  }
+
+  iframe {
+    min-height: 590px;
+    @include media-breakpoint-up(sm) {
+      min-height: 440px;
+    }
+  }
+}

package/scss/card/index.scss

@@ -2,6 +2,7 @@
 @import "confirm.scss";
 @import "login.scss";
 @import "password.scss";
+@import "account.scss";
 
 .card {
   border: 1px solid $c-grey-pearl;

package/scss/index.scss

@@ -20,7 +20,6 @@
 @import "list.scss";
 @import "input.scss";
 @import "radio-group.scss";
-@import "radio.scss";
 
 // atomic helper styles
 @import "atomic.scss";
@@ -41,4 +40,12 @@ a, a:hover {
 
 p:last-of-type:not([class^=margin]) {
   margin-bottom: 0;
+}
+
+footer {
+  color: $white;
+
+  &:not(.splash) {
+    background-color: $c-grey-midnight;
+  }
 }

package/scss/table/_preferences.scss

@@ -0,0 +1,73 @@
+table.preferences {
+
+  $mq: md;
+
+  thead {
+    background-color: $c-grey-alpine;
+    margin-bottom: 1rem;
+    font-weight: 700;
+    display: block;
+
+    @include media-breakpoint-down($mq) {
+      display: none;
+    }
+  }
+
+  tr {
+    border: 1px solid $c-grey-pearl;
+    display: grid;
+
+    &:not(:last-of-type) {
+      margin-bottom: 1rem;
+    }
+
+    @include media-breakpoint-up($mq) {
+      grid-template-columns: auto repeat(2, 5rem);
+    }
+
+    @include media-breakpoint-down($mq) {
+      border-radius: $border-radius-lg;
+    }
+  }
+
+  th, td {
+    padding: 0.75rem;
+
+    @include media-breakpoint-up($mq) {
+      text-align: center;
+
+      &:not(:last-of-type) {
+        border-right: 1px solid $c-grey-pearl;
+      }
+  
+      &:first-of-type {
+        text-align: left;
+      }
+    }
+
+    @include media-breakpoint-down($mq) {
+      &:not(:first-of-type) {
+        padding-top: 0;
+      }
+    }
+  }
+
+  label {
+    font-size: $font-size-lg;
+
+    @include media-breakpoint-up($mq) {
+      display: none;
+    }
+  }
+
+  .custom-radio {
+    @include media-breakpoint-up($mq) {
+      margin: 0;
+
+      input[type=radio] {
+        position: relative;
+        inset: auto;
+      }
+    }
+  }
+}

package/scss/table/index.scss

@@ -4,6 +4,7 @@
 @import "section.scss";
 @import "orders.scss";
 @import "details.scss";
+@import "preferences.scss";
 
 table {
   border-spacing: 0;

package/components/account_card.vue

@@ -1,31 +0,0 @@
-<template>
-  <div :class="$style.container">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'AccountCard'
-}
-</script>
-
-<style lang="scss" module>
-
-.container {
-  border-radius: $border-radius-lg;
-  border: 1px solid $c-grey-pearl;
-  background-color: $white;
-  padding: $gap-account;
-  overflow: hidden;
-
-  &:first-of-type {
-    margin-top: $gap-account;
-  }
-  
-  &:not(:last-of-type) {
-    margin-bottom: $gap-account;
-  }
-}
-
-</style>

package/icons/barbican/index.scss

@@ -1,5 +0,0 @@
-
-.logo {
-  height: auto;
-  width: 10rem;
-}

package/icons/stream/LiveIcon/live_icon.scss

@@ -1,42 +0,0 @@
-.live-icon {
-  &__container {
-    background-color: $c-grey-midnight;
-    border-radius: $border-radius;
-    font-size: $font-size-sm;
-    padding: 0.6rem 0.8rem;
-    border-color: white;
-    position: absolute;
-    font-weight: bold;
-    border: 1px solid;
-    color: white;
-    right: 1rem;
-    top: 1rem;
-
-    @include media-breakpoint-up(sm) {
-      font-size: $font-size-base;
-      padding: 0.8rem 1rem;
-    }
-
-    @include media-breakpoint-up(md) {
-      right: 2rem;
-      top: 2rem;
-    }
-  }
-
-  &__title {
-    vertical-align: middle;
-    display: inline-block;
-    margin-right: 0.5rem;
-  }
-
-  &__svg {
-    vertical-align: middle;
-    display: inline-block;
-    height: 1.5rem;
-    fill: white;
-
-    @include media-breakpoint-up(sm) {
-      height: 1.75rem;
-    }
-  }
-}

package/icons/stream/close_icon.vue

@@ -1,23 +0,0 @@
-<template>
-  <svg viewBox="0 0 20 20">
-    <path class="fill" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z" />
-    <path class="outline" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M10,18c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8	S14.4,18,10,18z" />
-    <path class="cross" d="M12.6,6L10,8.6L7.4,6L6,7.4L8.6,10L6,12.6L7.4,14l2.6-2.6l2.6,2.6l1.4-1.4L11.4,10L14,7.4L12.6,6z" />
-  </svg>
-</template>
-
-<style lang="scss" scoped>
-
-svg {
-  width: 1.875rem;
-
-  path.outline, path.cross {
-    fill: $c-grey-night;
-  }
-
-  path.fill {
-    fill: $c-page-global-content-bg-alt;
-  }
-}
-
-</style>

package/scss/_radio.scss

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