@comicrelief/component-library 8.51.7 → 8.52.0

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

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+
+// ignoring the linting rule here so we can name the export for clarity;
+// this shared type is used in the DynamicGallery and DynamicGalleryColumn components,
+// so lives here to avoid circular dependencies
+// eslint-disable-next-line import/prefer-default-export
+export const GalleryNodeType = PropTypes.shape({
+  title: PropTypes.string,
+  image: PropTypes.string.isRequired,
+  body: PropTypes.node,
+  caption: PropTypes.node
+});

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

@@ -0,0 +1,28 @@
+import { defaultData } from '../../../styleguide/data/data';
+
+/**
+ * mocking function to create nodes for the dynamic gallery
+ */
+export default function createMockGalleryNodes(nodeCount = 10) {
+  const images = [
+    defaultData.pictures.small,
+    defaultData.pictures.medium,
+    defaultData.pictures.large,
+    defaultData.promoImage,
+    defaultData.heroBannerImage,
+    defaultData.image,
+    'tall.jpg',
+    'wide.jpg'
+  ];
+
+  const nodes = [];
+  for (let i = 0; i < nodeCount; i += 1) {
+    nodes.push({
+      image: images[Math.floor(Math.random() * images.length)],
+      title: `image ${i}`,
+      caption: 'Age group: 0-10',
+      body: `This is the body for image ${i}. It can be used to display additional information about the image.`
+    });
+  }
+  return nodes;
+}

package/src/index.js

@@ -84,3 +84,4 @@ export {
 export { default as ImpactSlider } from './components/Organisms/ImpactSlider/ImpactSlider';
 export { default as WYMDCarousel } from './components/Organisms/WYMDCarousel/WYMDCarousel';
 export { default as RichtextCarousel } from './components/Organisms/RichtextCarousel/RichtextCarousel';
+export { default as DynamicGallery } from './components/Organisms/DynamicGallery/DynamicGallery';