{"version":3,"sources":["components/LateralNavigation/StyledLateralNavigation.ts","components/LateralNavigation/index.tsx"],"names":["Container","styled","div","theme","colors","ui","divider","hideOnPrint","Link","RouterLink","spacing","py","mq","lateralNavigation","link","minWidth","md","ml","focusOutline","TextBlock","xs","mr","Title","h5","textBody1","title","color","fontWeight","colorHover","colorVisited","SubTitle","span","textBody2","subtitle","lessThan","ChevronWrapper","svg","icon","motion","timing","fast","ease","compose","withDigitalDataContext","withEditMode","digitalData","editMode","rendering","setDigitalData","nav","fields","data","nextSubTitle","nextTitle","nextURL","prevSubTitle","prevTitle","prevURL","uid","showNext","showPrevious","handleClick","type","setObjectData","emitTrackEvent","className","id","role","onClick","to","Icon","ariaHidden","name"],"mappings":"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","file":"static/js/LateralNavigation.f9c92fe1.chunk.js","sourcesContent":["import { Link as RouterLink } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\nimport { spacing } from '_utils/props';\r\nimport {\r\n  focusOutline,\r\n  hideOnPrint,\r\n  mq,\r\n  svg,\r\n  textBody1,\r\n  textBody2,\r\n} from '_utils/styles';\r\n\r\nexport const Container = styled.div`\r\n  border-top: 1px solid ${({ theme }) => theme.colors.ui.divider};\r\n  display: flex;\r\n  justify-content: space-between;\r\n  ${hideOnPrint}\r\n`;\r\n\r\nexport const Link = styled(RouterLink)`\r\n  align-items: center;\r\n  display: flex;\r\n  flex: 0 1 auto;\r\n  flex-direction: row;\r\n  ${({ theme }) => spacing({ theme, py: 2 })}\r\n  max-width: calc(50% - 6px); // ensure gap in middle\r\n  text-decoration: none;\r\n\r\n  ${mq('md')} {\r\n    max-width: calc(50% - 16px);\r\n    min-width: ${({ theme }) => theme?.lateralNavigation?.link?.minWidth?.md};\r\n  }\r\n\r\n  &.next {\r\n    flex-direction: row-reverse;\r\n    ${({ theme }) =>\r\n    spacing({\r\n      theme,\r\n      ml: 'auto'\r\n    })}\r\n    text-align: right;\r\n  }\r\n\r\n  &:focus {\r\n    ${focusOutline}\r\n  }\r\n`;\r\n\r\nexport const TextBlock = styled.div`\r\n  .prev & {\r\n    ${({ theme }) =>\r\n      spacing({\r\n        theme,\r\n        ml: {\r\n          xs: `3px`, \r\n          md: 1\r\n        }\r\n      })}\r\n  }\r\n\r\n  .next & {\r\n    ${({ theme }) =>\r\n    spacing({\r\n      theme,\r\n      mr: {\r\n        xs: `3px`, \r\n        md: 1\r\n      }\r\n    })}\r\n  }\r\n`;\r\n\r\nexport const Title = styled.h5`\r\n  ${textBody1}\r\n  color: ${({ theme }) => theme.lateralNavigation.title.color};\r\n  ${({ theme }) =>\r\n    theme?.lateralNavigation?.title?.fontWeight &&\r\n    `font-weight: ${theme?.lateralNavigation?.title?.fontWeight};`\r\n  }\r\n  margin: 0;\r\n\r\n  a:hover & {\r\n    color: ${({ theme }) => theme.lateralNavigation.title.colorHover};\r\n    text-decoration: underline;\r\n  }\r\n\r\n  a:visited & {\r\n    color: ${({ theme }) => theme.lateralNavigation.title.colorVisited};\r\n  }\r\n`;\r\n\r\nexport const SubTitle = styled.span`\r\n  ${textBody2}\r\n  color: ${({ theme }) => theme.lateralNavigation.subtitle.color};\r\n  display: block;\r\n\r\n  ${mq.lessThan('md')} {\r\n    display: none;\r\n  }\r\n`;\r\n\r\nexport const ChevronWrapper = styled.div`\r\n  ${svg(24, 24)}\r\n\r\n  flex: 0 0 24px;\r\n\r\n  path {\r\n    fill: ${({ theme }) => theme.lateralNavigation.icon.color};\r\n  }\r\n\r\n  a:hover & {\r\n    path {\r\n      fill: ${({ theme }) => theme.lateralNavigation.icon.colorHover};\r\n    }\r\n  }\r\n\r\n  transition-duration: ${({ theme }) => theme.motion.timing.fast};\r\n  transition-property: transform;\r\n  transition-timing-function: ${({ theme }) => theme.motion.ease};\r\n`;\r\n","import { compose } from 'ramda';\r\nimport { canUseDOM } from 'exenv';\r\nimport React, { useState, useEffect } from 'react';\r\n\r\nimport { withEditMode } from '_containers/BaseComponent';\r\nimport { withDigitalDataContext } from '_containers/DigitalDataContext';\r\n\r\nimport { LateralNavigationProps } from './definitions';\r\n\r\nimport {\r\n  ChevronWrapper,\r\n  Container,\r\n  Link,\r\n  SubTitle,\r\n  TextBlock,\r\n  Title,\r\n} from './StyledLateralNavigation';\r\nimport { emitTrackEvent, setObjectData } from '_utils/helpers/analytics';\r\nimport Icon from '_components/Icon';\r\n\r\nconst LateralNavigation: React.FC<LateralNavigationProps> = ({\r\n  digitalData,\r\n  editMode,\r\n  rendering,\r\n  setDigitalData,\r\n}) => {\r\n  const nav = rendering?.fields?.data?.lateralNavigation;\r\n\r\n  if (!nav) {\r\n    return null;\r\n  }\r\n\r\n  const nextSubTitle = nav?.nextSubTitle;\r\n  const nextTitle = nav?.nextTitle;\r\n  const nextURL = nav?.nextURL;\r\n  const prevSubTitle = nav?.prevSubTitle;\r\n  const prevTitle = nav?.prevTitle;\r\n  const prevURL = nav?.prevURL;\r\n  const uid = rendering?.uid;\r\n\r\n  const showNext = !!(nextURL && nextTitle);\r\n  const showPrevious = !!(prevURL && prevTitle);\r\n\r\n  // handle analytics\r\n  const handleClick = (type = 'previous') => {\r\n    if (typeof setDigitalData === 'function') {\r\n      setDigitalData(\r\n        setObjectData(\r\n          ['pagination'],\r\n          { 'paginationType': type },\r\n          digitalData)\r\n      );\r\n\r\n      emitTrackEvent(`paginationClick`);\r\n    }\r\n  };\r\n\r\n  return (!showNext && !showPrevious) ? null : (\r\n    <Container\r\n      className=\"lateral-navigation\"\r\n      data-component\r\n      id={uid}\r\n      role=\"navigation\" aria-label=\"next/previous links\"\r\n    >\r\n      {showPrevious &&\r\n        <Link\r\n          className=\"prev\"\r\n          onClick={() =>\r\n            handleClick()\r\n          }\r\n          to={editMode ? '#' : prevURL}\r\n        >\r\n          <ChevronWrapper>\r\n            <Icon ariaHidden={true} name=\"chevron_left\" />\r\n          </ChevronWrapper>\r\n          <TextBlock>\r\n            <Title>{prevTitle}</Title>\r\n            {prevSubTitle && <SubTitle>{prevSubTitle}</SubTitle>}\r\n          </TextBlock>\r\n        </Link>\r\n      }\r\n\r\n      {showNext && (\r\n        <Link\r\n          to={editMode ? '#' : nextURL}\r\n          className=\"next\"\r\n          onClick={() =>\r\n            handleClick('next')\r\n          }\r\n        >\r\n          <ChevronWrapper>\r\n            <Icon ariaHidden={true} name=\"chevron_right\" />\r\n          </ChevronWrapper>\r\n          <TextBlock>\r\n            <Title>{nextTitle}</Title>\r\n            {nextSubTitle && <SubTitle>{nextSubTitle}</SubTitle>}\r\n          </TextBlock>\r\n        </Link>\r\n      )\r\n      }\r\n    </Container>\r\n  )\r\n};\r\n\r\nexport default compose(\r\n  withDigitalDataContext,\r\n  withEditMode\r\n)(LateralNavigation);\r\n"],"sourceRoot":""}