@comicrelief/component-library 8.51.8 → 8.52.1

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

@@ -0,0 +1,218 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LightboxContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _PulseLoader = _interopRequireDefault(require("react-spinners/PulseLoader"));
+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 _ScrollFix = _interopRequireDefault(require("./_ScrollFix"));
+/**
+ * lightbox context:
+ * - selectedNode: the node that is currently selected
+ * - setSelectedNode:  set the selected node
+ * - nextNode/previousNode: navigate to the next/previous node
+ */
+const LightboxContext = exports.LightboxContext = /*#__PURE__*/_react.default.createContext(null);
+
+// get all focusable elements within the dialog
+function getFocusableElements(element) {
+  if (!(element instanceof Element)) return [];
+  const focusableSelectors = ['button:not([disabled])', '[href]', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', '[tabindex]:not([tabindex="-1"])'].join(', ');
+  return Array.from(element.querySelectorAll(focusableSelectors));
+}
+
+/**
+ * the Lightbox component is a modal that displays a single image,
+ * along with UI to navigate through the gallery
+ * .
+ * accessibility features like tabbing and focus management are currently implemented here;
+ * a better long-term approach would be to use an established modal/dialog library,
+ * but to avoid friction with the build process we've gone custom for now
+ * .
+ * TODO: hide the main window scroll bar in a nicer way, see:
+ * https://www.npmjs.com/package/react-remove-scroll
+ */
+const Lightbox = () => {
+  const {
+    selectedNode,
+    setSelectedNode,
+    nextNode,
+    previousNode
+  } = (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;
+  * - trapped focus between UI elements
+  * - navigation between images
+  * - closing the lightbox
+   */
+  (0, _react.useEffect)(() => {
+    // trap focus within the dialog
+    function handleTabKey(event) {
+      if (!hasNode) return;
+      const focusableElements = getFocusableElements(dialogRef.current);
+      if (focusableElements.length === 0) return;
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      const currentElement = document.activeElement;
+
+      // if shift+tab is pressed and we're on the first element, move to the last
+      if (event.shiftKey && currentElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && currentElement === lastElement) {
+        // if tab is pressed and we're on the last element, move to the first
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+    function handleKeyDown(event) {
+      switch (event.key) {
+        case 'Escape':
+          setSelectedNode(null);
+          break;
+        case 'Tab':
+          handleTabKey(event);
+          break;
+        case 'ArrowLeft':
+          previousNode(selectedNode);
+          break;
+        case 'ArrowRight':
+          nextNode(selectedNode);
+          break;
+        default:
+          break;
+      }
+    }
+    if (hasNode) {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [hasNode, selectedNode, setSelectedNode, previousNode, nextNode]);
+
+  // 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
+      setTimeout(() => {
+        const focusableElements = getFocusableElements(dialogRef.current);
+        if (focusableElements.length > 0) {
+          focusableElements[0].focus();
+        }
+      }, 0);
+      return;
+    }
+
+    // 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]);
+
+  /**
+   * close the lightbox when the backdrop is clicked
+   */
+  function handleBackdropClick() {
+    setSelectedNode(null);
+  }
+
+  // handle transitions between images nicely;
+  const [imageDimensions, setImageDimensions] = (0, _react.useState)({
+    width: '0px',
+    height: '0px'
+  });
+
+  /**
+   * when the image loads, check to see how best we can fit it on screen,
+   * then set width and height on the element;
+   * this lets us transition nicely to the new size
+   */
+  function onLoad(event) {
+    const {
+      target
+    } = event;
+    const imageWidth = target.naturalWidth;
+    const imageHeight = target.naturalHeight;
+    const maxWidth = Math.min.apply(null, [imageWidth, 1024, window.innerWidth * 0.85]);
+    const maxHeight = Math.min.apply(null, [imageHeight, 1024, window.innerHeight * 0.5]);
+    const scaleX = maxWidth / imageWidth;
+    const scaleY = maxHeight / imageHeight;
+    const scale = Math.min(scaleX, scaleY);
+    const width = imageWidth * scale;
+    const height = imageHeight * scale;
+
+    // set the width and height on the image element, and make it visible
+    setImageDimensions({
+      width: `${width}px`,
+      height: `${height}px`
+    });
+    target.style.opacity = '1';
+  }
+  return /*#__PURE__*/_react.default.createElement(_Lightbox.Container, {
+    isOpen: hasNode
+  }, /*#__PURE__*/_react.default.createElement(_Lightbox.Backdrop, {
+    onPointerUp: () => handleBackdropClick()
+  }), /*#__PURE__*/_react.default.createElement(_Lightbox.Dialog, {
+    ref: dialogRef,
+    "aria-labelledby": "lightboxTitle",
+    "aria-describedby": "lightboxDescription"
+  }, hasNode && /*#__PURE__*/_react.default.createElement(_ScrollFix.default, null), /*#__PURE__*/_react.default.createElement(_Lightbox.LightboxContent, null, /*#__PURE__*/_react.default.createElement(_Lightbox.LightboxImage, {
+    className: "lightbox-image"
+  }, /*#__PURE__*/_react.default.createElement(_Lightbox.LightboxSpinner, null, /*#__PURE__*/_react.default.createElement(_PulseLoader.default, {
+    height: 16,
+    width: 2,
+    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,
+    image: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.image,
+    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"
+  }, /*#__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, {
+    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, {
+    type: "button",
+    onClick: () => previousNode(selectedNode)
+  }, /*#__PURE__*/_react.default.createElement(_Lightbox.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, {
+    direction: "right",
+    colour: "black",
+    size: 16
+  })))));
+};
+var _default = exports.default = Lightbox;

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

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+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;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const Container = exports.Container = _styledComponents.default.div.withConfig({
+  displayName: "_Lightboxstyle__Container",
+  componentId: "sc-twdy7x-0"
+})(["position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:2000;visibility:", ";"], _ref => {
+  let {
+    isOpen
+  } = _ref;
+  return isOpen ? 'visible' : 'hidden';
+});
+const Backdrop = exports.Backdrop = _styledComponents.default.div.withConfig({
+  displayName: "_Lightboxstyle__Backdrop",
+  componentId: "sc-twdy7x-1"
+})(["position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:0;"]);
+const Dialog = exports.Dialog = _styledComponents.default.dialog.withConfig({
+  displayName: "_Lightboxstyle__Dialog",
+  componentId: "sc-twdy7x-2"
+})(["display:block;padding:0.5rem;background:transparent;border:none;z-index:1;margin-top:72px;@media ", "{margin-top:84px;}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.breakpoints2026('L');
+});
+const LightboxContent = exports.LightboxContent = _styledComponents.default.div.withConfig({
+  displayName: "_Lightboxstyle__LightboxContent",
+  componentId: "sc-twdy7x-3"
+})(["display:flex;flex-direction:column;align-items:center;gap:1rem;position:relative;padding:1rem;background:#ffffff;border-radius:1rem;"]);
+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;}"]);
+const LightboxSpinner = exports.LightboxSpinner = _styledComponents.default.div.withConfig({
+  displayName: "_Lightboxstyle__LightboxSpinner",
+  componentId: "sc-twdy7x-5"
+})(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]);
+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;"]);
+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 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.color('red');
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.color('red');
+});
+const CloseButton = exports.CloseButton = (0, _styledComponents.default)(NavButton).withConfig({
+  displayName: "_Lightboxstyle__CloseButton",
+  componentId: "sc-twdy7x-8"
+})(["top:0;right:0;"]);
+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 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.breakpoints2026('L');
+});
+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 => {
+  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;"]);

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

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ScrollFix;
+var _react = require("react");
+let scrollPadding;
+
+/**
+ * small utility component that allows us to lock the main window scrolling,
+ * while also avoiding flicker/judder as the scrollbar is added and removed from the DOM.
+ * used in the Lightbox component to ensure the scrollbar is hidden when the lightbox is open.
+ */
+function ScrollFix() {
+  // create a DOM element with a known width and a scrollbar,
+  // then measure an inner element to find the missing width taken up by the scrollbar
+  if (scrollPadding === undefined) {
+    const container = document.createElement('div');
+    container.className = 'scroll-fix-container';
+    container.style.setProperty('position', 'absolute');
+    container.style.setProperty('top', '0');
+    container.style.setProperty('left', '-9999px');
+    container.style.setProperty('width', '100px');
+    container.style.setProperty('height', '100px');
+    container.style.setProperty('overflow-y', 'scroll');
+    const inner = document.createElement('div');
+    inner.style.setProperty('width', '100%');
+    container.appendChild(inner);
+    // edge needs the element to be in the DOM to measure the scrollbar width
+    document.body.appendChild(container);
+    scrollPadding = 100 - inner.getBoundingClientRect().width;
+    // remove the element from the DOM
+    document.body.removeChild(container);
+  }
+
+  // when the component mounts, add a padding to the document to compensate for the scrollbar;
+  // this is then removed when the component unmounts
+  (0, _react.useLayoutEffect)(() => {
+    function resetScrollbar() {
+      document.documentElement.style.setProperty('overflow', 'auto');
+      document.documentElement.style.setProperty('padding-right', '0px');
+    }
+
+    // check that the page content is longer than the viewport
+    if (document.documentElement.scrollHeight <= window.innerHeight) {
+      resetScrollbar();
+    } else {
+      document.documentElement.style.setProperty('overflow', 'hidden');
+      document.documentElement.style.setProperty('padding-right', `${scrollPadding}px`);
+    }
+    return () => {
+      resetScrollbar();
+    };
+  }, []);
+  return null;
+}