{"version":3,"sources":["webpack:///./src/components/atomic-design/atoms/missing-data-page/styles.js","webpack:///./src/components/atomic-design/atoms/missing-data-page/index.js","webpack:///./src/components/atomic-design/molecules/bubbles/styles.js","webpack:///./src/components/atomic-design/molecules/bubbles/bubble.js","webpack:///./src/components/atomic-design/molecules/bubbles/index.js","webpack:///./src/components/atomic-design/organisms/work-rich-text/styles.js","webpack:///./src/templates/work/styles.js","webpack:///./src/templates/work.js","webpack:///./src/components/core/image/hero-image/styles.js","webpack:///./src/components/core/image/hero-image/index.js"],"names":["HeaderText","styled","div","theme","newTheme","spacing","font","title1","size","lineHeight","weight","regular","color","error","title6","grey","main","semiBold","breakpoints","mobile","title2","text1","MissingDataPage","errorDetails","JSON","parse","stringify","details","errorOriginal","_original","containerSize","map","err","message","context","value","key","getDescription","Object","entries","k","v","Content","Circle","service","consultancy","background","border","radius","full","BubblesContainerStyled","Bubble","image","name","src","alt","aria-label","Bubbles","elements","element","url","imageSvg","file","imageDescription","description","colors","primary","text2","NavigationTitle","h3","title3","black","tabletLandscape","Diagonal","ChipContainer","medium","tablet","title4","query","Work","pageContext","data","location","previous","next","work","validateCaseStudy","contentfulCaseStudy","bodyType","path","pathname","title","charSet","addProtocol","metaTagImage","type","viewport","LimitedAbstract","subtitle","technologies","hero","contentful_id","fromContentful","desktopHeight","tabletHeight","mobileHeight","borderRadius","getCategoryColor","json","body","content","nodeType","options","richTextOptions","light","margin","padding","mobilePadding","node","previousTo","slug","undefined","nextTo","from","withArrow","defaultProps","Container","smallMobile","HeroImage","children"],"mappings":"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","file":"component---src-templates-work-js-b00647eb47d1f3b095f3.js","sourcesContent":["import styled from 'styled-components';\n\nexport const HeaderText = styled.div`\n  display: flex;\n  flex-direction: column;\n  padding: ${({ theme }) => `${theme.newTheme.spacing(15)} 0`};\n  width: 100%;\n\n  h1 {\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    color: ${({ theme }) => theme.newTheme.color.error};\n  }\n\n  p {\n    font-size: ${({ theme }) => theme.newTheme.font.title6.size};\n    line-height: ${({ theme }) => theme.newTheme.font.title6.lineHeight};\n    font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n    color: ${({ theme }) => theme.newTheme.color.grey.main};\n    margin: 0;\n    b{\n        font-weight: ${({ theme }) => theme.newTheme.font.weight.semiBold};\n    }\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    h1 {\n      font-size: ${({ theme }) => theme.newTheme.font.title2.size};\n      line-height: ${({ theme }) => theme.newTheme.font.title2.lineHeight};\n      font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n    }\n    p {\n      font-size: ${({ theme }) => theme.newTheme.font.text1.size};\n      line-height: ${({ theme }) => theme.newTheme.font.text1.lineHeight};\n      font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n    }\n  }\n`;","import React from 'react';\n\nimport PageSection from '../page-section';\nimport { HeaderText } from './styles';\n\nconst MissingDataPage = error => {\n  const errorDetails = JSON.parse(JSON.stringify(error)).error.details;\n  const errorOriginal = JSON.parse(JSON.stringify(error)).error._original;\n\n  const getDescription = err =>\n    err.context?.value\n      ? `${err.context?.key}: ${err.context?.value}.`\n      : `${err.context?.key} is invalid.`;\n\n  return (\n      <PageSection containerSize=\"s\">\n        <HeaderText>\n          <h1> Error displaying page information </h1>\n          <p>\n            {errorDetails.map(err => (\n              <>\n                <b>{err.message}.</b>\n                <br />\n                {getDescription(err)}\n                <hr />\n              </>\n            ))}\n          </p>\n          <p>\n            <p>More information:</p>\n            <br />\n            {Object.entries(errorOriginal).map(([k, v]) => {\n              return (\n                <>\n                  {' '}\n                  <p>\n                    <b>{k}:</b> {JSON.stringify(v)}\n                  </p>\n                  <br />\n                </>\n              );\n            })}\n          </p>\n        </HeaderText>\n      </PageSection>\n  );\n};\n\nexport default MissingDataPage;\n","import styled from 'styled-components';\n\nexport const Content = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  width: ${({ theme }) => theme.newTheme.spacing(15)};\n  ${({ theme }) =>\n    `margin: ${theme.newTheme.spacing(2)} ${theme.newTheme.spacing(5)} ${theme.newTheme.spacing(\n      3\n    )} 0`};\n\n  h6 {\n    margin: 0;\n    padding-top: ${({ theme }) => theme.newTheme.spacing(2)};\n    visibility: hidden;\n    transition: ease-in-out 6s linear;\n  }\n\n  &:hover {\n    h6 {\n      visibility: inherit;\n      transition: ease-in-out 6s linear;\n    }\n  }\n`;\n\nexport const Circle = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${({ theme }) => theme.newTheme.spacing(15)};\n  height: ${({ theme }) => theme.newTheme.spacing(15)};\n\n  background-color: ${({ theme }) => theme.newTheme.color.service.consultancy.background};\n  border-radius: ${({ theme }) => theme.newTheme.border.radius.full};\n\n  img {\n    filter: invert(57%) sepia(44%) saturate(658%) hue-rotate(180deg) brightness(110%) contrast(101%);\n    width: ${({ theme }) => theme.newTheme.spacing(9)};\n    height: ${({ theme }) => theme.newTheme.spacing(9)};\n  }\n`;\n\nexport const BubblesContainerStyled = styled.div`\n  width: 100%;\n  display: flex;\n  align-content: flex-start;\n  flex-wrap: wrap;\n  padding-top: ${({ theme }) => theme.newTheme.spacing(8)};\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Content, Circle } from './styles';\n\nconst Bubble = ({ image, name }) => {\n  return (\n    <Content>\n      <Circle>\n        <img src={image} alt={name} aria-label={`${name} Logo`} />\n      </Circle>\n      <h6>{name}</h6>\n    </Content>\n  );\n};\n\nBubble.propTypes = {\n  image: PropTypes.string.isRequired,\n  name: PropTypes.string.isRequired,\n};\n\nexport default Bubble;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { BubblesContainerStyled } from './styles';\nimport Bubble from './bubble';\n\nconst Bubbles = ({ elements }) => (\n  <BubblesContainerStyled>\n    {elements &&\n      elements.map(element => (\n        <Bubble\n          key={element.url}\n          url={element.url}\n          image={element.imageSvg.file.url}\n          imageDescription={element.image.description}\n          name={element.name}\n        />\n      ))}\n  </BubblesContainerStyled>\n);\n\nBubbles.propTypes = {\n  elements: PropTypes.string.isRequired,\n};\n\nexport default Bubbles;\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n  width: 100%;\n  margin: 0;\n  padding-bottom: 52px;\n\n  h2 {\n    font-style: normal;\n    font-weight: 500;\n    font-size: 40px;\n    line-height: 60px;\n    letter-spacing: -0.01em;\n    color: ${({ theme }) => theme.colors.primary};\n    margin: 0;\n    padding: 0 0 26px 0;\n\n    b {\n      font-weight: bold;\n    }\n  }\n\n  h3,\n  h4 {\n    margin: 0;\n    font-style: normal;\n    font-weight: 500;\n    font-size: 26px;\n    line-height: 39px;\n    letter-spacing: -0.01em;\n    color: ${({ theme }) => theme.colors.primary};\n    padding: 18px 0 0 0;\n\n    b {\n      font-weight: bold;\n    }\n  }\n\n  p {\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    letter-spacing: -0.01em;\n    color: ${({ theme }) => theme.newTheme.color.grey.main};\n\n    b {\n      font-weight: ${({ theme }) => theme.newTheme.font.weight.semiBold};\n    }\n\n  }\n\n  ul {\n    list-style-type: ' • ';\n    li {\n      color: ${({ theme }) => theme.colors.primary};\n    }\n  }\n\n  a {\n    text-decoration: underline solid ${({ theme }) => theme.colors.primary} 2px;\n  }\n`;\n","import styled from 'styled-components';\n\nexport const NavigationTitle = styled.h3`\n  font-size: ${({ theme }) => theme.newTheme.font.title3.size};\n  line-height: ${({ theme }) => theme.newTheme.font.title3.lineHeight};\n  font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n  color: ${({ theme }) => theme.newTheme.color.black};\n  margin: ${({ theme }) => `0 0 ${theme.newTheme.spacing(20)} 0`};\n  padding: ${({ theme }) => `${theme.newTheme.spacing(20)} 0 0 0`};\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tabletLandscape}) {\n    font-size: ${({ theme }) => theme.newTheme.font.title3.size};\n    line-height: ${({ theme }) => theme.newTheme.font.title3.lineHeight};\n    display: none;\n  }\n`;\n\nexport const Diagonal = styled.div`\n  position: absolute;\n  z-index: 0;\n  left: 0;\n  border-top: ${({ theme }) => `${theme.newTheme.spacing(20)} solid white`};\n  border-left: 100vw solid transparent;\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    border-top: ${({ theme }) => `${theme.newTheme.spacing(10)} solid white`};\n  }\n`;\n\nexport const ChipContainer = styled.div`\n  h4 {\n    margin: 0;\n    font-size: ${({ theme }) => theme.newTheme.font.text1.size};\n    line-height: ${({ theme }) => theme.newTheme.font.text1.lineHeight};\n    font-weight: ${({ theme }) => theme.newTheme.font.weight.medium};\n    color: ${({ theme }) => theme.newTheme.color.primary.main};\n  }\n`;\n\nexport const HeaderText = styled.div`\n  display: flex;\n  flex-direction: column;\n  padding: ${({ theme }) => `${theme.newTheme.spacing(15)} 0`};\n  width: 100%;\n\n  h1 {\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    color: ${({ theme }) => theme.newTheme.color.black};\n  }\n\n  p {\n    font-size: ${({ theme }) => theme.newTheme.font.title6.size};\n    line-height: ${({ theme }) => theme.newTheme.font.title6.lineHeight};\n    font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n    color: ${({ theme }) => theme.newTheme.color.grey.main};\n    margin: 0;\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    h1 {\n      font-size: ${({ theme }) => theme.newTheme.font.title2.size};\n      line-height: ${({ theme }) => theme.newTheme.font.title2.lineHeight};\n      font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n    }\n    p {\n      font-size: ${({ theme }) => theme.newTheme.font.text1.size};\n      line-height: ${({ theme }) => theme.newTheme.font.text1.lineHeight};\n      font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n    }\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    padding: ${({ theme }) => `${theme.newTheme.spacing(10)} 0`};\n    h1 {\n      font-size: ${({ theme }) => theme.newTheme.font.title4.size};\n      line-height: ${({ theme }) => theme.newTheme.font.title4.lineHeight};\n      font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n    }\n  }\n`;\n","import React from 'react';\n\nimport { graphql } from 'gatsby';\nimport { documentToReactComponents } from '@contentful/rich-text-react-renderer';\nimport PropTypes from 'prop-types';\n\nimport Layout from 'core/layout';\nimport MetaTags from 'core/meta-tags/index';\nimport Image from 'core/image';\nimport Bubbles from 'atomic-design/molecules/bubbles';\nimport HeroImage from 'core/image/hero-image';\nimport WorkRichText from 'atomic-design/organisms/work-rich-text';\nimport NavigationCards from 'atomic-design/molecules/navigation-cards';\nimport theme from 'styles/theme';\nimport { addProtocol, getCategoryColor } from 'common/helpers';\nimport richTextOptions from 'common/rich-text-options';\nimport PageSection from 'atomic-design/atoms/page-section';\nimport { HeaderText } from './work/styles';\nimport { Diagonal, NavigationTitle, ChipContainer } from './work/styles';\nimport { validateCaseStudy } from '../common/validations';\nimport MissingDataPage from '../components/atomic-design/atoms/missing-data-page';\nimport RichTextWrapper from 'atomic-design/organisms/rich-text-wrapper';\n\nexport const query = graphql`\n  query ($slug: String!) {\n    contentfulCaseStudy(slug: { eq: $slug }) {\n      title\n      subtitle\n      slug\n      description\n      LimitedAbstract\n      technologies {\n        name\n        url\n        image {\n          file {\n            url\n          }\n          description\n          contentful_id\n        }\n        imageSvg {\n          file {\n            url\n          }\n          description\n          contentful_id\n        }\n      }\n      thumbnail {\n        contentful_id\n        file {\n          url\n        }\n      }\n      hero {\n        title\n        contentful_id\n      }\n      body {\n        json\n      }\n      metaTagImage {\n        contentful_id\n        file {\n          url\n        }\n      }\n    }\n  }\n`;\n\nconst Work = ({ pageContext, data, location }) => {\n  const { previous, next } = pageContext;\n  const work = validateCaseStudy(data.contentfulCaseStudy);\n  return (\n    <Layout bodyType=\"xWide\" path={location.pathname}>\n      {work.error ? (\n        <MissingDataPage error={work.error}></MissingDataPage>\n      ) : (\n        <>\n          <MetaTags\n            title={`${work.title} - NaNLABS`}\n            description={work.description}\n            charSet=\"utf-8\"\n            image={addProtocol(work.metaTagImage.file.url)}\n            type=\"article\"\n            viewport=\"width=device-width, initial-scale=1\"\n          />\n          <PageSection containerSize=\"s\">\n            <HeaderText>\n              <ChipContainer>\n                <h4>{work.LimitedAbstract}</h4>\n              </ChipContainer>\n              <h1> {work.title} </h1>\n              <p> {work.subtitle}</p>\n            </HeaderText>\n            <Bubbles elements={work.technologies} />\n          </PageSection>\n          <HeroImage>\n            <Image\n              alt={work.hero.title}\n              contentful_id={work.hero.contentful_id}\n              fromContentful\n              desktopHeight=\"408px\"\n              tabletHeight=\"316px\"\n              mobileHeight=\"255px\"\n              borderRadius={theme.newTheme.border.radius.medium}\n            />\n          </HeroImage>\n          <PageSection containerSize=\"s\">\n            <RichTextWrapper\n              color={getCategoryColor('ourWork')}\n              json={{\n                data: work.body.json.data,\n                content: work.body.json.content,\n                nodeType: work.body.json.nodeType,\n              }}\n              options={richTextOptions}\n            />\n          </PageSection>\n        </>\n      )}\n\n      <PageSection\n        background={`${theme.newTheme.color.primary.light}20`}\n        margin={`${theme.newTheme.spacing(25)} 0 0 0`}\n        padding={`0 0 ${theme.newTheme.spacing(25)} 0`}\n        mobilePadding={`0 0 ${theme.newTheme.spacing(1)} 0`}\n      >\n        <Diagonal />\n        <NavigationTitle>More case studies</NavigationTitle>\n        <NavigationCards\n          previous={previous.node}\n          previousTo={`/work/${previous.node.slug}`}\n          next={next ? next.node : undefined}\n          nextTo={`/work/${next.node.slug}`}\n          from=\"Work\"\n          withArrow\n        />\n      </PageSection>\n    </Layout>\n  );\n};\n\nWork.propTypes = {\n  work: PropTypes.shape({\n    title: PropTypes.string.isRequired,\n    subtitle: PropTypes.string.isRequired,\n    description: PropTypes.string.isRequired,\n    metaTagImage: PropTypes.shape({\n      file: PropTypes.shape({\n        url: PropTypes.string.isRequired,\n      }),\n    }),\n    hero: PropTypes.shape({\n      title: PropTypes.string.isRequired,\n      contentful_id: PropTypes.string.isRequired,\n    }),\n    body: PropTypes.shape({\n      json: PropTypes.instanceOf(Object),\n    }),\n  }),\n};\n\nWork.defaultProps = {\n  work: null,\n};\nexport default Work;\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n  max-width: 992px;\n  width: 992px;\n  margin: 0 0 0 50%;\n  transform: translateX(-50%);\n  align-self: flex-start;\n  padding: 52px 0;\n\n  @media only screen and (${({ theme }) => theme.breakpoints.tablet}) {\n    width: 100%;\n    max-width: 991px;\n  }\n\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\n    width: 100%;\n    max-width: 767px;\n  }\n\n  @media only screen and (${({ theme }) => theme.breakpoints.smallMobile}) {\n    width: 355px;\n    max-width: 355px;\n  }\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Container } from './styles';\n\nconst HeroImage = ({ children }) => <Container>{children}</Container>;\n\nHeroImage.propTypes = {\n  children: PropTypes.node.isRequired,\n};\nexport default HeroImage;\n"],"sourceRoot":""}