@comicrelief/component-library 8.53.2 → 8.54.0

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

@@ -4,12 +4,12 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InteractiveGalleryNode = exports.ImageGrid = exports.ImageContainer = exports.GalleryNode = exports.EmptyMessage = exports.Details = exports.Container = exports.Column = void 0;
+exports.ScreenReaderOnly = exports.InteractiveGalleryNode = exports.ImageGrid = exports.ImageContainer = exports.GalleryNode = exports.FocusTrap = 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",
   componentId: "sc-1kgt7yr-0"
-})(["display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:", ";background:", ";", " color:", ";"], _ref => {
+})(["display:flex;flex-direction:column;align-items:center;gap:1rem;position:relative;max-width:", ";background:", ";padding:", ";color:", ";@media ", "{gap:1rem;}"], _ref => {
   let {
     maxWidth
   } = _ref;
@@ -25,45 +25,50 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
     paddingTop,
     paddingBottom
   } = _ref3;
-  return (0, _styledComponents.css)(["padding:", " 2rem ", ";"], paddingTop, paddingBottom);
+  return `${paddingTop} 1rem ${paddingBottom}`;
 }, _ref4 => {
   let {
     theme,
     textColour
   } = _ref4;
   return theme.color(textColour);
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.breakpoints2026('M');
 });
 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 => {
+})(["display:flex;gap:1rem;width:100%;@media ", "{gap:2rem;}"], _ref6 => {
   let {
     theme
-  } = _ref5;
+  } = _ref6;
   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 => {
+})(["flex:1;display:flex;flex-direction:column;gap:1.1rem;@media ", "{gap:2rem;}"], _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.breakpoints2026('M');
 });
 const EmptyMessage = exports.EmptyMessage = _styledComponents.default.div.withConfig({
   displayName: "DynamicGallerystyle__EmptyMessage",
   componentId: "sc-1kgt7yr-3"
-})(["display:", ";"], _ref7 => {
+})(["display:", ";"], _ref8 => {
   let {
     isEmpty
-  } = _ref7;
+  } = _ref8;
   return isEmpty ? 'block' : 'none';
 });
-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 => {
+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;}"], _ref9 => {
   let {
     focusOutlineColour
-  } = _ref8;
+  } = _ref9;
   return focusOutlineColour;
 });
 const GalleryNode = exports.GalleryNode = _styledComponents.default.div.withConfig({
@@ -77,18 +82,26 @@ const InteractiveGalleryNode = exports.InteractiveGalleryNode = _styledComponent
 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;}"], _ref9 => {
+})(["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;}"], _ref10 => {
   let {
     minHeight
-  } = _ref9;
+  } = _ref10;
   return minHeight;
-}, _ref10 => {
+}, _ref11 => {
   let {
     maxHeight
-  } = _ref10;
+  } = _ref11;
   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;"]);
+})(["display:flex;flex-direction:column;gap:0.5rem;padding:0 1rem;"]);
+const ScreenReaderOnly = exports.ScreenReaderOnly = _styledComponents.default.span.withConfig({
+  displayName: "DynamicGallerystyle__ScreenReaderOnly",
+  componentId: "sc-1kgt7yr-8"
+})(["position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden;"]);
+const FocusTrap = exports.FocusTrap = (0, _styledComponents.default)(ScreenReaderOnly).withConfig({
+  displayName: "DynamicGallerystyle__FocusTrap",
+  componentId: "sc-1kgt7yr-9"
+})(["bottom:0;"]);

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

@@ -81,9 +81,15 @@ 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) => {
+  }, nodes.map((node, nodeIndex) => {
+    // only render nodes that are in the current column;
+    // this lets us assign a unique index to each node
+    const columnNodeIndex = nodeIndex % columnCount;
+    if (columnNodeIndex !== columnIndex) return null;
     const bodyText = (0, _utils.extractNodeText)(node.gridBody);
-    const key = String(nodeIndex) + bodyText;
+    // eslint prefers template literals for strings, but they break the compiler
+    // eslint-disable-next-line prefer-template
+    const key = String(nodeIndex) + ':' + bodyText + ':' + node.image;
     return /*#__PURE__*/_react.default.createElement(NodeComponent, {
       key: key,
       className: "gallery-node",
@@ -96,7 +102,6 @@ function DynamicGalleryColumn(_ref) {
       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'

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

@@ -12,6 +12,7 @@ var _Arrow = _interopRequireDefault(require("../../Atoms/Icons/Arrow"));
 var _Cross = _interopRequireDefault(require("../../Atoms/Icons/Cross"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Lightbox = require("./_Lightbox.style");
+var _DynamicGallery = require("./DynamicGallery.style");
 var _ScrollFix = _interopRequireDefault(require("./_ScrollFix"));
 var _utils = require("./_utils");
 /**
@@ -52,6 +53,19 @@ const Lightbox = () => {
   const hasNode = Boolean(selectedNode);
   const dialogRef = (0, _react.useRef)(null);
 
+  // handle interaction type
+  const interactionTypeRef = (0, _react.useRef)('keyboard');
+  (0, _react.useEffect)(() => {
+    function handlePointerDown() {
+      interactionTypeRef.current = 'pointer';
+      document.removeEventListener('pointerdown', handlePointerDown);
+    }
+    document.addEventListener('pointerdown', handlePointerDown);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+    };
+  }, []);
+
   /**
   * handle keyboard events within the lightbox;
   * - trapped focus between UI elements
@@ -107,13 +121,15 @@ const Lightbox = () => {
   // handle focus management when dialog opens/closes
   (0, _react.useEffect)(() => {
     if (hasNode) {
-      // 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();
+      // when the lightbox opens, optionally focus the close button,
+      // but only if the user is interacting via the keyboard;
+      // we check interaction type because although focus-visible should handle this,
+      // Safari on iOS always shows the focus ring
+      requestAnimationFrame(() => {
+        if (interactionTypeRef.current === 'keyboard') {
+          dialogRef.current.querySelector('.close-button').focus();
         }
-      }, 0);
+      });
     } else {
       // restore focus to the previously focused element when lightbox closes
       focusedNode === null || focusedNode === void 0 ? void 0 : focusedNode.focus();
@@ -150,8 +166,8 @@ const Lightbox = () => {
     const scaleX = maxWidth / imageWidth;
     const scaleY = maxHeight / imageHeight;
     const scale = Math.min(scaleX, scaleY);
-    const width = imageWidth * scale;
-    const height = imageHeight * scale;
+    const width = Math.round(imageWidth * scale);
+    const height = Math.round(imageHeight * scale);
 
     // set the width and height on the image element, and make it visible
     setImageDimensions({
@@ -182,33 +198,38 @@ const Lightbox = () => {
     width: imageDimensions.width,
     height: imageDimensions.height,
     objectFit: "contain",
-    onLoad: event => onLoad(event)
-  })), /*#__PURE__*/_react.default.createElement(_Lightbox.LightboxDetails, {
-    id: "lightboxDescription",
-    "aria-live": "polite",
-    "aria-atomic": "true"
-  }, (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.lightboxBody) && /*#__PURE__*/_react.default.createElement("div", {
-    id: "lightboxTitle"
-  }, 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, {
-    colour: "black",
-    size: 16
-  })), /*#__PURE__*/_react.default.createElement(_Lightbox.PreviousButton, {
+    onLoad: event => onLoad(event),
+    style: {
+      borderRadius: '0.6rem',
+      overflow: 'hidden'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Lightbox.PreviousButton, {
     type: "button",
     onClick: () => previousNode(selectedNode)
-  }, /*#__PURE__*/_react.default.createElement(_Lightbox.ScreenReaderOnly, null, "Previous"), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
+  }, /*#__PURE__*/_react.default.createElement(_DynamicGallery.ScreenReaderOnly, null, "Previous"), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
     direction: "left",
     colour: "black",
     size: 16
   })), /*#__PURE__*/_react.default.createElement(_Lightbox.NextButton, {
     type: "button",
     onClick: () => nextNode(selectedNode)
-  }, /*#__PURE__*/_react.default.createElement(_Lightbox.ScreenReaderOnly, null, "Next"), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
+  }, /*#__PURE__*/_react.default.createElement(_DynamicGallery.ScreenReaderOnly, null, "Next"), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
     direction: "right",
     colour: "black",
     size: 16
+  }))), /*#__PURE__*/_react.default.createElement(_Lightbox.LightboxDetails, {
+    id: "lightboxDescription",
+    "aria-live": "polite",
+    "aria-atomic": "true"
+  }, (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.lightboxBody) && /*#__PURE__*/_react.default.createElement("div", {
+    id: "lightboxTitle"
+  }, 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, {
+    className: "close-button",
+    type: "button",
+    onClick: () => setSelectedNode(null)
+  }, /*#__PURE__*/_react.default.createElement(_DynamicGallery.ScreenReaderOnly, null, "Close"), /*#__PURE__*/_react.default.createElement(_Cross.default, {
+    colour: "black",
+    size: 16
   })))));
 };
 var _default = exports.default = Lightbox;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ScreenReaderOnly = exports.PreviousButton = exports.NextButton = exports.NavButton = exports.LightboxSpinner = exports.LightboxImage = exports.LightboxDetails = exports.LightboxContent = exports.Dialog = exports.Container = exports.CloseButton = exports.Backdrop = void 0;
+exports.PreviousButton = exports.NextButton = exports.NavButton = exports.LightboxSpinner = exports.LightboxImage = exports.LightboxDetails = exports.LightboxContent = exports.Dialog = exports.Container = exports.CloseButton = exports.Backdrop = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "_Lightboxstyle__Container",
@@ -35,7 +35,7 @@ const LightboxContent = exports.LightboxContent = _styledComponents.default.div.
 const LightboxImage = exports.LightboxImage = _styledComponents.default.div.withConfig({
   displayName: "_Lightboxstyle__LightboxImage",
   componentId: "sc-twdy7x-4"
-})(["position:relative;display:flex;align-items:center;justify-content:center;min-width:128px;min-height:32px;border-radius:0.6rem;overflow:hidden;& > div{display:flex;align-items:center;justify-content:center;transition:width 0.3s ease-in-out,height 0.3s ease-in-out;}& img{opacity:0;transition:opacity 0.1s ease-out 0.3s;}"]);
+})(["position:relative;display:flex;align-items:center;justify-content:center;min-width:128px;min-height:32px;width:100%;& > div{display:flex;align-items:center;justify-content:center;transition:width 0.3s ease-in-out,height 0.3s ease-in-out;}& img{opacity:0;transition:opacity 0.1s ease-out 0.3s;}"]);
 const LightboxSpinner = exports.LightboxSpinner = _styledComponents.default.div.withConfig({
   displayName: "_Lightboxstyle__LightboxSpinner",
   componentId: "sc-twdy7x-5"
@@ -43,11 +43,11 @@ const LightboxSpinner = exports.LightboxSpinner = _styledComponents.default.div.
 const LightboxDetails = exports.LightboxDetails = _styledComponents.default.div.withConfig({
   displayName: "_Lightboxstyle__LightboxDetails",
   componentId: "sc-twdy7x-6"
-})(["display:flex;flex-direction:column;align-items:stretch;gap:0.5rem;width:100%;padding:0 1rem;"]);
+})(["display:flex;flex-direction:column;align-items:stretch;gap:0.5rem;width:100%;max-width:1024px;padding:0 1rem;"]);
 const NavButton = exports.NavButton = _styledComponents.default.button.withConfig({
   displayName: "_Lightboxstyle__NavButton",
   componentId: "sc-twdy7x-7"
-})(["position:absolute;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:0.5rem;border:none;background-color:white;cursor:pointer;z-index:10;svg{transition:all 0.1s ease-out;}&:hover{svg{fill:", ";}}&:focus-visible{outline:2px solid ", ";}"], _ref3 => {
+})(["position:absolute;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:0.5rem;border:none;background-color:white;cursor:pointer;z-index:10;svg{transition:fill 0.1s ease-out;}@media (hover:hover){&:hover{svg{fill:", ";}}}:focus-visible{outline:2px solid ", ";}"], _ref3 => {
   let {
     theme
   } = _ref3;
@@ -65,7 +65,7 @@ const CloseButton = exports.CloseButton = (0, _styledComponents.default)(NavButt
 const PreviousButton = exports.PreviousButton = (0, _styledComponents.default)(NavButton).withConfig({
   displayName: "_Lightboxstyle__PreviousButton",
   componentId: "sc-twdy7x-9"
-})(["top:30%;left:0;transform:translate(0,-50%);border-top-left-radius:0;border-bottom-left-radius:0;@media ", "{position:fixed;top:50%;}"], _ref5 => {
+})(["top:50%;left:0;transform:translate(-1rem,-50%);@media ", "{position:fixed;transform:translate(1rem,-50%);top:50%;}"], _ref5 => {
   let {
     theme
   } = _ref5;
@@ -74,13 +74,9 @@ const PreviousButton = exports.PreviousButton = (0, _styledComponents.default)(N
 const NextButton = exports.NextButton = (0, _styledComponents.default)(NavButton).withConfig({
   displayName: "_Lightboxstyle__NextButton",
   componentId: "sc-twdy7x-10"
-})(["top:30%;right:0;transform:translate(0,-50%);border-top-right-radius:0;border-bottom-right-radius:0;@media ", "{position:fixed;top:50%;}"], _ref6 => {
+})(["top:50%;right:0;transform:translate(1rem,-50%);@media ", "{position:fixed;transform:translate(-1rem,-50%);top:50%;}"], _ref6 => {
   let {
     theme
   } = _ref6;
   return theme.breakpoints2026('L');
-});
-const ScreenReaderOnly = exports.ScreenReaderOnly = _styledComponents.default.span.withConfig({
-  displayName: "_Lightboxstyle__ScreenReaderOnly",
-  componentId: "sc-twdy7x-11"
-})(["position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden;"]);
+});