@comicrelief/component-library 8.51.8 → 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/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;"]);

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+require("jest-styled-components");
+var _react = _interopRequireDefault(require("react"));
+var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/shallowWithTheme"));
+var _DynamicGallery = _interopRequireDefault(require("./DynamicGallery"));
+it('renders an empty Dynamic Gallery with no options set', () => {
+  const galleryEl = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_DynamicGallery.default, null)).toJSON();
+  expect(galleryEl).toMatchSnapshot();
+});
+it('handle a Dynamic Gallery with mocked gallery nodes', () => {
+  const nodes = [{
+    image: 'image1.jpg',
+    title: 'Image 1',
+    caption: 'Caption 1',
+    body: 'Body 1'
+  }, {
+    image: 'image2.jpg',
+    title: 'Image 2',
+    caption: 'Caption 2',
+    body: 'Body 2'
+  }, {
+    image: 'image3.jpg',
+    title: 'Image 3',
+    caption: 'Caption 3',
+    body: 'Body 3'
+  }];
+  const galleryEl = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_DynamicGallery.default, {
+    nodes: nodes
+  })).toJSON();
+  expect(galleryEl).toMatchSnapshot();
+});

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

@@ -0,0 +1,111 @@
+"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 = DynamicGalleryColumn;
+var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
+var _react = _interopRequireWildcard(require("react"));
+var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
+var _Lightbox = require("./_Lightbox");
+var _DynamicGallery = require("./DynamicGallery.style");
+var _types = require("./_types");
+/**
+ * a separate component to handle columns of images;
+ * this component handles aspect ratio calculations to enfore a min/max ratio for its images
+ */
+function DynamicGalleryColumn(_ref) {
+  let {
+    updateTabOrder,
+    nodes,
+    imageRatio,
+    columnIndex,
+    columnCount
+  } = _ref;
+  const [minHeight, setMinHeight] = (0, _react.useState)();
+  const [maxHeight, setMaxHeight] = (0, _react.useState)();
+  const elRef = (0, _react.useRef)(null);
+  const updateMinMaxHeight = (0, _react.useCallback)(() => {
+    if (!elRef.current) return;
+    let minAspectRatio;
+    let maxAspectRatio;
+
+    // handle aspect ratio;
+    // for dynamic aspect ratio, we use a min/max ratio of 2.35:1 and 9:16
+    // but if a specific aspect ratio is provided, use that instead
+    switch (imageRatio) {
+      case '4:3':
+        minAspectRatio = 4 / 3;
+        maxAspectRatio = 4 / 3;
+        break;
+      default:
+        minAspectRatio = 2.35 / 1;
+        maxAspectRatio = 9 / 16;
+        break;
+    }
+    const columnWidth = elRef.current.clientWidth;
+    setMinHeight(columnWidth / minAspectRatio);
+    setMaxHeight(columnWidth / maxAspectRatio);
+  }, [imageRatio, setMinHeight, setMaxHeight]);
+
+  // call repeatedly on column resize
+  (0, _react.useEffect)(() => {
+    // when the column width changes, recalculate the min/max height for images
+    const handleResize = (0, _throttle2.default)(() => {
+      updateMinMaxHeight();
+    }, 500);
+    const resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(elRef.current);
+
+    // call once on initial mount
+    updateMinMaxHeight();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [updateMinMaxHeight]);
+  const {
+    useLightbox,
+    setSelectedNode
+  } = (0, _react.useContext)(_Lightbox.LightboxContext);
+
+  // on click, open the image in the lightbox;
+  // conditionally enabled depending on the gallery settings
+  function handlePointerUp(node) {
+    setSelectedNode(node);
+  }
+  const NodeComponent = useLightbox ? _DynamicGallery.InteractiveGalleryNode : _DynamicGallery.GalleryNode;
+  return /*#__PURE__*/_react.default.createElement(_DynamicGallery.Column, {
+    ref: elRef,
+    className: "gallery-column"
+  }, nodes === null || nodes === void 0 ? void 0 : nodes.filter((_, nodeIndex) => nodeIndex % columnCount === columnIndex).map((node, nodeIndex) => /*#__PURE__*/_react.default.createElement(NodeComponent, {
+    key: String(nodeIndex) + node.title,
+    className: "gallery-node",
+    title: node.title,
+    "aria-label": node.title,
+    "data-node-index": nodeIndex,
+    onPointerUp: useLightbox ? () => handlePointerUp(node) : undefined,
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_DynamicGallery.ImageContainer, {
+    className: "gallery-node-image"
+    // eslint-disable-next-line prefer-template
+    ,
+    minHeight: String(minHeight) + 'px'
+    // eslint-disable-next-line prefer-template
+    ,
+    maxHeight: String(maxHeight) + 'px'
+  }, /*#__PURE__*/_react.default.createElement(_Picture.default, {
+    image: node.image,
+    objectFit: "cover",
+    alt: node.title
+    // animate image in on load
+    ,
+    onLoad: event => {
+      event.target.closest('.gallery-node-image').querySelector('img').style.setProperty('opacity', '1');
+
+      // update tab order once the image has loaded
+      updateTabOrder();
+    }
+  })), /*#__PURE__*/_react.default.createElement(_DynamicGallery.Details, null, /*#__PURE__*/_react.default.createElement(_DynamicGallery.Title, null, node.title), node.caption && /*#__PURE__*/_react.default.createElement(_DynamicGallery.Caption, null, node.caption)))));
+}