{"version":3,"file":"FactBoxBlock.chunk.edc3e533e632594a6aa2.js","mappings":"8QACA,GAAgB,QAAU,uBAAuB,QAAU,uBAAuB,QAAU,uBAAuB,oBAAsB,uBAAuB,OAAS,uBAAuB,MAAQ,uBAAuB,KAAO,uBAAuB,mBAAmB,uBAAuB,oBAAoB,uBAAuB,iBAAiB,uBAAuB,gBAAgB,wBCwBnY,MAAMA,EAA2DC,IACpE,MAAMC,GAAQC,EAAAA,EAAAA,MACR,QAAEC,EAAU,QAAO,aAAEC,EAAY,QAAEC,EAAO,QAAEC,GAAYN,GAExD,mBAAEO,GAAuBN,GACxBO,EAAUC,GAAeC,EAAAA,UAAe,GACzCC,EAAYC,IAAS,aACrBC,EAA8B,UAAZV,EAAsB,OAAS,QAUvD,OACIO,EAAAA,cAAA,OACII,UAAWC,IACPC,EAAOjB,QACPiB,EAAO,YAADC,OAAad,IACnBK,GAAYQ,EAAO,qBACnBT,GAAsBS,EAAO,sBAGjCN,EAAAA,cAAA,MAAII,UAAWE,EAAOE,SAAUb,GAChCK,EAAAA,cAAA,OAAKI,UAAWE,EAAOG,SACnBT,EAAAA,cAAA,OAAKI,UAAWE,EAAOI,oBAAqBC,GAAIV,GAC5CD,EAAAA,cAACY,EAAAA,EAAO,CACJC,KAAMjB,EACNQ,UAAWC,IAAW,kBAAmB,oBAAFE,OAAsBJ,QAIzEH,EAAAA,cAACc,EAAAA,EAAM,CACHC,QA3BWC,KACnBjB,GAAaD,EAAS,EA2Bd,gBAAeA,EACf,gBAAeG,EACfgB,KAAMC,EAAAA,EAAWC,QACjBC,KAAkB,UAAZ3B,EAAsB4B,EAAAA,EAAWC,QAAUD,EAAAA,EAAWE,SAC5DhC,MAAOA,EACPa,UAAWE,EAAOQ,QAElBd,EAAAA,cAAA,QAAMI,UAAWE,EAAOkB,OAAQ1B,EAAWJ,EAAa+B,MAAQ/B,EAAagC,MAC7E1B,EAAAA,cAAC2B,EAAAA,EAAO,CAACC,SAAS,eAAexB,UAAWE,EAAOuB,QAErD,ECpEDC,EAAgDxC,IACzD,MAAM,QAAEM,EAAO,QAAED,EAAO,QAAEF,EAAO,aAAEC,GAAiBJ,EAEpD,OAAOU,EAAAA,cAACX,EAAO,CAACM,QAASA,EAASF,QAASA,EAASG,QAASA,EAASF,aAAcA,GAAgB,C","sources":["webpack://Kristiania.Web/./Features/Partials/FactBox/FactBox.module.css?436e","webpack://Kristiania.Web/./Features/Partials/FactBox/FactBox.tsx","webpack://Kristiania.Web/./Features/Blocks/FactBoxBlock/View/FactBoxBlock.tsx"],"sourcesContent":["// extracted by mini-css-extract-plugin\nexport default {\"FactBox\":\"SLF7RES86xTPWWtki82o\",\"Content\":\"bJYngK6ypImoeEjc1Zsc\",\"Heading\":\"aCMqJVKEHAuH57tV0Yrb\",\"RichtextAdjustments\":\"Z7wPDEVliiNixyrnGVgQ\",\"Button\":\"bQnzyEtrQzS6zXg8sIYY\",\"Label\":\"SY7qxDlwf0da4MKx6771\",\"Icon\":\"pyDZM0A_KbzwdqEbA_Vk\",\"Variant--rounded\":\"hL8gjEb7Q_E5XTbS9vt7\",\"Variant--expanded\":\"wfcNqhksTwHyYNiE0NHA\",\"Variant--light\":\"IJHuFtWyStsP0cGiCsM6\",\"Variant--dark\":\"pU0n_MV0BNxsK67SLgPl\"};","import classNames from 'classnames';\nimport uniqueId from 'lodash/uniqueId';\nimport * as React from 'react';\nimport { Button } from '../Button/Button';\nimport { ButtonTier } from '../Button/ButtonTier.csharp';\nimport { ButtonType } from '../Button/ButtonType.csharp';\nimport { SvgIcon } from '../SvgIcon/SvgIcon';\nimport { useTheme } from '~/Features/Layouts/Theme/Context/ThemeContextProvider';\nimport type { HtmlString } from '~/Features/Types/HtmlString.csharp';\nimport { HtmlDiv } from '~/Partials/Controls/HtmlDiv';\nimport styles from './FactBox.module.css';\nimport type { FactBoxColorVariant } from './FactBoxColorVariant';\n\ninterface FactBoxTranslations {\n    open: string;\n    close: string;\n}\n\nexport interface FactBoxProps {\n    variant: FactBoxColorVariant;\n    heading: string;\n    content: HtmlString;\n    translations: FactBoxTranslations;\n}\n\nexport const FactBox: React.FC<React.PropsWithChildren<FactBoxProps>> = props => {\n    const theme = useTheme();\n    const { variant = 'light', translations, heading, content } = props;\n\n    const { withRoundedCorners } = theme;\n    const [expanded, setExpanded] = React.useState(false);\n    const factBoxId = uniqueId('FactBox__');\n    const richtextVariant = variant === 'light' ? 'dark' : 'light';\n\n    const toggleExpanded = () => {\n        setExpanded(!expanded);\n    };\n\n    // KNOWN ISSUE: FactBox is not prepared to support shorter text (the button to expand/collapse is always visible).\n    // We are aware of it, but we assume editors will use this box to present longer text.\n    // So, unless the client reports this, we should not bother fixing it.\n\n    return (\n        <div\n            className={classNames(\n                styles.FactBox,\n                styles[`Variant--${variant}`],\n                expanded && styles['Variant--expanded'],\n                withRoundedCorners && styles['Variant--rounded']\n            )}\n        >\n            <h3 className={styles.Heading}>{heading}</h3>\n            <div className={styles.Content}>\n                <div className={styles.RichtextAdjustments} id={factBoxId}>\n                    <HtmlDiv\n                        html={content}\n                        className={classNames('RichtextContent', `RichtextContent--${richtextVariant}`)}\n                    />\n                </div>\n            </div>\n            <Button\n                onClick={toggleExpanded}\n                aria-expanded={expanded}\n                aria-controls={factBoxId}\n                type={ButtonType.Outline}\n                tier={variant === 'light' ? ButtonTier.Primary : ButtonTier.Tertiary}\n                theme={theme}\n                className={styles.Button}\n            >\n                <span className={styles.Label}>{expanded ? translations.close : translations.open}</span>\n                <SvgIcon iconName=\"chevron-down\" className={styles.Icon} />\n            </Button>\n        </div>\n    );\n};\n","import React from 'react';\nimport type { FactBoxBlockViewModel } from '../ViewModel/FactBoxBlockViewModel.csharp';\nimport { FactBox } from '~/Partials/FactBox/FactBox';\n\nexport const FactBoxBlock: React.FC<FactBoxBlockViewModel> = props => {\n    const { content, heading, variant, translations } = props;\n\n    return <FactBox heading={heading} variant={variant} content={content} translations={translations} />;\n};\n"],"names":["FactBox","props","theme","useTheme","variant","translations","heading","content","withRoundedCorners","expanded","setExpanded","React","factBoxId","uniqueId","richtextVariant","className","classNames","styles","concat","Heading","Content","RichtextAdjustments","id","HtmlDiv","html","Button","onClick","toggleExpanded","type","ButtonType","Outline","tier","ButtonTier","Primary","Tertiary","Label","close","open","SvgIcon","iconName","Icon","FactBoxBlock"],"sourceRoot":""}