@laerdal/life-react-components 1.2.2-dev.9 → 1.3.1-dev.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/Accordion/AccordionItem.js +70 -0
- package/dist/esm/Accordion/AccordionItem.js.map +1 -0
- package/dist/esm/Accordion/AccordionMenu.js +61 -0
- package/dist/esm/Accordion/AccordionMenu.js.map +1 -0
- package/dist/esm/Accordion/__tests__/AccordionMenu.test.js +53 -0
- package/dist/esm/Accordion/__tests__/AccordionMenu.test.js.map +1 -0
- package/dist/esm/Accordion/index.js +4 -0
- package/dist/esm/Accordion/index.js.map +1 -0
- package/dist/esm/Accordion/styles.js +75 -0
- package/dist/esm/Accordion/styles.js.map +1 -0
- package/dist/esm/Banners/Banner.js +0 -1
- package/dist/esm/Banners/Banner.js.map +1 -1
- package/dist/esm/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/esm/Button/BackButton.js +4 -4
- package/dist/esm/Button/BackButton.js.map +1 -1
- package/dist/esm/Button/Button.js +8 -53
- package/dist/esm/Button/Button.js.map +1 -1
- package/dist/esm/Button/Iconbutton.js +5 -2
- package/dist/esm/Button/Iconbutton.js.map +1 -1
- package/dist/esm/Button/__tests__/BackButton.test.js +4 -3
- package/dist/esm/Button/__tests__/BackButton.test.js.map +1 -1
- package/dist/esm/Chips/ActionChip.js +3 -2
- package/dist/esm/Chips/ActionChip.js.map +1 -1
- package/dist/esm/Chips/ChipInput.js +2 -1
- package/dist/esm/Chips/ChipInput.js.map +1 -1
- package/dist/esm/Chips/FilterChip.js +3 -2
- package/dist/esm/Chips/FilterChip.js.map +1 -1
- package/dist/esm/Chips/InputChip.js +3 -2
- package/dist/esm/Chips/InputChip.js.map +1 -1
- package/dist/esm/Dropdown/BasicDropdown.js +19 -12
- package/dist/esm/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/esm/Dropdown/ChipDropdownInput.js +3 -2
- package/dist/esm/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/esm/Dropdown/CommonStyling.js +71 -71
- package/dist/esm/Dropdown/CommonStyling.js.map +1 -1
- package/dist/esm/Dropdown/DropdownContent.js +13 -1
- package/dist/esm/Dropdown/DropdownContent.js.map +1 -1
- package/dist/esm/Dropdown/DropdownFilter.js +3 -4
- package/dist/esm/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/Avatar.js +2 -2
- package/dist/esm/GlobalNavigationBar/Avatar.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/ExtendedMainMenu.js +4 -2
- package/dist/esm/GlobalNavigationBar/ExtendedMainMenu.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/GlobalNavigationBar.js +6 -2
- package/dist/esm/GlobalNavigationBar/GlobalNavigationBar.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/Logo.js +10 -10
- package/dist/esm/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/UserMenu/MobileUserMenu.js +2 -1
- package/dist/esm/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js +2 -1
- package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/mobile/CommonStyles.js +8 -1
- package/dist/esm/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
- package/dist/esm/HyperLink/HyperLink.js +20 -17
- package/dist/esm/HyperLink/HyperLink.js.map +1 -1
- package/dist/esm/InputFields/Checkbox.js +27 -16
- package/dist/esm/InputFields/Checkbox.js.map +1 -1
- package/dist/esm/InputFields/DatepickerField.js +6 -0
- package/dist/esm/InputFields/DatepickerField.js.map +1 -1
- package/dist/esm/InputFields/Label.js +1 -2
- package/dist/esm/InputFields/Label.js.map +1 -1
- package/dist/esm/InputFields/PasswordField.js +1 -2
- package/dist/esm/InputFields/PasswordField.js.map +1 -1
- package/dist/esm/InputFields/QuickSearch.js +2 -2
- package/dist/esm/InputFields/QuickSearch.js.map +1 -1
- package/dist/esm/InputFields/RadioButton.js +21 -14
- package/dist/esm/InputFields/RadioButton.js.map +1 -1
- package/dist/esm/InputFields/ResponsiveComponentWrapper.js +2 -2
- package/dist/esm/InputFields/ResponsiveComponentWrapper.js.map +1 -1
- package/dist/esm/InputFields/SearchBar.js +13 -14
- package/dist/esm/InputFields/SearchBar.js.map +1 -1
- package/dist/esm/InputFields/TextField.js +0 -1
- package/dist/esm/InputFields/TextField.js.map +1 -1
- package/dist/esm/InputFields/Textarea.js +1 -2
- package/dist/esm/InputFields/Textarea.js.map +1 -1
- package/dist/esm/InputFields/__tests__/QuickSearch.test.js +2 -1
- package/dist/esm/InputFields/__tests__/QuickSearch.test.js.map +1 -1
- package/dist/esm/InputFields/components/SearchBarInput.js +0 -1
- package/dist/esm/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/esm/List/ListRow.js +4 -1
- package/dist/esm/List/ListRow.js.map +1 -1
- package/dist/esm/LoadingIndicator/LoadingIndicator.js +4 -4
- package/dist/esm/LoadingIndicator/LoadingIndicator.js.map +1 -1
- package/dist/esm/Modals/ModalContainer.js +8 -1
- package/dist/esm/Modals/ModalContainer.js.map +1 -1
- package/dist/esm/Modals/ModalDialog.js +76 -26
- package/dist/esm/Modals/ModalDialog.js.map +1 -1
- package/dist/esm/Modals/ModalStyles.js +38 -21
- package/dist/esm/Modals/ModalStyles.js.map +1 -1
- package/dist/esm/Modals/ModalTypes.js +2 -0
- package/dist/esm/Modals/ModalTypes.js.map +1 -0
- package/dist/esm/NavItem/NavItem.js +4 -0
- package/dist/esm/NavItem/NavItem.js.map +1 -1
- package/dist/esm/NotificationDot/NotificationDot.js +9 -9
- package/dist/esm/NotificationDot/NotificationDot.js.map +1 -1
- package/dist/esm/NotificationDot/__tests__/NotificationDot.test.js +3 -2
- package/dist/esm/NotificationDot/__tests__/NotificationDot.test.js.map +1 -1
- package/dist/esm/Paginator/Paginator.js +60 -48
- package/dist/esm/Paginator/Paginator.js.map +1 -1
- package/dist/esm/Paginator/__tests__/Paginator.test.js +4 -4
- package/dist/esm/Paginator/__tests__/Paginator.test.js.map +1 -1
- package/dist/esm/Switcher/MobileSwitcherMenu.js +2 -1
- package/dist/esm/Switcher/MobileSwitcherMenu.js.map +1 -1
- package/dist/esm/Switcher/SwitcherMenuItem.js +5 -0
- package/dist/esm/Switcher/SwitcherMenuItem.js.map +1 -1
- package/dist/esm/Table/Table.js +1 -1
- package/dist/esm/Table/Table.js.map +1 -1
- package/dist/esm/Tabs/HorizontalTabs.js +15 -9
- package/dist/esm/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/esm/Tabs/TabLink.js +17 -6
- package/dist/esm/Tabs/TabLink.js.map +1 -1
- package/dist/esm/Tabs/Tabs.js +14 -14
- package/dist/esm/Tabs/Tabs.js.map +1 -1
- package/dist/esm/Tabs/VerticalTabs.js +2 -2
- package/dist/esm/Tabs/VerticalTabs.js.map +1 -1
- package/dist/esm/Toasters/ToastContext.js +2 -1
- package/dist/esm/Toasters/ToastContext.js.map +1 -1
- package/dist/esm/Tooltips/TooltipStyles.js +6 -5
- package/dist/esm/Tooltips/TooltipStyles.js.map +1 -1
- package/dist/esm/Tooltips/TooltipTypes.js.map +1 -1
- package/dist/esm/Tooltips/TooltipWrapper.js +4 -1
- package/dist/esm/Tooltips/TooltipWrapper.js.map +1 -1
- package/dist/esm/icons/index.js +1 -1
- package/dist/esm/icons/index.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/styles/typography.js +34 -14
- package/dist/esm/styles/typography.js.map +1 -1
- package/dist/esm/styles/z-indexes.js +14 -0
- package/dist/esm/styles/z-indexes.js.map +1 -0
- package/dist/esm/types.js +1 -0
- package/dist/esm/types.js.map +1 -1
- package/dist/js/Accordion/AccordionItem.d.ts +9 -0
- package/dist/js/Accordion/AccordionItem.js +101 -0
- package/dist/js/Accordion/AccordionItem.js.map +1 -0
- package/dist/js/Accordion/AccordionMenu.d.ts +17 -0
- package/dist/js/Accordion/AccordionMenu.js +111 -0
- package/dist/js/Accordion/AccordionMenu.js.map +1 -0
- package/dist/js/Accordion/__tests__/AccordionMenu.test.js +101 -0
- package/dist/js/Accordion/__tests__/AccordionMenu.test.js.map +1 -0
- package/dist/js/Accordion/index.d.ts +3 -0
- package/dist/js/Accordion/index.js +30 -0
- package/dist/js/Accordion/index.js.map +1 -0
- package/dist/js/Accordion/styles.d.ts +11 -0
- package/dist/js/Accordion/styles.js +52 -0
- package/dist/js/Accordion/styles.js.map +1 -0
- package/dist/js/Banners/Banner.d.ts +2 -1
- package/dist/js/Banners/Banner.js +0 -1
- package/dist/js/Banners/Banner.js.map +1 -1
- package/dist/js/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/js/Button/BackButton.d.ts +2 -1
- package/dist/js/Button/BackButton.js +5 -4
- package/dist/js/Button/BackButton.js.map +1 -1
- package/dist/js/Button/Button.js +6 -12
- package/dist/js/Button/Button.js.map +1 -1
- package/dist/js/Button/Iconbutton.d.ts +1 -1
- package/dist/js/Button/Iconbutton.js +16 -9
- package/dist/js/Button/Iconbutton.js.map +1 -1
- package/dist/js/Button/__tests__/BackButton.test.js +5 -3
- package/dist/js/Button/__tests__/BackButton.test.js.map +1 -1
- package/dist/js/Chips/ActionChip.js +4 -2
- package/dist/js/Chips/ActionChip.js.map +1 -1
- package/dist/js/Chips/ChipInput.js +3 -1
- package/dist/js/Chips/ChipInput.js.map +1 -1
- package/dist/js/Chips/ChipTypes.d.ts +3 -3
- package/dist/js/Chips/FilterChip.js +4 -2
- package/dist/js/Chips/FilterChip.js.map +1 -1
- package/dist/js/Chips/InputChip.js +4 -2
- package/dist/js/Chips/InputChip.js.map +1 -1
- package/dist/js/Dropdown/BasicDropdown.d.ts +6 -2
- package/dist/js/Dropdown/BasicDropdown.js +19 -12
- package/dist/js/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/js/Dropdown/ChipDropdownInput.d.ts +0 -3
- package/dist/js/Dropdown/ChipDropdownInput.js +4 -2
- package/dist/js/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/js/Dropdown/CommonStyling.d.ts +2 -0
- package/dist/js/Dropdown/CommonStyling.js +8 -4
- package/dist/js/Dropdown/CommonStyling.js.map +1 -1
- package/dist/js/Dropdown/DropdownContent.js +5 -3
- package/dist/js/Dropdown/DropdownContent.js.map +1 -1
- package/dist/js/Dropdown/DropdownFilter.d.ts +2 -1
- package/dist/js/Dropdown/DropdownFilter.js +3 -4
- package/dist/js/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/js/GlobalNavigationBar/Avatar.js +2 -2
- package/dist/js/GlobalNavigationBar/Avatar.js.map +1 -1
- package/dist/js/GlobalNavigationBar/ExtendedMainMenu.js +6 -2
- package/dist/js/GlobalNavigationBar/ExtendedMainMenu.js.map +1 -1
- package/dist/js/GlobalNavigationBar/GlobalNavigationBar.js +5 -3
- package/dist/js/GlobalNavigationBar/GlobalNavigationBar.js.map +1 -1
- package/dist/js/GlobalNavigationBar/Logo.js +9 -9
- package/dist/js/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/js/GlobalNavigationBar/UserMenu/MobileUserMenu.js +3 -1
- package/dist/js/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map +1 -1
- package/dist/js/GlobalNavigationBar/UserMenu/UserMenu.js +3 -1
- package/dist/js/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
- package/dist/js/GlobalNavigationBar/mobile/CommonStyles.js +4 -2
- package/dist/js/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
- package/dist/js/HyperLink/HyperLink.d.ts +2 -2
- package/dist/js/HyperLink/HyperLink.js +19 -15
- package/dist/js/HyperLink/HyperLink.js.map +1 -1
- package/dist/js/InputFields/Checkbox.js +9 -5
- package/dist/js/InputFields/Checkbox.js.map +1 -1
- package/dist/js/InputFields/DatepickerField.js +3 -1
- package/dist/js/InputFields/DatepickerField.js.map +1 -1
- package/dist/js/InputFields/Label.d.ts +2 -1
- package/dist/js/InputFields/Label.js +0 -1
- package/dist/js/InputFields/Label.js.map +1 -1
- package/dist/js/InputFields/PasswordField.d.ts +2 -1
- package/dist/js/InputFields/PasswordField.js +1 -2
- package/dist/js/InputFields/PasswordField.js.map +1 -1
- package/dist/js/InputFields/QuickSearch.d.ts +2 -1
- package/dist/js/InputFields/QuickSearch.js +3 -2
- package/dist/js/InputFields/QuickSearch.js.map +1 -1
- package/dist/js/InputFields/RadioButton.js +3 -3
- package/dist/js/InputFields/RadioButton.js.map +1 -1
- package/dist/js/InputFields/ResponsiveComponentWrapper.d.ts +2 -1
- package/dist/js/InputFields/ResponsiveComponentWrapper.js +3 -2
- package/dist/js/InputFields/ResponsiveComponentWrapper.js.map +1 -1
- package/dist/js/InputFields/SearchBar.d.ts +2 -1
- package/dist/js/InputFields/SearchBar.js +15 -16
- package/dist/js/InputFields/SearchBar.js.map +1 -1
- package/dist/js/InputFields/TextField.d.ts +2 -1
- package/dist/js/InputFields/TextField.js +0 -1
- package/dist/js/InputFields/TextField.js.map +1 -1
- package/dist/js/InputFields/Textarea.d.ts +2 -1
- package/dist/js/InputFields/Textarea.js +0 -1
- package/dist/js/InputFields/Textarea.js.map +1 -1
- package/dist/js/InputFields/__tests__/QuickSearch.test.js +3 -1
- package/dist/js/InputFields/__tests__/QuickSearch.test.js.map +1 -1
- package/dist/js/InputFields/components/SearchBarInput.d.ts +2 -1
- package/dist/js/InputFields/components/SearchBarInput.js +0 -1
- package/dist/js/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/js/List/ListRow.js +3 -1
- package/dist/js/List/ListRow.js.map +1 -1
- package/dist/js/LoadingIndicator/LoadingIndicator.d.ts +2 -1
- package/dist/js/LoadingIndicator/LoadingIndicator.js +5 -4
- package/dist/js/LoadingIndicator/LoadingIndicator.js.map +1 -1
- package/dist/js/Modals/ModalContainer.js +3 -1
- package/dist/js/Modals/ModalContainer.js.map +1 -1
- package/dist/js/Modals/ModalDialog.d.ts +2 -6
- package/dist/js/Modals/ModalDialog.js +77 -46
- package/dist/js/Modals/ModalDialog.js.map +1 -1
- package/dist/js/Modals/ModalStyles.d.ts +6 -0
- package/dist/js/Modals/ModalStyles.js +34 -14
- package/dist/js/Modals/ModalStyles.js.map +1 -1
- package/dist/js/Modals/ModalTypes.d.ts +18 -0
- package/dist/js/Modals/ModalTypes.js +6 -0
- package/dist/js/Modals/ModalTypes.js.map +1 -0
- package/dist/js/NavItem/NavItem.js +3 -1
- package/dist/js/NavItem/NavItem.js.map +1 -1
- package/dist/js/NotificationDot/NotificationDot.d.ts +2 -1
- package/dist/js/NotificationDot/NotificationDot.js +10 -9
- package/dist/js/NotificationDot/NotificationDot.js.map +1 -1
- package/dist/js/NotificationDot/__tests__/NotificationDot.test.js +4 -2
- package/dist/js/NotificationDot/__tests__/NotificationDot.test.js.map +1 -1
- package/dist/js/Paginator/Paginator.js +39 -38
- package/dist/js/Paginator/Paginator.js.map +1 -1
- package/dist/js/Paginator/__tests__/Paginator.test.js +6 -6
- package/dist/js/Paginator/__tests__/Paginator.test.js.map +1 -1
- package/dist/js/Switcher/MobileSwitcherMenu.js +3 -1
- package/dist/js/Switcher/MobileSwitcherMenu.js.map +1 -1
- package/dist/js/Switcher/SwitcherMenuItem.js +3 -1
- package/dist/js/Switcher/SwitcherMenuItem.js.map +1 -1
- package/dist/js/Table/Table.js +1 -1
- package/dist/js/Table/Table.js.map +1 -1
- package/dist/js/Tabs/HorizontalTabs.d.ts +2 -2
- package/dist/js/Tabs/HorizontalTabs.js +6 -3
- package/dist/js/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/js/Tabs/TabLink.d.ts +2 -1
- package/dist/js/Tabs/TabLink.js +7 -4
- package/dist/js/Tabs/TabLink.js.map +1 -1
- package/dist/js/Tabs/Tabs.d.ts +2 -1
- package/dist/js/Tabs/Tabs.js +15 -14
- package/dist/js/Tabs/Tabs.js.map +1 -1
- package/dist/js/Tabs/VerticalTabs.d.ts +2 -1
- package/dist/js/Tabs/VerticalTabs.js +3 -2
- package/dist/js/Tabs/VerticalTabs.js.map +1 -1
- package/dist/js/Toasters/ToastContext.js +3 -1
- package/dist/js/Toasters/ToastContext.js.map +1 -1
- package/dist/js/Tooltips/TooltipStyles.d.ts +4 -2
- package/dist/js/Tooltips/TooltipStyles.js +12 -4
- package/dist/js/Tooltips/TooltipStyles.js.map +1 -1
- package/dist/js/Tooltips/TooltipTypes.d.ts +1 -0
- package/dist/js/Tooltips/TooltipTypes.js.map +1 -1
- package/dist/js/Tooltips/TooltipWrapper.d.ts +1 -1
- package/dist/js/Tooltips/TooltipWrapper.js +5 -1
- package/dist/js/Tooltips/TooltipWrapper.js.map +1 -1
- package/dist/js/icons/index.js +1 -1
- package/dist/js/icons/index.js.map +1 -1
- package/dist/js/index.d.ts +1 -0
- package/dist/js/index.js +13 -0
- package/dist/js/index.js.map +1 -1
- package/dist/js/styles/typography.d.ts +3 -1
- package/dist/js/styles/typography.js +35 -14
- package/dist/js/styles/typography.js.map +1 -1
- package/dist/js/styles/z-indexes.d.ts +13 -0
- package/dist/js/styles/z-indexes.js +21 -0
- package/dist/js/styles/z-indexes.js.map +1 -0
- package/dist/js/types.d.ts +1 -0
- package/dist/js/types.js +1 -0
- package/dist/js/types.js.map +1 -1
- package/dist/umd/Accordion/AccordionItem.js +98 -0
- package/dist/umd/Accordion/AccordionItem.js.map +1 -0
- package/dist/umd/Accordion/AccordionMenu.js +138 -0
- package/dist/umd/Accordion/AccordionMenu.js.map +1 -0
- package/dist/umd/Accordion/__tests__/AccordionMenu.test.js +74 -0
- package/dist/umd/Accordion/__tests__/AccordionMenu.test.js.map +1 -0
- package/dist/umd/Accordion/index.js +44 -0
- package/dist/umd/Accordion/index.js.map +1 -0
- package/dist/umd/Accordion/styles.js +101 -0
- package/dist/umd/Accordion/styles.js.map +1 -0
- package/dist/umd/Banners/Banner.js +0 -1
- package/dist/umd/Banners/Banner.js.map +1 -1
- package/dist/umd/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/umd/Button/BackButton.js +7 -8
- package/dist/umd/Button/BackButton.js.map +1 -1
- package/dist/umd/Button/Button.js +8 -53
- package/dist/umd/Button/Button.js.map +1 -1
- package/dist/umd/Button/Iconbutton.js +16 -59
- package/dist/umd/Button/Iconbutton.js.map +1 -1
- package/dist/umd/Button/__tests__/BackButton.test.js +7 -7
- package/dist/umd/Button/__tests__/BackButton.test.js.map +1 -1
- package/dist/umd/Chips/ActionChip.js +6 -6
- package/dist/umd/Chips/ActionChip.js.map +1 -1
- package/dist/umd/Chips/ChipInput.js +5 -5
- package/dist/umd/Chips/ChipInput.js.map +1 -1
- package/dist/umd/Chips/FilterChip.js +6 -6
- package/dist/umd/Chips/FilterChip.js.map +1 -1
- package/dist/umd/Chips/InputChip.js +6 -6
- package/dist/umd/Chips/InputChip.js.map +1 -1
- package/dist/umd/Dropdown/BasicDropdown.js +19 -12
- package/dist/umd/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/umd/Dropdown/ChipDropdownInput.js +6 -6
- package/dist/umd/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/umd/Dropdown/CommonStyling.js +74 -75
- package/dist/umd/Dropdown/CommonStyling.js.map +1 -1
- package/dist/umd/Dropdown/DropdownContent.js +16 -5
- package/dist/umd/Dropdown/DropdownContent.js.map +1 -1
- package/dist/umd/Dropdown/DropdownFilter.js +3 -4
- package/dist/umd/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/Avatar.js +2 -2
- package/dist/umd/GlobalNavigationBar/Avatar.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/ExtendedMainMenu.js +6 -6
- package/dist/umd/GlobalNavigationBar/ExtendedMainMenu.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/GlobalNavigationBar.js +9 -6
- package/dist/umd/GlobalNavigationBar/GlobalNavigationBar.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/Logo.js +10 -10
- package/dist/umd/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/UserMenu/MobileUserMenu.js +5 -5
- package/dist/umd/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/UserMenu/UserMenu.js +5 -5
- package/dist/umd/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/mobile/CommonStyles.js +11 -5
- package/dist/umd/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
- package/dist/umd/HyperLink/HyperLink.js +68 -17
- package/dist/umd/HyperLink/HyperLink.js.map +1 -1
- package/dist/umd/InputFields/Checkbox.js +27 -16
- package/dist/umd/InputFields/Checkbox.js.map +1 -1
- package/dist/umd/InputFields/DatepickerField.js +9 -4
- package/dist/umd/InputFields/DatepickerField.js.map +1 -1
- package/dist/umd/InputFields/Label.js +0 -1
- package/dist/umd/InputFields/Label.js.map +1 -1
- package/dist/umd/InputFields/PasswordField.js +1 -2
- package/dist/umd/InputFields/PasswordField.js.map +1 -1
- package/dist/umd/InputFields/QuickSearch.js +5 -6
- package/dist/umd/InputFields/QuickSearch.js.map +1 -1
- package/dist/umd/InputFields/RadioButton.js +21 -14
- package/dist/umd/InputFields/RadioButton.js.map +1 -1
- package/dist/umd/InputFields/ResponsiveComponentWrapper.js +5 -6
- package/dist/umd/InputFields/ResponsiveComponentWrapper.js.map +1 -1
- package/dist/umd/InputFields/SearchBar.js +13 -14
- package/dist/umd/InputFields/SearchBar.js.map +1 -1
- package/dist/umd/InputFields/TextField.js +0 -1
- package/dist/umd/InputFields/TextField.js.map +1 -1
- package/dist/umd/InputFields/Textarea.js +0 -1
- package/dist/umd/InputFields/Textarea.js.map +1 -1
- package/dist/umd/InputFields/__tests__/QuickSearch.test.js +5 -5
- package/dist/umd/InputFields/__tests__/QuickSearch.test.js.map +1 -1
- package/dist/umd/InputFields/components/SearchBarInput.js +0 -1
- package/dist/umd/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/umd/List/ListRow.js +7 -5
- package/dist/umd/List/ListRow.js.map +1 -1
- package/dist/umd/LoadingIndicator/LoadingIndicator.js +7 -8
- package/dist/umd/LoadingIndicator/LoadingIndicator.js.map +1 -1
- package/dist/umd/Modals/ModalContainer.js +11 -5
- package/dist/umd/Modals/ModalContainer.js.map +1 -1
- package/dist/umd/Modals/ModalDialog.js +77 -29
- package/dist/umd/Modals/ModalDialog.js.map +1 -1
- package/dist/umd/Modals/ModalStyles.js +39 -22
- package/dist/umd/Modals/ModalStyles.js.map +1 -1
- package/dist/umd/Modals/ModalTypes.js +20 -0
- package/dist/umd/Modals/ModalTypes.js.map +1 -0
- package/dist/umd/NavItem/NavItem.js +7 -4
- package/dist/umd/NavItem/NavItem.js.map +1 -1
- package/dist/umd/NotificationDot/NotificationDot.js +12 -13
- package/dist/umd/NotificationDot/NotificationDot.js.map +1 -1
- package/dist/umd/NotificationDot/__tests__/NotificationDot.test.js +6 -6
- package/dist/umd/NotificationDot/__tests__/NotificationDot.test.js.map +1 -1
- package/dist/umd/Paginator/Paginator.js +60 -51
- package/dist/umd/Paginator/Paginator.js.map +1 -1
- package/dist/umd/Paginator/__tests__/Paginator.test.js +4 -4
- package/dist/umd/Paginator/__tests__/Paginator.test.js.map +1 -1
- package/dist/umd/Switcher/MobileSwitcherMenu.js +5 -5
- package/dist/umd/Switcher/MobileSwitcherMenu.js.map +1 -1
- package/dist/umd/Switcher/SwitcherMenuItem.js +8 -4
- package/dist/umd/Switcher/SwitcherMenuItem.js.map +1 -1
- package/dist/umd/Table/Table.js +1 -1
- package/dist/umd/Table/Table.js.map +1 -1
- package/dist/umd/Tabs/HorizontalTabs.js +16 -12
- package/dist/umd/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/umd/Tabs/TabLink.js +19 -10
- package/dist/umd/Tabs/TabLink.js.map +1 -1
- package/dist/umd/Tabs/Tabs.js +17 -18
- package/dist/umd/Tabs/Tabs.js.map +1 -1
- package/dist/umd/Tabs/VerticalTabs.js +5 -6
- package/dist/umd/Tabs/VerticalTabs.js.map +1 -1
- package/dist/umd/Toasters/ToastContext.js +5 -5
- package/dist/umd/Toasters/ToastContext.js.map +1 -1
- package/dist/umd/Tooltips/TooltipStyles.js +11 -9
- package/dist/umd/Tooltips/TooltipStyles.js.map +1 -1
- package/dist/umd/Tooltips/TooltipTypes.js.map +1 -1
- package/dist/umd/Tooltips/TooltipWrapper.js +4 -1
- package/dist/umd/Tooltips/TooltipWrapper.js.map +1 -1
- package/dist/umd/icons/index.js +1 -1
- package/dist/umd/icons/index.js.map +1 -1
- package/dist/umd/index.js +13 -4
- package/dist/umd/index.js.map +1 -1
- package/dist/umd/styles/typography.js +37 -18
- package/dist/umd/styles/typography.js.map +1 -1
- package/dist/umd/styles/z-indexes.js +33 -0
- package/dist/umd/styles/z-indexes.js.map +1 -0
- package/dist/umd/types.js +1 -0
- package/dist/umd/types.js.map +1 -1
- package/package.json +1 -1
package/dist/esm/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/types.ts"],"names":["Size","ToastColor","ToastActionType","ToastPosition","ToastEntryDirection"],"mappings":"AAOA,WAAYA,IAAZ;;WAAYA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;GAAAA,I,KAAAA,I;;
|
|
1
|
+
{"version":3,"sources":["../../src/types.ts"],"names":["Size","ToastColor","ToastActionType","ToastPosition","ToastEntryDirection"],"mappings":"AAOA,WAAYA,IAAZ;;WAAYA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;GAAAA,I,KAAAA,I;;AA+BZ,WAAYC,UAAZ;;WAAYA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,KAAAA,U;;AASZ,WAAYC,eAAZ;;WAAYA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,KAAAA,e;;AAKZ,WAAYC,aAAZ;;WAAYA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;GAAAA,a,KAAAA,a;;AASZ,WAAYC,mBAAZ;;WAAYA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;GAAAA,mB,KAAAA,mB","sourcesContent":["export interface Product {\n id: string;\n name: string;\n type: string;\n image: string;\n}\n\nexport enum Size {\n XXSmall = 'xxsmall',\n XSmall = 'xsmall',\n Small = 'small',\n Medium = 'medium',\n Large = 'large'\n}\n\nexport interface NavOption {\n label: string;\n to: string;\n disabled?: boolean;\n exact?: boolean;\n onClick?: () => void;\n}\n\nexport interface NavButton {\n label: string;\n action: any;\n disabled?: boolean;\n}\n\nexport interface ActionOptions {\n search?: () => void;\n apps?: () => void;\n language?: () => void;\n notification?: () => void;\n settings?: () => void;\n user?: () => void;\n}\n\nexport enum ToastColor {\n BLACK,\n WHITE,\n BLUE,\n GREEN,\n ORANGE,\n RED,\n}\n\nexport enum ToastActionType{\n PRIMARY,\n SECONDARY\n}\n\nexport enum ToastPosition {\n TOPLEFT,\n TOPMIDDLE,\n TOPRIGHT,\n BOTTOMLEFT,\n BOTTOMMIDDLE,\n BOTTOMRIGHT,\n}\n\nexport enum ToastEntryDirection{\n TOP,\n BOTTOM,\n LEFT,\n RIGHT\n}\n\nexport interface SwitcherNavItem {\n label: string;\n url: string;\n disabled?: boolean;\n Icon?: any;\n as?: any;\n testId?: string;\n}\n\nexport interface UserMenuItem {\n label: string;\n to: string;\n icon: any;\n isExternal?: boolean;\n onClick?: () => void;\n}\n\nexport interface ListRowDropdownOption {\n key?: string;\n label: string;\n action: any;\n}\n\nexport interface NavLink {\n label: string;\n to: string;\n target?: string;\n}\n\nexport interface NavSection {\n header: string;\n links: NavLink[];\n}\n\nexport interface NavOptions {\n sections: NavSection[];\n}\n"],"file":"types.js"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { AccordionItemProps } from './AccordionMenu';
|
|
3
|
+
interface AccordionItemPropsInner extends AccordionItemProps {
|
|
4
|
+
onSelect: (id: string) => void;
|
|
5
|
+
isActive: boolean;
|
|
6
|
+
isLast: boolean;
|
|
7
|
+
}
|
|
8
|
+
declare const AccordionItem: React.FunctionComponent<AccordionItemPropsInner>;
|
|
9
|
+
export default AccordionItem;
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _ = require("..");
|
|
13
|
+
|
|
14
|
+
var _icons = require("../icons");
|
|
15
|
+
|
|
16
|
+
var _styles = require("./styles");
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
21
|
+
|
|
22
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
23
|
+
|
|
24
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
25
|
+
|
|
26
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
27
|
+
|
|
28
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
29
|
+
|
|
30
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
31
|
+
|
|
32
|
+
var AccordionItem = function AccordionItem(props) {
|
|
33
|
+
var id = props.id,
|
|
34
|
+
onSelect = props.onSelect,
|
|
35
|
+
isActive = props.isActive,
|
|
36
|
+
title = props.title,
|
|
37
|
+
icon = props.icon,
|
|
38
|
+
disabled = props.disabled,
|
|
39
|
+
isLast = props.isLast;
|
|
40
|
+
|
|
41
|
+
var supressFocusRef = _react.default.useRef(null);
|
|
42
|
+
|
|
43
|
+
var _React$useState = _react.default.useState(false),
|
|
44
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
45
|
+
tabbedHere = _React$useState2[0],
|
|
46
|
+
setTabbedHere = _React$useState2[1];
|
|
47
|
+
|
|
48
|
+
_react.default.useEffect(function () {
|
|
49
|
+
!!disabled && setTabbedHere(false);
|
|
50
|
+
}, [disabled]);
|
|
51
|
+
|
|
52
|
+
return /*#__PURE__*/_react.default.createElement(_styles.AccordionItemContainer, {
|
|
53
|
+
id: id,
|
|
54
|
+
displaySeparator: !isActive && !isLast
|
|
55
|
+
}, /*#__PURE__*/_react.default.createElement(_styles.ItemHeaderContainer, {
|
|
56
|
+
tabIndex: !disabled ? 0 : -1,
|
|
57
|
+
onClick: function onClick() {
|
|
58
|
+
if (!disabled) {
|
|
59
|
+
onSelect(id);
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
onKeyDown: function onKeyDown(e) {
|
|
63
|
+
if (e.key == 'Enter') onSelect(id);
|
|
64
|
+
},
|
|
65
|
+
onBlur: function onBlur() {
|
|
66
|
+
setTabbedHere(false);
|
|
67
|
+
supressFocusRef.current = false;
|
|
68
|
+
},
|
|
69
|
+
onFocus: function onFocus() {
|
|
70
|
+
if (!disabled) {
|
|
71
|
+
if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
onMouseDown: function onMouseDown() {
|
|
75
|
+
if (!disabled && !tabbedHere) supressFocusRef.current = true;
|
|
76
|
+
},
|
|
77
|
+
tabbedHere: tabbedHere,
|
|
78
|
+
isActive: isActive,
|
|
79
|
+
isDisabled: disabled !== null && disabled !== void 0 ? disabled : false
|
|
80
|
+
}, icon && /*#__PURE__*/_react.default.cloneElement(icon, {
|
|
81
|
+
size: '24px'
|
|
82
|
+
}), /*#__PURE__*/_react.default.createElement(_.ComponentM, {
|
|
83
|
+
className: "headerLabel",
|
|
84
|
+
color: isActive ? _.COLORS.neutral_800 : disabled ? _.COLORS.neutral_300 : _.COLORS.neutral_600
|
|
85
|
+
}, title), isActive ? /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.ChevronUp, {
|
|
86
|
+
color: _.COLORS.neutral_800,
|
|
87
|
+
size: "20px"
|
|
88
|
+
}) : /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.ChevronDown, {
|
|
89
|
+
color: _.COLORS.neutral_600,
|
|
90
|
+
size: "20px"
|
|
91
|
+
})), isActive && /*#__PURE__*/_react.default.createElement(_styles.ItemBodyContainer, null, /*#__PURE__*/_react.default.createElement(_.ComponentS, null, props.children)));
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
AccordionItem.propTypes = {
|
|
95
|
+
onSelect: _propTypes.default.func.isRequired,
|
|
96
|
+
isActive: _propTypes.default.bool.isRequired,
|
|
97
|
+
isLast: _propTypes.default.bool.isRequired
|
|
98
|
+
};
|
|
99
|
+
var _default = AccordionItem;
|
|
100
|
+
exports.default = _default;
|
|
101
|
+
//# sourceMappingURL=AccordionItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Accordion/AccordionItem.tsx"],"names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","supressFocusRef","React","useRef","useState","tabbedHere","setTabbedHere","useEffect","e","key","current","cloneElement","size","COLORS","neutral_800","neutral_300","neutral_600","children"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { COLORS, ComponentM, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, HeaderIconContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const { id, onSelect, isActive, title, icon, disabled, isLast } = props;\n\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n React.useEffect(() => {\n !!disabled && setTabbedHere(false);\n }, [disabled]);\n\n return (\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n <ItemHeaderContainer\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if(e.key == 'Enter')\n onSelect(id);\n }}\n onBlur={() => {\n setTabbedHere(false);\n supressFocusRef.current = false;\n }}\n onFocus={() => {\n if(!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onMouseDown={() => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n tabbedHere={tabbedHere}\n isActive={isActive}\n isDisabled={disabled ?? false}>\n {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n <ComponentM className=\"headerLabel\" color={isActive ? COLORS.neutral_800 : disabled ? COLORS.neutral_300 : COLORS.neutral_600}>{title}</ComponentM>\n {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n </ItemHeaderContainer>\n {isActive && (\n <ItemBodyContainer>\n <ComponentS>{props.children}</ComponentS>\n </ItemBodyContainer>\n )}\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface AccordionProps {
|
|
3
|
+
items: AccordionItemProps[];
|
|
4
|
+
selectedItems?: string[];
|
|
5
|
+
setSelectedItems?: (a: string[]) => void;
|
|
6
|
+
onSelect?: (id: string) => void;
|
|
7
|
+
multipleActive?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface AccordionItemProps {
|
|
10
|
+
id: string;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
title: string;
|
|
13
|
+
icon?: React.ReactNode;
|
|
14
|
+
children: React.ReactNode;
|
|
15
|
+
}
|
|
16
|
+
declare const AccordionMenu: React.FunctionComponent<AccordionProps>;
|
|
17
|
+
export default AccordionMenu;
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var React = _interopRequireWildcard(require("react"));
|
|
13
|
+
|
|
14
|
+
var _AccordionItem = _interopRequireDefault(require("./AccordionItem"));
|
|
15
|
+
|
|
16
|
+
var _styles = require("./styles");
|
|
17
|
+
|
|
18
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
|
+
|
|
20
|
+
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; }
|
|
21
|
+
|
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
+
|
|
24
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
25
|
+
|
|
26
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
27
|
+
|
|
28
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
29
|
+
|
|
30
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
31
|
+
|
|
32
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
33
|
+
|
|
34
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
35
|
+
|
|
36
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
37
|
+
|
|
38
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
39
|
+
|
|
40
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
41
|
+
|
|
42
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
43
|
+
|
|
44
|
+
var AccordionMenu = function AccordionMenu(_ref) {
|
|
45
|
+
var items = _ref.items,
|
|
46
|
+
selectedItems = _ref.selectedItems,
|
|
47
|
+
setSelectedItems = _ref.setSelectedItems,
|
|
48
|
+
onSelect = _ref.onSelect,
|
|
49
|
+
multipleActive = _ref.multipleActive;
|
|
50
|
+
|
|
51
|
+
var _React$useState = React.useState([]),
|
|
52
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
53
|
+
builtinSelectedItems = _React$useState2[0],
|
|
54
|
+
builtinSetSelectedItems = _React$useState2[1];
|
|
55
|
+
|
|
56
|
+
var getCollection = function getCollection() {
|
|
57
|
+
return selectedItems ? selectedItems : builtinSelectedItems;
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
var getUpdateFunction = function getUpdateFunction() {
|
|
61
|
+
return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
var onSelected = function onSelected(id) {
|
|
65
|
+
var collection = getCollection();
|
|
66
|
+
var updateFunc = getUpdateFunction();
|
|
67
|
+
var isActive = !!collection.find(function (x) {
|
|
68
|
+
return x == id;
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
if (multipleActive) {
|
|
72
|
+
if (isActive) updateFunc(collection.filter(function (x) {
|
|
73
|
+
return x != id;
|
|
74
|
+
}));else updateFunc([].concat(_toConsumableArray(collection), [id]));
|
|
75
|
+
} else updateFunc(isActive ? [] : [id]);
|
|
76
|
+
|
|
77
|
+
onSelect && onSelect(id);
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
return /*#__PURE__*/React.createElement(_styles.AccordionMenuWrapper, null, items.map(function (item) {
|
|
81
|
+
return /*#__PURE__*/React.createElement(_AccordionItem.default, {
|
|
82
|
+
key: item.id,
|
|
83
|
+
disabled: item.disabled,
|
|
84
|
+
id: item.id,
|
|
85
|
+
title: item.title,
|
|
86
|
+
icon: item.icon,
|
|
87
|
+
isActive: !!getCollection().find(function (x) {
|
|
88
|
+
return x == item.id;
|
|
89
|
+
}),
|
|
90
|
+
isLast: items.indexOf(item) === items.length - 1,
|
|
91
|
+
onSelect: onSelected
|
|
92
|
+
}, item.children);
|
|
93
|
+
}));
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
AccordionMenu.propTypes = {
|
|
97
|
+
items: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
98
|
+
id: _propTypes.default.string.isRequired,
|
|
99
|
+
disabled: _propTypes.default.bool,
|
|
100
|
+
title: _propTypes.default.string.isRequired,
|
|
101
|
+
icon: _propTypes.default.node,
|
|
102
|
+
children: _propTypes.default.node.isRequired
|
|
103
|
+
})).isRequired,
|
|
104
|
+
selectedItems: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
105
|
+
setSelectedItems: _propTypes.default.func,
|
|
106
|
+
onSelect: _propTypes.default.func,
|
|
107
|
+
multipleActive: _propTypes.default.bool
|
|
108
|
+
};
|
|
109
|
+
var _default = AccordionMenu;
|
|
110
|
+
exports.default = _default;
|
|
111
|
+
//# sourceMappingURL=AccordionMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Accordion/AccordionMenu.tsx"],"names":["AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","React","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAMA,aAAsD,GAAG,SAAzDA,aAAyD,OAA0F;AAAA,MAAvFC,KAAuF,QAAvFA,KAAuF;AAAA,MAAhFC,aAAgF,QAAhFA,aAAgF;AAAA,MAAjEC,gBAAiE,QAAjEA,gBAAiE;AAAA,MAA/CC,QAA+C,QAA/CA,QAA+C;AAAA,MAArCC,cAAqC,QAArCA,cAAqC;;AAEvJ,wBAAwDC,KAAK,CAACC,QAAN,CAAyB,EAAzB,CAAxD;AAAA;AAAA,MAAOC,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1B,WAAOR,aAAa,GAAGA,aAAH,GAAmBM,oBAAvC;AACD,GAFD;;AAIA,MAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,WAAOR,gBAAgB,GAAGA,gBAAH,GAAsBM,uBAA7C;AACD,GAFD;;AAIA,MAAMG,UAAU,GAAG,SAAbA,UAAa,CAACC,EAAD,EAAgB;AACjC,QAAMC,UAAU,GAAGJ,aAAa,EAAhC;AACA,QAAMK,UAAU,GAAGJ,iBAAiB,EAApC;AAEA,QAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAX,CAAgB,UAAAC,CAAC;AAAA,aAAIA,CAAC,IAAIL,EAAT;AAAA,KAAjB,CAAnB;;AACA,QAAGR,cAAH,EAAmB;AACjB,UAAGW,QAAH,EACED,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkB,UAAAD,CAAC;AAAA,eAAIA,CAAC,IAAIL,EAAT;AAAA,OAAnB,CAAD,CAAV,CADF,KAIEE,UAAU,8BAAKD,UAAL,IAAiBD,EAAjB,GAAV;AACH,KAND,MAQEE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEFT,IAAAA,QAAQ,IAAIA,QAAQ,CAACS,EAAD,CAApB;AACD,GAhBD;;AAkBA,sBACE,oBAAC,4BAAD,QACGZ,KAAK,CAACmB,GAAN,CAAU,UAACC,IAAD;AAAA,wBACT,oBAAC,sBAAD;AACE,MAAA,GAAG,EAAEA,IAAI,CAACR,EADZ;AAEE,MAAA,QAAQ,EAAEQ,IAAI,CAACC,QAFjB;AAGE,MAAA,EAAE,EAAED,IAAI,CAACR,EAHX;AAIE,MAAA,KAAK,EAAEQ,IAAI,CAACE,KAJd;AAKE,MAAA,IAAI,EAAEF,IAAI,CAACG,IALb;AAME,MAAA,QAAQ,EAAE,CAAC,CAACd,aAAa,GAAGO,IAAhB,CAAqB,UAAAC,CAAC;AAAA,eAAIA,CAAC,IAAIG,IAAI,CAACR,EAAd;AAAA,OAAtB,CANd;AAOE,MAAA,MAAM,EAAEZ,KAAK,CAACwB,OAAN,CAAcJ,IAAd,MAAwBpB,KAAK,CAACyB,MAAN,GAAe,CAPjD;AAQE,MAAA,QAAQ,EAAEd;AARZ,OASGS,IAAI,CAACM,QATR,CADS;AAAA,GAAV,CADH,CADF;AAiBD,CA/CD;;;AAfE1B,EAAAA,K;AAQAY,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAXAzB,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;;eA4DaL,a","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n items: AccordionItemProps[];\n selectedItems?: string[];\n setSelectedItems?: (a: string[]) => void;\n onSelect?: (id: string) => void;\n multipleActive?: boolean;\n}\n\nexport interface AccordionItemProps {\n id: string;\n disabled?: boolean;\n title: string;\n icon?: React.ReactNode;\n children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({ items, selectedItems, setSelectedItems, onSelect, multipleActive }: AccordionProps) => {\n\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n const getCollection = () => {\n return selectedItems ? selectedItems : builtinSelectedItems;\n };\n\n const getUpdateFunction = () => {\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n }\n\n const onSelected = (id: string) => {\n const collection = getCollection();\n const updateFunc = getUpdateFunction();\n\n const isActive = !!collection.find(x => x == id);\n if(multipleActive) {\n if(isActive)\n updateFunc(collection.filter(x => x != id));\n \n else \n updateFunc([...collection, id]);\n }\n else\n updateFunc(isActive ? [] : [id]);\n\n onSelect && onSelect(id);\n };\n\n return (\n <AccordionMenuWrapper>\n {items.map((item) => (\n <AccordionItem\n key={item.id}\n disabled={item.disabled}\n id={item.id}\n title={item.title}\n icon={item.icon}\n isActive={!!getCollection().find(x => x == item.id)}\n isLast={items.indexOf(item) === items.length - 1}\n onSelect={onSelected}>\n {item.children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.js"}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _react = _interopRequireDefault(require("react"));
|
|
4
|
+
|
|
5
|
+
var _react2 = require("@testing-library/react");
|
|
6
|
+
|
|
7
|
+
require("jest-styled-components");
|
|
8
|
+
|
|
9
|
+
var _styles = require("../../styles");
|
|
10
|
+
|
|
11
|
+
var _AccordionMenu = _interopRequireDefault(require("../AccordionMenu"));
|
|
12
|
+
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
+
|
|
15
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
16
|
+
|
|
17
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
18
|
+
|
|
19
|
+
var accordionItems = [{
|
|
20
|
+
id: 'test1_id',
|
|
21
|
+
title: 'Item label with text 1',
|
|
22
|
+
children: /*#__PURE__*/_react.default.createElement("div", null, "content test1")
|
|
23
|
+
}, {
|
|
24
|
+
id: 'test2_id',
|
|
25
|
+
title: 'Item label with text 2',
|
|
26
|
+
children: /*#__PURE__*/_react.default.createElement("div", null, "content test2")
|
|
27
|
+
}];
|
|
28
|
+
describe('<AccordionMenu />', function () {
|
|
29
|
+
it('Check correct text placed on labels', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
|
30
|
+
var _render, queryByText;
|
|
31
|
+
|
|
32
|
+
return regeneratorRuntime.wrap(function _callee$(_context) {
|
|
33
|
+
while (1) {
|
|
34
|
+
switch (_context.prev = _context.next) {
|
|
35
|
+
case 0:
|
|
36
|
+
_render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_AccordionMenu.default, {
|
|
37
|
+
items: accordionItems,
|
|
38
|
+
onSelect: function onSelect() {}
|
|
39
|
+
})), queryByText = _render.queryByText;
|
|
40
|
+
expect(queryByText('Item label with text 1')).toBeDefined();
|
|
41
|
+
expect(queryByText('Item label with text 2')).toBeDefined();
|
|
42
|
+
expect(queryByText('content test1')).toBeNull();
|
|
43
|
+
|
|
44
|
+
case 4:
|
|
45
|
+
case "end":
|
|
46
|
+
return _context.stop();
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}, _callee);
|
|
50
|
+
})));
|
|
51
|
+
it('Check item label element color and label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
|
|
52
|
+
var _render2, container, headerItem;
|
|
53
|
+
|
|
54
|
+
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
55
|
+
while (1) {
|
|
56
|
+
switch (_context2.prev = _context2.next) {
|
|
57
|
+
case 0:
|
|
58
|
+
_render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_AccordionMenu.default, {
|
|
59
|
+
items: accordionItems,
|
|
60
|
+
onSelect: function onSelect() {}
|
|
61
|
+
})), container = _render2.container;
|
|
62
|
+
headerItem = container.querySelector('#test2_id');
|
|
63
|
+
expect(headerItem).toBeDefined();
|
|
64
|
+
expect(headerItem === null || headerItem === void 0 ? void 0 : headerItem.children[0]).toHaveStyleRule('background', _styles.COLORS.neutral_20);
|
|
65
|
+
expect(headerItem === null || headerItem === void 0 ? void 0 : headerItem.textContent).toContain('Item label with text 2');
|
|
66
|
+
|
|
67
|
+
case 5:
|
|
68
|
+
case "end":
|
|
69
|
+
return _context2.stop();
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}, _callee2);
|
|
73
|
+
})));
|
|
74
|
+
it('Check expanded item text', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
|
|
75
|
+
var _headerItem$children$;
|
|
76
|
+
|
|
77
|
+
var _render3, container, headerItem;
|
|
78
|
+
|
|
79
|
+
return regeneratorRuntime.wrap(function _callee3$(_context3) {
|
|
80
|
+
while (1) {
|
|
81
|
+
switch (_context3.prev = _context3.next) {
|
|
82
|
+
case 0:
|
|
83
|
+
_render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_AccordionMenu.default, {
|
|
84
|
+
items: accordionItems,
|
|
85
|
+
onSelect: function onSelect() {},
|
|
86
|
+
selectedItems: ['test1_id']
|
|
87
|
+
})), container = _render3.container;
|
|
88
|
+
headerItem = container.querySelector('#test1_id'); //check item expanded
|
|
89
|
+
|
|
90
|
+
expect(headerItem === null || headerItem === void 0 ? void 0 : headerItem.children[1]).toBeDefined();
|
|
91
|
+
expect(headerItem === null || headerItem === void 0 ? void 0 : (_headerItem$children$ = headerItem.children[1]) === null || _headerItem$children$ === void 0 ? void 0 : _headerItem$children$.textContent).toContain('content test1');
|
|
92
|
+
|
|
93
|
+
case 4:
|
|
94
|
+
case "end":
|
|
95
|
+
return _context3.stop();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}, _callee3);
|
|
99
|
+
})));
|
|
100
|
+
});
|
|
101
|
+
//# sourceMappingURL=AccordionMenu.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/Accordion/__tests__/AccordionMenu.test.tsx"],"names":["accordionItems","id","title","children","describe","it","queryByText","expect","toBeDefined","toBeNull","container","headerItem","querySelector","toHaveStyleRule","COLORS","neutral_20","textContent","toContain"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,cAAc,GAAG,CACrB;AACEC,EAAAA,EAAE,EAAE,UADN;AAEEC,EAAAA,KAAK,EAAE,wBAFT;AAGEC,EAAAA,QAAQ,eAAE;AAHZ,CADqB,EAMrB;AACEF,EAAAA,EAAE,EAAE,UADN;AAEEC,EAAAA,KAAK,EAAE,wBAFT;AAGEC,EAAAA,QAAQ,eAAE;AAHZ,CANqB,CAAvB;AAaAC,QAAQ,CAAC,mBAAD,EAAsB,YAAM;AAClCC,EAAAA,EAAE,CAAC,qCAAD,uEAAwC;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,sBAChB,kCAAO,6BAAC,sBAAD;AAAe,cAAA,KAAK,EAAEL,cAAtB;AAAsC,cAAA,QAAQ,EAAE,oBAAM,CAAE;AAAxD,cAAP,CADgB,EAChCM,WADgC,WAChCA,WADgC;AAExCC,YAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,YAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,YAAAA,MAAM,CAACD,WAAW,CAAC,eAAD,CAAZ,CAAN,CAAqCG,QAArC;;AAJwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAxC,GAAF;AAOAJ,EAAAA,EAAE,CAAC,0CAAD,uEAA6C;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,uBACvB,kCAAO,6BAAC,sBAAD;AAAe,cAAA,KAAK,EAAEL,cAAtB;AAAsC,cAAA,QAAQ,EAAE,oBAAM,CAAE;AAAxD,cAAP,CADuB,EACrCU,SADqC,YACrCA,SADqC;AAEvCC,YAAAA,UAFuC,GAE1BD,SAAS,CAACE,aAAV,CAAwB,WAAxB,CAF0B;AAG7CL,YAAAA,MAAM,CAACI,UAAD,CAAN,CAAmBH,WAAnB;AACAD,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAER,QAAZ,CAAqB,CAArB,CAAD,CAAN,CAAgCU,eAAhC,CAAgD,YAAhD,EAA8DC,eAAOC,UAArE;AACAR,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAEK,WAAb,CAAN,CAAgCC,SAAhC,CAA0C,wBAA1C;;AAL6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA7C,GAAF;AAQAZ,EAAAA,EAAE,CAAC,0BAAD,uEAA6B;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,uBACP,kCAAO,6BAAC,sBAAD;AAAe,cAAA,KAAK,EAAEL,cAAtB;AAAsC,cAAA,QAAQ,EAAE,oBAAM,CAAE,CAAxD;AAA0D,cAAA,aAAa,EAAE,CAAC,UAAD;AAAzE,cAAP,CADO,EACrBU,SADqB,YACrBA,SADqB;AAEvBC,YAAAA,UAFuB,GAEVD,SAAS,CAACE,aAAV,CAAwB,WAAxB,CAFU,EAG7B;;AACAL,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAER,QAAZ,CAAqB,CAArB,CAAD,CAAN,CAAgCK,WAAhC;AACAD,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,gDAACA,UAAU,CAAER,QAAZ,CAAqB,CAArB,CAAD,0DAAC,sBAAyBa,WAA1B,CAAN,CAA6CC,SAA7C,CAAuD,eAAvD;;AAL6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA7B,GAAF;AAOD,CAvBO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\nimport AccordionMenu from '../AccordionMenu';\n\nconst accordionItems = [\n {\n id: 'test1_id',\n title: 'Item label with text 1',\n children: <div>content test1</div>,\n },\n {\n id: 'test2_id',\n title: 'Item label with text 2',\n children: <div>content test2</div>,\n },\n];\n\ndescribe('<AccordionMenu />', () => {\n it('Check correct text placed on labels', async () => {\n const { queryByText } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n expect(queryByText('Item label with text 1')).toBeDefined();\n expect(queryByText('Item label with text 2')).toBeDefined();\n expect(queryByText('content test1')).toBeNull();\n });\n\n it('Check item label element color and label', async () => {\n const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n const headerItem = container.querySelector('#test2_id');\n expect(headerItem).toBeDefined();\n expect(headerItem?.children[0]).toHaveStyleRule('background', COLORS.neutral_20);\n expect(headerItem?.textContent).toContain('Item label with text 2');\n });\n\n it('Check expanded item text', async () => {\n const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}} selectedItems={['test1_id']}></AccordionMenu>);\n const headerItem = container.querySelector('#test1_id');\n //check item expanded\n expect(headerItem?.children[1]).toBeDefined();\n expect(headerItem?.children[1]?.textContent).toContain('content test1');\n });\n});\n"],"file":"AccordionMenu.test.js"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "AccordionMenu", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _AccordionMenu.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "AccordionMenuItem", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _AccordionMenu.default;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "AccordionMenuWrapper", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function get() {
|
|
21
|
+
return _styles.AccordionMenuWrapper;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
var _AccordionMenu = _interopRequireDefault(require("./AccordionMenu"));
|
|
26
|
+
|
|
27
|
+
var _styles = require("./styles");
|
|
28
|
+
|
|
29
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
30
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA","sourcesContent":["export { default as AccordionMenu } from './AccordionMenu';\nexport { default as AccordionMenuItem } from './AccordionMenu';\nexport { AccordionMenuWrapper } from './styles';\n"],"file":"index.js"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare const AccordionMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const AccordionItemContainer: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
+
displaySeparator: boolean;
|
|
4
|
+
}, never>;
|
|
5
|
+
export declare const ItemHeaderContainer: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
+
isDisabled: boolean;
|
|
7
|
+
isActive: boolean;
|
|
8
|
+
tabbedHere: boolean;
|
|
9
|
+
}, never>;
|
|
10
|
+
export declare const HeaderIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
11
|
+
export declare const ItemBodyContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.ItemBodyContainer = exports.HeaderIconContainer = exports.ItemHeaderContainer = exports.AccordionItemContainer = exports.AccordionMenuWrapper = void 0;
|
|
9
|
+
|
|
10
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
11
|
+
|
|
12
|
+
var _styles = require("../styles");
|
|
13
|
+
|
|
14
|
+
var _zIndexes = require("../styles/z-indexes");
|
|
15
|
+
|
|
16
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
17
|
+
|
|
18
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
|
+
|
|
20
|
+
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; }
|
|
21
|
+
|
|
22
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
23
|
+
|
|
24
|
+
var AccordionMenuWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n"])));
|
|
25
|
+
|
|
26
|
+
exports.AccordionMenuWrapper = AccordionMenuWrapper;
|
|
27
|
+
|
|
28
|
+
var AccordionItemContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ", ";\n"])), function (props) {
|
|
29
|
+
return props.displaySeparator ? "1px solid ".concat(_styles.COLORS.neutral_100) : '';
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
exports.AccordionItemContainer = AccordionItemContainer;
|
|
33
|
+
var disabledState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background: ", "!important;\n color: ", ";\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
|
|
34
|
+
|
|
35
|
+
var ItemHeaderContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n background: ", ";\n cursor: ", ";\n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n ", "\n\n ", "\n :hover {\n background: ", ";\n }\n\n :hover .headerLabel {\n color: ", ";\n }\n\n :active .headerLabel {\n color: ", ";\n }\n\n :hover svg {\n color: ", ";\n }\n\n :active svg {\n color: ", ";\n }\n\n :active {\n background: ", ";\n }\n"])), _styles.COLORS.neutral_20, function (props) {
|
|
36
|
+
return props.isDisabled ? 'not-allowed' : 'pointer';
|
|
37
|
+
}, function (props) {
|
|
38
|
+
return props.tabbedHere ? (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n z-index: ", ";\n box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";"])), _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500, _styles.COLORS.primary_500) : '';
|
|
39
|
+
}, function (props) {
|
|
40
|
+
return props.isDisabled ? disabledState : '';
|
|
41
|
+
}, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_100);
|
|
42
|
+
|
|
43
|
+
exports.ItemHeaderContainer = ItemHeaderContainer;
|
|
44
|
+
|
|
45
|
+
var HeaderIconContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n margin-left: auto;\n"])));
|
|
46
|
+
|
|
47
|
+
exports.HeaderIconContainer = HeaderIconContainer;
|
|
48
|
+
|
|
49
|
+
var ItemBodyContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n padding: 0px 16px;\n margin: 12px 0;\n background: ", ";\n"])), _styles.COLORS.white);
|
|
50
|
+
|
|
51
|
+
exports.ItemBodyContainer = ItemBodyContainer;
|
|
52
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","disabledState","css","white","neutral_300","ItemHeaderContainer","neutral_20","isDisabled","tabbedHere","Z_INDEXES","focus","primary_500","primary_20","primary_700","primary_800","primary_100","HeaderIconContainer","ItemBodyContainer"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,oKAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,0BAAOC,GAAV,0LAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCC,eAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;;;AAQP,IAAMC,aAAa,OAAGC,qBAAH,6LACHH,eAAOI,KADJ,EAERJ,eAAOK,WAFC,EAKNL,eAAOK,WALD,CAAnB;;AASO,IAAMC,mBAAmB,GAAGX,0BAAOC,GAAV,mlBAOhBI,eAAOO,UAPS,EAQpB,UAACT,KAAD;AAAA,SAAYA,KAAK,CAACU,UAAN,GAAmB,aAAnB,GAAmC,SAA/C;AAAA,CARoB,EAa5B,UAAAV,KAAK;AAAA,SAAIA,KAAK,CAACW,UAAN,OAAmBN,qBAAnB,mJACEO,oBAAUC,KADZ,EAEkBX,eAAOY,WAFzB,EAEqDZ,eAAOY,WAF5D,IAE6E,EAFjF;AAAA,CAbuB,EAiB5B,UAACd,KAAD;AAAA,SAAYA,KAAK,CAACU,UAAN,GAAmBN,aAAnB,GAAmC,EAA/C;AAAA,CAjB4B,EAmBdF,eAAOa,UAnBO,EAuBnBb,eAAOc,WAvBY,EA2BnBd,eAAOe,WA3BY,EA+BnBf,eAAOc,WA/BY,EAmCnBd,eAAOe,WAnCY,EAuCdf,eAAOgB,WAvCO,CAAzB;;;;AA2CA,IAAMC,mBAAmB,GAAGtB,0BAAOC,GAAV,+FAAzB;;;;AAIA,IAAMsB,iBAAiB,GAAGvB,0BAAOC,GAAV,wIAGdI,eAAOI,KAHO,CAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; }>`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nconst disabledState = css`\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n`;\n\nexport const ItemHeaderContainer = styled.div<{ isDisabled: boolean, isActive: boolean, tabbedHere: boolean }>`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n background: ${COLORS.neutral_20};\n cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};\n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n ${props => props.tabbedHere ? css`\n z-index: ${Z_INDEXES.focus};\n box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};` : ''}\n\n ${(props) => (props.isDisabled ? disabledState : '')}\n :hover {\n background: ${COLORS.primary_20};\n }\n\n :hover .headerLabel {\n color: ${COLORS.primary_700};\n }\n\n :active .headerLabel {\n color: ${COLORS.primary_800};\n }\n\n :hover svg {\n color: ${COLORS.primary_700};\n }\n\n :active svg {\n color: ${COLORS.primary_800};\n }\n\n :active {\n background: ${COLORS.primary_100};\n }\n`;\n\nexport const HeaderIconContainer = styled.div`\n margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div`\n padding: 0px 16px;\n margin: 12px 0;\n background: ${COLORS.white};\n`;\n"],"file":"styles.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentTextStyle","Regular","color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","children","testId","linkText","onClose","icon","noIcon","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","Math","floor","random","white","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","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 {ComponentMStyling, ComponentResponsive} from '../styles/typography';\nimport {HyperLink} from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\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 a {\n color: ${(props: BannerProps) => props.link} !important;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color)}\n \n display: flex;\n width: 100%;\n margin: 0 0 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 16px 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 40px 0 56px;\n }\n &.small {\n margin: 0 0 0 16px;\n }\n &.medium {\n margin: 0 16px 0 32px;\n }\n &.large {\n margin: 0 40px 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\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 = {\n size?: 'small' | 'medium' | 'large';\n type?: string;\n link?: string;\n linkText?: string;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\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 const formatTypeToLowerCase = type?.toLowerCase();\n switch (formatTypeToLowerCase) {\n case 'warning':\n return (\n <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n <BannerCenter color={COLORS.warning_700} className={size}>\n {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.warning_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n case 'critical':\n return (\n <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.critical_700} className={size}>\n {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.critical_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n case 'positive':\n return (\n <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.correct_700} className={size}>\n {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.correct_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n default:\n return (\n <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.primary_700} className={size}>\n {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer type=\"neutral\">\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.primary_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentTextStyle","Regular","color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","children","testId","linkText","onClose","icon","noIcon","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","Math","floor","random","white","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","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/typography';\nimport {HyperLink} from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\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 a {\n color: ${(props: BannerProps) => props.link} !important;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color)}\n \n display: flex;\n width: 100%;\n margin: 0 0 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 16px 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 40px 0 56px;\n }\n &.small {\n margin: 0 0 0 16px;\n }\n &.medium {\n margin: 0 16px 0 32px;\n }\n &.large {\n margin: 0 40px 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\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 = {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: string;\n link?: string;\n linkText?: string;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\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 const formatTypeToLowerCase = type?.toLowerCase();\n switch (formatTypeToLowerCase) {\n case 'warning':\n return (\n <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n <BannerCenter color={COLORS.warning_700} className={size}>\n {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.warning_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n case 'critical':\n return (\n <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.critical_700} className={size}>\n {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.critical_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n case 'positive':\n return (\n <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.correct_700} className={size}>\n {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.correct_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n default:\n return (\n <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.primary_700} className={size}>\n {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer type=\"neutral\">\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.primary_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
|