@laerdal/life-react-components 1.4.1-dev.8.full → 1.5.1-dev.1
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/Accordion/AccordionItem.cjs +77 -0
- package/dist/Accordion/AccordionItem.cjs.map +1 -0
- package/dist/Accordion/AccordionItem.d.ts +2 -0
- package/dist/Accordion/AccordionItem.js +8 -7
- package/dist/Accordion/AccordionItem.js.map +1 -1
- package/dist/Accordion/AccordionMenu.cjs +105 -0
- package/dist/Accordion/AccordionMenu.cjs.map +1 -0
- package/dist/Accordion/AccordionMenu.d.ts +2 -0
- package/dist/Accordion/AccordionMenu.js +8 -2
- package/dist/Accordion/AccordionMenu.js.map +1 -1
- package/dist/Accordion/ContentAccordion.cjs +172 -0
- package/dist/Accordion/ContentAccordion.cjs.map +1 -0
- package/dist/Accordion/index.cjs +38 -0
- package/dist/Accordion/index.cjs.map +1 -0
- package/dist/Accordion/styles.cjs +45 -0
- package/dist/Accordion/styles.cjs.map +1 -0
- package/dist/Accordion/styles.d.ts +5 -5
- package/dist/Accordion/styles.js +9 -10
- package/dist/Accordion/styles.js.map +1 -1
- package/dist/AuthPage/AuthPage.cjs +80 -0
- package/dist/AuthPage/AuthPage.cjs.map +1 -0
- package/dist/AuthPage/Information.cjs +42 -0
- package/dist/AuthPage/Information.cjs.map +1 -0
- package/dist/AuthPage/ScreenSetsContainer.cjs +25 -0
- package/dist/AuthPage/ScreenSetsContainer.cjs.map +1 -0
- package/dist/AuthPage/_AuthPageSection.cjs +22 -0
- package/dist/AuthPage/_AuthPageSection.cjs.map +1 -0
- package/dist/AuthPage/index.cjs +64 -0
- package/dist/AuthPage/index.cjs.map +1 -0
- package/dist/AuthPage/screenSetsErrorMessages.cjs +13 -0
- package/dist/AuthPage/screenSetsErrorMessages.cjs.map +1 -0
- package/dist/Banners/Banner.cjs +190 -0
- package/dist/Banners/Banner.cjs.map +1 -0
- package/dist/Banners/Banner.d.ts +1 -0
- package/dist/Banners/Banner.js +84 -189
- package/dist/Banners/Banner.js.map +1 -1
- package/dist/Banners/OverviewBanner.cjs +55 -0
- package/dist/Banners/OverviewBanner.cjs.map +1 -0
- package/dist/Banners/index.cjs +24 -0
- package/dist/Banners/index.cjs.map +1 -0
- package/dist/Banners/styles.cjs +73 -0
- package/dist/Banners/styles.cjs.map +1 -0
- package/dist/Banners/styles.js +44 -7
- package/dist/Banners/styles.js.map +1 -1
- package/dist/Breadcrumb/Breadcrumb.cjs +169 -0
- package/dist/Breadcrumb/Breadcrumb.cjs.map +1 -0
- package/dist/Breadcrumb/BreadcrumbItem.cjs +6 -0
- package/dist/Breadcrumb/BreadcrumbItem.cjs.map +1 -0
- package/dist/Breadcrumb/index.cjs +16 -0
- package/dist/Breadcrumb/index.cjs.map +1 -0
- package/dist/Button/BackButton.cjs +75 -0
- package/dist/Button/BackButton.cjs.map +1 -0
- package/dist/Button/Button.cjs +266 -0
- package/dist/Button/Button.cjs.map +1 -0
- package/dist/Button/Button.js +27 -101
- package/dist/Button/Button.js.map +1 -1
- package/dist/Button/DualFunctionButton.cjs +162 -0
- package/dist/Button/DualFunctionButton.cjs.map +1 -0
- package/dist/Button/Iconbutton.cjs +195 -0
- package/dist/Button/Iconbutton.cjs.map +1 -0
- package/dist/Button/Iconbutton.d.ts +13 -0
- package/dist/Button/Iconbutton.js +2 -2
- package/dist/Button/Iconbutton.js.map +1 -1
- package/dist/Button/index.cjs +40 -0
- package/dist/Button/index.cjs.map +1 -0
- package/dist/Chips/ActionChip.cjs +81 -0
- package/dist/Chips/ActionChip.cjs.map +1 -0
- package/dist/Chips/ChipInput.cjs +199 -0
- package/dist/Chips/ChipInput.cjs.map +1 -0
- package/dist/Chips/ChipStyles.cjs +43 -0
- package/dist/Chips/ChipStyles.cjs.map +1 -0
- package/dist/Chips/ChipTypes.cjs +6 -0
- package/dist/Chips/ChipTypes.cjs.map +1 -0
- package/dist/Chips/ChoiceChips.cjs +94 -0
- package/dist/Chips/ChoiceChips.cjs.map +1 -0
- package/dist/Chips/FilterChip.cjs +81 -0
- package/dist/Chips/FilterChip.cjs.map +1 -0
- package/dist/Chips/InputChip.cjs +109 -0
- package/dist/Chips/InputChip.cjs.map +1 -0
- package/dist/Chips/index.cjs +48 -0
- package/dist/Chips/index.cjs.map +1 -0
- package/dist/Dropdown/BasicDropdown.cjs +300 -0
- package/dist/Dropdown/BasicDropdown.cjs.map +1 -0
- package/dist/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/Dropdown/ChipDropdownInput.cjs +431 -0
- package/dist/Dropdown/ChipDropdownInput.cjs.map +1 -0
- package/dist/Dropdown/ChipDropdownInput.js +2 -4
- package/dist/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/Dropdown/CommonStyling.cjs +81 -0
- package/dist/Dropdown/CommonStyling.cjs.map +1 -0
- package/dist/Dropdown/CommonStyling.d.ts +0 -5
- package/dist/Dropdown/CommonStyling.js +3 -10
- package/dist/Dropdown/CommonStyling.js.map +1 -1
- package/dist/Dropdown/DropdownButton.cjs +161 -0
- package/dist/Dropdown/DropdownButton.cjs.map +1 -0
- package/dist/Dropdown/DropdownButtonTypes.cjs +6 -0
- package/dist/Dropdown/DropdownButtonTypes.cjs.map +1 -0
- package/dist/Dropdown/DropdownContent.cjs +566 -0
- package/dist/Dropdown/DropdownContent.cjs.map +1 -0
- package/dist/Dropdown/DropdownContent.js +19 -54
- package/dist/Dropdown/DropdownContent.js.map +1 -1
- package/dist/Dropdown/DropdownFilter.cjs +357 -0
- package/dist/Dropdown/DropdownFilter.cjs.map +1 -0
- package/dist/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/Dropdown/index.cjs +40 -0
- package/dist/Dropdown/index.cjs.map +1 -0
- package/dist/Dropdown/index.d.ts +1 -0
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Footer/Components/FooterBottomLinks.cjs +69 -0
- package/dist/Footer/Components/FooterBottomLinks.cjs.map +1 -0
- package/dist/Footer/Components/FooterDropdownLinks.cjs +91 -0
- package/dist/Footer/Components/FooterDropdownLinks.cjs.map +1 -0
- package/dist/Footer/Components/FooterNavSection.cjs +90 -0
- package/dist/Footer/Components/FooterNavSection.cjs.map +1 -0
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs +129 -0
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map +1 -0
- package/dist/Footer/Components/FooterTop.cjs +91 -0
- package/dist/Footer/Components/FooterTop.cjs.map +1 -0
- package/dist/Footer/Footer.cjs +41 -0
- package/dist/Footer/Footer.cjs.map +1 -0
- package/dist/Footer/SiteFooter.cjs +89 -0
- package/dist/Footer/SiteFooter.cjs.map +1 -0
- package/dist/Footer/index.cjs +24 -0
- package/dist/Footer/index.cjs.map +1 -0
- package/dist/GlobalNavigationBar/Actions.cjs +185 -0
- package/dist/GlobalNavigationBar/Actions.cjs.map +1 -0
- package/dist/GlobalNavigationBar/Avatar.cjs +106 -0
- package/dist/GlobalNavigationBar/Avatar.cjs.map +1 -0
- package/dist/GlobalNavigationBar/ExtendedMainMenu.cjs +100 -0
- package/dist/GlobalNavigationBar/ExtendedMainMenu.cjs.map +1 -0
- package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs +303 -0
- package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map +1 -0
- package/dist/GlobalNavigationBar/Logo.cjs +102 -0
- package/dist/GlobalNavigationBar/Logo.cjs.map +1 -0
- package/dist/GlobalNavigationBar/MainMenu.cjs +169 -0
- package/dist/GlobalNavigationBar/MainMenu.cjs.map +1 -0
- package/dist/GlobalNavigationBar/RightSideNav.cjs +89 -0
- package/dist/GlobalNavigationBar/RightSideNav.cjs.map +1 -0
- package/dist/GlobalNavigationBar/UserMenu/MenuLink.cjs +108 -0
- package/dist/GlobalNavigationBar/UserMenu/MenuLink.cjs.map +1 -0
- package/dist/GlobalNavigationBar/UserMenu/MobileUserMenu.cjs +176 -0
- package/dist/GlobalNavigationBar/UserMenu/MobileUserMenu.cjs.map +1 -0
- package/dist/GlobalNavigationBar/UserMenu/UserMenu.cjs +168 -0
- package/dist/GlobalNavigationBar/UserMenu/UserMenu.cjs.map +1 -0
- package/dist/GlobalNavigationBar/index.cjs +36 -0
- package/dist/GlobalNavigationBar/index.cjs.map +1 -0
- package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs +71 -0
- package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map +1 -0
- package/dist/GlobalNavigationBar/mobile/ExitMenuButton.cjs +49 -0
- package/dist/GlobalNavigationBar/mobile/ExitMenuButton.cjs.map +1 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionMenu.cjs +91 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionMenu.cjs.map +1 -0
- package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs +290 -0
- package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs.map +1 -0
- package/dist/HyperLink/HyperLink.cjs +72 -0
- package/dist/HyperLink/HyperLink.cjs.map +1 -0
- package/dist/HyperLink/index.cjs +30 -0
- package/dist/HyperLink/index.cjs.map +1 -0
- package/dist/HyperLink/styling.cjs +22 -0
- package/dist/HyperLink/styling.cjs.map +1 -0
- package/dist/InputFields/Checkbox.cjs +126 -0
- package/dist/InputFields/Checkbox.cjs.map +1 -0
- package/dist/InputFields/Checkbox.d.ts +1 -0
- package/dist/InputFields/Checkbox.js +5 -3
- package/dist/InputFields/Checkbox.js.map +1 -1
- package/dist/InputFields/DatepickerField.cjs +252 -0
- package/dist/InputFields/DatepickerField.cjs.map +1 -0
- package/dist/InputFields/DatepickerFieldHeader.cjs +107 -0
- package/dist/InputFields/DatepickerFieldHeader.cjs.map +1 -0
- package/dist/InputFields/Label.cjs +104 -0
- package/dist/InputFields/Label.cjs.map +1 -0
- package/dist/InputFields/PasswordField.cjs +150 -0
- package/dist/InputFields/PasswordField.cjs.map +1 -0
- package/dist/InputFields/QuickSearch.cjs +201 -0
- package/dist/InputFields/QuickSearch.cjs.map +1 -0
- package/dist/InputFields/RadioButton.cjs +114 -0
- package/dist/InputFields/RadioButton.cjs.map +1 -0
- package/dist/InputFields/RadioButton.d.ts +1 -0
- package/dist/InputFields/RadioButton.js +5 -3
- package/dist/InputFields/RadioButton.js.map +1 -1
- package/dist/InputFields/ResponsiveComponentWrapper.cjs +72 -0
- package/dist/InputFields/ResponsiveComponentWrapper.cjs.map +1 -0
- package/dist/InputFields/SearchBar.cjs +146 -0
- package/dist/InputFields/SearchBar.cjs.map +1 -0
- package/dist/InputFields/TextField.cjs +126 -0
- package/dist/InputFields/TextField.cjs.map +1 -0
- package/dist/InputFields/Textarea.cjs +96 -0
- package/dist/InputFields/Textarea.cjs.map +1 -0
- package/dist/InputFields/components/SearchBarInput.cjs +99 -0
- package/dist/InputFields/components/SearchBarInput.cjs.map +1 -0
- package/dist/InputFields/components/SearchField.cjs +71 -0
- package/dist/InputFields/components/SearchField.cjs.map +1 -0
- package/dist/InputFields/index.cjs +80 -0
- package/dist/InputFields/index.cjs.map +1 -0
- package/dist/InputFields/styling.cjs +76 -0
- package/dist/InputFields/styling.cjs.map +1 -0
- package/dist/Layouts/index.cjs +56 -0
- package/dist/Layouts/index.cjs.map +1 -0
- package/dist/List/ListRow.cjs +143 -0
- package/dist/List/ListRow.cjs.map +1 -0
- package/dist/List/index.cjs +16 -0
- package/dist/List/index.cjs.map +1 -0
- package/dist/LoadingIndicator/LoadingIndicator.cjs +71 -0
- package/dist/LoadingIndicator/LoadingIndicator.cjs.map +1 -0
- package/dist/LoadingIndicator/index.cjs +16 -0
- package/dist/LoadingIndicator/index.cjs.map +1 -0
- package/dist/LoadingPage/GlobalLoadingPage.cjs +66 -0
- package/dist/LoadingPage/GlobalLoadingPage.cjs.map +1 -0
- package/dist/LoadingPage/index.cjs +16 -0
- package/dist/LoadingPage/index.cjs.map +1 -0
- package/dist/MenuItem/MenuItem.cjs +104 -0
- package/dist/MenuItem/MenuItem.cjs.map +1 -0
- package/dist/MenuItem/MenuItem.d.ts +21 -0
- package/dist/MenuItem/MenuItem.js +64 -0
- package/dist/MenuItem/MenuItem.js.map +1 -0
- package/dist/MiniProductCard/MiniProductCard.cjs +80 -0
- package/dist/MiniProductCard/MiniProductCard.cjs.map +1 -0
- package/dist/MiniProductCard/index.cjs +16 -0
- package/dist/MiniProductCard/index.cjs.map +1 -0
- package/dist/Modals/Modal.cjs +92 -0
- package/dist/Modals/Modal.cjs.map +1 -0
- package/dist/Modals/ModalContainer.cjs +176 -0
- package/dist/Modals/ModalContainer.cjs.map +1 -0
- package/dist/Modals/ModalContainer.js +1 -1
- package/dist/Modals/ModalContainer.js.map +1 -1
- package/dist/Modals/ModalDialog.cjs +363 -0
- package/dist/Modals/ModalDialog.cjs.map +1 -0
- package/dist/Modals/ModalDialog.d.ts +1 -0
- package/dist/Modals/ModalDialog.js +16 -2
- package/dist/Modals/ModalDialog.js.map +1 -1
- package/dist/Modals/ModalNote.cjs +93 -0
- package/dist/Modals/ModalNote.cjs.map +1 -0
- package/dist/Modals/ModalStyles.cjs +154 -0
- package/dist/Modals/ModalStyles.cjs.map +1 -0
- package/dist/Modals/ModalStyles.js +1 -1
- package/dist/Modals/ModalStyles.js.map +1 -1
- package/dist/Modals/ModalTypes.cjs +6 -0
- package/dist/Modals/ModalTypes.cjs.map +1 -0
- package/dist/Modals/index.cjs +70 -0
- package/dist/Modals/index.cjs.map +1 -0
- package/dist/Modals/index.d.ts +1 -0
- package/dist/Modals/index.js.map +1 -1
- package/dist/NavItem/NavItem.cjs +26 -0
- package/dist/NavItem/NavItem.cjs.map +1 -0
- package/dist/NavItem/index.cjs +16 -0
- package/dist/NavItem/index.cjs.map +1 -0
- package/dist/NotificationDot/NotificationDot.cjs +74 -0
- package/dist/NotificationDot/NotificationDot.cjs.map +1 -0
- package/dist/NotificationDot/index.cjs +16 -0
- package/dist/NotificationDot/index.cjs.map +1 -0
- package/dist/Paginator/Paginator.cjs +191 -0
- package/dist/Paginator/Paginator.cjs.map +1 -0
- package/dist/Paginator/index.cjs +16 -0
- package/dist/Paginator/index.cjs.map +1 -0
- package/dist/QuizButton/QuizButton.cjs +150 -0
- package/dist/QuizButton/QuizButton.cjs.map +1 -0
- package/dist/QuizButton/QuizButton.d.ts +15 -0
- package/dist/QuizButton/QuizButton.js +126 -0
- package/dist/QuizButton/QuizButton.js.map +1 -0
- package/dist/QuizButton/index.cjs +16 -0
- package/dist/QuizButton/index.cjs.map +1 -0
- package/dist/QuizButton/index.d.ts +1 -0
- package/dist/QuizButton/index.js +2 -0
- package/dist/QuizButton/index.js.map +1 -0
- package/dist/Services/functions.cjs +19 -0
- package/dist/Services/functions.cjs.map +1 -0
- package/dist/SkipToContent/SkipToContent.cjs +46 -0
- package/dist/SkipToContent/SkipToContent.cjs.map +1 -0
- package/dist/SkipToContent/index.cjs +16 -0
- package/dist/SkipToContent/index.cjs.map +1 -0
- package/dist/Switcher/MobileSwitcherMenu.cjs +120 -0
- package/dist/Switcher/MobileSwitcherMenu.cjs.map +1 -0
- package/dist/Switcher/SwitcherMenuItem.cjs +62 -0
- package/dist/Switcher/SwitcherMenuItem.cjs.map +1 -0
- package/dist/Switcher/index.cjs +24 -0
- package/dist/Switcher/index.cjs.map +1 -0
- package/dist/Table/Table.cjs +463 -0
- package/dist/Table/Table.cjs.map +1 -0
- package/dist/Table/TableBody.cjs +186 -0
- package/dist/Table/TableBody.cjs.map +1 -0
- package/dist/Table/TableFooter.cjs +119 -0
- package/dist/Table/TableFooter.cjs.map +1 -0
- package/dist/Table/TableHeaders.cjs +100 -0
- package/dist/Table/TableHeaders.cjs.map +1 -0
- package/dist/Table/TableStyles.cjs +104 -0
- package/dist/Table/TableStyles.cjs.map +1 -0
- package/dist/Table/TableTypes.cjs +6 -0
- package/dist/Table/TableTypes.cjs.map +1 -0
- package/dist/Table/index.cjs +16 -0
- package/dist/Table/index.cjs.map +1 -0
- package/dist/Table/index.d.ts +1 -0
- package/dist/Table/index.js.map +1 -1
- package/dist/Tabs/HorizontalTabs.cjs +98 -0
- package/dist/Tabs/HorizontalTabs.cjs.map +1 -0
- package/dist/Tabs/HorizontalTabs.d.ts +1 -1
- package/dist/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/Tabs/TabLink.cjs +128 -0
- package/dist/Tabs/TabLink.cjs.map +1 -0
- package/dist/Tabs/Tabs.cjs +121 -0
- package/dist/Tabs/Tabs.cjs.map +1 -0
- package/dist/Tabs/VerticalTabs.cjs +68 -0
- package/dist/Tabs/VerticalTabs.cjs.map +1 -0
- package/dist/Tabs/index.cjs +24 -0
- package/dist/Tabs/index.cjs.map +1 -0
- package/dist/Tabs/index.d.ts +2 -0
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Toasters/Toast.cjs +289 -0
- package/dist/Toasters/Toast.cjs.map +1 -0
- package/dist/Toasters/ToastContext.cjs +179 -0
- package/dist/Toasters/ToastContext.cjs.map +1 -0
- package/dist/Toasters/index.cjs +36 -0
- package/dist/Toasters/index.cjs.map +1 -0
- package/dist/Toggles/ToggleSwitch.cjs +73 -0
- package/dist/Toggles/ToggleSwitch.cjs.map +1 -0
- package/dist/Toggles/TogglerStyles.cjs +39 -0
- package/dist/Toggles/TogglerStyles.cjs.map +1 -0
- package/dist/Toggles/TogglerTypes.cjs +6 -0
- package/dist/Toggles/TogglerTypes.cjs.map +1 -0
- package/dist/Toggles/index.cjs +16 -0
- package/dist/Toggles/index.cjs.map +1 -0
- package/dist/Tooltips/TooltipStyles.cjs +96 -0
- package/dist/Tooltips/TooltipStyles.cjs.map +1 -0
- package/dist/Tooltips/TooltipTypes.cjs +11 -0
- package/dist/Tooltips/TooltipTypes.cjs.map +1 -0
- package/dist/Tooltips/TooltipWrapper.cjs +51 -0
- package/dist/Tooltips/TooltipWrapper.cjs.map +1 -0
- package/dist/Tooltips/index.cjs +36 -0
- package/dist/Tooltips/index.cjs.map +1 -0
- package/dist/Tooltips/index.d.ts +2 -2
- package/dist/Tooltips/index.js +2 -2
- package/dist/Tooltips/index.js.map +1 -1
- package/dist/assets/index.cjs +173 -0
- package/dist/assets/index.cjs.map +1 -0
- package/dist/common/EventHandlers.cjs +20 -0
- package/dist/common/EventHandlers.cjs.map +1 -0
- package/dist/common/FocusVisible.cjs +77 -0
- package/dist/common/FocusVisible.cjs.map +1 -0
- package/dist/common/InputStyling.cjs +20 -0
- package/dist/common/InputStyling.cjs.map +1 -0
- package/dist/common/index.cjs +30 -0
- package/dist/common/index.cjs.map +1 -0
- package/dist/common/index.d.ts +1 -0
- package/dist/common/index.js +1 -0
- package/dist/common/index.js.map +1 -1
- package/dist/hooks/useClickOutside.cjs +35 -0
- package/dist/hooks/useClickOutside.cjs.map +1 -0
- package/dist/icons/contenticons/ContentIcons.cjs +4530 -0
- package/dist/icons/contenticons/ContentIcons.cjs.map +1 -0
- package/dist/icons/index.cjs +147 -0
- package/dist/icons/index.cjs.map +1 -0
- package/dist/icons/systemicons/SystemIcons.cjs +4134 -0
- package/dist/icons/systemicons/SystemIcons.cjs.map +1 -0
- package/dist/index.cjs +422 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/styles/breakpoints.cjs +16 -0
- package/dist/styles/breakpoints.cjs.map +1 -0
- package/dist/styles/colors.cjs +108 -0
- package/dist/styles/colors.cjs.map +1 -0
- package/dist/styles/global.cjs +15 -0
- package/dist/styles/global.cjs.map +1 -0
- package/dist/styles/index.cjs +288 -0
- package/dist/styles/index.cjs.map +1 -0
- package/dist/styles/index.d.ts +1 -0
- package/dist/styles/index.js +1 -0
- package/dist/styles/index.js.map +1 -1
- package/dist/styles/shadowstyles.cjs +14 -0
- package/dist/styles/shadowstyles.cjs.map +1 -0
- package/dist/styles/typography.cjs +640 -0
- package/dist/styles/typography.cjs.map +1 -0
- package/dist/styles/z-indexes.cjs +22 -0
- package/dist/styles/z-indexes.cjs.map +1 -0
- package/dist/types.cjs +59 -0
- package/dist/types.cjs.map +1 -0
- package/package.json +13 -5
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
+
import _pt from "prop-types";
|
|
3
|
+
|
|
4
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
5
|
+
|
|
6
|
+
import * as React from 'react';
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { Checkbox, COLORS, RadioButton, Size, SystemIcons } from '..';
|
|
9
|
+
import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
|
|
10
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
var TextContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-radius: 0 8px 8px 0;\n display: flex;\n background: ", ";\n width: 100%;\n\n transition: background 100ms ease-in-out;\n align-items: center;\n\n padding: ", ";\n ", "\n"])), COLORS.accent1_20, function (props) {
|
|
13
|
+
return props.size === Size.Small ? '6px 8px' : props.size === Size.Large ? '20px 16px' : '12px 16px';
|
|
14
|
+
}, function (props) {
|
|
15
|
+
return props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null);
|
|
16
|
+
});
|
|
17
|
+
var TextWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
|
|
18
|
+
var ButtonContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n border-radius: 8px 0 0 8px;\n display: flex;\n background: ", ";\n\n width: ", ";\n\n transition: background 100ms ease-in-out;\n\n .quiz-button-result-icon {\n height: ", ";\n width: ", ";\n }\n\n .radio-button-icon, .checkbox-icon {\n margin: auto;\n min-width: unset;\n background: transparent;\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: transparent;\n }\n\n &:focus {\n background: transparent;\n }\n\n &:active {\n background: transparent;\n }\n }\n\n .small {\n min-width: 32px;\n min-height: 32px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 16px;\n width: 16px;\n }\n }\n }\n\n .medium {\n min-width: 48px;\n min-height: 48px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .large {\n min-width: 64px;\n min-height: 64px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 32px;\n width: 32px;\n }\n }\n }\n"])), COLORS.accent1_100, function (props) {
|
|
19
|
+
return props.size === Size.Small ? '32px' : props.size === Size.Large ? '64px' : '48px';
|
|
20
|
+
}, function (props) {
|
|
21
|
+
return props.size === Size.Small ? '16px' : props.size === Size.Large ? '32px' : '24px';
|
|
22
|
+
}, function (props) {
|
|
23
|
+
return props.size === Size.Small ? '32px' : props.size === Size.Large ? '64px' : '48px';
|
|
24
|
+
}, COLORS.accent1_600);
|
|
25
|
+
var OptionContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n cursor: pointer;\n max-width: 65ch; \n word-break: break-word;\n\n min-height: ", ";\n margin-bottom: ", ";\n\n &.selected {\n ", " {\n background: ", ";\n }\n ", " {\n background: ", ";\n }\n }\n \n &.disabled {\n cursor: not-allowed;\n \n ", " {\n pointer-events: none;\n background: ", ";\n }\n ", " {\n pointer-events: none;\n background: ", ";\n color: ", ";\n }\n\n .radio-button-icon, .checkbox-icon {\n background: transparent;\n }\n }\n\n &.correct {\n ", " { \n background: ", ";\n }\n ", " {\n background: ", ";\n svg {\n margin: auto;\n }\n }\n }\n\n &.incorrect {\n ", " { \n background: ", ";\n }\n ", " {\n background: ", ";\n svg {\n margin: auto;\n }\n }\n }\n\n &.partial {\n ", " { \n background: ", ";\n }\n ", " {\n background: ", ";\n svg {\n margin: auto;\n }\n }\n } \n\n &:hover,\n &.hover-state {\n .radio-button-icon, .checkbox-icon {\n background: transparent;\n }\n }\n\n &:focus,\n &.focus-state {\n box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n border-radius: 8px;\n outline: none;\n\n .radio-button-icon, .checkbox-icon {\n background: transparent;\n }\n }\n\n &:active,\n &.active-state {\n .radio-button-icon, .checkbox-icon {\n background: transparent;\n }\n }\n\n &:hover:not(.disabled):not(.result),\n &.hover-state {\n ", " {\n background: ", ";\n }\n ", " {\n background: ", ";\n }\n \n .radio-button-icon, .checkbox-icon {\n background: transparent;\n svg {\n color: ", ";\n }\n }\n }\n\n &:focus:not(.disabled):not(.result),\n &.focus-state {\n ", " {\n background: ", ";\n }\n ", " {\n background: ", ";\n }\n\n .radio-button-icon, .checkbox-icon {\n background: transparent;\n }\n }\n\n &:active:not(.disabled):not(.result),\n &.active-state {\n ", " {\n background: ", ";\n transition: none;\n }\n ", " {\n background: ", ";\n transition: none;\n }\n\n .radio-button-icon, .checkbox-icon {\n background: transparent;\n svg {\n color: ", ";\n }\n }\n }\n"])), function (props) {
|
|
26
|
+
return props.size === Size.Small ? '32px' : props.size === Size.Large ? '64px' : '48px';
|
|
27
|
+
}, function (props) {
|
|
28
|
+
return props.size === Size.Small ? '16px' : props.size === Size.Large ? '32px' : '24px';
|
|
29
|
+
}, TextContainer, COLORS.accent1_100, ButtonContainer, COLORS.accent1_200, ButtonContainer, COLORS.neutral_100, TextContainer, COLORS.neutral_20, COLORS.neutral_300, TextContainer, COLORS.correct_20, ButtonContainer, COLORS.correct_400, TextContainer, COLORS.critical_20, ButtonContainer, COLORS.critical_500, TextContainer, COLORS.warning_20, ButtonContainer, COLORS.warning_400, COLORS.focus_25, COLORS.focus, ButtonContainer, COLORS.accent1_300, TextContainer, function (props) {
|
|
30
|
+
return props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100;
|
|
31
|
+
}, COLORS.accent1_700, ButtonContainer, function (props) {
|
|
32
|
+
return props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100;
|
|
33
|
+
}, TextContainer, function (props) {
|
|
34
|
+
return props.isSelected ? COLORS.accent1_100 : COLORS.accent1_20;
|
|
35
|
+
}, ButtonContainer, COLORS.accent1_400, TextContainer, function (props) {
|
|
36
|
+
return props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200;
|
|
37
|
+
}, COLORS.accent1_800);
|
|
38
|
+
|
|
39
|
+
var renderResultContent = function renderResultContent(resultType) {
|
|
40
|
+
switch (resultType) {
|
|
41
|
+
case 'correct':
|
|
42
|
+
return /*#__PURE__*/_jsx(SystemIcons.CheckComplete, {
|
|
43
|
+
color: COLORS.white,
|
|
44
|
+
className: 'quiz-button-result-icon'
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
case 'incorrect':
|
|
48
|
+
return /*#__PURE__*/_jsx(SystemIcons.Close, {
|
|
49
|
+
color: COLORS.white,
|
|
50
|
+
className: 'quiz-button-result-icon'
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
default:
|
|
54
|
+
return /*#__PURE__*/_jsx(SystemIcons.Close, {
|
|
55
|
+
color: COLORS.white,
|
|
56
|
+
className: 'quiz-button-result-icon'
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
var QuizButton = function QuizButton(_ref) {
|
|
62
|
+
var text = _ref.text,
|
|
63
|
+
type = _ref.type,
|
|
64
|
+
onClick = _ref.onClick,
|
|
65
|
+
resultType = _ref.resultType,
|
|
66
|
+
id = _ref.id,
|
|
67
|
+
className = _ref.className,
|
|
68
|
+
_ref$selected = _ref.selected,
|
|
69
|
+
selected = _ref$selected === void 0 ? false : _ref$selected,
|
|
70
|
+
_ref$disabled = _ref.disabled,
|
|
71
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
72
|
+
_ref$size = _ref.size,
|
|
73
|
+
size = _ref$size === void 0 ? Size.Medium : _ref$size;
|
|
74
|
+
return /*#__PURE__*/_jsxs(OptionContainer, {
|
|
75
|
+
onClick: onClick,
|
|
76
|
+
isSelected: selected,
|
|
77
|
+
tabIndex: disabled || resultType ? -1 : 0,
|
|
78
|
+
onMouseDown: function onMouseDown(e) {
|
|
79
|
+
return e.preventDefault();
|
|
80
|
+
},
|
|
81
|
+
size: size,
|
|
82
|
+
className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : '').concat(className ? ' ' + className : ''),
|
|
83
|
+
"data-testid": 'container',
|
|
84
|
+
children: [/*#__PURE__*/_jsx(ButtonContainer, {
|
|
85
|
+
"data-testid": 'btnContainer',
|
|
86
|
+
className: 'quiz-button-icon',
|
|
87
|
+
size: size,
|
|
88
|
+
children: resultType ? renderResultContent(resultType) : type === 'radio' ? /*#__PURE__*/_jsx(RadioButton, {
|
|
89
|
+
selected: selected,
|
|
90
|
+
disabled: disabled,
|
|
91
|
+
size: size,
|
|
92
|
+
tabIndexVal: -1,
|
|
93
|
+
select: function select() {},
|
|
94
|
+
id: id
|
|
95
|
+
}) : /*#__PURE__*/_jsx(Checkbox, {
|
|
96
|
+
selected: selected,
|
|
97
|
+
disabled: disabled,
|
|
98
|
+
size: size,
|
|
99
|
+
tabIndexVal: -1,
|
|
100
|
+
select: function select() {},
|
|
101
|
+
id: id
|
|
102
|
+
})
|
|
103
|
+
}), /*#__PURE__*/_jsx(TextContainer, {
|
|
104
|
+
"data-testid": 'txtContainer',
|
|
105
|
+
className: 'quiz-button-text',
|
|
106
|
+
size: size,
|
|
107
|
+
children: /*#__PURE__*/_jsx(TextWrapper, {
|
|
108
|
+
size: size,
|
|
109
|
+
children: text
|
|
110
|
+
})
|
|
111
|
+
})]
|
|
112
|
+
});
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
QuizButton.propTypes = {
|
|
116
|
+
resultType: _pt.oneOf(['correct', 'incorrect', 'partial']),
|
|
117
|
+
text: _pt.string.isRequired,
|
|
118
|
+
onClick: _pt.func,
|
|
119
|
+
id: _pt.string.isRequired,
|
|
120
|
+
selected: _pt.bool,
|
|
121
|
+
disabled: _pt.bool,
|
|
122
|
+
type: _pt.oneOf(['radio', 'checkbox']).isRequired,
|
|
123
|
+
className: _pt.string
|
|
124
|
+
};
|
|
125
|
+
export default QuizButton;
|
|
126
|
+
//# sourceMappingURL=QuizButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/QuizButton/QuizButton.tsx"],"names":["React","styled","Checkbox","COLORS","RadioButton","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","TextContainer","div","accent1_20","props","size","Small","Large","Regular","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","focus_25","focus","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","e","preventDefault","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Checkbox, COLORS, RadioButton, Size, SystemIcons } from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n border-radius: 0 8px 8px 0;\n display: flex;\n background: ${COLORS.accent1_20};\n width: 100%;\n\n transition: background 100ms ease-in-out;\n align-items: center;\n\n padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n border-radius: 8px 0 0 8px;\n display: flex;\n background: ${COLORS.accent1_100};\n\n width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n transition: background 100ms ease-in-out;\n\n .quiz-button-result-icon {\n height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n }\n\n .radio-button-icon, .checkbox-icon {\n margin: auto;\n min-width: unset;\n background: transparent;\n\n svg {\n color: ${COLORS.accent1_600};\n }\n\n &:hover {\n background: transparent;\n }\n\n &:focus {\n background: transparent;\n }\n\n &:active {\n background: transparent;\n }\n }\n\n .small {\n min-width: 32px;\n min-height: 32px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 16px;\n width: 16px;\n }\n }\n }\n\n .medium {\n min-width: 48px;\n min-height: 48px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .large {\n min-width: 64px;\n min-height: 64px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 32px;\n width: 32px;\n }\n }\n }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n display: flex;\n flex-direction: row;\n cursor: pointer;\n max-width: 65ch; \n word-break: break-word;\n\n min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n &.selected {\n ${TextContainer} {\n background: ${COLORS.accent1_100};\n }\n ${ButtonContainer} {\n background: ${COLORS.accent1_200};\n }\n }\n \n &.disabled {\n cursor: not-allowed;\n \n ${ButtonContainer} {\n pointer-events: none;\n background: ${COLORS.neutral_100};\n }\n ${TextContainer} {\n pointer-events: none;\n background: ${COLORS.neutral_20};\n color: ${COLORS.neutral_300};\n }\n\n .radio-button-icon, .checkbox-icon {\n background: transparent;\n }\n }\n\n &.correct {\n ${TextContainer} { \n background: ${COLORS.correct_20};\n }\n ${ButtonContainer} {\n background: ${COLORS.correct_400};\n svg {\n margin: auto;\n }\n }\n }\n\n &.incorrect {\n ${TextContainer} { \n background: ${COLORS.critical_20};\n }\n ${ButtonContainer} {\n background: ${COLORS.critical_500};\n svg {\n margin: auto;\n }\n }\n }\n\n &.partial {\n ${TextContainer} { \n background: ${COLORS.warning_20};\n }\n ${ButtonContainer} {\n background: ${COLORS.warning_400};\n svg {\n margin: auto;\n }\n }\n } \n\n &:hover,\n &.hover-state {\n .radio-button-icon, .checkbox-icon {\n background: transparent;\n }\n }\n\n &:focus,\n &.focus-state {\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n border-radius: 8px;\n outline: none;\n\n .radio-button-icon, .checkbox-icon {\n background: transparent;\n }\n }\n\n &:active,\n &.active-state {\n .radio-button-icon, .checkbox-icon {\n background: transparent;\n }\n }\n\n &:hover:not(.disabled):not(.result),\n &.hover-state {\n ${ButtonContainer} {\n background: ${COLORS.accent1_300};\n }\n ${TextContainer} {\n background: ${props=>props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100};\n }\n \n .radio-button-icon, .checkbox-icon {\n background: transparent;\n svg {\n color: ${COLORS.accent1_700};\n }\n }\n }\n\n &:focus:not(.disabled):not(.result),\n &.focus-state {\n ${ButtonContainer} {\n background: ${props=>props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100};\n }\n ${TextContainer} {\n background: ${props=>props.isSelected ? COLORS.accent1_100 : COLORS.accent1_20};\n }\n\n .radio-button-icon, .checkbox-icon {\n background: transparent;\n }\n }\n\n &:active:not(.disabled):not(.result),\n &.active-state {\n ${ButtonContainer} {\n background: ${COLORS.accent1_400};\n transition: none;\n }\n ${TextContainer} {\n background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n transition: none;\n }\n\n .radio-button-icon, .checkbox-icon {\n background: transparent;\n svg {\n color: ${COLORS.accent1_800};\n }\n }\n }\n`;\n\nconst renderResultContent = (resultType: string) => {\n switch(resultType){\n case 'correct' : return <SystemIcons.CheckComplete color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n }\n};\n\ntype QuizButtonProps = {\n resultType?: 'correct' | 'incorrect' | 'partial';\n text: string;\n onClick?: (arg:any)=>void;\n id: string;\n selected?: boolean;\n disabled?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n type: 'radio' | 'checkbox';\n className?: string;\n}\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({text, type, onClick, resultType, id, className, selected=false, disabled=false, size=Size.Medium}) => {\n return ( \n <OptionContainer onClick={onClick} isSelected={selected} tabIndex={(disabled || resultType )?-1 : 0} onMouseDown={e=>e.preventDefault()} size={size}\n className={'quiz-button '.concat(selected?' selected':'')\n .concat(disabled?' disabled':'')\n .concat(resultType?' result '+resultType:'')\n .concat(className?' ' + className:'')}\n data-testid={'container'}>\n <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n {\n resultType ? renderResultContent(resultType) : (\n type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n select={()=>{}} id={id}/>\n )\n }\n </ButtonContainer>\n\n <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n <TextWrapper size={size}>\n {text}\n </TextWrapper>\n </TextContainer>\n </OptionContainer>\n );\n};\n\nexport default QuizButton;"],"file":"QuizButton.js"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "QuizButton", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _QuizButton.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
var _QuizButton = _interopRequireDefault(require("./QuizButton"));
|
|
16
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/QuizButton/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as QuizButton } from './QuizButton';"],"file":"index.cjs"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as QuizButton } from './QuizButton';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/QuizButton/index.ts"],"names":["default","QuizButton"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAApB,QAAsC,cAAtC","sourcesContent":["export { default as QuizButton } from './QuizButton';"],"file":"index.js"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.createUUID = createUUID;
|
|
7
|
+
|
|
8
|
+
function createUUID() {
|
|
9
|
+
var dt = new Date().getTime(); // eslint-disable-next-line func-names
|
|
10
|
+
|
|
11
|
+
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
|
12
|
+
// eslint-disable-next-line no-bitwise
|
|
13
|
+
var r = (dt + Math.random() * 16) % 16 | 0;
|
|
14
|
+
dt = Math.floor(dt / 16); // eslint-disable-next-line no-bitwise
|
|
15
|
+
|
|
16
|
+
return (c === 'x' ? r : r & 0x3 | 0x8).toString(16);
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=functions.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Services/functions.ts"],"names":["createUUID","dt","Date","getTime","replace","c","r","Math","random","floor","toString"],"mappings":";;;;;;;AAAO,SAASA,UAAT,GAAsB;AAC3B,MAAIC,EAAE,GAAG,IAAIC,IAAJ,GAAWC,OAAX,EAAT,CAD2B,CAE3B;;AACA,SAAO,uCAAuCC,OAAvC,CAA+C,OAA/C,EAAwD,UAASC,CAAT,EAAY;AACzE;AACA,QAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAL,KAAgB,EAAtB,IAA4B,EAA5B,GAAiC,CAA3C;AACAP,IAAAA,EAAE,GAAGM,IAAI,CAACE,KAAL,CAAWR,EAAE,GAAG,EAAhB,CAAL,CAHyE,CAIzE;;AACA,WAAO,CAACI,CAAC,KAAK,GAAN,GAAYC,CAAZ,GAAiBA,CAAC,GAAG,GAAL,GAAY,GAA7B,EAAkCI,QAAlC,CAA2C,EAA3C,CAAP;AACD,GANM,CAAP;AAOD","sourcesContent":["export function createUUID() {\n let dt = new Date().getTime();\n // eslint-disable-next-line func-names\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n // eslint-disable-next-line no-bitwise\n const r = (dt + Math.random() * 16) % 16 | 0;\n dt = Math.floor(dt / 16);\n // eslint-disable-next-line no-bitwise\n return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\n });\n}\n"],"file":"functions.cjs"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
+
|
|
14
|
+
var React = _interopRequireWildcard(require("react"));
|
|
15
|
+
|
|
16
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
17
|
+
|
|
18
|
+
var _styles = require("../styles");
|
|
19
|
+
|
|
20
|
+
var _typography = require("../styles/typography");
|
|
21
|
+
|
|
22
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
|
+
|
|
24
|
+
var _templateObject, _templateObject2;
|
|
25
|
+
|
|
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); }
|
|
27
|
+
|
|
28
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
|
+
|
|
30
|
+
var SkipToContentLink = _styledComponents.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n ", "\n \n text-decoration: underline;\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black));
|
|
31
|
+
|
|
32
|
+
var SkipToContentWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n text-decoration: none;\n z-index: -1000;\n height: 0px;\n overflow-x: hidden;\n\n &:focus-within {\n height: auto;\n padding: 16px;\n z-index: 100000;\n\n background: ", ";\n }\n\n @media print {\n display: none;\n }\n"])), _styles.COLORS.accent2_200);
|
|
33
|
+
|
|
34
|
+
var SkipToContent = function SkipToContent(_ref) {
|
|
35
|
+
var children = _ref.children;
|
|
36
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkipToContentWrapper, {
|
|
37
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SkipToContentLink, {
|
|
38
|
+
href: "#main",
|
|
39
|
+
children: children
|
|
40
|
+
})
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
var _default = SkipToContent;
|
|
45
|
+
exports.default = _default;
|
|
46
|
+
//# sourceMappingURL=SkipToContent.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/SkipToContent/SkipToContent.tsx"],"names":["SkipToContentLink","styled","a","ComponentTextStyle","Bold","COLORS","black","SkipToContentWrapper","div","accent2_200","SkipToContent","children"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;;;AAIA,IAAMA,iBAAiB,GAAGC,0BAAOC,CAAV,iIACnB,mCAAkBC,2BAAmBC,IAArC,EAA2CC,eAAOC,KAAlD,CADmB,CAAvB;;AAMA,IAAMC,oBAAoB,GAAGN,0BAAOO,GAAV,0UAWRH,eAAOI,WAXC,CAA1B;;AAmBA,IAAMC,aAA0D,GAAG,SAA7DA,aAA6D,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACnF,sBACE,qBAAC,oBAAD;AAAA,2BACE,qBAAC,iBAAD;AAAmB,MAAA,IAAI,EAAC,OAAxB;AAAA,gBAAiCA;AAAjC;AADF,IADF;AAKD,CAND;;eAQeD,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle, TYPOGRAPHY} from '../styles';\nimport {ComponentSStyling} from '../styles/typography';\n\ntype SkipToContentProps = {};\n\nconst SkipToContentLink = styled.a`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n \n text-decoration: underline;\n`;\n\nconst SkipToContentWrapper = styled.div`\n text-decoration: none;\n z-index: -1000;\n height: 0px;\n overflow-x: hidden;\n\n &:focus-within {\n height: auto;\n padding: 16px;\n z-index: 100000;\n\n background: ${COLORS.accent2_200};\n }\n\n @media print {\n display: none;\n }\n`;\n\nconst SkipToContent: React.FunctionComponent<SkipToContentProps> = ({ children }) => {\n return (\n <SkipToContentWrapper>\n <SkipToContentLink href=\"#main\">{children}</SkipToContentLink>\n </SkipToContentWrapper>\n );\n};\n\nexport default SkipToContent;\n"],"file":"SkipToContent.cjs"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "SkipToContent", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _SkipToContent.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
var _SkipToContent = _interopRequireDefault(require("./SkipToContent"));
|
|
16
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/SkipToContent/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as SkipToContent } from './SkipToContent';\n"],"file":"index.cjs"}
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
+
|
|
14
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
+
|
|
16
|
+
var React = _interopRequireWildcard(require("react"));
|
|
17
|
+
|
|
18
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
19
|
+
|
|
20
|
+
var _styles = require("../styles");
|
|
21
|
+
|
|
22
|
+
var _Button = require("../Button");
|
|
23
|
+
|
|
24
|
+
var _SystemIcons = require("../icons/systemicons/SystemIcons");
|
|
25
|
+
|
|
26
|
+
var _CommonStyles = require("../GlobalNavigationBar/mobile/CommonStyles");
|
|
27
|
+
|
|
28
|
+
var _SwitcherMenuItem = _interopRequireDefault(require("./SwitcherMenuItem"));
|
|
29
|
+
|
|
30
|
+
var _typography = require("../styles/typography");
|
|
31
|
+
|
|
32
|
+
var _zIndexes = require("../styles/z-indexes");
|
|
33
|
+
|
|
34
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
35
|
+
|
|
36
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
37
|
+
|
|
38
|
+
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
|
+
|
|
40
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
41
|
+
|
|
42
|
+
var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n margin: 0;\n background-color: ", ";\n box-sizing: border-box;\n display: none;\n -webkit-animation: ", " 0.2s ease-in-out;\n animation: ", " 0.2s ease-in-out;\n position: absolute;\n border-radius: 4px;\n z-index: ", ";\n height: 100%;\n width: 320px;\n padding-inline-start: 0;\n overflow-y: scroll;\n ", " {\n min-width: 360px;\n }\n\n .open & {\n display: flex;\n flex-direction: column;\n }\n\n ", ";\n"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _zIndexes.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, _styles.scrollBarStyling);
|
|
43
|
+
|
|
44
|
+
var MenuSection = _styledComponents.default.li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding: 8px 0;\n position: relative;\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n"])));
|
|
45
|
+
|
|
46
|
+
var MenuSectionList = _styledComponents.default.ul(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n margin: 0;\n overflow-y: unset !important;\n padding-inline-start: 0;\n\n ", "\n"])), _CommonStyles.UserMenuSectionListStyling);
|
|
47
|
+
|
|
48
|
+
var Top = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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: 0px;\n margin-inline-end: 0px;\n margin-left: 24px;\n\n ", "\n }\n"])), _styles.COLORS.neutral_600, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'));
|
|
49
|
+
|
|
50
|
+
var LabelLine = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n height: 32px;\n background-color: ", ";\n padding-left: 24px;\n display: flex;\n line-height: 32px;\n"])), _styles.COLORS.neutral_20);
|
|
51
|
+
|
|
52
|
+
var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
|
|
53
|
+
var header = _ref.header,
|
|
54
|
+
elementsHeader = _ref.elementsHeader,
|
|
55
|
+
clickMenuAction = _ref.clickMenuAction,
|
|
56
|
+
elements = _ref.elements;
|
|
57
|
+
React.useEffect(function () {
|
|
58
|
+
function handleKeyPress(e) {
|
|
59
|
+
if (e.keyCode === 27) {
|
|
60
|
+
clickMenuAction();
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
document.addEventListener('keydown', handleKeyPress, false);
|
|
65
|
+
return function () {
|
|
66
|
+
document.removeEventListener('keydown', handleKeyPress, false);
|
|
67
|
+
};
|
|
68
|
+
}, [clickMenuAction]);
|
|
69
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Menu, {
|
|
70
|
+
onClick: function onClick() {},
|
|
71
|
+
role: "menu",
|
|
72
|
+
"aria-labelledby": "UserMenuButton",
|
|
73
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Top, {
|
|
74
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
|
|
75
|
+
variant: "secondary",
|
|
76
|
+
shape: "circular",
|
|
77
|
+
action: clickMenuAction,
|
|
78
|
+
isInMobileMenu: true,
|
|
79
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowLineLeft, {
|
|
80
|
+
size: "24px",
|
|
81
|
+
color: _styles.COLORS.neutral_600
|
|
82
|
+
})
|
|
83
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
|
|
84
|
+
children: header
|
|
85
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.Right, {
|
|
86
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
|
|
87
|
+
variant: "secondary",
|
|
88
|
+
shape: "circular",
|
|
89
|
+
action: clickMenuAction,
|
|
90
|
+
isInMobileMenu: true,
|
|
91
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
|
|
92
|
+
size: "24px"
|
|
93
|
+
})
|
|
94
|
+
})
|
|
95
|
+
})]
|
|
96
|
+
}), elements && (elements === null || elements === void 0 ? void 0 : elements.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuSection, {
|
|
97
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LabelLine, {
|
|
98
|
+
children: elementsHeader
|
|
99
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionList, {
|
|
100
|
+
children: elements === null || elements === void 0 ? void 0 : elements.map(function (element) {
|
|
101
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SwitcherMenuItem.default, {
|
|
102
|
+
url: element === null || element === void 0 ? void 0 : element.to,
|
|
103
|
+
label: element === null || element === void 0 ? void 0 : element.label,
|
|
104
|
+
Icon: element.icon
|
|
105
|
+
});
|
|
106
|
+
})
|
|
107
|
+
})]
|
|
108
|
+
})]
|
|
109
|
+
});
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
MobileSwitcherMenu.propTypes = {
|
|
113
|
+
header: _propTypes.default.string.isRequired,
|
|
114
|
+
elementsHeader: _propTypes.default.string.isRequired,
|
|
115
|
+
clickMenuAction: _propTypes.default.func.isRequired,
|
|
116
|
+
elements: _propTypes.default.array
|
|
117
|
+
};
|
|
118
|
+
var _default = MobileSwitcherMenu;
|
|
119
|
+
exports.default = _default;
|
|
120
|
+
//# sourceMappingURL=MobileSwitcherMenu.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentTextStyle","Regular","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Menu = styled.ul`\n list-style: none;\n margin: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n -webkit-animation: ${flowDown} 0.2s ease-in-out;\n animation: ${flowDown} 0.2s ease-in-out;\n position: absolute;\n border-radius: 4px;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n width: 320px;\n padding-inline-start: 0;\n overflow-y: scroll;\n ${BREAKPOINTS.SMALL} {\n min-width: 360px;\n }\n\n .open & {\n display: flex;\n flex-direction: column;\n }\n\n ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n padding: 8px 0;\n position: relative;\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nconst MenuSectionList = styled.ul`\n list-style: none;\n margin: 0;\n overflow-y: unset !important;\n padding-inline-start: 0;\n\n ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 22px 12px 0 12px;\n color: ${COLORS.neutral_600};\n\n h3 {\n margin-block-start: 0 !important;\n margin-block-end: 0 !important;\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n margin-left: 24px;\n\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n }\n`;\n\nconst LabelLine = styled.span`\n height: 32px;\n background-color: ${COLORS.neutral_20};\n padding-left: 24px;\n display: flex;\n line-height: 32px;\n`;\n\ninterface Props {\n header: string;\n elementsHeader: string;\n clickMenuAction: () => void;\n elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n React.useEffect(() => {\n function handleKeyPress(e: any) {\n if (e.keyCode === 27) {\n clickMenuAction();\n }\n }\n\n document.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [clickMenuAction]);\n\n return (\n <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <Top>\n <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n <h3>{header}</h3>\n <Right>\n <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n <Close size=\"24px\" />\n </IconButton>\n </Right>\n </Top>\n {elements && elements?.length > 0 && (\n <MenuSection>\n <LabelLine>{elementsHeader}</LabelLine>\n <MenuSectionList>\n {elements?.map((element) => (\n <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n </Menu>\n );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.cjs"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
+
|
|
14
|
+
var React = _interopRequireWildcard(require("react"));
|
|
15
|
+
|
|
16
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
17
|
+
|
|
18
|
+
var _styles = require("../styles");
|
|
19
|
+
|
|
20
|
+
var _typography = require("../styles/typography");
|
|
21
|
+
|
|
22
|
+
var _zIndexes = require("../styles/z-indexes");
|
|
23
|
+
|
|
24
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
|
+
|
|
26
|
+
var _templateObject, _templateObject2;
|
|
27
|
+
|
|
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); }
|
|
29
|
+
|
|
30
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
31
|
+
|
|
32
|
+
var StyledSwitcherItem = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n padding: 16px 25px;\n margin: 0 2px;\n\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n\n ", "\n\n text-decoration: none;\n\n svg {\n margin-right: 16px;\n }\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n left: 4px;\n top: 4px;\n bottom: 4px;\n width: 4px;\n background-color: transparent;\n border-radius: 2px;\n }\n\n &.active:not(.disabled) {\n z-index: ", ";\n font-weight: bold;\n color: ", ";\n\n &:after {\n background-color: ", ";\n }\n\n svg path {\n fill: ", ";\n }\n }\n\n &.disabled {\n color: ", ";\n background-color: ", ";\n }\n\n &:hover:not(.disabled) {\n z-index: ", ";\n color: ", ";\n background-color: ", ";\n\n svg path {\n fill: ", ";\n }\n }\n\n &:active:not(.disabled) {\n z-index: ", ";\n color: ", ";\n background-color: ", ";\n box-shadow: none;\n\n &:after {\n background-color: ", ";\n }\n\n svg path {\n fill: ", ";\n }\n }\n\n &:focus:not(.disabled) {\n z-index: ", ";\n box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.primary_500, _styles.COLORS.neutral_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_600, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _styles.COLORS.primary_500, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500);
|
|
33
|
+
|
|
34
|
+
var A = _styledComponents.default.a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
35
|
+
|
|
36
|
+
var SwitcherMenuItem = function SwitcherMenuItem(_ref) {
|
|
37
|
+
var label = _ref.label,
|
|
38
|
+
url = _ref.url,
|
|
39
|
+
disabled = _ref.disabled,
|
|
40
|
+
Icon = _ref.Icon,
|
|
41
|
+
_ref$as = _ref.as,
|
|
42
|
+
as = _ref$as === void 0 ? A : _ref$as,
|
|
43
|
+
testId = _ref.testId;
|
|
44
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSwitcherItem, {
|
|
45
|
+
onClick: function onClick() {
|
|
46
|
+
return window.location.href = url || '';
|
|
47
|
+
},
|
|
48
|
+
as: as,
|
|
49
|
+
href: url || '',
|
|
50
|
+
target: "_parent",
|
|
51
|
+
className: disabled ? 'disabled' : '',
|
|
52
|
+
"data-testid": testId,
|
|
53
|
+
children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
|
|
54
|
+
size: "22px",
|
|
55
|
+
color: "#666666"
|
|
56
|
+
}), label]
|
|
57
|
+
}, label);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
var _default = SwitcherMenuItem;
|
|
61
|
+
exports.default = _default;
|
|
62
|
+
//# sourceMappingURL=SwitcherMenuItem.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Switcher/SwitcherMenuItem.tsx"],"names":["StyledSwitcherItem","styled","div","ComponentTextStyle","Regular","COLORS","neutral_600","Z_INDEXES","active","neutral_800","primary_500","neutral_300","neutral_100","hover","primary_600","primary_20","primary_800","primary_100","focus","A","a","SwitcherMenuItem","label","url","disabled","Icon","as","testId","window","location","href"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV,8wCASpB,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAToB,EA8BTC,oBAAUC,MA9BD,EAgCXH,eAAOI,WAhCI,EAmCEJ,eAAOK,WAnCT,EAuCVL,eAAOI,WAvCG,EA4CXJ,eAAOM,WA5CI,EA6CAN,eAAOO,WA7CP,EAiDTL,oBAAUM,KAjDD,EAkDXR,eAAOS,WAlDI,EAmDAT,eAAOU,UAnDP,EAsDVV,eAAOS,WAtDG,EA2DTP,oBAAUC,MA3DD,EA4DXH,eAAOW,WA5DI,EA6DAX,eAAOY,WA7DP,EAiEEZ,eAAOK,WAjET,EAqEVL,eAAOW,WArEG,EA0ETT,oBAAUW,KA1ED,EA2EMb,eAAOK,WA3Eb,CAAxB;;AAgFA,IAAMS,CAAC,GAAGlB,0BAAOmB,CAAV,qFAAP;;AAEA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,GAAV,QAAUA,GAAV;AAAA,MAAeC,QAAf,QAAeA,QAAf;AAAA,MAAyBC,IAAzB,QAAyBA,IAAzB;AAAA,qBAA+BC,EAA/B;AAAA,MAA+BA,EAA/B,wBAAoCP,CAApC;AAAA,MAAuCQ,MAAvC,QAAuCA,MAAvC;AAAA,sBACvB,sBAAC,kBAAD;AACE,IAAA,OAAO,EAAE;AAAA,aAAOC,MAAM,CAACC,QAAP,CAAgBC,IAAhB,GAAuBP,GAAG,IAAI,EAArC;AAAA,KADX;AAEE,IAAA,EAAE,EAAEG,EAFN;AAGE,IAAA,IAAI,EAAEH,GAAG,IAAI,EAHf;AAIE,IAAA,MAAM,EAAC,SAJT;AAME,IAAA,SAAS,EAAEC,QAAQ,GAAG,UAAH,GAAgB,EANrC;AAOE,mBAAaG,MAPf;AAAA,eAQGF,IAAI,iBAAI,qBAAC,IAAD;AAAM,MAAA,IAAI,EAAC,MAAX;AAAkB,MAAA,KAAK,EAAC;AAAxB,MARX,EASGH,KATH;AAAA,KAKOA,KALP,CADuB;AAAA,CAAzB;;eAceD,gB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {SwitcherNavItem} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst StyledSwitcherItem = styled.div`\n padding: 16px 25px;\n margin: 0 2px;\n\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n text-decoration: none;\n\n svg {\n margin-right: 16px;\n }\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n left: 4px;\n top: 4px;\n bottom: 4px;\n width: 4px;\n background-color: transparent;\n border-radius: 2px;\n }\n\n &.active:not(.disabled) {\n z-index: ${Z_INDEXES.active};\n font-weight: bold;\n color: ${COLORS.neutral_800};\n\n &:after {\n background-color: ${COLORS.primary_500};\n }\n\n svg path {\n fill: ${COLORS.neutral_800};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n background-color: ${COLORS.neutral_100};\n }\n\n &:hover:not(.disabled) {\n z-index: ${Z_INDEXES.hover};\n color: ${COLORS.primary_600};\n background-color: ${COLORS.primary_20};\n\n svg path {\n fill: ${COLORS.primary_600};\n }\n }\n\n &:active:not(.disabled) {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n\n &:after {\n background-color: ${COLORS.primary_500};\n }\n\n svg path {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:focus:not(.disabled) {\n z-index: ${Z_INDEXES.focus};\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n }\n`;\n\nconst A = styled.a``;\n\nconst SwitcherMenuItem = ({ label, url, disabled, Icon, as = A, testId }: SwitcherNavItem) => (\n <StyledSwitcherItem\n onClick={() => (window.location.href = url || '')}\n as={as}\n href={url || ''}\n target=\"_parent\"\n key={label}\n className={disabled ? 'disabled' : ''}\n data-testid={testId}>\n {Icon && <Icon size=\"22px\" color=\"#666666\" />}\n {label}\n </StyledSwitcherItem>\n);\n\nexport default SwitcherMenuItem;\n"],"file":"SwitcherMenuItem.cjs"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "MobileSwitcherMenu", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _MobileSwitcherMenu.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
Object.defineProperty(exports, "SwitcherMenuItem", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function get() {
|
|
17
|
+
return _SwitcherMenuItem.default;
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
var _SwitcherMenuItem = _interopRequireDefault(require("./SwitcherMenuItem"));
|
|
22
|
+
|
|
23
|
+
var _MobileSwitcherMenu = _interopRequireDefault(require("./MobileSwitcherMenu"));
|
|
24
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Switcher/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import SwitcherMenuItem from './SwitcherMenuItem';\nimport MobileSwitcherMenu from './MobileSwitcherMenu';\n\nexport { SwitcherMenuItem, MobileSwitcherMenu };\n"],"file":"index.cjs"}
|