\r\n\t\t\t\r\n\t\t\t\t{toptext && populate(toptext.header, toptext.headerData, true)}\r\n\t\t\t\t{toptext && populate(toptext.subheader, toptext.subheaderData, true)}\r\n\t\t\t\t\r\n\t\t\t \r\n\t\t
\r\n\t\t\r\n\t\t\t\t{children}\r\n\t\t\t
\r\n\t\t\r\n\t\t{content}\r\n\t
\r\n);\r\n\r\nBonusBar.propTypes = {\r\n\tvisible: PropTypes.bool,\r\n\tmax: PropTypes.number,\r\n\tcurrent: PropTypes.number,\r\n\tcontent: PropTypes.string\r\n};\r\n\r\nBonusBar.defaultProps = {\r\n\tvisible: true,\r\n\tmax: 100,\r\n\tcurrent: 0,\r\n\tcontent: 0\r\n};\r\n\r\nexport default BonusBar;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Icon } from 'atoms';\r\n\r\nconst CloseButton = ({ type, title, onClick, prefix}) => (\r\n \r\n);\r\n\r\nCloseButton.propTypes = {\r\n children: PropTypes.node,\r\n onClick: PropTypes.func,\r\n title: PropTypes.string,\r\n type: PropTypes.string,\r\n prefix: PropTypes.string\r\n};\r\nCloseButton.defaultProps = {\r\n title: 'Afbryd',\r\n prefix: 'o-modal',\r\n type: 'close'\r\n};\r\n\r\nexport default CloseButton;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst Tile = props => (\r\n\t\r\n\t\t
\r\n);\r\n\r\nTile.propTypes = {\r\n\tclassName: PropTypes.string,\r\n\tvalue: PropTypes.string,\r\n\tlabel: PropTypes.string\r\n};\r\n\r\nTile.defaultProps = {\r\n\tclassName: '',\r\n\tvalue: '',\r\n\tlabel: ''\r\n};\r\n\r\nexport default Tile;\r\n","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { addZero, millisecondsToDayHourMinutesSeconds } from 'foundation/utilities/datetime';\r\nimport Tile from '../tile';\r\n\r\nconst Countdown = ({ showDays, setStarted, setTimeLeft, className }) => {\r\n const updateEverySecond = 1;\r\n // eslint-disable-next-line no-unused-vars\r\n\r\n let defaultDate = {};\r\n\r\n if(showDays) {\r\n defaultDate.days = {\r\n value: '99',\r\n label: 'dage'\r\n };\r\n }\r\n\r\n defaultDate = Object.assign(defaultDate, {\r\n hours: {\r\n value: '23',\r\n label: 'timer'\r\n },\r\n minutes: {\r\n value: '59',\r\n label: 'min'\r\n },\r\n seconds: {\r\n value: '59',\r\n label: 'sek'\r\n },\r\n });\r\n\r\n const [date, setDate] = useState(defaultDate);\r\n let started = false;\r\n\r\n useEffect(() => {\r\n setTimeLeftHandler();\r\n const interval = setInterval(() => {\r\n setTimeLeftHandler();\r\n if (started) {\r\n setStarted(true);\r\n clearInterval(interval);\r\n }\r\n }, updateEverySecond * 1000);\r\n\r\n return () => {\r\n clearInterval(interval);\r\n };\r\n }, []);\r\n\r\n const setTimeLeftHandler = () => {\r\n setTimeLeft((prevCount) => {\r\n const remaining = millisecondsToDayHourMinutesSeconds(prevCount);\r\n const next = date;\r\n\r\n if (showDays) {\r\n next.days.value = addZero(remaining.days) + '';\r\n }\r\n\r\n next.hours.value = addZero(remaining.hours) + '';\r\n next.minutes.value = addZero(remaining.minutes) + '';\r\n next.seconds.value = addZero(remaining.seconds) + '';\r\n const { days, ...all } = next;\r\n\r\n if(!showDays) {\r\n setDate(all);\r\n } else {\r\n setDate(next);\r\n }\r\n\r\n if (prevCount < 0) {\r\n started = true;\r\n }\r\n return prevCount - (1000 * updateEverySecond);\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n {props.value}
\r\n\t\t{props.label}
\r\n\t\r\n {Object.keys(date).map(key => )}\r\n
\r\n \r\n );\r\n};\r\n\r\n\r\nCountdown.propTypes = {\r\n showDays : PropTypes.bool,\r\n setStarted: PropTypes.func,\r\n setTimeLeft: PropTypes.func,\r\n className: PropTypes.string,\r\n};\r\n\r\nCountdown.defaultProps = {\r\n showDays : true\r\n};\r\n\r\nexport default Countdown;\r\n","import React, {} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Icon\r\n} from 'atoms';\r\nimport { CloseButton } from 'molecules';\r\nimport { formatMaskedAccount } from 'foundation/Helpers';\r\n\r\nconst CreditCard = ({cardName, cardNumber, cardId, selectCard}) => {\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nCreditCard.propTypes = {\r\n cardName: PropTypes.string,\r\n cardNumber: PropTypes.string,\r\n cardId: PropTypes.string,\r\n selectCard: PropTypes.func\r\n};\r\n\r\nCreditCard.defaultProps = {\r\n cardName: '',\r\n cardNumber: '',\r\n cardId: ''\r\n};\r\n\r\nexport default CreditCard;\r\n","import React, {useState, useEffect, useRef} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {DateRangePicker} from 'atoms';\r\nimport {Button, FilterPills} from 'molecules';\r\n\r\nconst DateRange = ({ onSetDates, labels }) => {\r\n const dateRangePickerRef = useRef(null);\r\n const filtersRef = useRef(null);\r\n const [startDate, setStartDate] = useState();\r\n const [endDate, setEndDate] = useState();\r\n\r\n const [dateFilters, setDateFilters] = useState([\r\n { label: labels.oneWeekBackFromNow, selected: false },\r\n { label: labels.twoWeeksBackFromNow, selected: false },\r\n { label: labels.oneMonthBackFromNow, selected: false },\r\n { label: labels.threeMonthsBackFromNow, selected: false },\r\n ]);\r\n\r\n const unselectAllFilters = () => {\r\n setDateFilters(dateFilters.map(filter => {\r\n filter.selected = false;\r\n return filter;\r\n }));\r\n };\r\n\r\n const handleFilterChange = filters => {\r\n const findSelectedFilter = filters.find(filter => filter.selected);\r\n\r\n if (findSelectedFilter) {\r\n const label = findSelectedFilter.label;\r\n if (label === labels.oneWeekBackFromNow) dateRangePickerRef.current.setOneWeekBackFromNow();\r\n if (label === labels.twoWeeksBackFromNow) dateRangePickerRef.current.setTwoWeeksBackFromNow();\r\n if (label === labels.oneMonthBackFromNow) dateRangePickerRef.current.setOneMonthBackFromNow();\r\n if (label === labels.threeMonthsBackFromNow) dateRangePickerRef.current.setThreeMonthsBackFromNow();\r\n }\r\n\r\n setDateFilters(filters);\r\n };\r\n\r\n const handleDateRangeChange = ({ startDate, endDate, didPickerSetDate }) => {\r\n setStartDate(startDate);\r\n setEndDate(endDate);\r\n if (didPickerSetDate) unselectAllFilters();\r\n };\r\n\r\n useEffect(() => {\r\n handleFilterChange(dateFilters);\r\n filtersRef.current.updateFilters(dateFilters);\r\n }, [dateFilters]);\r\n\r\n const createMarkup = htmlString => ({ __html: htmlString });\r\n\r\n return (\r\n \r\n {\r\n selectCard(cardId);\r\n }} />\r\n
\r\n \r\n {cardName}\r\n \r\n
\r\n \r\n
\r\n Kortnummer
\r\n {formatMaskedAccount(cardNumber)}
\r\n \r\n\r\n
\r\n );\r\n};\r\n\r\nDateRange.propTypes = {\r\n labels: PropTypes.shape({\r\n oneWeekBackFromNow: PropTypes.string,\r\n twoWeeksBackFromNow: PropTypes.string,\r\n oneMonthBackFromNow: PropTypes.string,\r\n threeMonthsBackFromNow: PropTypes.string,\r\n dateStartLabel: PropTypes.string,\r\n dateStartToEndLabel: PropTypes.string,\r\n chooseDateLabel: PropTypes.string,\r\n }),\r\n onSetDates: PropTypes.func,\r\n};\r\n\r\nDateRange.defaultProps = {\r\n labels: {\r\n oneWeekBackFromNow: '7 dage',\r\n twoWeeksBackFromNow: '14 dage',\r\n oneMonthBackFromNow: '1 måned',\r\n threeMonthsBackFromNow: '3 måneder',\r\n dateStartLabel: 'Valgte periode: {chosendate}',\r\n dateStartToEndLabel: 'Valgte periode: {chosenfromdate} til den {chosentodate}',\r\n chooseDateLabel: 'Vælg',\r\n },\r\n onSetDates: () => {\r\n },\r\n};\r\n\r\nexport default DateRange;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Label } from 'atoms';\r\nimport { Dropdown } from 'atoms';\r\n\r\nconst DropdownField = ({ className, label, name, id, selected, ariaLabel, useRef, optionsList, disabled, error }) => {\r\n const dropdownClassNames = [];\r\n if (error) {\r\n dropdownClassNames.push('a-dropdown--error');\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n\r\n \r\n {startDate?.isSame(endDate, 'day')\r\n ? \r\n : \r\n }\r\n
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nDropdownField.propTypes = {\r\n};\r\n\r\nDropdownField.defaultProps = {\r\n};\r\n\r\nexport default DropdownField;\r\n","import React, {useState, useEffect, useImperativeHandle, forwardRef, useRef} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {FilterPill} from 'atoms';\r\n\r\nconst Filters = forwardRef(({ filters, handleFilterChange, alwaysOnlyOneActive, zeroOrOneActive, vertical }, ref) => {\r\n const filtersRef = useRef();\r\n const [filterElements, setFilterElements] = useState([]);\r\n\r\n useImperativeHandle(ref, () => ({\r\n updateFilters: (updatedFilters) => {\r\n makeFilterElements(updatedFilters);\r\n },\r\n }));\r\n\r\n const handleOnClick = label => {\r\n let newFilters = filters;\r\n\r\n if (alwaysOnlyOneActive) {\r\n newFilters.forEach(filter => filter.selected = false);\r\n newFilters.forEach(filter => filter.selected = filter.label === label);\r\n makeFilterElements(newFilters);\r\n }\r\n\r\n if (zeroOrOneActive) {\r\n newFilters.forEach(filter => {\r\n if (filter.label === label) {\r\n filter.selected = !filter.selected;\r\n } else {\r\n filter.selected = false;\r\n }\r\n });\r\n makeFilterElements(newFilters);\r\n }\r\n\r\n if (!alwaysOnlyOneActive && !zeroOrOneActive) {\r\n newFilters.forEach(filter => {\r\n if (filter.label === label) filter.selected = !filter.selected;\r\n });\r\n makeFilterElements(newFilters);\r\n }\r\n\r\n handleFilterChange(newFilters);\r\n makeFilterElements(newFilters);\r\n };\r\n\r\n const makeFilterElements = (filters) => {\r\n setFilterElements((\r\n err
\r\n ))}\r\n\t\t\t\r\n
\r\n ));\r\n };\r\n\r\n useEffect(() => makeFilterElements(filters), []);\r\n\r\n return filterElements;\r\n});\r\n\r\nFilters.propTypes = {\r\n filters: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n label: PropTypes.string,\r\n selected: PropTypes.bool\r\n }).isRequired\r\n ),\r\n handleFilterChange: PropTypes.func,\r\n alwaysOnlyOneActive: PropTypes.bool,\r\n zeroOrOneActive: PropTypes.bool,\r\n};\r\n\r\nFilters.defaultProps = {\r\n handleFilterChange: () => {},\r\n alwaysOnlyOneActive: false,\r\n zeroOrOneActive: false,\r\n};\r\n\r\nexport default Filters;\r\n","import React, { useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from '../button';\r\n\r\nconst Hero = ({\r\n\tclassName,\r\n\tcontent,\r\n\tmedia\r\n}) => {\r\n\tuseEffect(() => {\r\n\t\t// Track promoView\r\n\t\t// window?.TC?.dataLayer({\r\n\t\t// \tevent: 'promoView',\r\n\t\t// \tecommerce: {\r\n\t\t// \t\tpromoView: {\r\n\t\t// \t\t\tpromotions: [\r\n\t\t// \t\t\t\t{\r\n\t\t// \t\t\t\t\tname: headingText,\r\n\t\t// \t\t\t\t\tposition: '1', // In case Hero become a carousel, this needs to reflect the position in the carousel\r\n\t\t// \t\t\t\t\tcreative: imageSrc\r\n\t\t// \t\t\t\t}\r\n\t\t// \t\t\t]\r\n\t\t// \t\t}\r\n\t\t// \t}\r\n\t\t// });\r\n\t});\r\n\r\n\r\n\tconst clickHandle = () => {\r\n\t\t// TODO: track promoClick\r\n\t\t// window?.TC?.dataLayer({\r\n\t\t// \tevent: 'promoClick',\r\n\t\t// \tecommerce: {\r\n\t\t// \t\tpromoClick: {\r\n\t\t// \t\t\tpromotions: [\r\n\t\t// \t\t\t\t{\r\n\t\t// \t\t\t\t\tname: headingText,\r\n\t\t// \t\t\t\t\tposition: '1', // In case Hero become a carousel, this needs to reflect the position in the carousel\r\n\t\t// \t\t\t\t\tcreative: imageSrc\r\n\t\t// \t\t\t\t}\r\n\t\t// \t\t\t]\r\n\t\t// \t\t}\r\n\t\t// \t}\r\n\t\t// });\r\n\t};\r\n\r\n\treturn (\r\n\t\t\r\n
\r\n \r\n {filters.map(filter => ())}\r\n
\r\n \r\n\t\t\t
\r\n\t);\r\n};\r\n\r\nHero.propTypes = {\r\n\tclassName: PropTypes.string,\r\n\tcontent: PropTypes.shape({\r\n\t\theader: PropTypes.string,\r\n\t\tabstract: PropTypes.string,\r\n\t\tmanchet: PropTypes.string,\r\n\t\tctaText: PropTypes.string,\r\n\t\tctaUrl: PropTypes.string,\r\n\t\tprimaryColors: PropTypes.bool\r\n\t}),\r\n\tmedia: PropTypes.shape({\r\n\t\tbackgroundImage: PropTypes.string,\r\n\t\tleftImage: PropTypes.string,\r\n\t\trightImage: PropTypes.string,\r\n\t})\r\n};\r\n\r\nHero.defaultProps = {\r\n\tclassName: '',\r\n\tcontent: {},\r\n\tmedia: {}\r\n};\r\n\r\nexport default Hero;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Icon } from 'atoms';\r\n\r\nconst IconButton = props => (\r\n \r\n);\r\n\r\nIconButton.propTypes = {\r\n animation: PropTypes.string,\r\n children: PropTypes.node,\r\n className: PropTypes.string,\r\n iconButtonClassName: PropTypes.string,\r\n iconId: PropTypes.string,\r\n isLoading: PropTypes.bool,\r\n isInactive: PropTypes.bool,\r\n onAnimationEnd: PropTypes.func,\r\n onClick: PropTypes.func,\r\n primary: PropTypes.string,\r\n title: PropTypes.string,\r\n};\r\n\r\nIconButton.defaultProps = {\r\n className: 'a-button--primary',\r\n iconButtonClassName: '',\r\n iconId: '#icon-chevron'\r\n};\r\n\r\nexport default IconButton;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { populate } from 'foundation/Helpers';\r\nimport {\r\n Icon, Loader\r\n} from 'atoms';\r\nimport {\r\n InfoText\r\n} from 'molecules';\r\n\r\nconst infoBox = ({children, className, onClick, checked, loading, error, header, id, required, text, edit}) => (\r\n \r\n\t\t\t\t{ media.backgroundImage ? 
: null }\r\n\t\t\t\t{ media.leftImage ? 
: null }\r\n\t\t\t\t{ media.rightImage ? 
: null }\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t
\r\n\t\t\t{content.ctaUrl ? : null}\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n {header && }\r\n {\r\n children\r\n }\r\n
\r\n);\r\n\r\ninfoBox.propTypes = {\r\n children: PropTypes.node,\r\n className: PropTypes.string,\r\n id: PropTypes.string,\r\n header: PropTypes.string,\r\n text: PropTypes.string,\r\n onClick: PropTypes.func,\r\n checked: PropTypes.bool,\r\n required: PropTypes.string,\r\n error: PropTypes.string,\r\n edit: PropTypes.string\r\n};\r\n\r\ninfoBox.defaultProps = {\r\n className: '',\r\n id: '',\r\n header: '',\r\n text: '',\r\n onClick: null,\r\n checked: true,\r\n required: '',\r\n error: '',\r\n edit: ''\r\n};\r\n\r\nexport default infoBox;","\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { populate } from 'foundation/Helpers';\r\nimport {\r\n Icon\r\n} from 'atoms';\r\n\r\nconst infoText = ({className, children, error, noGutter, notify, required, text}) => (\r\n \r\n
}\r\n {text && {populate(header, null, true)}
\r\n {\r\n (edit || onClick) && \r\n {edit ?
\r\n }\r\n \r\n {edit}\r\n \r\n
:\r\n (loading ? \r\n {text && populate(text, null, true)}\r\n {required &&
\r\n);\r\n\r\ninfoText.propTypes = {\r\n children: PropTypes.node,\r\n text: PropTypes.string,\r\n required: PropTypes.string,\r\n notify: PropTypes.string,\r\n error: PropTypes.string,\r\n className: PropTypes.string,\r\n noGutter: PropTypes.bool\r\n};\r\n\r\ninfoText.defaultProps = {\r\n className: '',\r\n text: '',\r\n required: '',\r\n error: '',\r\n};\r\n\r\nexport default infoText;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Label, Input, PhraseValidation } from 'atoms';\r\n\r\nconst InputField = ({\r\n\tclassName,\r\n\tlabel,\r\n\tname,\r\n\tid,\r\n\ttype,\r\n\tplaceholder,\r\n\tariaLabel,\r\n\tuseRef,\r\n\tkeyUpHandler,\r\n\terror\r\n}) => {\r\n\tconst inputClassNames = [];\r\n\tif (error) {\r\n\t\tinputClassNames.push('a-input--error');\r\n\t}\r\n\r\n\treturn (\r\n\t\t\r\n \r\n \r\n {required}\r\n \r\n
}\r\n {notify && \r\n \r\n \r\n {notify}\r\n \r\n
}\r\n {error && \r\n \r\n \r\n {error}\r\n \r\n
}\r\n {\r\n children\r\n }\r\n \r\n\t\t\t\r\n\t\t\t\r\n\t\t\t{error && {error} }\r\n\t\t
\r\n\t);\r\n};\r\n\r\nInputField.propTypes = {};\r\n\r\nInputField.defaultProps = {};\r\n\r\nexport default InputField;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Icon } from 'atoms';\r\n\r\nconst LoadMoreButton = ({ className, text, onClick, iconId, isCentered }) => {\r\n let classNames = ['m-load-more-button'];\r\n\r\n if (isCentered) {\r\n classNames.push('m-load-more-button--is-centered');\r\n }\r\n\r\n if (className) {\r\n classNames.push(className);\r\n }\r\n\r\n return (\r\n \r\n {message()}\r\n
\r\n : null)}\r\n {!isLoading && lastLoginTime && Sidste login: {lastLoginTime}
}\r\n \r\n );\r\n};\r\n\r\nNotification.propTypes = {\r\n hasUploadedText: PropTypes.string,\r\n missingUploadText: PropTypes.string,\r\n lastLoginTime: PropTypes.string,\r\n skipVerificationNotice: PropTypes.bool\r\n};\r\n\r\nexport default Notification;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Countdown from '../countdown';\r\n\r\nconst Occurrence = ({ className, settings, showDays }) => {\r\n const label = settings.label ?? 'Starter om';\r\n const hasStartedText = settings.hasStartedText ?? 'Nedtællling er slut';\r\n const value = settings.value ?? '';\r\n const type = settings.type ?? 'reoccurrence';\r\n const target = settings.target ?? -1;\r\n const [hasStarted, setStarted] = useState(false);\r\n const [timeLeft, setTimeLeft] = useState(new Date(target) - Date.now());\r\n\r\n const AfterOccurrence = () => {\r\n if(!settings.showHasStartedTextAfterOccurrence) {\r\n return '';\r\n }\r\n\r\n return \r\n {hasStartedText}\r\n
;\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {!hasStarted && timeLeft > 0\r\n ? <>\r\n { label &&
\r\n \r\n );\r\n};\r\n\r\nOccurrence.propTypes = {\r\n className: PropTypes.string,\r\n settings: PropTypes.object,\r\n showDays: PropTypes.bool\r\n};\r\n\r\nexport default Occurrence;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst PlainButton = props => (\r\n \r\n);\r\n\r\nPlainButton.propTypes = {\r\n children: PropTypes.node,\r\n className: PropTypes.string,\r\n onClick: PropTypes.func,\r\n title: PropTypes.string,\r\n};\r\n\r\nexport default PlainButton;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst ProgressBar = ({\r\n\theading, max, current, visible\r\n}) => (\r\n\t{label}
}\r\n { (type === 'countdown')\r\n ? {value}
\r\n }\r\n \r\n : \r\n\t\t
\r\n);\r\n\r\nProgressBar.propTypes = {\r\n\theading: PropTypes.string,\r\n\tmax: PropTypes.number,\r\n\tcurrent: PropTypes.string,\r\n\tvisible: PropTypes.bool\r\n};\r\n\r\nProgressBar.defaultProps = {\r\n\theading: '',\r\n\tmax: 100,\r\n\tcurrent: '0'\r\n};\r\n\r\nexport default ProgressBar;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { populate } from 'app/depositFlow/Helpers';\r\n\r\nconst RadioArticle = ({\r\n\tcssClass, toptext, bottomCssClass, radioId, radioValue, radioTitle, checked, onChange, useRef, type, children\r\n}) => (\r\n\t{heading}
\r\n\t\t\r\n\t\r\n \r\n Afbryd \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SectionNavigation;","import React from 'react';\r\n\r\nconst SmallBox = (props) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default SmallBox;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Heading, Icon, Paragraph } from 'atoms';\r\n\r\nconst TopSection = ({\r\n heading,\r\n title,\r\n paragraph,\r\n className,\r\n allowHtml,\r\n}) => {\r\n\r\n return (\r\n <>\r\n \r\n {showUptick ?
\r\n);\r\n\r\nUsageBar.propTypes = {\r\n theme: PropTypes.string,\r\n content: PropTypes.shape({\r\n text: PropTypes.string,\r\n textData: PropTypes.array,\r\n maxValue: PropTypes.number,\r\n maxText: PropTypes.string,\r\n usageValue: PropTypes.number,\r\n usageText: PropTypes.string\r\n }),\r\n showUptick: PropTypes.bool,\r\n children: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.node),\r\n PropTypes.node,\r\n PropTypes.string\r\n ])\r\n};\r\n\r\n\r\nUsageBar.defaultProps = {\r\n content: null,\r\n theme: 'default',\r\n showUptick: false,\r\n children: null\r\n};\r\n\r\nexport default UsageBar;\r\n","import React, {useEffect, useState} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Icon } from 'atoms';\r\nimport { matchMedia } from 'foundation/utilities/breakpoint';\r\n\r\nconst ToolTip = ({children, content, direction}) => {\r\n const [active, setActive] = useState(false);\r\n\r\n // if screensize is bigger than 414px (so desktop) then onMouseEnter event will be active\r\n const showTip = () => {\r\n if (matchMedia('sm')) {\r\n setActive(true);\r\n }\r\n };\r\n\r\n const hideTip = () => {\r\n if (matchMedia('sm')) {\r\n setActive(false);\r\n }\r\n };\r\n\r\n var toggleTip = (value) => {\r\n if (matchMedia('sm', true)) {\r\n setActive(value);\r\n }\r\n };\r\n\r\n return (\r\n \r\n
: ''}\r\n \r\n
\r\n {children && {populate(content.text, content.textData, true)}
\r\n\r\n \r\n {content.usageText}\r\n \r\n
\r\n \r\n
\r\n 0 kr.
\r\n {content.maxText}
\r\n \r\n {children}\r\n
}\r\n \r\n {/* Content */}\r\n
\r\n \r\n );\r\n};\r\n\r\nToolTip.propTypes = {\r\n children: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.node),\r\n PropTypes.node,\r\n PropTypes.string\r\n ]),\r\n content: PropTypes.string,\r\n direction: PropTypes.string\r\n};\r\n\r\nexport default ToolTip;\r\n","import React, { useEffect, useState, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst TabContainer = ({ tabs, onTabChange, defaultTab = 0 }) => {\r\n const [activeTab, setActiveTab] = useState(0);\r\n const [sliderOffset, setSliderOffset] = useState(0);\r\n const sliderRef = useRef(null);\r\n\r\n useEffect(() => {\r\n const url = new URL(window.location);\r\n const tab = url.searchParams.get('tab');\r\n\r\n if (!tab && !defaultTab) return;\r\n\r\n const slider = sliderRef.current;\r\n const currentTab = slider.querySelector(`[data-key=\"${tab || defaultTab}\"]`);\r\n if (currentTab) {\r\n setActiveTab(parseInt(currentTab.getAttribute('data-key')));\r\n setSliderOffset(currentTab.offsetLeft);\r\n }\r\n }, [defaultTab]);\r\n\r\n const tabHandler = (key, offset) => {\r\n setActiveTab(key);\r\n setSliderOffset(offset);\r\n\r\n const url = new URL(window.location);\r\n url.searchParams.set('tab', key);\r\n window.history.pushState({}, '', url);\r\n\r\n if (onTabChange) {\r\n onTabChange(key);\r\n }\r\n };\r\n\r\n return (\r\n - \r\n \r\n {tabs.map((tab, index) => (\r\n