{"version":3,"sources":["components/ContentRelated/StyledContentRelated.ts","components/ContentRelated/ContentRelatedItem.tsx","components/ContentRelated/index.tsx"],"names":["StyledContentRelated","styled","div","theme","contentRelated","background","mq","spacing","pb","pageHeader","height","fixed","Heading","h4","heading","border","headingColor","ContentWrapper","mb","mt","textbody","content","link","focusBorder","Content","Link","linkFeatured","contentLinkColor","IconWrapper","span","caption","captionColor","iconColor","LinkContainer","LinkItem","fixedBody14","color","hoverColor","ContentRelatedItem","title","linkUrl","readingTime","readingTimeLabel","props","fallbackTitle","field","value","href","linkTheme","Icon","name","ariaHidden","compose","withCoveoNoIndexTags","withDigitalDataContext","withEditMode","editMode","digitalData","setDigitalData","rendering","relatedArticle","fields","data","datasource","componentName","relatedArticleList","articles","categoryInformation","uid","categoryUrl","categoryLabelText","getDictionaryItem","headerLabel","ctaLabel","categoryHeaderLabel","categoryCtaLabel","dispatchTracking","linkName","setObjectData","linkDestination","topic","emitTrackEvent","className","id","Text","map","item","index","Title","LinkUrl","ReadTime","formattedReadingTime","replace","key","onClick","class"],"mappings":"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","file":"static/js/ContentRelated.85461307.chunk.js","sourcesContent":["import styled from 'styled-components';\r\nimport { spacing } from '_utils/props';\r\nimport { fixedBody14, linkFeatured, mq } from '_utils/styles';\r\nimport { Link } from '_utils/components';\r\n\r\nexport const StyledContentRelated = styled.div`\r\n  background-color: ${({ theme }) => theme.contentRelated.background};\r\n\r\n  ${mq('md')} {\r\n    ${({ theme }) => spacing({ theme, pb: 2 })}\r\n    position: sticky;\r\n    top: calc(${({ theme }) => theme.pageHeader.height.fixed}px + 24px);\r\n  }\r\n`;\r\n\r\nexport const Heading = styled.h4`\r\n  ${({ theme }) => theme.contentRelated.heading};\r\n  border-bottom: ${({ theme }) => theme.contentRelated.border};\r\n  color: ${({ theme }) => theme.contentRelated.headingColor};\r\n  padding-bottom: 16px;\r\n  /* override bottom-margin inherited from 'heading4' */\r\n  margin-bottom: 0 !important;\r\n`;\r\n\r\n\r\nexport const ContentWrapper = styled.div`\r\n  ${({ theme }) => spacing({ theme, mb: 16 })}\r\n  ${({ theme }) => spacing({ theme, mt: 16 })}\r\n  ${({ theme }) => theme.contentRelated.textbody}\r\n  border-bottom: ${({ theme }) => theme.contentRelated.content.border};\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding-bottom: 16px;\r\n  padding-top: 16px;\r\n\r\n  &:focus-within {\r\n    outline: 2px solid ${({ theme }) => theme.contentRelated.link.focusBorder};\r\n  }\r\n`\r\n\r\nexport const Content = styled(Link)`\r\n  a {\r\n    ${linkFeatured}\r\n    ${({ theme }) => theme.contentRelated.textbody}\r\n    border-bottom: none;\r\n    color: ${({ theme }) => theme.contentRelated.contentLinkColor};\r\n    display: inline-block;\r\n    font-weight: 800;\r\n    line-height: 20px;\r\n    padding-right: 30px;\r\n    position: relative;\r\n\r\n    &:hover {\r\n      color: ${({ theme }) => theme.contentRelated.contentLinkColor};\r\n      text-decoration: underline;\r\n    }\r\n\r\n    &:focus-within {\r\n      outline: none;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconWrapper = styled.span`\r\n  ${({ theme }) => theme.contentRelated.caption};\r\n  color: ${({ theme }) => theme.contentRelated.captionColor};\r\n  display: flex;\r\n  margin-top: 8px;\r\n\r\n  svg {\r\n    color: ${({ theme }) => theme.contentRelated.iconColor};\r\n    height: 16px;\r\n    margin-right: 9px;\r\n    max-width: unset;\r\n    width: 16px;\r\n  }\r\n`;\r\n\r\nexport const LinkContainer = styled.div`\r\n  margin-top: 16px;\r\n`\r\n\r\nexport const LinkItem = styled(Link)`\r\n  a {\r\n    ${linkFeatured}\r\n    ${fixedBody14}\r\n    color: ${({ theme }) => theme.contentRelated.link.color};\r\n    display: inline-block;\r\n    font-weight: 800 !important;\r\n    /* override fixedBody line height' */\r\n    line-height: 24px;\r\n    padding-left: 0 !important;\r\n    padding-right: 30px;\r\n    position: relative;\r\n    text-transform: uppercase;\r\n\r\n    &:hover {\r\n      color: ${({ theme }) => theme.contentRelated.link.hoverColor};\r\n      text-decoration: underline;\r\n    }\r\n\r\n    :after {\r\n      background-size: 16px 16px !important;\r\n    }\r\n  }\r\n`;","\r\nimport React from 'react';\r\n\r\nimport Icon from '_components/Icon';\r\nimport {\r\n  Content,\r\n  ContentWrapper,\r\n  IconWrapper,\r\n} from './StyledContentRelated';\r\nimport { ContentRelatedItemProps } from './definitions';\r\n\r\nconst ContentRelatedItem: React.FC<ContentRelatedItemProps> = ({\r\n  title,\r\n  linkUrl,\r\n  readingTime,\r\n  readingTimeLabel,\r\n  ...props\r\n}) => {\r\n\r\n  return (\r\n    <ContentWrapper>\r\n      <Content\r\n        fallbackTitle={title}\r\n        field={{ value: { href: linkUrl } }}\r\n        linkTheme=\"none\"\r\n        {...props}\r\n      />\r\n      {readingTime !== '0' &&\r\n        <IconWrapper>\r\n          <Icon name=\"schedule\" ariaHidden={true} />\r\n          {readingTimeLabel}\r\n        </IconWrapper>\r\n      }\r\n    </ContentWrapper>\r\n  )\r\n}\r\n\r\n\r\n\r\nexport default ContentRelatedItem;","import { compose } from 'ramda';\r\nimport React from 'react';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { withCoveoNoIndexTags, withEditMode } from '_containers/BaseComponent';\r\nimport { withDigitalDataContext } from '_containers/DigitalDataContext';\r\nimport { emitTrackEvent, setObjectData } from '_utils/helpers/analytics';\r\n\r\nimport {\r\n  Heading,\r\n  LinkContainer,\r\n  LinkItem,\r\n  StyledContentRelated,\r\n} from './StyledContentRelated';\r\nimport { ContentRelatedProps } from './definitions';\r\nimport { getDictionaryItem } from '_utils/data/dictionaryItem';\r\nimport ContentRelatedItem from './ContentRelatedItem';\r\n\r\nconst ContentRelated: React.FC<ContentRelatedProps> = ({\r\n  editMode,\r\n  digitalData,\r\n  setDigitalData,\r\n  rendering,\r\n}) => {\r\n  const relatedArticle = rendering?.fields?.data?.datasource;\r\n  const componentName = rendering?.componentName;\r\n  if (!relatedArticle?.relatedArticleList?.articles || !relatedArticle?.categoryInformation) {\r\n    return null;\r\n  }\r\n  const { categoryInformation, relatedArticleList, uid } = relatedArticle;\r\n  const { categoryUrl, categoryLabelText } = categoryInformation;\r\n  const { articles } = relatedArticleList;\r\n\r\n  // Dictionary item\r\n  const readingTimeLabel = getDictionaryItem('global-read-time', '{minutes} min read time');\r\n  const headerLabel = getDictionaryItem('related-article-header', 'More in');\r\n  const ctaLabel = getDictionaryItem('related-article-cta-label', 'More in');\r\n  const categoryHeaderLabel = `${headerLabel} ${categoryLabelText}`\r\n  const categoryCtaLabel = `${ctaLabel} ${categoryLabelText}`\r\n\r\n\r\n  // handle analytics for link\r\n  const dispatchTracking = (linkName: string, linkUrl: string) => {\r\n    if (typeof setDigitalData === 'function') {\r\n      setDigitalData(\r\n        setObjectData(\r\n          ['link'],\r\n          {\r\n            linkName: linkName,\r\n            linkDestination: linkUrl,\r\n            topic: categoryLabelText\r\n          },\r\n          digitalData\r\n        )\r\n      );\r\n      emitTrackEvent('linkClick');\r\n    }\r\n  };\r\n\r\n  return (\r\n    <StyledContentRelated\r\n      className=\"contentRelated\"\r\n      componentName={componentName}\r\n      data-component\r\n      id={uid}\r\n    >\r\n      {(editMode || categoryHeaderLabel) && <Heading><Text field={{ value: categoryHeaderLabel }} /></Heading>}\r\n\r\n      {articles?.map((item, index) => {\r\n        const title = item?.Title;\r\n        const linkUrl = item?.LinkUrl;\r\n        const readingTime = item?.ReadTime;\r\n        const formattedReadingTime = readingTimeLabel.replace(/\\{minutes\\}/ig, readingTime ?? '');\r\n\r\n        return (\r\n          <ContentRelatedItem\r\n            key={index}\r\n            title={title}\r\n            linkUrl={linkUrl}\r\n            readingTime={readingTime}\r\n            readingTimeLabel={formattedReadingTime}\r\n            onClick={() => dispatchTracking(title, linkUrl)}\r\n          />\r\n        )\r\n      })}\r\n      <LinkContainer>\r\n        <LinkItem\r\n          fallbackTitle={categoryCtaLabel}\r\n          field={{ value: { class: \"link-featured\", href: categoryUrl } }}\r\n          linkTheme=\"featured\"\r\n          onClick={() => dispatchTracking(categoryCtaLabel, categoryUrl)}\r\n        >\r\n        </LinkItem>\r\n      </LinkContainer>\r\n    </StyledContentRelated>\r\n  );\r\n}\r\n\r\nexport default compose(\r\n  withCoveoNoIndexTags,\r\n  withDigitalDataContext,\r\n  withEditMode\r\n)(ContentRelated);\r\n"],"sourceRoot":""}