@laerdal/life-react-components 1.11.0-dev.5.full → 1.11.0-dev.50.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/Accordion/AccordionItem.cjs +14 -9
- package/dist/Accordion/AccordionItem.cjs.map +1 -1
- package/dist/Accordion/AccordionItem.js +14 -9
- package/dist/Accordion/AccordionItem.js.map +1 -1
- package/dist/Accordion/AccordionMenu.cjs +2 -2
- package/dist/Accordion/AccordionMenu.cjs.map +1 -1
- package/dist/Accordion/AccordionMenu.js +2 -2
- package/dist/Accordion/AccordionMenu.js.map +1 -1
- package/dist/Accordion/ContentAccordion.cjs +5 -3
- package/dist/Accordion/ContentAccordion.cjs.map +1 -1
- package/dist/Accordion/ContentAccordion.js +5 -3
- package/dist/Accordion/ContentAccordion.js.map +1 -1
- package/dist/Accordion/index.cjs.map +1 -1
- package/dist/Accordion/index.js.map +1 -1
- package/dist/Accordion/styles.cjs +1 -1
- package/dist/Accordion/styles.cjs.map +1 -1
- package/dist/Accordion/styles.js +1 -1
- package/dist/Accordion/styles.js.map +1 -1
- package/dist/AuthPage/AuthPage.cjs.map +1 -1
- package/dist/AuthPage/AuthPage.js.map +1 -1
- package/dist/AuthPage/Information.cjs.map +1 -1
- package/dist/AuthPage/Information.js.map +1 -1
- package/dist/AuthPage/ScreenSetsContainer.cjs.map +1 -1
- package/dist/AuthPage/ScreenSetsContainer.js.map +1 -1
- package/dist/AuthPage/_AuthPageSection.cjs.map +1 -1
- package/dist/AuthPage/_AuthPageSection.js.map +1 -1
- package/dist/AuthPage/index.cjs.map +1 -1
- package/dist/AuthPage/index.js.map +1 -1
- package/dist/AuthPage/screenSetsErrorMessages.cjs.map +1 -1
- package/dist/AuthPage/screenSetsErrorMessages.js.map +1 -1
- package/dist/Banners/Banner.cjs +11 -6
- package/dist/Banners/Banner.cjs.map +1 -1
- package/dist/Banners/Banner.js +10 -6
- package/dist/Banners/Banner.js.map +1 -1
- package/dist/Banners/OverviewBanner.cjs +2 -2
- package/dist/Banners/OverviewBanner.cjs.map +1 -1
- package/dist/Banners/OverviewBanner.js +2 -2
- package/dist/Banners/OverviewBanner.js.map +1 -1
- package/dist/Banners/index.cjs.map +1 -1
- package/dist/Banners/index.js.map +1 -1
- package/dist/Banners/styles.cjs.map +1 -1
- package/dist/Banners/styles.js.map +1 -1
- package/dist/Breadcrumb/Breadcrumb.cjs +17 -5
- package/dist/Breadcrumb/Breadcrumb.cjs.map +1 -1
- package/dist/Breadcrumb/Breadcrumb.d.ts +1 -1
- package/dist/Breadcrumb/Breadcrumb.js +18 -6
- package/dist/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/Breadcrumb/BreadcrumbItem.cjs.map +1 -1
- package/dist/Breadcrumb/BreadcrumbItem.js.map +1 -1
- package/dist/Breadcrumb/index.cjs.map +1 -1
- package/dist/Breadcrumb/index.js.map +1 -1
- package/dist/Breadcrumb/styles.cjs.map +1 -1
- package/dist/Breadcrumb/styles.js.map +1 -1
- package/dist/Button/BackButton.cjs +2 -2
- package/dist/Button/BackButton.cjs.map +1 -1
- package/dist/Button/BackButton.js +2 -2
- package/dist/Button/BackButton.js.map +1 -1
- package/dist/Button/Button.cjs +2 -2
- package/dist/Button/Button.cjs.map +1 -1
- package/dist/Button/Button.js +2 -2
- package/dist/Button/Button.js.map +1 -1
- package/dist/Button/DualFunctionButton.cjs +29 -14
- package/dist/Button/DualFunctionButton.cjs.map +1 -1
- package/dist/Button/DualFunctionButton.js +28 -14
- package/dist/Button/DualFunctionButton.js.map +1 -1
- package/dist/Button/Iconbutton.cjs +4 -4
- package/dist/Button/Iconbutton.cjs.map +1 -1
- package/dist/Button/Iconbutton.js +4 -4
- package/dist/Button/Iconbutton.js.map +1 -1
- package/dist/Button/index.cjs.map +1 -1
- package/dist/Button/index.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCard.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCard.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardActions.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardActions.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardBody.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardBody.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js.map +1 -1
- package/dist/Card/HorizontalCard/index.cjs.map +1 -1
- package/dist/Card/HorizontalCard/index.js.map +1 -1
- package/dist/Card/HorizontalCard/types.cjs.map +1 -1
- package/dist/Card/HorizontalCard/types.js.map +1 -1
- package/dist/Card/VerticalCard/Card.cjs +4 -4
- package/dist/Card/VerticalCard/Card.cjs.map +1 -1
- package/dist/Card/VerticalCard/Card.js +4 -4
- package/dist/Card/VerticalCard/Card.js.map +1 -1
- package/dist/Card/VerticalCard/CardBottomSection.cjs.map +1 -1
- package/dist/Card/VerticalCard/CardBottomSection.js.map +1 -1
- package/dist/Card/VerticalCard/CardMiddleSection.cjs.map +1 -1
- package/dist/Card/VerticalCard/CardMiddleSection.js.map +1 -1
- package/dist/Card/VerticalCard/CardTopSection.cjs.map +1 -1
- package/dist/Card/VerticalCard/CardTopSection.js.map +1 -1
- package/dist/Card/VerticalCard/index.cjs.map +1 -1
- package/dist/Card/VerticalCard/index.js.map +1 -1
- package/dist/Card/index.cjs.map +1 -1
- package/dist/Card/index.js.map +1 -1
- package/dist/Chips/ActionChip.cjs +2 -2
- package/dist/Chips/ActionChip.cjs.map +1 -1
- package/dist/Chips/ActionChip.js +2 -2
- package/dist/Chips/ActionChip.js.map +1 -1
- package/dist/Chips/ChipStyles.cjs.map +1 -1
- package/dist/Chips/ChipStyles.js.map +1 -1
- package/dist/Chips/ChipTypes.cjs.map +1 -1
- package/dist/Chips/ChipTypes.js.map +1 -1
- package/dist/Chips/ChoiceChips.cjs +2 -2
- package/dist/Chips/ChoiceChips.cjs.map +1 -1
- package/dist/Chips/ChoiceChips.js +2 -2
- package/dist/Chips/ChoiceChips.js.map +1 -1
- package/dist/Chips/FilterChip.cjs +2 -2
- package/dist/Chips/FilterChip.cjs.map +1 -1
- package/dist/Chips/FilterChip.js +2 -2
- package/dist/Chips/FilterChip.js.map +1 -1
- package/dist/Chips/InputChip.cjs +2 -2
- package/dist/Chips/InputChip.cjs.map +1 -1
- package/dist/Chips/InputChip.js +2 -2
- package/dist/Chips/InputChip.js.map +1 -1
- package/dist/Chips/index.cjs.map +1 -1
- package/dist/Chips/index.js.map +1 -1
- package/dist/ChipsInput/ChipDropdownInput.cjs +35 -24
- package/dist/ChipsInput/ChipDropdownInput.cjs.map +1 -1
- package/dist/ChipsInput/ChipDropdownInput.js +35 -24
- package/dist/ChipsInput/ChipDropdownInput.js.map +1 -1
- package/dist/ChipsInput/ChipInput.cjs +2 -2
- package/dist/ChipsInput/ChipInput.cjs.map +1 -1
- package/dist/ChipsInput/ChipInput.js +2 -2
- package/dist/ChipsInput/ChipInput.js.map +1 -1
- package/dist/ChipsInput/ChipInputField.cjs +2 -2
- package/dist/ChipsInput/ChipInputField.cjs.map +1 -1
- package/dist/ChipsInput/ChipInputField.js +2 -2
- package/dist/ChipsInput/ChipInputField.js.map +1 -1
- package/dist/ChipsInput/ChipInputTypes.cjs.map +1 -1
- package/dist/ChipsInput/ChipInputTypes.js.map +1 -1
- package/dist/ChipsInput/index.cjs.map +1 -1
- package/dist/ChipsInput/index.js.map +1 -1
- package/dist/Dropdown/BasicDropdown.cjs +28 -14
- package/dist/Dropdown/BasicDropdown.cjs.map +1 -1
- package/dist/Dropdown/BasicDropdown.js +28 -14
- package/dist/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/Dropdown/CommonStyling.cjs.map +1 -1
- package/dist/Dropdown/CommonStyling.js.map +1 -1
- package/dist/Dropdown/DropdownButton.cjs +27 -11
- package/dist/Dropdown/DropdownButton.cjs.map +1 -1
- package/dist/Dropdown/DropdownButton.js +27 -11
- package/dist/Dropdown/DropdownButton.js.map +1 -1
- package/dist/Dropdown/DropdownButtonTypes.cjs.map +1 -1
- package/dist/Dropdown/DropdownButtonTypes.d.ts +1 -0
- package/dist/Dropdown/DropdownButtonTypes.js.map +1 -1
- package/dist/Dropdown/DropdownContent.cjs +44 -6
- package/dist/Dropdown/DropdownContent.cjs.map +1 -1
- package/dist/Dropdown/DropdownContent.d.ts +2 -0
- package/dist/Dropdown/DropdownContent.js +44 -6
- package/dist/Dropdown/DropdownContent.js.map +1 -1
- package/dist/Dropdown/DropdownFilter.cjs +25 -11
- package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
- package/dist/Dropdown/DropdownFilter.js +25 -11
- package/dist/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/Dropdown/index.cjs.map +1 -1
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Footer/Components/FooterBottomLinks.cjs.map +1 -1
- package/dist/Footer/Components/FooterBottomLinks.js.map +1 -1
- package/dist/Footer/Components/FooterDropdownLinks.cjs.map +1 -1
- package/dist/Footer/Components/FooterDropdownLinks.js.map +1 -1
- package/dist/Footer/Components/FooterNavSection.cjs +7 -2
- package/dist/Footer/Components/FooterNavSection.cjs.map +1 -1
- package/dist/Footer/Components/FooterNavSection.js +6 -2
- package/dist/Footer/Components/FooterNavSection.js.map +1 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map +1 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/Footer/Components/FooterTop.cjs.map +1 -1
- package/dist/Footer/Components/FooterTop.js.map +1 -1
- package/dist/Footer/Footer.cjs.map +1 -1
- package/dist/Footer/Footer.js.map +1 -1
- package/dist/Footer/SiteFooter.cjs +2 -2
- package/dist/Footer/SiteFooter.cjs.map +1 -1
- package/dist/Footer/SiteFooter.js +2 -2
- package/dist/Footer/SiteFooter.js.map +1 -1
- package/dist/Footer/index.cjs.map +1 -1
- package/dist/Footer/index.js.map +1 -1
- package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs +5 -3
- package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map +1 -1
- package/dist/GlobalNavigationBar/GlobalNavigationBar.js +4 -3
- package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map +1 -1
- package/dist/GlobalNavigationBar/Logo.cjs.map +1 -1
- package/dist/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs +2 -2
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js +2 -2
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs +2 -4
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.js +2 -4
- package/dist/GlobalNavigationBar/desktop/MainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs +0 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js +0 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/index.cjs.map +1 -1
- package/dist/GlobalNavigationBar/index.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs +24 -2
- package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/CommonStyles.d.ts +7 -2
- package/dist/GlobalNavigationBar/mobile/CommonStyles.js +8 -2
- package/dist/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs +53 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs.map +1 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.d.ts +6 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js +34 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js.map +1 -0
- package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs +3 -5
- package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenu.js +2 -4
- package/dist/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs +30 -61
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js +30 -57
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs +2 -2
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js +2 -2
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js.map +1 -1
- package/dist/GlobalNavigationBar/types.cjs.map +1 -1
- package/dist/GlobalNavigationBar/types.d.ts +3 -1
- package/dist/GlobalNavigationBar/types.js.map +1 -1
- package/dist/HyperLink/HyperLink.cjs +2 -2
- package/dist/HyperLink/HyperLink.cjs.map +1 -1
- package/dist/HyperLink/HyperLink.js +2 -2
- package/dist/HyperLink/HyperLink.js.map +1 -1
- package/dist/HyperLink/index.cjs.map +1 -1
- package/dist/HyperLink/index.js.map +1 -1
- package/dist/HyperLink/styling.cjs.map +1 -1
- package/dist/HyperLink/styling.js.map +1 -1
- package/dist/Image/ImageWithFallbacks.cjs +2 -2
- package/dist/Image/ImageWithFallbacks.cjs.map +1 -1
- package/dist/Image/ImageWithFallbacks.js +2 -2
- package/dist/Image/ImageWithFallbacks.js.map +1 -1
- package/dist/Image/index.cjs.map +1 -1
- package/dist/Image/index.js.map +1 -1
- package/dist/InputFields/Checkbox.cjs +3 -2
- package/dist/InputFields/Checkbox.cjs.map +1 -1
- package/dist/InputFields/Checkbox.js +3 -2
- package/dist/InputFields/Checkbox.js.map +1 -1
- package/dist/InputFields/DatepickerField.cjs +14 -6
- package/dist/InputFields/DatepickerField.cjs.map +1 -1
- package/dist/InputFields/DatepickerField.d.ts +1 -1
- package/dist/InputFields/DatepickerField.js +8 -6
- package/dist/InputFields/DatepickerField.js.map +1 -1
- package/dist/InputFields/DatepickerFieldHeader.cjs.map +1 -1
- package/dist/InputFields/DatepickerFieldHeader.js.map +1 -1
- package/dist/InputFields/Label.cjs +16 -14
- package/dist/InputFields/Label.cjs.map +1 -1
- package/dist/InputFields/Label.d.ts +1 -0
- package/dist/InputFields/Label.js +15 -13
- package/dist/InputFields/Label.js.map +1 -1
- package/dist/InputFields/NumberField.cjs +26 -44
- package/dist/InputFields/NumberField.cjs.map +1 -1
- package/dist/InputFields/NumberField.d.ts +5 -6
- package/dist/InputFields/NumberField.js +26 -41
- package/dist/InputFields/NumberField.js.map +1 -1
- package/dist/InputFields/PasswordField.cjs +2 -2
- package/dist/InputFields/PasswordField.cjs.map +1 -1
- package/dist/InputFields/PasswordField.d.ts +1 -1
- package/dist/InputFields/PasswordField.js +2 -2
- package/dist/InputFields/PasswordField.js.map +1 -1
- package/dist/InputFields/QuickSearch.cjs +1 -1
- package/dist/InputFields/QuickSearch.cjs.map +1 -1
- package/dist/InputFields/QuickSearch.js +1 -1
- package/dist/InputFields/QuickSearch.js.map +1 -1
- package/dist/InputFields/RadioButton.cjs +2 -2
- package/dist/InputFields/RadioButton.cjs.map +1 -1
- package/dist/InputFields/RadioButton.js +2 -2
- package/dist/InputFields/RadioButton.js.map +1 -1
- package/dist/InputFields/ResponsiveComponentWrapper.cjs +3 -3
- package/dist/InputFields/ResponsiveComponentWrapper.cjs.map +1 -1
- package/dist/InputFields/ResponsiveComponentWrapper.js +3 -3
- package/dist/InputFields/ResponsiveComponentWrapper.js.map +1 -1
- package/dist/InputFields/SearchBar.cjs +1 -0
- package/dist/InputFields/SearchBar.cjs.map +1 -1
- package/dist/InputFields/SearchBar.js +1 -0
- package/dist/InputFields/SearchBar.js.map +1 -1
- package/dist/InputFields/TextField.cjs +2 -2
- package/dist/InputFields/TextField.cjs.map +1 -1
- package/dist/InputFields/TextField.d.ts +1 -1
- package/dist/InputFields/TextField.js +2 -2
- package/dist/InputFields/TextField.js.map +1 -1
- package/dist/InputFields/Textarea.cjs +2 -2
- package/dist/InputFields/Textarea.cjs.map +1 -1
- package/dist/InputFields/Textarea.d.ts +2 -2
- package/dist/InputFields/Textarea.js +2 -2
- package/dist/InputFields/Textarea.js.map +1 -1
- package/dist/InputFields/components/SearchBarInput.cjs.map +1 -1
- package/dist/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/InputFields/components/SearchField.cjs +2 -2
- package/dist/InputFields/components/SearchField.cjs.map +1 -1
- package/dist/InputFields/components/SearchField.js +2 -2
- package/dist/InputFields/components/SearchField.js.map +1 -1
- package/dist/InputFields/index.cjs.map +1 -1
- package/dist/InputFields/index.js.map +1 -1
- package/dist/InputFields/styling.cjs.map +1 -1
- package/dist/InputFields/styling.js.map +1 -1
- package/dist/InputFields/types.cjs.map +1 -1
- package/dist/InputFields/types.d.ts +1 -0
- package/dist/InputFields/types.js.map +1 -1
- package/dist/Layouts/index.cjs.map +1 -1
- package/dist/Layouts/index.js.map +1 -1
- package/dist/LinearProgress/LinearProgress.cjs +2 -2
- package/dist/LinearProgress/LinearProgress.cjs.map +1 -1
- package/dist/LinearProgress/LinearProgress.js +2 -2
- package/dist/LinearProgress/LinearProgress.js.map +1 -1
- package/dist/LinearProgress/index.cjs.map +1 -1
- package/dist/LinearProgress/index.js.map +1 -1
- package/dist/List/ListRow.cjs +2 -2
- package/dist/List/ListRow.cjs.map +1 -1
- package/dist/List/ListRow.js +2 -2
- package/dist/List/ListRow.js.map +1 -1
- package/dist/List/index.cjs.map +1 -1
- package/dist/List/index.js.map +1 -1
- package/dist/LoadingIndicator/LoadingIndicator.cjs.map +1 -1
- package/dist/LoadingIndicator/LoadingIndicator.js.map +1 -1
- package/dist/LoadingIndicator/index.cjs.map +1 -1
- package/dist/LoadingIndicator/index.js.map +1 -1
- package/dist/LoadingPage/GlobalLoadingPage.cjs.map +1 -1
- package/dist/LoadingPage/GlobalLoadingPage.js.map +1 -1
- package/dist/LoadingPage/index.cjs.map +1 -1
- package/dist/LoadingPage/index.js.map +1 -1
- package/dist/MenuItem/MenuItem.cjs +2 -2
- package/dist/MenuItem/MenuItem.cjs.map +1 -1
- package/dist/MenuItem/MenuItem.d.ts +1 -1
- package/dist/MenuItem/MenuItem.js +2 -2
- package/dist/MenuItem/MenuItem.js.map +1 -1
- package/dist/MenuItem/index.cjs.map +1 -1
- package/dist/MenuItem/index.js.map +1 -1
- package/dist/MiniProductCard/MiniProductCard.cjs.map +1 -1
- package/dist/MiniProductCard/MiniProductCard.js.map +1 -1
- package/dist/MiniProductCard/index.cjs.map +1 -1
- package/dist/MiniProductCard/index.js.map +1 -1
- package/dist/Modals/Modal.cjs.map +1 -1
- package/dist/Modals/Modal.js.map +1 -1
- package/dist/Modals/ModalContainer.cjs +3 -3
- package/dist/Modals/ModalContainer.cjs.map +1 -1
- package/dist/Modals/ModalContainer.js +3 -3
- package/dist/Modals/ModalContainer.js.map +1 -1
- package/dist/Modals/ModalContent.cjs +4 -3
- package/dist/Modals/ModalContent.cjs.map +1 -1
- package/dist/Modals/ModalContent.d.ts +1 -0
- package/dist/Modals/ModalContent.js +4 -3
- package/dist/Modals/ModalContent.js.map +1 -1
- package/dist/Modals/ModalDialog.cjs +1 -0
- package/dist/Modals/ModalDialog.cjs.map +1 -1
- package/dist/Modals/ModalDialog.d.ts +1 -0
- package/dist/Modals/ModalDialog.js +1 -0
- package/dist/Modals/ModalDialog.js.map +1 -1
- package/dist/Modals/ModalNote.cjs.map +1 -1
- package/dist/Modals/ModalNote.js.map +1 -1
- package/dist/Modals/ModalStyles.cjs.map +1 -1
- package/dist/Modals/ModalStyles.js.map +1 -1
- package/dist/Modals/ModalTypes.cjs.map +1 -1
- package/dist/Modals/ModalTypes.js.map +1 -1
- package/dist/Modals/index.cjs.map +1 -1
- package/dist/Modals/index.js.map +1 -1
- package/dist/NavItem/NavItem.cjs +22 -1
- package/dist/NavItem/NavItem.cjs.map +1 -1
- package/dist/NavItem/NavItem.d.ts +7 -1
- package/dist/NavItem/NavItem.js +18 -1
- package/dist/NavItem/NavItem.js.map +1 -1
- package/dist/NavItem/index.cjs.map +1 -1
- package/dist/NavItem/index.d.ts +1 -0
- package/dist/NavItem/index.js.map +1 -1
- package/dist/NotificationDot/NotificationDot.cjs.map +1 -1
- package/dist/NotificationDot/NotificationDot.js.map +1 -1
- package/dist/NotificationDot/index.cjs.map +1 -1
- package/dist/NotificationDot/index.js.map +1 -1
- package/dist/Paginator/Paginator.cjs +2 -2
- package/dist/Paginator/Paginator.cjs.map +1 -1
- package/dist/Paginator/Paginator.js +3 -3
- package/dist/Paginator/Paginator.js.map +1 -1
- package/dist/Paginator/index.cjs.map +1 -1
- package/dist/Paginator/index.js.map +1 -1
- package/dist/Popover/Popover.cjs.map +1 -1
- package/dist/Popover/Popover.js.map +1 -1
- package/dist/Popover/index.cjs.map +1 -1
- package/dist/Popover/index.js.map +1 -1
- package/dist/ProfileButton/ProfileButton.cjs +2 -2
- package/dist/ProfileButton/ProfileButton.cjs.map +1 -1
- package/dist/ProfileButton/ProfileButton.d.ts +1 -1
- package/dist/ProfileButton/ProfileButton.js +2 -2
- package/dist/ProfileButton/ProfileButton.js.map +1 -1
- package/dist/ProfileButton/index.cjs.map +1 -1
- package/dist/ProfileButton/index.js.map +1 -1
- package/dist/QuizButton/QuizButton.cjs +5 -3
- package/dist/QuizButton/QuizButton.cjs.map +1 -1
- package/dist/QuizButton/QuizButton.js +5 -3
- package/dist/QuizButton/QuizButton.js.map +1 -1
- package/dist/QuizButton/index.cjs.map +1 -1
- package/dist/QuizButton/index.js.map +1 -1
- package/dist/SegmentControl/SegmentControl.cjs +2 -2
- package/dist/SegmentControl/SegmentControl.cjs.map +1 -1
- package/dist/SegmentControl/SegmentControl.js +2 -2
- package/dist/SegmentControl/SegmentControl.js.map +1 -1
- package/dist/SegmentControl/index.cjs.map +1 -1
- package/dist/SegmentControl/index.js.map +1 -1
- package/dist/Services/functions.cjs.map +1 -1
- package/dist/Services/functions.js.map +1 -1
- package/dist/SideMenu/SideMenu.cjs +2 -2
- package/dist/SideMenu/SideMenu.cjs.map +1 -1
- package/dist/SideMenu/SideMenu.js +2 -2
- package/dist/SideMenu/SideMenu.js.map +1 -1
- package/dist/SideMenu/SideMenuBody.cjs.map +1 -1
- package/dist/SideMenu/SideMenuBody.js.map +1 -1
- package/dist/SideMenu/SideMenuFooter.cjs +2 -2
- package/dist/SideMenu/SideMenuFooter.cjs.map +1 -1
- package/dist/SideMenu/SideMenuFooter.js +2 -2
- package/dist/SideMenu/SideMenuFooter.js.map +1 -1
- package/dist/SideMenu/SideMenuHeader.cjs +2 -2
- package/dist/SideMenu/SideMenuHeader.cjs.map +1 -1
- package/dist/SideMenu/SideMenuHeader.js +2 -2
- package/dist/SideMenu/SideMenuHeader.js.map +1 -1
- package/dist/SideMenu/index.cjs.map +1 -1
- package/dist/SideMenu/index.js.map +1 -1
- package/dist/SideMenu/types.cjs.map +1 -1
- package/dist/SideMenu/types.js.map +1 -1
- package/dist/SkipToContent/SkipToContent.cjs +5 -0
- package/dist/SkipToContent/SkipToContent.cjs.map +1 -1
- package/dist/SkipToContent/SkipToContent.d.ts +3 -1
- package/dist/SkipToContent/SkipToContent.js +4 -0
- package/dist/SkipToContent/SkipToContent.js.map +1 -1
- package/dist/SkipToContent/index.cjs.map +1 -1
- package/dist/SkipToContent/index.js.map +1 -1
- package/dist/Switcher/MobileCustomMenuContent.cjs +56 -0
- package/dist/Switcher/MobileCustomMenuContent.cjs.map +1 -0
- package/dist/Switcher/MobileCustomMenuContent.d.ts +8 -0
- package/dist/Switcher/MobileCustomMenuContent.js +39 -0
- package/dist/Switcher/MobileCustomMenuContent.js.map +1 -0
- package/dist/Switcher/MobileSwitcherMenu.cjs +17 -4
- package/dist/Switcher/MobileSwitcherMenu.cjs.map +1 -1
- package/dist/Switcher/MobileSwitcherMenu.d.ts +5 -2
- package/dist/Switcher/MobileSwitcherMenu.js +16 -4
- package/dist/Switcher/MobileSwitcherMenu.js.map +1 -1
- package/dist/Switcher/SwitcherMenuItem.cjs.map +1 -1
- package/dist/Switcher/SwitcherMenuItem.js.map +1 -1
- package/dist/Switcher/index.cjs.map +1 -1
- package/dist/Switcher/index.js.map +1 -1
- package/dist/Table/Table.cjs +11 -8
- package/dist/Table/Table.cjs.map +1 -1
- package/dist/Table/Table.js +11 -8
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/TableBody.cjs +8 -7
- package/dist/Table/TableBody.cjs.map +1 -1
- package/dist/Table/TableBody.d.ts +1 -3
- package/dist/Table/TableBody.js +8 -7
- package/dist/Table/TableBody.js.map +1 -1
- package/dist/Table/TableFooter.cjs.map +1 -1
- package/dist/Table/TableFooter.js.map +1 -1
- package/dist/Table/TableHeaders.cjs +2 -2
- package/dist/Table/TableHeaders.cjs.map +1 -1
- package/dist/Table/TableHeaders.js +2 -2
- package/dist/Table/TableHeaders.js.map +1 -1
- package/dist/Table/TableStyles.cjs +1 -1
- package/dist/Table/TableStyles.cjs.map +1 -1
- package/dist/Table/TableStyles.js +1 -1
- package/dist/Table/TableStyles.js.map +1 -1
- package/dist/Table/TableTypes.cjs.map +1 -1
- package/dist/Table/TableTypes.d.ts +5 -0
- package/dist/Table/TableTypes.js.map +1 -1
- package/dist/Table/index.cjs.map +1 -1
- package/dist/Table/index.d.ts +1 -1
- package/dist/Table/index.js.map +1 -1
- package/dist/Tabs/HorizontalTabs.cjs +2 -2
- package/dist/Tabs/HorizontalTabs.cjs.map +1 -1
- package/dist/Tabs/HorizontalTabs.js +2 -2
- package/dist/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/Tabs/TabLink.cjs +16 -20
- package/dist/Tabs/TabLink.cjs.map +1 -1
- package/dist/Tabs/TabLink.d.ts +1 -1
- package/dist/Tabs/TabLink.js +17 -20
- package/dist/Tabs/TabLink.js.map +1 -1
- package/dist/Tabs/Tabs.cjs.map +1 -1
- package/dist/Tabs/Tabs.js.map +1 -1
- package/dist/Tabs/VerticalTabs.cjs +1 -2
- package/dist/Tabs/VerticalTabs.cjs.map +1 -1
- package/dist/Tabs/VerticalTabs.d.ts +1 -3
- package/dist/Tabs/VerticalTabs.js +1 -2
- package/dist/Tabs/VerticalTabs.js.map +1 -1
- package/dist/Tabs/index.cjs.map +1 -1
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Tag/Tag.cjs +2 -2
- package/dist/Tag/Tag.cjs.map +1 -1
- package/dist/Tag/Tag.js +2 -2
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/Tag/index.cjs.map +1 -1
- package/dist/Tag/index.js.map +1 -1
- package/dist/Tile/Tile.cjs +2 -2
- package/dist/Tile/Tile.cjs.map +1 -1
- package/dist/Tile/Tile.js +2 -2
- package/dist/Tile/Tile.js.map +1 -1
- package/dist/Tile/TileBody.cjs.map +1 -1
- package/dist/Tile/TileBody.d.ts +1 -0
- package/dist/Tile/TileBody.js.map +1 -1
- package/dist/Tile/TileCommonItems.cjs +2 -2
- package/dist/Tile/TileCommonItems.cjs.map +1 -1
- package/dist/Tile/TileCommonItems.js +2 -2
- package/dist/Tile/TileCommonItems.js.map +1 -1
- package/dist/Tile/TileFooter.cjs.map +1 -1
- package/dist/Tile/TileFooter.js.map +1 -1
- package/dist/Tile/TileHeader.cjs.map +1 -1
- package/dist/Tile/TileHeader.js.map +1 -1
- package/dist/Tile/TileTypes.cjs.map +1 -1
- package/dist/Tile/TileTypes.js.map +1 -1
- package/dist/Tile/index.cjs.map +1 -1
- package/dist/Tile/index.js.map +1 -1
- package/dist/Toasters/Toast.cjs +2 -2
- package/dist/Toasters/Toast.cjs.map +1 -1
- package/dist/Toasters/Toast.js +2 -2
- package/dist/Toasters/Toast.js.map +1 -1
- package/dist/Toasters/ToastContext.cjs +7 -2
- package/dist/Toasters/ToastContext.cjs.map +1 -1
- package/dist/Toasters/ToastContext.d.ts +6 -4
- package/dist/Toasters/ToastContext.js +6 -2
- package/dist/Toasters/ToastContext.js.map +1 -1
- package/dist/Toasters/index.cjs.map +1 -1
- package/dist/Toasters/index.js.map +1 -1
- package/dist/Toggles/ToggleButton.cjs +2 -2
- package/dist/Toggles/ToggleButton.cjs.map +1 -1
- package/dist/Toggles/ToggleButton.js +2 -2
- package/dist/Toggles/ToggleButton.js.map +1 -1
- package/dist/Toggles/ToggleSwitch.cjs +2 -2
- package/dist/Toggles/ToggleSwitch.cjs.map +1 -1
- package/dist/Toggles/ToggleSwitch.js +2 -2
- package/dist/Toggles/ToggleSwitch.js.map +1 -1
- package/dist/Toggles/TogglerStyles.cjs.map +1 -1
- package/dist/Toggles/TogglerStyles.js.map +1 -1
- package/dist/Toggles/TogglerTypes.cjs.map +1 -1
- package/dist/Toggles/TogglerTypes.js.map +1 -1
- package/dist/Toggles/index.cjs.map +1 -1
- package/dist/Toggles/index.js.map +1 -1
- package/dist/Tooltips/TooltipStyles.cjs.map +1 -1
- package/dist/Tooltips/TooltipStyles.d.ts +1 -1
- package/dist/Tooltips/TooltipStyles.js.map +1 -1
- package/dist/Tooltips/TooltipTypes.cjs.map +1 -1
- package/dist/Tooltips/TooltipTypes.js.map +1 -1
- package/dist/Tooltips/TooltipWrapper.cjs +2 -2
- package/dist/Tooltips/TooltipWrapper.cjs.map +1 -1
- package/dist/Tooltips/TooltipWrapper.js +2 -2
- package/dist/Tooltips/TooltipWrapper.js.map +1 -1
- package/dist/Tooltips/index.cjs.map +1 -1
- package/dist/Tooltips/index.js.map +1 -1
- package/dist/assets/index.cjs.map +1 -1
- package/dist/assets/index.js.map +1 -1
- package/dist/common/ActionWithin.cjs.map +1 -1
- package/dist/common/ActionWithin.js.map +1 -1
- package/dist/common/ClickOutside.cjs.map +1 -1
- package/dist/common/ClickOutside.js.map +1 -1
- package/dist/common/EventHandlers.cjs.map +1 -1
- package/dist/common/EventHandlers.js.map +1 -1
- package/dist/common/FocusOutside.cjs.map +1 -1
- package/dist/common/FocusOutside.js.map +1 -1
- package/dist/common/FocusVisible.cjs.map +1 -1
- package/dist/common/FocusVisible.d.ts +1 -1
- package/dist/common/FocusVisible.js.map +1 -1
- package/dist/common/InputStyling.cjs.map +1 -1
- package/dist/common/InputStyling.js.map +1 -1
- package/dist/common/NavigationHelper.cjs +8 -6
- package/dist/common/NavigationHelper.cjs.map +1 -1
- package/dist/common/NavigationHelper.js +9 -7
- package/dist/common/NavigationHelper.js.map +1 -1
- package/dist/common/ScrollableContainer.cjs +44 -0
- package/dist/common/ScrollableContainer.cjs.map +1 -0
- package/dist/common/ScrollableContainer.d.ts +2 -0
- package/dist/common/ScrollableContainer.js +28 -0
- package/dist/common/ScrollableContainer.js.map +1 -0
- package/dist/common/StackState.cjs.map +1 -1
- package/dist/common/StackState.js.map +1 -1
- package/dist/common/index.cjs.map +1 -1
- package/dist/common/index.js.map +1 -1
- package/dist/icons/contenticons/ContentIcons.cjs +83 -2
- package/dist/icons/contenticons/ContentIcons.cjs.map +1 -1
- package/dist/icons/contenticons/ContentIcons.d.ts +3 -0
- package/dist/icons/contenticons/ContentIcons.js +72 -0
- package/dist/icons/contenticons/ContentIcons.js.map +1 -1
- package/dist/icons/index.cjs +14 -7
- package/dist/icons/index.cjs.map +1 -1
- package/dist/icons/index.d.ts +1 -0
- package/dist/icons/index.js +14 -7
- package/dist/icons/index.js.map +1 -1
- package/dist/icons/systemicons/SystemIcons.cjs +30 -1
- package/dist/icons/systemicons/SystemIcons.cjs.map +1 -1
- package/dist/icons/systemicons/SystemIcons.d.ts +1 -0
- package/dist/icons/systemicons/SystemIcons.js +26 -0
- package/dist/icons/systemicons/SystemIcons.js.map +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/styles/breakpoints.cjs.map +1 -1
- package/dist/styles/breakpoints.js.map +1 -1
- package/dist/styles/colors.cjs.map +1 -1
- package/dist/styles/colors.js.map +1 -1
- package/dist/styles/focus-styles.cjs.map +1 -1
- package/dist/styles/focus-styles.js.map +1 -1
- package/dist/styles/global.cjs.map +1 -1
- package/dist/styles/global.js.map +1 -1
- package/dist/styles/index.cjs.map +1 -1
- package/dist/styles/index.js.map +1 -1
- package/dist/styles/shadowstyles.cjs.map +1 -1
- package/dist/styles/shadowstyles.js.map +1 -1
- package/dist/styles/typography.cjs +27 -13
- package/dist/styles/typography.cjs.map +1 -1
- package/dist/styles/typography.d.ts +2 -0
- package/dist/styles/typography.js +27 -13
- package/dist/styles/typography.js.map +1 -1
- package/dist/styles/z-indexes.cjs.map +1 -1
- package/dist/styles/z-indexes.js.map +1 -1
- package/dist/types.cjs.map +1 -1
- package/dist/types.js.map +1 -1
- package/dist/utils/utils.cjs +13 -0
- package/dist/utils/utils.cjs.map +1 -0
- package/dist/utils/utils.d.ts +1 -0
- package/dist/utils/utils.js +4 -0
- package/dist/utils/utils.js.map +1 -0
- package/package.json +51 -44
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"AuthPage.js","names":["React","COLORS","ScreenSetsContainer","InformationContainer","InformationContent","InformationHeader","InformationText","InformationImage","AuthPage","showInformationSection","signUp","signUpPlaceholderImage","signInPlaceholderImage","signUpPlaceholderImageAlt","signInPlaceholderImageAlt","signUpInformationHeader","signInInformationHeader","signUpInformationText","signInInformationText","screenSetsContainerId","accent1_20","primary_20"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\n\ntype AuthPageProps = {\n /** set this to 'false' to hide the left side illustration/information section */\n showInformationSection: boolean;\n /** true if 'sign-up' screen-set is showing, otherwise false.\n * The value can be set using 'onBeforeScreenLoad' in 'gigya.accounts.showScreenSet(...)' and checking the loaded screen-set */\n signUp: boolean;\n /** img src string for 'sign-up' placeholder image */\n signUpPlaceholderImage?: string;\n /** img src string for 'sign-in' placeholder image */\n signInPlaceholderImage?: string;\n /** img alt text string for 'sign-up' placeholder image */\n signUpPlaceholderImageAlt?: string;\n /** img alt text string for 'sign-in' placeholder image */\n signInPlaceholderImageAlt?: string;\n /** information header text string below 'sign-up' placeholder image */\n signUpInformationHeader?: string;\n /** information header text string below 'sign-in' placeholder image */\n signInInformationHeader?: string;\n /** information text string below 'sign-up' header text */\n signUpInformationText?: string;\n /** information text string below 'sign-in' header text */\n signInInformationText?: string;\n /** ID that will be given to the SAP CDC screen-sets container (must match 'containerID' in 'gigya.accounts.showScreenSet(...)'!) */\n screenSetsContainerId: string;\n};\n\n/**\n * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.\n * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).\n * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.\n */\nconst AuthPage = ({\n showInformationSection,\n signUp,\n signUpPlaceholderImage,\n signInPlaceholderImage,\n signUpPlaceholderImageAlt,\n signInPlaceholderImageAlt,\n signUpInformationHeader,\n signInInformationHeader,\n signUpInformationText,\n signInInformationText,\n screenSetsContainerId,\n}: AuthPageProps) => {\n return (\n <>\n {showInformationSection && (\n <InformationContainer $color={signUp ? COLORS.accent1_20 : COLORS.primary_20}>\n <InformationContent>\n {(signUpPlaceholderImage || signInPlaceholderImage) && (\n <InformationImage src={signUp ? signUpPlaceholderImage : signInPlaceholderImage} alt={signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt} />\n )}\n {(signUpInformationHeader || signInInformationHeader) && <InformationHeader>{signUp ? signUpInformationHeader : signInInformationHeader}</InformationHeader>}\n {(signUpInformationText || signInInformationText) && <InformationText>{signUp ? signUpInformationText : signInInformationText}</InformationText>}\n </InformationContent>\n </InformationContainer>\n )}\n <ScreenSetsContainer id={screenSetsContainerId} centerContents={!showInformationSection} />\n </>\n );\n};\n\nexport default AuthPage;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,SAASC,oBAAT,EAA+BC,kBAA/B,EAAmDC,iBAAnD,EAAsEC,eAAtE,EAAuFC,gBAAvF,QAA+G,eAA/G;;;;;AA4BA;AACA;AACA;AACA;AACA;AACA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAYI;EAAA,IAXnBC,sBAWmB,QAXnBA,sBAWmB;EAAA,IAVnBC,MAUmB,QAVnBA,MAUmB;EAAA,IATnBC,sBASmB,QATnBA,sBASmB;EAAA,IARnBC,sBAQmB,QARnBA,sBAQmB;EAAA,IAPnBC,yBAOmB,QAPnBA,yBAOmB;EAAA,IANnBC,yBAMmB,QANnBA,yBAMmB;EAAA,IALnBC,uBAKmB,QALnBA,uBAKmB;EAAA,IAJnBC,uBAImB,QAJnBA,uBAImB;EAAA,IAHnBC,qBAGmB,QAHnBA,qBAGmB;EAAA,IAFnBC,qBAEmB,QAFnBA,qBAEmB;EAAA,IADnBC,qBACmB,QADnBA,qBACmB;EACnB,oBACE;IAAA,WACGV,sBAAsB,iBACrB,KAAC,oBAAD;MAAsB,MAAM,EAAEC,MAAM,GAAGT,MAAM,CAACmB,UAAV,GAAuBnB,MAAM,CAACoB,UAAlE;MAAA,uBACE,MAAC,kBAAD;QAAA,WACG,CAACV,sBAAsB,IAAIC,sBAA3B,kBACC,KAAC,gBAAD;UAAkB,GAAG,EAAEF,MAAM,GAAGC,sBAAH,GAA4BC,sBAAzD;UAAiF,GAAG,EAAEF,MAAM,GAAGG,yBAAH,GAA+BC;QAA3H,EAFJ,EAIG,CAACC,uBAAuB,IAAIC,uBAA5B,kBAAwD,KAAC,iBAAD;UAAA,UAAoBN,MAAM,GAAGK,uBAAH,GAA6BC;QAAvD,EAJ3D,EAKG,CAACC,qBAAqB,IAAIC,qBAA1B,kBAAoD,KAAC,eAAD;UAAA,UAAkBR,MAAM,GAAGO,qBAAH,GAA2BC;QAAnD,EALvD;MAAA;IADF,EAFJ,eAYE,KAAC,mBAAD;MAAqB,EAAE,EAAEC,qBAAzB;MAAgD,cAAc,EAAE,CAACV;IAAjE,EAZF;EAAA,EADF;AAgBD,CA7BD;;;EA7BEA,sB;EAGAC,M;EAEAC,sB;EAEAC,sB;EAEAC,yB;EAEAC,yB;EAEAC,uB;EAEAC,uB;EAEAC,qB;EAEAC,qB;EAEAC,qB;;AAuCF,eAAeX,QAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Information.cjs","names":["InformationContainer","styled","AuthPageSection","props","$color","BREAKPOINTS","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","HeadlineXLStyling","COLORS","black","InformationText","p","ParagraphLStyling","ParagraphTextStyle","Regular","neutral_600","InformationImage","img"],"sources":["../../src/AuthPage/Information.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, HeadlineXL, ParagraphTextStyle } from '../styles';\nimport { ComponentLStyling, HeadlineXLStyling, ParagraphLStyling } from '../styles/typography';\n\nexport const InformationContainer = styled(AuthPageSection)<{ $color: string }>`\n display: none;\n background: ${(props) => props.$color};\n\n ${BREAKPOINTS.MEDIUM} {\n display: flex;\n padding-top: 56px;\n }\n`;\n\nexport const InformationContent = styled.div`\n display: flex;\n flex-direction: column;\n align-self: center;\n align-items: center;\n text-align: center;\n max-width: 100%;\n\n ${BREAKPOINTS.LARGE} {\n align-self: flex-end;\n margin-right: 48px;\n }\n`;\n\nexport const InformationHeader = styled.h2`\n ${HeadlineXLStyling(COLORS.black)}\n font-weight: 300;\n margin-bottom: 0;\n`;\n\nexport const InformationText = styled.p`\n ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n margin: 8px 0;\n`;\n\nexport const InformationImage = styled.img`\n height: 275px;\n max-width: 100%;\n`;\n"],"mappings":";;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAG,IAAAC,yBAAA,EAAOC,wBAAP,CAAH,0LAEjB,UAACC,KAAD;EAAA,OAAWA,KAAK,CAACC,MAAjB;AAAA,CAFiB,EAI7BC,mBAAA,CAAYC,MAJiB,CAA1B;;;AAUA,IAAMC,kBAAkB,GAAGN,yBAAA,CAAOO,GAAV,oSAQ3BH,mBAAA,CAAYI,KARe,CAAxB;;;;AAcA,IAAMC,iBAAiB,GAAGT,yBAAA,CAAOU,EAAV,0IAC1B,IAAAC,6BAAA,EAAkBC,cAAA,CAAOC,KAAzB,CAD0B,CAAvB;;;;AAMA,IAAMC,eAAe,GAAGd,yBAAA,CAAOe,CAAV,kHACxB,IAAAC,6BAAA,EAAkBC,0BAAA,CAAmBC,OAArC,EAA8CN,cAAA,CAAOO,WAArD,CADwB,CAArB;;;;AAKA,IAAMC,gBAAgB,GAAGpB,yBAAA,CAAOqB,GAAV,6HAAtB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Information.js","names":["styled","AuthPageSection","BREAKPOINTS","COLORS","ParagraphTextStyle","HeadlineXLStyling","ParagraphLStyling","InformationContainer","props","$color","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","black","InformationText","p","Regular","neutral_600","InformationImage","img"],"sources":["../../src/AuthPage/Information.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, HeadlineXL, ParagraphTextStyle } from '../styles';\nimport { ComponentLStyling, HeadlineXLStyling, ParagraphLStyling } from '../styles/typography';\n\nexport const InformationContainer = styled(AuthPageSection)<{ $color: string }>`\n display: none;\n background: ${(props) => props.$color};\n\n ${BREAKPOINTS.MEDIUM} {\n display: flex;\n padding-top: 56px;\n }\n`;\n\nexport const InformationContent = styled.div`\n display: flex;\n flex-direction: column;\n align-self: center;\n align-items: center;\n text-align: center;\n max-width: 100%;\n\n ${BREAKPOINTS.LARGE} {\n align-self: flex-end;\n margin-right: 48px;\n }\n`;\n\nexport const InformationHeader = styled.h2`\n ${HeadlineXLStyling(COLORS.black)}\n font-weight: 300;\n margin-bottom: 0;\n`;\n\nexport const InformationText = styled.p`\n ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n margin: 8px 0;\n`;\n\nexport const InformationImage = styled.img`\n height: 275px;\n max-width: 100%;\n`;\n"],"mappings":";;;;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8DC,kBAA9D,QAAwF,WAAxF;AACA,SAA4BC,iBAA5B,EAA+CC,iBAA/C,QAAwE,sBAAxE;AAEA,OAAO,IAAMC,oBAAoB,GAAGP,MAAM,CAACC,eAAD,CAAT,4KAEjB,UAACO,KAAD;EAAA,OAAWA,KAAK,CAACC,MAAjB;AAAA,CAFiB,EAI7BP,WAAW,CAACQ,MAJiB,CAA1B;AAUP,OAAO,IAAMC,kBAAkB,GAAGX,MAAM,CAACY,GAAV,sRAQ3BV,WAAW,CAACW,KARe,CAAxB;AAcP,OAAO,IAAMC,iBAAiB,GAAGd,MAAM,CAACe,EAAV,4HAC1BV,iBAAiB,CAACF,MAAM,CAACa,KAAR,CADS,CAAvB;AAMP,OAAO,IAAMC,eAAe,GAAGjB,MAAM,CAACkB,CAAV,oGACxBZ,iBAAiB,CAACF,kBAAkB,CAACe,OAApB,EAA6BhB,MAAM,CAACiB,WAApC,CADO,CAArB;AAKP,OAAO,IAAMC,gBAAgB,GAAGrB,MAAM,CAACsB,GAAV,+GAAtB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"ScreenSetsContainer.cjs","names":["ScreenSetsContainer","styled","AuthPageSection","props","centerContents","BREAKPOINTS","MEDIUM","XLARGE"],"sources":["../../src/AuthPage/ScreenSetsContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS } from '../styles';\n\nconst ScreenSetsContainer = styled(AuthPageSection)<{ centerContents: boolean }>`\n padding: 8px;\n width: calc(100% - 16px);\n align-items: ${props => (props.centerContents ? 'center' : 'unset')};\n\n .gigya-screen-caption {\n display: none;\n }\n\n .gigya-screen {\n max-width: 100%;\n margin: auto;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n .gigya-screen {\n margin: 0;\n padding: 36px 25px !important;\n }\n }\n\n ${BREAKPOINTS.XLARGE} {\n .gigya-screen {\n max-width: 500px;\n }\n }\n`;\n\nexport default ScreenSetsContainer;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEA,IAAMA,mBAAmB,GAAG,IAAAC,yBAAA,EAAOC,wBAAP,CAAH,8bAGR,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAN,GAAuB,QAAvB,GAAkC,OAAvC;AAAA,CAHG,EAcrBC,mBAAA,CAAYC,MAdS,EAqBrBD,mBAAA,CAAYE,MArBS,CAAzB;eA4BeP,mB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"ScreenSetsContainer.js","names":["styled","AuthPageSection","BREAKPOINTS","ScreenSetsContainer","props","centerContents","MEDIUM","XLARGE"],"sources":["../../src/AuthPage/ScreenSetsContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS } from '../styles';\n\nconst ScreenSetsContainer = styled(AuthPageSection)<{ centerContents: boolean }>`\n padding: 8px;\n width: calc(100% - 16px);\n align-items: ${props => (props.centerContents ? 'center' : 'unset')};\n\n .gigya-screen-caption {\n display: none;\n }\n\n .gigya-screen {\n max-width: 100%;\n margin: auto;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n .gigya-screen {\n margin: 0;\n padding: 36px 25px !important;\n }\n }\n\n ${BREAKPOINTS.XLARGE} {\n .gigya-screen {\n max-width: 500px;\n }\n }\n`;\n\nexport default ScreenSetsContainer;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,WAAT,QAA4B,WAA5B;AAEA,IAAMC,mBAAmB,GAAGH,MAAM,CAACC,eAAD,CAAT,gbAGR,UAAAG,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAN,GAAuB,QAAvB,GAAkC,OAAvC;AAAA,CAHG,EAcrBH,WAAW,CAACI,MAdS,EAqBrBJ,WAAW,CAACK,MArBS,CAAzB;AA4BA,eAAeJ,mBAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"_AuthPageSection.cjs","names":["AuthPageSection","styled","section","BREAKPOINTS","MEDIUM"],"sources":["../../src/AuthPage/_AuthPageSection.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\n\nconst AuthPageSection = styled.section`\n display: flex;\n flex: 1;\n flex-direction: column;\n\n ${BREAKPOINTS.MEDIUM} {\n padding: 24px;\n width: calc(50% - 48px);\n }\n`;\n\nexport default AuthPageSection;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEA,IAAMA,eAAe,GAAGC,yBAAA,CAAOC,OAAV,kNAKjBC,mBAAA,CAAYC,MALK,CAArB;;eAWeJ,e"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"_AuthPageSection.js","names":["styled","BREAKPOINTS","AuthPageSection","section","MEDIUM"],"sources":["../../src/AuthPage/_AuthPageSection.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\n\nconst AuthPageSection = styled.section`\n display: flex;\n flex: 1;\n flex-direction: column;\n\n ${BREAKPOINTS.MEDIUM} {\n padding: 24px;\n width: calc(50% - 48px);\n }\n`;\n\nexport default AuthPageSection;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,QAA4B,WAA5B;AAEA,IAAMC,eAAe,GAAGF,MAAM,CAACG,OAAV,oMAKjBF,WAAW,CAACG,MALK,CAArB;AAWA,eAAeF,eAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/AuthPage/index.ts"],"sourcesContent":["import ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\nimport AuthPage from './AuthPage';\nimport { screenSetsErrorMessages_EN } from './screenSetsErrorMessages';\n\nexport { ScreenSetsContainer, InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage, AuthPage, screenSetsErrorMessages_EN };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["ScreenSetsContainer","InformationContainer","InformationContent","InformationHeader","InformationText","InformationImage","AuthPage","screenSetsErrorMessages_EN"],"sources":["../../src/AuthPage/index.ts"],"sourcesContent":["import ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\nimport AuthPage from './AuthPage';\nimport { screenSetsErrorMessages_EN } from './screenSetsErrorMessages';\n\nexport { ScreenSetsContainer, InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage, AuthPage, screenSetsErrorMessages_EN };\n"],"mappings":"AAAA,OAAOA,mBAAP,MAAgC,uBAAhC;AACA,SAASC,oBAAT,EAA+BC,kBAA/B,EAAmDC,iBAAnD,EAAsEC,eAAtE,EAAuFC,gBAAvF,QAA+G,eAA/G;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,SAASC,0BAAT,QAA2C,2BAA3C;AAEA,SAASP,mBAAT,EAA8BC,oBAA9B,EAAoDC,kBAApD,EAAwEC,iBAAxE,EAA2FC,eAA3F,EAA4GC,gBAA5G,EAA8HC,QAA9H,EAAwIC,0BAAxI"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"screenSetsErrorMessages.cjs","names":["screenSetsErrorMessages_EN","email_already_exists","email_address_is_invalid","please_enter_fieldname"],"sources":["../../src/AuthPage/screenSetsErrorMessages.ts"],"sourcesContent":["export const screenSetsErrorMessages_EN = {\n email_already_exists:\n 'An account with that email already exists - try <a href class=\"sign-in-link\" style=\"font-size: inherit;\" data-switch-screen=\"gigya-login-screen\">signing in</a>',\n email_address_is_invalid: 'Invalid email address',\n please_enter_fieldname: 'Enter your %fieldname',\n};\n"],"mappings":";;;;;;AAAO,IAAMA,0BAA0B,GAAG;EACxCC,oBAAoB,EAClB,iKAFsC;EAGxCC,wBAAwB,EAAE,uBAHc;EAIxCC,sBAAsB,EAAE;AAJgB,CAAnC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"screenSetsErrorMessages.js","names":["screenSetsErrorMessages_EN","email_already_exists","email_address_is_invalid","please_enter_fieldname"],"sources":["../../src/AuthPage/screenSetsErrorMessages.ts"],"sourcesContent":["export const screenSetsErrorMessages_EN = {\n email_already_exists:\n 'An account with that email already exists - try <a href class=\"sign-in-link\" style=\"font-size: inherit;\" data-switch-screen=\"gigya-login-screen\">signing in</a>',\n email_address_is_invalid: 'Invalid email address',\n please_enter_fieldname: 'Enter your %fieldname',\n};\n"],"mappings":"AAAA,OAAO,IAAMA,0BAA0B,GAAG;EACxCC,oBAAoB,EAClB,iKAFsC;EAGxCC,wBAAwB,EAAE,uBAHc;EAIxCC,sBAAsB,EAAE;AAJgB,CAAnC"}
|
package/dist/Banners/Banner.cjs
CHANGED
|
@@ -35,6 +35,8 @@ var _HyperLink = require("../HyperLink");
|
|
|
35
35
|
|
|
36
36
|
var _HyperLink2 = require("../HyperLink/HyperLink");
|
|
37
37
|
|
|
38
|
+
var _utils = require("../utils/utils");
|
|
39
|
+
|
|
38
40
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
39
41
|
|
|
40
42
|
var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction", "fullWidth", "className"];
|
|
@@ -45,11 +47,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
45
47
|
|
|
46
48
|
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; }
|
|
47
49
|
|
|
48
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
50
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
49
51
|
|
|
50
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
52
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
51
53
|
|
|
52
|
-
var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n min-height: 48px;\n display: flex;\n color: ", ";\n margin-top: ", ";\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ", " {\n margin: 0 0 0 16px;\n }\n ", " {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ", " {\n &:link{\n color: ", ";\n }\n &:visited{\n color: ", ";\n }\n &:focus,\n &:active{\n background-color: ", ";\n color: ", ";\n }\n }\n
|
|
54
|
+
var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n min-height: 48px;\n display: flex;\n color: ", ";\n margin-top: ", ";\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ", " {\n margin: 0 0 0 16px;\n }\n ", " {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ", " {\n &:link {\n color: ", ";\n }\n &:visited {\n color: ", ";\n }\n &:focus,\n &:active {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.full-width-banner {\n margin: 8px;\n }\n"])), function (props) {
|
|
53
55
|
return props.$type ? props.$type : _styles.COLORS.correct_100;
|
|
54
56
|
}, _styles.COLORS.black, function (props) {
|
|
55
57
|
return props.bottom ? 'auto' : '0';
|
|
@@ -61,7 +63,7 @@ var BannerContainer = _styledComponents.default.div(_templateObject || (_templat
|
|
|
61
63
|
return props.linkFocused;
|
|
62
64
|
}, _styles.COLORS.white);
|
|
63
65
|
|
|
64
|
-
var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ", " {\n margin: 0 32px;\n }\n ", " {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n
|
|
66
|
+
var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ", " {\n margin: 0 32px;\n }\n ", " {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n\n .full-width-banner & {\n margin: 0 16px;\n\n ", " {\n margin: 0 24px;\n }\n ", " {\n margin: 0 48px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium {\n margin: 0 24px;\n }\n\n &.large {\n margin: 0 48px;\n }\n }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
|
|
65
67
|
|
|
66
68
|
var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 0 0 auto;\n"])));
|
|
67
69
|
|
|
@@ -88,7 +90,7 @@ var Banner = function Banner(_ref) {
|
|
|
88
90
|
className = _ref.className,
|
|
89
91
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
90
92
|
|
|
91
|
-
var _React$useState = React.useState(window.innerWidth),
|
|
93
|
+
var _React$useState = React.useState((0, _utils.hasWindow)() ? window.innerWidth : -1),
|
|
92
94
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
93
95
|
width = _React$useState2[0],
|
|
94
96
|
setWidth = _React$useState2[1];
|
|
@@ -99,7 +101,10 @@ var Banner = function Banner(_ref) {
|
|
|
99
101
|
}
|
|
100
102
|
|
|
101
103
|
window.addEventListener('resize', handleResize);
|
|
102
|
-
|
|
104
|
+
return function () {
|
|
105
|
+
return window.removeEventListener('resize', handleResize);
|
|
106
|
+
};
|
|
107
|
+
}, []);
|
|
103
108
|
var bannerParams = {
|
|
104
109
|
typeColor: _styles.COLORS.primary_100,
|
|
105
110
|
accentColor: _styles.COLORS.primary_700,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string, linkVisited: string, linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link{\n color: ${(props) => props.link};\n }\n &:visited{\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active{\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n \n &.full-width-banner{\n margin: 8px;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n \n .full-width-banner & {\n margin: 0 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 24px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 48px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium{\n margin: 0 24px;\n }\n\n &.large{\n margin: 0 48px;\n }\n }\n`;\n\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n }) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: Tip,\n containerType: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800\n };\n switch (type) {\n case 'warning':\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case 'critical':\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case 'positive':\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n \n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n {...rest}>\n <BannerCenter style={{color: bannerParams.accentColor}} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"file":"Banner.cjs"}
|
|
1
|
+
{"version":3,"file":"Banner.cjs","names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentMStyling","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link {\n color: ${(props) => props.link};\n }\n &:visited {\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active {\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n\n &.full-width-banner {\n margin: 8px;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n\n .full-width-banner & {\n margin: 0 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 24px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 48px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium {\n margin: 0 24px;\n }\n\n &.large {\n margin: 0 48px;\n }\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n}) => {\n const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: Tip,\n containerType: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800,\n };\n switch (type) {\n case 'warning':\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case 'critical':\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case 'positive':\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n\n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer\n data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n {...rest}>\n <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"mappings":"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"}
|
package/dist/Banners/Banner.js
CHANGED
|
@@ -7,9 +7,9 @@ var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "li
|
|
|
7
7
|
|
|
8
8
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
9
9
|
|
|
10
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
10
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
11
11
|
|
|
12
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
12
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
13
13
|
|
|
14
14
|
import * as React from 'react';
|
|
15
15
|
import styled from 'styled-components';
|
|
@@ -20,13 +20,14 @@ import { getButtonStyle } from './styles';
|
|
|
20
20
|
import { ComponentMStyling, ComponentResponsive } from '../styles';
|
|
21
21
|
import { HyperLink } from '../HyperLink';
|
|
22
22
|
import { StyledLink } from '../HyperLink/HyperLink';
|
|
23
|
+
import { hasWindow } from '../utils/utils';
|
|
23
24
|
/**
|
|
24
25
|
* Styles for <Banner />
|
|
25
26
|
*/
|
|
26
27
|
|
|
27
28
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
28
29
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
29
|
-
var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n min-height: 48px;\n display: flex;\n color: ", ";\n margin-top: ", ";\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ", " {\n margin: 0 0 0 16px;\n }\n ", " {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ", " {\n &:link{\n color: ", ";\n }\n &:visited{\n color: ", ";\n }\n &:focus,\n &:active{\n background-color: ", ";\n color: ", ";\n }\n }\n
|
|
30
|
+
var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n min-height: 48px;\n display: flex;\n color: ", ";\n margin-top: ", ";\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ", " {\n margin: 0 0 0 16px;\n }\n ", " {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ", " {\n &:link {\n color: ", ";\n }\n &:visited {\n color: ", ";\n }\n &:focus,\n &:active {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.full-width-banner {\n margin: 8px;\n }\n"])), function (props) {
|
|
30
31
|
return props.$type ? props.$type : COLORS.correct_100;
|
|
31
32
|
}, COLORS.black, function (props) {
|
|
32
33
|
return props.bottom ? 'auto' : '0';
|
|
@@ -37,7 +38,7 @@ var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTe
|
|
|
37
38
|
}, function (props) {
|
|
38
39
|
return props.linkFocused;
|
|
39
40
|
}, COLORS.white);
|
|
40
|
-
var BannerCenter = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ", " {\n margin: 0 32px;\n }\n ", " {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n
|
|
41
|
+
var BannerCenter = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ", " {\n margin: 0 32px;\n }\n ", " {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n\n .full-width-banner & {\n margin: 0 16px;\n\n ", " {\n margin: 0 24px;\n }\n ", " {\n margin: 0 48px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium {\n margin: 0 24px;\n }\n\n &.large {\n margin: 0 48px;\n }\n }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
|
|
41
42
|
var ButtonWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin: 0 0 0 auto;\n"])));
|
|
42
43
|
var ButtonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: contents;\n ", ";\n"])), function (props) {
|
|
43
44
|
return props.$type ? getButtonStyle(props.$type) : null;
|
|
@@ -61,7 +62,7 @@ var Banner = function Banner(_ref) {
|
|
|
61
62
|
className = _ref.className,
|
|
62
63
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
63
64
|
|
|
64
|
-
var _React$useState = React.useState(window.innerWidth),
|
|
65
|
+
var _React$useState = React.useState(hasWindow() ? window.innerWidth : -1),
|
|
65
66
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
66
67
|
width = _React$useState2[0],
|
|
67
68
|
setWidth = _React$useState2[1];
|
|
@@ -72,7 +73,10 @@ var Banner = function Banner(_ref) {
|
|
|
72
73
|
}
|
|
73
74
|
|
|
74
75
|
window.addEventListener('resize', handleResize);
|
|
75
|
-
|
|
76
|
+
return function () {
|
|
77
|
+
return window.removeEventListener('resize', handleResize);
|
|
78
|
+
};
|
|
79
|
+
}, []);
|
|
76
80
|
var bannerParams = {
|
|
77
81
|
typeColor: COLORS.primary_100,
|
|
78
82
|
accentColor: COLORS.primary_700,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_800","correct_700","correct_200","correct_20","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string, linkVisited: string, linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link{\n color: ${(props) => props.link};\n }\n &:visited{\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active{\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n \n &.full-width-banner{\n margin: 8px;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n \n .full-width-banner & {\n margin: 0 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 24px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 48px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium{\n margin: 0 24px;\n }\n\n &.large{\n margin: 0 48px;\n }\n }\n`;\n\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n }) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: Tip,\n containerType: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800\n };\n switch (type) {\n case 'warning':\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case 'critical':\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case 'positive':\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n \n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n {...rest}>\n <BannerCenter style={{color: bannerParams.accentColor}} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
|
|
1
|
+
{"version":3,"file":"Banner.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","hasWindow","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_800","correct_700","correct_200","correct_20","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link {\n color: ${(props) => props.link};\n }\n &:visited {\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active {\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n\n &.full-width-banner {\n margin: 8px;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n\n .full-width-banner & {\n margin: 0 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 24px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 48px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium {\n margin: 0 24px;\n }\n\n &.large {\n margin: 0 48px;\n }\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n}) => {\n const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: Tip,\n containerType: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800,\n };\n switch (type) {\n case 'warning':\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case 'critical':\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case 'positive':\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n\n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer\n data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n {...rest}>\n <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"mappings":"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"}
|
|
@@ -37,9 +37,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
37
37
|
|
|
38
38
|
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; }
|
|
39
39
|
|
|
40
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
40
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
41
41
|
|
|
42
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
42
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
43
43
|
|
|
44
44
|
var BannersWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n"])), _styles.COLORS.primary_20);
|
|
45
45
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"OverviewBanner.cjs","names":["BannersWrapper","styled","div","COLORS","primary_20","BannerContent","PageWidth","BREAKPOINTS","MEDIUM","HeadlineXSStyling","black","OverviewBanner","children","testId","rest"],"sources":["../../src/Banners/OverviewBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS} from '../styles';\nimport {PageWidth} from '../Layouts';\nimport {HeadlineXSStyling} from '../styles/typography';\n\nconst BannersWrapper = styled.div`\n background-color: ${COLORS.primary_20};\n`;\n\nconst BannerContent = styled(PageWidth)`\n background-color: ${COLORS.primary_20};\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n ${BREAKPOINTS.MEDIUM} {\n flex-direction: row;\n padding: 48px 12px;\n }\n\n & > *:first-child {\n padding-top: 12px;\n width: 320px;\n height: 180px;\n ${BREAKPOINTS.MEDIUM} {\n padding-top: 0;\n margin-right: 20px;\n width: 384px;\n height: 216px;\n }\n }\n & h2 {\n ${HeadlineXSStyling(COLORS.black)}\n margin: 16px 0 24px 0;\n }\n & p {\n margin: 0;\n padding: 0 0 28px 0;\n max-width: 310px;\n }\n & div {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n margin-bottom: 18px;\n ${BREAKPOINTS.MEDIUM} {\n margin-left: 20px;\n align-items: start;\n justify-content: start;\n width: 384px;\n }\n }\n`;\n\ntype Props = { children: any; testId?: string } & React.HTMLAttributes<HTMLDivElement>;\n\nconst OverviewBanner = ({ children, testId, ...rest }: Props) => {\n return (\n <BannersWrapper {...rest}>\n <BannerContent data-testid={testId}>{children}</BannerContent>\n </BannersWrapper>\n );\n};\n\nexport default OverviewBanner;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,yBAAA,CAAOC,GAAV,iHACEC,cAAA,CAAOC,UADT,CAApB;;AAIA,IAAMC,aAAa,GAAG,IAAAJ,yBAAA,EAAOK,kBAAP,CAAH,w3BACGH,cAAA,CAAOC,UADV,EAOfG,mBAAA,CAAYC,MAPG,EAgBbD,mBAAA,CAAYC,MAhBC,EAwBb,IAAAC,6BAAA,EAAkBN,cAAA,CAAOO,KAAzB,CAxBa,EAsCbH,mBAAA,CAAYC,MAtCC,CAAnB;;AAiDA,IAAMG,cAAc,GAAG,SAAjBA,cAAiB,OAA0C;EAAA,IAAvCC,QAAuC,QAAvCA,QAAuC;EAAA,IAA7BC,MAA6B,QAA7BA,MAA6B;EAAA,IAAlBC,IAAkB;EAC/D,oBACE,qBAAC,cAAD,kCAAoBA,IAApB;IAAA,uBACE,qBAAC,aAAD;MAAe,eAAaD,MAA5B;MAAA,UAAqCD;IAArC;EADF,GADF;AAKD,CAND;;;EAFeA,Q;EAAeC,M;;eAUfF,c"}
|
|
@@ -6,9 +6,9 @@ var _excluded = ["children", "testId"];
|
|
|
6
6
|
|
|
7
7
|
var _templateObject, _templateObject2;
|
|
8
8
|
|
|
9
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
9
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
10
10
|
|
|
11
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
11
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
12
12
|
|
|
13
13
|
import * as React from 'react';
|
|
14
14
|
import styled from 'styled-components';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"OverviewBanner.js","names":["React","styled","BREAKPOINTS","COLORS","PageWidth","HeadlineXSStyling","BannersWrapper","div","primary_20","BannerContent","MEDIUM","black","OverviewBanner","children","testId","rest"],"sources":["../../src/Banners/OverviewBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS} from '../styles';\nimport {PageWidth} from '../Layouts';\nimport {HeadlineXSStyling} from '../styles/typography';\n\nconst BannersWrapper = styled.div`\n background-color: ${COLORS.primary_20};\n`;\n\nconst BannerContent = styled(PageWidth)`\n background-color: ${COLORS.primary_20};\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n ${BREAKPOINTS.MEDIUM} {\n flex-direction: row;\n padding: 48px 12px;\n }\n\n & > *:first-child {\n padding-top: 12px;\n width: 320px;\n height: 180px;\n ${BREAKPOINTS.MEDIUM} {\n padding-top: 0;\n margin-right: 20px;\n width: 384px;\n height: 216px;\n }\n }\n & h2 {\n ${HeadlineXSStyling(COLORS.black)}\n margin: 16px 0 24px 0;\n }\n & p {\n margin: 0;\n padding: 0 0 28px 0;\n max-width: 310px;\n }\n & div {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n margin-bottom: 18px;\n ${BREAKPOINTS.MEDIUM} {\n margin-left: 20px;\n align-items: start;\n justify-content: start;\n width: 384px;\n }\n }\n`;\n\ntype Props = { children: any; testId?: string } & React.HTMLAttributes<HTMLDivElement>;\n\nconst OverviewBanner = ({ children, testId, ...rest }: Props) => {\n return (\n <BannersWrapper {...rest}>\n <BannerContent data-testid={testId}>{children}</BannerContent>\n </BannersWrapper>\n );\n};\n\nexport default OverviewBanner;\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,EAAqBC,MAArB,QAAkC,WAAlC;AACA,SAAQC,SAAR,QAAwB,YAAxB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;;AAEA,IAAMC,cAAc,GAAGL,MAAM,CAACM,GAAV,mGACEJ,MAAM,CAACK,UADT,CAApB;AAIA,IAAMC,aAAa,GAAGR,MAAM,CAACG,SAAD,CAAT,02BACGD,MAAM,CAACK,UADV,EAOfN,WAAW,CAACQ,MAPG,EAgBbR,WAAW,CAACQ,MAhBC,EAwBbL,iBAAiB,CAACF,MAAM,CAACQ,KAAR,CAxBJ,EAsCbT,WAAW,CAACQ,MAtCC,CAAnB;;AAiDA,IAAME,cAAc,GAAG,SAAjBA,cAAiB,OAA0C;EAAA,IAAvCC,QAAuC,QAAvCA,QAAuC;EAAA,IAA7BC,MAA6B,QAA7BA,MAA6B;EAAA,IAAlBC,IAAkB;;EAC/D,oBACE,KAAC,cAAD,kCAAoBA,IAApB;IAAA,uBACE,KAAC,aAAD;MAAe,eAAaD,MAA5B;MAAA,UAAqCD;IAArC;EADF,GADF;AAKD,CAND;;;EAFeA,Q;EAAeC,M;;AAU9B,eAAeF,cAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Banners/index.ts"],"sourcesContent":["import Banner from './Banner';\nimport OverviewBanner from './OverviewBanner';\n\n// eslint-disable-next-line import/prefer-default-export\nexport { Banner, OverviewBanner };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["Banner","OverviewBanner"],"sources":["../../src/Banners/index.ts"],"sourcesContent":["import Banner from './Banner';\nimport OverviewBanner from './OverviewBanner';\n\n// eslint-disable-next-line import/prefer-default-export\nexport { Banner, OverviewBanner };\n"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,UAAnB;AACA,OAAOC,cAAP,MAA2B,kBAA3B,C,CAEA;;AACA,SAASD,MAAT,EAAiBC,cAAjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"styles.cjs","names":["getButtonStyle","type","style","svgFill","COLORS","primary_500","hoverBgColor","primary_200","hoverSvgFill","primary_700","activeBgColor","primary_300","activeSvgFill","primary_800","focusBgColor","focusSvgFill","warning_500","warning_200","warning_700","warning_300","warning_800","critical_600","critical_200","critical_700","critical_300","critical_800","correct_500","correct_200","correct_700","correct_300","correct_800","css","StyledSecondaryIconButton"],"sources":["../../src/Banners/styles.tsx"],"sourcesContent":["import { css } from 'styled-components';\nimport { StyledSecondaryIconButton } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nexport const getButtonStyle = (type: string) => {\n let style = {\n svgFill: COLORS.primary_500,\n hoverBgColor: COLORS.primary_200,\n hoverSvgFill: COLORS.primary_700,\n activeBgColor: COLORS.primary_300,\n activeSvgFill: COLORS.primary_800,\n focusBgColor: COLORS.primary_200,\n focusSvgFill: COLORS.primary_700\n };\n\n switch(type)\n {\n case 'warning':\n style = {\n svgFill: COLORS.warning_500,\n hoverBgColor: COLORS.warning_200,\n hoverSvgFill: COLORS.warning_700,\n activeBgColor: COLORS.warning_300,\n activeSvgFill: COLORS.warning_800,\n focusBgColor: COLORS.warning_200,\n focusSvgFill: COLORS.warning_700\n };\n break;\n \n case 'critical':\n style = {\n svgFill: COLORS.critical_600,\n hoverBgColor: COLORS.critical_200,\n hoverSvgFill: COLORS.critical_700,\n activeBgColor: COLORS.critical_300,\n activeSvgFill: COLORS.critical_800,\n focusBgColor: COLORS.critical_200,\n focusSvgFill: COLORS.critical_700\n };\n break;\n\n case 'positive':\n style = {\n svgFill: COLORS.correct_500,\n hoverBgColor: COLORS.correct_200,\n hoverSvgFill: COLORS.correct_700,\n activeBgColor: COLORS.correct_300,\n activeSvgFill: COLORS.correct_800,\n focusBgColor: COLORS.correct_200,\n focusSvgFill: COLORS.correct_700\n };\n break;\n }\n\n return css`\n ${StyledSecondaryIconButton} {\n div {\n background-color: transparent;\n }\n div svg path,\n div svg {\n fill: ${style.svgFill};\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${style.hoverBgColor};\n }\n div svg path,\n div svg {\n fill: ${style.hoverSvgFill};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${style.activeBgColor};\n }\n div svg path,\n div svg {\n fill: ${style.activeSvgFill};\n }\n }\n }`;\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEO,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,IAAD,EAAkB;EAC9C,IAAIC,KAAK,GAAG;IACVC,OAAO,EAAEC,cAAA,CAAOC,WADN;IAEVC,YAAY,EAAEF,cAAA,CAAOG,WAFX;IAGVC,YAAY,EAAEJ,cAAA,CAAOK,WAHX;IAIVC,aAAa,EAAEN,cAAA,CAAOO,WAJZ;IAKVC,aAAa,EAAER,cAAA,CAAOS,WALZ;IAMVC,YAAY,EAAEV,cAAA,CAAOG,WANX;IAOVQ,YAAY,EAAEX,cAAA,CAAOK;EAPX,CAAZ;;EAUA,QAAOR,IAAP;IAEE,KAAK,SAAL;MACEC,KAAK,GAAG;QACNC,OAAO,EAAEC,cAAA,CAAOY,WADV;QAENV,YAAY,EAAEF,cAAA,CAAOa,WAFf;QAGNT,YAAY,EAAEJ,cAAA,CAAOc,WAHf;QAINR,aAAa,EAAEN,cAAA,CAAOe,WAJhB;QAKNP,aAAa,EAAER,cAAA,CAAOgB,WALhB;QAMNN,YAAY,EAAEV,cAAA,CAAOa,WANf;QAONF,YAAY,EAAEX,cAAA,CAAOc;MAPf,CAAR;MASA;;IAEF,KAAK,UAAL;MACEhB,KAAK,GAAG;QACNC,OAAO,EAAEC,cAAA,CAAOiB,YADV;QAENf,YAAY,EAAEF,cAAA,CAAOkB,YAFf;QAGNd,YAAY,EAAEJ,cAAA,CAAOmB,YAHf;QAINb,aAAa,EAAEN,cAAA,CAAOoB,YAJhB;QAKNZ,aAAa,EAAER,cAAA,CAAOqB,YALhB;QAMNX,YAAY,EAAEV,cAAA,CAAOkB,YANf;QAONP,YAAY,EAAEX,cAAA,CAAOmB;MAPf,CAAR;MASA;;IAEF,KAAK,UAAL;MACErB,KAAK,GAAG;QACNC,OAAO,EAAEC,cAAA,CAAOsB,WADV;QAENpB,YAAY,EAAEF,cAAA,CAAOuB,WAFf;QAGNnB,YAAY,EAAEJ,cAAA,CAAOwB,WAHf;QAINlB,aAAa,EAAEN,cAAA,CAAOyB,WAJhB;QAKNjB,aAAa,EAAER,cAAA,CAAO0B,WALhB;QAMNhB,YAAY,EAAEV,cAAA,CAAOuB,WANf;QAONZ,YAAY,EAAEX,cAAA,CAAOwB;MAPf,CAAR;MASA;EApCJ;;EAuCA,WAAOG,qBAAP,qhBACIC,qCADJ,EAOY9B,KAAK,CAACC,OAPlB,EAW0BD,KAAK,CAACI,YAXhC,EAecJ,KAAK,CAACM,YAfpB,EAoBoBN,KAAK,CAACQ,aApB1B,EAwBcR,KAAK,CAACU,aAxBpB;AA4BD,CA9EM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"styles.js","names":["css","StyledSecondaryIconButton","COLORS","getButtonStyle","type","style","svgFill","primary_500","hoverBgColor","primary_200","hoverSvgFill","primary_700","activeBgColor","primary_300","activeSvgFill","primary_800","focusBgColor","focusSvgFill","warning_500","warning_200","warning_700","warning_300","warning_800","critical_600","critical_200","critical_700","critical_300","critical_800","correct_500","correct_200","correct_700","correct_300","correct_800"],"sources":["../../src/Banners/styles.tsx"],"sourcesContent":["import { css } from 'styled-components';\nimport { StyledSecondaryIconButton } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nexport const getButtonStyle = (type: string) => {\n let style = {\n svgFill: COLORS.primary_500,\n hoverBgColor: COLORS.primary_200,\n hoverSvgFill: COLORS.primary_700,\n activeBgColor: COLORS.primary_300,\n activeSvgFill: COLORS.primary_800,\n focusBgColor: COLORS.primary_200,\n focusSvgFill: COLORS.primary_700\n };\n\n switch(type)\n {\n case 'warning':\n style = {\n svgFill: COLORS.warning_500,\n hoverBgColor: COLORS.warning_200,\n hoverSvgFill: COLORS.warning_700,\n activeBgColor: COLORS.warning_300,\n activeSvgFill: COLORS.warning_800,\n focusBgColor: COLORS.warning_200,\n focusSvgFill: COLORS.warning_700\n };\n break;\n \n case 'critical':\n style = {\n svgFill: COLORS.critical_600,\n hoverBgColor: COLORS.critical_200,\n hoverSvgFill: COLORS.critical_700,\n activeBgColor: COLORS.critical_300,\n activeSvgFill: COLORS.critical_800,\n focusBgColor: COLORS.critical_200,\n focusSvgFill: COLORS.critical_700\n };\n break;\n\n case 'positive':\n style = {\n svgFill: COLORS.correct_500,\n hoverBgColor: COLORS.correct_200,\n hoverSvgFill: COLORS.correct_700,\n activeBgColor: COLORS.correct_300,\n activeSvgFill: COLORS.correct_800,\n focusBgColor: COLORS.correct_200,\n focusSvgFill: COLORS.correct_700\n };\n break;\n }\n\n return css`\n ${StyledSecondaryIconButton} {\n div {\n background-color: transparent;\n }\n div svg path,\n div svg {\n fill: ${style.svgFill};\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${style.hoverBgColor};\n }\n div svg path,\n div svg {\n fill: ${style.hoverSvgFill};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${style.activeBgColor};\n }\n div svg path,\n div svg {\n fill: ${style.activeSvgFill};\n }\n }\n }`;\n};\n"],"mappings":";;;;AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,yBAAT,QAA0C,sBAA1C;AACA,SAASC,MAAT,QAAuB,WAAvB;AAEA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,IAAD,EAAkB;EAC9C,IAAIC,KAAK,GAAG;IACVC,OAAO,EAAEJ,MAAM,CAACK,WADN;IAEVC,YAAY,EAAEN,MAAM,CAACO,WAFX;IAGVC,YAAY,EAAER,MAAM,CAACS,WAHX;IAIVC,aAAa,EAAEV,MAAM,CAACW,WAJZ;IAKVC,aAAa,EAAEZ,MAAM,CAACa,WALZ;IAMVC,YAAY,EAAEd,MAAM,CAACO,WANX;IAOVQ,YAAY,EAAEf,MAAM,CAACS;EAPX,CAAZ;;EAUA,QAAOP,IAAP;IAEE,KAAK,SAAL;MACEC,KAAK,GAAG;QACNC,OAAO,EAAEJ,MAAM,CAACgB,WADV;QAENV,YAAY,EAAEN,MAAM,CAACiB,WAFf;QAGNT,YAAY,EAAER,MAAM,CAACkB,WAHf;QAINR,aAAa,EAAEV,MAAM,CAACmB,WAJhB;QAKNP,aAAa,EAAEZ,MAAM,CAACoB,WALhB;QAMNN,YAAY,EAAEd,MAAM,CAACiB,WANf;QAONF,YAAY,EAAEf,MAAM,CAACkB;MAPf,CAAR;MASA;;IAEF,KAAK,UAAL;MACEf,KAAK,GAAG;QACNC,OAAO,EAAEJ,MAAM,CAACqB,YADV;QAENf,YAAY,EAAEN,MAAM,CAACsB,YAFf;QAGNd,YAAY,EAAER,MAAM,CAACuB,YAHf;QAINb,aAAa,EAAEV,MAAM,CAACwB,YAJhB;QAKNZ,aAAa,EAAEZ,MAAM,CAACyB,YALhB;QAMNX,YAAY,EAAEd,MAAM,CAACsB,YANf;QAONP,YAAY,EAAEf,MAAM,CAACuB;MAPf,CAAR;MASA;;IAEF,KAAK,UAAL;MACEpB,KAAK,GAAG;QACNC,OAAO,EAAEJ,MAAM,CAAC0B,WADV;QAENpB,YAAY,EAAEN,MAAM,CAAC2B,WAFf;QAGNnB,YAAY,EAAER,MAAM,CAAC4B,WAHf;QAINlB,aAAa,EAAEV,MAAM,CAAC6B,WAJhB;QAKNjB,aAAa,EAAEZ,MAAM,CAAC8B,WALhB;QAMNhB,YAAY,EAAEd,MAAM,CAAC2B,WANf;QAONZ,YAAY,EAAEf,MAAM,CAAC4B;MAPf,CAAR;MASA;EApCJ;;EAuCA,OAAO9B,GAAP,sgBACIC,yBADJ,EAOYI,KAAK,CAACC,OAPlB,EAW0BD,KAAK,CAACG,YAXhC,EAecH,KAAK,CAACK,YAfpB,EAoBoBL,KAAK,CAACO,aApB1B,EAwBcP,KAAK,CAACS,aAxBpB;AA4BD,CA9EM"}
|