{"version":3,"sources":["webpack:///./src/templates/work/index.js","webpack:///./src/components/atomic-design/atoms/page-header/styles.js","webpack:///./src/components/atomic-design/atoms/page-header/index.js","webpack:///./src/components/atomic-design/organisms/work-entries/styles.js","webpack:///./src/components/atomic-design/organisms/work-entries/index.js","webpack:///./src/components/atomic-design/molecules/work/styles.js","webpack:///./src/components/atomic-design/molecules/work/index.js"],"names":["workListQuery","Work","props","location","pageHeaderData","data","allContentfulPage","edges","node","metatagImage","file","url","metatagDescription","metatagTitle","path","pathname","bodyType","title","description","charSet","image","viewport","type","padding","theme","newTheme","spacing","headerSubtitle","subTitle","documentToReactComponents","headerTitle","json","headerDescription","color","gradient","text","works","allContentfulCaseStudy","ContainerPageHeader","styled","div","breakpoints","tablet","PageHeaderTitle","h1","font","text1","size","lineHeight","grey","light","text2","PageHeaderSubtitle","h2","title1","weight","regular","black","title3","PageHeaderDescription","p","main","mobile","secondary","PageHeader","defaultProps","MainContainer","ContainerGrid","WorkEntries","requiredFields","fluid","component","map","work","validateCaseStudyEntry","xs","sm","md","lg","key","slug","contentful_id","thumbnail","subtitle","LimitedAbstract","height","maxWidthText","obj","reqFields","Container","border","radius","medium","shadow","white","transition","WorkType","h6","primary","Title","h5","Subtitle","text3","InformationContainer","CallToAction","IconContainer","to","rel","alt","fromContentful","mobileHeight","smallMobileHeight","flex"],"mappings":"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","file":"component---src-templates-work-index-js-ad8cf22a210058bd73b8.js","sourcesContent":["import React from 'react';\nimport { graphql } from 'gatsby';\n\nimport Layout from 'core/layout';\nimport MetaTags from 'core/meta-tags/index';\nimport WorkEntries from 'atomic-design/organisms/work-entries';\nimport PageSection from 'atomic-design/atoms/page-section';\nimport theme from 'styles/theme';\nimport PageHeader from 'atomic-design/atoms/page-header';\nimport { documentToReactComponents } from '@contentful/rich-text-react-renderer';\n\nexport const workListQuery = graphql`\n  query workListQuery {\n    allContentfulCaseStudy(sort: { fields: publishedDate, order: DESC }) {\n      edges {\n        node {\n          title\n          slug\n          subtitle\n          LimitedAbstract\n          body {\n            json\n          }\n          thumbnail {\n            contentful_id\n            title\n            file {\n              url\n            }\n          }\n          technologies {\n            name\n            url\n            image {\n              file {\n                url\n              }\n              contentful_id\n              description\n            }\n          }\n          filteredIn {\n            optionName\n          }\n        }\n      }\n    }\n    allContentfulPage(filter: { url: { eq: \"work\" } }) {\n      edges {\n        node {\n          headerTitle {\n            json\n          }\n          headerSubtitle\n          headerDescription {\n            headerDescription\n          }\n          metatagImage {\n            file {\n              url\n            }\n          }\n          metatagTitle\n          metatagDescription\n        }\n      }\n    }\n  }\n`;\n\nconst Work = props => {\n  const { location } = props;\n  const pageHeaderData = props.data.allContentfulPage.edges[0].node;\n  const metatagImage = props.data.allContentfulPage.edges[0].node.metatagImage.file.url;\n  const metatagDescription = props.data.allContentfulPage.edges[0].node.metatagDescription;\n  const metatagTitle = props.data.allContentfulPage.edges[0].node.metatagTitle;\n\n  return (\n    <Layout path={location.pathname} bodyType=\"xWide\">\n      <MetaTags\n        title={metatagTitle}\n        description={metatagDescription}\n        charSet=\"utf-8\"\n        image={metatagImage}\n        viewport=\"width=device-width, initial-scale=1\"\n        type=\"website\"\n      />\n      <PageSection padding={`0 0 ${theme.newTheme.spacing(22)} 0`}>\n        <PageHeader\n          title={pageHeaderData.headerSubtitle}\n          subTitle={documentToReactComponents(pageHeaderData.headerTitle.json)}\n          description={pageHeaderData.headerDescription.headerDescription}\n          color={theme.newTheme.color.gradient.text}\n        />\n      </PageSection>\n\n      <PageSection padding={`0 0 ${theme.newTheme.spacing(22)} 0`}>\n        <WorkEntries works={props.data.allContentfulCaseStudy.edges} />\n      </PageSection>\n    </Layout>\n  );\n};\n\nexport default Work;\n","import styled from 'styled-components';\n\nexport const ContainerPageHeader = styled.div`\n  padding-top: ${({ theme }) => theme.newTheme.spacing(16)};\n  position: relative;\n  width: 100%;\n  z-index: 9;\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    padding-top: ${({ theme }) => theme.newTheme.spacing(6)};\n  }\n`;\n\nexport const PageHeaderTitle = styled.h1`\n  font-size: ${({ theme }) => theme.newTheme.font.text1.size};\n  line-height: ${({ theme }) => theme.newTheme.font.text1.lineHeight};\n  color: ${({ theme }) => theme.newTheme.color.grey.light};\n  margin: 0;\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    font-size: ${({ theme }) => theme.newTheme.font.text2.size};\n    line-height: ${({ theme }) => theme.newTheme.font.text2.lineHeight};\n  }\n`;\n\nexport const PageHeaderSubtitle = styled.h2`\n  font-size: ${({ theme }) => theme.newTheme.font.title1.size};\n  line-height: ${({ theme }) => theme.newTheme.font.title1.lineHeight};\n  font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n  margin: ${({ theme }) => theme.newTheme.spacing(10)} 0;\n  color: ${({ theme }) => theme.newTheme.color.black};\n  width: 80%;\n\n  u {\n    text-decoration: none;\n    display: block;\n  }\n\n  b {\n    background: ${({ color }) => color};\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  p {\n    margin: 0;\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    width: 100%;\n    font-size: ${({ theme }) => theme.newTheme.font.title3.size};\n    line-height: ${({ theme }) => theme.newTheme.font.title3.lineHeight};\n  }\n`;\n\nexport const PageHeaderDescription = styled.p`\n  font-size: ${({ theme }) => theme.newTheme.font.text1.size};\n  line-height: ${({ theme }) => theme.newTheme.font.text1.lineHeight};\n  color: ${({ theme }) => theme.newTheme.color.grey.main};\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    line-height: ${({ theme }) => theme.lineHeight.secondary};\n  }\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport theme from 'styles/theme';\n\nimport {\n  ContainerPageHeader,\n  PageHeaderTitle,\n  PageHeaderSubtitle,\n  PageHeaderDescription,\n} from './styles';\n\nconst PageHeader = ({ title, subTitle, description, color }) => {\n  return (\n    <ContainerPageHeader>\n      <PageHeaderTitle>{title}</PageHeaderTitle>\n      <PageHeaderSubtitle color={color}>{subTitle}</PageHeaderSubtitle>\n      {description && <PageHeaderDescription>{description}</PageHeaderDescription>}\n    </ContainerPageHeader>\n  );\n};\n\nPageHeader.propTypes = {\n  title: PropTypes.string.isRequired,\n  subTitle: PropTypes.string.isRequired,\n  description: PropTypes.string.isRequired,\n  color: PropTypes.string,\n};\n\nPageHeader.defaultProps = {\n  color: theme.newTheme.color.gradient.text,\n};\n\nexport default PageHeader;\n","import styled from 'styled-components';\n\nexport const MainContainer = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: ${({ theme }) => theme.newTheme.spacing(2)};\n  button {\n    width: fit-content;\n  }\n`;\n\nexport const ContainerGrid = styled.div`\n  width: 100%;\n  padding: 0 !important;\n  margin: 0 !important;\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Container, Row, Col } from 'react-grid-system';\nimport Work from 'atomic-design/molecules/work';\nimport MissingDataCard from 'atomic-design/atoms/missing-data-card';\nimport { MainContainer, ContainerGrid } from './styles';\nimport { validateCaseStudyEntry } from '../../../../common/validations';\n\nconst WorkEntries = ({ works }) => {\n  const requiredFields = ['title', 'subtitle', 'slug', 'LimitedAbstract', 'thumbnail'];\n\n  return (\n    <MainContainer>\n      <Container fluid={true} component={ContainerGrid}>\n        <Row>\n          {works.map(work => (\n            validateCaseStudyEntry(work.node) ?\n              <Col xs={12} sm={12} md={12} lg={6}>\n                <Work\n                  key={work.node.slug}\n                  slug={work.node.slug}\n                  contentful_id={work.node.thumbnail.contentful_id}\n                  title={work.node.title}\n                  subtitle={work.node.subtitle}\n                  type={work.node.LimitedAbstract}\n                  height=\"15rem\"\n                  maxWidthText=\"55%\"\n                />\n              </Col> :\n              <Col xs={12} sm={12} md={12} lg={6}>\n                <MissingDataCard key={work.node?.slug && work.node?.slug} obj={work.node} reqFields={requiredFields}></MissingDataCard>\n              </Col>))}\n        </Row>\n      </Container>\n    </MainContainer>\n  );\n};\n\nWorkEntries.propTypes = {\n  works: PropTypes.arrayOf(\n    PropTypes.shape({\n      node: PropTypes.shape({\n        slug: PropTypes.string.isRequired,\n        thumbnail: PropTypes.shape({\n          contentful_id: PropTypes.string.isRequired,\n        }),\n        title: PropTypes.string,\n      }),\n    })\n  ),\n};\n\nWorkEntries.defaultProps = {\n  works: [],\n};\n\nexport default WorkEntries;\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n  display: flex;\n  margin: ${({ theme }) => theme.newTheme.spacing(5)} 0;\n  border-radius: ${({ theme }) => theme.newTheme.border.radius.medium};\n  overflow: hidden;\n  box-shadow: ${({ theme }) => theme.newTheme.shadow.main};\n  height: ${props => props.height};\n  background-color: ${({ theme }) => theme.newTheme.color.white};\n\n  &:hover {\n    h5 {\n      text-decoration: underline;\n    }\n\n    @keyframes zoom {\n      from {\n        transform: scale(1);\n      }\n      to {\n        transform: scale(1.05);\n      }\n    }\n\n    img {\n      animation: zoom 0.3s ease-in-out 0s 1;\n      transform: scale(1.05);\n    }\n\n    svg {\n      transition: ${({ theme }) => theme.newTheme.transition.main};\n      transform: translateY(10px);\n    }\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    height: inherit;\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    flex-direction: column;\n    height: inherit;\n  }\n`;\n\nexport const WorkType = styled.h6`\n  font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n  font-size: ${({ theme }) => theme.newTheme.font.text2.size};\n  line-height: ${({ theme }) => theme.newTheme.font.text2.lineHeight};\n  color: ${({ theme }) => theme.newTheme.color.primary.main};\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  -webkit-box-orient: vertical;\n`;\nexport const Title = styled.h5`\n  color: ${({ theme }) => theme.newTheme.color.grey.main};\n  font-weight: ${({ theme }) => theme.newTheme.font.weight.medium};\n  font-size: ${({ theme }) => theme.newTheme.font.text2.size};\n  line-height: ${({ theme }) => theme.newTheme.font.text2.lineHeight};\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  line-clamp: 3;\n  -webkit-box-orient: vertical;\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    margin: ${({ theme }) => theme.newTheme.spacing(5)} 0;\n  }\n`;\nexport const Subtitle = styled.p`\n  margin: 0;\n  color: ${({ theme }) => theme.newTheme.color.grey.main};\n  font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n  font-size: ${({ theme }) => theme.newTheme.font.text3.size};\n  line-height: ${({ theme }) => theme.newTheme.font.text3.lineHeight};\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  -webkit-box-orient: vertical;\n`;\n\nexport const InformationContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: ${({ theme }) => theme.newTheme.spacing(6)};\n  max-width: ${props => props.maxWidthText};\n  height: 100%;\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    max-width: 100%;\n    flex-grow: 1;\n    ${Subtitle} {\n      display: none;\n    }\n  }\n`;\n\nexport const CallToAction = styled.div`\n  width: 100%;\n  height: 10%;\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.newTheme.spacing(4)};\n  p {\n    font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n    font-size: ${({ theme }) => theme.newTheme.font.text3.size};\n    line-height: ${({ theme }) => theme.newTheme.font.text3.lineHeight};\n    color: ${({ theme }) => theme.newTheme.color.grey.light};\n\n    @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n      margin: 0;\n    }\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    gap: ${({ theme }) => theme.newTheme.spacing(2)};\n  }\n`;\n\nexport const IconContainer = styled.div`\n  transform: rotate(-90deg);\n\n  svg {\n    transition: ${({ theme }) => theme.newTheme.transition.main};\n    height: ${({ theme }) => theme.newTheme.spacing(5)};\n  }\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport theme from 'styles/theme';\nimport { ChevronArrow } from 'ui/svg';\nimport Link from 'atomic-design/atoms/link';\nimport Image from 'core/image';\nimport {\n  Container,\n  InformationContainer,\n  WorkType,\n  Title,\n  Subtitle,\n  CallToAction,\n  IconContainer,\n} from './styles';\n\nconst Work = ({ slug, contentful_id, title, subtitle, type, height, maxWidthText }) => (\n  <Link to={`/work/${slug}`} rel={slug}>\n    <Container height={height}>\n      <Image\n        alt={title}\n        contentful_id={contentful_id}\n        fromContentful\n        mobileHeight=\"180px\"\n        smallMobileHeight=\"180px\"\n        height=\"inherit\"\n        padding=\"0\"\n        flex=\"1\"\n      />\n      <InformationContainer maxWidthText={maxWidthText}>\n        <WorkType>{type}</WorkType>\n        <Title>{title}</Title>\n        <CallToAction>\n          <p>Read the case study</p>\n          <IconContainer>\n            <ChevronArrow color={theme.newTheme.color.grey.light} />\n          </IconContainer>\n        </CallToAction>\n      </InformationContainer>\n    </Container>\n  </Link>\n);\n\nWork.propTypes = {\n  slug: PropTypes.string.isRequired,\n  title: PropTypes.string.isRequired,\n  subtitle: PropTypes.string.isRequired,\n  contentful_id: PropTypes.string.isRequired,\n  height: PropTypes.string,\n  maxWidthText: PropTypes.string,\n};\n\nWork.defaultProps = {\n  height: '',\n  maxWidthText: '100%',\n};\n\nexport default Work;\n"],"sourceRoot":""}