@comicrelief/component-library 8.53.2 → 8.54.0

package/dist/components/Atoms/Picture/Picture.js

@@ -117,6 +117,7 @@ const Picture = _ref11 => {
       nonObjFitImage: nonObjFitImage,
       objFitState: objFitState
     }, rest), /*#__PURE__*/_react.default.createElement(Image, {
+      key: image,
       alt: alt,
       height: height,
       width: width,

package/dist/components/Molecules/SingleMessage/SingleMessage.js

@@ -30,12 +30,18 @@ const SingleMessage = _ref => {
     vhFull = false,
     videoID = null,
     landscapeVideo = false,
-    paddingOption = null
+    paddingTop = '2rem',
+    paddingBottom = '2rem'
   } = _ref;
   const hasImage = imageSet || false;
   const doubleImage = (imageSet || image) && (imageSet2 || image2);
   const hasVideo = Boolean(videoID !== null && videoID !== '');
 
+  // While the Content Team don't use image or video Single Msgs any more, this just keeps
+  // things looking nice in the CL; only using the new props where they want 'em:
+  const thisPaddingTop = hasImage || hasVideo ? '0rem' : paddingTop;
+  const thisPaddingBottom = hasImage || hasVideo ? '0rem' : paddingBottom;
+
   // States to track video status
   const [isInitialised, setIsInitialised] = (0, _react.useState)(false);
   const [isPlaying, setIsPlaying] = (0, _react.useState)(false);
@@ -125,7 +131,9 @@ const SingleMessage = _ref => {
       hasVideo: hasVideo,
       landscapeVideo: landscapeVideo,
       fullImage: fullImage,
-      ref: thisRef
+      ref: thisRef,
+      paddingTop: thisPaddingTop,
+      paddingBottom: thisPaddingBottom
     }, imageSet || imageSet2 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SingleMessage.Media, {
       doubleImage: doubleImage,
       isPlaying: isPlaying,
@@ -172,7 +180,8 @@ const SingleMessage = _ref => {
       copyFirst: copyFirst,
       hasVideo: hasVideo,
       vhFull: vhFull,
-      paddingOption: paddingOption
+      paddingTop: paddingTop,
+      paddingBottom: paddingBottom
     }, children) : null))
   );
 };

package/dist/components/Molecules/SingleMessage/SingleMessage.md

@@ -71,7 +71,7 @@ import Link from '../../Atoms/Link/Link';
 />;
 ```
 
-Single Message with no Image
+Single Message with no Image (default padding)
 
 ```js
 import Text from '../../Atoms/Text/Text';
@@ -84,12 +84,12 @@ import Text from '../../Atoms/Text/Text';
 </SingleMessage>;
 ```
 
-Single Message with no Image - padding unmodified
+Single Message with no Image (no padding)
 
 ```js
 import Text from '../../Atoms/Text/Text';
 
-<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingOption="both_on">
+<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingTop="0rem" paddingBottom="0rem">
   <Text tag="p" color="white" size="xxl">
     “The creativity that goes into helping people have a better life is
     extraordinary.”
@@ -97,39 +97,12 @@ import Text from '../../Atoms/Text/Text';
 </SingleMessage>;
 ```
 
-Single Message with no Image - no bottom padding
+Single Message with no Image (big padding)
 
 ```js
 import Text from '../../Atoms/Text/Text';
 
-<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingOption="lower_off">
-  <Text tag="p" color="white" size="xxl">
-    “The creativity that goes into helping people have a better life is
-    extraordinary.”
-  </Text>
-</SingleMessage>;
-```
-
-
-Single Message with no Image - no top padding
-
-```js
-import Text from '../../Atoms/Text/Text';
-
-<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingOption="upper_off">
-  <Text tag="p" color="white" size="xxl">
-    “The creativity that goes into helping people have a better life is
-    extraordinary.”
-  </Text>
-</SingleMessage>;
-```
-
-Single Message with no Image - no top and bottom padding
-
-```js
-import Text from '../../Atoms/Text/Text';
-
-<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingOption="both_off">
+<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingTop="4rem" paddingBottom="4rem">
   <Text tag="p" color="white" size="xxl">
     “The creativity that goes into helping people have a better life is
     extraordinary.”

package/dist/components/Molecules/SingleMessage/SingleMessage.style.js

@@ -13,11 +13,10 @@ var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 var _videoPlayIcon = _interopRequireDefault(require("./assets/video--play-icon.svg"));
 var _videoPlayIcon__hover = _interopRequireDefault(require("./assets/video--play-icon__hover.svg"));
 var _loader = _interopRequireDefault(require("./assets/loader.svg"));
-var _utils = _interopRequireDefault(require("../../../utils/_utils"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Container",
   componentId: "sc-86zg20-0"
-})(["display:flex;position:relative;flex-direction:column;overflow:hidden;background:", ";@media ", "{flex-direction:", ";", ";}iframe{height:100%;width:100%;position:absolute;top:0;", ";", ";}"], _ref => {
+})(["display:flex;position:relative;flex-direction:column;overflow:hidden;background:", ";padding-top:", ";padding-bottom:", ";iframe{height:100%;width:100%;position:absolute;top:0;", ";", ";}@media ", "{flex-direction:", ";", ";}"], _ref => {
   let {
     theme,
     backgroundColor
@@ -25,84 +24,84 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
   return theme.color(backgroundColor);
 }, _ref2 => {
   let {
-    theme
+    paddingTop
   } = _ref2;
-  return theme.allBreakpoints('M');
+  return paddingTop;
 }, _ref3 => {
   let {
-    copyFirst
+    paddingBottom
   } = _ref3;
-  return copyFirst === true ? 'row-reverse' : 'row';
+  return paddingBottom;
 }, _ref4 => {
   let {
-    landscapeVideo,
-    hasVideo,
-    fullImage
+    copyFirst
   } = _ref4;
-  return landscapeVideo && hasVideo && !fullImage ? 'min-height: 0;' : null;
+  return copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;';
 }, _ref5 => {
   let {
-    copyFirst
+    isPlaying
   } = _ref5;
-  return copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;';
+  return isPlaying ? (0, _zIndex.default)('high') : (0, _zIndex.default)('base');
 }, _ref6 => {
   let {
-    isPlaying
+    theme
   } = _ref6;
-  return isPlaying ? (0, _zIndex.default)('high') : (0, _zIndex.default)('base');
+  return theme.allBreakpoints('M');
+}, _ref7 => {
+  let {
+    copyFirst
+  } = _ref7;
+  return copyFirst === true ? 'row-reverse' : 'row';
+}, _ref8 => {
+  let {
+    landscapeVideo,
+    hasVideo,
+    fullImage
+  } = _ref8;
+  return landscapeVideo && hasVideo && !fullImage ? 'min-height: 0;' : null;
 });
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Copy",
   componentId: "sc-86zg20-1"
-})(["width:100%;", ";", ";padding:", ";@media ", "{", ";", ";flex-direction:column;justify-content:center;padding:", ";}", ";", ";@media ", "{", ";}"], (0, _zIndex.default)('low'), _ref7 => {
+})(["width:100%;", ";", ";padding:0 ", ";@media ", "{", ";", ";flex-direction:column;justify-content:center;padding:0 ", ";}", ";", ";"], (0, _zIndex.default)('low'), _ref9 => {
   let {
     hasVideo,
     fullImage
-  } = _ref7;
+  } = _ref9;
   return hasVideo === true && fullImage === true ? 'display: none;' : null;
-}, (0, _spacing.default)('l'), _ref8 => {
+}, (0, _spacing.default)('l'), _ref10 => {
   let {
     theme
-  } = _ref8;
+  } = _ref10;
   return theme.allBreakpoints('M');
-}, _ref9 => {
+}, _ref11 => {
   let {
     vhFull,
     fullImage
-  } = _ref9;
+  } = _ref11;
   return vhFull || fullImage ? 'min-height: calc(100vh - 5.625rem); flex-direction: column; justify-content: center;' : 'height: auto;';
-}, _ref10 => {
+}, _ref12 => {
   let {
     hasVideo,
     fullImage
-  } = _ref10;
-  return hasVideo === true && fullImage === true ? 'display: none;' : 'display: flex;';
-}, (0, _spacing.default)('xl'), props => props.fullImage && (0, _styledComponents.css)(["@media ", "{position:absolute;width:100%;right:0;top:50%;transform:translateY(-50%);", " width:50%;}"], _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.allBreakpoints('M');
-}, props.copyFirst ? (0, _styledComponents.css)(["left:0;"]) : null), props => props.hasImage ? (0, _styledComponents.css)(["@media ", "{width:50%;}"], _ref12 => {
-  let {
-    theme
   } = _ref12;
-  return theme.allBreakpoints('M');
-}) : (0, _styledComponents.css)(["@media ", "{width:100%;max-width ", ";padding:", ";}margin:auto;padding:", ";"], _ref13 => {
+  return hasVideo === true && fullImage === true ? 'display: none;' : 'display: flex;';
+}, (0, _spacing.default)('xl'), props => props.fullImage && (0, _styledComponents.css)(["@media ", "{position:absolute;width:100%;right:0;top:50%;transform:translateY(-50%);", " width:50%;}"], _ref13 => {
   let {
     theme
   } = _ref13;
   return theme.allBreakpoints('M');
-}, _containers.default.small, (0, _spacing.default)('xl'), (0, _spacing.default)('md')), _ref14 => {
+}, props.copyFirst ? (0, _styledComponents.css)(["left:0;"]) : null), props => props.hasImage ? (0, _styledComponents.css)(["@media ", "{width:50%;}"], _ref14 => {
   let {
     theme
   } = _ref14;
-  return theme.allBreakpoints('L');
-}, _ref15 => {
+  return theme.allBreakpoints('M');
+}) : (0, _styledComponents.css)(["@media ", "{width:100%;max-width ", ";padding:0 ", ";}margin:auto;padding:", ";"], _ref15 => {
   let {
-    paddingOption
+    theme
   } = _ref15;
-  return (0, _utils.default)(paddingOption);
-});
+  return theme.allBreakpoints('M');
+}, _containers.default.small, (0, _spacing.default)('xl'), (0, _spacing.default)('md')));
 const Media = exports.Media = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Media",
   componentId: "sc-86zg20-2"

package/dist/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap

@@ -49,6 +49,8 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   flex-direction: column;
   overflow: hidden;
   background: #6F3AAB;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
 }
 
 .c0 iframe {
@@ -64,7 +66,7 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
 .c5 {
   width: 100%;
   z-index: 1;
-  padding: 2rem;
+  padding: 0 2rem;
 }
 
 .c1 {
@@ -122,7 +124,7 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
@@ -132,10 +134,6 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   }
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -319,6 +317,8 @@ exports[`renders Single Message with Image correctly 1`] = `
   flex-direction: column;
   overflow: hidden;
   background: #6F3AAB;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
 }
 
 .c0 iframe {
@@ -334,7 +334,7 @@ exports[`renders Single Message with Image correctly 1`] = `
 .c5 {
   width: 100%;
   z-index: 1;
-  padding: 2rem;
+  padding: 0 2rem;
 }
 
 .c1 {
@@ -425,7 +425,7 @@ exports[`renders Single Message with Image correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
@@ -435,10 +435,6 @@ exports[`renders Single Message with Image correctly 1`] = `
   }
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -561,6 +557,8 @@ exports[`renders Single Message with double image correctly 1`] = `
   flex-direction: column;
   overflow: hidden;
   background: #FFE400;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
 }
 
 .c0 iframe {
@@ -576,7 +574,7 @@ exports[`renders Single Message with double image correctly 1`] = `
 .c5 {
   width: 100%;
   z-index: 1;
-  padding: 2rem;
+  padding: 0 2rem;
 }
 
 .c1 {
@@ -639,7 +637,7 @@ exports[`renders Single Message with double image correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
@@ -649,10 +647,6 @@ exports[`renders Single Message with double image correctly 1`] = `
   }
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
 
 }
@@ -661,10 +655,6 @@ exports[`renders Single Message with double image correctly 1`] = `
 
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -880,6 +870,8 @@ exports[`renders Single Message with full width correctly 1`] = `
   flex-direction: column;
   overflow: hidden;
   background: #6F3AAB;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
 }
 
 .c0 iframe {
@@ -895,7 +887,7 @@ exports[`renders Single Message with full width correctly 1`] = `
 .c5 {
   width: 100%;
   z-index: 1;
-  padding: 2rem;
+  padding: 0 2rem;
 }
 
 .c1 {
@@ -993,7 +985,7 @@ exports[`renders Single Message with full width correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
@@ -1016,10 +1008,6 @@ exports[`renders Single Message with full width correctly 1`] = `
   }
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -1122,6 +1110,8 @@ exports[`renders Single Message with full width image and no text correctly 1`]
   flex-direction: column;
   overflow: hidden;
   background: #6F3AAB;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
 }
 
 .c0 iframe {
@@ -1182,10 +1172,6 @@ exports[`renders Single Message with full width image and no text correctly 1`]
 
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -1274,6 +1260,8 @@ exports[`renders Single Message with no Image correctly 1`] = `
   flex-direction: column;
   overflow: hidden;
   background: #6F3AAB;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
 
 .c0 iframe {
@@ -1289,7 +1277,7 @@ exports[`renders Single Message with no Image correctly 1`] = `
 .c1 {
   width: 100%;
   z-index: 1;
-  padding: 2rem;
+  padding: 0 2rem;
   margin: auto;
   padding: 1rem;
 }
@@ -1332,6 +1320,10 @@ exports[`renders Single Message with no Image correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+
+}
+
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -1346,7 +1338,7 @@ exports[`renders Single Message with no Image correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
@@ -1354,14 +1346,10 @@ exports[`renders Single Message with no Image correctly 1`] = `
   .c1 {
     width: 100%;
     max-width: 880px;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
 
 }
@@ -1370,10 +1358,6 @@ exports[`renders Single Message with no Image correctly 1`] = `
 
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
 
 }

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

@@ -61,7 +61,7 @@ const DynamicGallery = _ref => {
       return (0, _floor2.default)(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
@@ -105,16 +105,30 @@ const DynamicGallery = _ref => {
   const [selectedNode, setSelectedNode] = (0, _react.useState)(null);
   const [focusedNode, setFocusedNode] = (0, _react.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,
@@ -146,7 +160,7 @@ const DynamicGallery = _ref => {
       // - 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;
@@ -156,7 +170,7 @@ const DynamicGallery = _ref => {
             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;
@@ -171,7 +185,7 @@ const DynamicGallery = _ref => {
               return;
             }
             event.preventDefault();
-            galleryContainer.querySelector(`[data-order="${newNodeIndex}"]`).focus();
+            galleryContainer.querySelector(`[data-tab-order="${newNodeIndex}"]`).focus();
           }
           break;
         }
@@ -200,24 +214,29 @@ const DynamicGallery = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_DynamicGallery.ImageGrid, {
     className: "gallery-grid",
     onKeyDown: event => handleKeyDown(event)
-  }, hasNodes && Array(columnCount).fill(null).map((column, columnIndex) => /*#__PURE__*/_react.default.createElement(_DynamicGalleryColumn.default
-  // 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
-  })), /*#__PURE__*/_react.default.createElement(_DynamicGallery.EmptyMessage, {
+  }, hasNodes && Array(columnCount).fill(null).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 /*#__PURE__*/_react.default.createElement(_DynamicGalleryColumn.default
+    // 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
+    });
+  }), /*#__PURE__*/_react.default.createElement(_DynamicGallery.EmptyMessage, {
     isEmpty: !hasNodes
-  }, "No images to display")), /*#__PURE__*/_react.default.createElement(_Lightbox.default, null), /*#__PURE__*/_react.default.createElement("div", {
+  }, "No images to display")), /*#__PURE__*/_react.default.createElement(_Lightbox.default, null), /*#__PURE__*/_react.default.createElement(_DynamicGallery.FocusTrap, {
     className: "gallery-focus-trap",
     tabIndex: 0
-  })), imageCount < nodes.length && /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, "End of gallery"))), imageCount < nodes.length && /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => handleLoadMore()
   }, "Show more"));
 };

package/dist/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