{"version":3,"file":"component---src-templates-media-js-871d84674ece0debaf2f.js","mappings":"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","sources":["webpack://ocius-website/./src/components/Segmented.js","webpack://ocius-website/./src/components/Card.js","webpack://ocius-website/./src/templates/media.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\nimport { withProp } from 'styled-tools';\n\n// Import media queries\nimport mq from '../common/mq';\n\nconst SegmentedContainer = styled.div`\n  padding-bottom: ${withProp('multiplier', (multiplier) => `${multiplier * 2.25}rem`)};\n  margin-bottom: ${withProp('multiplier', (multiplier) => `${multiplier * 2.25}rem`)};\n  ${(props) =>\n    props.borderBottom &&\n    css`\n      border-bottom: 2px solid #e4e5e6;\n    `}\n\n  @media (min-width: ${mq.min['1024']}) {\n    padding-bottom: ${withProp('multiplier', (multiplier) => `${multiplier * 3.6}rem`)};\n    margin-bottom: ${withProp('multiplier', (multiplier) => `${multiplier * 3.6}rem`)};\n  }\n`;\n\nfunction Segmented({ children, borderBottom, multiplier, ...rest }) {\n  return (\n    <SegmentedContainer\n      className=\"Segmented\"\n      multiplier={multiplier}\n      borderBottom={borderBottom}\n      {...rest}\n    >\n      {children}\n    </SegmentedContainer>\n  );\n}\n\nSegmented.propTypes = {\n  children: PropTypes.node.isRequired,\n  borderBottom: PropTypes.bool,\n  multiplier: PropTypes.number,\n};\n\nSegmented.defaultProps = {\n  borderBottom: false,\n  multiplier: 1,\n};\n\nexport default Segmented;\n","/* eslint-disable react/forbid-prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { GatsbyImage, getImage } from 'gatsby-plugin-image';\nimport BackgroundImage from 'gatsby-background-image';\nimport { convertToBgImage } from 'gbimage-bridge';\nimport styled from 'styled-components';\nimport Heading from './Heading';\nimport Button from './Button';\n\nconst CardThumbnail = styled(BackgroundImage)`\n  height: 250px;\n  border-top-left-radius: 10px;\n  border-top-right-radius: 10px;\n  overflow: hidden;\n  box-shadow: rgba(46, 41, 51, 0.08) 0px 1px 2px, rgba(71, 63, 79, 0.08) 0px 2px 4px;\n  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s;\n`;\n\nconst CardWrapper = styled.div`\n  display: flex;\n  flex: 1 0 0px;\n  flex-direction: column;\n  height: 100%;\n  margin: 1.5rem 0.5rem;\n  max-width: 100%;\n  position: relative;\n\n  :hover ${CardThumbnail} {\n    transform: translateY(-0.25rem);\n    box-shadow: rgba(46, 41, 51, 0.08) 0px 4px 8px, rgba(71, 63, 79, 0.16) 0px 8px 16px;\n  }\n`;\n\nconst CardHeading = styled(Heading)`\n  color: #2b2e34;\n  font-size: 18px;\n  line-height: ${32 / 22};\n  margin-top: 1.7em;\n`;\n\nconst ExternalLink = styled.a`\n  border-bottom: medium none;\n  color: ${(props) => props.theme.colors.themeDarker};\n  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s;\n`;\n\nconst CardBody = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0 16px 32px;\n  height: 100%;\n`;\n\nconst Content = styled.div`\n  padding-bottom: 10px;\n  flex: 1;\n`;\n\nconst Source = styled.div`\n  font-size: 1em;\n  margin: 0 0 0.25em;\n  display: flex;\n`;\n\nconst Date = styled.p`\n  color: ${(props) => props.theme.colors.themePrimary};\n  font-size: 0.9em;\n  font-weight: 300;\n  line-height: ${28 / 19};\n  margin-top: 0;\n`;\n\nfunction Card({ url, thumbnail, title, source, logo, date }) {\n  // Get ImageData.\n  const imageData = getImage(thumbnail);\n  // Convert to bg image\n  const bgImage = convertToBgImage(imageData);\n\n  return (\n    <CardWrapper>\n      <ExternalLink target=\"_blank\" href={url}>\n        <CardThumbnail {...bgImage} />\n      </ExternalLink>\n      <CardBody>\n        <Content>\n          <CardHeading level={2} size=\"small\" weight=\"thick\">\n            {title}\n          </CardHeading>\n          <Date>{date}</Date>\n          <Source>\n            {logo && (\n              <GatsbyImage\n                image={logo.childImageSharp.gatsbyImageData}\n                style={{ width: 25, marginRight: 10 }}\n                alt=\"\"\n              />\n            )}\n            {source}\n          </Source>\n        </Content>\n\n        <Button color=\"blue\" size=\"tiny\" href={url} target=\"_blank\">\n          Read more\n        </Button>\n      </CardBody>\n    </CardWrapper>\n  );\n}\n\nCard.propTypes = {\n  url: PropTypes.string,\n  thumbnail: PropTypes.shape({\n    alt: PropTypes.string,\n    childImageSharp: PropTypes.object,\n    image: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n    style: PropTypes.object,\n  }).isRequired,\n  logo: PropTypes.shape({\n    alt: PropTypes.string,\n    childImageSharp: PropTypes.object,\n    image: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n    style: PropTypes.object,\n  }),\n  source: PropTypes.string,\n  date: PropTypes.string,\n};\n\nCard.defaultProps = {\n  url: '#',\n  source: '',\n  date: '',\n  logo: {},\n};\n\nexport default Card;\n","import React, { useState, useCallback } from 'react';\nimport { Grid, Col, Row } from '@r007/react-styled-flexboxgrid';\nimport styled from 'styled-components';\nimport { graphql, withPrefix } from 'gatsby';\nimport Heading from '../components/Heading';\nimport SEO from '../components/SEO';\nimport Segmented from '../components/Segmented';\nimport Layout from '../layouts/Layout';\nimport NewsletterForm from '../components/NewsletterForm';\nimport ContactUs from '../components/ContactUs';\nimport Card from '../components/Card';\nimport Button from '../components/Button';\nimport { Spacing } from '../components/common';\n\nconst Pagination = styled.nav`\n  padding: 6.4rem;\n`;\n\nfunction MediaPage({ data, pageContext }) {\n  const initialPage = data.allLinksYaml;\n  const [latestPage, setLatestPage] = useState(pageContext);\n  const [mediaPosts, setMediaPosts] = useState(initialPage.edges);\n\n  /**\n   * Callback for making an XHR requests and dynamically add new data\n   */\n  const loadNextPage = useCallback(async () => {\n    if (!latestPage.nextPagePath) return;\n\n    const path = withPrefix(`/page-data${latestPage.nextPagePath}/page-data.json`);\n\n    const res = await fetch(path);\n    const json = await res.json();\n\n    setMediaPosts((state) => [...state, ...json.result.data.allLinksYaml.edges]);\n    setLatestPage(json.result.pageContext);\n  }, [latestPage]);\n\n  return (\n    <Layout>\n      <SEO title=\"In The News\" />\n\n      <Grid>\n        <Row>\n          <Col xs={12} md={12} lg={12}>\n            <Spacing $value=\"80px\" />\n            <Heading level={1} size=\"huge\" weight=\"thick\" underline=\"left\">\n              Media\n            </Heading>\n          </Col>\n        </Row>\n        <section className=\"page-content\">\n          <Row style={{ padding: '2.5rem 0' }}>\n            {mediaPosts.map(({ node }) => (\n              <Col xs={12} md={6} lg={4} key={node.id}>\n                <Card\n                  url={node.url}\n                  thumbnail={node.thumbnail}\n                  title={node.title}\n                  source={node.source}\n                  date={node.date}\n                  logo={node.logo}\n                />\n              </Col>\n            ))}\n          </Row>\n          {latestPage.nextPagePath && (\n            <Pagination className=\"centered\">\n              <Button type=\"button\" color=\"blue\" size=\"small\" onClick={loadNextPage}>\n                Load more\n              </Button>\n            </Pagination>\n          )}\n        </section>\n      </Grid>\n\n      <Segmented>\n        <NewsletterForm />\n      </Segmented>\n\n      <Segmented>\n        <ContactUs />\n      </Segmented>\n    </Layout>\n  );\n}\n\nexport const query = graphql`\n  query MediaCoverageQuery($limit: Int!, $skip: Int!) {\n    allLinksYaml(sort: { fields: [date], order: DESC }, limit: $limit, skip: $skip) {\n      edges {\n        node {\n          id\n          url\n          title\n          source\n          date(formatString: \"DD MMMM, YYYY\")\n          thumbnail {\n            childImageSharp {\n              gatsbyImageData(width: 400, layout: CONSTRAINED)\n            }\n          }\n          logo {\n            childImageSharp {\n              gatsbyImageData(layout: FULL_WIDTH)\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\nexport default MediaPage;\n"],"names":["SegmentedContainer","styled","withProp","multiplier","props","borderBottom","css","mq","Segmented","children","rest","className","defaultProps","CardThumbnail","BackgroundImage","CardWrapper","CardHeading","Heading","ExternalLink","theme","colors","themeDarker","CardBody","Content","Source","Date","themePrimary","Card","url","thumbnail","title","source","logo","date","imageData","getImage","bgImage","convertToBgImage","target","href","level","size","weight","G","image","childImageSharp","gatsbyImageData","style","width","marginRight","alt","Button","color","Pagination","data","pageContext","initialPage","allLinksYaml","useState","latestPage","setLatestPage","edges","mediaPosts","setMediaPosts","loadNextPage","useCallback","nextPagePath","path","withPrefix","fetch","res","json","state","result","Layout","SEO","xs","md","lg","$value","underline","padding","map","node","key","id","type","onClick","NewsletterForm","ContactUs"],"sourceRoot":""}