{"version":3,"sources":["webpack:///./src/modules/ImageModule/ImageModule.js"],"names":["CaptionContainer","styled","div","withConfig","displayName","componentId","getFontSize","rem","CaptionContainerItem","p","getLineHeight","ImageContainer","mediaQuery","md","_templateObject","props","customWidthPercentage","ImageModule","_React$Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","key","value","_this$props","this","image","caption","credit","area","React","Ribbon","noGrid","ImageFullscreen","style","marginBottom","defaultProps"],"mappings":"quDAiBA,I,IAAMA,EAAmBC,IAAOC,IAAGC,WAAA,CAAAC,YAAA,gCAAAC,YAAA,gBAAVJ,CAAU,6CAEpBK,YAAY,SACXC,YAAI,IAGdC,EAAuBP,IAAOQ,EAACN,WAAA,CAAAC,YAAA,oCAAAC,YAAA,gBAARJ,CAAQ,gFACtBK,YAAY,SAIVI,YAAc,WAGzBC,EAAiBV,IAAOC,IAAGC,WAAA,CAAAC,YAAA,8BAAAC,YAAA,gBAAVJ,CAAU,mBAG7BW,IAAWC,GAAEC,I,EAAA,yB,kBAAAA,E,2EACN,SAAAC,GAAK,OAAIA,EAAMC,0BAIpBC,EAAW,SAAAC,I,qRAAAC,CAAAF,EAAAC,GAAA,I,MAAAE,EAAAC,EAAAJ,GAAA,SAAAA,IAAA,OAAAK,EAAA,KAAAL,GAAAG,EAAAG,MAAA,KAAAC,WAuBd,O,EAvBcP,G,EAAA,EAAAQ,IAAA,SAAAC,MAIf,WACE,IAAAC,EAAgEC,KAAKb,MAA7Dc,EAAKF,EAALE,MAAOC,EAAOH,EAAPG,QAASC,EAAMJ,EAANI,OAAQf,EAAqBW,EAArBX,sBAAuBgB,EAAIL,EAAJK,KACvD,OAAKH,EAGHI,gBAACC,IAAM,CAACC,OAAiB,WAATH,GACdC,gBAACtB,EAAc,CAACK,sBAAuBA,GACrCiB,gBAACG,IAAoBP,GACpBC,GACCG,gBAACjC,EAAgB,KACfiC,gBAACzB,EAAoB,KAAEsB,GACvBG,gBAACzB,EAAoB,CAAC6B,MAAO,CAAEC,aAAc,IAC1CP,MAVM,U,8EAiBpBd,EAvBc,CAASgB,aAApBhB,EACGb,YAAc,cADjBa,EAEGsB,aAAe,GAwBTtB","file":"static/scripts/image-module-6b8e2550a82ab89b1eaa.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 { mediaQuery } from '../../styles/media'\nimport ImageFullscreen from '../../components/ImageFullscreen/ImageFullscreen'\n\nexport type Props = ImageModuleViewModel & {\n  customWidthPercentage?: number,\n}\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`\n\nconst ImageContainer = styled.div`\n  width: 100%;\n\n  ${mediaQuery.md`\n  width: ${props => props.customWidthPercentage}%;\n  `}\n`\n\nclass ImageModule extends React.Component<Props, {}> {\n  static displayName = 'ImageModule'\n  static defaultProps = {}\n\n  render() {\n    const { image, caption, credit, customWidthPercentage, area } = this.props\n    if (!image) return null\n\n    return (\n      <Ribbon noGrid={area === 'narrow'}>\n        <ImageContainer customWidthPercentage={customWidthPercentage}>\n          <ImageFullscreen {...image} />\n          {caption && (\n            <CaptionContainer>\n              <CaptionContainerItem>{caption}</CaptionContainerItem>\n              <CaptionContainerItem style={{ marginBottom: 0 }}>\n                {credit}\n              </CaptionContainerItem>\n            </CaptionContainer>\n          )}\n        </ImageContainer>\n      </Ribbon>\n    )\n  }\n}\n\nexport default ImageModule\n"],"sourceRoot":""}