{"version":3,"file":"static/js/FrequentlyAskedQuestion.d431cfe7.js","mappings":"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","sources":["components/FrequentlyAskedQuestion/FrequentlyAskedQuestion.styled.ts","components/FrequentlyAskedQuestion/FrequentlyAskedQuestion.tsx"],"sourcesContent":["import { styled, css } from \"styled-components\";\nimport theme from \"styled-theming\";\n\nimport Button from \"components/Button\";\nimport Icon from \"components/Icon\";\nimport { styleHeadingS } from \"style/components/Typography\";\nimport { MQ } from \"style/mediaQueries\";\n\nexport const borderColor = theme(\"contentTheme\", {\n    white: \"--color-white-o15\",\n    black: \"--color-black-o15\",\n    cyan: \"--color-cyan-o20\",\n    blue: \"--color-blue-o15\",\n    image: \"--color-white-o15\",\n});\n\nconst linkHoverBorderColor = theme(\"theme\", {\n    white: \"--color-black\",\n    lightgray: \"--color-black\",\n    blue: \"--color-cyan-l60\",\n    cyan: \"--color-blue\",\n    image: \"--color-white\",\n});\n\nconst linkBorderColor = theme(\"theme\", {\n    white: \"--color-black-o30\",\n    lightgray: \"--color-black-o30\",\n    blue: \"--color-cyan-l60-o30\",\n    cyan: \"--color-blue-o30\",\n    image: \"--color-white-o30\",\n});\n\nexport const Container = styled.div`\n    border-top: 1px solid var(${borderColor});\n    padding: 1.3125rem 0;\n\n    &:last-of-type {\n        border-bottom: 1px solid var(${borderColor});\n    }\n\n    ${MQ.FROM_M} {\n        padding: 1.75rem 0;\n    }\n`;\n\nexport const Description = styled.section`\n    padding-left: 2.1875rem;\n    padding-top: 1.3125rem;\n    transition: padding-top 0.2s ease-in-out;\n    ${theme(\"open\", {\n        false: css`\n            display: none;\n        `,\n    })};\n\n    & > :last-child {\n        margin-bottom: 0.4375rem;\n\n        ${MQ.FROM_M} {\n            margin-bottom: 0.875rem;\n        }\n    }\n`;\n\nexport const ArrowIcon = styled(Icon)`\n    inset: 0;\n    position: absolute;\n    transform: ${theme(\"open\", {\n        true: \"rotate(90deg)\",\n        false: \"none\",\n    })};\n    transition: transform 0.2s ease-in-out;\n`;\n\nexport const HeadingWrapper = styled.h3`\n    margin: 0;\n`;\n\nexport const Heading = styled.button`\n    all: unset;\n    ${styleHeadingS};\n    cursor: pointer;\n    display: block;\n    margin: 0;\n    padding-left: 2.1875rem;\n    position: relative;\n    user-select: none;\n\n    span {\n        border-color: var(${linkBorderColor});\n        transition:\n            border-color 0.2s ease-in-out,\n            color 0.2s ease-in-out;\n    }\n\n    &:hover {\n        text-decoration: none;\n\n        span {\n            border-bottom: 1px solid var(${linkHoverBorderColor});\n        }\n    }\n\n    &:focus-visible {\n        outline: 7px solid var(--button-focus);\n        outline-offset: 0;\n    }\n`;\n\nexport const FaqButton = styled(Button)`\n    && {\n        margin-top: 1.3125rem;\n    }\n`;\n","import { useGTMDispatch } from \"@elgorditosalsero/react-gtm-hook\";\nimport React, { ReactElement, useContext, useState } from \"react\";\nimport { ThemeContext, ThemeProvider } from \"styled-components\";\n\nimport TextBlock from \"components/TextBlock\";\nimport { useIsInEditMode } from \"hooks\";\nimport {\n    addEditAttributes,\n    addEditAttributesBlockLevel,\n} from \"utils/episerver\";\n\nimport {\n    Container,\n    Heading,\n    HeadingWrapper,\n    Description,\n    ArrowIcon,\n    FaqButton,\n} from \"./FrequentlyAskedQuestion.styled\";\nimport FrequentlyAskedQuestionProps from \"./FrequentlyAskedQuestionProps\";\n\nconst FrequentlyAskedQuestion = ({\n    question,\n    answer,\n    open,\n    link,\n    id,\n    contentId,\n}: FrequentlyAskedQuestionProps): ReactElement => {\n    const [isActive, setIsActive] = useState(open);\n\n    const sendDataToGTM = useGTMDispatch();\n\n    const isInEditMode = useIsInEditMode();\n\n    const handleKeyPress = (\n        event: React.KeyboardEvent<HTMLButtonElement>,\n    ): void => {\n        event.preventDefault();\n        if (event?.key === \"Enter\") setIsActive(!isActive); // eslint-disable-line\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {\n        event.preventDefault();\n        if (!isActive) {\n            sendDataToGTM({\n                event: \"faq_click\",\n                click_text: question,\n            });\n        }\n        setIsActive(!isActive); // eslint-disable-line\n    };\n\n    const themeContext = useContext(ThemeContext);\n    const actionTheme = (themeContext && themeContext.actionTheme) || \"black\";\n    return (\n        <ThemeProvider\n            theme={{\n                open: isActive || isInEditMode,\n            }}\n        >\n            <Container {...addEditAttributesBlockLevel(contentId)} id={id}>\n                <HeadingWrapper {...addEditAttributes(\"Question\")}>\n                    <Heading\n                        onClick={(event) => handleClick(event)}\n                        onKeyPress={(event) => handleKeyPress(event)}\n                        aria-controls={`faq-panel-${id}`}\n                        id={`faq-header-${id}`}\n                        tabIndex={0}\n                    >\n                        <ArrowIcon icon=\"arrowRight28\" aria-hidden=\"true\" />\n                        {question && (\n                            <span\n                                dangerouslySetInnerHTML={{ __html: question }}\n                            />\n                        )}\n                    </Heading>\n                </HeadingWrapper>\n                <Description\n                    aria-expanded={isActive ? \"true\" : \"false\"}\n                    aria-labelledby={`faq-header-${id}`}\n                    id={`faq-panel-${id}`}\n                    {...addEditAttributes(\"Answer\")}\n                >\n                    {answer !== undefined && (\n                        <TextBlock content={answer} areaName=\"mainBody\" />\n                    )}\n\n                    {link?.linkText && (\n                        <FaqButton\n                            variant=\"outline\"\n                            size=\"medium\"\n                            isLink={true}\n                            actionTheme={actionTheme}\n                            {...link}\n                            {...addEditAttributes(\"Link\")}\n                        />\n                    )}\n                </Description>\n            </Container>\n        </ThemeProvider>\n    );\n};\n\nexport default React.memo(FrequentlyAskedQuestion);\n"],"names":["borderColor","theme","white","black","cyan","blue","image","linkHoverBorderColor","lightgray","linkBorderColor","Container","styled","div","withConfig","componentId","MQ","FROM_M","Description","section","false","css","ArrowIcon","Icon","true","HeadingWrapper","h3","Heading","button","styleHeadingS","FaqButton","Button","FrequentlyAskedQuestion","question","answer","open","link","id","contentId","isActive","setIsActive","useState","sendDataToGTM","useGTMDispatch","isInEditMode","useIsInEditMode","themeContext","useContext","ThemeContext","actionTheme","_jsx","ThemeProvider","children","_jsxs","addEditAttributesBlockLevel","addEditAttributes","onClick","event","preventDefault","click_text","handleClick","onKeyPress","key","handleKeyPress","tabIndex","icon","dangerouslySetInnerHTML","__html","undefined","TextBlock","content","areaName","linkText","variant","size","isLink","React"],"sourceRoot":""}