@comicrelief/component-library 8.51.7 → 8.52.0

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

@@ -0,0 +1,107 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  max-width: ${({ maxWidth }) => maxWidth};
+  background: ${({ theme, pageBackgroundColour }) => theme.color(pageBackgroundColour)};
+  ${({ paddingTop, paddingBottom }) => css`padding: ${paddingTop} 2rem ${paddingBottom};`}
+  color: ${({ theme, textColour }) => theme.color(textColour)};
+`;
+
+export const ImageGrid = styled.div`
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    gap: 2rem;
+  }
+`;
+
+export const Column = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1.1rem;
+
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    gap: 2rem;
+  }
+`;
+
+export const EmptyMessage = styled.div`
+  display: ${({ isEmpty }) => (isEmpty ? 'block' : 'none')};
+`;
+
+const GalleryNodeBase = css`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  text-align: left;
+`;
+
+export const GalleryNode = styled.div`
+  ${GalleryNodeBase}
+`;
+
+export const InteractiveGalleryNode = styled.button`
+  ${GalleryNodeBase}
+  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);
+      }
+    }
+`;
+
+export const ImageContainer = styled.div`
+ display: flex;
+  height: auto;
+  width: 100%;
+  min-height: ${({ minHeight }) => minHeight};
+  max-height: ${({ maxHeight }) => maxHeight};
+  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;
+  }
+`;
+
+export const Details = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0 1rem;
+`;
+
+export const Title = styled.div`
+  &:first-child {
+    margin-bottom: 0;
+  }
+`;
+
+export const Caption = styled.div`
+  line-height: 1;
+`;

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

@@ -0,0 +1,34 @@
+import 'jest-styled-components';
+import React from 'react';
+import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
+import DynamicGallery from './DynamicGallery';
+
+it('renders an empty Dynamic Gallery with no options set', () => {
+  const galleryEl = renderWithTheme(<DynamicGallery />).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 = renderWithTheme(<DynamicGallery nodes={nodes} />).toJSON();
+  expect(galleryEl).toMatchSnapshot();
+});

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

@@ -0,0 +1,144 @@
+import { throttle } from 'lodash';
+import PropTypes from 'prop-types';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import Picture from '../../Atoms/Picture/Picture';
+import { LightboxContext } from './_Lightbox';
+import {
+  Caption,
+  Column,
+  Details,
+  GalleryNode,
+  ImageContainer,
+  InteractiveGalleryNode,
+  Title
+} from './DynamicGallery.style';
+import { GalleryNodeType } from './_types';
+
+/**
+ * a separate component to handle columns of images;
+ * this component handles aspect ratio calculations to enfore a min/max ratio for its images
+ */
+export default function DynamicGalleryColumn({
+  updateTabOrder,
+  nodes,
+  imageRatio,
+  columnIndex,
+  columnCount
+}) {
+  const [minHeight, setMinHeight] = useState();
+  const [maxHeight, setMaxHeight] = useState();
+  const elRef = useRef(null);
+
+  const updateMinMaxHeight = 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
+  useEffect(() => {
+    // when the column width changes, recalculate the min/max height for images
+    const handleResize = throttle(() => {
+      updateMinMaxHeight();
+    }, 500);
+
+    const resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(elRef.current);
+
+    // call once on initial mount
+    updateMinMaxHeight();
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [updateMinMaxHeight]);
+
+  const { useLightbox, setSelectedNode } = useContext(LightboxContext);
+
+  // on click, open the image in the lightbox;
+  // conditionally enabled depending on the gallery settings
+  function handlePointerUp(node) {
+    setSelectedNode(node);
+  }
+
+  const NodeComponent = useLightbox ? InteractiveGalleryNode : GalleryNode;
+
+  return (
+    <Column ref={elRef} className="gallery-column">
+      {nodes
+        ?.filter((_, nodeIndex) => nodeIndex % columnCount === columnIndex)
+        .map((node, nodeIndex) => (
+          <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}
+          >
+            <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'}
+            >
+              <Picture
+                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();
+                }}
+              />
+            </ImageContainer>
+            <Details>
+              <Title>{node.title}</Title>
+              {node.caption && <Caption>{node.caption}</Caption>}
+            </Details>
+          </NodeComponent>
+        ))}
+    </Column>
+  );
+}
+
+DynamicGalleryColumn.propTypes = {
+  nodes: PropTypes.arrayOf(GalleryNodeType),
+  imageRatio: PropTypes.oneOf(['dynamic', '4:3']),
+  columnIndex: PropTypes.number,
+  columnCount: PropTypes.number,
+  updateTabOrder: PropTypes.func
+};

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

@@ -0,0 +1,242 @@
+import React, {
+  useContext, useEffect, useRef, useState
+} from 'react';
+import PulseLoader from 'react-spinners/PulseLoader';
+import Arrow from '../../Atoms/Icons/Arrow';
+import Cross from '../../Atoms/Icons/Cross';
+import Picture from '../../Atoms/Picture/Picture';
+import {
+  Backdrop,
+  CloseButton,
+  Container,
+  Dialog,
+  LightboxContent,
+  LightboxDetails,
+  LightboxImage,
+  LightboxSpinner,
+  NextButton,
+  PreviousButton,
+  ScreenReaderOnly
+} from './_Lightbox.style';
+import ScrollFix from './_ScrollFix';
+
+/**
+ * lightbox context:
+ * - selectedNode: the node that is currently selected
+ * - setSelectedNode:  set the selected node
+ * - nextNode/previousNode: navigate to the next/previous node
+ */
+export const LightboxContext = React.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
+  } = useContext(LightboxContext);
+
+  const hasNode = Boolean(selectedNode);
+  const dialogRef = useRef(null);
+  const previousFocusRef = useRef(null);
+
+  /**
+  * handle keyboard events within the lightbox;
+  * - trapped focus between UI elements
+  * - navigation between images
+  * - closing the lightbox
+   */
+  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
+  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] = 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 (
+    <Container isOpen={hasNode}>
+      <Backdrop onPointerUp={() => handleBackdropClick()} />
+      <Dialog
+        ref={dialogRef}
+        aria-labelledby="lightboxTitle"
+        aria-describedby="lightboxDescription"
+      >
+        {hasNode && <ScrollFix />}
+        <LightboxContent>
+          <LightboxImage className="lightbox-image">
+            <LightboxSpinner>
+              <PulseLoader height={16} width={2} color="#E1E2E3" />
+            </LightboxSpinner>
+            {hasNode && (
+              <Picture
+                key={selectedNode?.image}
+                alt={selectedNode?.title}
+                image={selectedNode?.image}
+                width={imageDimensions.width}
+                height={imageDimensions.height}
+                objectFit="contain"
+                onLoad={event => onLoad(event)}
+              />
+            )}
+          </LightboxImage>
+          <LightboxDetails id="lightboxDescription" aria-live="polite" aria-atomic="true">
+            <div id="lightboxTitle">{selectedNode?.title}</div>
+            {selectedNode?.caption && (
+              <div>
+                {selectedNode?.caption}
+              </div>
+            )}
+            {selectedNode?.body && (
+              <div>
+                {selectedNode.body}
+              </div>
+            )}
+          </LightboxDetails>
+          <CloseButton type="button" onClick={() => setSelectedNode(null)}>
+            <ScreenReaderOnly>Close</ScreenReaderOnly>
+            <Cross colour="black" size={16} />
+          </CloseButton>
+          <PreviousButton type="button" onClick={() => previousNode(selectedNode)}>
+            <ScreenReaderOnly>Previous</ScreenReaderOnly>
+            <Arrow direction="left" colour="black" size={16} />
+          </PreviousButton>
+          <NextButton type="button" onClick={() => nextNode(selectedNode)}>
+            <ScreenReaderOnly>Next</ScreenReaderOnly>
+            <Arrow direction="right" colour="black" size={16} />
+          </NextButton>
+        </LightboxContent>
+      </Dialog>
+    </Container>
+  );
+};
+
+export default Lightbox;

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

@@ -0,0 +1,159 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2000;
+  visibility: ${({ isOpen }) => (isOpen ? 'visible' : 'hidden')};
+`;
+
+export const Backdrop = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 0;
+`;
+
+export const Dialog = styled.dialog`
+  display: block;
+  padding: 0.5rem;
+  background: transparent;
+  border: none;
+  z-index: 1;
+  margin-top: 72px;
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    margin-top: 84px;
+  }
+`;
+
+export const LightboxContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  position: relative;
+  padding: 1rem;
+  background: #ffffff;
+  border-radius: 1rem;
+`;
+
+export const LightboxImage = styled.div`
+  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;
+  }
+`;
+
+export const LightboxSpinner = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+export const LightboxDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0 1rem;
+`;
+
+export const NavButton = styled.button`
+  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: ${({ theme }) => theme.color('red')};
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color('red')};
+  }
+`;
+
+export const CloseButton = styled(NavButton)`
+  top: 0;
+  right: 0;
+`;
+
+export const PreviousButton = styled(NavButton)`
+  top: 30%;
+  left: 0;
+  transform: translate(0, -50%);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    position: fixed;
+    top: 50%;
+  }
+`;
+
+export const NextButton = styled(NavButton)`
+  top: 30%;
+  right: 0;
+  transform: translate(0, -50%);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    position: fixed;
+   top: 50%;
+  }
+`;
+
+export const ScreenReaderOnly = styled.span`
+  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;
+`;