{"version":3,"sources":["webpack:///./src/modules/ImageGridModule/ImageGridModule.js"],"names":["ImageGridModule","_ref","items","area","itemsPerColumn","length","React","Ribbon","noGrid","Grid","map","item","index","key","concat","ImageFullscreen","Object","assign","image","crop","aspectRatio","undefined","caption","CaptionContainer","CaptionContainerItem","credit","style","marginBottom","styled","div","withConfig","displayName","componentId","getFontSize","rem","p","getLineHeight","_ref2","theme","body","mediaQuery","sm","_templateObject","_taggedTemplateLiteral","_ref3","md","_templateObject2","_ref4"],"mappings":"yTAoDeA,MAlCf,SAAwBC,GAAyB,IAAtBC,EAAKD,EAALC,MAAOC,EAAIF,EAAJE,KAChC,IAAKD,EAAO,OAAO,KAEnB,IAAME,EAAiBF,EAAMG,QAAU,EAAI,EAAIH,EAAMG,OAAS,EAE9D,OACEC,gBAACC,IAAM,CAACC,OAAiB,WAATL,GACdG,gBAACG,EAAI,CAACL,eAAgBA,GACnBF,EAAMQ,KAAI,SAACC,EAAMC,GAChB,OACEN,gBAAA,OAAKO,IAAG,cAAAC,OAAgBF,IACtBN,gBAACS,IAAeC,OAAAC,OAAA,GACVN,EAAKO,MAAK,CACdC,KAAM,UACNC,YAAahB,EAAiB,EAAI,UAAUiB,KAE7CV,EAAKW,SACJhB,gBAACiB,EAAgB,KACfjB,gBAACkB,EAAoB,KAAEb,EAAKW,SAC3BX,EAAKc,OACJnB,gBAACkB,EAAoB,CAACE,MAAO,CAAEC,aAAc,IAC1ChB,EAAKc,QAEN,aAahBF,EAAmBK,IAAOC,IAAGC,WAAA,CAAAC,YAAA,oCAAAC,YAAA,eAAVJ,CAAU,6CAEpBK,YAAY,SACXC,YAAI,IAGdV,EAAuBI,IAAOO,EAACL,WAAA,CAAAC,YAAA,wCAAAC,YAAA,eAARJ,CAAQ,0FACtBK,YAAY,SAIVG,YAAc,WACpB,SAAAC,GAAQ,OAAAA,EAALC,MAAkBC,QAG1B9B,EAAOmB,IAAOC,IAAGC,WAAA,CAAAC,YAAA,wBAAAC,YAAA,eAAVJ,CAAU,iEAETM,YAAI,IAEdM,IAAWC,GAAEC,MAAAC,EAAA,yCACY,SAAAC,GAAA,IAAGxC,EAAcwC,EAAdxC,eAAc,gBAAAU,OAC9BV,GAAkB,EAAI,IAAM,IAAG,cAE3CoC,IAAWK,GAAEC,MAAAH,EAAA,yCACY,SAAAI,GAAA,IAAG3C,EAAc2C,EAAd3C,eAAc,gBAAAU,OAC9BV,EAAc","file":"static/scripts/imageGridModule-7455a082a37f912b5d1a.js","sourcesContent":["// @flow\nimport * as React from 'react'\nimport styled from 'styled-components'\nimport { rem } from 'polished'\nimport { getFontSize, getLineHeight } from '../../styles/style-helpers'\n\nimport type { ImageModuleViewModel } from '../../types/ImageModuleViewModel'\nimport type { AreaTypes } from '../../types/enums/AreaTypes'\n\nimport Ribbon from '../../components/Ribbon/Ribbon'\nimport ImageFullscreen from '../../components/ImageFullscreen/ImageFullscreen'\nimport { mediaQuery } from '../../styles/media'\n\nexport type Props = {\n  area?: AreaTypes,\n  items: ImageModuleViewModel[],\n}\n\nfunction ImageGridModule({ items, area }: Props) {\n  if (!items) return null\n\n  const itemsPerColumn = items.length >= 3 ? 3 : items.length % 3\n\n  return (\n    <Ribbon noGrid={area === 'narrow'}>\n      <Grid itemsPerColumn={itemsPerColumn}>\n        {items.map((item, index) => {\n          return (\n            <div key={`image-grid-${index}`}>\n              <ImageFullscreen\n                {...item.image}\n                crop={'entropy'}\n                aspectRatio={itemsPerColumn > 1 ? 10 / 16 : undefined}\n              />\n              {item.caption && (\n                <CaptionContainer>\n                  <CaptionContainerItem>{item.caption}</CaptionContainerItem>\n                  {item.credit ? (\n                    <CaptionContainerItem style={{ marginBottom: 0 }}>\n                      {item.credit}\n                    </CaptionContainerItem>\n                  ) : null}\n                </CaptionContainer>\n              )}\n            </div>\n          )\n        })}\n      </Grid>\n    </Ribbon>\n  )\n}\n\nexport default ImageGridModule\n\nconst CaptionContainer = styled.div`\n  width: 100%;\n  font-size: ${getFontSize('small')};\n  margin-top: ${rem(8)};\n`\n\nconst CaptionContainerItem = styled.p`\n  font-size: ${getFontSize('small')};\n  margin-bottom: 0;\n  margin-top: 0;\n  font-weight: 300;\n  line-height: ${getLineHeight('normal')};\n  color: ${({ theme }) => theme.body};\n`\n\nconst Grid = styled.div`\n  display: grid;\n  grid-gap: ${rem(20)};\n\n  ${mediaQuery.sm`\n    grid-template-columns: ${({ itemsPerColumn }) =>\n      `repeat(${itemsPerColumn >= 2 ? '2' : '1'}, 1fr);`};`}\n\n  ${mediaQuery.md`\n    grid-template-columns: ${({ itemsPerColumn }) =>\n      `repeat(${itemsPerColumn}, 1fr);`};`}\n\n  grid-template-columns: 1fr;\n`\n"],"sourceRoot":""}