{"version":3,"sources":["webpack:///./src/components/ingredients/IngredientSummary.js","webpack:///./src/templates/routes/ingredients.js"],"names":["Container","styled","div","attrs","className","rem","Font","circular","responsive","md","IngredientName","h3","Color","ritualBlue","IngredientLocation","p","IngredientLink","MagicLink","ImageContainer","media","notDesktop","Image","Img","IngredientSummary","props","ingredient","productSku","image","name","manufacturingLocation","to","slug","state","ariaLabel","fluid","loading","fadeIn","alt","title","style","userSelect","userDrag","pointerEvents","touchCallout","Section","section","mobile","OtherIngredientsColumn","sm","OtherIngredientsSubheader","ProductCategoryCardsContainer","Ingredients","data","allContentfulIngredientsPage","edges","node","pageTitle","pageDescription","seo","pagePath","description","modalOpen","componentDidMount","this","updatePageData","label","updateLayoutState","navColor","banner","getLocationPath","locationGroup","toLowerCase","replace","openIngredientsModal","setState","closeIngredientsModal","render","subheadText","ingredientsList","articles","otherIngredients","locationPath","location","article","StickyProductNav","sku","ctaLocation","scrollOffset","showLearnMore","showTopBar","Page","Helmet","bodyAttributes","class","IngredientsHeader","map","i","key","Row","subheader","RitualButton","onClick","bind","Text","id","defaultMessage","ArticlePreview","ProductCategoryCards","OtherIngredientsModal","isOpen","onRequestClose","ingredients","React","Component"],"mappings":"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","file":"component---src-templates-routes-ingredients-js-7400333bcf0bd694ff88.js","sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport Img from \"gatsby-image\";\nimport MagicLink from \"../MagicLink\";\nimport { rem, media, Font, responsive, Color } from \"../../utils/style\";\n\nconst Container = styled.div.attrs({\n  className: \"col-6 col-sm-4 col-md-3\",\n})`\n  margin-bottom: ${rem(40)};\n  ${Font.circular};\n\n  ${responsive.md`\n    margin-bottom: ${rem(80)};\n  `}\n`;\n\nconst IngredientName = styled.h3.attrs({\n  className: \"text-center\",\n})`\n  ${Font.circular}\n  color: ${Color.ritualBlue};\n  margin-bottom: 4px;\n  font-size: ${rem(18)};\n  line-height: ${rem(28)};\n  letter-spacing: 0px;\n\n  ${responsive.md`\n    margin-bottom: 8px;\n    font-size: ${rem(22)};\n    line-height: ${rem(32)};\n    letter-spacing: -0.2px;\n  `}\n`;\n\nconst IngredientLocation = styled.p`\n  ${Font.circular}\n  text-align: center;\n  margin-bottom: 0;\n  font-weight: 300;\n  font-size: ${rem(14)};\n  line-height: ${rem(20)};\n\n  ${responsive.md`\n    font-size: ${rem(16)};\n    line-height: ${rem(22)};\n  `}\n`;\n\nconst IngredientLink = styled(MagicLink)`\n  margin: auto;\n  text-align: center;\n  overflow: hidden;\n`;\n\nconst ImageContainer = styled.div`\n  margin: 0 auto;\n  overflow: hidden;\n  border-radius: 50%;\n  width: calc(100% - ${rem(10)});\n  margin-bottom: ${rem(24)};\n\n  /**\n    * Fixes transform bug seen in Safari that ignores border-radius during the\n    * transition.\n    */\n  position: relative;\n  z-index: 1;\n\n  ${media.notDesktop`\n    width: calc(100% - ${rem(6)});\n    margin-bottom: ${rem(18)}\n  `};\n`;\n\nconst Image = styled(Img)`\n  transition: transform 0.3s ease-out;\n\n  ${IngredientLink}:hover & {\n    transform: scale(1.1);\n  }\n`;\n\nconst IngredientSummary = props => {\n  const { ingredient, productSku } = props;\n  const { image, name, manufacturingLocation } = ingredient;\n\n  return (\n    <Container>\n      <IngredientLink\n        to={`/ingredients/${ingredient.slug}`}\n        state={productSku ? { productSku } : {}}\n        ariaLabel={`Read more about ${name}`}\n      >\n        <ImageContainer>\n          <Image\n            fluid={image.fluid}\n            loading=\"eager\"\n            fadeIn={false}\n            alt={image.title}\n            style={{\n              userSelect: \"none\",\n              userDrag: \"none\",\n              pointerEvents: \"none\",\n              touchCallout: \"none\",\n            }}\n          />\n        </ImageContainer>\n        <IngredientName>{name}</IngredientName>\n        <IngredientLocation>{manufacturingLocation}</IngredientLocation>\n      </IngredientLink>\n    </Container>\n  );\n};\n\nexport default IngredientSummary;\n","import React from \"react\";\nimport { graphql } from \"gatsby\";\nimport styled from \"styled-components\";\n\n// Utils\nimport { rem, media, responsive, Color } from \"../../utils/style\";\nimport { variation } from \"../../utils/launchDarkly\";\n\n// Components\nimport Helmet from \"react-helmet\";\nimport PageSEO from \"../../components/seo/Page\";\nimport Container from \"../../components/Container\";\nimport Row from \"../../components/Row\";\nimport IngredientSummary from \"../../components/ingredients/IngredientSummary\";\nimport IngredientsHeader from \"../../components/ingredients/IngredientsHeader\";\nimport OtherIngredientsModal from \"../../components/ingredients/OtherIngredientsModal\";\nimport ProductCategoryCards from \"../../components/product/ProductCategoryCards\";\nimport ArticlePreview from \"../../components/hub/ArticlePreview\";\nimport StickyProductNav from \"../../components/global/StickyProductNav\";\nimport RitualButton from \"../../components/global/RitualButton\";\nimport Text from \"../../components/Text\";\n\nconst Section = styled.section.attrs({\n  className: \"row\",\n})`\n  margin-top: ${rem(64)};\n\n  ${media.mobile`\n    margin-top: ${rem(40)};\n  `};\n`;\n\nconst OtherIngredientsColumn = styled.div.attrs({\n  className: \"col-12\",\n})`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  margin: 40px 0;\n  padding-top: 24px;\n  padding-left: 20px;\n  padding-right: 20px;\n\n  ${responsive.sm`\n    padding-left: 0;\n    padding-right: 0;\n  `}\n\n  ${responsive.md`\n    margin: 40px 0 80px;\n  `}\n\n  &::before {\n    content: \"\";\n    width: 32px;\n    height: 4px;\n    background-color: ${Color.ritualBlue};\n    position: absolute;\n    top: 0;\n    left: calc(50% - 16px);\n  }\n`;\n\nconst OtherIngredientsSubheader = styled.p`\n  margin: 0 0 24px;\n  font-weight: 500;\n  text-align: center !important;\n\n  width: 100%;\n  letter-spacing: 0px;\n  font-size: ${rem(18)};\n  line-height: ${rem(28)};\n\n  ${responsive.sm`\n    width: 460px;\n  `}\n\n  ${responsive.md`\n    width: 570px;\n    letter-spacing: -0.2px;\n    font-size: ${rem(22)};\n    line-height: ${rem(32)};\n  `}\n`;\n\nconst ProductCategoryCardsContainer = styled.div`\n  h3 {\n    font-size: ${rem(24)};\n    letter-spacing: -0.28px;\n    line-height: ${rem(34)};\n    text-align: center;\n    margin-bottom: 24px;\n\n    ${responsive.md`\n      font-size: ${rem(40)};\n      letter-spacing: -1.17px;\n      line-height: ${rem(54)};\n      margin-bottom:  56px;\n    `}\n  }\n`;\n\nexport default class Ingredients extends React.Component {\n  constructor(props) {\n    super(props);\n\n    const {\n      pageTitle,\n      pageDescription,\n    } = props.data.allContentfulIngredientsPage.edges[0].node;\n\n    this.state = {\n      seo: {\n        pagePath: \"ingredients\",\n        title: pageTitle,\n        description: pageDescription,\n      },\n      modalOpen: false,\n    };\n  }\n\n  componentDidMount() {\n    this.props.updatePageData({\n      label: \"All Ingredients\",\n    });\n\n    this.props.updateLayoutState({\n      navColor: \"#FFFFFF\",\n      banner: false,\n    });\n  }\n\n  /*\n    Takes a string, lowercases and dasherizes it, while checking for\n    extra - at start/end.\n    Example: Some-Place- would output some-place\n  */\n  getLocationPath(locationGroup) {\n    return locationGroup\n      .toLowerCase()\n      .replace(/[^a-z0-9]+/g, \"-\")\n      .replace(/(^-|-$)/g, \"\");\n  }\n\n  openIngredientsModal() {\n    this.setState({\n      modalOpen: true,\n    });\n  }\n\n  closeIngredientsModal() {\n    this.setState({\n      modalOpen: false,\n    });\n  }\n\n  render() {\n    const {\n      subheadText,\n      ingredientsList,\n      articles,\n      otherIngredients,\n    } = this.props.data.allContentfulIngredientsPage.edges[0].node;\n\n    const { modalOpen } = this.state;\n\n    // Set the default map page to be the location of the first Ingredient linked\n    const locationGroup = ingredientsList[0].locationGroup;\n    const locationPath = this.getLocationPath(locationGroup);\n    const { location } = this.props;\n    const article = articles[0];\n\n    const productSku = location.state ? location.state.productSku : \"\";\n\n    return (\n      <>\n        {productSku && (\n          <StickyProductNav\n            sku={productSku}\n            ctaLocation={\"Ingredient Product Cta\"}\n            scrollOffset={150}\n            showLearnMore={true}\n            showTopBar={true}\n          />\n        )}\n        <Container>\n          <PageSEO {...this.state.seo} />\n          <Helmet bodyAttributes={{ class: \"template\" }} />\n          <IngredientsHeader\n            subheadText={subheadText}\n            location={location}\n            locationPath={locationPath}\n            productSku={productSku}\n          />\n          <Section>\n            {ingredientsList.map((ingredient, i) => {\n              return (\n                <IngredientSummary\n                  key={`${i}`}\n                  ingredient={ingredient}\n                  productSku={productSku}\n                />\n              );\n            })}\n          </Section>\n\n          {/** Other Ingredients */}\n          <Row>\n            <OtherIngredientsColumn>\n              <OtherIngredientsSubheader>\n                {otherIngredients.subheader}\n              </OtherIngredientsSubheader>\n              <RitualButton\n                className=\"bordered\"\n                onClick={this.openIngredientsModal.bind(this)}\n              >\n                <Text\n                  id=\"ingredients.button-see-other\"\n                  defaultMessage=\"See Other Ingredients\"\n                />\n              </RitualButton>\n            </OtherIngredientsColumn>\n          </Row>\n        </Container>\n        <div className=\"mt-5\">\n          <ArticlePreview article={article} className=\"mobile-gutter\" />\n        </div>\n\n        <ProductCategoryCardsContainer className=\"mt-7 mt-md-9 mb-7 mb-md-9\">\n          <h3>\n            <Text\n              id=\"category-card.section.heading\"\n              defaultMessage=\"Find Your Ritual\"\n            />\n          </h3>\n          <ProductCategoryCards />\n        </ProductCategoryCardsContainer>\n\n        <OtherIngredientsModal\n          isOpen={modalOpen}\n          onRequestClose={this.closeIngredientsModal.bind(this)}\n          title={otherIngredients.title}\n          subheader={otherIngredients.subheader}\n          ingredients={otherIngredients.ingredients}\n        />\n      </>\n    );\n  }\n}\n\nexport const contentfulProductFragment = graphql`\n  fragment AllContentfulProductFragment on ContentfulProduct {\n    id\n    name {\n      name\n      childMarkdownRemark {\n        rawMarkdownBody\n      }\n    }\n  }\n`;\n\nexport const ingredientsPageFragment = graphql`\n  fragment IngredientsPageFragment on ContentfulIngredientsPage {\n    subheadText\n    pageTitle\n    pageDescription\n    otherIngredients {\n      title\n      subheader\n      ingredients {\n        name\n        supplier\n        location\n        function\n      }\n    }\n    articles {\n      id\n      title\n      previewText\n      slug\n      __typename\n      heroBackgroundColor\n      heroImage {\n        title\n        fixed(width: 300, height: 300, quality: 90, cropFocus: LEFT) {\n          ...GatsbyContentfulFixed_withWebp_noBase64\n        }\n      }\n      primaryContent {\n        __typename\n        ... on ContentfulContentGeneric {\n          ...genericContentBlock\n        }\n        ... on ContentfulContentBlockquote {\n          ...blockQuoteBlock\n        }\n        ... on ContentfulContentInterviewQA {\n          ...articleQABlock\n        }\n        ... on ContentfulContentMythFact {\n          ...articleMythFactBlock\n        }\n        ... on ContentfulContentInterviewStandaloneAnswer {\n          ...articleAnswerBlock\n        }\n        ... on ContentfulContentStandaloneImage {\n          ...standaloneImageBlock\n        }\n        ... on ContentfulContentInterviewBio {\n          ...interviewerBioContentBlock\n        }\n      }\n    }\n  }\n`;\n\nexport const query = graphql`\n  query IngredientsListQuery($locale: String!) {\n    allContentfulIngredientsPage(\n      filter: {\n        node_locale: { eq: $locale }\n        contentful_id: { eq: \"4wJg1DbUMwMUo0UuUS6cO2\" }\n      }\n    ) {\n      edges {\n        node {\n          ...IngredientsPageFragment\n          ingredientsList {\n            __typename\n            name\n            slug\n            productClassification\n            manufacturingLocation\n            locationGroup\n            image {\n              title\n              fluid(maxWidth: 240, quality: 90) {\n                ...GatsbyContentfulFluid_withWebp_noBase64\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}