{"version":3,"file":"static/js/Accordion.784d055d.js","mappings":"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","sources":["components/Accordion/Accordion.styled.ts","components/Accordion/Accordion.tsx"],"sourcesContent":["import { styled, css } from \"styled-components\";\nimport theme from \"styled-theming\";\n\nimport Icon from \"components/Icon\";\nimport TextBlock from \"components/TextBlock\";\nimport { Container as GridContainer } from \"style/components/Page\";\nimport {\n    styleBodyLAlt,\n    styleHeadingL,\n    styleHeadingXL,\n} from \"style/components/Typography\";\nimport { columnGap } from \"style/grid\";\nimport { MQ } from \"style/mediaQueries\";\n\nexport const borderColor = theme(\"theme\", {\n    black: \"--line-on-image-default\",\n    lightgray: \"--line-on-neutral-default\",\n    blue: \"--line-on-blue-default\",\n    cyan: \"--line-on-cyan-default\",\n    image: \"--line-on-image-default\",\n});\n\nexport const Wrapper = styled.div`\n    align-items: center;\n    border-top: 1px solid var(${borderColor});\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    width: 100%;\n\n    &:last-of-type {\n        border-bottom: 1px solid var(${borderColor});\n    }\n`;\n\nexport const Container = styled(GridContainer)`\n    ${columnGap}\n    display: grid;\n    grid-template-columns: repeat(4, [col-start] 1fr);\n    padding: 0 1.75rem;\n    transition: padding 0.2s ease-in-out;\n\n    ${MQ.FROM_M} {\n        grid-template-columns: repeat(12, [col-start] 1fr);\n        padding: 0 2.1875rem;\n    }\n\n    ${MQ.FROM_XL} {\n        padding: 0 3.5rem;\n    }\n`;\n\nexport const Heading = styled.h2`\n    grid-column: 1 col-start / span 4;\n    margin: 0;\n\n    ${MQ.FROM_M} {\n        grid-column: 1 col-start / span 12;\n    }\n`;\n\nexport const HeadingText = styled.span`\n    ${theme(\"open\", {\n        true: styleHeadingXL,\n        false: styleHeadingL,\n    })};\n    grid-column: col-start 1 / span 3;\n    transition: font-size 0.2s ease-in-out;\n    ${MQ.FROM_M} {\n        grid-column: col-start 1 / span 9;\n    }\n`;\n\nexport const Button = styled.button`\n    align-items: center;\n    all: unset;\n    cursor: pointer;\n    display: grid;\n    ${columnGap}\n    grid-column: col-start 1 / span 4;\n    grid-template-columns: repeat(4, [col-start] 1fr);\n    padding: ${theme(\"open\", {\n        true: \"2.1875rem 0\",\n        false: \"1.3125rem 0\",\n    })};\n    transition:\n        padding 0.2s ease-in-out,\n        font-size 0.2s ease-in-out;\n    user-select: none;\n    width: 100%;\n\n    &:focus-visible {\n        outline: 7px solid var(--button-focus);\n        outline-offset: 0;\n    }\n\n    ${MQ.FROM_M} {\n        grid-column: col-start 1 / span 12;\n        grid-template-columns: repeat(12, [col-start] 1fr);\n        padding: ${theme(\"open\", {\n            true: \"3.5rem 0 2.625rem 0\",\n            false: \"1.75rem 0\",\n        })};\n    }\n\n    ${MQ.FROM_XL} {\n        padding: ${theme(\"open\", {\n            true: \"4.375rem 0 3.5rem 0\",\n            false: \"2.1875rem 0\",\n        })};\n    }\n`;\n\nexport const ExpandIcon = styled(Icon)`\n    grid-column: -2 / -1;\n    place-self: start right;\n    position: relative;\n`;\n\nexport const ContentWrapper = styled.div`\n    ${columnGap}\n    display: grid;\n    grid-column: col-start 1 / span 4;\n    grid-template-columns: repeat(4, [col-start] 1fr);\n    ${theme(\"open\", {\n        false: css`\n            display: none;\n        `,\n    })};\n\n    ${MQ.FROM_M} {\n        grid-column: col-start 1 / span 12;\n        grid-template-columns: repeat(12, [col-start] 1fr);\n    }\n`;\n\nexport const Introduction = styled.p`\n    ${styleBodyLAlt}\n    grid-column: col-start 1 / span 4;\n    margin: 0 0 2.1875rem;\n\n    ${MQ.FROM_M} {\n        grid-column: col-start 5 / span 8;\n        margin-bottom: 2.625rem;\n    }\n\n    ${MQ.FROM_L} {\n        grid-column: col-start 5 / span 7;\n    }\n\n    ${MQ.FROM_XL} {\n        grid-column: col-start 6 / span 6;\n        margin-bottom: 3.5rem;\n    }\n`;\n\nexport const Description = styled.section`\n    grid-column: col-start 1 / span 4;\n    margin: 0 0 4.375rem;\n\n    ${MQ.FROM_M} {\n        grid-column: col-start 5 / span 8;\n        margin-bottom: 6.125rem;\n    }\n\n    ${MQ.FROM_L} {\n        grid-column: col-start 5 / span 8;\n    }\n\n    ${MQ.FROM_XL} {\n        grid-column: col-start 6 / span 7;\n        margin-bottom: 8.75rem;\n    }\n`;\n\nexport const StyledTextBlock = styled(TextBlock)`\n    div {\n        &:first-child :first-child {\n            margin-top: 0;\n        }\n\n        &:last-child :last-child {\n            margin-bottom: 0;\n        }\n    }\n`;\n","import { useGTMDispatch } from \"@elgorditosalsero/react-gtm-hook\";\nimport React, { ReactElement, useState } from \"react\";\nimport { ThemeProvider } from \"styled-components\";\n\nimport { useBreakpoint, useIsInEditMode } from \"hooks\";\nimport {\n    addEditAttributes,\n    addEditAttributesBlockLevel,\n} from \"utils/episerver\";\n\nimport {\n    Container,\n    Heading,\n    HeadingText,\n    Button,\n    Description,\n    ExpandIcon,\n    ContentWrapper,\n    Wrapper,\n    Introduction,\n    StyledTextBlock,\n} from \"./Accordion.styled\";\nimport AccordionProps from \"./AccordionProps\";\n\nconst Accordion = ({\n    heading,\n    introduction,\n    mainBody,\n    open,\n    id,\n    anchorName,\n    contentId,\n}: AccordionProps): ReactElement => {\n    const [isActive, setIsActive] = useState(open);\n    const sendDataToGTM = useGTMDispatch();\n    const isInEditMode = useIsInEditMode();\n\n    const handleKeyPress = (\n        event: React.KeyboardEvent<HTMLButtonElement>,\n    ): void => {\n        event.preventDefault();\n        if (event?.key === \"Enter\") setIsActive(isInEditMode || !isActive); // eslint-disable-line\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {\n        event.preventDefault();\n        if (!isActive) {\n            sendDataToGTM({\n                event: \"accordion_click\",\n                click_text: heading,\n            });\n        }\n        setIsActive(isInEditMode || !isActive); // eslint-disable-line\n    };\n\n    let expandIcon: string, collapseIcon: string;\n    switch (useBreakpoint()) {\n        case \"XL\":\n            [expandIcon, collapseIcon] = [\"expand56\", \"collapse56\"];\n            break;\n        case \"L\":\n            [expandIcon, collapseIcon] = [\"expand42\", \"collapse42\"];\n            break;\n        case \"M\":\n            [expandIcon, collapseIcon] = [\"expand42\", \"collapse42\"];\n            break;\n        default:\n            [expandIcon, collapseIcon] = [\"expand35\", \"collapse35\"];\n    }\n\n    return (\n        <ThemeProvider\n            theme={{\n                open: isActive || isInEditMode,\n            }}\n        >\n            <Wrapper id={anchorName || id}>\n                <Container {...addEditAttributesBlockLevel(contentId)}>\n                    <Heading>\n                        <Button\n                            onClick={(event) => handleClick(event)}\n                            onKeyPress={(event) => handleKeyPress(event)}\n                            aria-controls={`accordion-panel-${id}`}\n                            id={`accordion-header-${id}`}\n                            tabIndex={0}\n                            aria-expanded={isActive || isInEditMode}\n                        >\n                            <HeadingText\n                                data-cy=\"heading\"\n                                {...addEditAttributes(\"Heading\")}\n                                dangerouslySetInnerHTML={{\n                                    __html: heading || \"\",\n                                }}\n                            />\n\n                            <ExpandIcon\n                                key={expandIcon}\n                                icon={\n                                    isActive || isInEditMode\n                                        ? collapseIcon\n                                        : expandIcon\n                                }\n                                aria-hidden=\"true\"\n                            />\n                        </Button>\n                    </Heading>\n                    <ContentWrapper\n                        data-cy=\"contentWrapper\"\n                        aria-labelledby={`accordion-header-${id}`}\n                        id={`accordion-panel-${id}`}\n                        aria-hidden={!isActive && !isInEditMode}\n                    >\n                        {(isInEditMode || introduction) && (\n                            <Introduction\n                                {...addEditAttributes(\"Introduction\")}\n                                dangerouslySetInnerHTML={{\n                                    __html: introduction || \"\",\n                                }}\n                            />\n                        )}\n                        {(isInEditMode || mainBody) && (\n                            <Description {...addEditAttributes(\"MainBody\")}>\n                                {mainBody && (\n                                    <StyledTextBlock\n                                        content={mainBody}\n                                        areaName=\"mainBody\"\n                                        editorialGrid={true}\n                                    />\n                                )}\n                            </Description>\n                        )}\n                    </ContentWrapper>\n                </Container>\n            </Wrapper>\n        </ThemeProvider>\n    );\n};\n\nexport default React.memo(Accordion);\n"],"names":["borderColor","theme","black","lightgray","blue","cyan","image","Wrapper","styled","div","withConfig","componentId","Container","GridContainer","columnGap","MQ","FROM_M","FROM_XL","Heading","h2","HeadingText","span","true","styleHeadingXL","false","styleHeadingL","Button","button","ExpandIcon","Icon","ContentWrapper","css","Introduction","p","styleBodyLAlt","FROM_L","Description","section","StyledTextBlock","TextBlock","Accordion","heading","introduction","mainBody","open","id","anchorName","contentId","isActive","setIsActive","useState","sendDataToGTM","useGTMDispatch","isInEditMode","useIsInEditMode","expandIcon","collapseIcon","useBreakpoint","_jsx","ThemeProvider","children","_jsxs","addEditAttributesBlockLevel","onClick","event","preventDefault","click_text","handleClick","onKeyPress","key","handleKeyPress","tabIndex","addEditAttributes","dangerouslySetInnerHTML","__html","icon","content","areaName","editorialGrid","React"],"sourceRoot":""}