BBD Fractal Components

src/assets/scripts/vam-scripts.js

@@ -24,6 +24,8 @@ 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/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,8 @@
 @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/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 +31,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 +40,7 @@
 @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/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,128 @@
+@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;
+    }
+
+    &:focus {
+      @include mixins.focus-defaultFocus;
+    }
+
+    @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,24 @@
+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://framemark.vam.ac.uk/collections/2020MP2543/full/320,/0/default.jpg',
+      640: 'https://framemark.vam.ac.uk/collections/2020MP2543/full/640,/0/default.jpg',
+      960: 'https://framemark.vam.ac.uk/collections/2020MP2543/full/960,/0/default.jpg',
+      1280: 'https://framemark.vam.ac.uk/collections/2020MP2543/full/1280,/0/default.jpg',
+      1920: 'https://framemark.vam.ac.uk/collections/2020MP2543/full/1920,/0/default.jpg',
+      2560: 'https://framemark.vam.ac.uk/collections/2020MP2543/full/2560,/0/default.jpg'
+    },
+  },
+  variants: [
+    {
+      name: 'Labelled',
+      context: {
+        labelled: 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 labelled %}
+        {%- render "@label-tag--project" -%}
+      {% endif %}
+      <img alt="{{ cardTitle }}"
+        class="b-card__media-image"
+        itemprop="image"
+        sizes="(max-width: 767px) calc(100vw - 20px),
+              (min-width: 768px) calc(50vw - 40px),
+              (min-width: 1200px) 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,107 @@
+const carousel = document.querySelector('.b-carousel__track');
+
+if (carousel) {
+  const slides = carousel.querySelectorAll('.b-carousel__item');
+  const slideCount = slides.length;
+  let activeSlide = 0;
+
+  const initCarousel = () => {
+    let greatestHeight = 0;
+
+    slides.forEach((slide) => {
+      // Reset slide position to get the actual height
+      slide.classList.remove('b-carousel__item--absolute');
+      const slideHeight = slide.offsetHeight;
+
+      if (slideHeight > greatestHeight) {
+        greatestHeight = slideHeight;
+      }
+    });
+
+    // Set container height to that of the tallest slide
+    carousel.style.height = `${greatestHeight}px`;
+
+    slides.forEach((slide) => {
+      slide.classList.add('b-carousel__item--absolute');
+      slide.querySelector('.b-carousel__item-link').setAttribute('tabindex', -1);
+    });
+
+    // Add active class to the initial slide
+    slides[0].classList.add('b-carousel__item--active');
+    slides[0].querySelector('.b-carousel__item-link').removeAttribute('tabindex');
+  };
+
+  initCarousel();
+
+  window.addEventListener('resize', () => {
+    initCarousel();
+  });
+
+  const navigateCarousel = (direction) => {
+    if (direction === 'prev') {
+      activeSlide -= 1;
+
+      if (activeSlide < 0) {
+        activeSlide = slideCount - 1;
+      }
+    } else {
+      activeSlide += 1;
+
+      if (activeSlide >= slideCount) {
+        activeSlide = 0;
+      }
+    }
+
+    slides.forEach((slide) => {
+      slide.classList.remove('b-carousel__item--active');
+      slide.querySelector('.b-carousel__item-link').setAttribute('tabindex', -1);
+    });
+
+    slides[activeSlide].classList.add('b-carousel__item--active');
+    slides[activeSlide].querySelector('.b-carousel__item-link').removeAttribute('tabindex');
+  };
+
+  document.addEventListener('click', (e) => {
+    if (e.target.closest('.b-carousel__navigation-prev')) {
+      navigateCarousel('prev');
+    } else if (e.target.closest('.b-carousel__navigation-next')) {
+      navigateCarousel('next');
+    }
+  });
+
+  const keyHandle = (e) => {
+    if (document.activeElement.closest('.b-carousel__item')) {
+      if (e.key === 'ArrowLeft') {
+        navigateCarousel('prev');
+      } else if (e.key === 'ArrowRight') {
+        navigateCarousel('next');
+      }
+    } else if (document.activeElement.closest('[class^="b-carousel__navigation"]')
+    && e.key === 'Enter') {
+      // on keyboard navigation using prev/next buttons, move focus to newly selected item,
+      // otherwise tabbing sequence is broken (unavoidable consequence of design)
+      if (document.activeElement.classList.contains('b-carousel__navigation-prev')) {
+        navigateCarousel('prev');
+      } else {
+        navigateCarousel('next');
+      }
+      slides[activeSlide].querySelector('.b-carousel__item-link').focus();
+    }
+  };
+  document.addEventListener('keydown', keyHandle);
+
+  carousel.ontouchstart = (e) => {
+    const startXY = [e.touches[0].pageX, e.touches[0].pageY];
+    carousel.ontouchmove = (e2) => {
+      const deltaXY = [e2.touches[0].pageX - startXY[0], e2.touches[0].pageY - startXY[1]];
+      if (Math.abs(deltaXY[0]) > Math.abs(deltaXY[1])) {
+        carousel.ontouchmove = null;
+        if (deltaXY[0] > 0) {
+          navigateCarousel('prev');
+        } else {
+          navigateCarousel('next');
+        }
+      }
+    };
+  };
+}