T5-73 Add type-a|b|c field_image_arrangement field value as a class i…

…n ImageCollage.
thirdandgrove · Jul 2, 2019 · 6718b46 · 6718b46
1 parent 385215a
commit 6718b46
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/components/ProjectPreview/ImageCollage.js b/src/components/ProjectPreview/ImageCollage.js
@@ -5,7 +5,7 @@ import { css } from '@emotion/core';
 
 import { mediaQueries } from '../../styles';
 
-const ImageCollage = ({ images }) => {
+const ImageCollage = ({ images, type }) => {
   const flexWrap = css`
     display: flex;
     position: relative;
@@ -29,7 +29,7 @@ const ImageCollage = ({ images }) => {
   // Pass array of fixed images with media query for art direction.
   // @see https://www.gatsbyjs.org/packages/gatsby-image/#art-directing-multiple-images
   return (
-    <article css={flexWrap}>
+    <article className={type} css={flexWrap}>
       <div className='twoStack'>
         <Img
           fixed={[
@@ -71,6 +71,7 @@ const ImageCollage = ({ images }) => {
 
 ImageCollage.propTypes = {
   images: PropTypes.object.isRequired,
+  type: PropTypes.string.isRequired,
 };
 
 export default ImageCollage;
diff --git a/src/components/ProjectPreview/ProjectPreview.js b/src/components/ProjectPreview/ProjectPreview.js
@@ -79,7 +79,7 @@ const ProjectPreview = ({ project, index }) => {
           view case study
         </Button>
       </section>
-      <ImageCollage images={images} index={index} />
+      <ImageCollage images={images} type={project.field_image_arrangement} />
     </div>
   );
 };