@laerdal/life-react-components 2.3.1-dev.11.full → 2.3.1-dev.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Banners/Banner.cjs.map +1 -1
- package/dist/Banners/Banner.js.map +1 -1
- package/dist/Dropdown/DropdownButtonTypes.d.ts +1 -0
- package/dist/Dropdown/DropdownContent.cjs +1 -1
- package/dist/Dropdown/DropdownContent.js +1 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map +1 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/Footer/SiteFooter.cjs +19 -30
- package/dist/Footer/SiteFooter.cjs.map +1 -1
- package/dist/Footer/SiteFooter.d.ts +1 -3
- package/dist/Footer/SiteFooter.js +19 -31
- package/dist/Footer/SiteFooter.js.map +1 -1
- package/dist/GlobalNavigationBar/Logo.cjs.map +1 -1
- package/dist/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs +2 -0
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js +2 -0
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs +2 -0
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.js +2 -0
- package/dist/GlobalNavigationBar/desktop/MainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/SubMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/SubMenu.js.map +1 -1
- package/dist/InputFields/DatepickerFieldHeader.cjs +2 -4
- package/dist/InputFields/DatepickerFieldHeader.cjs.map +1 -1
- package/dist/InputFields/DatepickerFieldHeader.js +2 -4
- package/dist/InputFields/DatepickerFieldHeader.js.map +1 -1
- package/dist/Layouts/index.cjs +6 -4
- package/dist/Layouts/index.cjs.map +1 -1
- package/dist/Layouts/index.d.ts +1 -0
- package/dist/Layouts/index.js +4 -3
- package/dist/Layouts/index.js.map +1 -1
- package/dist/NavItem/NestedNavItem.cjs.map +1 -1
- package/dist/NavItem/NestedNavItem.js.map +1 -1
- package/dist/Paginator/Paginator.cjs.map +1 -1
- package/dist/Paginator/Paginator.js.map +1 -1
- package/dist/SideMenu/types.d.ts +1 -0
- package/dist/Switcher/MobileCustomMenuContent.cjs +3 -0
- package/dist/Switcher/MobileCustomMenuContent.cjs.map +1 -1
- package/dist/Switcher/MobileCustomMenuContent.d.ts +1 -0
- package/dist/Switcher/MobileCustomMenuContent.js +3 -0
- package/dist/Switcher/MobileCustomMenuContent.js.map +1 -1
- package/dist/Table/Table.cjs +1 -1
- package/dist/Table/Table.js +1 -1
- package/dist/Table/TableFooter.cjs.map +1 -1
- package/dist/Table/TableFooter.js.map +1 -1
- package/dist/Table/TableTypes.d.ts +1 -0
- package/dist/Tabs/TabLink.cjs +50 -48
- package/dist/Tabs/TabLink.cjs.map +1 -1
- package/dist/Tabs/TabLink.js +50 -48
- package/dist/Tabs/TabLink.js.map +1 -1
- package/dist/Toggles/TogglerTypes.d.ts +1 -0
- package/dist/Tooltips/TooltipOverflow.cjs +1 -1
- package/dist/Tooltips/TooltipOverflow.cjs.map +1 -1
- package/dist/Tooltips/TooltipOverflow.js +1 -1
- package/dist/Tooltips/TooltipOverflow.js.map +1 -1
- package/dist/Tooltips/TooltipTypes.d.ts +1 -0
- package/dist/assets/index.cjs.map +1 -1
- package/dist/assets/index.js.map +1 -1
- package/dist/common/ActionWithin.cjs +1 -1
- package/dist/common/ActionWithin.js +1 -1
- package/dist/common/FocusVisible.cjs +1 -1
- package/dist/common/FocusVisible.js +1 -1
- package/dist/icons/systemicons/LoadingMedium.cjs.map +1 -1
- package/dist/icons/systemicons/LoadingMedium.js.map +1 -1
- package/dist/icons/systemicons/LoadingSmall.cjs.map +1 -1
- package/dist/icons/systemicons/LoadingSmall.js.map +1 -1
- package/package.json +7 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.cjs","names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentMStyling","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","SystemIcons","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { SystemIcons } from '../icons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link {\n color: ${(props) => props.link};\n }\n &:visited {\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active {\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n\n &.full-width-banner {\n margin: 8px;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 64px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n\n .full-width-banner & {\n margin: 0 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 64px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium {\n margin: 0 32px;\n }\n\n &.large {\n margin: 0 64px;\n }\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n}) => {\n const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: SystemIcons.Tip,\n containerType: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800,\n };\n switch (type) {\n case 'warning':\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = SystemIcons.Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case 'critical':\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = SystemIcons.TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case 'positive':\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = SystemIcons.ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n\n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer\n data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n role=\"note\"\n {...rest}>\n <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Banner.cjs","names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentMStyling","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","SystemIcons","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { SystemIcons } from '../icons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link {\n color: ${(props) => props.link};\n }\n &:visited {\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active {\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n\n &.full-width-banner {\n margin: 8px;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 64px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n\n .full-width-banner & {\n margin: 0 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 64px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium {\n margin: 0 32px;\n }\n\n &.large {\n margin: 0 64px;\n }\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n}) => {\n const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: SystemIcons.Tip,\n containerType: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800,\n };\n switch (type) {\n case 'warning':\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = SystemIcons.Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case 'critical':\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = SystemIcons.TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case 'positive':\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = SystemIcons.ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n\n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer\n data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n role=\"note\"\n {...rest}>\n <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","SystemIcons","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","hasWindow","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { SystemIcons } from '../icons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link {\n color: ${(props) => props.link};\n }\n &:visited {\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active {\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n\n &.full-width-banner {\n margin: 8px;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 64px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n\n .full-width-banner & {\n margin: 0 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 64px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium {\n margin: 0 32px;\n }\n\n &.large {\n margin: 0 64px;\n }\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n}) => {\n const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: SystemIcons.Tip,\n containerType: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800,\n };\n switch (type) {\n case 'warning':\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = SystemIcons.Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case 'critical':\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = SystemIcons.TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case 'positive':\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = SystemIcons.ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n\n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer\n data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n role=\"note\"\n {...rest}>\n <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Banner.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","SystemIcons","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","hasWindow","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { SystemIcons } from '../icons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link {\n color: ${(props) => props.link};\n }\n &:visited {\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active {\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n\n &.full-width-banner {\n margin: 8px;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 64px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n\n .full-width-banner & {\n margin: 0 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 64px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium {\n margin: 0 32px;\n }\n\n &.large {\n margin: 0 64px;\n }\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n}) => {\n const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: SystemIcons.Tip,\n containerType: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800,\n };\n switch (type) {\n case 'warning':\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = SystemIcons.Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case 'critical':\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = SystemIcons.TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case 'positive':\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = SystemIcons.ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n\n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer\n data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n role=\"note\"\n {...rest}>\n <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"mappings":"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"}
|
|
@@ -23,7 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
23
23
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
24
24
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
25
25
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
26
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++)
|
|
26
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
27
27
|
var MAX_MENU_HEIGHT = 240;
|
|
28
28
|
var AVG_OPTION_HEIGHT = 48;
|
|
29
29
|
var OFFSET_BEFORE_SHOW = 1000000;
|
|
@@ -5,7 +5,7 @@ import _pt from "prop-types";
|
|
|
5
5
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
6
6
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
7
7
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++)
|
|
8
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
9
9
|
import React from 'react';
|
|
10
10
|
import styled from 'styled-components';
|
|
11
11
|
import Button from '../Button/Button';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FooterNewsletterAndSocialSection.cjs","names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","ComponentXXSStyling","ComponentTextStyle","Regular","COLORS","white","NewsletterEmail","InputFieldStyling","invertedFocusStyles","NewsletterButton","button","ComponentLStyling","Bold","SocialMedia","ComponentXSStyling","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","React","useState","emailInput","setEmailInput","value","e","target"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {SystemIcons} from '../../icons';\nimport {IconButton} from '../../Button';\nimport {\n ComponentLStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../../styles';\nimport {InputFieldStyling} from '../../InputFields';\n\nconst NewsletterAndSocial = styled.section`\n display: flex;\n flex-direction: column;\n margin-bottom: 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n flex-direction: row;\n }\n`;\n\nconst NewsletterEmailSection = styled.div`\n width: 100%;\n margin: 16px auto 0 auto;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 60%;\n margin: 16px 0 0 0;\n }\n\n label {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n margin-bottom: 2px;\n }\n div div {\n width: 100%;\n ${BREAKPOINTS.MEDIUM} {\n width: calc(100% - 82px);\n width: 288px;\n }\n }\n input {\n height: 48px;\n }\n`;\n\nconst NewsletterEmail = styled.div`\n display: flex;\n flex-direction: column;\n margin: 2px auto 0;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 2px 0 0 0;\n flex-direction: row;\n }\n\n ${InputFieldStyling} {\n &.focus-visible {\n ${invertedFocusStyles}\n }\n }\n`;\n\nconst NewsletterButton = styled.button`\n background: transparent;\n width: 100%;\n height: 40px;\n border: 2px solid ${COLORS.white};\n box-sizing: border-box;\n border-radius: 8px;\n margin: 8px 0 4px 0;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n ${BREAKPOINTS.MEDIUM} {\n width: 94px;\n margin: auto 0 4px 8px;\n }\n\n &:hover {\n cursor: pointer;\n }\n \n &:focus {\n ${invertedFocusStyles}\n }\n`;\n\nconst SocialMedia = styled.div`\n color: ${COLORS.white};\n margin: 0 auto;\n\n button div {\n box-sizing: border-box;\n border-radius: 4px;\n }\n\n h4 {\n margin-top: 16px;\n margin-bottom: 8px;\n \n ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 auto;\n button {\n margin: 0 0 0 12px;\n }\n }\n`;\n\nconst SocialMediaButtons = styled.div`\n display: flex;\n justify-content: center;\n\n button div {\n display: flex;\n background-color: transparent;\n color: ${COLORS.white};\n margin: 0 0 0 20px;\n\n svg {\n fill: ${COLORS.white};\n path {\n fill: ${COLORS.white};\n }\n }\n\n &:first-child {\n margin: 0;\n }\n &:hover {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_600};\n }\n &:active {\n background-color: ${COLORS.primary_800};\n color: ${COLORS.primary_100};\n }\n }\n a {\n &:focus {\n ${invertedFocusStyles}\n }\n }\n\n ${BREAKPOINTS.MEDIUM} {\n justify-content: flex-end;\n }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n actionOnNewsletterSignup?: (email: string) => void;\n newsletterLabel: string;\n placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n const [emailInput, setEmailInput] = React.useState<string>('');\n return (\n <NewsletterAndSocial>\n <NewsletterEmailSection>\n <label>{newsletterLabel}</label>\n <NewsletterEmail>\n <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n </NewsletterEmail>\n </NewsletterEmailSection>\n <SocialMedia>\n <h4>Follow us on social media</h4>\n <SocialMediaButtons>\n <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <SystemIcons.Facebook />\n </IconButton>\n </a>\n <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <SystemIcons.Twitter />\n </IconButton>\n </a>\n <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <SystemIcons.Youtube />\n </IconButton>\n </a>\n </SocialMediaButtons>\n </SocialMedia>\n </NewsletterAndSocial>\n );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AASxC,IAAMA,mBAAmB,GAAGC,yBAAM,CAACC,OAAO,sMAKtCC,mBAAW,CAACC,MAAM,CAGrB;AAED,IAAMC,sBAAsB,GAAGJ,yBAAM,CAACK,GAAG,qYAIrCH,mBAAW,CAACC,MAAM,EAMhB,IAAAG,2BAAmB,EAACC,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAK7DR,mBAAW,CAACC,MAAM,CAQvB;AAED,IAAMQ,eAAe,GAAGX,yBAAM,CAACK,GAAG,0RAK9BH,mBAAW,CAACC,MAAM,EAKlBS,8BAAiB,EAEbC,2BAAmB,CAG1B;AAED,IAAMC,gBAAgB,GAAGd,yBAAM,CAACe,MAAM,8YAIhBN,cAAM,CAACC,KAAK,EAK9B,IAAAM,yBAAiB,EAACT,0BAAkB,CAACU,IAAI,EAAER,cAAM,CAACC,KAAK,CAAC,EAExDR,mBAAW,CAACC,MAAM,EAUhBU,2BAAmB,CAExB;AAED,IAAMK,WAAW,GAAGlB,yBAAM,CAACK,GAAG,iXACnBI,cAAM,CAACC,KAAK,EAYjB,IAAAS,0BAAkB,EAACZ,0BAAkB,CAACC,OAAO,EAAE,SAAS,CAAC,EAG3DN,mBAAW,CAACC,MAAM,CAMrB;AAED,IAAMiB,kBAAkB,GAAGpB,yBAAM,CAACK,GAAG,qnBAOxBI,cAAM,CAACC,KAAK,EAIXD,cAAM,CAACC,KAAK,EAEVD,cAAM,CAACC,KAAK,EAQFD,cAAM,CAACC,KAAK,EACvBD,cAAM,CAACY,WAAW,EAGPZ,cAAM,CAACa,WAAW,EAC7Bb,cAAM,CAACc,WAAW,EAKzBV,2BAAmB,EAIvBX,mBAAW,CAACC,MAAM,CAGrB;AAQD,IAAMqB,gCAAgC,GAAG,SAAnCA,gCAAgC,OAA0G;EAAA,IAApGC,wBAAwB,QAAxBA,wBAAwB;IAAEC,eAAe,QAAfA,eAAe;IAAEC,gBAAgB,QAAhBA,gBAAgB;EACrG,sBAAoCC,KAAK,CAACC,QAAQ,CAAS,EAAE,CAAC;IAAA;IAAvDC,UAAU;IAAEC,aAAa;EAChC,oBACE,sBAAC,mBAAmB;IAAA,wBAClB,sBAAC,sBAAsB;MAAA,wBACrB;QAAA,UAAQL;MAAe,EAAS,eAChC,sBAAC,eAAe;QAAA,wBACd,qBAAC,sBAAS;UAAC,EAAE,EAAC,iBAAiB;UAAC,aAAa,EAAE,IAAK;UAAC,WAAW,EAAEC,gBAAiB;UAAC,KAAK,EAAEG,UAAW;UAAC,QAAQ,EAAE,kBAACE,KAAa;YAAA,OAAKD,aAAa,CAACC,KAAK,CAAC;UAAA;QAAC,EAAG,eAC5J,qBAAC,gBAAgB;UAAC,eAAa,SAAU;UAAC,OAAO,EAAE,iBAACC,CAAM;YAAA,OAAKR,wBAAwB,IAAIA,wBAAwB,CAACQ,CAAC,CAACC,MAAM,CAACF,KAAK,CAAC;UAAA,CAAC;UAAA;
|
|
1
|
+
{"version":3,"file":"FooterNewsletterAndSocialSection.cjs","names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","ComponentXXSStyling","ComponentTextStyle","Regular","COLORS","white","NewsletterEmail","InputFieldStyling","invertedFocusStyles","NewsletterButton","button","ComponentLStyling","Bold","SocialMedia","ComponentXSStyling","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","React","useState","emailInput","setEmailInput","value","e","target"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {SystemIcons} from '../../icons';\nimport {IconButton} from '../../Button';\nimport {\n ComponentLStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../../styles';\nimport {InputFieldStyling} from '../../InputFields';\n\nconst NewsletterAndSocial = styled.section`\n display: flex;\n flex-direction: column;\n margin-bottom: 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n flex-direction: row;\n }\n`;\n\nconst NewsletterEmailSection = styled.div`\n width: 100%;\n margin: 16px auto 0 auto;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 60%;\n margin: 16px 0 0 0;\n }\n\n label {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n margin-bottom: 2px;\n }\n div div {\n width: 100%;\n ${BREAKPOINTS.MEDIUM} {\n width: calc(100% - 82px);\n width: 288px;\n }\n }\n input {\n height: 48px;\n }\n`;\n\nconst NewsletterEmail = styled.div`\n display: flex;\n flex-direction: column;\n margin: 2px auto 0;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 2px 0 0 0;\n flex-direction: row;\n }\n\n ${InputFieldStyling} {\n &.focus-visible {\n ${invertedFocusStyles}\n }\n }\n`;\n\nconst NewsletterButton = styled.button`\n background: transparent;\n width: 100%;\n height: 40px;\n border: 2px solid ${COLORS.white};\n box-sizing: border-box;\n border-radius: 8px;\n margin: 8px 0 4px 0;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n ${BREAKPOINTS.MEDIUM} {\n width: 94px;\n margin: auto 0 4px 8px;\n }\n\n &:hover {\n cursor: pointer;\n }\n \n &:focus {\n ${invertedFocusStyles}\n }\n`;\n\nconst SocialMedia = styled.div`\n color: ${COLORS.white};\n margin: 0 auto;\n\n button div {\n box-sizing: border-box;\n border-radius: 4px;\n }\n\n h4 {\n margin-top: 16px;\n margin-bottom: 8px;\n \n ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 auto;\n button {\n margin: 0 0 0 12px;\n }\n }\n`;\n\nconst SocialMediaButtons = styled.div`\n display: flex;\n justify-content: center;\n\n button div {\n display: flex;\n background-color: transparent;\n color: ${COLORS.white};\n margin: 0 0 0 20px;\n\n svg {\n fill: ${COLORS.white};\n path {\n fill: ${COLORS.white};\n }\n }\n\n &:first-child {\n margin: 0;\n }\n &:hover {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_600};\n }\n &:active {\n background-color: ${COLORS.primary_800};\n color: ${COLORS.primary_100};\n }\n }\n a {\n &:focus {\n ${invertedFocusStyles}\n }\n }\n\n ${BREAKPOINTS.MEDIUM} {\n justify-content: flex-end;\n }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n actionOnNewsletterSignup?: (email: string) => void;\n newsletterLabel: string;\n placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n const [emailInput, setEmailInput] = React.useState<string>('');\n return (\n <NewsletterAndSocial>\n <NewsletterEmailSection>\n <label>{newsletterLabel}</label>\n <NewsletterEmail>\n <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n </NewsletterEmail>\n </NewsletterEmailSection>\n <SocialMedia>\n <h4>Follow us on social media</h4>\n <SocialMediaButtons>\n <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <SystemIcons.Facebook />\n </IconButton>\n </a>\n <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <SystemIcons.Twitter />\n </IconButton>\n </a>\n <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <SystemIcons.Youtube />\n </IconButton>\n </a>\n </SocialMediaButtons>\n </SocialMedia>\n </NewsletterAndSocial>\n );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FooterNewsletterAndSocialSection.js","names":["React","styled","BREAKPOINTS","COLORS","invertedFocusStyles","TextField","SystemIcons","IconButton","ComponentLStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","InputFieldStyling","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","Regular","white","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","useState","emailInput","setEmailInput","value","e","target"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {SystemIcons} from '../../icons';\nimport {IconButton} from '../../Button';\nimport {\n ComponentLStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../../styles';\nimport {InputFieldStyling} from '../../InputFields';\n\nconst NewsletterAndSocial = styled.section`\n display: flex;\n flex-direction: column;\n margin-bottom: 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n flex-direction: row;\n }\n`;\n\nconst NewsletterEmailSection = styled.div`\n width: 100%;\n margin: 16px auto 0 auto;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 60%;\n margin: 16px 0 0 0;\n }\n\n label {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n margin-bottom: 2px;\n }\n div div {\n width: 100%;\n ${BREAKPOINTS.MEDIUM} {\n width: calc(100% - 82px);\n width: 288px;\n }\n }\n input {\n height: 48px;\n }\n`;\n\nconst NewsletterEmail = styled.div`\n display: flex;\n flex-direction: column;\n margin: 2px auto 0;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 2px 0 0 0;\n flex-direction: row;\n }\n\n ${InputFieldStyling} {\n &.focus-visible {\n ${invertedFocusStyles}\n }\n }\n`;\n\nconst NewsletterButton = styled.button`\n background: transparent;\n width: 100%;\n height: 40px;\n border: 2px solid ${COLORS.white};\n box-sizing: border-box;\n border-radius: 8px;\n margin: 8px 0 4px 0;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n ${BREAKPOINTS.MEDIUM} {\n width: 94px;\n margin: auto 0 4px 8px;\n }\n\n &:hover {\n cursor: pointer;\n }\n \n &:focus {\n ${invertedFocusStyles}\n }\n`;\n\nconst SocialMedia = styled.div`\n color: ${COLORS.white};\n margin: 0 auto;\n\n button div {\n box-sizing: border-box;\n border-radius: 4px;\n }\n\n h4 {\n margin-top: 16px;\n margin-bottom: 8px;\n \n ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 auto;\n button {\n margin: 0 0 0 12px;\n }\n }\n`;\n\nconst SocialMediaButtons = styled.div`\n display: flex;\n justify-content: center;\n\n button div {\n display: flex;\n background-color: transparent;\n color: ${COLORS.white};\n margin: 0 0 0 20px;\n\n svg {\n fill: ${COLORS.white};\n path {\n fill: ${COLORS.white};\n }\n }\n\n &:first-child {\n margin: 0;\n }\n &:hover {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_600};\n }\n &:active {\n background-color: ${COLORS.primary_800};\n color: ${COLORS.primary_100};\n }\n }\n a {\n &:focus {\n ${invertedFocusStyles}\n }\n }\n\n ${BREAKPOINTS.MEDIUM} {\n justify-content: flex-end;\n }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n actionOnNewsletterSignup?: (email: string) => void;\n newsletterLabel: string;\n placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n const [emailInput, setEmailInput] = React.useState<string>('');\n return (\n <NewsletterAndSocial>\n <NewsletterEmailSection>\n <label>{newsletterLabel}</label>\n <NewsletterEmail>\n <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n </NewsletterEmail>\n </NewsletterEmailSection>\n <SocialMedia>\n <h4>Follow us on social media</h4>\n <SocialMediaButtons>\n <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <SystemIcons.Facebook />\n </IconButton>\n </a>\n <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <SystemIcons.Twitter />\n </IconButton>\n </a>\n <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <SystemIcons.Youtube />\n </IconButton>\n </a>\n </SocialMediaButtons>\n </SocialMedia>\n </NewsletterAndSocial>\n );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,EAAEC,MAAM,EAAeC,mBAAmB,QAAO,cAAc;AAClF,SAAQC,SAAS,QAAO,mBAAmB;AAC3C,SAAQC,WAAW,QAAO,aAAa;AACvC,SAAQC,UAAU,QAAO,cAAc;AACvC,SACEC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,mBAAmB,QACd,cAAc;AACrB,SAAQC,iBAAiB,QAAO,mBAAmB;AAAC;AAAA;AAEpD,IAAMC,mBAAmB,GAAGZ,MAAM,CAACa,OAAO,wLAKtCZ,WAAW,CAACa,MAAM,CAGrB;AAED,IAAMC,sBAAsB,GAAGf,MAAM,CAACgB,GAAG,uXAIrCf,WAAW,CAACa,MAAM,EAMhBJ,mBAAmB,CAACF,kBAAkB,CAACS,OAAO,EAAEf,MAAM,CAACgB,KAAK,CAAC,EAK7DjB,WAAW,CAACa,MAAM,CAQvB;AAED,IAAMK,eAAe,GAAGnB,MAAM,CAACgB,GAAG,4QAK9Bf,WAAW,CAACa,MAAM,EAKlBH,iBAAiB,EAEbR,mBAAmB,CAG1B;AAED,IAAMiB,gBAAgB,GAAGpB,MAAM,CAACqB,MAAM,gYAIhBnB,MAAM,CAACgB,KAAK,EAK9BX,iBAAiB,CAACC,kBAAkB,CAACc,IAAI,EAAEpB,MAAM,CAACgB,KAAK,CAAC,EAExDjB,WAAW,CAACa,MAAM,EAUhBX,mBAAmB,CAExB;AAED,IAAMoB,WAAW,GAAGvB,MAAM,CAACgB,GAAG,mWACnBd,MAAM,CAACgB,KAAK,EAYjBT,kBAAkB,CAACD,kBAAkB,CAACS,OAAO,EAAE,SAAS,CAAC,EAG3DhB,WAAW,CAACa,MAAM,CAMrB;AAED,IAAMU,kBAAkB,GAAGxB,MAAM,CAACgB,GAAG,umBAOxBd,MAAM,CAACgB,KAAK,EAIXhB,MAAM,CAACgB,KAAK,EAEVhB,MAAM,CAACgB,KAAK,EAQFhB,MAAM,CAACgB,KAAK,EACvBhB,MAAM,CAACuB,WAAW,EAGPvB,MAAM,CAACwB,WAAW,EAC7BxB,MAAM,CAACyB,WAAW,EAKzBxB,mBAAmB,EAIvBF,WAAW,CAACa,MAAM,CAGrB;AAQD,IAAMc,gCAAgC,GAAG,SAAnCA,gCAAgC,OAA0G;EAAA,IAApGC,wBAAwB,QAAxBA,wBAAwB;IAAEC,eAAe,QAAfA,eAAe;IAAEC,gBAAgB,QAAhBA,gBAAgB;EACrG,sBAAoChC,KAAK,CAACiC,QAAQ,CAAS,EAAE,CAAC;IAAA;IAAvDC,UAAU;IAAEC,aAAa;EAChC,oBACE,MAAC,mBAAmB;IAAA,wBAClB,MAAC,sBAAsB;MAAA,wBACrB;QAAA,UAAQJ;MAAe,EAAS,eAChC,MAAC,eAAe;QAAA,wBACd,KAAC,SAAS;UAAC,EAAE,EAAC,iBAAiB;UAAC,aAAa,EAAE,IAAK;UAAC,WAAW,EAAEC,gBAAiB;UAAC,KAAK,EAAEE,UAAW;UAAC,QAAQ,EAAE,kBAACE,KAAa;YAAA,OAAKD,aAAa,CAACC,KAAK,CAAC;UAAA;QAAC,EAAG,eAC5J,KAAC,gBAAgB;UAAC,eAAa,SAAU;UAAC,OAAO,EAAE,iBAACC,CAAM;YAAA,OAAKP,wBAAwB,IAAIA,wBAAwB,CAACO,CAAC,CAACC,MAAM,CAACF,KAAK,CAAC;UAAA,CAAC;UAAA;
|
|
1
|
+
{"version":3,"file":"FooterNewsletterAndSocialSection.js","names":["React","styled","BREAKPOINTS","COLORS","invertedFocusStyles","TextField","SystemIcons","IconButton","ComponentLStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","InputFieldStyling","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","Regular","white","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","useState","emailInput","setEmailInput","value","e","target"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {SystemIcons} from '../../icons';\nimport {IconButton} from '../../Button';\nimport {\n ComponentLStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../../styles';\nimport {InputFieldStyling} from '../../InputFields';\n\nconst NewsletterAndSocial = styled.section`\n display: flex;\n flex-direction: column;\n margin-bottom: 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n flex-direction: row;\n }\n`;\n\nconst NewsletterEmailSection = styled.div`\n width: 100%;\n margin: 16px auto 0 auto;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 60%;\n margin: 16px 0 0 0;\n }\n\n label {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n margin-bottom: 2px;\n }\n div div {\n width: 100%;\n ${BREAKPOINTS.MEDIUM} {\n width: calc(100% - 82px);\n width: 288px;\n }\n }\n input {\n height: 48px;\n }\n`;\n\nconst NewsletterEmail = styled.div`\n display: flex;\n flex-direction: column;\n margin: 2px auto 0;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 2px 0 0 0;\n flex-direction: row;\n }\n\n ${InputFieldStyling} {\n &.focus-visible {\n ${invertedFocusStyles}\n }\n }\n`;\n\nconst NewsletterButton = styled.button`\n background: transparent;\n width: 100%;\n height: 40px;\n border: 2px solid ${COLORS.white};\n box-sizing: border-box;\n border-radius: 8px;\n margin: 8px 0 4px 0;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n ${BREAKPOINTS.MEDIUM} {\n width: 94px;\n margin: auto 0 4px 8px;\n }\n\n &:hover {\n cursor: pointer;\n }\n \n &:focus {\n ${invertedFocusStyles}\n }\n`;\n\nconst SocialMedia = styled.div`\n color: ${COLORS.white};\n margin: 0 auto;\n\n button div {\n box-sizing: border-box;\n border-radius: 4px;\n }\n\n h4 {\n margin-top: 16px;\n margin-bottom: 8px;\n \n ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 auto;\n button {\n margin: 0 0 0 12px;\n }\n }\n`;\n\nconst SocialMediaButtons = styled.div`\n display: flex;\n justify-content: center;\n\n button div {\n display: flex;\n background-color: transparent;\n color: ${COLORS.white};\n margin: 0 0 0 20px;\n\n svg {\n fill: ${COLORS.white};\n path {\n fill: ${COLORS.white};\n }\n }\n\n &:first-child {\n margin: 0;\n }\n &:hover {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_600};\n }\n &:active {\n background-color: ${COLORS.primary_800};\n color: ${COLORS.primary_100};\n }\n }\n a {\n &:focus {\n ${invertedFocusStyles}\n }\n }\n\n ${BREAKPOINTS.MEDIUM} {\n justify-content: flex-end;\n }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n actionOnNewsletterSignup?: (email: string) => void;\n newsletterLabel: string;\n placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n const [emailInput, setEmailInput] = React.useState<string>('');\n return (\n <NewsletterAndSocial>\n <NewsletterEmailSection>\n <label>{newsletterLabel}</label>\n <NewsletterEmail>\n <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n </NewsletterEmail>\n </NewsletterEmailSection>\n <SocialMedia>\n <h4>Follow us on social media</h4>\n <SocialMediaButtons>\n <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <SystemIcons.Facebook />\n </IconButton>\n </a>\n <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <SystemIcons.Twitter />\n </IconButton>\n </a>\n <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <SystemIcons.Youtube />\n </IconButton>\n </a>\n </SocialMediaButtons>\n </SocialMedia>\n </NewsletterAndSocial>\n );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"mappings":"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"}
|
|
@@ -17,15 +17,14 @@ var _FooterTop = _interopRequireDefault(require("./Components/FooterTop"));
|
|
|
17
17
|
var _FooterNewsletterAndSocialSection = _interopRequireDefault(require("./Components/FooterNewsletterAndSocialSection"));
|
|
18
18
|
var _FooterNavSection = _interopRequireDefault(require("./Components/FooterNavSection"));
|
|
19
19
|
var _styles = require("../styles");
|
|
20
|
-
var _Layouts = require("../Layouts");
|
|
21
20
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
22
|
-
var _excluded = ["id", "sitename", "bottomLinks", "showBetaTag", "copyrightText", "toTopText", "placeholderEmailField", "includeNewsletterAndSocialSection", "newsletterLabel", "navOptions", "onNewsletterSignup"
|
|
21
|
+
var _excluded = ["id", "sitename", "bottomLinks", "showBetaTag", "copyrightText", "toTopText", "placeholderEmailField", "includeNewsletterAndSocialSection", "newsletterLabel", "navOptions", "onNewsletterSignup"];
|
|
23
22
|
var _templateObject, _templateObject2;
|
|
24
23
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
24
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
26
25
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
27
26
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
28
|
-
var FooterContainer = _styledComponents.default.footer(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n margin-top: auto;\n background-color: ", ";\n border-top: 8px solid ", ";\n\n padding
|
|
27
|
+
var FooterContainer = _styledComponents.default.footer(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n margin-top: auto;\n background-color: ", ";\n border-top: 8px solid ", ";\n\n padding: 0 16px 16px;\n\n ", " {\n padding: 16px 32px;\n }\n\n ", " {\n padding: 16px 64px;\n }\n"])), _styles.COLORS.neutral_800, _styles.COLORS.neutral_200, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
|
|
29
28
|
var FooterLine = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n border-top: 1px solid ", ";\n display: none;\n ", " {\n display: block;\n }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.MEDIUM);
|
|
30
29
|
var SiteFooter = function SiteFooter(_ref) {
|
|
31
30
|
var id = _ref.id,
|
|
@@ -39,34 +38,26 @@ var SiteFooter = function SiteFooter(_ref) {
|
|
|
39
38
|
newsletterLabel = _ref.newsletterLabel,
|
|
40
39
|
navOptions = _ref.navOptions,
|
|
41
40
|
onNewsletterSignup = _ref.onNewsletterSignup,
|
|
42
|
-
_ref$useMaxWidth = _ref.useMaxWidth,
|
|
43
|
-
useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
|
|
44
|
-
maxWidth = _ref.maxWidth,
|
|
45
41
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
46
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
|
42
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FooterContainer, _objectSpread(_objectSpread({
|
|
47
43
|
id: id,
|
|
48
44
|
"data-testid": 'footer-container'
|
|
49
45
|
}, rest), {}, {
|
|
50
|
-
children: /*#__PURE__*/(0, _jsxRuntime.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterBottomLinks.default, {
|
|
66
|
-
bottomLinks: bottomLinks,
|
|
67
|
-
copyrightText: copyrightText
|
|
68
|
-
})]
|
|
69
|
-
})
|
|
46
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterTop.default, {
|
|
47
|
+
sitename: sitename,
|
|
48
|
+
showBetaTag: showBetaTag,
|
|
49
|
+
toTopText: toTopText
|
|
50
|
+
}), navOptions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterNavSection.default, {
|
|
51
|
+
mainId: id,
|
|
52
|
+
navOptions: navOptions
|
|
53
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterLine, {}), includeNewsletterAndSocialSection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterNewsletterAndSocialSection.default, {
|
|
54
|
+
placeholderEmail: placeholderEmailField,
|
|
55
|
+
actionOnNewsletterSignup: onNewsletterSignup,
|
|
56
|
+
newsletterLabel: newsletterLabel || ''
|
|
57
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterBottomLinks.default, {
|
|
58
|
+
bottomLinks: bottomLinks,
|
|
59
|
+
copyrightText: copyrightText
|
|
60
|
+
})]
|
|
70
61
|
}));
|
|
71
62
|
};
|
|
72
63
|
SiteFooter.propTypes = {
|
|
@@ -80,9 +71,7 @@ SiteFooter.propTypes = {
|
|
|
80
71
|
newsletterLabel: _propTypes.default.string,
|
|
81
72
|
toTopText: _propTypes.default.string.isRequired,
|
|
82
73
|
placeholderEmailField: _propTypes.default.string,
|
|
83
|
-
onNewsletterSignup: _propTypes.default.func
|
|
84
|
-
useMaxWidth: _propTypes.default.bool,
|
|
85
|
-
maxWidth: _propTypes.default.number
|
|
74
|
+
onNewsletterSignup: _propTypes.default.func
|
|
86
75
|
};
|
|
87
76
|
var _default = SiteFooter;
|
|
88
77
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SiteFooter.cjs","names":["FooterContainer","styled","footer","COLORS","neutral_800","neutral_200","BREAKPOINTS","MEDIUM","LARGE","FooterLine","div","white","SiteFooter","id","sitename","bottomLinks","showBetaTag","copyrightText","toTopText","placeholderEmailField","includeNewsletterAndSocialSection","newsletterLabel","navOptions","onNewsletterSignup","
|
|
1
|
+
{"version":3,"file":"SiteFooter.cjs","names":["FooterContainer","styled","footer","COLORS","neutral_800","neutral_200","BREAKPOINTS","MEDIUM","LARGE","FooterLine","div","white","SiteFooter","id","sitename","bottomLinks","showBetaTag","copyrightText","toTopText","placeholderEmailField","includeNewsletterAndSocialSection","newsletterLabel","navOptions","onNewsletterSignup","rest","actionOnNewsletterSignup"],"sources":["../../src/Footer/SiteFooter.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport FooterBottomLinks from './Components/FooterBottomLinks';\nimport FooterTop from './Components/FooterTop';\nimport FooterNewsletterAndSocialSection from './Components/FooterNewsletterAndSocialSection';\nimport FooterNavSection from './Components/FooterNavSection';\nimport { BREAKPOINTS, COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { NavLink, NavOptions } from '../types';\n\nconst FooterContainer = styled.footer`\n margin-top: auto;\n background-color: ${COLORS.neutral_800};\n border-top: 8px solid ${COLORS.neutral_200};\n\n padding: 0 16px 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n padding: 16px 32px;\n }\n\n ${BREAKPOINTS.LARGE} {\n padding: 16px 64px;\n }\n`;\nconst FooterLine = styled.div`\n border-top: 1px solid ${COLORS.white};\n display: none;\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n`;\n\ninterface NewFooterProps extends Omit<React.HTMLAttributes<HTMLElement>, 'id'> {\n id: string;\n sitename?: string;\n showBetaTag?: boolean;\n bottomLinks?: NavLink[];\n copyrightText?: string;\n includeNewsletterAndSocialSection?: boolean;\n actionOnNewsletterSignup?: (email: string) => void;\n newsletterLabel?: string;\n toTopText: string;\n navOptions?: NavOptions;\n placeholderEmailField?: string;\n onNewsletterSignup?: (email: string) => void;\n}\n\nconst SiteFooter = ({\n id,\n sitename,\n bottomLinks,\n showBetaTag,\n copyrightText,\n toTopText,\n placeholderEmailField,\n includeNewsletterAndSocialSection,\n newsletterLabel,\n navOptions,\n onNewsletterSignup,\n ...rest\n}: NewFooterProps) => {\n return (\n <FooterContainer id={id} data-testid={'footer-container'} {...rest}>\n <FooterTop sitename={sitename} showBetaTag={showBetaTag} toTopText={toTopText} />\n {navOptions && <FooterNavSection mainId={id} navOptions={navOptions} />}\n <FooterLine />\n {includeNewsletterAndSocialSection && (\n <FooterNewsletterAndSocialSection placeholderEmail={placeholderEmailField} actionOnNewsletterSignup={onNewsletterSignup} newsletterLabel={newsletterLabel || ''} />\n )}\n <FooterBottomLinks bottomLinks={bottomLinks} copyrightText={copyrightText} />\n </FooterContainer>\n );\n};\n\nexport default SiteFooter;\n"],"mappings":";;;;;;;;;;;;AAGA;AAKA;AAKA;AACA;AACA;AACA;AACA;AAAgD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhD,IAAMA,eAAe,GAAGC,yBAAM,CAACC,MAAM,oRAEfC,cAAM,CAACC,WAAW,EACdD,cAAM,CAACE,WAAW,EAIxCC,mBAAW,CAACC,MAAM,EAIlBD,mBAAW,CAACE,KAAK,CAGpB;AACD,IAAMC,UAAU,GAAGR,yBAAM,CAACS,GAAG,6KACHP,cAAM,CAACQ,KAAK,EAElCL,mBAAW,CAACC,MAAM,CAGrB;AAiBD,IAAMK,UAAU,GAAG,SAAbA,UAAU,OAaM;EAAA,IAZpBC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,WAAW,QAAXA,WAAW;IACXC,aAAa,QAAbA,aAAa;IACbC,SAAS,QAATA,SAAS;IACTC,qBAAqB,QAArBA,qBAAqB;IACrBC,iCAAiC,QAAjCA,iCAAiC;IACjCC,eAAe,QAAfA,eAAe;IACfC,UAAU,QAAVA,UAAU;IACVC,kBAAkB,QAAlBA,kBAAkB;IACfC,IAAI;EAEP,oBACE,sBAAC,eAAe;IAAC,EAAE,EAAEX,EAAG;IAAC,eAAa;EAAmB,GAAKW,IAAI;IAAA,wBAChE,qBAAC,kBAAS;MAAC,QAAQ,EAAEV,QAAS;MAAC,WAAW,EAAEE,WAAY;MAAC,SAAS,EAAEE;IAAU,EAAG,EAChFI,UAAU,iBAAI,qBAAC,yBAAgB;MAAC,MAAM,EAAET,EAAG;MAAC,UAAU,EAAES;IAAW,EAAG,eACvE,qBAAC,UAAU,KAAG,EACbF,iCAAiC,iBAChC,qBAAC,yCAAgC;MAAC,gBAAgB,EAAED,qBAAsB;MAAC,wBAAwB,EAAEI,kBAAmB;MAAC,eAAe,EAAEF,eAAe,IAAI;IAAG,EACjK,eACD,qBAAC,0BAAiB;MAAC,WAAW,EAAEN,WAAY;MAAC,aAAa,EAAEE;IAAc,EAAG;EAAA,GAC7D;AAEtB,CAAC;AAAC;EAvCAJ,EAAE;EACFC,QAAQ;EACRE,WAAW;EACXD,WAAW;EACXE,aAAa;EACbG,iCAAiC;EACjCK,wBAAwB;EACxBJ,eAAe;EACfH,SAAS;EAETC,qBAAqB;EACrBI,kBAAkB;AAAA;AAAA,eA8BLX,UAAU;AAAA"}
|
|
@@ -19,8 +19,6 @@ interface NewFooterProps extends Omit<React.HTMLAttributes<HTMLElement>, 'id'> {
|
|
|
19
19
|
navOptions?: NavOptions;
|
|
20
20
|
placeholderEmailField?: string;
|
|
21
21
|
onNewsletterSignup?: (email: string) => void;
|
|
22
|
-
useMaxWidth?: boolean;
|
|
23
|
-
maxWidth?: number;
|
|
24
22
|
}
|
|
25
|
-
declare const SiteFooter: ({ id, sitename, bottomLinks, showBetaTag, copyrightText, toTopText, placeholderEmailField, includeNewsletterAndSocialSection, newsletterLabel, navOptions, onNewsletterSignup,
|
|
23
|
+
declare const SiteFooter: ({ id, sitename, bottomLinks, showBetaTag, copyrightText, toTopText, placeholderEmailField, includeNewsletterAndSocialSection, newsletterLabel, navOptions, onNewsletterSignup, ...rest }: NewFooterProps) => JSX.Element;
|
|
26
24
|
export default SiteFooter;
|
|
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
4
4
|
import _pt from "prop-types";
|
|
5
|
-
var _excluded = ["id", "sitename", "bottomLinks", "showBetaTag", "copyrightText", "toTopText", "placeholderEmailField", "includeNewsletterAndSocialSection", "newsletterLabel", "navOptions", "onNewsletterSignup"
|
|
5
|
+
var _excluded = ["id", "sitename", "bottomLinks", "showBetaTag", "copyrightText", "toTopText", "placeholderEmailField", "includeNewsletterAndSocialSection", "newsletterLabel", "navOptions", "onNewsletterSignup"];
|
|
6
6
|
var _templateObject, _templateObject2;
|
|
7
7
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
8
8
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -28,11 +28,9 @@ import { BREAKPOINTS, COLORS } from '../styles';
|
|
|
28
28
|
/**
|
|
29
29
|
* Import custom styles.
|
|
30
30
|
*/
|
|
31
|
-
|
|
32
|
-
import { PageWidth } from "../Layouts";
|
|
33
31
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
34
32
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
35
|
-
var FooterContainer = styled.footer(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin-top: auto;\n background-color: ", ";\n border-top: 8px solid ", ";\n\n padding
|
|
33
|
+
var FooterContainer = styled.footer(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin-top: auto;\n background-color: ", ";\n border-top: 8px solid ", ";\n\n padding: 0 16px 16px;\n\n ", " {\n padding: 16px 32px;\n }\n\n ", " {\n padding: 16px 64px;\n }\n"])), COLORS.neutral_800, COLORS.neutral_200, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
|
|
36
34
|
var FooterLine = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-top: 1px solid ", ";\n display: none;\n ", " {\n display: block;\n }\n"])), COLORS.white, BREAKPOINTS.MEDIUM);
|
|
37
35
|
var SiteFooter = function SiteFooter(_ref) {
|
|
38
36
|
var id = _ref.id,
|
|
@@ -46,34 +44,26 @@ var SiteFooter = function SiteFooter(_ref) {
|
|
|
46
44
|
newsletterLabel = _ref.newsletterLabel,
|
|
47
45
|
navOptions = _ref.navOptions,
|
|
48
46
|
onNewsletterSignup = _ref.onNewsletterSignup,
|
|
49
|
-
_ref$useMaxWidth = _ref.useMaxWidth,
|
|
50
|
-
useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
|
|
51
|
-
maxWidth = _ref.maxWidth,
|
|
52
47
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
53
|
-
return /*#__PURE__*/
|
|
48
|
+
return /*#__PURE__*/_jsxs(FooterContainer, _objectSpread(_objectSpread({
|
|
54
49
|
id: id,
|
|
55
50
|
"data-testid": 'footer-container'
|
|
56
51
|
}, rest), {}, {
|
|
57
|
-
children: /*#__PURE__*/
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}), /*#__PURE__*/_jsx(FooterBottomLinks, {
|
|
73
|
-
bottomLinks: bottomLinks,
|
|
74
|
-
copyrightText: copyrightText
|
|
75
|
-
})]
|
|
76
|
-
})
|
|
52
|
+
children: [/*#__PURE__*/_jsx(FooterTop, {
|
|
53
|
+
sitename: sitename,
|
|
54
|
+
showBetaTag: showBetaTag,
|
|
55
|
+
toTopText: toTopText
|
|
56
|
+
}), navOptions && /*#__PURE__*/_jsx(FooterNavSection, {
|
|
57
|
+
mainId: id,
|
|
58
|
+
navOptions: navOptions
|
|
59
|
+
}), /*#__PURE__*/_jsx(FooterLine, {}), includeNewsletterAndSocialSection && /*#__PURE__*/_jsx(FooterNewsletterAndSocialSection, {
|
|
60
|
+
placeholderEmail: placeholderEmailField,
|
|
61
|
+
actionOnNewsletterSignup: onNewsletterSignup,
|
|
62
|
+
newsletterLabel: newsletterLabel || ''
|
|
63
|
+
}), /*#__PURE__*/_jsx(FooterBottomLinks, {
|
|
64
|
+
bottomLinks: bottomLinks,
|
|
65
|
+
copyrightText: copyrightText
|
|
66
|
+
})]
|
|
77
67
|
}));
|
|
78
68
|
};
|
|
79
69
|
SiteFooter.propTypes = {
|
|
@@ -87,9 +77,7 @@ SiteFooter.propTypes = {
|
|
|
87
77
|
newsletterLabel: _pt.string,
|
|
88
78
|
toTopText: _pt.string.isRequired,
|
|
89
79
|
placeholderEmailField: _pt.string,
|
|
90
|
-
onNewsletterSignup: _pt.func
|
|
91
|
-
useMaxWidth: _pt.bool,
|
|
92
|
-
maxWidth: _pt.number
|
|
80
|
+
onNewsletterSignup: _pt.func
|
|
93
81
|
};
|
|
94
82
|
export default SiteFooter;
|
|
95
83
|
//# sourceMappingURL=SiteFooter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SiteFooter.js","names":["React","styled","FooterBottomLinks","FooterTop","FooterNewsletterAndSocialSection","FooterNavSection","BREAKPOINTS","COLORS","
|
|
1
|
+
{"version":3,"file":"SiteFooter.js","names":["React","styled","FooterBottomLinks","FooterTop","FooterNewsletterAndSocialSection","FooterNavSection","BREAKPOINTS","COLORS","FooterContainer","footer","neutral_800","neutral_200","MEDIUM","LARGE","FooterLine","div","white","SiteFooter","id","sitename","bottomLinks","showBetaTag","copyrightText","toTopText","placeholderEmailField","includeNewsletterAndSocialSection","newsletterLabel","navOptions","onNewsletterSignup","rest","actionOnNewsletterSignup"],"sources":["../../src/Footer/SiteFooter.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport FooterBottomLinks from './Components/FooterBottomLinks';\nimport FooterTop from './Components/FooterTop';\nimport FooterNewsletterAndSocialSection from './Components/FooterNewsletterAndSocialSection';\nimport FooterNavSection from './Components/FooterNavSection';\nimport { BREAKPOINTS, COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { NavLink, NavOptions } from '../types';\n\nconst FooterContainer = styled.footer`\n margin-top: auto;\n background-color: ${COLORS.neutral_800};\n border-top: 8px solid ${COLORS.neutral_200};\n\n padding: 0 16px 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n padding: 16px 32px;\n }\n\n ${BREAKPOINTS.LARGE} {\n padding: 16px 64px;\n }\n`;\nconst FooterLine = styled.div`\n border-top: 1px solid ${COLORS.white};\n display: none;\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n`;\n\ninterface NewFooterProps extends Omit<React.HTMLAttributes<HTMLElement>, 'id'> {\n id: string;\n sitename?: string;\n showBetaTag?: boolean;\n bottomLinks?: NavLink[];\n copyrightText?: string;\n includeNewsletterAndSocialSection?: boolean;\n actionOnNewsletterSignup?: (email: string) => void;\n newsletterLabel?: string;\n toTopText: string;\n navOptions?: NavOptions;\n placeholderEmailField?: string;\n onNewsletterSignup?: (email: string) => void;\n}\n\nconst SiteFooter = ({\n id,\n sitename,\n bottomLinks,\n showBetaTag,\n copyrightText,\n toTopText,\n placeholderEmailField,\n includeNewsletterAndSocialSection,\n newsletterLabel,\n navOptions,\n onNewsletterSignup,\n ...rest\n}: NewFooterProps) => {\n return (\n <FooterContainer id={id} data-testid={'footer-container'} {...rest}>\n <FooterTop sitename={sitename} showBetaTag={showBetaTag} toTopText={toTopText} />\n {navOptions && <FooterNavSection mainId={id} navOptions={navOptions} />}\n <FooterLine />\n {includeNewsletterAndSocialSection && (\n <FooterNewsletterAndSocialSection placeholderEmail={placeholderEmailField} actionOnNewsletterSignup={onNewsletterSignup} newsletterLabel={newsletterLabel || ''} />\n )}\n <FooterBottomLinks bottomLinks={bottomLinks} copyrightText={copyrightText} />\n </FooterContainer>\n );\n};\n\nexport default SiteFooter;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,OAAOC,MAAM,MAAM,mBAAmB;;AAEtC;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,gCAAgC;AAC9D,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,OAAOC,gCAAgC,MAAM,+CAA+C;AAC5F,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,SAASC,WAAW,EAAEC,MAAM,QAAQ,WAAW;;AAE/C;AACA;AACA;AAFA;AAAA;AAKA,IAAMC,eAAe,GAAGP,MAAM,CAACQ,MAAM,sQAEfF,MAAM,CAACG,WAAW,EACdH,MAAM,CAACI,WAAW,EAIxCL,WAAW,CAACM,MAAM,EAIlBN,WAAW,CAACO,KAAK,CAGpB;AACD,IAAMC,UAAU,GAAGb,MAAM,CAACc,GAAG,+JACHR,MAAM,CAACS,KAAK,EAElCV,WAAW,CAACM,MAAM,CAGrB;AAiBD,IAAMK,UAAU,GAAG,SAAbA,UAAU,OAaM;EAAA,IAZpBC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,WAAW,QAAXA,WAAW;IACXC,aAAa,QAAbA,aAAa;IACbC,SAAS,QAATA,SAAS;IACTC,qBAAqB,QAArBA,qBAAqB;IACrBC,iCAAiC,QAAjCA,iCAAiC;IACjCC,eAAe,QAAfA,eAAe;IACfC,UAAU,QAAVA,UAAU;IACVC,kBAAkB,QAAlBA,kBAAkB;IACfC,IAAI;EAEP,oBACE,MAAC,eAAe;IAAC,EAAE,EAAEX,EAAG;IAAC,eAAa;EAAmB,GAAKW,IAAI;IAAA,wBAChE,KAAC,SAAS;MAAC,QAAQ,EAAEV,QAAS;MAAC,WAAW,EAAEE,WAAY;MAAC,SAAS,EAAEE;IAAU,EAAG,EAChFI,UAAU,iBAAI,KAAC,gBAAgB;MAAC,MAAM,EAAET,EAAG;MAAC,UAAU,EAAES;IAAW,EAAG,eACvE,KAAC,UAAU,KAAG,EACbF,iCAAiC,iBAChC,KAAC,gCAAgC;MAAC,gBAAgB,EAAED,qBAAsB;MAAC,wBAAwB,EAAEI,kBAAmB;MAAC,eAAe,EAAEF,eAAe,IAAI;IAAG,EACjK,eACD,KAAC,iBAAiB;MAAC,WAAW,EAAEN,WAAY;MAAC,aAAa,EAAEE;IAAc,EAAG;EAAA,GAC7D;AAEtB,CAAC;AAAC;EAvCAJ,EAAE;EACFC,QAAQ;EACRE,WAAW;EACXD,WAAW;EACXE,aAAa;EACbG,iCAAiC;EACjCK,wBAAwB;EACxBJ,eAAe;EACfH,SAAS;EAETC,qBAAqB;EACrBI,kBAAkB;AAAA;AA8BpB,eAAeX,UAAU"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.cjs","names":["StyledLink","styled","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","div","LARGE","focusStyles","invertedFocusStyles","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentMStyling","ComponentTextStyle","Regular","ComponentXSStyling","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted","defaultOnMouseDownHandler"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n width: 66px;\n height: 36px;\n color: ${(props) => props.$color};\n ${BREAKPOINTS.MEDIUM} {\n width: 88px;\n height: 48px;\n }\n }\n`;\n\nconst LogoContainer = styled.div`\n display: flex;\n max-width: calc(100% - 48px);\n overflow: hidden;\n align-items: center;\n height: 40px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ${BREAKPOINTS.LARGE} {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n ${focusStyles}\n }\n\n &.inverted:focus-within {\n ${invertedFocusStyles}\n }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ${(props) => props.$color || COLORS.black};\n letter-spacing: -0.02em;\n max-width: 200px;\n \n white-space: nowrap;\n overflow: hidden;\n\n ${(props) =>\n props.noSizeChangeOnMobile\n ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ${BREAKPOINTS.MEDIUM} {\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n }\n\n ${BREAKPOINTS.LARGE} {\n margin-left: 12px;\n padding-left: 12px;\n }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n padding: 4px 8px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n name: string;\n showBetaTag?: boolean;\n onClick?: () => void;\n to?: string;\n color?: string;\n noSizeChangeOnMobile?: boolean;\n betaTagBackgroundColor?: string;\n betaTagColor?: string;\n inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n return (\n <LogoContainer className={inverted ? 'inverted' : ''}>\n <StyledLink\n to={to || '/'}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n $color={color}>\n {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n {name}\n </Name>\n {showBetaTag && (\n <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n BETA\n </BetaTag>\n )}\n </StyledLink>\n </LogoContainer>\n );\n};\n\nexport default Logo;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAoD;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAU,GAAG,IAAAC,yBAAM,EAACC,oBAAI,CAAC,+VAWlB,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM;AAAA,GAC9BC,mBAAW,CAACC,MAAM,CAKvB;AAED,IAAMC,aAAa,GAAGN,yBAAM,CAACO,GAAG,2YAS5BH,mBAAW,CAACI,KAAK,EAMfC,mBAAW,EAIXC,2BAAmB,CAExB;AAED,IAAMC,IAAI,GAAGX,yBAAM,CAACY,IAAI,gbAGG,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK;AAAA,GAO9D,UAACZ,KAAK;EAAA,OACNA,KAAK,CAACa,oBAAoB,GACtB,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEhB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC,GAC3E,IAAAK,0BAAkB,EAACF,0BAAkB,CAACC,OAAO,EAAEhB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAKhFV,mBAAW,CAACC,MAAM,EAChB,UAACH,KAAK;EAAA,OAAK,IAAAc,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEhB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAGxFV,mBAAW,CAACI,KAAK,CAIpB;AAED,IAAMY,OAAO,GAAGpB,yBAAM,CAACY,IAAI,wOACL,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACmB,eAAe,IAAIR,cAAM,CAACS,WAAW;AAAA,GAOxE,UAACpB,KAAK;EAAA,OAAK,IAAAiB,0BAAkB,EAACF,0BAAkB,CAACM,aAAa,EAAErB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACW,KAAK,CAAC;AAAA,EAChG;AAcD,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAAkK;EAAA,IAA5JC,IAAI,QAAJA,IAAI;IAAEC,WAAW,QAAXA,WAAW;IAAEC,QAAO,QAAPA,OAAO;IAAEC,EAAE,QAAFA,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAEf,oBAAoB,QAApBA,oBAAoB;IAAEgB,sBAAsB,QAAtBA,sBAAsB;IAAEC,YAAY,QAAZA,YAAY;IAAEC,QAAQ,QAARA,QAAQ;EACzH,oBACE,qBAAC,aAAa;IAAC,SAAS,EAAEA,QAAQ,GAAG,UAAU,GAAG,EAAG;IAAA,uBACnD,sBAAC,UAAU;MACT,EAAE,EAAEJ,EAAE,IAAI,GAAI;MACd,WAAW,EAAEK,iCAA0B;MACvC,OAAO,EAAE,mBAAM;QACb,IAAIN,QAAO,EAAE;UACXA,QAAO,EAAE;QACX;MACF,CAAE;MACF,MAAM,EAAEE,KAAM;MAAA,WACbA,KAAK,KAAKjB,cAAM,CAACW,KAAK,gBAAG,qBAAC,wBAAgB,KAAG,gBAAG,qBAAC,mBAAW,KAAG,eAChE,qBAAC,IAAI;QAAC,MAAM,EAAEM,KAAM;QAAC,oBAAoB,EAAEf,oBAAoB,IAAI,KAAM;QAAA,UACtEW;MAAI,EACA,EACNC,WAAW,iBACV,qBAAC,OAAO;QAAC,eAAe,EAAEI,sBAAuB;QAAC,MAAM,EAAEC,YAAa;QAAA;
|
|
1
|
+
{"version":3,"file":"Logo.cjs","names":["StyledLink","styled","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","div","LARGE","focusStyles","invertedFocusStyles","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentMStyling","ComponentTextStyle","Regular","ComponentXSStyling","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted","defaultOnMouseDownHandler"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n width: 66px;\n height: 36px;\n color: ${(props) => props.$color};\n ${BREAKPOINTS.MEDIUM} {\n width: 88px;\n height: 48px;\n }\n }\n`;\n\nconst LogoContainer = styled.div`\n display: flex;\n max-width: calc(100% - 48px);\n overflow: hidden;\n align-items: center;\n height: 40px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ${BREAKPOINTS.LARGE} {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n ${focusStyles}\n }\n\n &.inverted:focus-within {\n ${invertedFocusStyles}\n }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ${(props) => props.$color || COLORS.black};\n letter-spacing: -0.02em;\n max-width: 200px;\n \n white-space: nowrap;\n overflow: hidden;\n\n ${(props) =>\n props.noSizeChangeOnMobile\n ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ${BREAKPOINTS.MEDIUM} {\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n }\n\n ${BREAKPOINTS.LARGE} {\n margin-left: 12px;\n padding-left: 12px;\n }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n padding: 4px 8px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n name: string;\n showBetaTag?: boolean;\n onClick?: () => void;\n to?: string;\n color?: string;\n noSizeChangeOnMobile?: boolean;\n betaTagBackgroundColor?: string;\n betaTagColor?: string;\n inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n return (\n <LogoContainer className={inverted ? 'inverted' : ''}>\n <StyledLink\n to={to || '/'}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n $color={color}>\n {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n {name}\n </Name>\n {showBetaTag && (\n <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n BETA\n </BetaTag>\n )}\n </StyledLink>\n </LogoContainer>\n );\n};\n\nexport default Logo;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAoD;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAU,GAAG,IAAAC,yBAAM,EAACC,oBAAI,CAAC,+VAWlB,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM;AAAA,GAC9BC,mBAAW,CAACC,MAAM,CAKvB;AAED,IAAMC,aAAa,GAAGN,yBAAM,CAACO,GAAG,2YAS5BH,mBAAW,CAACI,KAAK,EAMfC,mBAAW,EAIXC,2BAAmB,CAExB;AAED,IAAMC,IAAI,GAAGX,yBAAM,CAACY,IAAI,gbAGG,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK;AAAA,GAO9D,UAACZ,KAAK;EAAA,OACNA,KAAK,CAACa,oBAAoB,GACtB,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEhB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC,GAC3E,IAAAK,0BAAkB,EAACF,0BAAkB,CAACC,OAAO,EAAEhB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAKhFV,mBAAW,CAACC,MAAM,EAChB,UAACH,KAAK;EAAA,OAAK,IAAAc,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEhB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAGxFV,mBAAW,CAACI,KAAK,CAIpB;AAED,IAAMY,OAAO,GAAGpB,yBAAM,CAACY,IAAI,wOACL,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACmB,eAAe,IAAIR,cAAM,CAACS,WAAW;AAAA,GAOxE,UAACpB,KAAK;EAAA,OAAK,IAAAiB,0BAAkB,EAACF,0BAAkB,CAACM,aAAa,EAAErB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACW,KAAK,CAAC;AAAA,EAChG;AAcD,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAAkK;EAAA,IAA5JC,IAAI,QAAJA,IAAI;IAAEC,WAAW,QAAXA,WAAW;IAAEC,QAAO,QAAPA,OAAO;IAAEC,EAAE,QAAFA,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAEf,oBAAoB,QAApBA,oBAAoB;IAAEgB,sBAAsB,QAAtBA,sBAAsB;IAAEC,YAAY,QAAZA,YAAY;IAAEC,QAAQ,QAARA,QAAQ;EACzH,oBACE,qBAAC,aAAa;IAAC,SAAS,EAAEA,QAAQ,GAAG,UAAU,GAAG,EAAG;IAAA,uBACnD,sBAAC,UAAU;MACT,EAAE,EAAEJ,EAAE,IAAI,GAAI;MACd,WAAW,EAAEK,iCAA0B;MACvC,OAAO,EAAE,mBAAM;QACb,IAAIN,QAAO,EAAE;UACXA,QAAO,EAAE;QACX;MACF,CAAE;MACF,MAAM,EAAEE,KAAM;MAAA,WACbA,KAAK,KAAKjB,cAAM,CAACW,KAAK,gBAAG,qBAAC,wBAAgB,KAAG,gBAAG,qBAAC,mBAAW,KAAG,eAChE,qBAAC,IAAI;QAAC,MAAM,EAAEM,KAAM;QAAC,oBAAoB,EAAEf,oBAAoB,IAAI,KAAM;QAAA,UACtEW;MAAI,EACA,EACNC,WAAW,iBACV,qBAAC,OAAO;QAAC,eAAe,EAAEI,sBAAuB;QAAC,MAAM,EAAEC,YAAa;QAAA,UAAC;MAExE,EACD;IAAA;EACU,EACC;AAEpB,CAAC;AAAC;EAnCAN,IAAI;EACJC,WAAW;EACXC,OAAO;EACPC,EAAE;EACFC,KAAK;EACLf,oBAAoB;EACpBgB,sBAAsB;EACtBC,YAAY;EACZC,QAAQ;AAAA;AAAA,eA6BKR,IAAI;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.js","names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","invertedFocusStyles","ComponentMStyling","ComponentXSStyling","defaultOnMouseDownHandler","StyledLink","props","$color","MEDIUM","LogoContainer","div","LARGE","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n width: 66px;\n height: 36px;\n color: ${(props) => props.$color};\n ${BREAKPOINTS.MEDIUM} {\n width: 88px;\n height: 48px;\n }\n }\n`;\n\nconst LogoContainer = styled.div`\n display: flex;\n max-width: calc(100% - 48px);\n overflow: hidden;\n align-items: center;\n height: 40px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ${BREAKPOINTS.LARGE} {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n ${focusStyles}\n }\n\n &.inverted:focus-within {\n ${invertedFocusStyles}\n }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ${(props) => props.$color || COLORS.black};\n letter-spacing: -0.02em;\n max-width: 200px;\n \n white-space: nowrap;\n overflow: hidden;\n\n ${(props) =>\n props.noSizeChangeOnMobile\n ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ${BREAKPOINTS.MEDIUM} {\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n }\n\n ${BREAKPOINTS.LARGE} {\n margin-left: 12px;\n padding-left: 12px;\n }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n padding: 4px 8px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n name: string;\n showBetaTag?: boolean;\n onClick?: () => void;\n to?: string;\n color?: string;\n noSizeChangeOnMobile?: boolean;\n betaTagBackgroundColor?: string;\n betaTagColor?: string;\n inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n return (\n <LogoContainer className={inverted ? 'inverted' : ''}>\n <StyledLink\n to={to || '/'}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n $color={color}>\n {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n {name}\n </Name>\n {showBetaTag && (\n <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n BETA\n </BetaTag>\n )}\n </StyledLink>\n </LogoContainer>\n );\n};\n\nexport default Logo;\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,WAAW,EAAEC,gBAAgB,QAAQ,WAAW;AACzD,SAAQC,WAAW,EAAEC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,mBAAmB,QAAO,WAAW;AACnG,SAASC,iBAAiB,EAAEC,kBAAkB,QAAQ,WAAW;AACjE,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,UAAU,GAAGX,MAAM,CAACD,IAAI,CAAC,iVAWlB,UAACa,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM;AAAA,GAC9BV,WAAW,CAACW,MAAM,CAKvB;AAED,IAAMC,aAAa,GAAGf,MAAM,CAACgB,GAAG,6XAS5Bb,WAAW,CAACc,KAAK,EAMfX,WAAW,EAIXC,mBAAmB,CAExB;AAED,IAAMW,IAAI,GAAGlB,MAAM,CAACmB,IAAI,kaAGG,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,IAAIT,MAAM,CAACgB,KAAK;AAAA,GAO9D,UAACR,KAAK;EAAA,OACNA,KAAK,CAACS,oBAAoB,GACtBb,iBAAiB,CAACH,kBAAkB,CAACiB,OAAO,EAAEV,KAAK,CAACC,MAAM,IAAIT,MAAM,CAACgB,KAAK,CAAC,GAC3EX,kBAAkB,CAACJ,kBAAkB,CAACiB,OAAO,EAAEV,KAAK,CAACC,MAAM,IAAIT,MAAM,CAACgB,KAAK,CAAC;AAAA,GAKhFjB,WAAW,CAACW,MAAM,EAChB,UAACF,KAAK;EAAA,OAAKJ,iBAAiB,CAACH,kBAAkB,CAACiB,OAAO,EAAEV,KAAK,CAACC,MAAM,IAAIT,MAAM,CAACgB,KAAK,CAAC;AAAA,GAGxFjB,WAAW,CAACc,KAAK,CAIpB;AAED,IAAMM,OAAO,GAAGvB,MAAM,CAACmB,IAAI,0NACL,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACY,eAAe,IAAIpB,MAAM,CAACqB,WAAW;AAAA,GAOxE,UAACb,KAAK;EAAA,OAAKH,kBAAkB,CAACJ,kBAAkB,CAACqB,aAAa,EAAEd,KAAK,CAACC,MAAM,IAAIT,MAAM,CAACuB,KAAK,CAAC;AAAA,EAChG;AAcD,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAAkK;EAAA,IAA5JC,IAAI,QAAJA,IAAI;IAAEC,WAAW,QAAXA,WAAW;IAAEC,QAAO,QAAPA,OAAO;IAAEC,EAAE,QAAFA,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAEZ,oBAAoB,QAApBA,oBAAoB;IAAEa,sBAAsB,QAAtBA,sBAAsB;IAAEC,YAAY,QAAZA,YAAY;IAAEC,QAAQ,QAARA,QAAQ;EACzH,oBACE,KAAC,aAAa;IAAC,SAAS,EAAEA,QAAQ,GAAG,UAAU,GAAG,EAAG;IAAA,uBACnD,MAAC,UAAU;MACT,EAAE,EAAEJ,EAAE,IAAI,GAAI;MACd,WAAW,EAAEtB,yBAA0B;MACvC,OAAO,EAAE,mBAAM;QACb,IAAIqB,QAAO,EAAE;UACXA,QAAO,EAAE;QACX;MACF,CAAE;MACF,MAAM,EAAEE,KAAM;MAAA,WACbA,KAAK,KAAK7B,MAAM,CAACuB,KAAK,gBAAG,KAAC,gBAAgB,KAAG,gBAAG,KAAC,WAAW,KAAG,eAChE,KAAC,IAAI;QAAC,MAAM,EAAEM,KAAM;QAAC,oBAAoB,EAAEZ,oBAAoB,IAAI,KAAM;QAAA,UACtEQ;MAAI,EACA,EACNC,WAAW,iBACV,KAAC,OAAO;QAAC,eAAe,EAAEI,sBAAuB;QAAC,MAAM,EAAEC,YAAa;QAAA;
|
|
1
|
+
{"version":3,"file":"Logo.js","names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","invertedFocusStyles","ComponentMStyling","ComponentXSStyling","defaultOnMouseDownHandler","StyledLink","props","$color","MEDIUM","LogoContainer","div","LARGE","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n width: 66px;\n height: 36px;\n color: ${(props) => props.$color};\n ${BREAKPOINTS.MEDIUM} {\n width: 88px;\n height: 48px;\n }\n }\n`;\n\nconst LogoContainer = styled.div`\n display: flex;\n max-width: calc(100% - 48px);\n overflow: hidden;\n align-items: center;\n height: 40px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ${BREAKPOINTS.LARGE} {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n ${focusStyles}\n }\n\n &.inverted:focus-within {\n ${invertedFocusStyles}\n }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ${(props) => props.$color || COLORS.black};\n letter-spacing: -0.02em;\n max-width: 200px;\n \n white-space: nowrap;\n overflow: hidden;\n\n ${(props) =>\n props.noSizeChangeOnMobile\n ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ${BREAKPOINTS.MEDIUM} {\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n }\n\n ${BREAKPOINTS.LARGE} {\n margin-left: 12px;\n padding-left: 12px;\n }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n padding: 4px 8px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n name: string;\n showBetaTag?: boolean;\n onClick?: () => void;\n to?: string;\n color?: string;\n noSizeChangeOnMobile?: boolean;\n betaTagBackgroundColor?: string;\n betaTagColor?: string;\n inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n return (\n <LogoContainer className={inverted ? 'inverted' : ''}>\n <StyledLink\n to={to || '/'}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n $color={color}>\n {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n {name}\n </Name>\n {showBetaTag && (\n <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n BETA\n </BetaTag>\n )}\n </StyledLink>\n </LogoContainer>\n );\n};\n\nexport default Logo;\n"],"mappings":"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"}
|