@comicrelief/component-library 8.53.2 → 8.53.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.53.2",
+  "version": "8.53.3",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/playwright/components/organisms/dynamicGallery.spec.js

@@ -1,9 +1,230 @@
 const { test, expect } = require('@playwright/test');
 
+function hexToRgb(hex) {
+  // Remove the '#' if it's included in the input
+  const hexValue = hex.replace(/^#/, '');
+
+  // Parse the hex values into separate R, G, and B values
+  const red = parseInt(hexValue.substring(0, 2), 16);
+  const green = parseInt(hexValue.substring(2, 4), 16);
+  const blue = parseInt(hexValue.substring(4, 6), 16);
+
+  return `rgb(${red}, ${green}, ${blue})`;
+}
+
 test.describe('dynamic gallery component', () => {
-  test('dynamic gallery', async ({ page }) => {
+  test('smoke test', async ({ page }) => {
     await page.goto('/#dynamicgallery');
 
     await page.close();
   });
+
+  test('gallery column props', async ({ page }) => {
+    await page.goto('/#!/DynamicGallery/5');
+
+    // expect three gallery columns
+    await expect(page.locator('.gallery-column')).toHaveCount(4);
+
+    await page.close();
+  });
+
+  test('responsive gallery columns', async ({ page }) => {
+    await page.goto('/#!/DynamicGallery/3');
+
+    // expect three gallery columns
+    await expect(page.locator('.gallery-column')).toHaveCount(3);
+
+    // resize the page to a small width
+    await page.setViewportSize({ width: 700, height: 1000 });
+
+    // expect one gallery column
+    await expect(page.locator('.gallery-column')).toHaveCount(2);
+
+    // resize the page to a medium width
+    await page.setViewportSize({ width: 320, height: 1000 });
+
+    // expect one gallery column
+    await expect(page.locator('.gallery-column')).toHaveCount(1);
+
+    await page.close();
+  });
+
+  test('chunk mode test', async ({ page }) => {
+    await page.goto('/#!/DynamicGallery/3');
+
+    // expect 25 images to be visible
+    await expect(page.locator('.gallery-node')).toHaveCount(25);
+
+    // find the "load more" button and click it
+    await page.locator('button:has-text("Show more")').click();
+
+    // expect 50 images to be visible
+    await expect(page.locator('.gallery-node')).toHaveCount(50);
+
+    // expect the "load more" button to be hidden
+    await expect(page.locator('button:has-text("Show more")')).toBeHidden();
+
+    await page.close();
+  });
+
+  test('non-chunk mode test', async ({ page }) => {
+    await page.goto('/#!/DynamicGallery/5');
+
+    // expect all 30 images to be visible
+    await expect(page.locator('.gallery-node')).toHaveCount(30);
+
+    // expect the "load more" button to be hidden
+    await expect(page.locator('button:has-text("Show more")')).toBeHidden();
+
+    await page.close();
+  });
+
+  test('gallery tabbing', async ({ page }) => {
+    await page.goto('/#!/DynamicGallery/3');
+
+    // focus the first gallery node
+    await page.locator('.gallery-node').first().focus();
+
+    await page.waitForTimeout(3000);
+
+    // first tab should focus the first node in the first column
+    const firstNode = page.locator('.gallery-column').first().locator('.gallery-node').first();
+    await firstNode.focus();
+    await expect(firstNode).toBeFocused();
+
+    // tab to the first node in the second column
+    await page.keyboard.press('Tab');
+    const secondNode = page.locator('.gallery-column').nth(1).locator('.gallery-node').first();
+    await expect(secondNode).toBeFocused();
+
+    // tab back to the first node in the first column
+    await page.keyboard.press('Shift+Tab');
+    await expect(firstNode).toBeFocused();
+
+    await page.close();
+  });
+
+  test('gallery tabbing should allow tabbing out of the gallery', async ({ page }) => {
+    await page.goto('/#!/DynamicGallery/5');
+
+    await page.waitForTimeout(3000);
+
+    // focus the first gallery node
+    const galleryNodes = await page.locator('.gallery-node').all();
+    await page.locator(`[data-node-index="${galleryNodes.length - 1}"]`).focus();
+
+    // press tab
+    await page.keyboard.press('Tab');
+    const galleryContainer = page.locator('.gallery-container');
+
+    // asset that the focus has moved outside the gallery
+    expect(
+      await galleryContainer.evaluate(
+        el => !el.contains(document.activeElement)
+      )
+    ).toBe(true);
+    await page.close();
+  });
+
+  test('custom page background and text colour', async ({ page }) => {
+    await page.goto('/#!/DynamicGallery/5');
+
+    const galleryContainer = page.locator('.gallery-container');
+
+    const backgroundColor = await galleryContainer.evaluate(el => window.getComputedStyle(el).getPropertyValue('background-color'));
+    expect(backgroundColor).toBe(hexToRgb('#0565D1'));
+
+    const textColor = await galleryContainer.evaluate(el => window.getComputedStyle(el).getPropertyValue('color'));
+    expect(textColor).toBe(hexToRgb('#FFFFFF'));
+
+    await page.close();
+  });
+
+  test('check lightbox mode', async ({ page }) => {
+    await page.goto('/#!/DynamicGallery/3');
+
+    // find the first gallery node
+    const galleryNode = page.locator('.gallery-node').first();
+
+    // click it
+    await galleryNode.click();
+
+    // expect the lightbox to be visible
+    await expect(page.locator('dialog')).toBeVisible();
+
+    await page.waitForTimeout(1000);
+    await page.keyboard.press('Escape');
+    await expect(page.locator('dialog')).toBeHidden();
+
+    // focus the gallery node and press enter
+    await galleryNode.focus();
+    await page.keyboard.press('Enter');
+
+    // expect the lightbox to be visible
+    await expect(page.locator('dialog')).toBeVisible();
+
+    await page.close();
+  });
+
+  test('lightbox navigation', async ({ page }) => {
+    await page.goto('/#!/DynamicGallery/3');
+
+    // find the first gallery node
+    const galleryNode = page.locator('.gallery-node').first();
+
+    // click it
+    await galleryNode.click();
+
+    // expect the lightbox and caption to be visible
+    await expect(page.locator('dialog')).toBeVisible();
+    await expect(page.getByText('Lightbox: This is the body for image 0')).toBeVisible();
+
+    await page.waitForTimeout(1000);
+
+    // navigate to the next image
+    await page.keyboard.press('ArrowRight');
+    await expect(page.getByText('Lightbox: This is the body for image 1')).toBeVisible();
+
+    await page.close();
+  });
+
+  test('lightbox pointer close', async ({ page }) => {
+    await page.goto('/#!/DynamicGallery/3');
+
+    // find the first gallery node
+    const galleryNode = page.locator('.gallery-node').first();
+
+    // click it
+    await galleryNode.click();
+
+    // click the close button
+    await page.locator('.close-button').click();
+
+    // expect the lightbox to be hidden
+    await expect(page.locator('dialog')).toBeHidden();
+
+    await page.close();
+  });
+
+  test('check non-lightbox mode', async ({ page }) => {
+    await page.goto('/#!/DynamicGallery/5');
+
+    // find the first gallery node
+    const galleryNode = page.locator('.gallery-node').first();
+
+    // click it
+    await galleryNode.click();
+
+    // expect the lightbox to be hidden
+    await expect(page.locator('dialog')).toBeHidden();
+
+    // focus the gallery node and press enter
+    await galleryNode.focus();
+    await page.keyboard.press('Enter');
+
+    // expect the lightbox to be hidden
+    await expect(page.locator('dialog')).toBeHidden();
+
+    await page.close();
+  });
 });

package/src/components/Atoms/Picture/Picture.js

@@ -109,6 +109,7 @@ const Picture = ({
         {...rest}
       >
         <Image
+          key={image}
           alt={alt}
           height={height}
           width={width}

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

@@ -12,7 +12,8 @@ import Lightbox, { LightboxContext } from './_Lightbox';
 import {
   Container,
   EmptyMessage,
-  ImageGrid
+  ImageGrid,
+  FocusTrap
 } from './DynamicGallery.style';
 import DynamicGalleryColumn from './_DynamicGalleryColumn';
 import { GalleryNodeType } from './_types';
@@ -58,8 +59,9 @@ const DynamicGallery = ({
       const { top, left } = node.getBoundingClientRect();
       return floor(top, -2) + Math.floor(left) / 1000;
     }, 'asc');
+
     sortedNodes.forEach((galleryNode, index) => {
-      galleryNode.setAttribute('data-order', String(index));
+      galleryNode.setAttribute('data-tab-order', String(index));
     });
   }
   // create a throttled version of the updateTabOrder function
@@ -100,16 +102,30 @@ const DynamicGallery = ({
   const [selectedNode, setSelectedNode] = useState(null);
   const [focusedNode, setFocusedNode] = useState(null);
 
-  // handle next/previous node events from the lightbox
+  // handle next/previous node events from the lightbox;
+  // slightly complicated because we need to use the data-tab-order attribute
+  // to navigate between nodes rather than the node index;
+  // this reflects the tab ordering in the DOM, rather than the order of the nodes in the array,
+  // because the dynamic image heights can confuse the normal order
   function handleNextNode(node) {
     const nodeIndex = nodes.indexOf(node);
-    const nextNodeIndex = (nodeIndex + 1) % imageCount;
-    setSelectedNode(nodes[nextNodeIndex]);
+    const nodeEl = containerRef.current.querySelector(`[data-node-index="${nodeIndex}"]`);
+    const tabOrder = nodeEl.getAttribute('data-tab-order');
+    const nextTabOrder = (+tabOrder + 1) % imageCount;
+    const nextNodeEl = containerRef.current.querySelector(`[data-tab-order="${nextTabOrder}"]`);
+    const nextNodeIndex = nextNodeEl.getAttribute('data-node-index');
+    const nextNode = nodes[nextNodeIndex];
+    setSelectedNode(nextNode);
   }
   function handlePreviousNode(node) {
     const nodeIndex = nodes.indexOf(node);
-    const previousNodeIndex = (nodeIndex - 1 + imageCount) % imageCount;
-    setSelectedNode(nodes[previousNodeIndex]);
+    const nodeEl = containerRef.current.querySelector(`[data-node-index="${nodeIndex}"]`);
+    const tabOrder = nodeEl.getAttribute('data-tab-order');
+    const previousTabOrder = (+tabOrder - 1 + imageCount) % imageCount;
+    const previousNodeEl = containerRef.current.querySelector(`[data-tab-order="${previousTabOrder}"]`);
+    const previousNodeIndex = previousNodeEl.getAttribute('data-node-index');
+    const previousNode = nodes[previousNodeIndex];
+    setSelectedNode(previousNode);
   }
 
   // handle keydown events,
@@ -139,7 +155,7 @@ const DynamicGallery = ({
       // - 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;
+        const nodeIndex = +event.target.dataset.tabOrder;
         if (Number.isNaN(nodeIndex)) return;
         const galleryContainer = event.target.closest('.gallery-container');
         if (!galleryContainer) return;
@@ -151,7 +167,7 @@ const DynamicGallery = ({
           newNodeIndex = nodeIndex - 1;
           if (newNodeIndex < 0) return;
           event.preventDefault();
-          galleryContainer.querySelector(`[data-order="${newNodeIndex}"]`).focus();
+          galleryContainer.querySelector(`[data-tab-order="${newNodeIndex}"]`).focus();
         } else {
           // tab: move to the next image
           newNodeIndex = nodeIndex + 1;
@@ -166,7 +182,7 @@ const DynamicGallery = ({
             return;
           }
           event.preventDefault();
-          galleryContainer.querySelector(`[data-order="${newNodeIndex}"]`).focus();
+          galleryContainer.querySelector(`[data-tab-order="${newNodeIndex}"]`).focus();
         }
         break;
       }
@@ -200,26 +216,33 @@ const DynamicGallery = ({
           {hasNodes
           && Array(columnCount)
             .fill(null)
-            .map((column, columnIndex) => (
-              <DynamicGalleryColumn
-                // 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}
-                focusOutlineColour={textColour}
-              />
-            ))}
+            .map((column, columnIndex) => {
+              // eslint prefers template literals for strings, but they break the compiler
+              // eslint-disable-next-line prefer-template
+              const key = String(columnIndex) + ':' + nodes.length;
+              return (
+                <DynamicGalleryColumn
+                  // 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={key}
+                  columnIndex={columnIndex}
+                  columnCount={columnCount}
+                  nodes={nodes.slice(0, imageCount)}
+                  imageRatio={imageRatio}
+                  updateTabOrder={throttledUpdateTabOrder.current}
+                  focusOutlineColour={textColour}
+                />
+              );
+            })}
 
           <EmptyMessage isEmpty={!hasNodes}>No images to display</EmptyMessage>
         </ImageGrid>
         <Lightbox />
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-        <div className="gallery-focus-trap" tabIndex={0} />
+        <FocusTrap className="gallery-focus-trap" tabIndex={0}>
+          <span>End of gallery</span>
+        </FocusTrap>
       </LightboxContext.Provider>
       {imageCount < nodes.length && <Button onClick={() => handleLoadMore()}>Show more</Button>}
     </Container>

package/src/components/Organisms/DynamicGallery/DynamicGallery.md

@@ -18,7 +18,7 @@ import createMockGalleryNodes from './_utils';
 ```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} />;
+<DynamicGallery gridWidth={4} nodes={createMockGalleryNodes(30)} loadingBehaviour="all" imageRatio="4:3" pageBackgroundColour="blue" textColour="white" paddingTop="6rem" paddingBottom="6rem" useLightbox={false} />;
 ```
 
 ### Gallery with max 5 columns

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

@@ -5,10 +5,15 @@ export const Container = styled.div`
   flex-direction: column;
   align-items: center;
   gap: 1rem;
+  position: relative;
   max-width: ${({ maxWidth }) => maxWidth};
   background: ${({ theme, pageBackgroundColour }) => theme.color(pageBackgroundColour)};
-  ${({ paddingTop, paddingBottom }) => css`padding: ${paddingTop} 2rem ${paddingBottom};`}
+  padding: ${({ paddingTop, paddingBottom }) => `${paddingTop} 1rem ${paddingBottom}`};
   color: ${({ theme, textColour }) => theme.color(textColour)};
+
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    gap: 1rem;
+  }
 `;
 
 export const ImageGrid = styled.div`
@@ -97,3 +102,20 @@ export const Details = styled.div`
   gap: 0.5rem;
   padding: 0 1rem;
 `;
+
+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;
+`;
+
+export const FocusTrap = styled(ScreenReaderOnly)`
+  bottom: 0;
+`;

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

@@ -91,10 +91,16 @@ export default function DynamicGalleryColumn({
   return (
     <Column ref={elRef} className="gallery-column">
       {nodes
-        ?.filter((_, nodeIndex) => nodeIndex % columnCount === columnIndex)
         .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 = 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 (
             <NodeComponent
               key={key}
@@ -109,7 +115,6 @@ export default function DynamicGalleryColumn({
             >
               <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

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

@@ -15,9 +15,9 @@ import {
   LightboxImage,
   LightboxSpinner,
   NextButton,
-  PreviousButton,
-  ScreenReaderOnly
+  PreviousButton
 } from './_Lightbox.style';
+import { ScreenReaderOnly } from './DynamicGallery.style';
 import ScrollFix from './_ScrollFix';
 import { extractNodeText } from './_utils';
 
@@ -68,6 +68,20 @@ const Lightbox = () => {
   const hasNode = Boolean(selectedNode);
   const dialogRef = useRef(null);
 
+  // handle interaction type
+  const interactionTypeRef = useRef('keyboard');
+
+  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
@@ -128,13 +142,15 @@ const Lightbox = () => {
   // handle focus management when dialog opens/closes
   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?.focus();
@@ -166,8 +182,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({ width: `${width}px`, height: `${height}px` });
@@ -201,8 +217,17 @@ const Lightbox = () => {
                 height={imageDimensions.height}
                 objectFit="contain"
                 onLoad={event => onLoad(event)}
+                style={{ borderRadius: '0.6rem', overflow: 'hidden' }}
               />
             )}
+            <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>
           </LightboxImage>
           <LightboxDetails id="lightboxDescription" aria-live="polite" aria-atomic="true">
             {selectedNode?.lightboxBody && (
@@ -216,18 +241,10 @@ const Lightbox = () => {
               </div>
             )}
           </LightboxDetails>
-          <CloseButton type="button" onClick={() => setSelectedNode(null)}>
+          <CloseButton className="close-button" 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>

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

@@ -54,8 +54,7 @@ export const LightboxImage = styled.div`
   justify-content: center;
   min-width: 128px;
   min-height: 32px;
-  border-radius: 0.6rem;
-  overflow: hidden;
+  width: 100%;
 
   & > div {
     display: flex;
@@ -83,6 +82,7 @@ export const LightboxDetails = styled.div`
   align-items: stretch;
   gap: 0.5rem;
   width: 100%;
+  max-width: 1024px;
   padding: 0 1rem;
 `;
 
@@ -100,16 +100,18 @@ export const NavButton = styled.button`
   z-index: 10;
 
   svg {
-    transition: all 0.1s ease-out;
+    transition: fill 0.1s ease-out;
   }
 
-  &:hover {
-    svg {
-      fill: ${({ theme }) => theme.color('red')};
+  @media (hover: hover) {
+    &:hover {
+      svg {
+        fill: ${({ theme }) => theme.color('red')};
+      }
     }
   }
 
-  &:focus-visible {
+  :focus-visible {
     outline: 2px solid ${({ theme }) => theme.color('red')};
   }
 `;
@@ -120,40 +122,25 @@ export const CloseButton = styled(NavButton)`
 `;
 
 export const PreviousButton = styled(NavButton)`
-  top: 30%;
+  top: 50%;
   left: 0;
-  transform: translate(0, -50%);
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  transform: translate(-1rem, -50%);
   
   @media ${({ theme }) => theme.breakpoints2026('L')} {
     position: fixed;
+    transform: translate(1rem, -50%);
     top: 50%;
   }
 `;
 
 export const NextButton = styled(NavButton)`
-  top: 30%;
+  top: 50%;
   right: 0;
-  transform: translate(0, -50%);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  transform: translate(1rem, -50%);
 
   @media ${({ theme }) => theme.breakpoints2026('L')} {
     position: fixed;
-   top: 50%;
+    transform: translate(-1rem, -50%);
+    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;
-`;