{"version":3,"sources":["webpack:///./src/components/ImageSlider/ImageSlider.jsx","webpack:///./src/common/useMatchMedia.js","webpack:///./src/components/HomePage/HomePage.jsx","webpack:///./src/pages/index.jsx","webpack:///./src/components/ImageBlock/ImageBlock.jsx"],"names":["propTypes","imageBlocks","arrayOf","shape","imageBlockFields","isRequired","getId","R","ImageSlider","props","elementsRef","useRef","isPlaying","setPlaying","useState","active","setActiveIndex","prev","value","current","setCurrent","setPrev","usePrevious","blocksInRenderOrder","block","gotoNext","useCallback","nextIndex","i","length","useEffect","intervalId","setInterval","clearInterval","window","requestAnimationFrame","el","id","classList","toggle","isDesktop","media","matches","setMatches","mediaQueryList","matchMedia","handleMatchChange","event","addListener","removeListener","useMatchMedia","className","map","ref","fluid","fluidImage","alt","title","type","onClick","e","p","pauseSvg","playSvg","imageBlock","isActive","cx","style","animationDuration","xmlns","width","height","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","x","y","points","HomePage","contentfulData","useStaticQuery","query","contentRef","data","bottomBanner","extractBanner","campaignGoalsSectionTitle","extractRichText","campaignGoalsSectionSubtitle","campaignGoalsLink","extractLink","campaignGoalsImageBlocks","extractImageBlocks","campaignPillarsImageBlocks","campaignPillarsSectionTitle","campaignPillarsLink","campaignPillarsSectionSubtitle","topHeroBanner","AOS","init","offset","duration","once","Page","Banner","hero","Search","to","d","scrollToElement","Section","aos","theme","subtitle","link","ImageBlock","isReverse","smallImages","Container100","data-aos","GatsbyHomePage","bool","string","object","node","text","tags","array","buttonModifier","otherProps","left","data-aos-delay","right"],"mappings":"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","file":"component---src-pages-index-jsx-60743c82641f45ac80c7.js","sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\r\nimport * as R from \"ramda\";\r\nimport cx from \"classnames\";\r\nimport { arrayOf, shape } from \"prop-types\";\r\nimport { imageBlockFields } from \"../../common/contentful-extract.jsx\";\r\nimport useMatchMedia from \"../../common/useMatchMedia.js\";\r\n\r\nimport \"./image-slider.scss\";\r\n\r\nimport BackgroundImage from \"gatsby-background-image\";\r\n\r\nconst propTypes = {\r\n  imageBlocks: arrayOf(shape(imageBlockFields)).isRequired,\r\n};\r\n\r\nconst getId = R.prop(\"title\");\r\n\r\nconst INTERVAL = 10000; // ms\r\n\r\nconst ImageSlider = (props) => {\r\n  const { imageBlocks } = props;\r\n\r\n  const elementsRef = useRef({});\r\n\r\n  const [isPlaying, setPlaying] = useState(true);\r\n\r\n  const [active, setActiveIndex] = useState(getId(imageBlocks[0]));\r\n  const prev = usePrevious(active);\r\n\r\n  // put the previous image last (on top) so we can fade it out\r\n  const blocksInRenderOrder = R.sort(\r\n    R.ascend((block) => {\r\n      return R.equals(getId(block), prev) ? 2 : 1;\r\n    }),\r\n  )(imageBlocks);\r\n\r\n  const gotoNext = useCallback(() => {\r\n    const nextIndex = R.compose(\r\n      (i) => getId(imageBlocks[i]), // get id from imageblock\r\n      (i) => (i + 1) % imageBlocks.length, // next with wrap\r\n      R.findIndex((block) => getId(block) === active),\r\n    )(imageBlocks);\r\n\r\n    setActiveIndex(nextIndex);\r\n  }, [active, imageBlocks]);\r\n\r\n  useEffect(() => {\r\n    if (isPlaying) {\r\n      const intervalId = setInterval(gotoNext, INTERVAL);\r\n\r\n      return () => {\r\n        clearInterval(intervalId);\r\n      };\r\n    }\r\n  }, [gotoNext, isPlaying]);\r\n\r\n  // we have to update faded-out class _after_ the reorder render\r\n  // (instead of just rendering the faded-out class with cx)\r\n  useEffect(() => {\r\n    window.requestAnimationFrame(() => {\r\n      R.mapObjIndexed((el, id) => {\r\n        el.classList.toggle(\r\n          \"image-slider__image-holder--faded-out\",\r\n          active !== id,\r\n        );\r\n      })(elementsRef.current);\r\n    });\r\n  }, [active, blocksInRenderOrder]);\r\n\r\n  // stop playback on mobile\r\n  const isDesktop = useMatchMedia(\"(min-width: 746px)\"); // should match $bp-medium-min\r\n  useEffect(() => {\r\n    setPlaying(isDesktop);\r\n  }, [isDesktop]);\r\n\r\n  return (\r\n    <div className=\"image-slider\">\r\n      <div className=\"image-slider__image-area\">\r\n        <div className=\"image-slider__images\">\r\n          {blocksInRenderOrder.map((block) => {\r\n            return (\r\n              <div\r\n                key={getId(block)}\r\n                ref={(el) => (elementsRef.current[getId(block)] = el)}\r\n                className=\"image-slider__image-holder\"\r\n              >\r\n                <BackgroundImage fluid={block.fluidImage} alt={block.title} />\r\n              </div>\r\n            );\r\n          })}\r\n        </div>\r\n\r\n        <div className=\"image-slider__play-pause\">\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => {\r\n              setPlaying((p) => !p);\r\n\r\n              // start on the next\r\n              if (!isPlaying) {\r\n                gotoNext();\r\n              }\r\n            }}\r\n            title={isPlaying ? \"Pause image slideshow\" : \"Play image slideshow\"}\r\n          >\r\n            {isPlaying ? pauseSvg : playSvg}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div className=\"image-slider__blocks\">\r\n        {imageBlocks.map((imageBlock) => {\r\n          const isActive = getId(imageBlock) === active;\r\n\r\n          return (\r\n            <div\r\n              key={imageBlock.title}\r\n              className={cx(\"image-slider__block\", {\r\n                \"image-slider__block--is-active\": isActive,\r\n                \"image-slider__block--is-playing\": isActive && isPlaying,\r\n              })}\r\n            >\r\n              {isActive && isPlaying && (\r\n                <div\r\n                  className=\"image-slider__block-timer\"\r\n                  style={{ animationDuration: `${INTERVAL}ms` }}\r\n                />\r\n              )}\r\n              <button\r\n                type=\"button\"\r\n                onClick={(e) => {\r\n                  setActiveIndex(getId(imageBlock));\r\n                  setPlaying(false);\r\n                }}\r\n              >\r\n                {imageBlock.title}\r\n              </button>\r\n            </div>\r\n          );\r\n        })}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nImageSlider.propTypes = propTypes;\r\nexport default ImageSlider;\r\n\r\nfunction usePrevious(value) {\r\n  const [current, setCurrent] = useState(value);\r\n  const [prev, setPrev] = useState();\r\n\r\n  if (!R.equals(value, current)) {\r\n    setPrev(current);\r\n    setCurrent(value);\r\n  }\r\n\r\n  return prev;\r\n}\r\n\r\nconst pauseSvg = (\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    width=\"24\"\r\n    height=\"24\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n    stroke=\"currentColor\"\r\n    strokeWidth=\"0\"\r\n    strokeLinecap=\"round\"\r\n    strokeLinejoin=\"round\"\r\n    className=\"feather feather-pause\"\r\n  >\r\n    <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"></rect>\r\n    <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"></rect>\r\n  </svg>\r\n);\r\n\r\nconst playSvg = (\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    width=\"24\"\r\n    height=\"24\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n    stroke=\"currentColor\"\r\n    strokeWidth=\"0\"\r\n    strokeLinecap=\"round\"\r\n    strokeLinejoin=\"round\"\r\n    className=\"feather feather-play\"\r\n  >\r\n    <polygon points=\"5 3 19 12 5 21 5 3\"></polygon>\r\n  </svg>\r\n);\r\n","import { useState, useEffect } from \"react\";\r\n\r\n/**\r\n * useMatchMedia\r\n *\r\n * usage:\r\n *   const matches = useMatchMedia(\"(min-width: 900px)\")\r\n *   matches will be true or false\r\n *\r\n * the format of the string is important, eg, needs ()'s\r\n * see https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia\r\n * @param  {String} media : media query to match\r\n * @return {Boolean} true if it matches, false if it doesn't\r\n */\r\nexport default function useMatchMedia(media) {\r\n  const [matches, setMatches] = useState(false);\r\n\r\n  // define mediaQueryList inside effect because of server rendering/hydration\r\n  // https://github.com/gatsbyjs/gatsby/issues/14601\r\n  // we need to render again when the client loads\r\n  useEffect(() => {\r\n    const mediaQueryList = window.matchMedia(media);\r\n    setMatches(mediaQueryList.matches);\r\n\r\n    const handleMatchChange = (event) => setMatches(event.matches);\r\n    mediaQueryList.addListener(handleMatchChange);\r\n    return () => mediaQueryList.removeListener(handleMatchChange);\r\n  }, [media]);\r\n\r\n  return matches;\r\n}\r\n","import { useEffect, useRef } from \"react\";\r\nimport * as R from \"ramda\";\r\nimport { useStaticQuery, graphql, Link } from \"gatsby\";\r\nimport { scrollToElement } from \"../../common/scrollHelpers.js\";\r\n\r\nimport \"./home-page.scss\";\r\n\r\nimport \"aos/dist/aos.css\";\r\nimport AOS from \"aos\";\r\n\r\nimport {\r\n  extractBanner,\r\n  extractImageBlocks,\r\n  extractLink,\r\n  extractRichText,\r\n} from \"../../common/contentful-extract.jsx\";\r\n\r\nimport Banner from \"../Banner/Banner.jsx\";\r\nimport Container100 from \"../Container/Container100.jsx\";\r\nimport ImageBlock from \"../ImageBlock/ImageBlock.jsx\";\r\nimport ImageSlider from \"../ImageSlider/ImageSlider.jsx\";\r\nimport Page from \"../Page/Page.jsx\";\r\nimport Search from \"../Search/Search.jsx\";\r\nimport Section from \"../Section/Section.jsx\";\r\n\r\nconst HomePage = () => {\r\n  const contentfulData = useStaticQuery(query);\r\n\r\n  const contentRef = useRef();\r\n\r\n  const data = R.compose(\r\n    R.evolve({\r\n      bottomBanner: extractBanner,\r\n      campaignGoalsSectionTitle: extractRichText,\r\n      campaignGoalsSectionSubtitle: extractRichText,\r\n      campaignGoalsLink: extractLink,\r\n      campaignGoalsImageBlocks: extractImageBlocks,\r\n      campaignPillarsImageBlocks: extractImageBlocks,\r\n      campaignPillarsSectionTitle: extractRichText,\r\n      campaignPillarsLink: extractLink,\r\n      campaignPillarsSectionSubtitle: extractRichText,\r\n      topHeroBanner: extractBanner,\r\n    }),\r\n    R.defaultTo({}),\r\n    R.prop(\"contentfulHomePage\"),\r\n  )(contentfulData);\r\n\r\n  const {\r\n    bottomBanner,\r\n    campaignGoalsSectionTitle,\r\n    campaignGoalsSectionSubtitle,\r\n    campaignGoalsImageBlocks,\r\n    campaignGoalsLink,\r\n    campaignPillarsImageBlocks,\r\n    campaignPillarsSectionTitle,\r\n    campaignPillarsLink,\r\n    campaignPillarsSectionSubtitle,\r\n    topHeroBanner,\r\n  } = data;\r\n\r\n  useEffect(() => {\r\n    // https://github.com/michalsnik/aos\r\n    // initialize animation on scroll when the page loads\r\n    AOS.init({\r\n      offset: 100,\r\n      duration: 1000,\r\n      once: true,\r\n    });\r\n  }, []);\r\n\r\n  return (\r\n    <Page topHeroBanner={topHeroBanner}>\r\n      <Banner hero {...topHeroBanner}>\r\n        <div className=\"home-page__hero\">\r\n          <Search />\r\n          <br />\r\n          <Link to=\"/map/US\" className=\"btn btn--text\">\r\n            Or View the Progress Map{\" \"}\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"21\"\r\n              height=\"13\"\r\n              viewBox=\"0 0 21 13\"\r\n            >\r\n              <g fill=\"currentColor\">\r\n                <path d=\"M.682 7.647V5.475l17.356.044v2.172z\" />\r\n                <path d=\"M18.133 8.14l-5.245-5.245 1.535-1.535 5.245 5.245z\" />\r\n                <path d=\"M14.423 11.85l-1.535-1.535 5.245-5.245 1.535 1.535z\" />\r\n              </g>\r\n            </svg>\r\n          </Link>\r\n        </div>\r\n\r\n        <div className=\"home-page__scroll\">\r\n          <button\r\n            type=\"button\"\r\n            title=\"Scroll\"\r\n            onClick={() => {\r\n              if (contentRef.current) {\r\n                scrollToElement(contentRef.current);\r\n              }\r\n            }}\r\n          >\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"24\"\r\n              height=\"24\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              strokeWidth=\"2\"\r\n              strokeLinecap=\"round\"\r\n              strokeLinejoin=\"round\"\r\n              className=\"feather feather-chevron-down\"\r\n            >\r\n              <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </Banner>\r\n\r\n      <Section\r\n        aos={true}\r\n        theme=\"light\"\r\n        title={campaignPillarsSectionTitle}\r\n        subtitle={campaignPillarsSectionSubtitle}\r\n        link={campaignPillarsLink}\r\n        ref={contentRef}\r\n      >\r\n        {campaignPillarsImageBlocks.map((imageBlock, i) => {\r\n          const { title } = imageBlock;\r\n\r\n          return (\r\n            <ImageBlock\r\n              aos={true}\r\n              key={`${i} ${title}`}\r\n              isReverse={i % 2 === 0}\r\n              smallImages={true}\r\n              {...imageBlock}\r\n            />\r\n          );\r\n        })}\r\n      </Section>\r\n\r\n      <Section\r\n        aos={true}\r\n        theme=\"dark\"\r\n        title={campaignGoalsSectionTitle}\r\n        subtitle={campaignGoalsSectionSubtitle}\r\n        link={campaignGoalsLink}\r\n      >\r\n        <Container100 className=\"home-page__goals\" data-aos=\"fade-up\">\r\n          <ImageSlider imageBlocks={campaignGoalsImageBlocks} />\r\n        </Container100>\r\n      </Section>\r\n\r\n      <Banner {...bottomBanner} aos={true} />\r\n    </Page>\r\n  );\r\n};\r\n\r\nexport default HomePage;\r\n\r\nconst query = graphql`\r\n  {\r\n    contentfulHomePage {\r\n      topHeroBanner {\r\n        backgroundImage {\r\n          fluid {\r\n            base64\r\n            aspectRatio\r\n            src\r\n            srcSet\r\n            srcWebp\r\n            srcSetWebp\r\n            sizes\r\n          }\r\n          file {\r\n            url\r\n          }\r\n        }\r\n        backgroundSize\r\n        textColor\r\n        subtitle {\r\n          raw\r\n        }\r\n        title {\r\n          raw\r\n          references {\r\n            ...RichTextReferences\r\n          }\r\n        }\r\n      }\r\n      campaignPillarsSectionSubtitle {\r\n        raw\r\n      }\r\n      campaignPillarsSectionTitle {\r\n        raw\r\n      }\r\n      campaignPillarsLink {\r\n        ...Link\r\n      }\r\n      campaignPillarsImageBlocks {\r\n        id\r\n        image {\r\n          fluid(maxWidth: 570) {\r\n            aspectRatio\r\n            sizes\r\n            src\r\n            srcSet\r\n            srcSetWebp\r\n            srcWebp\r\n            base64\r\n          }\r\n        }\r\n        title\r\n        text {\r\n          raw\r\n          references {\r\n            ...Link\r\n          }\r\n        }\r\n        link {\r\n          ...Link\r\n        }\r\n      }\r\n      campaignGoalsSectionTitle {\r\n        raw\r\n      }\r\n      campaignGoalsSectionSubtitle {\r\n        raw\r\n      }\r\n      campaignGoalsLink {\r\n        ...Link\r\n      }\r\n      campaignGoalsImageBlocks {\r\n        id\r\n        image {\r\n          fluid(maxWidth: 1200) {\r\n            aspectRatio\r\n            sizes\r\n            src\r\n            srcSet\r\n            srcSetWebp\r\n            srcWebp\r\n            base64\r\n          }\r\n        }\r\n        title\r\n        text {\r\n          raw\r\n          references {\r\n            ...Link\r\n          }\r\n        }\r\n        link {\r\n          ...Link\r\n        }\r\n      }\r\n      bottomBanner {\r\n        backgroundImage {\r\n          fluid {\r\n            base64\r\n            aspectRatio\r\n            src\r\n            srcSet\r\n            srcWebp\r\n            srcSetWebp\r\n            sizes\r\n          }\r\n          file {\r\n            url\r\n          }\r\n        }\r\n        backgroundSize\r\n        textColor\r\n        subtitle {\r\n          raw\r\n        }\r\n        title {\r\n          raw\r\n        }\r\n        content {\r\n          raw\r\n        }\r\n        link {\r\n          ...Link\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n","import HomePage from \"../components/HomePage/HomePage.jsx\";\r\nimport { ContentfulDepartmentsProvider } from \"../common/contentfulDepartments.jsx\";\r\n\r\nconst GatsbyHomePage = (props) => (\r\n  <ContentfulDepartmentsProvider>\r\n    <HomePage />\r\n  </ContentfulDepartmentsProvider>\r\n);\r\nexport default GatsbyHomePage;\r\n","import cx from \"classnames\";\r\nimport { node, object, string, array, bool } from \"prop-types\";\r\n\r\nimport \"./image-block.scss\";\r\n\r\nimport Container5050 from \"../Container/Container5050.jsx\";\r\nimport ContentfulLink from \"../ContentfulLink/ContentfulLink.jsx\";\r\nimport GatsbyImage from \"gatsby-image\";\r\n\r\nconst propTypes = {\r\n  aos: bool, // https://github.com/michalsnik/aos\r\n  className: string,\r\n  fluidImage: object.isRequired, // gatsby fluid image\r\n  isReverse: bool,\r\n  title: node.isRequired,\r\n  link: object, // ContentfulLink object\r\n  smallImages: bool, // for homepage pillars section\r\n  text: node.isRequired,\r\n  tags: array,\r\n  buttonModifier: string,\r\n};\r\n\r\nconst ImageBlock = (props) => {\r\n  const {\r\n    aos,\r\n    className,\r\n    fluidImage,\r\n    isReverse,\r\n    title,\r\n    link,\r\n    smallImages,\r\n    text,\r\n    tags,\r\n    buttonModifier,\r\n    ...otherProps\r\n  } = props;\r\n  /**\r\n   * title/text/link next to an image\r\n   * used for homepage pillars and our-story entry\r\n   */\r\n  return (\r\n    <Container5050\r\n      className={cx(\"image-block\", className, {\r\n        \"container--50-50--reverse\": isReverse,\r\n        \"image-block--small-images\": smallImages,\r\n      })}\r\n      left={\r\n        <div\r\n          className=\"image-block__image\"\r\n          data-aos={aos && \"fade-up\"}\r\n          data-aos-delay={aos && \"250\"}\r\n        >\r\n          <GatsbyImage fluid={fluidImage} />\r\n        </div>\r\n      }\r\n      right={\r\n        <div className=\"image-block__text-holder\" data-aos={aos && \"fade-up\"}>\r\n          {tags && <p className=\"image-block__tag\">{tags}</p>}\r\n          <h2 className=\"image-block__title\">{title}</h2>\r\n          <div className=\"image-block__text fancy-a\">{text}</div>\r\n          {link && (\r\n            <ContentfulLink\r\n              {...link}\r\n              className={cx(\"btn\", \"btn--transparent\", \"image-block__link\", {\r\n                [`${buttonModifier}`]: buttonModifier,\r\n              })}\r\n            />\r\n          )}\r\n        </div>\r\n      }\r\n      {...otherProps}\r\n    />\r\n  );\r\n};\r\n\r\nImageBlock.propTypes = propTypes;\r\nexport default ImageBlock;\r\n"],"sourceRoot":""}