BBD Fractal Components

package.json

@@ -14,7 +14,8 @@
     "browser-cookies": "^1.2.0",
     "clamp-js": "^0.7.0",
     "openseadragon": "^3.x",
-    "surge": "^0.23.1"
+    "surge": "^0.23.1",
+    "swiper": "^11.1.0"
   },
   "scripts": {
     "dev": "NODE_ENV=development concurrently 'node ./fractal-server' 'npm run build-dev:webpack'",

src/assets/scripts/vam-scripts.js

@@ -3,6 +3,7 @@ import oicInit from '../../components/blocks/object-image-overlay/_object-image-
 import contentWarningsInit from '../../components/blocks/object-card/_object-card';
 
 require('../../components/services/imageload/_imageload');
+require('../../components/units/button/_button');
 require('../../components/blocks/accordion/_accordion');
 require('../../components/blocks/background-video/_background-video');
 require('../../components/groups/block-grid/_grid-reveal-more');
@@ -24,6 +25,9 @@ require('../../components/blocks/toggle-nav/_toggle-nav');
 require('../../components/blocks/video-thumbnail/_video-thumbnail');
 require('../../components/blocks/video-trailer/_video-trailer');
 require('../../components/blocks/events-featured/_events-featured');
+require('../../components/blocks/quicklinks/_quicklinks');
+require('../../components/blocks/carousel/_carousel');
+require('../../components/blocks/master-brand-nav/_master-brand-nav');
 require('../../components/groups/facet-box-modal/_facet-box-modal');
 require('../../components/groups/image-overlay/_image-overlay');
 require('../../components/groups/story-box-container/_story-box-container');

src/assets/styles/vam-style.scss

@@ -12,6 +12,9 @@
 @use "../../components/blocks/associated-contexts/associated-contexts";
 @use "../../components/blocks/background-image/background-image";
 @use "../../components/blocks/background-video/background-video";
+@use "../../components/blocks/card/card";
+@use "../../components/blocks/carousel/swiper-bundle.css";
+@use "../../components/blocks/carousel/carousel";
 @use "../../components/blocks/collection-card/collection-card";
 @use "../../components/blocks/context-page-title/context-page-title";
 @use "../../components/blocks/cookie-banner/cookie-banner";
@@ -29,6 +32,7 @@
 @use "../../components/blocks/image-row/image-row";
 @use "../../components/blocks/input-select/input-select";
 @use "../../components/blocks/object-image-overlay/object-image-overlay";
+@use "../../components/blocks/master-brand-nav/master-brand-nav";
 @use "../../components/blocks/membership-upsell/membership-upsell";
 @use "../../components/blocks/newsletter-signup/newsletter-signup";
 @use "../../components/blocks/object-card/object-card";
@@ -37,6 +41,8 @@
 @use "../../components/blocks/pagination/pagination";
 @use "../../components/blocks/programme-page-tout/programme-page-tout";
 @use "../../components/blocks/promo/promo";
+@use "../../components/blocks/quicklinks/quicklinks";
+@use "../../components/blocks/quicklinks/quicklinks-preview";
 @use "../../components/blocks/review/review";
 @use "../../components/blocks/section-header/section-header";
 @use "../../components/blocks/search-form/search-form";

src/components/blocks/card/_card.scss

@@ -0,0 +1,124 @@
+@use "../../mixins";
+@use "../../base";
+@use "sass:color";
+
+.b-card {
+  color: base.sitecolors-siteColor("vam-black");
+  margin-bottom: 32px;
+  overflow: hidden;
+  padding: 0 10px;
+  position: relative;
+  width: 100%;
+
+  @include mixins.breakpoints-bpMinMedium {
+    width: 50%;
+  }
+
+  @include mixins.breakpoints-bpMinLarge {
+    width: 33.333%;
+  }
+
+  &__link {
+    display: block;
+    margin-bottom: 10px;
+    position: relative;
+
+    &:hover h2,
+    &:focus h2 {
+      text-decoration: underline;
+    }
+
+    @include mixins.breakpoints-bpMinSmall {
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+    }
+
+    @include mixins.breakpoints-bpMinMedium {
+      display: block;
+    }
+  }
+
+  &__media {
+    overflow: hidden;
+    padding-top: 66.67%;
+    position: relative;
+    margin-bottom: 16px;
+
+    @include mixins.breakpoints-bpMinSmall {
+      margin-bottom: 0;
+      padding-top: calc(66.67% / 2);
+      width: 50%;
+    }
+
+    @include mixins.breakpoints-bpMinMedium {
+      margin-bottom: 16px;
+      padding-top: 66.67%;
+      width: 100%;
+    }
+
+    &::after {
+      background-image:
+        linear-gradient(
+          rgba(base.sitecolors-siteColor("vam-black"), 0.35),
+          rgba(base.sitecolors-siteColor("vam-black"), 0)
+        );
+      content: "";
+      display: block;
+      height: 100%;
+      left: 0;
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      transition: opacity 0.35s ease;
+      width: 100%;
+      z-index: 0;
+
+      .b-event-teaser__link:hover &,
+      .b-event-teaser__link:focus & {
+        opacity: 1;
+      }
+    }
+  }
+
+  &__media-image {
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid base.sitecolors-siteColor("vam-grey-7");
+
+    @include mixins.breakpoints-bpMinSmall {
+      margin-left: 24px;
+      width: calc(50% - 24px);
+    }
+
+    @include mixins.breakpoints-bpMinMedium {
+      margin-left: 0;
+      width: 100%;
+    }
+  }
+
+  &__title {
+    @include base.typography-typeSetting(5, "bold");
+
+    margin-bottom: 8px;
+  }
+
+  &__buttons {
+    margin-top: auto;
+    margin-left: auto;
+    padding: 30px 0 16px;
+
+    .u-btn {
+      margin: 0;
+    }
+  }
+}

src/components/blocks/card/card.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  title: 'Card',
+  context: {
+    cardUrl: 'https://www.vam.ac.uk/exhibitions/pink-floyd',
+    cardTitle: 'The Leman Album: an enhanced facsimile',
+    cardDescription: 'This 18th-century volume contains Europe\'s earliest dated silk designs – close to 100 astonishingly vibrant drawings on paper.',
+    cardImage: {
+      320: 'https://vanda-production-assets.s3.amazonaws.com/2017/03/16/12/27/07/8462b6bc-d141-4808-8af2-cb5caeddfd50/leman_hero.jpg',
+      640: 'https://vanda-production-assets.s3.amazonaws.com/2017/03/16/12/27/07/8462b6bc-d141-4808-8af2-cb5caeddfd50/leman_hero.jpg',
+      960: 'https://vanda-production-assets.s3.amazonaws.com/2017/03/16/12/27/07/8462b6bc-d141-4808-8af2-cb5caeddfd50/leman_hero.jpg',
+      1280: 'https://vanda-production-assets.s3.amazonaws.com/2017/03/16/12/27/07/8462b6bc-d141-4808-8af2-cb5caeddfd50/leman_hero.jpg',
+    },
+  },
+  variants: [
+    {
+      name: 'Current project',
+      context: {
+        currentProject: true
+      }
+    },
+  ]
+};

src/components/blocks/card/card.html

@@ -0,0 +1,35 @@
+<div class="b-card{% for m in modifiers %} b-card--{{ m }}{% endfor %}">
+  <a class="b-card__link" itemprop="url" content="{{ cardUrl }}" href="{{ cardUrl }}">
+    <div class="b-card__media">
+      {% if currentProject %}
+        {%- render "@label-tag--current-project" -%}
+      {% endif %}
+      <img alt="{{ cardTitle }}"
+        class="b-card__media-image"
+        itemprop="image"
+        sizes="(max-width: 499px) calc(100vw - 20px),
+              (min-width: 500px) calc(50vw - 40px),
+              (min-width: 992px) calc(33vw - 80px)"
+        srcset="{% for k, img in cardImage %}{{ img }} {{ k }}w{% if loop.last == false %}, {% endif %}{% endfor %}"
+        src="{{ cardImage[640] }}"
+        loading="lazy"
+      />
+    </div>
+
+    <div class="b-card__content">
+      <h2 class="b-card__title" itemprop="name" content="{{ eventTitle }}">
+        {{ cardTitle }}
+      </h2>
+
+      <div itemprop="description" class="b-card__description">
+        {{ cardDescription }}
+      </div>
+
+      <div class="b-card__buttons">
+        <div class="u-btn u-btn--micro {% if modifiers and 'dark' in modifiers %}u-btn--outlined-inverse{% else %}u-btn--outlined{% endif %}">
+          More info
+        </div>
+      </div>
+    </div>
+  </a>
+</div>

src/components/blocks/carousel/_carousel.js

@@ -0,0 +1,16 @@
+import Swiper from 'swiper';
+import { EffectFade, Navigation } from 'swiper/modules';
+
+const container = document.querySelector('.b-carousel__swiper');
+
+const swiper = new Swiper({
+  modules: [EffectFade, Navigation],
+  loop: true,
+  effect: "fade",
+  navigation: {
+    nextEl: '.b-carousel__next',
+    prevEl: '.b-carousel__prev',
+  },
+});
+
+swiper.init(container);