{"version":3,"file":"index-5a9d2347.js","sources":["../../../../src/scripts/react-components/blog-listing/blog-card.tsx","../../../../src/scripts/react-components/blog-listing/index.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface BlogCardProps {\n  featuredUrl?: string;\n  featuredAlt?: string;\n  youtubeUrl?: string;\n  category: string;\n  categoryUrl: string;\n  title: string;\n  body: string;\n  author: string;\n  blogUrl: string;\n  publishedDate: string;\n  dataLayer?: string;\n}\n\nexport const BlogCard = ({\n  featuredUrl,\n  featuredAlt,\n  youtubeUrl,\n  category,\n  categoryUrl,\n  title,\n  body,\n  author,\n  blogUrl,\n  publishedDate,\n  dataLayer\n}: BlogCardProps) => {\n  return (\n    <article\n      className={`related-article-card ${\n        youtubeUrl ? 'related-article-card--thumbnail' : ''\n      }`}\n    >\n      {featuredUrl ? (\n        <a\n          href={blogUrl}\n          aria-label={`Go to ${title}`}\n          className=\"related-article-card__image\"\n          data-layer={dataLayer}\n        >\n          <figure className=\"figure figure__container\">\n            <picture className=\"picture\">\n              <source\n                media=\"(max-width: 1023px)\"\n                srcSet={`${featuredUrl}?width=943 943w`}\n                sizes=\"943px\"\n              />\n              <img\n                src={`${featuredUrl}?width=379`}\n                width=\"379\"\n                height=\"253\"\n                alt={featuredAlt}\n                loading=\"lazy\"\n              />\n            </picture>\n          </figure>\n        </a>\n      ) : null}\n      <div className=\"related-article-card__content\">\n        <a\n          href={categoryUrl}\n          className=\"related-article-card__category link--inline\"\n          data-layer={[dataLayer]}\n        >\n          <span>{category}</span>\n        </a>\n        <h2\n          id=\"unique-related-article-card-id-3\"\n          className=\"related-article-card__heading\"\n        >\n          <a href={blogUrl} className=\"link--inline\" data-layer={[dataLayer]}>\n            <span>{title}</span>\n          </a>\n        </h2>\n        <div\n          className=\"related-article-card__description rtf--inline\"\n          dangerouslySetInnerHTML={{ __html: body }}\n        />\n        <div className=\"related-article-card__info rtf--inline\">\n          <p\n            className=\"related-article-card__author\"\n            dangerouslySetInnerHTML={{ __html: author }}\n          />\n          <p className=\"related-article-card__date\">{publishedDate}</p>\n        </div>\n      </div>\n    </article>\n  );\n};\n\nexport default BlogCard;\n","import React, { useEffect, useRef, useState } from 'react';\nimport PropTypes, { InferProps } from 'prop-types';\nimport { useFetch } from '../../hooks/useFetch';\nimport Pagination from '../pagination';\nimport Loader from '../listing-states/loader';\nimport Error from '../listing-states/error';\nimport {\n  updateEndpointWithQueryString,\n  getUrlParamValue,\n  setUrlParamValue\n} from '../../helpers/queryString';\nimport BlogCard, { BlogCardProps } from './blog-card';\nimport {\n  createDataLayerString,\n  oneTimeVisibleLayerPush\n} from '../../helpers/helpers';\n\ninterface BlogListingResponse {\n  items: BlogCardProps[];\n  totalPages: number;\n}\n\nfunction BlogListing({\n  url,\n  sectionTitle,\n  loadingLabel,\n  noResultsMessage,\n  noResultsKeywordMessage,\n  noResultsAdditionalMessage,\n  errorMessage,\n  nextPageLabel,\n  previousPageLabel,\n  pageLabel\n}: InferProps<typeof BlogListing.propTypes>) {\n  const pageParam = getUrlParamValue('page');\n\n  const listRef = useRef<HTMLUListElement | null>(null);\n  const [page, setPage] = useState(Number(pageParam) || 1);\n  const [endpoint, setEndpoint] = useState(updateEndpointWithQueryString(url));\n  const { data, error } = useFetch<BlogListingResponse>(endpoint);\n\n  useEffect(() => {\n    if (listRef.current) {\n      const dataVisibleLayer = {\n        event: 'view_item_list',\n        event_category: 'item list viewed',\n        event_label: sectionTitle,\n        event_attributes: {\n          item_list_name: sectionTitle\n        }\n      };\n\n      oneTimeVisibleLayerPush(listRef.current, dataVisibleLayer);\n    }\n  }, [data]);\n\n  if (error) {\n    return (\n      <Error\n        errorMessage={errorMessage}\n        noResultsMessage={noResultsMessage}\n        noResultsKeywordMessage={noResultsKeywordMessage}\n        showError={true}\n      />\n    );\n  }\n\n  if (!data) {\n    return <Loader loaderText={loadingLabel} />;\n  }\n\n  const handlePageChange = (page: number) => {\n    setPage(page);\n    setUrlParamValue('page', page.toString());\n    setEndpoint(updateEndpointWithQueryString(url));\n  };\n\n  return (\n    <>\n      {data.items.length < 1 ? (\n        <Error\n          errorMessage={errorMessage}\n          noResultsMessage={noResultsMessage}\n          noResultsKeywordMessage={noResultsKeywordMessage}\n          noResultsAdditionalMessage={noResultsAdditionalMessage as string}\n        />\n      ) : (\n        <>\n          <ul className=\"blog-listing__list\" ref={listRef}>\n            {data.items.map((item, index) => (\n              <li key={index} className=\"blog-listing__item\">\n                <BlogCard\n                  {...item}\n                  dataLayer={createDataLayerString({\n                    event: 'view_item_list',\n                    event_category: 'item list viewed',\n                    event_label: sectionTitle,\n                    event_attributes: {\n                      item_list_name: item.title\n                    }\n                  })}\n                />\n              </li>\n            ))}\n          </ul>\n          {data.totalPages > 1 && (\n            <Pagination\n              currentPage={page}\n              totalPages={data.totalPages}\n              onPageChange={handlePageChange}\n              nextPageLabel={nextPageLabel}\n              previousPageLabel={previousPageLabel}\n              pageLabel={pageLabel}\n            />\n          )}\n        </>\n      )}\n    </>\n  );\n}\n\nBlogListing.propTypes = {\n  url: PropTypes.string.isRequired,\n  sectionTitle: PropTypes.string.isRequired,\n  loadingLabel: PropTypes.string.isRequired,\n  noResultsMessage: PropTypes.string.isRequired,\n  noResultsKeywordMessage: PropTypes.string.isRequired,\n  noResultsAdditionalMessage: PropTypes.string,\n  errorMessage: PropTypes.string.isRequired,\n  nextPageLabel: PropTypes.string.isRequired,\n  previousPageLabel: PropTypes.string.isRequired,\n  pageLabel: PropTypes.string.isRequired\n};\n\nexport default BlogListing;\n"],"names":["BlogCard","featuredUrl","featuredAlt","youtubeUrl","category","categoryUrl","title","body","author","blogUrl","publishedDate","dataLayer","React","BlogListing","url","sectionTitle","loadingLabel","noResultsMessage","noResultsKeywordMessage","noResultsAdditionalMessage","errorMessage","nextPageLabel","previousPageLabel","pageLabel","pageParam","getUrlParamValue","listRef","useRef","page","setPage","useState","endpoint","setEndpoint","updateEndpointWithQueryString","data","error","useFetch","useEffect","dataVisibleLayer","oneTimeVisibleLayerPush","Error","Loader","handlePageChange","setUrlParamValue","item","index","createDataLayerString","Pagination","PropTypes"],"mappings":"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"}