\n {icon && {icon}}\n \n {loading ? null : children || label}\n \n \n )\n}\n\nButton.displayName = 'Button'\n\nexport default Button\n","// @flow\nimport * as React from 'react'\nimport styled, { ThemeContext } from 'styled-components'\nimport { rem } from 'polished'\n\nimport { getFontSize, getLineHeight } from '../../styles/style-helpers'\nimport type { FontSizes } from '../../styles/fonts'\nimport { mediaOnly } from '../../styles/media'\n\ntype Props = {\n children?: React.Node,\n marginBottom?: boolean,\n truncate?: boolean,\n /** Don't split the children into multiple paragraphs */\n noBreaks?: boolean,\n /** Size corresponding to the body styles in the styleguide */\n size?: FontSizes,\n weight?: 300 | 400 | 500 | 700,\n /** Limit the width of the paragraph to a readable 550px*/\n maxWidth?: boolean,\n /** The HTML tag to output - Defaults to */\n tag?: any, // Not sure if right approach\n color?: string,\n invert?: boolean,\n}\n\nconst P = styled.p`\n font-size: ${p => getFontSize(p.size)};\n line-height: ${p => getLineHeight(p.size)};\n ${p =>\n p.size === 'large' &&\n mediaOnly.xs`\n font-size: 1rem\n `};\n text-align: left;\n margin-top: 0;\n margin-bottom: ${(props: Props) => (props.marginBottom ? '2rem' : 0)};\n font-weight: ${(props: Props) => props.weight || 300};\n max-width: ${(props: Props) => (props.maxWidth ? '680px' : undefined)};\n\n color: ${(props: Props) => (props.color ? props.color : 'currentColor')};\n\n ${({ theme, size }) =>\n (theme.name === 'kids' || theme.name === 'lgbt') &&\n size === 'normal' &&\n `\n font-size: ${rem(theme.bodyFontSize)};\n font-weight: ${theme.bodyFontWeight};\n `}\n`\n\nfunction Paragraph({ children, noBreaks, tag, ...rest }: Props) {\n const theme = React.useContext(ThemeContext)\n const Tag = tag && tag !== 'p' ? P.withComponent(tag) : P\n\n if (React.Children.count(children) > 1 && !noBreaks) {\n const last = React.Children.count(children) - 1\n return React.Children.map(children, (child, index) => (\n \n {child}\n \n ))\n }\n return (\n \n {children}\n \n )\n}\n\nParagraph.displayName = 'Paragraph'\nParagraph.defaultProps = {\n size: 'normal',\n}\n\nexport default Paragraph\n","// @flow\nimport styled from 'styled-components'\nimport { mediaQuery } from '../../styles/media'\n\nconst WhiteEdge = styled.div`\n display: none;\n position: absolute;\n z-index: 20;\n background: white;\n height: 100%;\n width: 40px;\n top: 0;\n bottom: 0;\n\n ${mediaQuery.md`\n display: block;\n `}\n`\n\nexport default WhiteEdge\n","// @flow\nimport * as React from 'react'\nimport styled from 'styled-components'\nimport WhiteEdge from '../../components/WhiteEdge/WhiteEdge'\n\ntype Props = {\n hasHero?: boolean,\n children?: React.Node,\n}\n\nconst MainWrapper = styled.main.attrs({\n id: 'main',\n})`\n position: relative;\n background-color: ${({ theme }) => theme.bgColor};\n grid-area: main;\n z-index: 5;\n height: 100%;\n padding-bottom: 78px;\n overflow: hidden;\n`\nconst Main = (props: Props) => (\n \n \n \n\n {props.children && props.children}\n \n)\n\nexport default Main\n","// @flow\nimport * as React from 'react'\nimport styled from 'styled-components'\nimport { rem } from 'polished'\nimport { AreaProvider } from '../AreaContext/AreaContext'\nimport { mediaQuery, mediaOnly } from '../../styles/media'\n\nimport Ribbon from '../../components/Ribbon/Ribbon'\n\ntype Props = {\n children?: React.Node,\n hasHero?: boolean,\n hasPrint?: boolean,\n printText?: string,\n wizard?: React.Node,\n breadcrumbs?: React.Node,\n date?: React.Node,\n printButton?: React.Node,\n}\n\nconst ArticleEl = styled.article`\n position: relative;\n\n border-radius: ${({ theme }) =>\n theme.borderRadius ? `${rem(theme.borderRadius)}` : rem(8)};\n\n margin: 0 auto;\n margin-bottom: ${({ hasWizard }) => !hasWizard && rem(80)};\n\n ${mediaQuery.lg`\n margin-bottom: 0;\n `};\n\n ${mediaOnly.xs`\n border-radius: 0;\n margin-left: -${rem(30)};\n margin-right: -${rem(30)};\n `}\n\n & > :last-child {\n margin-bottom: 0;\n }\n`\n\nconst Wrapper = styled.div`\n position: relative;\n padding-top: ${rem(96)};\n margin-bottom: ${rem(48)};\n z-index: 1; /* In order to stay on top of Hero */\n transition: margin-top .3s ease-in-out;\n\n ${mediaOnly.xs`\n padding-top: 0;\n margin-bottom: ${rem(64)};\n `}\n\n ${mediaQuery.sm`\n ${({ hasHero }) => (hasHero ? 'margin-top: -160px;' : null)}\n `}\n\n ${mediaQuery.lg`\n ${({ hasHero }) => (hasHero ? 'margin-top: -182px;' : null)}\n `}\n`\n\nconst BackgroundMask = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n height: 40vh;\n background: ${({ theme }) => theme.articleBackground};\n\n ${mediaOnly.xs`\n display: none;\n `}\n\n @media print {\n display: none;\n }\n`\n\nconst WizardWrapper = styled.div`\n margin-top: ${rem(40)};\n`\n\nconst Library = ({\n children,\n hasHero,\n hasPrint,\n printText,\n wizard,\n date,\n breadcrumbs,\n printButton,\n ...rest\n}: Props) => {\n const hasWizard = !!wizard\n\n return (\n \n \n \n {printButton}\n {breadcrumbs}\n {date}\n {children}\n \n {hasWizard && {wizard}}\n \n \n )\n}\n\nexport default Library\n","// @flow\nimport * as React from 'react'\nimport image from './previewModeBadge.png'\nimport type { LinkViewModel } from '../../types/LinkViewModel'\nimport styled from 'styled-components'\n\ntype Props = {\n currentUrl: string,\n link: LinkViewModel,\n}\n\ntype State = {}\n\nconst Badge = styled.a`\n position: absolute;\n top: 0;\n right: 0;\n border: 0;\n width: 120px;\n height: 120px;\n background: url(${image}) no-repeat;\n background-size: 120px 120px;\n z-index: 3;\n`\n\nclass PreviewBadge extends React.Component {\n static displayName = 'PreviewBadge'\n static defaultProps = {}\n\n render() {\n const { link, currentUrl } = this.props\n if (!link || !link.href) return null\n\n return (\n \n )\n }\n}\n\nexport default PreviewBadge\n","// @flow\nimport * as React from 'react'\nimport type { ModuleInstance } from '../modules/modules-utils'\n\ntype Props = {\n modules: Array,\n}\n\ntype State = {}\n\n/**\n * When the page is changed, we reset the focus to the top of the page using the component\n * */\nclass PageFocus extends React.PureComponent {\n static displayName = 'PageFocus'\n\n focusRef: { current: null | HTMLDivElement } = React.createRef()\n\n componentDidUpdate(prevProps: Props) {\n if (this.props.modules !== prevProps.modules && this.focusRef.current) {\n this.focusRef.current.focus()\n }\n }\n\n render() {\n return \n }\n}\n\nexport default PageFocus\n","// @flow\nimport * as React from 'react'\nimport styled from 'styled-components'\nimport { rem } from 'polished'\n\nimport { mediaQuery } from '../../styles/media'\nimport { AreaProvider } from '../AreaContext/AreaContext'\n\ntype Props = {\n children?: React.Node,\n}\n\nconst StickyEl = styled.aside`\n /* @TODO - Get header height with JS */\n position: sticky;\n top: ${rem(176)};\n align-self: flex-start;\n height: auto;\n margin: 0 auto;\n\n ${mediaQuery.md`\n margin: 0 0;\n `};\n\n @media print {\n display: none;\n }\n`\n\nconst Sidebar = ({ children, ...rest }: Props) => (\n \n \n {children}
\n \n \n)\n\nexport default Sidebar\n","// @flow\nimport * as React from 'react'\nimport styled from 'styled-components'\nimport { rem } from 'polished'\nimport consecutive from 'consecutive'\nimport { Link } from 'react-scroll'\n\nimport type { AreaTypes } from '../../types/enums/AreaTypes'\nimport type { AccordionViewModel } from '../../types/AccordionViewModel'\n\nimport { color, effects } from '../../styles/theme'\nimport Ribbon from '../../components/Ribbon/Ribbon'\nimport Sidebar from '../../components/Sidebar/Sidebar'\nimport Heading from '../../components/Heading/Heading'\nimport MediaQuery from '../../components/MediaQuery/MediaQuery'\nimport { getFontSize } from '../../styles/style-helpers'\nimport { mediaQuery } from '../../styles/media'\n\nexport type Props = {\n area?: AreaTypes,\n children?: React.Node,\n sidebar?: Array,\n anchorItems?: Array,\n}\n\ntype State = {}\n\nconst keyGen = consecutive()\n\nconst NarrowWrapper = styled.div`\n background-color: ${color.white};\n margin: 0 -30px;\n padding: ${rem(64)} ${rem(30)};\n ${mediaQuery.sm`\n margin: 0; \n border-radius: ${rem(8)};\n padding: ${rem(96)} ${rem(80)} ${rem(120)} ${rem(96)};\n `}\n\n @media print {\n margin: 0;\n }\n`\n\nconst NarrowWrapperInner = styled.div`\n display: flex;\n flex-direction: column-reverse;\n\n @media only screen and (min-width: 1025px) {\n flex-direction: row;\n }\n`\n\nconst NarrowContent = styled.div`\n width: 100%;\n ${mediaQuery.md`\n margin-right: ${rem(64)};\n `}\n`\n\nconst NarrowSidebar = styled.div`\n margin: 0;\n max-width: ${rem(224)};\n min-width: ${rem(224)};\n`\n\nconst NarrowSidebarDevice = styled.div`\n margin-bottom: ${rem(64)};\n`\n\nconst NarrowNavigation = styled.div`\n margin-bottom: ${rem(40)};\n\n & > a,\n & > button {\n margin-bottom: ${rem(16)};\n }\n`\n\nconst NarrowNavigationTitle = styled(Heading)`\n font-size: ${getFontSize('normal')};\n`\n\nconst NarrowNavigationList = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n`\n\nconst NarrowNavigationListItem = styled.li`\n margin: 0 0 ${rem(24)};\n padding: 0;\n color: ${({ theme }) => theme.primary};\n`\n\nconst NarrowNavigationListLink = styled(Link)`\n text-decoration: none;\n cursor: pointer;\n transition: ${effects().linkHoverTransition};\n color: ${({ theme }) => theme.primary};\n\n &:hover {\n color: ${color.accent};\n }\n`\n\nclass Narrow extends React.Component {\n static displayName = 'Narrow'\n static defaultProps = {}\n\n render() {\n const { children, sidebar, anchorItems } = this.props\n\n return (\n \n \n \n \n {sidebar && sidebar}\n \n {children && children}\n \n {sidebar && sidebar.length ? (\n \n \n {anchorItems && anchorItems.length && (\n \n \n Indhold\n \n \n {anchorItems.map((item, index) => {\n return (\n \n \n {item.anchor && item.anchor.label}\n \n \n )\n })}\n \n \n )}\n {sidebar && sidebar}\n \n \n ) : null}\n \n \n \n \n )\n }\n}\n\nexport default Narrow\n","// @flow\nimport * as React from 'react'\nimport styled from 'styled-components'\nimport { rem } from 'polished'\nimport { animated } from 'react-spring/web.cjs'\n\nimport { color, effects } from '../../styles/theme'\nimport { getFontSize } from '../../styles/style-helpers'\nimport { mediaOnly } from '../../styles/media'\n\nimport BaseButton from '../Button/BaseButton'\nimport InfoIcon from '../../icons/InfoIcon'\nimport RemoveIcon from '../../icons/RemoveIcon'\n\nconst TOAST_TYPES = {\n ERROR: {\n color: 'red',\n },\n WARNING: {\n color: 'yellow',\n },\n INFO: {\n color: 'blue',\n },\n}\n\ntype Props = {\n message: string,\n actions?: Array,\n onClick?: Function,\n style?: Object,\n type?: string,\n contentRef?: Function,\n}\n\ntype Action = {\n label: string,\n handleClick: Function,\n closeOnClick?: boolean,\n}\n\nconst ToastContainer = styled(animated.div)`\n z-index: 20;\n pointer-events: all;\n width: 385px;\n\n ${mediaOnly.xs`\n width: 100%;\n `}\n`\n\nconst StyledInfoIcon = styled(InfoIcon)`\n transition: opacity 0.1s ease-in-out;\n`\nconst StyledRemoveIcon = styled(RemoveIcon)`\n transition: opacity 0.1s ease-in-out;\n margin-left: -24px;\n`\n\nconst Content = styled.div`\n overflow: hidden;\n background: ${({ typeColor }) => color[typeColor]};\n display: flex;\n flex-direction: row;\n align-items: center;\n color: white;\n padding: ${rem(10)} ${rem(15)};\n border-radius: ${({ theme }) =>\n theme.borderRadius ? `${rem(theme.borderRadius)}` : rem(8)};\n opacity: 0.8;\n transition: opacity 0.1s ease-in-out;\n cursor: pointer;\n\n ${StyledRemoveIcon} {\n opacity: 0;\n }\n\n &:hover {\n opacity: 1;\n\n ${StyledInfoIcon} {\n opacity: 0;\n }\n\n ${StyledRemoveIcon} {\n opacity: 1;\n }\n }\n\n ${mediaOnly.xs`\n opacity: 1;\n\n ${StyledInfoIcon} {\n opacity: 0;\n }\n\n ${StyledRemoveIcon} {\n opacity: 1;\n }\n `}\n\n p {\n margin: 0;\n }\n`\n\nconst Message = styled.div`\n flex: 2;\n margin-left: ${rem(15)};\n margin-right: ${rem(10)};\n font-size: ${getFontSize('small')};\n`\n\nconst ActionBar = styled.div`\n display: flex;\n max-width: 30%;\n height: 100%;\n padding-left: ${rem(10)};\n border-left: ${({ theme }) => effects(theme).borderNegative};\n`\n\nconst ActionButton = styled(BaseButton)`\n font-size: ${getFontSize('small')};\n transition: all 0.1s ease-in-out;\n text-transform: uppercase;\n\n :active {\n transform: scale(0.9);\n }\n`\n\nconst Toast = React.forwardRef(\n (\n {\n message,\n type = 'WARNING',\n actions = [],\n onClick,\n style,\n contentRef,\n ...rest\n }: Props,\n ref,\n ) => {\n return (\n \n \n \n \n\n \n {message}
\n \n {actions.length > 0 && (\n \n {actions.map((action, index) => (\n {\n if (!action.closeOnClick) {\n e.stopPropagation()\n }\n action.handleClick()\n }}\n >\n {action.label}\n \n ))}\n \n )}\n \n \n )\n },\n)\n\nToast.displayName = 'Toast'\n\nexport default Toast\n","// @flow\nimport * as React from 'react'\nimport styled from 'styled-components'\nimport { useTransition } from 'react-spring/web.cjs'\n\nimport { NotificationsContext } from '../NotificationsContext/NotificationsContext'\nimport Toast from '../Toast/Toast'\n\ntype Props = {\n children?: React.Node,\n}\n\nexport const Container = styled('div')`\n position: fixed;\n z-index: 1000;\n width: 0 auto;\n top: ${props => (props.top ? '30px' : 'unset')};\n bottom: ${props => (props.top ? 'unset' : '30px')};\n margin: 0 auto;\n left: 30px;\n right: 30px;\n display: flex;\n flex-direction: ${props => (props.top ? 'column-reverse' : 'column')};\n pointer-events: none;\n align-items: ${props =>\n props.position === 'center' ? 'center' : `flex-${props.position || 'end'}`};\n @media (max-width: 680px) {\n align-items: center;\n }\n`\n\nfunction ToastContainer({ children, ...rest }: Props) {\n const { notifications, removeNotification } = React.useContext(\n NotificationsContext,\n )\n\n const [refMap] = React.useState(() => new WeakMap())\n const transitions = useTransition(notifications, item => item.id, {\n from: {\n height: '0px',\n opacity: 1,\n marginTop: '0px',\n filter: 'blur(50px)',\n },\n enter: item => async next => {\n await next({\n // $FlowFixMe\n height: `${refMap.get(item).offsetHeight}px`,\n marginTop: '10px',\n filter: 'blur(0px)',\n opacity: 1,\n })\n },\n leave: item => async next => {\n await next({\n opacity: 0,\n filter: 'blur(50px)',\n })\n await next({\n height: '0px',\n marginTop: '0px',\n })\n },\n config: {\n tension: 210,\n friction: 24,\n },\n })\n\n return (\n \n {transitions.map(({ item, props, key }) => {\n return (\n ref && refMap.set(item, ref)}\n type={item.type}\n message={item.message}\n actions={item.actions}\n onClick={() => removeNotification(item.id)}\n style={props}\n />\n )\n })}\n \n )\n}\n\nToastContainer.displayName = 'ToastContainer'\nToastContainer.defaultProps = {\n position: 'center',\n}\n\nexport default ToastContainer\n","// @flow\nimport * as React from 'react'\nimport DocumentTitle from 'react-document-title'\nimport { ThemeProvider } from 'styled-components'\n\nimport { themes, DEFAULT_THEME } from '../styles/theme'\nimport { splitModules } from '../modules/modules-utils'\n\nimport type { ThemeViewModel } from '../types/ThemeViewModel'\nimport type { ThemeTypes } from '../types/enums/ThemeTypes'\nimport type { ModuleInstance } from '../modules/modules-utils'\nimport type { HtmlConfigViewModel } from '../types/HtmlConfigViewModel'\nimport type { MetaViewModel } from '../types/MetaViewModel'\n\nimport ErrorBoundary from './ErrorBoundary'\nimport Main from '../components/Main/Main'\nimport Article from '../components/Article/Article'\nimport Library from '../components/Library/Library'\nimport PreviewBadge from '../components/PreviewBadge/PreviewBadge'\nimport PageFocus from './PageFocus'\nimport Narrow from '../components/Narrow/Narrow'\nimport NotificationsProvider from '../components/NotificationsContext/NotificationsContext'\nimport ToastContainer from '../components/ToastContainer/ToastContainer'\n\nexport const ConfigContext: React.Context<{\n imgixDomain?: string,\n googleTagManagerId?: string,\n meta: MetaViewModel,\n theme?: string,\n}> = React.createContext({ meta: {} })\n\ntype Props = HtmlConfigViewModel & {\n modules: Array,\n meta: MetaViewModel,\n pathname: string,\n isLoading: boolean,\n}\n\ntype State = {}\n\nclass AppShell extends React.PureComponent {\n static displayName = 'AppShell'\n\n static renderModule(\n module: ?ModuleInstance,\n id?: string,\n debug: boolean = false,\n ) {\n if (!module || !module.module) return null\n return React.createElement(\n ErrorBoundary,\n { debug, module: module.name, key: id },\n React.createElement(module.module, module.props),\n )\n }\n\n getCurrentTheme = (themeName?: ThemeTypes): ThemeViewModel => {\n if (!themeName) return themes[DEFAULT_THEME]\n\n return themes[themeName] || themes[DEFAULT_THEME]\n }\n\n render() {\n const {\n meta,\n modules,\n pathname,\n debug,\n previewLink,\n theme,\n imgixDomain,\n googleTagManagerId,\n } = this.props\n const split = splitModules(modules)\n const hasHero = modules.some(item => {\n if (item.name === 'Hero') {\n const { image, video } = item.props\n const hasMedia = (image && image.src) || (video && video.src)\n return hasMedia\n } else {\n return false\n }\n })\n\n const activeTheme = this.getCurrentTheme(theme)\n\n return (\n \n \n \n \n <>\n {meta.title && (\n \n )}\n {AppShell.renderModule(\n split.cookieDisclaimerModule,\n 'cookieDisclaimer',\n debug,\n )}\n {AppShell.renderModule(split.cookieBanner, 'cookie', debug)}\n {AppShell.renderModule(split.header, 'header', debug)}\n \n {split.preModules.map((module, index) =>\n AppShell.renderModule(\n module,\n `${pathname}_pre_${index}`,\n debug,\n ),\n )}\n\n {/* Render article area content */}\n {split.article.length ? (\n \n {split.article.map((module, index) =>\n AppShell.renderModule(\n module,\n `${pathname}_main_${index}`,\n debug,\n ),\n )}\n \n ) : null}\n\n {/* Render library area content */}\n {split.library.length ? (\n \n {split.library.map((module, index) =>\n AppShell.renderModule(\n module,\n `${pathname}_main_${index}`,\n debug,\n ),\n )}\n \n ) : null}\n\n {/* Render narrow content */}\n {split.narrow.length ? (\n \n AppShell.renderModule(\n module,\n `${pathname}_sidebar_${index}`,\n debug,\n ),\n )}\n anchorItems={split.narrow\n .filter(\n module =>\n module.name === 'Accordion' ||\n module.name === 'ActionTextModule',\n )\n .map(module => module.props)}\n >\n {/* Render narrow area content */}\n {split.narrow.map((module, index) =>\n AppShell.renderModule(\n module,\n `${pathname}_main_${index}`,\n debug,\n ),\n )}\n \n ) : null}\n\n {/* Render wide content */}\n {split.modules.map((module, index) =>\n AppShell.renderModule(module, `${pathname}_${index}`, debug),\n )}\n \n {AppShell.renderModule(split.footer, 'footer', debug)}\n {previewLink ? (\n \n ) : null}\n \n \n \n \n \n )\n }\n}\n\nexport default AppShell\n","// @flow\nimport * as React from 'react'\n\nconst RemoveIcon = ({ style, color = 'currentColor', ...rest }: Object) => (\n \n \n \n \n \n)\n\nexport default RemoveIcon\n","// @flow\nexport { RouterLink as default } from './Link'\n","// @flow\nimport * as React from 'react'\nimport withHover from '../hoc/withHover'\n\nconst InfoIcon = ({ style, invert = false, ...rest }: Object) => (\n \n \n \n \n \n \n \n)\n\nexport default withHover>(InfoIcon)\n","// @flow\nimport * as React from 'react'\n\ntype Props = {\n hoverStyle: Object,\n}\n\ntype State = {\n hover: boolean,\n}\n\n// This function takes a component...\nfunction withHover(\n WrappedComponent: React.AbstractComponent,\n): React.AbstractComponent {\n return class extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n hover: false,\n }\n }\n\n handleMouseEnter = () => {\n this.setState({\n hover: true,\n })\n }\n\n handleMouseLeave = () => {\n this.setState({\n hover: false,\n })\n }\n\n render() {\n const { hoverStyle, style, ...rest } = this.props\n const { hover } = this.state\n const { handleMouseEnter, handleMouseLeave } = this\n\n const styling = { ...(hover ? hoverStyle || {} : {}), ...(style || {}) }\n\n return (\n \n )\n }\n }\n}\n\nexport default withHover\n","// @flow\nimport * as React from 'react'\nimport styled from 'styled-components'\nimport { rem } from 'polished'\nimport { AreaProvider } from '../AreaContext/AreaContext'\nimport { mediaQuery, mediaOnly } from '../../styles/media'\n\nimport Ribbon from '../../components/Ribbon/Ribbon'\n\ntype Props = {\n children?: React.Node,\n hasHero?: boolean,\n hasPrint?: boolean,\n printText?: string,\n wizard?: React.Node,\n breadcrumbs?: React.Node,\n date?: React.Node,\n printButton?: React.Node,\n}\n\nconst ArticleEl = styled.article`\n position: relative;\n background: white;\n border-radius: ${({ theme }) =>\n theme.borderRadius ? `${rem(theme.borderRadius)}` : rem(8)};\n padding: ${rem(46)} 0;\n margin: 0 auto;\n margin-bottom: ${({ hasWizard }) => !hasWizard && rem(80)};\n\n ${mediaQuery.sm`\n padding: ${rem(96)} 0;\n `};\n\n ${mediaQuery.lg`\n padding: ${rem(96)} 0;\n margin-bottom: 0;\n `};\n\n ${mediaOnly.hd`\n padding-right: ${rem(100)};\n `}\n\n ${mediaOnly.lg`\n padding-right: ${rem(50)};\n `}\n\n ${mediaOnly.xs`\n border-radius: 0;\n margin-left: -${rem(30)};\n margin-right: -${rem(30)};\n `}\n\n & > :last-child {\n margin-bottom: 0;\n }\n`\n\nconst Wrapper = styled.div`\n position: relative;\n padding-top: ${rem(96)};\n margin-bottom: ${rem(48)};\n z-index: 1; /* In order to stay on top of Hero */\n transition: margin-top .3s ease-in-out;\n\n ${mediaOnly.xs`\n padding-top: 0;\n margin-bottom: ${rem(64)};\n `}\n\n ${mediaQuery.sm`\n ${({ hasHero }) => (hasHero ? 'margin-top: -160px;' : null)}\n `}\n\n ${mediaQuery.lg`\n ${({ hasHero }) => (hasHero ? 'margin-top: -182px;' : null)}\n `}\n\n \n article:has(section > nav) {\n /* This styling is only applied to articles that has a section with a nav*/\n padding-right: 0;\n }\n\n`\n\nconst BackgroundMask = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n height: 40vh;\n background: ${({ theme }) => theme.articleBackground};\n\n ${mediaOnly.xs`\n display: none;\n `}\n\n @media print {\n display: none;\n }\n`\n\nconst WizardWrapper = styled.div`\n margin-top: ${rem(40)};\n`\n\nconst Article = ({\n children,\n hasHero,\n hasPrint,\n printText,\n wizard,\n date,\n breadcrumbs,\n printButton,\n ...rest\n}: Props) => {\n const hasWizard = !!wizard\n\n return (\n \n {!hasHero && }\n \n \n \n {printButton}\n {breadcrumbs}\n {date}\n {children}\n \n {hasWizard && {wizard}}\n \n \n \n )\n}\n\nexport default Article\n","// @flow\nimport * as React from 'react'\nimport type { HtmlConfigViewModel } from '../types/HtmlConfigViewModel'\nimport type { MetaViewModel } from '../types/MetaViewModel'\nimport AppShell from './AppShell'\nimport type { ModuleInstance } from '../modules/modules-utils'\nimport { withRouter } from './Router'\nimport { hot } from 'react-hot-loader'\nimport { fetchHeadlessPage } from './page-loader'\nimport ScrollToElement from '../utils/ScrollToElement'\nimport type { Location } from './Router'\n\ntype Props = {\n config: HtmlConfigViewModel,\n initialModules: Array,\n initialMeta: MetaViewModel,\n location: Location,\n}\n\ntype State = {\n error: ?Error,\n errorInfo: ?Object,\n meta: MetaViewModel,\n modules: Array,\n // The actual pathname of the current page. Only updated once the modules changes\n pathname: string,\n fetching: ?string,\n}\n\nfunction buildUrl(location: Location) {\n const { pathname, search, hash } = location\n\n return [pathname]\n .concat(search || [])\n .concat(hash || [])\n .join('')\n}\n\nclass App extends React.PureComponent {\n static displayName = 'App'\n static defaultProps = {\n initialMeta: {},\n initialModules: [],\n }\n\n state = {\n error: null,\n errorInfo: null,\n pathname: this.props.location.pathname,\n modules: this.props.initialModules,\n meta: this.props.initialMeta,\n fetching: null,\n }\n\n componentDidUpdate(prevProps: Props, prevState: State) {\n if (prevState.modules !== this.state.modules) {\n // Scroll to the top of the page when modules have changed.\n window.scrollTo(0, 0)\n // If the page has a hash value, scroll to it.\n if (this.props.location.hash) {\n ScrollToElement(this.props.location.hash)\n }\n }\n\n if (prevProps.location.pathname !== this.props.location.pathname) {\n // If the location changed, we need to fetch the new data\n this.fetchNewPage(this.props.location.pathname)\n } else if (\n prevProps.location.hash !== this.props.location.hash &&\n this.props.location.hash\n ) {\n // If the hash changed, tried to scroll to the new element\n ScrollToElement(this.props.location.hash)\n }\n }\n\n componentDidCatch(error: Error, info: { componentStack: string }) {\n // We need to handle the error\n this.setState({ error, errorInfo: info })\n }\n\n async fetchNewPage(pathname: string) {\n this.setState({ fetching: pathname })\n const result = await fetchHeadlessPage(pathname, this.props.config.headless)\n\n if (result) {\n // If the pathname hasn't changed since load began, update the state\n if (result.pathname === this.props.location.pathname) {\n this.setState({\n meta: result.meta,\n modules: result.modules,\n pathname,\n fetching: null,\n })\n }\n } else if (pathname === this.props.location.pathname) {\n // If we didn't get a valid result, and the pathname hasn't changed, do a hard page change\n if (global.location) global.location.href = buildUrl(this.props.location)\n }\n }\n\n render() {\n const { config } = this.props\n const { meta, modules, fetching, pathname } = this.state\n\n return (\n \n )\n }\n}\n\nexport default hot(module)(withRouter(App))\n","// @flow\nimport * as React from 'react'\nimport Heading from '../Heading/Heading'\nimport Grid from '../Grid/Grid'\nimport styled from 'styled-components'\nimport Button from '../Button/Button'\nimport Paragraph from '../Paragraph/Paragraph'\n\ntype Props = {\n title?: string,\n description?: string,\n name: string,\n outline: boolean,\n debug?: boolean,\n details: Array<{\n name: string,\n value: any,\n }>,\n handleReload?: () => void,\n}\n\nconst ErrorCard = styled.div`\n outline: ${p => p.outline && '2px red dashed'};\n\n && {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n }\n`\n\nconst Summary = styled.summary`\n font-weight: 700;\n margin-bottom: 0.5rem;\n`\n\nconst Stack = styled.pre`\n background: rgba(0, 0, 0, 0.6);\n color: rgb(232, 232, 232);\n line-height: 1.4;\n white-space: pre;\n font-family: Menlo, Consolas, monospace;\n font-size: 14px;\n padding: 15px;\n margin: 0;\n overflow-x: scroll;\n margin-bottom: 0.5rem;\n`\n\nconst Divider = styled.hr`\n margin: 1rem 0;\n`\n\nconst serializeProps = props =>\n JSON.stringify(\n {\n ...props,\n children: undefined,\n },\n 2,\n )\n .replace(/\\\\u002F/g, '/')\n .replace(/\\\\u003C/g, '<')\n .replace(/\\\\u003E/g, '>')\n\nconst StyledParagraph = styled(Paragraph)`\n font-size: ${({ theme }) => theme.bodyFontSize + 'px'};\n color: ${({ theme }) => theme.text};\n line-height: 2;\n`\n\n/**\n * Renders a ErrorMessage to the DOM when a component fails to render.\n */\nconst FriendlyError = ({\n title,\n description,\n details,\n debug,\n outline,\n handleReload,\n}: Props) => (\n \n \n {title || 'Der skete en fejl'}\n \n {description || 'Prøv at genindlæse siden'}\n \n {handleReload && (\n \n )}\n {debug ? : null}\n {details &&\n debug &&\n details.map(\n ({ name, value }) =>\n value && (\n \n {name}
\n \n \n {typeof value === 'string' ? value : serializeProps(value)}\n \n \n \n ),\n )}\n \n \n)\n\nFriendlyError.defaultProps = {\n outline: true,\n}\n\nexport default FriendlyError\n","module.exports = __webpack_public_path__ + \"static/images/previewModeBadge_/ZyPO8.png\";","// @flow\nimport { preloadModules } from '../modules/modules-utils'\nimport { parseJSON } from '../utils/request'\nimport type { HtmlViewModel } from '../types/HtmlViewModel'\nimport type { MetaViewModel } from '../types/MetaViewModel'\nimport type { ModuleInstance } from '../modules/modules-utils'\nimport { logException, logMessage } from '../utils/error-tracking'\n\nconst TIMEOUT = 1000\n\nexport type PageResult = {\n pathname: string,\n meta: MetaViewModel,\n modules: Array,\n}\n\n/**\n * Fetch a the headless version of page, allowing us to update the running application\n **/\nexport async function fetchHeadlessPage(\n pathname: string,\n headless?: string,\n): Promise {\n // If headless is not set, skip load and return null\n if (!headless) return null\n\n try {\n const url = `${pathname.replace(/\\/$/, '')}/${headless}`\n // Try to fetch the route as headless JSON data.\n const result: HtmlViewModel = await Promise.race([\n // Remove trailing '/' before adding headless query\n fetch(url, {\n credentials: 'same-origin',\n }).then(parseJSON),\n new Promise((resolve, reject) =>\n setTimeout(() => {\n reject(new Error(`Request timed out while loading ${url}`))\n }, TIMEOUT),\n ),\n ])\n\n // If we got a valid JSON response with correct data, prepare to change the page to it.\n if (result && result.modules && result.meta) {\n // Preload the modules on the page, so all the scripts are ready\n const preloadedModules = await preloadModules(result.modules)\n\n if (module.hot) {\n // Cache the current page data, so when hot reloading the client can inject the correct initial state.\n // This only happens in dev\n global.__HOT_PAGE_DATA = result\n }\n\n // If the result has required fields, update the page.\n return {\n meta: result.meta,\n modules: preloadedModules,\n pathname,\n }\n } else {\n logMessage('Trying to navigate to invalid page result', { url, result })\n return null\n }\n } catch (e) {\n logException(e, {\n pathname,\n })\n return null\n }\n}\n","// @flow\nimport { fetchError } from './error-tracking'\n\nconst defaultGetHeaders = {}\nconst defaultPostHeaders = {\n 'Content-Type': 'application/x-www-form-urlencoded',\n}\n\n/**\n * Parses the JSON returned by a network request\n *\n * @param {Response} response A response from a network request\n * @return {object} The parsed JSON from the request\n */\nexport function parseJSON(response: Response): Promise