@comicrelief/component-library 8.51.7 → 8.52.0

package/dist/components/Organisms/DynamicGallery/_types.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GalleryNodeType = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+// ignoring the linting rule here so we can name the export for clarity;
+// this shared type is used in the DynamicGallery and DynamicGalleryColumn components,
+// so lives here to avoid circular dependencies
+// eslint-disable-next-line import/prefer-default-export
+const GalleryNodeType = exports.GalleryNodeType = _propTypes.default.shape({
+  title: _propTypes.default.string,
+  image: _propTypes.default.string.isRequired,
+  body: _propTypes.default.node,
+  caption: _propTypes.default.node
+});

package/dist/components/Organisms/DynamicGallery/_utils.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createMockGalleryNodes;
+var _data = require("../../../styleguide/data/data");
+/**
+ * mocking function to create nodes for the dynamic gallery
+ */
+function createMockGalleryNodes() {
+  let nodeCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+  const images = [_data.defaultData.pictures.small, _data.defaultData.pictures.medium, _data.defaultData.pictures.large, _data.defaultData.promoImage, _data.defaultData.heroBannerImage, _data.defaultData.image, 'tall.jpg', 'wide.jpg'];
+  const nodes = [];
+  for (let i = 0; i < nodeCount; i += 1) {
+    nodes.push({
+      image: images[Math.floor(Math.random() * images.length)],
+      title: `image ${i}`,
+      caption: 'Age group: 0-10',
+      body: `This is the body for image ${i}. It can be used to display additional information about the image.`
+    });
+  }
+  return nodes;
+}

package/dist/index.js

@@ -112,6 +112,12 @@ Object.defineProperty(exports, "DoubleCopy", {
     return _DoubleCopy.default;
   }
 });
+Object.defineProperty(exports, "DynamicGallery", {
+  enumerable: true,
+  get: function () {
+    return _DynamicGallery.default;
+  }
+});
 Object.defineProperty(exports, "ESU_FIELDS", {
   enumerable: true,
   get: function () {
@@ -516,4 +522,5 @@ var _Membership = _interopRequireDefault(require("./components/Organisms/Members
 var _MarketingPreferencesDS = require("./components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS");
 var _ImpactSlider = _interopRequireDefault(require("./components/Organisms/ImpactSlider/ImpactSlider"));
 var _WYMDCarousel = _interopRequireDefault(require("./components/Organisms/WYMDCarousel/WYMDCarousel"));
-var _RichtextCarousel = _interopRequireDefault(require("./components/Organisms/RichtextCarousel/RichtextCarousel"));
+var _RichtextCarousel = _interopRequireDefault(require("./components/Organisms/RichtextCarousel/RichtextCarousel"));
+var _DynamicGallery = _interopRequireDefault(require("./components/Organisms/DynamicGallery/DynamicGallery"));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.51.7",
+  "version": "8.52.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/playwright/components/organisms/dynamicGallery.spec.js

@@ -0,0 +1,9 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('dynamic gallery component', () => {
+  test('dynamic gallery', async ({ page }) => {
+    await page.goto('/#dynamicgallery');
+
+    await page.close();
+  });
+});

package/src/components/Atoms/Icons/Cross.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { withTheme } from 'styled-components';
+
+const Icon = styled.svg`
+  fill: ${({ colour, theme }) => theme.color(colour)};
+`;
+
+const Cross = ({
+  colour = 'black',
+  mobileColour = null,
+  theme,
+  size = 24,
+  ...rest
+}) => (
+  <Icon
+    width={size}
+    height={size}
+    colour={colour}
+    mobileColour={mobileColour}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 96 96"
+    {...rest}
+  >
+    <polygon points="85.48 17.59 78.41 10.52 48 40.93 17.59 10.52 10.52 17.59 40.93 48 10.52 78.41 17.59 85.48 48 55.07 78.41 85.48 85.48 78.41 55.07 48 85.48 17.59" />
+  </Icon>
+);
+
+Cross.propTypes = {
+  colour: PropTypes.string,
+  mobileColour: PropTypes.string,
+  size: PropTypes.number,
+  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+  theme: PropTypes.objectOf(PropTypes.shape).isRequired
+};
+
+export default withTheme(Cross);

package/src/components/Atoms/Picture/Picture.js

@@ -75,6 +75,7 @@ const Picture = ({
   isBackgroundImage = false,
   smallBreakpointRowLayout = null,
   mediumBreakpointRowLayout = null,
+  onLoad,
   ...rest
 }) => {
   const document = typeof window !== 'undefined' ? window.document : null;
@@ -115,6 +116,7 @@ const Picture = ({
           data-src={image}
           className="lazyload"
           objFitState={objFitState}
+          onLoad={onLoad}
         />
       </Wrapper>
     );
@@ -169,7 +171,8 @@ Picture.propTypes = {
   height: PropTypes.string,
   isBackgroundImage: PropTypes.bool,
   smallBreakpointRowLayout: PropTypes.bool,
-  mediumBreakpointRowLayout: PropTypes.bool
+  mediumBreakpointRowLayout: PropTypes.bool,
+  onLoad: PropTypes.func
 };
 
 export default withTheme(Picture);

package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js

@@ -56,9 +56,8 @@ const CTAMultiCard = ({ data }) => {
         backgroundColor={cardsBackground}
         paddingAbove={paddingAbove}
         paddingBelow={paddingBelow}
-        isCarousel={carouselOfCards}
       >
-        <CardsInner isCarousel={carouselOfCards}>
+        <CardsInner>
           <CardsContainer
             columns={columns}
             isCarousel={carouselOfCards}
@@ -69,8 +68,12 @@ const CTAMultiCard = ({ data }) => {
                 options={{
                   arrows: false,
                   pagination: false,
-                  drag: true,
-                  dragMinThreshold: 10,
+                  // Reduce swipe "throw" as Matt felt the defaults are too much
+                  // See https://splidejs.com/guides/options/
+                  drag: 'free',
+                  flickPower: 50,
+                  perMove: 1,
+                  dragMinThreshold: { mouse: 50, touch: 50 },
                   gap: '1rem',
                   fixedWidth: '309px',
                   padding: { left: '0px', right: '0px' }

package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md

@@ -68,6 +68,48 @@ const data = {
 </div>;
 ```
 
+### CTAMultiCard: Carousel with just 2 cards (2 columns layout)
+
+```js
+import CTAMultiCard from './CTAMultiCard';
+import Text from '../../../Atoms/Text/Text';
+import challengeExampleImage from '../../../../styleguide/assets/challenge-1.jpg';
+const exampleData = require('./example_data.json');
+
+// Map cards to include pre-rendered body content and processed image/link data
+const cardsWithRenderedBody = exampleData.cards.map(card => ({
+  ...card,
+  body: (
+    <Text tag="p">
+      {card.body}
+    </Text>
+  ),
+  fallback: challengeExampleImage,
+  imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
+  images: `${challengeExampleImage} 678w`,
+  bgColour: "white",
+  description: "",
+  target: "self",
+  external: null
+}));
+
+const cardsTwo = cardsWithRenderedBody.slice(0, 2);
+
+const dataTwoCards = {
+  ...exampleData,
+  cards: cardsTwo,
+  layout: "2 columns",
+  carouselOfCards: true,
+  backgroundColour: "grey_medium",
+  paddingAbove: '0rem',
+  paddingBelow: '0rem'
+};
+
+<div style={{ background: '#E1E2E3', width: '100%' }}>
+  <CTAMultiCard data={dataTwoCards} />
+</div>;
+```
+
 ### CTAMultiCard: Desktop Grid View (2 columns) with large padding
 
 **NB: One card contains a lot of lorem ipsum text to demonstrate that all cards will match the height of the tallest sibling card. In mobile view, this example displays as a carousel. This example also demonstrates larger vertical padding via `paddingAbove` / `paddingBelow` set to `4rem`, so it will appear with more space above and below the cards.**

package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js

@@ -16,29 +16,19 @@ export const CardsSection = styled.div`
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
   padding-top: ${({ paddingAbove }) => paddingAbove};
   padding-bottom: ${({ paddingBelow }) => paddingBelow};
+  padding-inline: 1rem;
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    padding-inline: 2rem;
+  }
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    padding-inline: 4rem;
+  }
 `;
 
 export const CardsInner = styled.div`
   width: 100%;
   max-width: 1152px;
   margin: 0 auto;
-
-  ${({ isCarousel }) => !isCarousel && css`
-    padding-inline: 1rem;
-    @media ${({ theme }) => theme.allBreakpoints('M')} {
-      padding-inline: 2rem;
-    }
-  `}
-
-  ${({ isCarousel }) => isCarousel && css`
-    @media ${({ theme }) => theme.allBreakpoints('M')} {
-      padding-inline: 2rem;
-    }
-
-    @media (min-width: ${breakpointValues.XL}px) {
-      padding-inline: 0;
-    }
-  `}
 `;
 
 const CardsContainer = styled.div`
@@ -53,13 +43,11 @@ const CardsContainer = styled.div`
     flex-wrap: wrap;
     justify-content: center;
     align-items: stretch;
-    width: 100%;
-    max-width: 100%;
-    margin: 0 auto;
   }
 
   @media ${({ theme }) => theme.allBreakpoints('L')} {
     column-gap: 2rem;
+    row-gap: 2rem;
   }
 
   /* Ensure 2-column layout behaves itself at L+. Applies when Splide is not active. */
@@ -91,21 +79,25 @@ const CardsContainer = styled.div`
         display: block;
         cursor: grab;
         width: 100%;
-        margin: 0;
         max-width: 100%;
-        padding: 0.75rem 1rem;
         gap: 0;
 
         /* We need this so that the box shadows of the cards are not clipped off */
         .splide,
         .splide__track {
-          overflow: visible
+          overflow: visible;
         }
 
         .splide__list {
           align-items: stretch;
         }
 
+        /* Center slides when there is no overflow (e.g. only 1–2 cards in
+        a gap where we'd probably fit 3 or more). */
+        .splide:not(.is-overflow) .splide__list {
+          justify-content: center;
+        }
+
         .splide__slide {
           display: flex;
           height: auto;
@@ -115,13 +107,11 @@ const CardsContainer = styled.div`
         flex-wrap: nowrap;
         justify-content: flex-start;
         width: 100%;
-        margin: 0;
         max-width: 100%;
         overflow-x: auto;
         overflow-y: visible;
         -webkit-overflow-scrolling: touch;
         scroll-snap-type: x mandatory;
-        padding: 0.75rem 1rem;
 
         scrollbar-width: none;
         -ms-overflow-style: none;

package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap

@@ -5,13 +5,13 @@ exports[`handles data structure correctly 1`] = `
   className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
 >
   <div
-    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 ehBqzi"
+    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 kCDlNQ"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 icRtAH"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 gAuYUa"
       >
         <div
           className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
@@ -288,13 +288,13 @@ exports[`renders 2 columns layout correctly 1`] = `
   className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
 >
   <div
-    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
+    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 bWeGAp"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 jrSYsC"
       >
         <div
           className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
@@ -571,13 +571,13 @@ exports[`renders carousel mode correctly 1`] = `
   className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
 >
   <div
-    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
+    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 eomXiE"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 fqrDP"
       >
         <div
           className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
@@ -854,13 +854,13 @@ exports[`renders correctly with data prop 1`] = `
   className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
 >
   <div
-    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
+    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 eomXiE"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 fqrDP"
       >
         <div
           className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"

package/src/components/Organisms/DynamicGallery/DynamicGallery.js

@@ -0,0 +1,243 @@
+import { floor, orderBy, throttle } from 'lodash';
+import PropTypes from 'prop-types';
+import React, {
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import { useMediaQuery } from 'react-responsive';
+import { breakpointValues2026 as breakpointValues } from '../../../theme/shared/breakpoints2026';
+import Button from '../../Atoms/Button/Button';
+import Lightbox, { LightboxContext } from './_Lightbox';
+import {
+  Container,
+  EmptyMessage,
+  ImageGrid
+} from './DynamicGallery.style';
+import DynamicGalleryColumn from './_DynamicGalleryColumn';
+import { GalleryNodeType } from './_types';
+
+/**
+ * the Dynamic Gallery component displays a grid of images,
+ * by default using dynamic heights per image to create an more organic look
+ */
+const DynamicGallery = ({
+  pageBackgroundColour = 'transparent',
+  textColour = 'black',
+  gridWidth = 3,
+  maxWidth = '1500px',
+  loadingBehaviour = '25',
+  imageRatio = 'dynamic',
+  useLightbox = true,
+  nodes = [],
+  paddingTop = '0rem',
+  paddingBottom = '2rem'
+}) => {
+  const hasNodes = nodes?.length > 0;
+  const containerRef = useRef(null);
+
+  // handle loading behaviour;
+  // if we're in chunk mode, display images a chunk at a time
+  // (or the total number of images if less than the chunk size)
+  // or display all images at once
+  const isChunked = loadingBehaviour !== 'all';
+  const imageChunkSize = +loadingBehaviour;
+  const [imageCount, setImageCount] = useState(isChunked
+    ? Math.min(imageChunkSize, nodes.length) : nodes.length);
+
+  function handleLoadMore() {
+    setImageCount(imageCount + imageChunkSize);
+  }
+
+  // assign a manual tabbing order to gallery images based on their position in the DOM,
+  // starting from top-left and working downwards in a natural order
+  function updateTabOrder() {
+    if (!containerRef.current) return;
+    const galleryNodes = containerRef.current.querySelectorAll('.gallery-node');
+    const sortedNodes = orderBy(galleryNodes, node => {
+      const { top, left } = node.getBoundingClientRect();
+      return floor(top, -2) + Math.floor(left) / 1000;
+    }, 'asc');
+    sortedNodes.forEach((galleryNode, index) => {
+      galleryNode.setAttribute('data-order', String(index));
+    });
+  }
+  // create a throttled version of the updateTabOrder function
+  const throttledUpdateTabOrder = useRef(throttle(updateTabOrder, 2000));
+
+  /**
+   * handle column counts;
+   * column count is based on a combination of the maxColumns prop and the window width
+   * - for small screens columns = 1
+   * - for medium screens columns = 2
+   * - for large and xl screens we use the maxColumns prop which defaults to 3
+   * .
+   * we need to use JS here rather than CSS because our columns are created dynamically;
+   * this is to allow us to assign nodes in the natural "horizontal" order rather than "vertically"
+   */
+  const [columnCount, setColumnCount] = useState(gridWidth);
+  const isSmall = useMediaQuery({ maxWidth: breakpointValues.S });
+  const isMedium = useMediaQuery({ maxWidth: breakpointValues.M });
+
+  useEffect(() => {
+    let newColumnCount;
+    switch (true) {
+      case isSmall:
+        newColumnCount = 1;
+        break;
+      case isMedium:
+        newColumnCount = 2;
+        break;
+      default:
+        newColumnCount = gridWidth;
+        break;
+    }
+    setColumnCount(newColumnCount);
+    throttledUpdateTabOrder.current();
+  }, [isSmall, isMedium, gridWidth, setColumnCount]);
+
+  // handle selected gallery node
+  const [selectedNode, setSelectedNode] = useState(null);
+
+  // handle next/previous node events from the lightbox
+  function handleNextNode(node) {
+    const nodeIndex = nodes.indexOf(node);
+    const nextNodeIndex = (nodeIndex + 1) % imageCount;
+    setSelectedNode(nodes[nextNodeIndex]);
+  }
+  function handlePreviousNode(node) {
+    const nodeIndex = nodes.indexOf(node);
+    const previousNodeIndex = (nodeIndex - 1 + imageCount) % imageCount;
+    setSelectedNode(nodes[previousNodeIndex]);
+  }
+
+  // handle keydown events,
+  // including image opening and tabbing
+  function handleKeyDown(event) {
+    switch (event.key) {
+      // if the lightbox is enabled, open the image in the lightbox when the user presses enter
+      case 'Enter': {
+        if (useLightbox) {
+          event.preventDefault();
+          const nodeIndex = +event.target.dataset.nodeIndex;
+          if (Number.isNaN(nodeIndex)) return;
+          setSelectedNode(nodes[nodeIndex]);
+        }
+        break;
+      }
+      // handle tabbing between images;
+      // there doesn't seem to be a great way to handle this!
+      // it's tied into the way the grid is structured, and the way the nodes are rendered;
+      // ideal scenario would be a tabbable grid with nice ordering and no gaps,
+      // but this isn't currently possible without either getting a bit hacky with CSS or JS
+      // our options are:
+      // - use a standard CSS grid > ordered and tabble but gappy
+      // - use absolute positioning > no gaps but complex and weird DOM order (pinterest approach)
+      // - flex-column+order > no gaps but complex (https://mui.com/material-ui/react-masonry/)
+      // - columns + custom tabbing > what we're doing here
+      case 'Tab': {
+        const nodeIndex = +event.target.dataset.order;
+        if (Number.isNaN(nodeIndex)) return;
+        const galleryContainer = event.target.closest('.gallery-container');
+        if (!galleryContainer) return;
+
+        let newNodeIndex;
+
+        if (event.shiftKey) {
+          // shift-tab: move to the previous image
+          newNodeIndex = nodeIndex - 1;
+          if (newNodeIndex < 0) return;
+          event.preventDefault();
+          galleryContainer.querySelector(`[data-order="${newNodeIndex}"]`).focus();
+        } else {
+          // tab: move to the next image
+          newNodeIndex = nodeIndex + 1;
+          if (newNodeIndex >= imageCount) {
+            // if we're on the last image, move to the focus trap
+            // before allowing the tab event to continue to the next natural element;
+            // this is a bit hacky but is needed for when the "last" image isn't in the last column;
+            // eg 10 images divided across 3 columns = [4, 3, 3]
+            // when this happens the browser tries to tab into the next column,
+            // rather than out of the grid and onwards
+            galleryContainer.querySelector('.gallery-focus-trap').focus();
+            return;
+          }
+          event.preventDefault();
+          galleryContainer.querySelector(`[data-order="${newNodeIndex}"]`).focus();
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  return (
+    <Container
+      className="gallery-container"
+      ref={containerRef}
+      maxWidth={maxWidth}
+      pageBackgroundColour={pageBackgroundColour}
+      textColour={textColour}
+      paddingTop={paddingTop}
+      paddingBottom={paddingBottom}
+    >
+      <LightboxContext.Provider
+        value={{
+          useLightbox,
+          selectedNode,
+          setSelectedNode,
+          nextNode: handleNextNode,
+          previousNode: handlePreviousNode
+        }}
+      >
+        <ImageGrid className="gallery-grid" onKeyDown={event => handleKeyDown(event)}>
+          {hasNodes
+          && Array(columnCount)
+            .fill(null)
+            .map((column, columnIndex) => (
+              <DynamicGalleryColumn
+                // disabling the lint rule here
+                // as we're chunking an array and have no unique keys
+                // eslint-disable-next-line react/no-array-index-key
+                key={columnIndex}
+                columnIndex={columnIndex}
+                columnCount={columnCount}
+                nodes={nodes.slice(0, imageCount)}
+                imageRatio={imageRatio}
+                updateTabOrder={throttledUpdateTabOrder.current}
+              />
+            ))}
+
+          <EmptyMessage isEmpty={!hasNodes}>No images to display</EmptyMessage>
+        </ImageGrid>
+        <Lightbox />
+        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+        <div className="gallery-focus-trap" tabIndex={0} />
+      </LightboxContext.Provider>
+      {imageCount < nodes.length && <Button onClick={() => handleLoadMore()}>Load more</Button>}
+    </Container>
+  );
+};
+
+DynamicGallery.propTypes = {
+  // title: PropTypes.string,
+  pageBackgroundColour: PropTypes.string,
+  textColour: PropTypes.string,
+  gridWidth: PropTypes.oneOf([2, 3, 4, 5]),
+  maxWidth: PropTypes.string,
+  loadingBehaviour: PropTypes.oneOf([
+    'all',
+    '25'
+  ]),
+  imageRatio: PropTypes.oneOf([
+    'dynamic',
+    '4:3'
+  ]),
+  useLightbox: PropTypes.bool,
+  nodes: PropTypes.arrayOf(GalleryNodeType),
+  paddingTop: PropTypes.string,
+  paddingBottom: PropTypes.string
+};
+
+export default DynamicGallery;

package/src/components/Organisms/DynamicGallery/DynamicGallery.md

@@ -0,0 +1,30 @@
+# Dynamic Gallery
+
+### Empty gallery
+
+```js
+<DynamicGallery />
+```
+
+### Basic gallery
+
+```js
+const defaultData = require('../../../styleguide/data/data').defaultData;       
+import createMockGalleryNodes from './_utils';
+<DynamicGallery nodes={createMockGalleryNodes(50)} />;
+```
+
+### Customised gallery with multiple options
+```js
+const defaultData = require('../../../styleguide/data/data').defaultData;
+import createMockGalleryNodes from './_utils';
+<DynamicGallery gridWidth={4} nodes={createMockGalleryNodes(4)} loadingBehaviour="all" imageRatio="4:3" pageBackgroundColour="blue" textColour="white" paddingTop="6rem" paddingBottom="6rem" useLightbox={false} />;
+```
+
+### Gallery with max 5 columns
+
+```js
+const defaultData = require('../../../styleguide/data/data').defaultData;
+import createMockGalleryNodes from './_utils';
+<DynamicGallery gridWidth={5} nodes={createMockGalleryNodes(5)} />;
+```