barbican-reset 1.2.7 → 1.3.1

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'
@@ -11,36 +10,47 @@ import Banner from './components/banner'
 import Alert from './components/alert'
 import LoadingAnimation from './components/loading_animation'
 import RelatedTitle from './components/related_title'
+import RelatedCard from './components/related_card'
+import RelatedRow from './components/related_row'
 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'
+import RadioGroup from './components/radio_group'
 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 DisplayStream from './components/display_stream'
 
 export { 
   LoadingAnimation, 
   Alert,
   RelatedTitle,
+  RelatedCard,
+  RelatedRow,
   TypeText,
   Container,
   Wrap,
   Card,
-  Carousel,
   Banner,
-  AccountCard,
   AccountTitle,
   Placeholder,
   FormSection,
   FormUpdate,
   FormGroup,
+  RadioGroup,
   TableRow,
   Block,
   EventSummary,
   CardDeck,
   FooterUpper,
-  FooterLower
+  FooterLogos,
+  FooterLower,
+  FluidIframe,
+  HelpRow,
+  DisplayStream,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.2.7",
+  "version": "1.3.1",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {
@@ -39,6 +39,7 @@
     "node-sass-tilde-importer": "^1.0.2",
     "placeholder-loading": "^0.4.0",
     "sass": "^1.41.0",
+    "vue-moment": "^4.1.0",
     "vue-slick-carousel": "^1.0.6"
   }
 }

package/scss/_atomic.scss

@@ -20,6 +20,10 @@ $aligns: "left", "center", "right";
   margin: 0;
 }
 
+.margin-top-05 {
+  margin-top: 0.5rem;
+}
+
 .width-100 {
   width: 100%;
 }

package/scss/_btn.scss

@@ -40,6 +40,10 @@
     @include btn-link;
   }
 
+  &.btn-video-help {
+    @include btn-video-help;
+  }
+
   &.btn-exit {
     @include btn-exit;
   }
@@ -56,6 +60,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/_related.scss

@@ -0,0 +1,25 @@
+
+.card[related] {
+  border: 1px solid $c-grey-pearl;
+  overflow: hidden;
+
+  img {
+    max-width: 100%;
+  }
+
+  .card-title {
+    font-size: $font-size-lg;
+  }
+}
+
+.card[related][hero=true] {
+
+  .card-title {
+    font-size: $h2-font-size;
+  }
+
+  .card-text {
+    font-size: $font-size-lg;
+  }
+
+}

package/scss/card/_video-help.scss

@@ -0,0 +1,31 @@
+
+$border: 1px solid $c-grey-pearl;
+
+.card[video-help] {
+  margin-bottom: 0;
+  overflow: hidden;
+  border: $border;
+
+  &:not(:first-of-type) {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  &:not(:last-of-type) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-bottom: 0;
+  }
+
+  .card-header {
+    border-radius: 0;
+    border-bottom: 0;
+    overflow: hidden;
+    padding: 0;
+  }
+
+  .card-body {
+    border-top: $border;
+    padding: 1.25rem;
+  }
+}

package/scss/card/index.scss

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

package/scss/index.scss

@@ -7,7 +7,6 @@
 @import "klaro.scss";
 @import "fonts.scss";
 @import "loading-animation.scss";
-@import "type-text.scss";
 @import "close-icon.scss";
 @import "table/index.scss";
 
@@ -20,7 +19,6 @@
 @import "list.scss";
 @import "input.scss";
 @import "radio-group.scss";
-@import "radio.scss";
 
 // atomic helper styles
 @import "atomic.scss";
@@ -41,4 +39,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/components/carousel.vue

@@ -1,116 +0,0 @@
-<template>
-  <div class="slick-carousel__container">
-    <VueSlickCarousel v-bind="settings">
-      <slot />
-    </VueSlickCarousel>
-  </div>
-</template>
-
-<script>
-import VueSlickCarousel from 'vue-slick-carousel'
-import 'vue-slick-carousel/dist/vue-slick-carousel.css'
-import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
-
-export default {
-  components: { VueSlickCarousel },
-  props: {
-    infinite: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      settings: {
-        slidesToScroll: 1,
-        slidesToShow: 4,
-        infinite: this.infinite,
-        arrows: true,
-        speed: 500,
-        responsive: [
-          {
-            breakpoint: 1024,
-            settings: {
-              slidesToShow: 3,
-            },
-          },
-          {
-            breakpoint: 768,
-            settings: {
-              slidesToShow: 2,
-            },
-          },
-        ],
-      },
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-
-.slick {
-  &-carousel {
-    &__container:hover {
-      .slick-arrow {
-        opacity: 1;
-      }
-    }
-  }
-  &-arrow {
-    margin-top: -1.25rem;
-    border-radius: 0;
-    height: 2.5rem;
-    width: 2.5rem;
-    z-index: 2;
-    top: 28%;
-
-    @media only screen and (min-width: 400px) {
-      top: 32%;
-    }
-
-    @include media-breakpoint-up(sm) {
-      top: 38%;
-    }
-
-    &:before {
-      font-size: $h1-font-size;
-      color: $c-page-footer-bg;
-      opacity: 1;
-    }
-  }
-
-  &-slide {
-    .video-item {
-      &__container {
-        padding-right: 0.25rem;
-      }
-    }
-    .video-status__wrap {
-      opacity: 0.8;
-    }
-    &:hover {
-      .video-status__wrap {
-        @include media-breakpoint-up(md) {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  &-prev {
-    left: -1.25rem;
-    @include media-breakpoint-up(lg) {
-      left: -3.75rem;
-    }
-  }
-  &-next {
-    right: -1.25rem;
-    @include media-breakpoint-up(lg) {
-      right: -3.75rem;
-    }
-  }
-}
-
-
-</style>

package/icons/barbican/index.scss

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