@comicrelief/component-library 8.52.1 → 8.52.2

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

@@ -103,6 +103,7 @@ const DynamicGallery = _ref => {
 
   // handle selected gallery node
   const [selectedNode, setSelectedNode] = (0, _react.useState)(null);
+  const [focusedNode, setFocusedNode] = (0, _react.useState)(null);
 
   // handle next/previous node events from the lightbox
   function handleNextNode(node) {
@@ -128,6 +129,8 @@ const DynamicGallery = _ref => {
             const nodeIndex = +event.target.dataset.nodeIndex;
             if (Number.isNaN(nodeIndex)) return;
             setSelectedNode(nodes[nodeIndex]);
+            // also store the focused node for focus restoration when the lightbox closes
+            setFocusedNode(event.target.closest('.gallery-node'));
           }
           break;
         }
@@ -190,7 +193,9 @@ const DynamicGallery = _ref => {
       selectedNode,
       setSelectedNode,
       nextNode: handleNextNode,
-      previousNode: handlePreviousNode
+      previousNode: handlePreviousNode,
+      focusedNode,
+      setFocusedNode
     }
   }, /*#__PURE__*/_react.default.createElement(_DynamicGallery.ImageGrid, {
     className: "gallery-grid",
@@ -205,7 +210,8 @@ const DynamicGallery = _ref => {
     columnCount: columnCount,
     nodes: nodes.slice(0, imageCount),
     imageRatio: imageRatio,
-    updateTabOrder: throttledUpdateTabOrder.current
+    updateTabOrder: throttledUpdateTabOrder.current,
+    focusOutlineColour: textColour
   })), /*#__PURE__*/_react.default.createElement(_DynamicGallery.EmptyMessage, {
     isEmpty: !hasNodes
   }, "No images to display")), /*#__PURE__*/_react.default.createElement(_Lightbox.default, null), /*#__PURE__*/_react.default.createElement("div", {
@@ -213,6 +219,6 @@ const DynamicGallery = _ref => {
     tabIndex: 0
   })), imageCount < nodes.length && /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => handleLoadMore()
-  }, "Load more"));
+  }, "Show more"));
 };
 var _default = exports.default = DynamicGallery;

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

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 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;
+exports.InteractiveGalleryNode = exports.ImageGrid = exports.ImageContainer = exports.GalleryNode = exports.EmptyMessage = exports.Details = exports.Container = exports.Column = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "DynamicGallerystyle__Container",
@@ -60,7 +60,12 @@ const EmptyMessage = exports.EmptyMessage = _styledComponents.default.div.withCo
   } = _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 GalleryNodeBase = (0, _styledComponents.css)(["display:flex;flex-direction:column;gap:0.9rem;padding:0;margin:0;background:none;border:none;text-align:left;&:focus-visible{outline:2px solid ", ";outline-offset:0.5rem;border-radius:1rem;}"], _ref8 => {
+  let {
+    focusOutlineColour
+  } = _ref8;
+  return focusOutlineColour;
+});
 const GalleryNode = exports.GalleryNode = _styledComponents.default.div.withConfig({
   displayName: "DynamicGallerystyle__GalleryNode",
   componentId: "sc-1kgt7yr-4"
@@ -68,30 +73,22 @@ const GalleryNode = exports.GalleryNode = _styledComponents.default.div.withConf
 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);
+})(["", " cursor:pointer;color:inherit;& div:first-child{transition:all 0.1s ease-out;}& > 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 => {
+})(["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;}"], _ref9 => {
   let {
     minHeight
-  } = _ref8;
+  } = _ref9;
   return minHeight;
-}, _ref9 => {
+}, _ref10 => {
   let {
     maxHeight
-  } = _ref9;
+  } = _ref10;
   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;"]);
+})(["display:flex;flex-direction:column;gap:0.5rem;padding:0 1rem;"]);

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

@@ -12,12 +12,14 @@ var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Lightbox = require("./_Lightbox");
 var _DynamicGallery = require("./DynamicGallery.style");
 var _types = require("./_types");
+var _utils = require("./_utils");
 /**
  * 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 {
+    focusOutlineColour,
     updateTabOrder,
     nodes,
     imageRatio,
@@ -79,33 +81,40 @@ function DynamicGalleryColumn(_ref) {
   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');
+  }, nodes === null || nodes === void 0 ? void 0 : nodes.filter((_, nodeIndex) => nodeIndex % columnCount === columnIndex).map((node, nodeIndex) => {
+    const bodyText = (0, _utils.extractNodeText)(node.gridBody);
+    const key = String(nodeIndex) + bodyText;
+    return /*#__PURE__*/_react.default.createElement(NodeComponent, {
+      key: key,
+      className: "gallery-node",
+      caption: bodyText,
+      "aria-label": bodyText,
+      title: bodyText,
+      "data-node-index": nodeIndex,
+      focusOutlineColour: focusOutlineColour,
+      onPointerUp: useLightbox ? () => handlePointerUp(node) : undefined,
+      tabIndex: 0
+    }, /*#__PURE__*/_react.default.createElement(_DynamicGallery.ImageContainer, {
+      className: "gallery-node-image"
+      // eslint prefers template literals for strings, but they break the compiler
+      // 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: bodyText
+      // 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)))));
+        // update tab order once the image has loaded
+        updateTabOrder();
+      }
+    })), /*#__PURE__*/_react.default.createElement(_DynamicGallery.Details, null, node.gridBody && /*#__PURE__*/_react.default.createElement("div", null, node.gridBody), node.gridCaption && /*#__PURE__*/_react.default.createElement("div", null, node.gridCaption)));
+  }));
 }

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

@@ -13,6 +13,7 @@ var _Cross = _interopRequireDefault(require("../../Atoms/Icons/Cross"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Lightbox = require("./_Lightbox.style");
 var _ScrollFix = _interopRequireDefault(require("./_ScrollFix"));
+var _utils = require("./_utils");
 /**
  * lightbox context:
  * - selectedNode: the node that is currently selected
@@ -44,11 +45,12 @@ const Lightbox = () => {
     selectedNode,
     setSelectedNode,
     nextNode,
-    previousNode
+    previousNode,
+    focusedNode,
+    setFocusedNode
   } = (0, _react.useContext)(LightboxContext);
   const hasNode = Boolean(selectedNode);
   const dialogRef = (0, _react.useRef)(null);
-  const previousFocusRef = (0, _react.useRef)(null);
 
   /**
   * handle keyboard events within the lightbox;
@@ -104,27 +106,20 @@ const Lightbox = () => {
 
   // handle focus management when dialog opens/closes
   (0, _react.useEffect)(() => {
-    // when the lightbox is opened, store the previously focused element
-    // and move focus to the first focusable element in the dialog
     if (hasNode) {
-      // store the previously focused element
-      previousFocusRef.current = document.activeElement;
-      // move focus to the first focusable element in the dialog
+      // move focus to the first focusable element in the dialog when it opens
       setTimeout(() => {
         const focusableElements = getFocusableElements(dialogRef.current);
         if (focusableElements.length > 0) {
           focusableElements[0].focus();
         }
       }, 0);
-      return;
+    } else {
+      // restore focus to the previously focused element when lightbox closes
+      focusedNode === null || focusedNode === void 0 ? void 0 : focusedNode.focus();
+      setFocusedNode(null);
     }
-
-    // when the lightbox is closed, restore focus to the previously focused element
-    if (previousFocusRef.current && typeof previousFocusRef.current.focus === 'function') {
-      previousFocusRef.current.focus();
-      previousFocusRef.current = null;
-    }
-  }, [hasNode]);
+  }, [hasNode, focusedNode, setFocusedNode]);
 
   /**
    * close the lightbox when the backdrop is clicked
@@ -165,6 +160,7 @@ const Lightbox = () => {
     });
     target.style.opacity = '1';
   }
+  const bodyText = (0, _utils.extractNodeText)(selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.lightboxBody);
   return /*#__PURE__*/_react.default.createElement(_Lightbox.Container, {
     isOpen: hasNode
   }, /*#__PURE__*/_react.default.createElement(_Lightbox.Backdrop, {
@@ -181,7 +177,7 @@ const Lightbox = () => {
     color: "#E1E2E3"
   })), hasNode && /*#__PURE__*/_react.default.createElement(_Picture.default, {
     key: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.image,
-    alt: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.title,
+    alt: bodyText,
     image: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.image,
     width: imageDimensions.width,
     height: imageDimensions.height,
@@ -191,9 +187,9 @@ const Lightbox = () => {
     id: "lightboxDescription",
     "aria-live": "polite",
     "aria-atomic": "true"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.lightboxBody) && /*#__PURE__*/_react.default.createElement("div", {
     id: "lightboxTitle"
-  }, selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.title), (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.caption) && /*#__PURE__*/_react.default.createElement("div", null, selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.caption), (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.body) && /*#__PURE__*/_react.default.createElement("div", null, selectedNode.body)), /*#__PURE__*/_react.default.createElement(_Lightbox.CloseButton, {
+  }, selectedNode.lightboxBody), (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.lightboxCaption) && /*#__PURE__*/_react.default.createElement("div", null, selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.lightboxCaption)), /*#__PURE__*/_react.default.createElement(_Lightbox.CloseButton, {
     type: "button",
     onClick: () => setSelectedNode(null)
   }, /*#__PURE__*/_react.default.createElement(_Lightbox.ScreenReaderOnly, null, "Close"), /*#__PURE__*/_react.default.createElement(_Cross.default, {