barbican-reset 0.9.1 → 0.9.5

package/helpers/mixins/_content.scss

@@ -0,0 +1,33 @@
+
+@mixin content_masthead {
+  background-color: white;
+  box-shadow: 0 5px 5px rgba(black, 0.1);
+  padding: 0 $constrained_grid_padding;
+  // Required to ensure the box-shadow is visible when div.content-main-content uses a background-color.
+  position: relative;
+}
+
+@mixin content_masthead__inner {
+  max-width: $constrained_content_width--wide;
+  padding: $space--large * 2 0;
+  margin: 0 auto;
+
+  h1 {
+    margin-bottom: 0;
+  }
+}
+
+@mixin content-main-content {
+  padding-right: 10%;
+  padding-left: 10%;
+}
+
+@mixin content-main-content__inner {
+  max-width: $constrained_content_width--wide;
+  padding: 1.5rem 0;
+  margin: 0 auto;
+
+  @include media-breakpoint-up(sm) {
+    padding: 2.5rem 0;
+  }
+}

package/helpers/mixins/_core.scss

@@ -24,15 +24,18 @@
   -moz-appearance: $value;
 }
 
-@mixin button($background: $c-power-blue, $focus: $c-power-blue-dark) {
+@mixin button(
+  $background: $c-power-blue, 
+  $focus: $c-power-blue-dark, 
+  $gap: 0.75em) {
+  
   $color: $white;
-  $gap: 0.75em;
-
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  border-radius: $border-radius-lg;
   background-color: $background;
+  padding: $gap ($gap * 1.65);
   text-decoration: none;
-  border-radius: 0.5rem;
   place-items: center;
   text-align: center;
   font-weight: 700;
@@ -41,7 +44,6 @@
   cursor: pointer;
   line-height: 1;
   display: flex;
-  padding: $gap;
   color: $color;
 
   @include focus {

package/helpers/mixins/index.scss

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

package/helpers/variables/layout/index.scss

@@ -4,13 +4,18 @@ $constrained_content_width--thin: 800px;
 $constrained_content_width--wide: 1200px;
 
 $space: 0.625rem;
-/// Default large amount of space.
+// Default large amount of space.
 $space--large: $space * 3;
-/// Default gap value for use in CSS grid.
+// Default gap value for use in CSS grid.
 $grid-gap: $space;
 
-/// Power Festival
-$power-gap: 1.25rem;
+$border-radius-lg: 0.375rem;
+
+// Account Area
+$gap-account: 2rem;
+
+// Power Festival
+$gap-power: 1.25rem;
 $height-dashboard-banner: 25rem;
 $width-power-related: 66rem;
-$accordion-gap: 2rem;
+$gap-accordion: 2rem;

package/icons/account.js

@@ -0,0 +1,15 @@
+import PersonalIcon from '../vue/Icons/Account/PersonalIcon'
+import MembershipIcon from '../vue/Icons/Account/MembershipIcon'
+import VideoIcon from '../vue/Icons/Account/VideoIcon'
+import PaymentIcon from '../vue/Icons/Account/PaymentIcon'
+import OrdersIcon from '../vue/Icons/Account/OrdersIcon'
+import SupportIcon from '../vue/Icons/Account/SupportIcon'
+
+export {
+  PersonalIcon,
+  MembershipIcon,
+  VideoIcon,
+  PaymentIcon,
+  OrdersIcon,
+  SupportIcon
+}

package/icons/index.js

@@ -0,0 +1,9 @@
+import BarbicanLogo from '../vue/Icons/Barbican'
+import CityOfLondonLogo from '../vue/Icons/CityOfLondon'
+import ArrowIcon from '../vue/Icons/ArrowIcon'
+
+export {
+  BarbicanLogo,
+  CityOfLondonLogo,
+  ArrowIcon,
+};

package/icons/password.js

@@ -0,0 +1,7 @@
+import RequestIcon from '../vue/Icons/Password/RequestIcon'
+import ResetIcon from '../vue/Icons/Password/ResetIcon'
+
+export {
+  RequestIcon,
+  ResetIcon
+}

package/icons/power.js

@@ -0,0 +1,9 @@
+import AlleyneIcon from '../vue/Icons/Power/AlleyneIcon'
+import BanffIcon from '../vue/Icons/Power/BanffIcon'
+import CouncilIcon from '../vue/Icons/Power/CouncilIcon'
+
+export {
+  AlleyneIcon,
+  BanffIcon,
+  CouncilIcon
+}

package/icons/snippets.js

@@ -0,0 +1,11 @@
+import BarbicanIcon from '../vue/Icons/Snippets/BarbicanIcon'
+import ContributorIcon from '../vue/Icons/Snippets/ContributorIcon'
+import OtherIcon from '../vue/Icons/Snippets/OtherIcon'
+import PinIcon from '../vue/Icons/Snippets/PinIcon'
+
+export {
+  BarbicanIcon,
+  ContributorIcon,
+  OtherIcon,
+  PinIcon
+}

package/icons/stream.js

@@ -0,0 +1,17 @@
+import AirplayIcon from '../vue/Icons/Stream/AirplayIcon'
+import CloseIcon from '../vue/Icons/Stream/CloseIcon'
+import CastIcon from '../vue/Icons/Stream/CastIcon'
+import ChatIcon from '../vue/Icons/Stream/ChatIcon'
+import CogIcon from '../vue/Icons/Stream/CogIcon'
+import VolumeIcon from '../vue/Icons/Stream/VolumeIcon'
+import LiveIcon from '../vue/Icons/Stream/LiveIcon'
+
+export {
+  AirplayIcon,
+  CloseIcon,
+  CastIcon,
+  ChatIcon,
+  CogIcon,
+  VolumeIcon,
+  LiveIcon
+}

package/index.js

@@ -2,18 +2,20 @@ import LoadingAnimation from './vue/LoadingAnimation'
 import Notification from './vue/Notification'
 import RelatedTitle from './vue/RelatedTitle'
 import TypeText from './vue/TypeText'
-import CloseIcon from './vue/icons/Close'
 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'
 
 export { 
   LoadingAnimation, 
   Notification,
   RelatedTitle,
   TypeText,
-  CloseIcon,
   Container,
   Wrap,
-  Card
+  Card,
+  Carousel,
+  Banner
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "0.9.1",
+  "version": "0.9.5",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {
@@ -16,6 +16,7 @@
     "fonts/*.{woff,woff2}",
     "focus-visible.min.js",
     "helpers/**/*",
+    "icons/**/*",
     "dist/**/*",
     "scss/**/*",
     "vue/**/*",
@@ -36,6 +37,7 @@
     "gulp-uglify": "^3.0.2",
     "node-sass-tilde-importer": "^1.0.2",
     "placeholder-loading": "^0.4.0",
-    "sass": "^1.41.0"
+    "sass": "^1.41.0",
+    "vue-slick-carousel": "^1.0.6"
   }
 }

package/vue/Banner/banner.scss

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

package/vue/Banner/index.vue

@@ -0,0 +1,9 @@
+<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,17 +1,24 @@
 
 .container {
   border: 1px solid $c-grey-concrete;
+  border-radius: $border-radius-lg;
   border-color: $c-grey-pearl;
   background-color: $white;
-  border-radius: 0.5rem;
   align-content: start;
   overflow: hidden;
   padding: 1.25rem;
   display: grid;
   gap: 1.25rem;
-  
-  &_wrap {
-    composes: container;
-    background-color: $gray-100;
+}
+
+.container.wrap {
+  background-color: $gray-100;
+}
+
+.container.account {
+  padding: $gap-account;
+
+  &:not(:last-of-type) {
+    margin-bottom: $gap-account;
   }
 }

package/vue/Card/index.vue

@@ -10,11 +10,22 @@ export default {
     wrap: {
       type: Boolean,
       default: false,
+    },
+    account: {
+      type: Boolean,
+      default: false,
     }
   },
   computed: {
     styleContainer() {
-      return this.wrap ? this.$style.container_wrap : this.$style.container;
+      let styles = [this.$style.container];
+      if (this.wrap) {
+        styles.push(this.$style.wrap);
+      }
+      if (this.account) {
+        styles.push(this.$style.account);
+      }
+      return styles;
     }
   }
 }

package/vue/Carousel/carousel.scss

@@ -0,0 +1,62 @@
+.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;
+    }
+  }
+}

package/vue/Carousel/index.vue

@@ -0,0 +1,50 @@
+<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 src="./carousel.scss" lang="scss"></style>

package/vue/Container/container.scss

@@ -2,11 +2,11 @@
 .outer {
   padding-right: 5%;
   padding-left: 5%;
+}
 
-  &_splash {
-    padding-right: 10%;
-    padding-left: 10%;  
-  }
+.outer_splash {
+  padding-right: 10%;
+  padding-left: 10%;  
 }
 
 .inner {

package/vue/Icons/Account/MembershipIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="72"
+    viewBox="0 0 24 24"
+    width="72"
+  >
+    <path
+      d="M20 2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h4v5l4-2 4 2v-5h4c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 13H4v-2h16v2zm0-5H4V4h16v6z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "MembershipIcon",
+};
+</script>

package/vue/Icons/Account/OrdersIcon.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    enable-background="new 0 0 24 24"
+    viewBox="0 0 24 24"
+    height="72"
+    width="72"
+  >
+    <path
+      d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z"
+    />
+    <rect height="2" width="6" x="9" y="7" />
+    <rect height="2" width="2" x="16" y="7" />
+    <rect height="2" width="6" x="9" y="10" />
+    <rect height="2" width="2" x="16" y="10" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "OrdersIcon",
+};
+</script>

package/vue/Icons/Account/PaymentIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="72"
+    viewBox="0 0 24 24"
+    width="72"
+  >
+    <path
+      d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "PaymentIcon",
+};
+</script>

package/vue/Icons/Account/PersonalIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="72"
+    viewBox="0 0 24 24"
+    width="72"
+  >
+    <path
+      d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "PersonalIcon",
+};
+</script>

package/vue/Icons/Account/SupportIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    enable-background="new 0 0 24 24"
+    viewBox="0 0 24 24"
+    height="72"
+    width="72"
+  >
+    <path
+      d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M19.46,9.12l-2.78,1.15 c-0.51-1.36-1.58-2.44-2.95-2.94l1.15-2.78C16.98,5.35,18.65,7.02,19.46,9.12z M12,15c-1.66,0-3-1.34-3-3s1.34-3,3-3s3,1.34,3,3 S13.66,15,12,15z M9.13,4.54l1.17,2.78c-1.38,0.5-2.47,1.59-2.98,2.97L4.54,9.13C5.35,7.02,7.02,5.35,9.13,4.54z M4.54,14.87 l2.78-1.15c0.51,1.38,1.59,2.46,2.97,2.96l-1.17,2.78C7.02,18.65,5.35,16.98,4.54,14.87z M14.88,19.46l-1.15-2.78 c1.37-0.51,2.45-1.59,2.95-2.97l2.78,1.17C18.65,16.98,16.98,18.65,14.88,19.46z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "SupportIcon",
+};
+</script>

package/vue/Icons/Account/VideoIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    height="72"
+    width="72"
+  >
+    <path
+      d="M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6l-7 4V7z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "VideoIcon",
+};
+</script>

package/vue/Icons/ArrowIcon.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 83.2 80.9"
+    height="12"
+    width="12">
+    <path fill="white" d="M42.8.4L31.9 11.2l23.7 22.2H0V48h55.6l-24 21.6 11.2 11.3 40.4-40.7z"></path>
+  </svg>
+</template>

package/vue/Icons/Barbican/index.scss

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

package/vue/Icons/Barbican/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :class="$style.logo"
+    viewBox="0 0 333 65"
+    width="333"
+    height="65"
+  >
+    <path d="M0 0H14.7V24.2C18.2 21.1 21.4 19.9 26.3 19.9C38.7 19.9 47.6 29.5 47.6 42.8C47.6 49.3 45.2 55.3 41.2 59.4C37.6 63.1 32.7 64.9 26.8 64.9C20.8 64.9 17.3 63.4 14.1 59.8V63.3H0V0ZM13.7 42.4C13.7 48.7 17.5 52.9 23.1 52.9C28.7 52.9 32.2 49.1 32.2 42.8C32.2 36.4 28.7 32.4 22.9 32.4C17.4 32.5 13.7 36.5 13.7 42.4V42.4ZM83.1 60.5C79.3 64 76.6 65 70.8 65C64.2 65 59.4 63.2 55.7 59.3C51.7 55.1 49.6 49.3 49.6 42.6C49.6 29.4 58.3 20.2 70.6 20.2C76 20.2 79 21.4 83 25.2V21.6H97.1V63.6H83.1V60.5V60.5ZM64.9 43C64.9 49.3 68.4 53 74.2 53C79.8 53 83.5 48.9 83.5 42.6C83.5 36.6 79.9 32.5 74.4 32.5C68.9 32.5 64.9 36.9 64.9 43ZM101.2 21.5H115.3V26.8C118.4 22 121.5 20.3 126.6 20.3C127.6 20.3 128.2 20.4 131.7 20.8V34.1C130 33.6 129.1 33.6 127.9 33.6C120.1 33.6 116 37.8 116 45.8V63.5H101.3L101.2 21.5V21.5ZM134.2 0H148.9V24.2C152.4 21.1 155.6 19.9 160.5 19.9C172.9 19.9 181.8 29.5 181.8 42.8C181.8 49.3 179.4 55.3 175.4 59.4C171.8 63.1 167 64.9 161 64.9C155 64.9 151.5 63.4 148.3 59.8V63.3H134.2V0ZM147.9 42.4C147.9 48.7 151.7 52.9 157.3 52.9C162.9 52.9 166.4 49.1 166.4 42.8C166.4 36.4 162.9 32.4 157.1 32.4C151.6 32.5 147.9 36.5 147.9 42.4ZM200.2 9.3C200.2 13.8 196.6 17.5 192 17.5C187.5 17.5 183.9 13.9 183.9 9.3C183.9 4.8 187.5 1.2 192 1.2C196.6 1.2 200.2 4.8 200.2 9.3ZM184.7 21.5H199.4V63.5H184.7V21.5V21.5ZM236 61.6C229.9 64.6 227.7 65.1 222.6 65.1C216.8 65.1 212.2 63.6 209.1 60.4C204.9 56.4 202.6 50.1 202.6 43C202.6 29.2 211 19.7 223.3 19.7C228 19.7 231.2 20.6 236 23.5V38.2C232.5 34.1 230.4 32.8 226.8 32.8C221.4 32.8 218.2 36.4 218.2 42.3C218.2 48.1 221.5 51.7 226.7 51.7C230.1 51.7 232.5 50.4 236 47V61.6V61.6ZM271 60.5C267.2 64 264.5 65 258.7 65C252.1 65 247.3 63.2 243.6 59.3C239.6 55.1 237.5 49.3 237.5 42.6C237.5 29.4 246.2 20.2 258.5 20.2C263.9 20.2 266.9 21.4 270.9 25.2V21.6H285V63.6H270.9V60.5H271V60.5ZM252.8 43C252.8 49.3 256.3 53 262.1 53C267.7 53 271.4 48.9 271.4 42.6C271.4 36.6 267.8 32.5 262.3 32.5C256.8 32.5 252.8 36.9 252.8 43ZM289.1 21.5H303.6V26.3C307.3 21.5 310.6 19.9 316.6 19.9C323.1 19.9 328.6 22.5 331 26.9C332.3 29.2 332.9 31.8 332.9 35.1V63.4H318.2V40.3C318.2 34.7 316.1 32 311.7 32C307 32 303.8 35.3 303.8 40.3V63.4H289.1V21.5Z" fill="white" />
+  </svg>
+</template>
+
+<style src="./index.scss" lang="scss" module></style>