{"version":3,"sources":["utils/hooks/useAccordion.ts","components/Accordion/StyledAccordion.ts","components/Accordion/AccordionItem.tsx","components/Accordion/validation.ts","components/Accordion/FaqStructureData.tsx","components/Accordion/index.tsx"],"names":["useAccordion","contentRef","startExpanded","expanded","setExpanded","useState","contentStyle","setContentStyle","height","prevExpanded","usePrevious","useEffect","el","current","contentHeight","scrollHeight","elemTransition","style","transition","requestAnimationFrame","Wrapper","styled","div","Container","ul","theme","accordion","background","borderRadius","StyledContentRichText","spacing","mt","Item","li","border","borderColor","colors","interactiveCell","focus","borderHover","backgroundHover","Button","button","buttonReset","px","primary","Heading","Text","my","fixedTitle16","text","default","actionHover","Content","pl","pr","xs","md","motion","timing","fast","ease","RichText","ContentRichText","pb","ChevronWrapper","span","svg","ml","icon","hideOnPrint","compose","withDigitalDataContext","withEditMode","item","headingLevel","editMode","digitalData","setDigitalData","sectionHeading","title","content","id","useRef","hoverActive","setHoverActive","controlId","buttonProps","as","onClick","setObjectData","name","data","value","emitTrackEvent","onMouseEnter","onMouseLeave","className","tag","field","Icon","ariaHidden","ref","isValidAccordionItem","accordionValidators","errorMessage","minLength","allowRenderOnError","validators","FaqPagesStructuredData","isForFAQ","items","length","structuredData","map","faq","stripHTML","Helmet","type","JSON","stringify","withDataSourceValidation","rendering","introHeading","fields","datasource","heading","description","isComponentUsedAsFAQ","params","headingLevelAccordionItem","uid","HeadingWithDescription","descriptionField","headingField","key"],"mappings":"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","file":"static/js/Accordion.96ce4a23.chunk.js","sourcesContent":["import { useState, useEffect } from 'react';\r\nimport usePrevious from './usePrevious';\r\n\r\ntype ContentStyle = {\r\n  height?: string;\r\n  transition?: string;\r\n};\r\n\r\nexport default function useAccordion(contentRef, startExpanded = false) {\r\n  const [expanded, setExpanded] = useState(startExpanded);\r\n  const [contentStyle, setContentStyle] = useState<ContentStyle>(\r\n    !startExpanded ? { height: '0px' } : {}\r\n  );\r\n  const prevExpanded = usePrevious(expanded);\r\n\r\n  // expand/collapse effect\r\n  useEffect(() => {\r\n    const el = contentRef.current;\r\n    if (!expanded && prevExpanded) {\r\n      // collapse\r\n      if (el) {\r\n        // store content height before collapse\r\n        const contentHeight = el.scrollHeight;\r\n        const elemTransition = el.style.transition;\r\n\r\n        setContentStyle({ transition: '' });\r\n\r\n        //  @see https://css-tricks.com/using-css-transitions-auto-dimensions/\r\n        requestAnimationFrame(() => {\r\n          setContentStyle({\r\n            height: `${contentHeight  }px`,\r\n            transition: elemTransition\r\n          });\r\n\r\n          requestAnimationFrame(() => {\r\n            setContentStyle({ height: '0px' });\r\n          });\r\n        });\r\n      }\r\n    } else if (expanded && !prevExpanded) {\r\n      // expand\r\n      if (el) {\r\n        setContentStyle({\r\n          height: `${el.scrollHeight  }px`\r\n        });\r\n      }\r\n    }\r\n  }, [expanded, prevExpanded, contentRef, setContentStyle]);\r\n\r\n  return { expanded, setExpanded, contentStyle };\r\n}\r\n","import { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport styled from 'styled-components';\r\n\r\nimport { spacing } from '_utils/props';\r\nimport {\r\n  buttonReset,\r\n  fixedTitle16,\r\n  hideOnPrint,\r\n  mq,\r\n  svg,\r\n} from '_utils/styles';\r\n\r\nimport ContentRichText from \"../ContentRichText\";\r\nimport StyledContentRichText from '../ContentRichText/StyledContentRichText';\r\n\r\nexport const Wrapper = styled.div`\r\n  /*  remove extra margin appearing above the accordion\r\n      when HeadingWithDescription exists */\r\n  > div + ul {\r\n    margin-top: 0;\r\n  }\r\n`;\r\n\r\nexport const Container = styled.ul`\r\n  background-color: ${({ theme }) => theme.accordion.background};\r\n  border-radius: ${({ theme }) => theme.accordion.borderRadius}px;\r\n  list-style: none;\r\n  padding: 0;\r\n\r\n  ${StyledContentRichText} + & {\r\n    ${({ theme }) => spacing({ theme, mt: 3 })}\r\n  }\r\n`;\r\n\r\nexport const Item = styled.li`\r\n  border: ${({ theme }) => theme.accordion.border};\r\n  border-color: ${({ theme }) => theme.accordion.borderColor};\r\n  position: relative;\r\n\r\n  /* when anything inside has focus */\r\n  body:not(.safe-focus-removal) &:focus-within {\r\n    &:before {\r\n      border: 2px solid ${({ theme }) => theme.colors.interactiveCell.focus};\r\n      content: '';\r\n      height: calc(100% + 2px);\r\n      left: -1px;\r\n      position: absolute;\r\n      top: -2px;\r\n      width: calc(100% + 2px);\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    background-color: ${({ theme }) => theme.accordion.background};\r\n    border: ${({ theme }) => theme.accordion.borderHover};\r\n  }\r\n\r\n  &.hover-active {\r\n    background-color: ${({ theme }) => theme.accordion.backgroundHover};\r\n    border: ${({ theme }) => theme.accordion.borderHover};\r\n  }\r\n\r\n  &:not(:last-child) {\r\n    border-bottom: none;\r\n  }\r\n\r\n  /* turn on border top of next sibling so we get a complete border on hover */\r\n  &:not(:last-child).hover-active + & {\r\n    border-top: ${({ theme }) => theme.accordion.borderHover};\r\n  }\r\n`;\r\n\r\nexport const Button = styled.button`\r\n  ${buttonReset}\r\n  ${({ theme }) => spacing({ theme, px: 2 })}\r\n  align-items: center;\r\n  color:${({ theme }) => theme.accordion.primary};\r\n  display: flex;\r\n  outline: 0;\r\n  position: relative;\r\n  text-align: left;\r\n  width: 100%;\r\n`;\r\n\r\nexport const Heading = styled(Text)`\r\n  h2&,\r\n  h3&,\r\n  h4&,\r\n  h5&,\r\n  h6&\r\n   {\r\n    ${({ theme }) => spacing({ theme, my: 2 })}\r\n    ${fixedTitle16}\r\n    color: ${({ theme }) => theme.colors.text.default} ;\r\n    display: block;\r\n    flex: 1 1 auto;\r\n    font-family: inherit;\r\n  }\r\n\r\n  @media (hover: hover) {\r\n    ${Button}:hover & {\r\n      color: ${({ theme }) => theme.accordion.actionHover};\r\n    }\r\n  }\r\n\r\n  ${Item}.edit-mode && {\r\n    color: inherit;\r\n  }\r\n`;\r\n\r\nexport const Content = styled.div`\r\n  ${({ theme }) => spacing({ theme, pl: 2, pr: { xs: '56px', md: '72px' } })}\r\n  overflow: hidden;\r\n  transition-duration: ${({ theme }) => theme.motion.timing.fast};\r\n  transition-property: height, padding;\r\n  transition-timing-function: ${({ theme }) => theme.motion.ease};\r\n\r\n  @media print {\r\n    height: auto !important;\r\n  }\r\n`;\r\n\r\nexport const RichText = styled(ContentRichText)`\r\n  ${({ theme }) => spacing({ theme, pb: 3 })}\r\n\r\n  > :last-child {\r\n    margin-bottom: 0;\r\n  }\r\n`;\r\n\r\nexport const ChevronWrapper = styled.span`\r\n  ${svg(24, 24)}\r\n  ${({ theme }) => spacing({ theme, ml: 2 })}\r\n  flex: none;\r\n  width: 24px;\r\n\r\n  @media (hover: hover) {\r\n    ${Button}:hover & {\r\n      path {\r\n        fill: ${({ theme }) => theme.accordion.icon};\r\n      }\r\n    }\r\n  }\r\n\r\n  path {\r\n    fill: ${({ theme }) => theme.accordion.icon};\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  ${Item}.expanded & {\r\n    transform: rotate(180deg);\r\n  }\r\n\r\n  ${Item}.edit-mode & {\r\n    transform: rotate(0);\r\n  }\r\n\r\n  ${hideOnPrint}\r\n`;\r\n","import { compose } from 'ramda';\r\nimport React, { useState, useRef } from 'react';\r\n\r\nimport Icon from '_components/Icon';\r\nimport { withEditMode } from '_containers/BaseComponent';\r\nimport { withDigitalDataContext } from '_containers/DigitalDataContext';\r\n\r\nimport { emitTrackEvent, setObjectData } from '_utils/helpers/analytics';\r\nimport useAccordion from '_utils/hooks/useAccordion';\r\n\r\nimport {\r\n  Button,\r\n  ChevronWrapper,\r\n  Content,\r\n  Heading,\r\n  Item,\r\n  RichText,\r\n} from './StyledAccordion';\r\nimport { AccordionItemProps } from './definitions';\r\n\r\nconst AccordionItem: React.FC<AccordionItemProps> = ({\r\n  item,\r\n  headingLevel = 3,\r\n  editMode,\r\n  digitalData,\r\n  setDigitalData,\r\n  sectionHeading,\r\n}) => {\r\n  const { title, content, id } = item;\r\n  const contentRef = useRef(null);\r\n  const { expanded, setExpanded, contentStyle } = useAccordion(contentRef, editMode);\r\n  const [hoverActive, setHoverActive] = useState(false);\r\n  const controlId = `content-${id}`;\r\n\r\n  const buttonProps = editMode\r\n    ? {\r\n      as: 'div'\r\n    }\r\n    : {\r\n      'aria-expanded': expanded,\r\n      'aria-controls': controlId,\r\n      onClick: () => {\r\n        // analytics\r\n        if (typeof setDigitalData === 'function') {\r\n          setDigitalData(\r\n            setObjectData(\r\n              ['accordion'],\r\n              {\r\n                name: sectionHeading ?? '',\r\n                text: title?.data?.value ?? '',\r\n              },\r\n              digitalData)\r\n          );\r\n\r\n          emitTrackEvent(`accordion${!expanded ? 'Expand' : 'Collapse'}`);\r\n        }\r\n        setExpanded(!expanded);\r\n      },\r\n      onMouseEnter: () => setHoverActive(true),\r\n      onMouseLeave: () => setHoverActive(false)\r\n    };\r\n\r\n  return (\r\n    <Item\r\n      className={`${editMode ? 'edit-mode' : ''} ${expanded ? 'expanded' : ''} ${hoverActive ? 'hover-active' : ''}`}\r\n    >\r\n      <Button {...buttonProps}>\r\n        <Heading\r\n          tag={typeof headingLevel === 'number' ? `h${headingLevel}` : headingLevel}\r\n          field={title.data}\r\n        />\r\n        <ChevronWrapper>\r\n          <Icon ariaHidden={true} name=\"expand_more\" />\r\n        </ChevronWrapper>\r\n      </Button>\r\n      <Content style={contentStyle} ref={contentRef} aria-hidden={!expanded} id={controlId}>\r\n        <RichText field={content.data} className=\"fullWidthOnDesktop\" />\r\n      </Content>\r\n    </Item>\r\n  );\r\n};\r\n\r\nexport default compose(withDigitalDataContext, withEditMode)(AccordionItem);\r\n","import { SitecoreFieldValidator } from '_utils/validationChecks/definitions';\r\nimport { AccordionItemData } from './definitions';\r\n\r\nexport const isValidAccordionItem = (\r\n  item: AccordionItemData,\r\n) => {\r\n  if (!item) {\r\n    return false;\r\n  }\r\n\r\n  const { title, content } = item;\r\n\r\n  return !!title?.data?.value && !!content?.data?.value;\r\n};\r\n\r\nexport const accordionValidators: SitecoreFieldValidator[] = [\r\n  {\r\n    field: 'rendering.fields.data.datasource.accordion',\r\n    errorMessage: 'Accordion component has no data source',\r\n  },\r\n  {\r\n    field: 'rendering.fields.data.datasource.accordion',\r\n    errorMessage: 'Accordion component has no valid items and will not be displayed.',\r\n    minLength: 1,\r\n  },\r\n  {\r\n    field: 'rendering.fields.data.datasource.accordion',\r\n    errorMessage: 'Accordion component has no valid items and will not be displayed.',\r\n    allowRenderOnError: true, // pass the content on to the client side anyway, individual filtering is handled there\r\n    validators: [\r\n      (field) => isValidAccordionItem(field),\r\n    ],\r\n  }\r\n];\r\n","import React from 'react';\r\nimport { Helmet } from 'react-helmet';\r\nimport { stripHTML } from '_utils/helpers/html';\r\nimport { FaqPagesStructuredDataProps } from './definitions';\r\n\r\nconst FaqPagesStructuredData: React.FC<FaqPagesStructuredDataProps> = ({ isForFAQ, items }) => {\r\n\r\n  if (!isForFAQ || items?.length === 0) {\r\n    return null;\r\n  }\r\n\r\n  const structuredData = {\r\n    \"@context\": \"https://schema.org\",\r\n    \"@type\": \"FAQPage\",\r\n    \"mainEntity\": items.map(faq => {\r\n      const question = faq?.title?.data?.value;\r\n      const anwser = stripHTML(faq?.content?.data?.value)\r\n      return {\r\n        \"@type\": \"Question\",\r\n        \"name\": question,\r\n        \"acceptedAnswer\": {\r\n          \"@type\": \"Answer\",\r\n          \"text\": anwser\r\n          }\r\n        }})\r\n    };\r\n  \r\n  return (\r\n    <Helmet>\r\n      <script type=\"application/ld+json\">\r\n        {JSON.stringify(structuredData)}\r\n      </script>\r\n    </Helmet>\r\n  );\r\n};\r\n\r\nexport default FaqPagesStructuredData;","import { compose } from 'ramda';\r\nimport React from 'react';\r\n\r\nimport AccordionItem from './AccordionItem';\r\nimport { withDataSourceValidation, withEditMode } from '_containers/BaseComponent';\r\nimport HeadingWithDescription from '_utils/components/HeadingWithDescription';\r\n\r\nimport { AccordionItemData, AccordionProps } from './definitions';\r\nimport { accordionValidators, isValidAccordionItem } from './validation';\r\n\r\nimport { Container, Wrapper } from './StyledAccordion';\r\n\r\nimport FaqPagesStructuredData from './FaqStructureData';\r\n\r\nconst Accordion: React.FC<AccordionProps> = ({ editMode, rendering }) => {\r\n  const introHeading = rendering?.fields?.data?.datasource?.heading?.data;\r\n  const description = rendering?.fields?.data?.datasource?.description?.data;\r\n  const items: AccordionItemData[] = rendering?.fields?.data?.datasource?.accordion ?? [];\r\n  /** This accordion component will be used as a FAQ, but not always used as a FAQ。 \r\n   * Checking here to determine add the SEO google structure data or not\r\n   * */ \r\n  const isComponentUsedAsFAQ = rendering?.fields?.data?.datasource?.faq?.data?.value ?? false;\r\n  const headingLevel = rendering?.params?.headingLevel || 'h3';\r\n  const headingLevelAccordionItem = rendering?.params?.headingLevelAccordionItem || 'h4';\r\n  const uid = rendering?.uid;\r\n\r\n  return (\r\n    <Wrapper\r\n      className=\"accordion\"\r\n      data-component\r\n      id={uid}\r\n    >\r\n      <HeadingWithDescription\r\n        descriptionField={description}\r\n        headingField={introHeading}\r\n        headingLevel={headingLevel}\r\n      />\r\n\r\n      <Container>\r\n        {items.map((item) =>\r\n          editMode || isValidAccordionItem(item) ? (\r\n            <AccordionItem\r\n              headingLevel={headingLevelAccordionItem}\r\n              item={item}\r\n              key={item?.id}\r\n              sectionHeading={introHeading?.value}\r\n            />\r\n          ) : null\r\n        )}\r\n      </Container>\r\n      {/* Google Structured data for FAQ */}\r\n      <FaqPagesStructuredData items={items} isForFAQ={isComponentUsedAsFAQ}/>\r\n    </Wrapper>\r\n  );\r\n}\r\n\r\nexport default compose(\r\n  withEditMode,\r\n  withDataSourceValidation(accordionValidators),\r\n)(Accordion);\r\n"],"sourceRoot":""}