@laerdal/life-react-components 1.0.1-dev.19.full → 1.0.1-dev.22.full
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/esm/AuthPage/Information.js +4 -7
- package/dist/esm/AuthPage/Information.js.map +1 -1
- package/dist/esm/Banners/Banner.js +5 -5
- package/dist/esm/Banners/Banner.js.map +1 -1
- package/dist/esm/Banners/OverviewBanner.js +2 -2
- package/dist/esm/Banners/OverviewBanner.js.map +1 -1
- package/dist/esm/Breadcrumb/Breadcrumb.js +46 -20
- package/dist/esm/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/esm/Button/Iconbutton.js +4 -1
- package/dist/esm/Button/Iconbutton.js.map +1 -1
- package/dist/esm/Dropdown/CommonStyling.js +28 -28
- package/dist/esm/Dropdown/CommonStyling.js.map +1 -1
- package/dist/esm/Footer/Components/FooterDropdownLinks.js +9 -9
- package/dist/esm/Footer/Components/FooterDropdownLinks.js.map +1 -1
- package/dist/esm/Footer/Components/FooterNavSection.js +4 -8
- package/dist/esm/Footer/Components/FooterNavSection.js.map +1 -1
- package/dist/esm/Footer/Components/FooterNewsletterAndSocialSection.js +4 -4
- package/dist/esm/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/esm/Footer/Components/FooterTop.js +2 -2
- package/dist/esm/Footer/Components/FooterTop.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/Logo.js +8 -11
- package/dist/esm/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/RightSideNav.js +4 -3
- package/dist/esm/GlobalNavigationBar/RightSideNav.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/UserMenu/MenuLink.js +3 -6
- package/dist/esm/GlobalNavigationBar/UserMenu/MenuLink.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/UserMenu/MobileUserMenu.js +10 -7
- package/dist/esm/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js +5 -13
- package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/mobile/CommonStyles.js +4 -1
- package/dist/esm/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/mobile/MobileMenu.js +6 -9
- package/dist/esm/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
- package/dist/esm/InputFields/DatepickerField.js +13 -14
- package/dist/esm/InputFields/DatepickerField.js.map +1 -1
- package/dist/esm/InputFields/components/SearchBarInput.js +11 -11
- package/dist/esm/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/esm/InputFields/components/SearchField.js +13 -11
- package/dist/esm/InputFields/components/SearchField.js.map +1 -1
- package/dist/esm/List/ListRow.js +5 -2
- package/dist/esm/List/ListRow.js.map +1 -1
- package/dist/esm/List/ListRowDropdown.js +4 -5
- package/dist/esm/List/ListRowDropdown.js.map +1 -1
- package/dist/esm/LoadingPage/GlobalLoadingPage.js +4 -3
- package/dist/esm/LoadingPage/GlobalLoadingPage.js.map +1 -1
- package/dist/esm/MiniProductCard/MiniProductCard.js +4 -5
- package/dist/esm/MiniProductCard/MiniProductCard.js.map +1 -1
- package/dist/esm/Modals/ModalDialog.js +22 -10
- package/dist/esm/Modals/ModalDialog.js.map +1 -1
- package/dist/esm/Paginator/Paginator.js +5 -6
- package/dist/esm/Paginator/Paginator.js.map +1 -1
- package/dist/esm/SkipToContent/SkipToContent.js +4 -5
- package/dist/esm/SkipToContent/SkipToContent.js.map +1 -1
- package/dist/esm/Switcher/MobileSwitcherMenu.js +4 -4
- package/dist/esm/Switcher/MobileSwitcherMenu.js.map +1 -1
- package/dist/esm/Switcher/SwitcherMenuItem.js +8 -9
- package/dist/esm/Switcher/SwitcherMenuItem.js.map +1 -1
- package/dist/esm/Tabs/HorizontalTabs.js +7 -10
- package/dist/esm/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/esm/Toasters/Toast.js +1 -2
- package/dist/esm/Toasters/Toast.js.map +1 -1
- package/dist/esm/styles/typography.js +52 -1
- package/dist/esm/styles/typography.js.map +1 -1
- package/dist/js/AuthPage/Information.js +4 -2
- package/dist/js/AuthPage/Information.js.map +1 -1
- package/dist/js/Banners/Banner.js +2 -2
- package/dist/js/Banners/Banner.js.map +1 -1
- package/dist/js/Banners/OverviewBanner.js +3 -1
- package/dist/js/Banners/OverviewBanner.js.map +1 -1
- package/dist/js/Breadcrumb/Breadcrumb.d.ts +2 -0
- package/dist/js/Breadcrumb/Breadcrumb.js +46 -14
- package/dist/js/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/js/Button/Iconbutton.d.ts +1 -0
- package/dist/js/Button/Iconbutton.js +4 -1
- package/dist/js/Button/Iconbutton.js.map +1 -1
- package/dist/js/Dropdown/CommonStyling.js +4 -4
- package/dist/js/Dropdown/CommonStyling.js.map +1 -1
- package/dist/js/Footer/Components/FooterDropdownLinks.js +3 -3
- package/dist/js/Footer/Components/FooterDropdownLinks.js.map +1 -1
- package/dist/js/Footer/Components/FooterNavSection.js +4 -2
- package/dist/js/Footer/Components/FooterNavSection.js.map +1 -1
- package/dist/js/Footer/Components/FooterNewsletterAndSocialSection.js +2 -2
- package/dist/js/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/js/Footer/Components/FooterTop.js +3 -1
- package/dist/js/Footer/Components/FooterTop.js.map +1 -1
- package/dist/js/GlobalNavigationBar/Logo.js +9 -7
- package/dist/js/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/js/GlobalNavigationBar/RightSideNav.js +3 -1
- package/dist/js/GlobalNavigationBar/RightSideNav.js.map +1 -1
- package/dist/js/GlobalNavigationBar/UserMenu/MenuLink.js +3 -1
- package/dist/js/GlobalNavigationBar/UserMenu/MenuLink.js.map +1 -1
- package/dist/js/GlobalNavigationBar/UserMenu/MobileUserMenu.js +4 -2
- package/dist/js/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map +1 -1
- package/dist/js/GlobalNavigationBar/UserMenu/UserMenu.js +4 -2
- package/dist/js/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
- package/dist/js/GlobalNavigationBar/mobile/CommonStyles.js +1 -1
- package/dist/js/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
- package/dist/js/GlobalNavigationBar/mobile/MobileMenu.d.ts +1 -1
- package/dist/js/GlobalNavigationBar/mobile/MobileMenu.js +4 -2
- package/dist/js/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
- package/dist/js/InputFields/DatepickerField.js +4 -2
- package/dist/js/InputFields/DatepickerField.js.map +1 -1
- package/dist/js/InputFields/components/SearchBarInput.js +4 -2
- package/dist/js/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/js/InputFields/components/SearchField.js +3 -1
- package/dist/js/InputFields/components/SearchField.js.map +1 -1
- package/dist/js/List/ListRow.js +3 -1
- package/dist/js/List/ListRow.js.map +1 -1
- package/dist/js/List/ListRowDropdown.js +3 -1
- package/dist/js/List/ListRowDropdown.js.map +1 -1
- package/dist/js/LoadingPage/GlobalLoadingPage.js +3 -1
- package/dist/js/LoadingPage/GlobalLoadingPage.js.map +1 -1
- package/dist/js/MiniProductCard/MiniProductCard.js +4 -2
- package/dist/js/MiniProductCard/MiniProductCard.js.map +1 -1
- package/dist/js/Modals/ModalDialog.d.ts +1 -1
- package/dist/js/Modals/ModalDialog.js +24 -10
- package/dist/js/Modals/ModalDialog.js.map +1 -1
- package/dist/js/Paginator/Paginator.js +3 -1
- package/dist/js/Paginator/Paginator.js.map +1 -1
- package/dist/js/SkipToContent/SkipToContent.js +3 -1
- package/dist/js/SkipToContent/SkipToContent.js.map +1 -1
- package/dist/js/Switcher/MobileSwitcherMenu.js +3 -1
- package/dist/js/Switcher/MobileSwitcherMenu.js.map +1 -1
- package/dist/js/Switcher/SwitcherMenuItem.js +3 -1
- package/dist/js/Switcher/SwitcherMenuItem.js.map +1 -1
- package/dist/js/Tabs/HorizontalTabs.js +3 -1
- package/dist/js/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/js/Toasters/Toast.js +3 -3
- package/dist/js/Toasters/Toast.js.map +1 -1
- package/dist/js/styles/typography.d.ts +19 -6
- package/dist/js/styles/typography.js +80 -5
- package/dist/js/styles/typography.js.map +1 -1
- package/dist/umd/AuthPage/Information.js +6 -10
- package/dist/umd/AuthPage/Information.js.map +1 -1
- package/dist/umd/Banners/Banner.js +2 -2
- package/dist/umd/Banners/Banner.js.map +1 -1
- package/dist/umd/Banners/OverviewBanner.js +5 -6
- package/dist/umd/Banners/OverviewBanner.js.map +1 -1
- package/dist/umd/Breadcrumb/Breadcrumb.js +48 -22
- package/dist/umd/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/umd/Button/Iconbutton.js +4 -1
- package/dist/umd/Button/Iconbutton.js.map +1 -1
- package/dist/umd/Dropdown/CommonStyling.js +28 -28
- package/dist/umd/Dropdown/CommonStyling.js.map +1 -1
- package/dist/umd/Footer/Components/FooterDropdownLinks.js +8 -8
- package/dist/umd/Footer/Components/FooterDropdownLinks.js.map +1 -1
- package/dist/umd/Footer/Components/FooterNavSection.js +6 -11
- package/dist/umd/Footer/Components/FooterNavSection.js.map +1 -1
- package/dist/umd/Footer/Components/FooterNewsletterAndSocialSection.js +3 -3
- package/dist/umd/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/umd/Footer/Components/FooterTop.js +5 -6
- package/dist/umd/Footer/Components/FooterTop.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/Logo.js +10 -14
- package/dist/umd/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/RightSideNav.js +6 -6
- package/dist/umd/GlobalNavigationBar/RightSideNav.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/UserMenu/MenuLink.js +5 -9
- package/dist/umd/GlobalNavigationBar/UserMenu/MenuLink.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/UserMenu/MobileUserMenu.js +12 -10
- package/dist/umd/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/UserMenu/UserMenu.js +7 -16
- package/dist/umd/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/mobile/CommonStyles.js +4 -1
- package/dist/umd/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/mobile/MobileMenu.js +7 -11
- package/dist/umd/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
- package/dist/umd/InputFields/DatepickerField.js +15 -16
- package/dist/umd/InputFields/DatepickerField.js.map +1 -1
- package/dist/umd/InputFields/components/SearchBarInput.js +13 -14
- package/dist/umd/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/umd/InputFields/components/SearchField.js +15 -14
- package/dist/umd/InputFields/components/SearchField.js.map +1 -1
- package/dist/umd/List/ListRow.js +7 -5
- package/dist/umd/List/ListRow.js.map +1 -1
- package/dist/umd/List/ListRowDropdown.js +6 -8
- package/dist/umd/List/ListRowDropdown.js.map +1 -1
- package/dist/umd/LoadingPage/GlobalLoadingPage.js +6 -6
- package/dist/umd/LoadingPage/GlobalLoadingPage.js.map +1 -1
- package/dist/umd/MiniProductCard/MiniProductCard.js +6 -8
- package/dist/umd/MiniProductCard/MiniProductCard.js.map +1 -1
- package/dist/umd/Modals/ModalDialog.js +22 -10
- package/dist/umd/Modals/ModalDialog.js.map +1 -1
- package/dist/umd/Paginator/Paginator.js +7 -9
- package/dist/umd/Paginator/Paginator.js.map +1 -1
- package/dist/umd/SkipToContent/SkipToContent.js +6 -8
- package/dist/umd/SkipToContent/SkipToContent.js.map +1 -1
- package/dist/umd/Switcher/MobileSwitcherMenu.js +6 -7
- package/dist/umd/Switcher/MobileSwitcherMenu.js.map +1 -1
- package/dist/umd/Switcher/SwitcherMenuItem.js +10 -12
- package/dist/umd/Switcher/SwitcherMenuItem.js.map +1 -1
- package/dist/umd/Tabs/HorizontalTabs.js +8 -12
- package/dist/umd/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/umd/Toasters/Toast.js +1 -2
- package/dist/umd/Toasters/Toast.js.map +1 -1
- package/dist/umd/styles/typography.js +62 -2
- package/dist/umd/styles/typography.js.map +1 -1
- package/package.json +1 -1
|
@@ -35,10 +35,10 @@ exports.Dropdown = Dropdown;
|
|
|
35
35
|
var lockedState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-color: ", ";\n box-shadow: inset 0px 0px 0px 1px ", ";\n color: ", ";\n pointer-events: none;\n cursor: not-allowed;\n input {\n color: ", " !important;\n }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_600, _styles.COLORS.neutral_600);
|
|
36
36
|
var disabledState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: ", ";\n box-shadow: inset 0px 0px 0px 1px ", ";\n color: ", ";\n pointer-events: none;\n cursor: not-allowed;\n svg {\n color: ", " !important;\n }\n input {\n color: ", " !important;\n ::placeholder {\n color: ", " !important;\n }\n }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
|
|
37
37
|
var activeValidationMessage = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n box-shadow: inset 0px 0px 0px 2px ", ";\n"])), _styles.COLORS.warning_400, _styles.COLORS.warning_400, _styles.COLORS.warning_400);
|
|
38
|
-
var placeholderStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", "\n"])), (0, _typography.ComponentMStyling)(
|
|
38
|
+
var placeholderStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", "\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600));
|
|
39
39
|
|
|
40
|
-
var StyledField = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n
|
|
41
|
-
return props.disabled ? _styles.COLORS.neutral_300 : _styles.COLORS.neutral_600;
|
|
40
|
+
var StyledField = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", "\n\n padding: 12px 16px;\n height: 48px;\n min-width: 344px;\n width: 100%;\n\n background: ", ";\n box-shadow: inset 0px 0px 0px 1px ", ";\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n \n input{\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n &::placeholder {\n ", "\n }\n\n ", " {\n ", "\n padding: 16px;\n height: 56px;\n &::placeholder {\n ", "\n }\n }\n\n &.small {\n ", "\n padding: 12px 16px;\n height: 48px;\n &::placeholder {\n ", "\n }\n }\n &.medium {\n ", "\n height: 56px;\n padding: 16px;\n &::placeholder {\n ", "\n }\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n &:focus-within {\n -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n &:hover {\n box-shadow: inset 0px 0px 0px 1px ", ";\n input {\n ::placeholder {\n color: ", ";\n }\n }\n cursor: pointer;\n }\n &:active {\n box-shadow: inset 0px 0px 0px 1px ", ";\n input {\n ::placeholder {\n color: ", ";\n }\n }\n }\n\n &.button {\n ", "\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ", ";\n background: ", ";\n }\n }\n\n ", "\n ", "\n ", "\n ", "\n\n ", ";\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), _styles.COLORS.white, _styles.COLORS.neutral_300, (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_200, _styles.COLORS.primary_600, _styles.COLORS.primary_300, _styles.COLORS.primary_800, function (props) {
|
|
41
|
+
return (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, props.disabled ? _styles.COLORS.neutral_300 : _styles.COLORS.neutral_600);
|
|
42
42
|
}, _styles.COLORS.neutral_800, _styles.COLORS.neutral_20, function (props) {
|
|
43
43
|
return props.disabled ? disabledState : '';
|
|
44
44
|
}, function (props) {
|
|
@@ -60,7 +60,7 @@ var DropdownContent = _styledComponents.default.div(_templateObject8 || (_templa
|
|
|
60
60
|
|
|
61
61
|
exports.DropdownContent = DropdownContent;
|
|
62
62
|
|
|
63
|
-
var DropdownButton = _styledComponents.default.button(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n
|
|
63
|
+
var DropdownButton = _styledComponents.default.button(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n ", "\n\n position: relative;\n text-decoration: none;\n display: block;\n height: 48px;\n background-color: ", ";\n border: none;\n cursor: pointer;\n background: transparent;\n width: 100%;\n text-align: left;\n\n &.show-divider-above > span,\n &.show-divider-above > div {\n display: block;\n width: calc(100% - 32px);\n border-top: 1px solid #e5e5e5;\n }\n\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n\n div.item-content {\n margin: auto 0 auto 16px;\n line-height: 48px;\n display: flex;\n align-items: center;\n\n div.item-label {\n flex: 1 0 calc(100% - 40px);\n }\n\n div.item-icon {\n flex: 1 0 40px;\n display: flex;\n justify-content: flex-end;\n }\n }\n\n ", ";\n\n &.active {\n background: ", ";\n\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: 2px;\n background-color: ", ";\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &::after {\n background-color: ", ";\n }\n }\n\n &.active:active {\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &::after {\n background-color: ", ";\n }\n }\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
|
|
64
64
|
|
|
65
65
|
exports.DropdownButton = DropdownButton;
|
|
66
66
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","isButton","locked","disabled","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentTextStyle","Italic","StyledField","BREAKPOINTS","MEDIUM","primary_200","primary_300","neutral_800","neutral_20","showValidationMessage","isPlaceholder","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContent","neutral_200","neutral_400","DropdownButton","button","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles/typography';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string }>`\n position: relative;\n display: inline-block;\n ${(props) => !props.isButton && 'width: 100%; min-width: 344px;'}\n ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n .icon {\n width: 24px;\n height: 24px;\n svg {\n cursor: pointer;\n }\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n input {\n color: ${COLORS.neutral_600} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n svg {\n color: ${COLORS.neutral_300} !important;\n }\n input {\n color: ${COLORS.neutral_300} !important;\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string }>`\n font-weight: normal;\n font-size: 16px;\n\n padding: 12px 16px;\n height: 48px;\n min-width: 344px;\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n line-height: 16px;\n\n display: flex;\n align-items: center;\n gap: 4px;\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n font-size: 18px;\n line-height: 16px;\n padding: 16px;\n height: 56px;\n &::placeholder {\n font-size: 14px;\n }\n }\n\n &.small {\n font-size: 16px;\n line-height: 16px;\n padding: 12px 16px;\n height: 48px;\n &::placeholder {\n font-size: 12px;\n }\n }\n &.medium {\n font-size: 18px;\n line-height: 18px;\n height: 56px;\n padding: 16px;\n &::placeholder {\n font-size: 14px;\n }\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n &:focus-within {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n &:hover {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n cursor: pointer;\n }\n &:active {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.button {\n font-size: 16px !important;\n line-height: 20px !important;\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n font-weight: bold;\n border-radius: 4px;\n color: ${(props) => (props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)};\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.locked ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n`;\n\nconst ButtonDropdownContentStyling = css`\n min-width: 344px;\n right: 0;\n`;\n\nexport const DropdownContent = styled.div<{ isButton: boolean }>`\n display: none;\n position: absolute;\n background-color: ${COLORS.white};\n width: 100%;\n z-index: 1;\n margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n &.show {\n display: block;\n }\n\n &.up {\n top: auto;\n bottom: 100%;\n }\n\n ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n border: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n padding: 4px 0;\n\n max-height: 240px;\n overflow-y: auto;\n\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n cursor: pointer;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: ${COLORS.white};\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_200};\n border-radius: 8px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_400};\n }\n`;\n\nexport const DropdownButton = styled.button`\n color: ${COLORS.neutral_600};\n\n position: relative;\n text-decoration: none;\n display: block;\n font-family: Lato;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 120%;\n height: 48px;\n background-color: ${COLORS.white};\n border: none;\n cursor: pointer;\n background: transparent;\n width: 100%;\n text-align: left;\n\n &.show-divider-above > span,\n &.show-divider-above > div {\n display: block;\n width: calc(100% - 32px);\n border-top: 1px solid #e5e5e5;\n }\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n div.item-content {\n margin: auto 0 auto 16px;\n line-height: 48px;\n display: flex;\n align-items: center;\n div.item-label {\n flex: 1 0 calc(100% - 40px);\n }\n div.item-icon {\n flex: 1 0 40px;\n display: flex;\n justify-content: flex-end;\n }\n }\n\n ${CommonInteractionStyling};\n\n &.active {\n background: ${COLORS.neutral_20};\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: 2px;\n background-color: ${COLORS.primary_500};\n\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n }\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n svg {\n color: ${COLORS.primary_600};\n }\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n &.active:active {\n background-color: ${COLORS.primary_100};\n svg {\n color: ${COLORS.primary_800};\n }\n\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n`;\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n\n ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n \n &:hover .button,\n & > .button:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:focus .button,\n & > .button:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n outline: none;\n }\n\n &:active .button,\n & > .button:active {\n box-shadow: none;\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n}`;\n"],"file":"CommonStyling.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","isButton","locked","disabled","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentTextStyle","Italic","StyledField","Regular","BREAKPOINTS","MEDIUM","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","isPlaceholder","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContent","neutral_200","neutral_400","DropdownButton","button","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling} from '../styles/typography';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string }>`\n position: relative;\n display: inline-block;\n ${(props) => !props.isButton && 'width: 100%; min-width: 344px;'}\n ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n .icon {\n width: 24px;\n height: 24px;\n svg {\n cursor: pointer;\n }\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n input {\n color: ${COLORS.neutral_600} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n svg {\n color: ${COLORS.neutral_300} !important;\n }\n input {\n color: ${COLORS.neutral_300} !important;\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string }>`\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n padding: 12px 16px;\n height: 48px;\n min-width: 344px;\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n \n input{\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 16px;\n height: 56px;\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.small {\n ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 12px 16px;\n height: 48px;\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n height: 56px;\n padding: 16px;\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n &:focus-within {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n &:hover {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n cursor: pointer;\n }\n &:active {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.button {\n ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.locked ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n`;\n\nconst ButtonDropdownContentStyling = css`\n min-width: 344px;\n right: 0;\n`;\n\nexport const DropdownContent = styled.div<{ isButton: boolean }>`\n display: none;\n position: absolute;\n background-color: ${COLORS.white};\n width: 100%;\n z-index: 1;\n margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n &.show {\n display: block;\n }\n\n &.up {\n top: auto;\n bottom: 100%;\n }\n\n ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n border: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n padding: 4px 0;\n\n max-height: 240px;\n overflow-y: auto;\n\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n cursor: pointer;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: ${COLORS.white};\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_200};\n border-radius: 8px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_400};\n }\n`;\n\nexport const DropdownButton = styled.button`\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n position: relative;\n text-decoration: none;\n display: block;\n height: 48px;\n background-color: ${COLORS.white};\n border: none;\n cursor: pointer;\n background: transparent;\n width: 100%;\n text-align: left;\n\n &.show-divider-above > span,\n &.show-divider-above > div {\n display: block;\n width: calc(100% - 32px);\n border-top: 1px solid #e5e5e5;\n }\n\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n\n div.item-content {\n margin: auto 0 auto 16px;\n line-height: 48px;\n display: flex;\n align-items: center;\n\n div.item-label {\n flex: 1 0 calc(100% - 40px);\n }\n\n div.item-icon {\n flex: 1 0 40px;\n display: flex;\n justify-content: flex-end;\n }\n }\n\n ${CommonInteractionStyling};\n\n &.active {\n background: ${COLORS.neutral_20};\n\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: 2px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_600};\n }\n\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n\n &.active:active {\n background-color: ${COLORS.primary_100};\n\n svg {\n color: ${COLORS.primary_800};\n }\n\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n`;\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n\n ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n \n &:hover .button,\n & > .button:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:focus .button,\n & > .button:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n outline: none;\n }\n\n &:active .button,\n & > .button:active {\n box-shadow: none;\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n}`;\n"],"file":"CommonStyling.js"}
|
|
@@ -43,11 +43,11 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
43
43
|
|
|
44
44
|
var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n border-top: 1px solid ", ";\n\n &:last-child {\n border-bottom: 1px solid ", ";\n }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_100);
|
|
45
45
|
|
|
46
|
-
var DropdownLinkBlock = _styledComponents.default.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n\n display: ", ";\n justify-content: space-between;\n width: 100%;\n height: 48px;\n background-color: transparent;\n border: none;\n padding: 0 16px;\n\n &:hover,\n .open {\n background-color: ", ";\n color: ", ";\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n }\n\n &:focus {\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n }\n\n h3 {\n margin: auto 0;\n
|
|
46
|
+
var DropdownLinkBlock = _styledComponents.default.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n\n display: ", ";\n justify-content: space-between;\n width: 100%;\n height: 48px;\n background-color: transparent;\n border: none;\n padding: 0 16px;\n\n &:hover,\n .open {\n background-color: ", ";\n color: ", ";\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n }\n\n &:focus {\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n }\n\n h3 {\n margin: auto 0;\n ", "\n }\n\n .open {\n h3 {\n background-color: ", ";\n color: ", ";\n }\n }\n\n svg {\n margin: auto 0;\n }\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.white), function (props) {
|
|
47
47
|
return props.width > 768 ? 'none' : 'flex';
|
|
48
|
-
}, _styles.COLORS.neutral_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.neutral_20, _styles.COLORS.neutral_800);
|
|
48
|
+
}, _styles.COLORS.neutral_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), _styles.COLORS.neutral_20, _styles.COLORS.neutral_800);
|
|
49
49
|
|
|
50
|
-
var LinkBlock = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: none;\n flex-direction: column;\n font-weight: normal;\n width: 100%;\n\n &.show {\n display: flex;\n }\n\n a {\n
|
|
50
|
+
var LinkBlock = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: none;\n flex-direction: column;\n font-weight: normal;\n width: 100%;\n\n &.show {\n display: flex;\n }\n\n a {\n text-decoration: none;\n\n ", "\n \n display: flex;\n align-items: center;\n \n padding: 0 16px;\n height: 48px;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n cursor: pointer;\n }\n\n &:focus {\n background-color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.white), _styles.COLORS.neutral_20, _styles.COLORS.primary_700, _styles.COLORS.neutral_20, _styles.COLORS.primary_100, _styles.COLORS.primary_800);
|
|
51
51
|
|
|
52
52
|
var FooterDropdownLinks = function FooterDropdownLinks(_ref) {
|
|
53
53
|
var navSection = _ref.navSection,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Footer/Components/FooterDropdownLinks.tsx"],"names":["Wrapper","styled","div","COLORS","neutral_100","DropdownLinkBlock","button","ComponentTextStyle","Bold","white","props","width","neutral_20","primary_700","primary_100","primary_800","neutral_800","LinkBlock","FooterDropdownLinks","navSection","React","useState","dropdownActive","setDropdownActive","header","links","map","item","Math","floor","random","to","label"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,oLAEaC,eAAOC,WAFpB,EAKkBD,eAAOC,WALzB,CAAb;;AASA,IAAMC,iBAAiB,GAAGJ,0BAAOK,MAAV,
|
|
1
|
+
{"version":3,"sources":["../../../../src/Footer/Components/FooterDropdownLinks.tsx"],"names":["Wrapper","styled","div","COLORS","neutral_100","DropdownLinkBlock","button","ComponentTextStyle","Bold","white","props","width","neutral_20","primary_700","primary_100","primary_800","Regular","neutral_800","LinkBlock","FooterDropdownLinks","navSection","React","useState","dropdownActive","setDropdownActive","header","links","map","item","Math","floor","random","to","label"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,oLAEaC,eAAOC,WAFpB,EAKkBD,eAAOC,WALzB,CAAb;;AASA,IAAMC,iBAAiB,GAAGJ,0BAAOK,MAAV,0sBACnB,mCAAkBC,2BAAmBC,IAArC,EAA2CL,eAAOM,KAAlD,CADmB,EAGV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,KAAN,GAAc,GAAd,GAAoB,MAApB,GAA6B,MAAzC;AAAA,CAHU,EAaCR,eAAOS,UAbR,EAcVT,eAAOU,WAdG,EAsBCV,eAAOW,WAtBR,EAuBVX,eAAOY,WAvBG,EAiCjB,mCAAkBR,2BAAmBS,OAArC,EAA8C,SAA9C,CAjCiB,EAsCGb,eAAOS,UAtCV,EAuCRT,eAAOc,WAvCC,CAAvB;;AAgDA,IAAMC,SAAS,GAAGjB,0BAAOC,GAAV,0qBAaT,mCAAkBK,2BAAmBC,IAArC,EAA2CL,eAAOM,KAAlD,CAbS,EAsBWN,eAAOS,UAtBlB,EAuBAT,eAAOU,WAvBP,EA4BWV,eAAOS,UA5BlB,EAkCWT,eAAOW,WAlClB,EAmCAX,eAAOY,WAnCP,CAAf;;AA6CA,IAAMI,mBAAmB,GAAG,SAAtBA,mBAAsB,OAAkD;AAAA,MAA/CC,UAA+C,QAA/CA,UAA+C;AAAA,MAAnCT,KAAmC,QAAnCA,KAAmC;;AAC5E,wBAA4CU,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAA5C;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,sBACE,oBAAC,OAAD,qBACE,oBAAC,iBAAD;AAAmB,IAAA,KAAK,EAAEb,KAA1B;AAAiC,IAAA,SAAS,EAAEY,cAAc,GAAG,MAAH,GAAY,EAAtE;AAA0E,IAAA,OAAO,EAAE;AAAA,aAAMC,iBAAiB,CAAC,CAACD,cAAF,CAAvB;AAAA;AAAnF,kBACE,gCAAKH,UAAU,CAACK,MAAhB,CADF,EAEGF,cAAc,gBAAG,oBAAC,sBAAD;AAAW,IAAA,IAAI,EAAC;AAAhB,IAAH,gBAA+B,oBAAC,wBAAD;AAAa,IAAA,IAAI,EAAC;AAAlB,IAFhD,CADF,eAKE,oBAAC,SAAD;AAAW,IAAA,KAAK,EAAEZ,KAAlB;AAAyB,IAAA,SAAS,EAAEY,cAAc,GAAG,MAAH,GAAY;AAA9D,KACGH,UAAU,CAACM,KAAX,CAAiBC,GAAjB,CAAqB,UAACC,IAAD;AAAA,wBACpB;AAAG,MAAA,GAAG,yBAAkBC,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAlB,CAAN;AAAoE,MAAA,IAAI,EAAEH,IAAI,CAACI,EAA/E;AAAmF,MAAA,MAAM,EAAC,QAA1F;AAAmG,MAAA,GAAG,EAAC;AAAvG,OACGJ,IAAI,CAACK,KADR,CADoB;AAAA,GAArB,CADH,CALF,CADF;AAeD,CAjBD;;;AAHEtB,EAAAA,K;;eAsBaQ,mB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {ChevronDown, ChevronUp} from '../../icons/systemicons/SystemIcons';\nimport {NavSection} from '../../types';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\n\nconst Wrapper = styled.div`\n width: 100%;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n`;\n\nconst DropdownLinkBlock = styled.button<{ width: number }>`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n display: ${(props) => (props.width > 768 ? 'none' : 'flex')};\n justify-content: space-between;\n width: 100%;\n height: 48px;\n background-color: transparent;\n border: none;\n padding: 0 16px;\n\n &:hover,\n .open {\n background-color: ${COLORS.neutral_20};\n color: ${COLORS.primary_700};\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:focus {\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n }\n\n h3 {\n margin: auto 0;\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n }\n\n .open {\n h3 {\n background-color: ${COLORS.neutral_20};\n color: ${COLORS.neutral_800};\n }\n }\n\n svg {\n margin: auto 0;\n }\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n display: none;\n flex-direction: column;\n font-weight: normal;\n width: 100%;\n\n &.show {\n display: flex;\n }\n\n a {\n text-decoration: none;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n \n display: flex;\n align-items: center;\n \n padding: 0 16px;\n height: 48px;\n\n &:hover {\n background-color: ${COLORS.neutral_20};\n color: ${COLORS.primary_700};\n cursor: pointer;\n }\n\n &:focus {\n background-color: ${COLORS.neutral_20};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n }\n`;\n\ninterface FooterNavSectionProps {\n navSection: NavSection;\n width: number;\n}\n\nconst FooterDropdownLinks = ({ navSection, width }: FooterNavSectionProps) => {\n const [dropdownActive, setDropdownActive] = React.useState<boolean>(false);\n return (\n <Wrapper>\n <DropdownLinkBlock width={width} className={dropdownActive ? 'open' : ''} onClick={() => setDropdownActive(!dropdownActive)}>\n <h3>{navSection.header}</h3>\n {dropdownActive ? <ChevronUp size=\"24px\" /> : <ChevronDown size=\"24px\" />}\n </DropdownLinkBlock>\n <LinkBlock width={width} className={dropdownActive ? 'show' : ''}>\n {navSection.links.map((item) => (\n <a key={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`} href={item.to} target=\"_blank\" rel=\"noreferrer noopener\">\n {item.label}\n </a>\n ))}\n </LinkBlock>\n </Wrapper>\n );\n};\n\nexport default FooterDropdownLinks;\n"],"file":"FooterDropdownLinks.js"}
|
|
@@ -17,6 +17,8 @@ var _styles = require("../../styles");
|
|
|
17
17
|
|
|
18
18
|
var _FooterDropdownLinks = _interopRequireDefault(require("./FooterDropdownLinks"));
|
|
19
19
|
|
|
20
|
+
var _typography = require("../../styles/typography");
|
|
21
|
+
|
|
20
22
|
var _templateObject, _templateObject2;
|
|
21
23
|
|
|
22
24
|
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); }
|
|
@@ -41,9 +43,9 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
41
43
|
|
|
42
44
|
var NavSection = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n flex-flow: flex-start;\n color: white;\n margin-bottom: 12px;\n"])));
|
|
43
45
|
|
|
44
|
-
var LinkBlock = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: ", ";\n flex-direction: column;\n font-weight: normal;\n width: 100%;\n\n ", " {\n padding: 0 24px 24px 0;\n width: calc(50% - 24px);\n }\n\n ", " {\n width: calc(33% - 24px);\n }\n ", " {\n padding: 0 32px 32px 0;\n width: calc(33% - 32px);\n }\n\n h3 {\n
|
|
46
|
+
var LinkBlock = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: ", ";\n flex-direction: column;\n font-weight: normal;\n width: 100%;\n\n ", " {\n padding: 0 24px 24px 0;\n width: calc(50% - 24px);\n }\n\n ", " {\n width: calc(33% - 24px);\n }\n ", " {\n padding: 0 32px 32px 0;\n width: calc(33% - 32px);\n }\n\n h3 {\n ", "\n }\n\n a {\n text-decoration: none;\n padding: 8px 0px;\n ", "\n }\n"])), function (props) {
|
|
45
47
|
return props.width <= 768 ? 'none' : 'flex';
|
|
46
|
-
}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.XLARGE);
|
|
48
|
+
}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.XLARGE, (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.white));
|
|
47
49
|
|
|
48
50
|
var FooterNavSection = function FooterNavSection(_ref) {
|
|
49
51
|
var _navOptions$sections;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Footer/Components/FooterNavSection.tsx"],"names":["NavSection","styled","section","LinkBlock","div","props","width","BREAKPOINTS","MEDIUM","LARGE","XLARGE","FooterNavSection","navOptions","React","useState","window","innerWidth","setWidth","useEffect","handleResize","addEventListener","sections","map","no","index","header","links","link","Math","floor","random","to","target","label","mainId"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/Footer/Components/FooterNavSection.tsx"],"names":["NavSection","styled","section","LinkBlock","div","props","width","BREAKPOINTS","MEDIUM","LARGE","XLARGE","ComponentTextStyle","Regular","Bold","COLORS","white","FooterNavSection","navOptions","React","useState","window","innerWidth","setWidth","useEffect","handleResize","addEventListener","sections","map","no","index","header","links","link","Math","floor","random","to","target","label","mainId"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAGC,0BAAOC,OAAV,wMAAhB;;AASA,IAAMC,SAAS,GAAGF,0BAAOG,GAAV,wcACF,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,KAAN,IAAe,GAAf,GAAqB,MAArB,GAA8B,MAA1C;AAAA,CADE,EAMXC,oBAAYC,MAND,EAWXD,oBAAYE,KAXD,EAcXF,oBAAYG,MAdD,EAoBT,mCAAkBC,2BAAmBC,OAArC,EAA8C,SAA9C,CApBS,EA0BT,mCAAkBD,2BAAmBE,IAArC,EAA2CC,eAAOC,KAAlD,CA1BS,CAAf;;AAmCA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAA2C;AAAA;;AAAA,MAAxCC,UAAwC,QAAxCA,UAAwC;;AAClE,wBAA0BC,KAAK,CAACC,QAAN,CAAuBC,MAAM,CAACC,UAA9B,CAA1B;AAAA;AAAA,MAAOf,KAAP;AAAA,MAAcgB,QAAd;;AACAJ,EAAAA,KAAK,CAACK,SAAN,CAAgB,YAAM;AACpB,aAASC,YAAT,GAAwB;AACtBF,MAAAA,QAAQ,CAACF,MAAM,CAACC,UAAR,CAAR;AACD;;AACDD,IAAAA,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;AACD,GALD;AAOA,sBACE,oBAAC,UAAD,gCACGP,UAAU,CAACS,QADd,yDACG,qBAAqBC,GAArB,CAAyB,UAACC,EAAD,EAAKC,KAAL,EAAe;AACvC,WAAOvB,KAAK,GAAG,GAAR,gBACL,oBAAC,SAAD;AAAW,MAAA,GAAG,sBAAeuB,KAAf,CAAd;AAAsC,MAAA,KAAK,EAAEvB;AAA7C,oBACE,gCAAKsB,EAAE,CAACE,MAAR,CADF,EAEGF,EAAE,CAACG,KAAH,CAASJ,GAAT,CAAa,UAACK,IAAD;AAAA,0BACZ;AAAG,QAAA,GAAG,yBAAkBC,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAlB,CAAN;AAAoE,QAAA,IAAI,EAAEH,IAAI,CAACI,EAA/E;AAAmF,QAAA,MAAM,EAAEJ,IAAI,CAACK,MAAL,IAAe,QAA1G;AAAoH,QAAA,GAAG,EAAC;AAAxH,SACGL,IAAI,CAACM,KADR,CADY;AAAA,KAAb,CAFH,CADK,gBAUL,oBAAC,4BAAD;AAAqB,MAAA,GAAG,8BAAuBT,KAAvB,CAAxB;AAAwD,MAAA,UAAU,EAAED,EAApE;AAAwE,MAAA,KAAK,EAAEtB;AAA/E,MAVF;AAYD,GAbA,CADH,CADF;AAkBD,CA3BD;;;AAHEiC,EAAAA,M;;eAgCavB,gB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles';\nimport FooterDropdownLinks from './FooterDropdownLinks';\nimport {NavOptions} from '../../types';\nimport {ComponentLStyling, ComponentSStyling} from '../../styles/typography';\n\nconst NavSection = styled.section`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n flex-flow: flex-start;\n color: white;\n margin-bottom: 12px;\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n display: ${(props) => (props.width <= 768 ? 'none' : 'flex')};\n flex-direction: column;\n font-weight: normal;\n width: 100%;\n\n ${BREAKPOINTS.MEDIUM} {\n padding: 0 24px 24px 0;\n width: calc(50% - 24px);\n }\n\n ${BREAKPOINTS.LARGE} {\n width: calc(33% - 24px);\n }\n ${BREAKPOINTS.XLARGE} {\n padding: 0 32px 32px 0;\n width: calc(33% - 32px);\n }\n\n h3 {\n ${ComponentLStyling(ComponentTextStyle.Regular, 'inherit')}\n }\n\n a {\n text-decoration: none;\n padding: 8px 0px;\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n }\n`;\n\ninterface FooterNavSectionProps {\n navOptions: NavOptions;\n mainId: string;\n}\n\nconst FooterNavSection = ({ navOptions }: FooterNavSectionProps) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n return (\n <NavSection>\n {navOptions.sections?.map((no, index) => {\n return width > 768 ? (\n <LinkBlock key={`LinkBlock_${index}`} width={width}>\n <h3>{no.header}</h3>\n {no.links.map((link) => (\n <a key={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`} href={link.to} target={link.target || '_blank'} rel=\"noreferrer noopener\">\n {link.label}\n </a>\n ))}\n </LinkBlock>\n ) : (\n <FooterDropdownLinks key={`LinkBlockDropdown_${index}`} navSection={no} width={width} />\n );\n })}\n </NavSection>\n );\n};\n\nexport default FooterNavSection;\n"],"file":"FooterNavSection.js"}
|
|
@@ -47,13 +47,13 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
47
47
|
|
|
48
48
|
var NewsletterAndSocial = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-bottom: 16px;\n\n ", " {\n flex-direction: row;\n }\n"])), _styles.BREAKPOINTS.MEDIUM);
|
|
49
49
|
|
|
50
|
-
var NewsletterEmailSection = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n margin: 16px auto 0 auto;\n\n ", " {\n width: 60%;\n margin: 16px 0 0 0;\n }\n\n label {\n ", "\n margin-bottom: 2px;\n }\n div div {\n width: 100%;\n ", " {\n width: calc(100% - 82px);\n width: 288px;\n }\n }\n input {\n height: 48px;\n }\n"])), _styles.BREAKPOINTS.MEDIUM, (0, _typography.
|
|
50
|
+
var NewsletterEmailSection = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n margin: 16px auto 0 auto;\n\n ", " {\n width: 60%;\n margin: 16px 0 0 0;\n }\n\n label {\n ", "\n margin-bottom: 2px;\n }\n div div {\n width: 100%;\n ", " {\n width: calc(100% - 82px);\n width: 288px;\n }\n }\n input {\n height: 48px;\n }\n"])), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.white), _styles.BREAKPOINTS.MEDIUM);
|
|
51
51
|
|
|
52
52
|
var NewsletterEmail = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-top: 2px;\n margin: 2px auto 0 auto;\n\n ", " {\n margin: 2px 0 0 0;\n flex-direction: row;\n }\n"])), _styles.BREAKPOINTS.MEDIUM);
|
|
53
53
|
|
|
54
54
|
var NewsletterButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background: transparent;\n width: 100%;\n height: 40px;\n border: 2px solid ", ";\n box-sizing: border-box;\n border-radius: 8px;\n margin: 8px 0 4px 0;\n\n ", "\n\n ", " {\n width: 94px;\n margin: auto 0 4px 8px;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), _styles.COLORS.white, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.white), _styles.BREAKPOINTS.MEDIUM);
|
|
55
55
|
|
|
56
|
-
var SocialMedia = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: ", ";\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
|
|
56
|
+
var SocialMedia = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: ", ";\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 ", "\n }\n\n ", " {\n margin: 0 0 0 auto;\n button {\n margin: 0 0 0 12px;\n }\n }\n"])), _styles.COLORS.white, (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, 'inherit'), _styles.BREAKPOINTS.MEDIUM);
|
|
57
57
|
|
|
58
58
|
var SocialMediaButtons = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n\n button div {\n display: flex;\n background-color: transparent;\n color: ", ";\n margin: 0 0 0 20px;\n\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n\n &:first-child {\n margin: 0;\n }\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n &:active {\n background-color: ", ";\n color: ", ";\n }\n }\n a {\n &:focus {\n outline: none;\n div {\n background-color: ", ";\n color: ", ";\n outline: none;\n box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n }\n\n ", " {\n justify-content: flex-end;\n }\n"])), _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.neutral_600, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _styles.COLORS.white, _styles.COLORS.neutral_600, _styles.COLORS.primary_500, _styles.COLORS.neutral_600, _styles.BREAKPOINTS.MEDIUM);
|
|
59
59
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","ComponentTextStyle","Regular","COLORS","white","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","primary_500","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","React","useState","emailInput","setEmailInput","value","e","target","Math","floor","random"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","ComponentTextStyle","Regular","COLORS","white","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","primary_500","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","React","useState","emailInput","setEmailInput","value","e","target","Math","floor","random"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAMA,mBAAmB,GAAGC,0BAAOC,OAAV,wLAKrBC,oBAAYC,MALS,CAAzB;;AAUA,IAAMC,sBAAsB,GAAGJ,0BAAOK,GAAV,uXAIxBH,oBAAYC,MAJY,EAUtB,qCAAoBG,+BAAmBC,OAAvC,EAAgDC,eAAOC,KAAvD,CAVsB,EAetBP,oBAAYC,MAfU,CAA5B;;AAyBA,IAAMO,eAAe,GAAGV,0BAAOK,GAAV,0OAMjBH,oBAAYC,MANK,CAArB;;AAYA,IAAMQ,gBAAgB,GAAGX,0BAAOY,MAAV,gWAIAJ,eAAOC,KAJP,EASlB,mCAAkBH,+BAAmBO,IAArC,EAA2CL,eAAOC,KAAlD,CATkB,EAWlBP,oBAAYC,MAXM,CAAtB;;AAqBA,IAAMW,WAAW,GAAGd,0BAAOK,GAAV,mWACNG,eAAOC,KADD,EAaX,oCAAmBH,+BAAmBC,OAAtC,EAA+C,SAA/C,CAbW,EAgBbL,oBAAYC,MAhBC,CAAjB;;AAwBA,IAAMY,kBAAkB,GAAGf,0BAAOK,GAAV,w2BAOXG,eAAOC,KAPI,EAWVD,eAAOC,KAXG,EAaRD,eAAOC,KAbC,EAqBED,eAAOC,KArBT,EAsBTD,eAAOQ,WAtBE,EAyBER,eAAOS,WAzBT,EA0BTT,eAAOU,WA1BE,EAiCIV,eAAOC,KAjCX,EAkCPD,eAAOQ,WAlCA,EAoCUR,eAAOW,WApCjB,EAwCRX,eAAOQ,WAxCC,EA6CpBd,oBAAYC,MA7CQ,CAAxB;;AAwDA,IAAMiB,gCAAgC,GAAG,SAAnCA,gCAAmC,OAAuG;AAAA,MAApGC,wBAAoG,QAApGA,wBAAoG;AAAA,MAA1EC,eAA0E,QAA1EA,eAA0E;AAAA,MAAzDC,gBAAyD,QAAzDA,gBAAyD;;AAC9I,wBAAoCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,sBACE,oBAAC,mBAAD,qBACE,oBAAC,sBAAD,qBACE,mCAAQL,eAAR,CADF,eAEE,oBAAC,eAAD,qBACE,oBAAC,sBAAD;AAAW,IAAA,EAAE,EAAC,iBAAd;AAAgC,IAAA,aAAa,EAAE,IAA/C;AAAqD,IAAA,WAAW,EAAEC,gBAAlE;AAAoF,IAAA,KAAK,EAAEG,UAA3F;AAAuG,IAAA,QAAQ,EAAE,kBAACE,KAAD;AAAA,aAAmBD,aAAa,CAACC,KAAD,CAAhC;AAAA;AAAjH,IADF,eAEE,oBAAC,gBAAD;AAAkB,IAAA,OAAO,EAAE,iBAACC,CAAD;AAAA,aAAYR,wBAAwB,IAAIA,wBAAwB,CAACQ,CAAC,CAACC,MAAF,CAASF,KAAV,CAAhE;AAAA;AAA3B,eAFF,CAFF,CADF,eAQE,oBAAC,WAAD,qBACE,4DADF,eAEE,oBAAC,kBAAD,qBACE;AAAG,IAAA,GAAG,wBAAiBG,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAjB,CAAN;AAAmE,IAAA,IAAI,EAAC,0CAAxE;AAAmH,IAAA,MAAM,EAAC,QAA1H;AAAmI,IAAA,GAAG,EAAC;AAAvI,kBACE,oBAAC,kBAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,MAAM,EAAE,kBAAM,CAAE,CAAhD;AAAkD,IAAA,QAAQ,EAAE,CAAC;AAA7D,kBACE,oBAAC,qBAAD,OADF,CADF,CADF,eAME;AAAG,IAAA,GAAG,wBAAiBF,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAjB,CAAN;AAAmE,IAAA,IAAI,EAAC,oCAAxE;AAA6G,IAAA,MAAM,EAAC,QAApH;AAA6H,IAAA,GAAG,EAAC;AAAjI,kBACE,oBAAC,kBAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,MAAM,EAAE,kBAAM,CAAE,CAAhD;AAAkD,IAAA,QAAQ,EAAE,CAAC;AAA7D,kBACE,oBAAC,oBAAD,OADF,CADF,CANF,eAWE;AAAG,IAAA,GAAG,wBAAiBF,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAjB,CAAN;AAAmE,IAAA,IAAI,EAAC,6CAAxE;AAAsH,IAAA,MAAM,EAAC,QAA7H;AAAsI,IAAA,GAAG,EAAC;AAA1I,kBACE,oBAAC,kBAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,MAAM,EAAE,kBAAM,CAAE,CAAhD;AAAkD,IAAA,QAAQ,EAAE,CAAC;AAA7D,kBACE,oBAAC,oBAAD,OADF,CADF,CAXF,CAFF,CARF,CADF;AA+BD,CAjCD;;;AALEZ,EAAAA,wB;AACAC,EAAAA,e;AACAC,EAAAA,gB;;eAsCaH,gC","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {Facebook, Twitter, Youtube} from '../../icons/systemicons/SystemIcons';\nimport {IconButton} from '../../Button';\nimport {\n ComponentLStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../../styles/typography';\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-top: 2px;\n margin: 2px auto 0 auto;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 2px 0 0 0;\n flex-direction: row;\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\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 outline: none;\n div {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_600};\n outline: none;\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n div svg path,\n div svg {\n fill: ${COLORS.neutral_600};\n }\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 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 key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <Facebook />\n </IconButton>\n </a>\n <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <Twitter />\n </IconButton>\n </a>\n <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <Youtube />\n </IconButton>\n </a>\n </SocialMediaButtons>\n </SocialMedia>\n </NewsletterAndSocial>\n );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"file":"FooterNewsletterAndSocialSection.js"}
|
|
@@ -21,6 +21,8 @@ var _Logo = _interopRequireDefault(require("../../GlobalNavigationBar/Logo"));
|
|
|
21
21
|
|
|
22
22
|
var _SystemIcons = require("../../icons/systemicons/SystemIcons");
|
|
23
23
|
|
|
24
|
+
var _typography = require("../../styles/typography");
|
|
25
|
+
|
|
24
26
|
var _templateObject, _templateObject2;
|
|
25
27
|
|
|
26
28
|
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); }
|
|
@@ -33,7 +35,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
33
35
|
|
|
34
36
|
var FooterTopSection = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n min-height: 8px;\n color: white;\n display: flex;\n flex-direction: row;\n margin-bottom: 16px;\n"])));
|
|
35
37
|
|
|
36
|
-
var ToTop = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin: auto 0 auto auto;\n border-radius: 4px;\n height: 48px;\n width: 48px;\n padding: 8px;\n\n svg {\n margin: 0 auto;\n }\n\n &:hover {\n cursor: pointer;\n }\n span {\n
|
|
38
|
+
var ToTop = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin: auto 0 auto auto;\n border-radius: 4px;\n height: 48px;\n width: 48px;\n padding: 8px;\n\n svg {\n margin: 0 auto;\n }\n\n &:hover {\n cursor: pointer;\n }\n span {\n margin: 14px auto 0 auto;\n ", "\n }\n\n &:hover:not(:disabled) {\n background-color: ", ";\n svg path,\n svg {\n fill: ", ";\n }\n span {\n color: ", ";\n }\n }\n\n &:focus:not(:disabled) {\n outline: none;\n box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n\n &:active:not(:disabled) {\n background: ", ";\n box-shadow: none;\n svg path,\n svg {\n fill: ", ";\n }\n span {\n color: ", ";\n }\n }\n"])), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.UppercaseBold, 'inherit'), _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_800);
|
|
37
39
|
|
|
38
40
|
var FooterTop = function FooterTop(_ref) {
|
|
39
41
|
var sitename = _ref.sitename,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Footer/Components/FooterTop.tsx"],"names":["FooterTopSection","styled","section","ToTop","div","COLORS","primary_20","primary_700","primary_500","primary_100","primary_800","FooterTop","sitename","showBetaTag","toTopText","isPressingEnter","e","key","preventDefault","stopPropagation","action","white","neutral_800"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/Footer/Components/FooterTop.tsx"],"names":["FooterTopSection","styled","section","ToTop","div","ComponentTextStyle","UppercaseBold","COLORS","primary_20","primary_700","primary_500","primary_100","primary_800","FooterTop","sitename","showBetaTag","toTopText","isPressingEnter","e","key","preventDefault","stopPropagation","action","white","neutral_800"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,gBAAgB,GAAGC,0BAAOC,OAAV,8KAAtB;;AAQA,IAAMC,KAAK,GAAGF,0BAAOG,GAAV,6yBAkBL,oCAAmBC,+BAAmBC,aAAtC,EAAqD,SAArD,CAlBK,EAsBaC,eAAOC,UAtBpB,EAyBGD,eAAOE,WAzBV,EA4BIF,eAAOE,WA5BX,EAkCmBF,eAAOG,WAlC1B,EAsCOH,eAAOI,WAtCd,EA0CGJ,eAAOK,WA1CV,EA6CIL,eAAOK,WA7CX,CAAX;;AAwDA,IAAMC,SAAS,GAAG,SAAZA,SAAY,OAA0D;AAAA,MAAvDC,QAAuD,QAAvDA,QAAuD;AAAA,MAA7CC,WAA6C,QAA7CA,WAA6C;AAAA,MAAhCC,SAAgC,QAAhCA,SAAgC;;AAC1E,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD,EAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AAQA,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB,mCAAgB,CAAhB;AACD,GAFD;;AAGA,sBACE,oBAAC,gBAAD,qBACE,oBAAC,aAAD;AACE,IAAA,IAAI,EAAER,QAAQ,IAAI,EADpB;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,KAAK,EAAER,eAAOgB,KAHhB;AAIE,IAAA,oBAAoB,EAAE,IAJxB;AAKE,IAAA,sBAAsB,EAAEhB,eAAOgB,KALjC;AAME,IAAA,YAAY,EAAEhB,eAAOiB;AANvB,IADF,eASE,oBAAC,KAAD;AAAO,IAAA,QAAQ,EAAE,CAAjB;AAAoB,IAAA,SAAS,EAAE,mBAACN,CAAD;AAAA,aAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBI,MAAM,EAA3B,GAAgC,IAA7C;AAAA,KAA/B;AAAmF,IAAA,OAAO,EAAEA;AAA5F,kBACE,oBAAC,wBAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,KAAK,EAAEf,eAAOgB;AAAvC,IADF,eAEE,kCAAOP,SAAP,CAFF,CATF,CADF;AAgBD,CA5BD;;;AALEF,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,S;;eAiCaH,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport animateScrollTo from 'animated-scroll-to';\n\nimport {COLORS} from '../../styles';\nimport Logo from '../../GlobalNavigationBar/Logo';\nimport {ArrowLineUp} from '../../icons/systemicons/SystemIcons';\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles/typography';\n\nconst FooterTopSection = styled.section`\n min-height: 8px;\n color: white;\n display: flex;\n flex-direction: row;\n margin-bottom: 16px;\n`;\n\nconst ToTop = styled.div`\n display: flex;\n flex-direction: column;\n margin: auto 0 auto auto;\n border-radius: 4px;\n height: 48px;\n width: 48px;\n padding: 8px;\n\n svg {\n margin: 0 auto;\n }\n\n &:hover {\n cursor: pointer;\n }\n span {\n margin: 14px auto 0 auto;\n ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\n }\n\n &:hover:not(:disabled) {\n background-color: ${COLORS.primary_20};\n svg path,\n svg {\n fill: ${COLORS.primary_700};\n }\n span {\n color: ${COLORS.primary_700};\n }\n }\n\n &:focus:not(:disabled) {\n outline: none;\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n\n &:active:not(:disabled) {\n background: ${COLORS.primary_100};\n box-shadow: none;\n svg path,\n svg {\n fill: ${COLORS.primary_800};\n }\n span {\n color: ${COLORS.primary_800};\n }\n }\n`;\n\ninterface FooterTopProps {\n sitename?: string;\n showBetaTag?: boolean;\n toTopText: string;\n}\n\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n const action = () => {\n animateScrollTo(0);\n };\n return (\n <FooterTopSection>\n <Logo\n name={sitename || ''}\n showBetaTag={showBetaTag}\n color={COLORS.white}\n noSizeChangeOnMobile={true}\n betaTagBackgroundColor={COLORS.white}\n betaTagColor={COLORS.neutral_800}\n />\n <ToTop tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\n <ArrowLineUp size=\"24px\" color={COLORS.white} />\n <span>{toTopText}</span>\n </ToTop>\n </FooterTopSection>\n );\n};\n\nexport default FooterTop;\n"],"file":"FooterTop.js"}
|
|
@@ -19,6 +19,8 @@ var _assets = require("../assets");
|
|
|
19
19
|
|
|
20
20
|
var _styles = require("../styles");
|
|
21
21
|
|
|
22
|
+
var _typography = require("../styles/typography");
|
|
23
|
+
|
|
22
24
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
23
25
|
|
|
24
26
|
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); }
|
|
@@ -35,18 +37,18 @@ var StyledLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateO
|
|
|
35
37
|
|
|
36
38
|
var LogoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ", " {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n }\n"])), _styles.BREAKPOINTS.MEDIUM);
|
|
37
39
|
|
|
38
|
-
var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-left: 12px;\n padding-left: 12px;\n border-left: 1px solid ", ";\n
|
|
40
|
+
var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-left: 12px;\n padding-left: 12px;\n border-left: 1px solid ", ";\n letter-spacing: -0.02em;\n\n ", "\n\n ", " {\n ", "\n }\n"])), function (props) {
|
|
39
41
|
return props.color || _styles.COLORS.black;
|
|
40
42
|
}, function (props) {
|
|
41
|
-
return props.noSizeChangeOnMobile ?
|
|
42
|
-
}, function (props) {
|
|
43
|
-
return props.color || _styles.COLORS.black;
|
|
44
|
-
}
|
|
43
|
+
return props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black);
|
|
44
|
+
}, _styles.BREAKPOINTS.MEDIUM, function (props) {
|
|
45
|
+
return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black);
|
|
46
|
+
});
|
|
45
47
|
|
|
46
|
-
var BetaTag = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background-color: ", ";\n
|
|
48
|
+
var BetaTag = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background-color: ", ";\n padding: 4px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ", "\n"])), function (props) {
|
|
47
49
|
return props.backgroundColor || _styles.COLORS.accent2_500;
|
|
48
50
|
}, function (props) {
|
|
49
|
-
return props.color || _styles.COLORS.white;
|
|
51
|
+
return (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.color || _styles.COLORS.white);
|
|
50
52
|
});
|
|
51
53
|
|
|
52
54
|
var Logo = function Logo(_ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","Name","span","COLORS","black","noSizeChangeOnMobile","BetaTag","backgroundColor","accent2_500","white","Logo","name","showBetaTag","onClick","to","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,iVAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,uYAQfJ,oBAAYC,MARG,CAAnB;;AAmBA,IAAMI,IAAI,GAAGF,0BAAOG,IAAV,
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,iVAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,uYAQfJ,oBAAYC,MARG,CAAnB;;AAmBA,IAAMI,IAAI,GAAGF,0BAAOG,IAAV,wNAGiB,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAAjC;AAAA,CAHjB,EAMN,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACW,oBAAN,GACH,mCAAkBC,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAApE,CADG,GAEH,oCAAmBE,2BAAmBC,OAAtC,EAA+Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAArE,CAFR;AAAA,CANM,EAUNR,oBAAYC,MAVN,EAWJ,UAACH,KAAD;AAAA,SAAW,mCAAkBY,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAApE,CAAX;AAAA,CAXI,CAAV;;AAeA,IAAMI,OAAO,GAAGT,0BAAOG,IAAV,sNACS,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACe,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAAChB,KAAD;AAAA,SAAW,oCAAmBY,2BAAmBK,aAAtC,EAAqDjB,KAAK,CAACC,KAAN,IAAeQ,eAAOS,KAA3E,CAAX;AAAA,CARS,CAAb;;AAsBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAqJ;AAAA,MAAlJC,IAAkJ,QAAlJA,IAAkJ;AAAA,MAA5IC,WAA4I,QAA5IA,WAA4I;AAAA,MAA/HC,QAA+H,QAA/HA,OAA+H;AAAA,MAAtHC,EAAsH,QAAtHA,EAAsH;AAAA,MAAlHtB,KAAkH,QAAlHA,KAAkH;AAAA,MAA3GU,oBAA2G,QAA3GA,oBAA2G;AAAA,MAArFa,sBAAqF,QAArFA,sBAAqF;AAAA,MAA7DC,YAA6D,QAA7DA,YAA6D;AAChK,sBACE,oBAAC,aAAD,qBACE,oBAAC,UAAD;AACE,IAAA,EAAE,EAAEF,EAAE,IAAI,GADZ;AAEE,IAAA,WAAW,EAAE,qBAACG,CAAD;AAAA,aAAYA,CAAC,CAACC,cAAF,EAAZ;AAAA,KAFf;AAGE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIL,QAAJ,EAAa;AACXA,QAAAA,QAAO;AACR;AACF,KAPH;AAQE,IAAA,KAAK,EAAErB;AART,KASGA,KAAK,KAAKQ,eAAOS,KAAjB,gBAAyB,oBAAC,wBAAD,OAAzB,gBAAgD,oBAAC,mBAAD,OATnD,eAUE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEjB,KAAb;AAAoB,IAAA,oBAAoB,EAAEU,oBAAoB,IAAI;AAAlE,KACGS,IADH,CAVF,EAaGC,WAAW,iBACV,oBAAC,OAAD;AAAS,IAAA,eAAe,EAAEG,sBAA1B;AAAkD,IAAA,KAAK,EAAEC;AAAzD,YAdJ,CADF,CADF;AAuBD,CAxBD;;;AAVEL,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAtB,EAAAA,K;AACAU,EAAAA,oB;AACAa,EAAAA,sB;AACAC,EAAAA,Y;;eA6BaN,I","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} from '../styles';\nimport {ComponentMStyling, ComponentXSStyling} from '../styles/typography';\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 align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ${BREAKPOINTS.MEDIUM} {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n }\n`;\n\nconst Name = styled.span<{ color?: string; noSizeChangeOnMobile: boolean }>`\n margin-left: 12px;\n padding-left: 12px;\n border-left: 1px solid ${(props) => props.color || COLORS.black};\n letter-spacing: -0.02em;\n\n ${(props) => props.noSizeChangeOnMobile\n ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)\n : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n\n ${BREAKPOINTS.MEDIUM} {\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; color?: string }>`\n background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n padding: 4px;\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};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n return (\n <LogoContainer>\n <StyledLink\n to={to || '/'}\n onMouseDown={(e: any) => e.preventDefault()}\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"],"file":"Logo.js"}
|
|
@@ -21,6 +21,8 @@ var _styles = require("../styles");
|
|
|
21
21
|
|
|
22
22
|
var _Button = require("../Button");
|
|
23
23
|
|
|
24
|
+
var _typography = require("../styles/typography");
|
|
25
|
+
|
|
24
26
|
var _templateObject, _templateObject2;
|
|
25
27
|
|
|
26
28
|
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); }
|
|
@@ -33,7 +35,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
33
35
|
|
|
34
36
|
var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n margin: auto 0 auto auto;\n align-items: center;\n height: 48px;\n\n ", " {\n height: 56px;\n }\n ", " {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM);
|
|
35
37
|
|
|
36
|
-
var SecondaryButton = (0, _styledComponents.default)(_Button.Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n
|
|
38
|
+
var SecondaryButton = (0, _styledComponents.default)(_Button.Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 40px;\n margin: 0 8px;\n\n ", "\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Bold, 'unset'));
|
|
37
39
|
|
|
38
40
|
var RightSideNav = function RightSideNav(_ref) {
|
|
39
41
|
var navigationOptions = _ref.navigationOptions,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","SMALL","MEDIUM","SecondaryButton","Button","RightSideNav","navigationOptions","secondaryButton","preventFocusOnClick","e","preventDefault","getNavItem","navOption","disabled","label","NavLink","exact","to","onClick","reverse","map","no","action"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAEA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,+SAMdC,oBAAYC,KANE,EASdD,oBAAYE,MATE,CAAlB;;AAqBA,IAAMC,eAAe,GAAG,+BAAOC,cAAP,CAAH,
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","SMALL","MEDIUM","SecondaryButton","Button","ComponentTextStyle","Bold","RightSideNav","navigationOptions","secondaryButton","preventFocusOnClick","e","preventDefault","getNavItem","navOption","disabled","label","NavLink","exact","to","onClick","reverse","map","no","action"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,+SAMdC,oBAAYC,KANE,EASdD,oBAAYE,MATE,CAAlB;;AAqBA,IAAMC,eAAe,GAAG,+BAAOC,cAAP,CAAH,uHAIjB,mCAAkBC,2BAAmBC,IAArC,EAA2C,OAA3C,CAJiB,CAArB;;AAYA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA8E;AAAA,MAA3EC,iBAA2E,QAA3EA,iBAA2E;AAAA,MAAxDC,eAAwD,QAAxDA,eAAwD;;AACjG,MAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD,EAAY;AACtCA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFD;;AAGA,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,SAAD,EAA0B;AAC3C,QAAIA,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEC,QAAf,EAAyB;AACvB,0BACE,oBAAC,gBAAD;AAAS,QAAA,EAAE,EAAEX,cAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAA0C,QAAA,GAAG,EAAEU,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEE;AAA1D,SACGF,SADH,aACGA,SADH,uBACGA,SAAS,CAAEE,KADd,CADF;AAKD,KAND,MAMO;AACL,0BACE,oBAAC,gBAAD;AACE,QAAA,EAAE,EAAEC,uBADN;AAEE,QAAA,KAAK,EAAEH,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEI,KAFpB;AAGE,QAAA,EAAE,EAAE,CAAAJ,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEK,EAAX,KAAiB,EAHvB;AAIE,QAAA,GAAG,EAAEL,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEE,KAJlB;AAKE,QAAA,WAAW,EAAEN,mBALf;AAME,QAAA,OAAO,EAAE,mBAAM;AACb,cAAII,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEM,OAAf,EAAwB;AACtBN,YAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEM,OAAX;AACD;AACF;AAVH,SAWGN,SAXH,aAWGA,SAXH,uBAWGA,SAAS,CAAEE,KAXd,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,oBAAC,YAAD,QACGR,iBADH,aACGA,iBADH,uBACGA,iBAAiB,CAAEa,OAAnB,GAA6BC,GAA7B,CAAiC,UAAAC,EAAE;AAAA,WAAIV,UAAU,CAACU,EAAD,CAAd;AAAA,GAAnC,CADH,EAGGd,eAAe,iBACd,oBAAC,eAAD;AAAiB,IAAA,OAAO,EAAC,WAAzB;AAAqC,IAAA,OAAO,EAAEA,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEe;AAA/D,KACGf,eAAe,CAACO,KADnB,CAJJ,CADF;AAWD,CAxCD;;;AAJER,EAAAA,iB;;eA8CaD,Y","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst NavContainer = styled.div`\n display: flex;\n margin: auto 0 auto auto;\n align-items: center;\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n ${BREAKPOINTS.MEDIUM} {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n`;\n\nconst SecondaryButton = styled(Button)`\n height: 40px;\n margin: 0 8px;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n navigationOptions?: NavOption[];\n secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n const preventFocusOnClick = (e: any) => {\n e.preventDefault();\n };\n const getNavItem = (navOption: NavOption) => {\n if (navOption?.disabled) {\n return (\n <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n {navOption?.label}\n </NavItem>\n );\n } else {\n return (\n <NavItem\n as={NavLink}\n exact={navOption?.exact}\n to={navOption?.to || ''}\n key={navOption?.label}\n onMouseDown={preventFocusOnClick}\n onClick={() => {\n if (navOption?.onClick) {\n navOption?.onClick();\n }\n }}>\n {navOption?.label}\n </NavItem>\n );\n }\n };\n return (\n <NavContainer>\n {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n {secondaryButton && (\n <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n {secondaryButton.label}\n </SecondaryButton>\n )}\n </NavContainer>\n );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}
|
|
@@ -19,6 +19,8 @@ var _styles = require("../../styles");
|
|
|
19
19
|
|
|
20
20
|
var _SystemIcons = require("../../icons/systemicons/SystemIcons");
|
|
21
21
|
|
|
22
|
+
var _typography = require("../../styles/typography");
|
|
23
|
+
|
|
22
24
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
23
25
|
|
|
24
26
|
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); }
|
|
@@ -29,7 +31,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
29
31
|
|
|
30
32
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
31
33
|
|
|
32
|
-
var LinkStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: none;\n background: transparent;\n padding: 16px 25px;\n\n
|
|
34
|
+
var LinkStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: none;\n background: transparent;\n padding: 16px 25px;\n\n text-decoration: none;\n text-align: left;\n align-items: center;\n display: flex;\n\n ", "\n svg {\n margin-right: 15px;\n color: ", ";\n }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.COLORS.neutral_600);
|
|
33
35
|
var InternalLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n"])), LinkStyles);
|
|
34
36
|
|
|
35
37
|
var ExternalLink = _styledComponents.default.a(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", ";\n"])), LinkStyles);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["LinkStyles","css","
|
|
1
|
+
{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["LinkStyles","css","ComponentTextStyle","Regular","COLORS","neutral_600","InternalLink","NavLink","ExternalLink","styled","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,OAAGC,qBAAH,2SAUZ,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAVY,EAaHD,eAAOC,WAbJ,CAAhB;AAiBA,IAAMC,YAAY,GAAG,+BAAOC,uBAAP,CAAH,mFACdP,UADc,CAAlB;;AAIA,IAAMQ,YAAY,GAAGC,0BAAOC,CAAV,mFACdV,UADc,CAAlB;;AAIA,IAAMW,cAAc,GAAGF,0BAAOG,GAAV,4JAApB;;AAkBA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAA4F;AAAA,MAAzFC,EAAyF,QAAzFA,EAAyF;AAAA,MAArFC,UAAqF,QAArFA,UAAqF;AAAA,MAAzEC,QAAyE,QAAzEA,QAAyE;AAAA,MAA/DC,IAA+D,QAA/DA,IAA+D;AAAA,MAAzDC,YAAyD,QAAzDA,YAAyD;AAAA,MAA3CC,YAA2C,QAA3CA,YAA2C;AAAA,MAA7BC,QAA6B,QAA7BA,OAA6B;;AAC3G,MAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,wBACnB,oBAAC,cAAD,QACGH,YAAY,gBAAG,oBAAC,mBAAD;AAAQ,MAAA,IAAI,EAAC,MAAb;AAAoB,MAAA,KAAK,EAAEd,eAAOkB;AAAlC,MAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,oBAAC,yBAAD;AAAc,MAAA,IAAI,EAAC,MAAnB;AAA0B,MAAA,KAAK,EAAEf,eAAOC;AAAxC,MAAH,GAA6D,IAF5E,CADmB;AAAA,GAArB;;AAMA,sBACE,gCACGU,UAAU,gBACT,oBAAC,YAAD;AACE,IAAA,GAAG,yBAAkBD,EAAlB,CADL;AAEE,IAAA,IAAI,EAAEA,EAFR;AAGE,IAAA,IAAI,EAAC,UAHP;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIM,QAAJ,EAAa;AACXA,QAAAA,QAAO;AACR;AACF;AATH,KAUGH,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,IAVX,eAWE,kCAAOD,QAAP,CAXF,EAYGK,YAAY,EAZf,CADS,gBAgBT,oBAAC,YAAD;AACE,IAAA,GAAG,yBAAkBP,EAAlB,CADL;AAEE,IAAA,EAAE,EAAEA,EAFN;AAGE,IAAA,IAAI,EAAC,UAHP;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIM,QAAJ,EAAa;AACXA,QAAAA,QAAO;AACR;AACF;AATH,KAUGH,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,IAVX,eAWE,kCAAOD,QAAP,CAXF,EAYGK,YAAY,EAZf,CAjBJ,CADF;AAmCD,CA1CD;;;AATEP,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;eA+CaP,Q","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\n\nconst LinkStyles = css`\n border: none;\n background: transparent;\n padding: 16px 25px;\n\n text-decoration: none;\n text-align: left;\n align-items: center;\n display: flex;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n svg {\n margin-right: 15px;\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst InternalLink = styled(NavLink)`\n ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n margin: 0 0 0 auto;\n align-items: center;\n svg {\n margin-right: 0;\n }\n`;\n\ninterface MenuLinkProps {\n to: string;\n menuText: string;\n isExternal?: boolean;\n Icon?: any;\n notification?: boolean;\n extendedMenu?: boolean;\n onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n const getRightSide = () => (\n <IconsRightSide>\n {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n </IconsRightSide>\n );\n return (\n <li>\n {isExternal ? (\n <ExternalLink\n key={`ExternalLink_${to}`}\n href={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </ExternalLink>\n ) : (\n <InternalLink\n key={`InternalLink_${to}`}\n to={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </InternalLink>\n )}\n </li>\n );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.js"}
|
|
@@ -23,6 +23,8 @@ var _SystemIcons = require("../../icons/systemicons/SystemIcons");
|
|
|
23
23
|
|
|
24
24
|
var _CommonStyles = require("../mobile/CommonStyles");
|
|
25
25
|
|
|
26
|
+
var _typography = require("../../styles/typography");
|
|
27
|
+
|
|
26
28
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
27
29
|
|
|
28
30
|
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); }
|
|
@@ -39,11 +41,11 @@ var MenuSection = _styledComponents.default.li(_templateObject2 || (_templateObj
|
|
|
39
41
|
|
|
40
42
|
var MenuSectionList = _styledComponents.default.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n list-style: none;\n margin: 0;\n overflow-y: unset !important;\n padding-inline-start: 0;\n ", ";\n"])), _CommonStyles.UserMenuSectionListStyling);
|
|
41
43
|
|
|
42
|
-
var Top = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 22px 12px 0 12px;\n color: ", ";\n\n h3 {\n margin-block-start: 0 !important;\n margin-block-end: 0 !important;\n margin-inline-start:
|
|
44
|
+
var Top = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 22px 12px 0 12px;\n color: ", ";\n\n h3 {\n margin-block-start: 0 !important;\n margin-block-end: 0 !important;\n margin-inline-start: 0;\n margin-inline-end: 0;\n margin-left: 24px;\n\n ", "\n }\n"])), _styles.COLORS.neutral_600, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'));
|
|
43
45
|
|
|
44
46
|
var LabelLine = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n height: 32px;\n background-color: ", ";\n padding-left: 24px;\n display: flex;\n line-height: 32px;\n"])), _styles.COLORS.neutral_20);
|
|
45
47
|
|
|
46
|
-
var StyledMenulink = (0, _styledComponents.default)(_MenuLink.default)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: 100%;\n height: 48px;\n margin: 0;\n
|
|
48
|
+
var StyledMenulink = (0, _styledComponents.default)(_MenuLink.default)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: 100%;\n height: 48px;\n margin: 0;\n \n & a {\n height: 100%;\n }\n"])));
|
|
47
49
|
|
|
48
50
|
var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
49
51
|
var accountMenuHeader = _ref.accountMenuHeader,
|