{"version":3,"file":"faq-list.component-Vnqqc19X.js","sources":["../../../app/javascript/components/faq-list/components/styles.ts","../../../app/javascript/components/faq-list/components/faq.component.tsx","../../../app/javascript/components/faq-list/styles.ts","../../../app/javascript/components/faq-list/faq-list.component.tsx"],"sourcesContent":["import { styled } from 'styled-components'\n\nimport Button from '~/components/button'\nimport ContentBlock from '~/components/content-block'\nimport Icon from '~/components/icon'\nimport { font } from '~/styles/utils'\n\nexport const FAQ = styled.li`\n  min-height: 54px;\n  padding: 16px;\n  border-bottom: 1px solid ${({ theme }) => theme.color.border.default};\n  position: relative;\n  box-sizing: border-box;\n  display: block;\n\n  &:first-child {\n    border-top: 1px solid ${({ theme }) => theme.color.border.default};\n  }\n`\n\nexport const QuestionWrapper = styled.header`\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  cursor: pointer;\n`\n\nexport const Question = styled.span<{ $active: boolean }>`\n  && {\n    margin: 0;\n    display: inline-block;\n    color: ${({ $active }) =>\n      $active\n        ? ({ theme }) => theme.color.text.default\n        : ({ theme }) => theme.color.text.button.secondary};\n    cursor: pointer;\n    text-transform: uppercase;\n    font-size: 16px;\n    line-height: 150%;\n    letter-spacing: normal;\n    ${font('bold')};\n\n    .fa-plus,\n    .fa-minus {\n      display: block;\n      float: right;\n    }\n  }\n`\nexport const Answer = styled(ContentBlock)`\n  font-size: 16px;\n  color: ${({ theme }) => theme.color.text.default};\n  text-transform: none;\n`\n\nexport const ToggleAnswerButton = styled(Button).attrs({\n  type: 'unstyled',\n})`\n  &&& {\n    width: 100%;\n  }\n`\n\nexport const FAQIcon = styled(Icon)`\n  && {\n    color: ${({ theme }) => theme.color.text.button.secondary};\n    position: relative;\n    top: 6px;\n  }\n`\n","import React from 'react'\n\nimport {\n  Answer,\n  FAQ,\n  FAQIcon,\n  Question,\n  QuestionWrapper,\n  ToggleAnswerButton,\n} from './styles'\n\nimport type { FAQType } from './types'\n\ntype FAQProps = {\n  className?: string\n  faq: FAQType\n  active: boolean\n  onClick: () => void\n}\n\nexport default ({ className, faq, active, onClick }: FAQProps) => {\n  const { question, answer } = faq\n\n  return (\n    <FAQ className={className}>\n      <ToggleAnswerButton onClick={onClick}>\n        <QuestionWrapper>\n          <Question $active={active}>{question}</Question>\n          <FAQIcon glyph={active ? 'minus' : 'plus'} />\n        </QuestionWrapper>\n      </ToggleAnswerButton>\n      {active && <Answer>{answer}</Answer>}\n    </FAQ>\n  )\n}\n","import { styled } from 'styled-components'\n\nimport Button from '~/components/button'\nimport { font } from '~/styles/utils'\n\nexport const FAQList = styled.div`\n  margin: 0;\n  padding: 16px;\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  text-align: left;\n  background-color: ${({ theme }) => theme.color.background.default};\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.sm.max}) {\n    flex-direction: row;\n  }\n`\n\nexport const Heading = styled.h2<{ $foodBev: boolean }>`\n  margin: 0;\n  padding-right: 30px;\n  font-size: 24px;\n  line-height: 1;\n  letter-spacing: -1px;\n  padding-top: 10px;\n  text-align: left;\n  color: ${({ theme }) => theme.color.text.headline};\n`\n\nexport const FAQsWrapper = styled.div<{ $fullWidth: boolean }>`\n  width: 100%;\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.sm.max}) {\n    width: ${({ $fullWidth }) => ($fullWidth ? '100%' : '65%')};\n  }\n`\n\nexport const FAQs = styled.ul`\n  padding: 0;\n  justify-content: space-between;\n  list-style: none;\n`\n\nexport const AllFAQsButton = styled(Button).attrs({ type: 'plain' })`\n  .button-content {\n    ${font('bold')};\n    color: ${({ theme }) => theme.color.text.button.secondary};\n    padding-left: 16px;\n  }\n`\n","import React, { useState } from 'react'\n\nimport { i18n } from '~/i18n'\n\nimport FAQ from './components/faq.component'\nimport { AllFAQsButton, FAQList, FAQs, FAQsWrapper, Heading } from './styles'\n\nimport type { FAQType } from './components'\n\ntype Props = {\n  heading: string\n  faqs: FAQType[]\n  foodBevFAQs?: boolean\n  className?: string\n  showAllLinkText?: string\n  onExpand?: (index: number | null) => void\n  onClickViewAll?: () => void\n  fullWidth?: boolean\n}\n\nexport default (props: Props) => {\n  const [faqsActiveState, setFaqsActiveState] = useState({})\n  const { heading, faqs, foodBevFAQs, className, showAllLinkText } = props\n  const showAllFAQsLink = !foodBevFAQs\n  const onClick = (index: number) => {\n    const isCurrentlyActive = faqsActiveState[index]\n\n    setFaqsActiveState((currentState) => ({\n      ...currentState,\n      [index]: !currentState[index],\n    }))\n\n    if (props.onExpand && !isCurrentlyActive) {\n      props.onExpand(index)\n    }\n  }\n  const onClickAll = () => {\n    if (props.onClickViewAll) {\n      props.onClickViewAll()\n    }\n  }\n\n  return (\n    <FAQList className={className}>\n      <Heading $foodBev={foodBevFAQs}>{heading}</Heading>\n      <FAQsWrapper $fullWidth={props.fullWidth}>\n        <FAQs>\n          {faqs.map((faq, index) => (\n            <FAQ\n              key={faq.question}\n              faq={faq}\n              active={faqsActiveState[index]}\n              onClick={() => onClick(index)}\n            />\n          ))}\n        </FAQs>\n        {showAllFAQsLink && (\n          <AllFAQsButton\n            to={i18n.t('links.faq_link.to')}\n            target=\"_blank\"\n            onClick={onClickAll}\n          >\n            {showAllLinkText || i18n.t('links.faq_link.text_alt')}\n          </AllFAQsButton>\n        )}\n      </FAQsWrapper>\n    </FAQList>\n  )\n}\n"],"names":["FAQ","styled","theme","QuestionWrapper","Question","$active","font","Answer","ContentBlock","ToggleAnswerButton","Button","FAQIcon","Icon","className","faq","active","onClick","question","answer","React","FAQList","Heading","FAQsWrapper","$fullWidth","FAQs","AllFAQsButton","props","faqsActiveState","setFaqsActiveState","useState","heading","faqs","foodBevFAQs","showAllLinkText","showAllFAQsLink","index","isCurrentlyActive","currentState","onClickAll","i18n"],"mappings":"qIAOO,MAAMA,EAAMC,EAAO;AAAA;AAAA;AAAA,6BAGG,CAAC,CAAE,MAAAC,KAAYA,EAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAM1C,CAAC,CAAE,MAAAA,KAAYA,EAAM,MAAM,OAAO,OAAO;AAAA;AAAA,EAIxDC,EAAkBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOzBG,EAAWH,EAAO;AAAA;AAAA;AAAA;AAAA,aAIlB,CAAC,CAAE,QAAAI,KACVA,EACI,CAAC,CAAE,MAAAH,KAAYA,EAAM,MAAM,KAAK,QAChC,CAAC,CAAE,MAAAA,KAAYA,EAAM,MAAM,KAAK,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMpDI,EAAK,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASLC,EAASN,EAAOO,CAAY;AAAA;AAAA,WAE9B,CAAC,CAAE,MAAAN,KAAYA,EAAM,MAAM,KAAK,OAAO;AAAA;AAAA,EAIrCO,EAAqBR,EAAOS,CAAM,EAAE,MAAM,CACrD,KAAM,UACR,CAAC;AAAA;AAAA;AAAA;AAAA,EAMYC,EAAUV,EAAOW,CAAI;AAAA;AAAA,aAErB,CAAC,CAAE,MAAAV,KAAYA,EAAM,MAAM,KAAK,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA,EC7C9CF,EAAA,CAAC,CAAE,UAAAa,EAAW,IAAAC,EAAK,OAAAC,EAAQ,QAAAC,KAAwB,CAC1D,KAAA,CAAE,SAAAC,EAAU,OAAAC,CAAA,EAAWJ,EAG3B,OAAAK,EAAA,cAACnB,EAAI,CAAA,UAAAa,GACFM,EAAA,cAAAV,EAAA,CAAmB,QAAAO,GAClBG,EAAA,cAAChB,EACC,KAAAgB,EAAA,cAACf,EAAS,CAAA,QAASW,GAASE,CAAS,EACrCE,EAAA,cAACR,EAAQ,CAAA,MAAOI,EAAS,QAAU,MAAQ,CAAA,CAC7C,CACF,EACCA,GAAUI,EAAA,cAACZ,EAAQ,KAAAW,CAAO,CAC7B,CAEJ,EC7BaE,EAAUnB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOR,CAAC,CAAE,MAAAC,KAAYA,EAAM,MAAM,WAAW,OAAO;AAAA;AAAA,uBAE5C,CAAC,CAAE,MAAAA,KAAYA,EAAM,WAAW,GAAG,GAAG;AAAA;AAAA;AAAA,EAKhDmB,EAAUpB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQnB,CAAC,CAAE,MAAAC,KAAYA,EAAM,MAAM,KAAK,QAAQ;AAAA,EAGtCoB,EAAcrB,EAAO;AAAA;AAAA;AAAA,uBAGX,CAAC,CAAE,MAAAC,KAAYA,EAAM,WAAW,GAAG,GAAG;AAAA,aAChD,CAAC,CAAE,WAAAqB,CAAA,IAAkBA,EAAa,OAAS,KAAM;AAAA;AAAA,EAIjDC,EAAOvB,EAAO;AAAA;AAAA;AAAA;AAAA,EAMdwB,EAAgBxB,EAAOS,CAAM,EAAE,MAAM,CAAE,KAAM,QAAS;AAAA;AAAA,MAE7DJ,EAAK,MAAM,CAAC;AAAA,aACL,CAAC,CAAE,MAAAJ,KAAYA,EAAM,MAAM,KAAK,OAAO,SAAS;AAAA;AAAA;AAAA,EC3B9CkB,EAACM,GAAiB,CAC/B,KAAM,CAACC,EAAiBC,CAAkB,EAAIC,EAAAA,SAAS,CAAA,CAAE,EACnD,CAAE,QAAAC,EAAS,KAAAC,EAAM,YAAAC,EAAa,UAAAnB,EAAW,gBAAAoB,GAAoBP,EAC7DQ,EAAkB,CAACF,EACnBhB,EAAWmB,GAAkB,CAC3B,MAAAC,EAAoBT,EAAgBQ,CAAK,EAE/CP,EAAoBS,IAAkB,CACpC,GAAGA,EACH,CAACF,CAAK,EAAG,CAACE,EAAaF,CAAK,CAAA,EAC5B,EAEET,EAAM,UAAY,CAACU,GACrBV,EAAM,SAASS,CAAK,CAExB,EACMG,EAAa,IAAM,CACnBZ,EAAM,gBACRA,EAAM,eAAe,CAEzB,EAGE,OAAAP,EAAA,cAACC,GAAQ,UAAAP,CACP,EAAAM,EAAA,cAACE,GAAQ,SAAUW,CAAA,EAAcF,CAAQ,EACzCX,EAAA,cAACG,GAAY,WAAYI,EAAM,WAC5BP,EAAA,cAAAK,EAAA,KACEO,EAAK,IAAI,CAACjB,EAAKqB,IACdhB,EAAA,cAACnB,EAAA,CACC,IAAKc,EAAI,SACT,IAAAA,EACA,OAAQa,EAAgBQ,CAAK,EAC7B,QAAS,IAAMnB,EAAQmB,CAAK,CAAA,CAAA,CAE/B,CACH,EACCD,GACCf,EAAA,cAACM,EAAA,CACC,GAAIc,EAAK,EAAE,mBAAmB,EAC9B,OAAO,SACP,QAASD,CAAA,EAERL,GAAmBM,EAAK,EAAE,yBAAyB,CAAA,CAG1D,CACF,CAEJ"}