@comicrelief/component-library 8.51.7 → 8.52.0

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

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+const Icon = _styledComponents.default.svg.withConfig({
+  displayName: "Cross__Icon",
+  componentId: "sc-1px9lqa-0"
+})(["fill:", ";"], _ref => {
+  let {
+    colour,
+    theme
+  } = _ref;
+  return theme.color(colour);
+});
+const Cross = _ref2 => {
+  let {
+    colour = 'black',
+    mobileColour = null,
+    theme,
+    size = 24,
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(Icon, Object.assign({
+    width: size,
+    height: size,
+    colour: colour,
+    mobileColour: mobileColour,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 96 96"
+  }, rest), /*#__PURE__*/_react.default.createElement("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"
+  }));
+};
+var _default = exports.default = (0, _styledComponents.withTheme)(Cross);

package/dist/components/Atoms/Picture/Picture.js

@@ -88,6 +88,7 @@ const Picture = _ref11 => {
     isBackgroundImage = false,
     smallBreakpointRowLayout = null,
     mediumBreakpointRowLayout = null,
+    onLoad,
     ...rest
   } = _ref11;
   const document = typeof window !== 'undefined' ? window.document : null;
@@ -122,7 +123,8 @@ const Picture = _ref11 => {
       objectFit: objectFit,
       "data-src": image,
       className: "lazyload",
-      objFitState: objFitState
+      objFitState: objFitState,
+      onLoad: onLoad
     }));
   }
   return /*#__PURE__*/_react.default.createElement(Wrapper, Object.assign({

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

@@ -59,11 +59,8 @@ const CTAMultiCard = _ref => {
   return /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsQueryWrapper, null, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsSection, {
     backgroundColor: cardsBackground,
     paddingAbove: paddingAbove,
-    paddingBelow: paddingBelow,
-    isCarousel: carouselOfCards
-  }, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsInner, {
-    isCarousel: carouselOfCards
-  }, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
+    paddingBelow: paddingBelow
+  }, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsInner, null, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
     columns: columns,
     isCarousel: carouselOfCards,
     useSplideCarousel: useSplideCarousel
@@ -71,8 +68,15 @@ const CTAMultiCard = _ref => {
     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: {

package/dist/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/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js

@@ -14,7 +14,7 @@ const CardsQueryWrapper = exports.CardsQueryWrapper = _styledComponents.default.
 const CardsSection = exports.CardsSection = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__CardsSection",
   componentId: "sc-gsdqzv-1"
-})(["width:100%;background:", ";padding-top:", ";padding-bottom:", ";"], _ref => {
+})(["width:100%;background:", ";padding-top:", ";padding-bottom:", ";padding-inline:1rem;@media ", "{padding-inline:2rem;}@media ", "{padding-inline:4rem;}"], _ref => {
   let {
     theme,
     backgroundColor
@@ -30,59 +30,49 @@ const CardsSection = exports.CardsSection = _styledComponents.default.div.withCo
     paddingBelow
   } = _ref3;
   return paddingBelow;
-});
-const CardsInner = exports.CardsInner = _styledComponents.default.div.withConfig({
-  displayName: "CTAMultiCardstyle__CardsInner",
-  componentId: "sc-gsdqzv-2"
-})(["width:100%;max-width:1152px;margin:0 auto;", " ", ""], _ref4 => {
+}, _ref4 => {
   let {
-    isCarousel
+    theme
   } = _ref4;
-  return !isCarousel && (0, _styledComponents.css)(["padding-inline:1rem;@media ", "{padding-inline:2rem;}"], _ref5 => {
-    let {
-      theme
-    } = _ref5;
-    return theme.allBreakpoints('M');
-  });
-}, _ref6 => {
+  return theme.breakpoints2026('M');
+}, _ref5 => {
   let {
-    isCarousel
-  } = _ref6;
-  return isCarousel && (0, _styledComponents.css)(["@media ", "{padding-inline:2rem;}@media (min-width:", "px){padding-inline:0;}"], _ref7 => {
-    let {
-      theme
-    } = _ref7;
-    return theme.allBreakpoints('M');
-  }, _allBreakpoints.breakpointValues.XL);
+    theme
+  } = _ref5;
+  return theme.breakpoints2026('L');
 });
+const CardsInner = exports.CardsInner = _styledComponents.default.div.withConfig({
+  displayName: "CTAMultiCardstyle__CardsInner",
+  componentId: "sc-gsdqzv-2"
+})(["width:100%;max-width:1152px;margin:0 auto;"]);
 const CardsContainer = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__CardsContainer",
   componentId: "sc-gsdqzv-3"
-})(["display:flex;flex-direction:column;width:100%;gap:1rem;@media ", "{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;width:100%;max-width:100%;margin:0 auto;}@media ", "{column-gap:2rem;}", " ", ""], _ref8 => {
+})(["display:flex;flex-direction:column;width:100%;gap:1rem;@media ", "{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;}@media ", "{column-gap:2rem;row-gap:2rem;}", " ", ""], _ref6 => {
   let {
     theme
-  } = _ref8;
+  } = _ref6;
   return theme.allBreakpoints('M');
-}, _ref9 => {
+}, _ref7 => {
   let {
     theme
-  } = _ref9;
+  } = _ref7;
   return theme.allBreakpoints('L');
-}, _ref10 => {
+}, _ref8 => {
   let {
     columns,
     useSplideCarousel
-  } = _ref10;
+  } = _ref8;
   return !useSplideCarousel && columns === 2 && (0, _styledComponents.css)(["@media (min-width:", "px){display:grid;grid-template-columns:repeat(2,minmax(443px,560px));justify-content:center;align-items:stretch;column-gap:2rem;row-gap:2rem;width:100%;max-width:100%;margin:0;& > *:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:min(100%,560px);}}"], _allBreakpoints.breakpointValues.L);
-}, _ref11 => {
+}, _ref9 => {
   let {
     isCarousel
-  } = _ref11;
-  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){", "}"], _allBreakpoints.breakpointValues.L - 1, _ref12 => {
+  } = _ref9;
+  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){", "}"], _allBreakpoints.breakpointValues.L - 1, _ref10 => {
     let {
       useSplideCarousel
-    } = _ref12;
-    return useSplideCarousel ? (0, _styledComponents.css)(["display:block;cursor:grab;width:100%;margin:0;max-width:100%;padding:0.75rem 1rem;gap:0;.splide,.splide__track{overflow:visible}.splide__list{align-items:stretch;}.splide__slide{display:flex;height:auto;}"]) : (0, _styledComponents.css)(["flex-direction:row;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;&::-webkit-scrollbar{display:none;}"]);
+    } = _ref10;
+    return useSplideCarousel ? (0, _styledComponents.css)(["display:block;cursor:grab;width:100%;max-width:100%;gap:0;.splide,.splide__track{overflow:visible;}.splide__list{align-items:stretch;}.splide:not(.is-overflow) .splide__list{justify-content:center;}.splide__slide{display:flex;height:auto;}"]) : (0, _styledComponents.css)(["flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}"]);
   });
 });
 var _default = exports.default = CardsContainer;

package/dist/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/dist/components/Organisms/DynamicGallery/DynamicGallery.js

@@ -0,0 +1,218 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
+var _floor2 = _interopRequireDefault(require("lodash/floor"));
+var _orderBy2 = _interopRequireDefault(require("lodash/orderBy"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactResponsive = require("react-responsive");
+var _breakpoints = require("../../../theme/shared/breakpoints2026");
+var _Button = _interopRequireDefault(require("../../Atoms/Button/Button"));
+var _Lightbox = _interopRequireWildcard(require("./_Lightbox"));
+var _DynamicGallery = require("./DynamicGallery.style");
+var _DynamicGalleryColumn = _interopRequireDefault(require("./_DynamicGalleryColumn"));
+var _types = require("./_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 = _ref => {
+  let {
+    pageBackgroundColour = 'transparent',
+    textColour = 'black',
+    gridWidth = 3,
+    maxWidth = '1500px',
+    loadingBehaviour = '25',
+    imageRatio = 'dynamic',
+    useLightbox = true,
+    nodes = [],
+    paddingTop = '0rem',
+    paddingBottom = '2rem'
+  } = _ref;
+  const hasNodes = (nodes === null || nodes === void 0 ? void 0 : nodes.length) > 0;
+  const containerRef = (0, _react.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] = (0, _react.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 = (0, _orderBy2.default)(galleryNodes, node => {
+      const {
+        top,
+        left
+      } = node.getBoundingClientRect();
+      return (0, _floor2.default)(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 = (0, _react.useRef)((0, _throttle2.default)(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] = (0, _react.useState)(gridWidth);
+  const isSmall = (0, _reactResponsive.useMediaQuery)({
+    maxWidth: _breakpoints.breakpointValues2026.S
+  });
+  const isMedium = (0, _reactResponsive.useMediaQuery)({
+    maxWidth: _breakpoints.breakpointValues2026.M
+  });
+  (0, _react.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] = (0, _react.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 /*#__PURE__*/_react.default.createElement(_DynamicGallery.Container, {
+    className: "gallery-container",
+    ref: containerRef,
+    maxWidth: maxWidth,
+    pageBackgroundColour: pageBackgroundColour,
+    textColour: textColour,
+    paddingTop: paddingTop,
+    paddingBottom: paddingBottom
+  }, /*#__PURE__*/_react.default.createElement(_Lightbox.LightboxContext.Provider, {
+    value: {
+      useLightbox,
+      selectedNode,
+      setSelectedNode,
+      nextNode: handleNextNode,
+      previousNode: handlePreviousNode
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DynamicGallery.ImageGrid, {
+    className: "gallery-grid",
+    onKeyDown: event => handleKeyDown(event)
+  }, hasNodes && Array(columnCount).fill(null).map((column, columnIndex) => /*#__PURE__*/_react.default.createElement(_DynamicGalleryColumn.default
+  // 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
+  })), /*#__PURE__*/_react.default.createElement(_DynamicGallery.EmptyMessage, {
+    isEmpty: !hasNodes
+  }, "No images to display")), /*#__PURE__*/_react.default.createElement(_Lightbox.default, null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "gallery-focus-trap",
+    tabIndex: 0
+  })), imageCount < nodes.length && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => handleLoadMore()
+  }, "Load more"));
+};
+var _default = exports.default = DynamicGallery;

package/dist/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)} />;
+```

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

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Title = exports.InteractiveGalleryNode = exports.ImageGrid = exports.ImageContainer = exports.GalleryNode = exports.EmptyMessage = exports.Details = exports.Container = exports.Column = exports.Caption = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+const Container = exports.Container = _styledComponents.default.div.withConfig({
+  displayName: "DynamicGallerystyle__Container",
+  componentId: "sc-1kgt7yr-0"
+})(["display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:", ";background:", ";", " color:", ";"], _ref => {
+  let {
+    maxWidth
+  } = _ref;
+  return maxWidth;
+}, _ref2 => {
+  let {
+    theme,
+    pageBackgroundColour
+  } = _ref2;
+  return theme.color(pageBackgroundColour);
+}, _ref3 => {
+  let {
+    paddingTop,
+    paddingBottom
+  } = _ref3;
+  return (0, _styledComponents.css)(["padding:", " 2rem ", ";"], paddingTop, paddingBottom);
+}, _ref4 => {
+  let {
+    theme,
+    textColour
+  } = _ref4;
+  return theme.color(textColour);
+});
+const ImageGrid = exports.ImageGrid = _styledComponents.default.div.withConfig({
+  displayName: "DynamicGallerystyle__ImageGrid",
+  componentId: "sc-1kgt7yr-1"
+})(["display:flex;gap:1rem;width:100%;@media ", "{gap:2rem;}"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.breakpoints2026('M');
+});
+const Column = exports.Column = _styledComponents.default.div.withConfig({
+  displayName: "DynamicGallerystyle__Column",
+  componentId: "sc-1kgt7yr-2"
+})(["flex:1;display:flex;flex-direction:column;gap:1.1rem;@media ", "{gap:2rem;}"], _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.breakpoints2026('M');
+});
+const EmptyMessage = exports.EmptyMessage = _styledComponents.default.div.withConfig({
+  displayName: "DynamicGallerystyle__EmptyMessage",
+  componentId: "sc-1kgt7yr-3"
+})(["display:", ";"], _ref7 => {
+  let {
+    isEmpty
+  } = _ref7;
+  return isEmpty ? 'block' : 'none';
+});
+const GalleryNodeBase = (0, _styledComponents.css)(["display:flex;flex-direction:column;gap:0.8rem;padding:0;margin:0;background:none;border:none;text-align:left;"]);
+const GalleryNode = exports.GalleryNode = _styledComponents.default.div.withConfig({
+  displayName: "DynamicGallerystyle__GalleryNode",
+  componentId: "sc-1kgt7yr-4"
+})(["", ""], GalleryNodeBase);
+const InteractiveGalleryNode = exports.InteractiveGalleryNode = _styledComponents.default.button.withConfig({
+  displayName: "DynamicGallerystyle__InteractiveGalleryNode",
+  componentId: "sc-1kgt7yr-5"
+})(["", " cursor:pointer;color:inherit;& div:first-child{transition:all 0.1s ease-out;}&:focus-visible{outline:2px solid #000000;}& > div:first-child{&:hover{box-shadow:0px 3px 10px 0px rgba(0,0,0,0.4);}}"], GalleryNodeBase);
+const ImageContainer = exports.ImageContainer = _styledComponents.default.div.withConfig({
+  displayName: "DynamicGallerystyle__ImageContainer",
+  componentId: "sc-1kgt7yr-6"
+})(["display:flex;height:auto;width:100%;min-height:", ";max-height:", ";overflow:hidden;border-radius:1rem;background:rgba(0,0,0,0.05);box-shadow:0px 2px 8px 0px rgba(0,0,0,0.2);img{height:100%;opacity:0;transition:opacity 0.1s ease-out 0.3s;}"], _ref8 => {
+  let {
+    minHeight
+  } = _ref8;
+  return minHeight;
+}, _ref9 => {
+  let {
+    maxHeight
+  } = _ref9;
+  return maxHeight;
+});
+const Details = exports.Details = _styledComponents.default.div.withConfig({
+  displayName: "DynamicGallerystyle__Details",
+  componentId: "sc-1kgt7yr-7"
+})(["display:flex;flex-direction:column;gap:0.5rem;padding:0 1rem;"]);
+const Title = exports.Title = _styledComponents.default.div.withConfig({
+  displayName: "DynamicGallerystyle__Title",
+  componentId: "sc-1kgt7yr-8"
+})(["&:first-child{margin-bottom:0;}"]);
+const Caption = exports.Caption = _styledComponents.default.div.withConfig({
+  displayName: "DynamicGallerystyle__Caption",
+  componentId: "sc-1kgt7yr-9"
+})(["line-height:1;"]);