@laerdal/life-react-components 6.0.0-dev.7.full → 6.0.0
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/README.md +1 -1
- package/dist/Accordion/__tests__/AccordionMenu.test.tsx +42 -0
- package/dist/Accordion/__tests__/ContentAccordion.test.tsx +150 -0
- package/dist/AuthPage/__tests__/AuthPage.test.tsx +27 -0
- package/dist/Banners/__tests__/Banner.test.tsx +47 -0
- package/dist/Banners/__tests__/OverviewBanner.test.tsx +20 -0
- package/dist/Breadcrumb/__tests__/Breadcrumb.test.tsx +78 -0
- package/dist/Button/DualFunctionButton.cjs +4 -4
- package/dist/Button/DualFunctionButton.cjs.map +1 -1
- package/dist/Button/DualFunctionButton.d.ts +2 -2
- package/dist/Button/DualFunctionButton.js +4 -4
- package/dist/Button/DualFunctionButton.js.map +1 -1
- package/dist/Button/{Button.cjs → TextButton.cjs} +179 -92
- package/dist/Button/TextButton.cjs.map +1 -0
- package/dist/Button/TextButton.d.ts +70 -0
- package/dist/Button/{Button.js → TextButton.js} +178 -91
- package/dist/Button/TextButton.js.map +1 -0
- package/dist/Button/__tests__/BackButton.test.tsx +32 -0
- package/dist/Button/__tests__/Button.test.tsx +45 -0
- package/dist/Button/__tests__/DualButton.test.tsx +119 -0
- package/dist/Button/__tests__/TextButton.test.tsx +45 -0
- package/dist/Button/index.cjs +11 -11
- package/dist/Button/index.cjs.map +1 -1
- package/dist/Button/index.d.ts +2 -2
- package/dist/Button/index.js +2 -2
- package/dist/Button/index.js.map +1 -1
- package/dist/Card/HorizontalCard/__tests__/HorizontalCard.test.tsx +71 -0
- package/dist/Card/VerticalCard/{Card.cjs → VerticalCard.cjs} +62 -26
- package/dist/Card/VerticalCard/VerticalCard.cjs.map +1 -0
- package/dist/Card/VerticalCard/VerticalCard.d.ts +25 -0
- package/dist/Card/VerticalCard/{Card.js → VerticalCard.js} +62 -26
- package/dist/Card/VerticalCard/VerticalCard.js.map +1 -0
- package/dist/Card/VerticalCard/{CardBottomSection.cjs → VerticalCardBottomSection.cjs} +45 -27
- package/dist/Card/VerticalCard/VerticalCardBottomSection.cjs.map +1 -0
- package/dist/Card/VerticalCard/VerticalCardBottomSection.d.ts +53 -0
- package/dist/Card/VerticalCard/{CardBottomSection.js → VerticalCardBottomSection.js} +45 -27
- package/dist/Card/VerticalCard/VerticalCardBottomSection.js.map +1 -0
- package/dist/Card/VerticalCard/{CardMiddleSection.cjs → VerticalCardMiddleSection.cjs} +46 -23
- package/dist/Card/VerticalCard/VerticalCardMiddleSection.cjs.map +1 -0
- package/dist/Card/VerticalCard/VerticalCardMiddleSection.d.ts +42 -0
- package/dist/Card/VerticalCard/{CardMiddleSection.js → VerticalCardMiddleSection.js} +45 -23
- package/dist/Card/VerticalCard/VerticalCardMiddleSection.js.map +1 -0
- package/dist/Card/VerticalCard/{CardTopSection.cjs → VerticalCardTopSection.cjs} +18 -16
- package/dist/Card/VerticalCard/VerticalCardTopSection.cjs.map +1 -0
- package/dist/Card/VerticalCard/{CardTopSection.d.ts → VerticalCardTopSection.d.ts} +8 -8
- package/dist/Card/VerticalCard/{CardTopSection.js → VerticalCardTopSection.js} +17 -15
- package/dist/Card/VerticalCard/VerticalCardTopSection.js.map +1 -0
- package/dist/Card/VerticalCard/__tests__/VerticalCard.test.tsx +124 -0
- package/dist/Card/VerticalCard/index.cjs +25 -25
- package/dist/Card/VerticalCard/index.cjs.map +1 -1
- package/dist/Card/VerticalCard/index.d.ts +7 -7
- package/dist/Card/VerticalCard/index.js +7 -7
- package/dist/Card/VerticalCard/index.js.map +1 -1
- package/dist/Chips/ActionChip.cjs +6 -0
- package/dist/Chips/ActionChip.cjs.map +1 -1
- package/dist/Chips/ActionChip.js +6 -0
- package/dist/Chips/ActionChip.js.map +1 -1
- package/dist/Chips/ChipStyles.cjs +210 -31
- package/dist/Chips/ChipStyles.cjs.map +1 -1
- package/dist/Chips/ChipStyles.js +210 -31
- package/dist/Chips/ChipStyles.js.map +1 -1
- package/dist/Chips/ChoiceChips.cjs +1 -1
- package/dist/Chips/ChoiceChips.cjs.map +1 -1
- package/dist/Chips/ChoiceChips.js +1 -1
- package/dist/Chips/ChoiceChips.js.map +1 -1
- package/dist/Chips/FilterChip.cjs +8 -1
- package/dist/Chips/FilterChip.cjs.map +1 -1
- package/dist/Chips/FilterChip.js +8 -1
- package/dist/Chips/FilterChip.js.map +1 -1
- package/dist/Chips/InputChip.cjs +14 -0
- package/dist/Chips/InputChip.cjs.map +1 -1
- package/dist/Chips/InputChip.js +14 -0
- package/dist/Chips/InputChip.js.map +1 -1
- package/dist/Chips/__tests__/ActionChip.test.tsx +94 -0
- package/dist/Chips/__tests__/ChoiceChips.test.tsx +79 -0
- package/dist/Chips/__tests__/FilterChip.test.tsx +95 -0
- package/dist/Chips/__tests__/InputChip.test.tsx +155 -0
- package/dist/ChipsInput/ChipInputField.cjs +8 -2
- package/dist/ChipsInput/ChipInputField.cjs.map +1 -1
- package/dist/ChipsInput/ChipInputField.js +8 -2
- package/dist/ChipsInput/ChipInputField.js.map +1 -1
- package/dist/ChipsInput/__tests__/ChipDropdownInput.test.tsx +100 -0
- package/dist/ChipsInput/__tests__/ChipInputFields.test.tsx +155 -0
- package/dist/Dropdown/DropdownContent.cjs +2 -2
- package/dist/Dropdown/DropdownContent.cjs.map +1 -1
- package/dist/Dropdown/DropdownContent.js +2 -2
- package/dist/Dropdown/DropdownContent.js.map +1 -1
- package/dist/Dropdown/__tests__/DropdownFilter.test.tsx +39 -0
- package/dist/Footer/Components/FooterTop.cjs +3 -0
- package/dist/Footer/Components/FooterTop.cjs.map +1 -1
- package/dist/Footer/Components/FooterTop.js +3 -0
- package/dist/Footer/Components/FooterTop.js.map +1 -1
- package/dist/Footer/__tests__/Footer.test.tsx +182 -0
- package/dist/GlobalNavigationBar/Logo.cjs +2 -1
- package/dist/GlobalNavigationBar/Logo.cjs.map +1 -1
- package/dist/GlobalNavigationBar/Logo.js +2 -1
- package/dist/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/GlobalNavigationBar/__tests__/Logo.test.tsx +39 -0
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs +10 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.js +10 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs +5 -4
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js +6 -5
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.js +2 -2
- package/dist/GlobalNavigationBar/desktop/UserMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/__tests__/DesktopActions.test.tsx +108 -0
- package/dist/GlobalNavigationBar/desktop/__tests__/ExtendedMainMenu.test.tsx +28 -0
- package/dist/GlobalNavigationBar/desktop/__tests__/MainMenu.test.tsx +55 -0
- package/dist/GlobalNavigationBar/desktop/__tests__/RightSideNav.test.tsx +45 -0
- package/dist/GlobalNavigationBar/desktop/__tests__/UserMenu.test.tsx +125 -0
- package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js +2 -2
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/__tests__/MobileMenu.test.tsx +317 -0
- package/dist/GlobalNavigationBar/mobile/__tests__/MobileMenuContent.test.tsx +294 -0
- package/dist/GlobalNavigationBar/mobile/__tests__/MobileMenuHeader.test.tsx +195 -0
- package/dist/GlobalNavigationBar/types.cjs.map +1 -1
- package/dist/GlobalNavigationBar/types.d.ts +2 -2
- package/dist/GlobalNavigationBar/types.js.map +1 -1
- package/dist/HyperLink/HyperLink.cjs +18 -2
- package/dist/HyperLink/HyperLink.cjs.map +1 -1
- package/dist/HyperLink/HyperLink.d.ts +2 -0
- package/dist/HyperLink/HyperLink.js +18 -2
- package/dist/HyperLink/HyperLink.js.map +1 -1
- package/dist/HyperLink/styling.cjs +4 -0
- package/dist/HyperLink/styling.cjs.map +1 -1
- package/dist/HyperLink/styling.js +4 -0
- package/dist/HyperLink/styling.js.map +1 -1
- package/dist/InputFields/DatepickerField.cjs +21 -5
- package/dist/InputFields/DatepickerField.cjs.map +1 -1
- package/dist/InputFields/DatepickerField.d.ts +1 -1
- package/dist/InputFields/DatepickerField.js +21 -5
- package/dist/InputFields/DatepickerField.js.map +1 -1
- package/dist/InputFields/NumberField.cjs +4 -0
- package/dist/InputFields/NumberField.cjs.map +1 -1
- package/dist/InputFields/NumberField.js +4 -0
- package/dist/InputFields/NumberField.js.map +1 -1
- package/dist/InputFields/RadioButton.cjs +2 -2
- package/dist/InputFields/RadioButton.cjs.map +1 -1
- package/dist/InputFields/RadioButton.d.ts +4 -4
- package/dist/InputFields/RadioButton.js +2 -2
- package/dist/InputFields/RadioButton.js.map +1 -1
- package/dist/InputFields/__tests__/NumberField.test.tsx +67 -0
- package/dist/InputFields/__tests__/NumberInput.test.tsx +68 -0
- package/dist/InputFields/__tests__/QuickSearch.test.tsx +42 -0
- package/dist/InputFields/components/SearchBarInput.cjs +5 -0
- package/dist/InputFields/components/SearchBarInput.cjs.map +1 -1
- package/dist/InputFields/components/SearchBarInput.js +5 -0
- package/dist/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/LinearProgress/__tests__/LinearProgress.test.tsx +25 -0
- package/dist/List/__tests__/ListRow.test.tsx +18 -0
- package/dist/LoadingPage/__tests__/GlobalLoadingPage.test.tsx +23 -0
- package/dist/MiniProductCard/MiniProductCard.cjs +15 -1
- package/dist/MiniProductCard/MiniProductCard.cjs.map +1 -1
- package/dist/MiniProductCard/MiniProductCard.d.ts +1 -0
- package/dist/MiniProductCard/MiniProductCard.js +15 -1
- package/dist/MiniProductCard/MiniProductCard.js.map +1 -1
- package/dist/Modals/ModalContainer.cjs +102 -83
- package/dist/Modals/ModalContainer.cjs.map +1 -1
- package/dist/Modals/ModalContainer.d.ts +20 -1
- package/dist/Modals/ModalContainer.js +103 -84
- package/dist/Modals/ModalContainer.js.map +1 -1
- package/dist/Modals/ModalContent.cjs +7 -3
- package/dist/Modals/ModalContent.cjs.map +1 -1
- package/dist/Modals/ModalContent.js +8 -4
- package/dist/Modals/ModalContent.js.map +1 -1
- package/dist/Modals/ModalDialog.cjs +2 -2
- package/dist/Modals/ModalDialog.cjs.map +1 -1
- package/dist/Modals/ModalDialog.js +3 -3
- package/dist/Modals/ModalDialog.js.map +1 -1
- package/dist/Modals/ModalStyles.cjs +12 -0
- package/dist/Modals/ModalStyles.cjs.map +1 -1
- package/dist/Modals/ModalStyles.js +12 -0
- package/dist/Modals/ModalStyles.js.map +1 -1
- package/dist/Modals/ModalTypes.cjs.map +1 -1
- package/dist/Modals/ModalTypes.d.ts +3 -3
- package/dist/Modals/ModalTypes.js.map +1 -1
- package/dist/Modals/__tests__/Modal.test.tsx +169 -0
- package/dist/Modals/__tests__/ModalContainer.test.tsx +77 -0
- package/dist/Modals/__tests__/ModalContent.test.tsx +126 -0
- package/dist/NavItem/NavItem.cjs +7 -1
- package/dist/NavItem/NavItem.cjs.map +1 -1
- package/dist/NavItem/NavItem.js +7 -1
- package/dist/NavItem/NavItem.js.map +1 -1
- package/dist/NavItem/__tests__/NavItem.test.ts +6 -0
- package/dist/Navigation/NavigationProvider.cjs.map +1 -1
- package/dist/Navigation/NavigationProvider.d.ts +3 -0
- package/dist/Navigation/NavigationProvider.js.map +1 -1
- package/dist/NotificationDot/__tests__/NotificationDot.test.tsx +33 -0
- package/dist/Paginator/Paginator.cjs +18 -14
- package/dist/Paginator/Paginator.cjs.map +1 -1
- package/dist/Paginator/Paginator.d.ts +1 -5
- package/dist/Paginator/Paginator.js +18 -14
- package/dist/Paginator/Paginator.js.map +1 -1
- package/dist/Paginator/__tests__/Paginator.test.tsx +33 -0
- package/dist/Popover/Popover.cjs +1 -1
- package/dist/Popover/Popover.cjs.map +1 -1
- package/dist/Popover/Popover.js +2 -2
- package/dist/Popover/Popover.js.map +1 -1
- package/dist/Popover/__tests__/Popover.test.tsx +64 -0
- package/dist/ProfileButton/__tests__/ProfileButton.test.tsx +31 -0
- package/dist/QuizButton/__tests__/QuizButton.test.tsx +53 -0
- package/dist/SegmentControl/__tests__/SegmentControl.test.tsx +145 -0
- package/dist/SideMenu/SideMenuFooter.cjs +1 -1
- 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/__tests__/SideMenu.test.tsx +99 -0
- package/dist/SideMenu/types.cjs.map +1 -1
- package/dist/SideMenu/types.d.ts +2 -2
- package/dist/SideMenu/types.js.map +1 -1
- package/dist/Switcher/__tests__/SwitcherMenuItem.tsx +14 -0
- package/dist/Table/TableBody.cjs +1 -1
- package/dist/Table/TableBody.cjs.map +1 -1
- package/dist/Table/TableBody.js +2 -2
- package/dist/Table/TableBody.js.map +1 -1
- package/dist/Table/TableStyles.cjs +4 -1
- package/dist/Table/TableStyles.cjs.map +1 -1
- package/dist/Table/TableStyles.js +4 -1
- package/dist/Table/TableStyles.js.map +1 -1
- package/dist/Table/TableTypes.cjs.map +1 -1
- package/dist/Table/TableTypes.d.ts +2 -2
- package/dist/Table/TableTypes.js.map +1 -1
- package/dist/Table/__tests__/Table.test.tsx +499 -0
- package/dist/Tabs/VerticalTabs.cjs +1 -0
- package/dist/Tabs/VerticalTabs.cjs.map +1 -1
- package/dist/Tabs/VerticalTabs.js +1 -0
- package/dist/Tabs/VerticalTabs.js.map +1 -1
- package/dist/Tabs/__tests__/HorizontalTabs.test.tsx +95 -0
- package/dist/Tabs/__tests__/TabLink.test.tsx +40 -0
- package/dist/Tabs/__tests__/Tablist.test.tsx +37 -0
- package/dist/Tag/Tag.cjs +48 -12
- package/dist/Tag/Tag.cjs.map +1 -1
- package/dist/Tag/Tag.js +48 -12
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/Tag/__tests__/Tag.test.tsx +86 -0
- package/dist/Tile/TileCommonItems.cjs +1 -1
- 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/TileTypes.cjs.map +1 -1
- package/dist/Tile/TileTypes.d.ts +2 -2
- package/dist/Tile/TileTypes.js.map +1 -1
- package/dist/Toasters/Toast.cjs +1 -2
- package/dist/Toasters/Toast.cjs.map +1 -1
- package/dist/Toasters/Toast.js +2 -3
- package/dist/Toasters/Toast.js.map +1 -1
- package/dist/Toasters/__tests__/Toast.test.tsx +74 -0
- package/dist/Toggles/TogglerStyles.cjs +171 -15
- package/dist/Toggles/TogglerStyles.cjs.map +1 -1
- package/dist/Toggles/TogglerStyles.js +171 -15
- package/dist/Toggles/TogglerStyles.js.map +1 -1
- package/dist/Toggles/__tests__/ToggleButton.test.tsx +53 -0
- package/dist/Toggles/__tests__/ToggleSwitch.test.tsx +87 -0
- package/dist/Tooltips/__tests__/TooltipWrapper.test.tsx +16 -0
- package/dist/common/NavigationHelper.cjs +0 -28
- package/dist/common/NavigationHelper.cjs.map +1 -1
- package/dist/common/NavigationHelper.d.ts +0 -4
- package/dist/common/NavigationHelper.js +1 -22
- package/dist/common/NavigationHelper.js.map +1 -1
- package/dist/styles/colors.cjs +6 -0
- package/dist/styles/colors.cjs.map +1 -1
- package/dist/styles/colors.d.ts +6 -0
- package/dist/styles/colors.js +6 -0
- package/dist/styles/colors.js.map +1 -1
- package/dist/styles/design-tokens/dark/tokens.css +481 -0
- package/dist/styles/design-tokens/light/tokens.css +481 -0
- package/dist/styles/design-tokens/rqi_dark/tokens.css +481 -0
- package/dist/styles/design-tokens/rqi_light/tokens.css +481 -0
- package/dist/styles/global.cjs +4 -4
- package/dist/styles/global.cjs.map +1 -1
- package/dist/styles/global.js +4 -4
- package/dist/styles/global.js.map +1 -1
- package/dist/styles/react-datepicker.css +766 -0
- package/dist/styles/typography.cjs +4 -1
- package/dist/styles/typography.cjs.map +1 -1
- package/dist/styles/typography.js +4 -1
- package/dist/styles/typography.js.map +1 -1
- package/dist/test-utils.cjs +7 -1
- package/dist/test-utils.cjs.map +1 -1
- package/dist/test-utils.js +7 -1
- package/dist/test-utils.js.map +1 -1
- package/package.json +11 -6
- package/dist/Button/Button.cjs.map +0 -1
- package/dist/Button/Button.d.ts +0 -70
- package/dist/Button/Button.js.map +0 -1
- package/dist/Card/VerticalCard/Card.cjs.map +0 -1
- package/dist/Card/VerticalCard/Card.d.ts +0 -24
- package/dist/Card/VerticalCard/Card.js.map +0 -1
- package/dist/Card/VerticalCard/CardBottomSection.cjs.map +0 -1
- package/dist/Card/VerticalCard/CardBottomSection.d.ts +0 -49
- package/dist/Card/VerticalCard/CardBottomSection.js.map +0 -1
- package/dist/Card/VerticalCard/CardMiddleSection.cjs.map +0 -1
- package/dist/Card/VerticalCard/CardMiddleSection.d.ts +0 -37
- package/dist/Card/VerticalCard/CardMiddleSection.js.map +0 -1
- package/dist/Card/VerticalCard/CardTopSection.cjs.map +0 -1
- package/dist/Card/VerticalCard/CardTopSection.js.map +0 -1
- package/dist/GlobalNavigationBar/__tests__/GlobalNavigationBar.tests.d.ts +0 -1
- package/dist/GlobalNavigationBar/__tests__/Logo.tests.d.ts +0 -1
- package/dist/List/__tests__/ListRow.tests.d.ts +0 -1
- package/dist/Tabs/__tests__/TabLink.tests.d.ts +0 -1
- package/dist/Tabs/__tests__/Tablist.tests.d.ts +0 -2
- package/dist/common/Link.cjs +0 -45
- package/dist/common/Link.cjs.map +0 -1
- package/dist/common/Link.d.ts +0 -9
- package/dist/common/Link.js +0 -37
- package/dist/common/Link.js.map +0 -1
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render } from '../../test-utils';
|
|
3
|
+
import 'jest-styled-components';
|
|
4
|
+
import { ModalContent } from '..';
|
|
5
|
+
import { Size, SystemIcons } from '../..';
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
describe('<ModalContent />', () => {
|
|
10
|
+
let mountingDiv: HTMLElement;
|
|
11
|
+
|
|
12
|
+
beforeEach(() => {
|
|
13
|
+
//being rendered as a React.Portal we need to have the 'root' div defined
|
|
14
|
+
mountingDiv = document.createElement('div');
|
|
15
|
+
mountingDiv.id = 'root';
|
|
16
|
+
document.body.appendChild(mountingDiv);
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
afterEach(() => {
|
|
20
|
+
document.body.removeChild(mountingDiv);
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
it('Check modal not rendered when isModalOpen is false', async () => {
|
|
24
|
+
const { container, getByText } = render(
|
|
25
|
+
<ModalContent
|
|
26
|
+
key="smallModalWithoutImage"
|
|
27
|
+
title={'Header'}
|
|
28
|
+
size={Size.Small}
|
|
29
|
+
isModalOpen={false}
|
|
30
|
+
closeAction={() => {}}
|
|
31
|
+
/>,
|
|
32
|
+
);
|
|
33
|
+
//check modal portal not exists when modal not opened
|
|
34
|
+
expect(container.querySelector('.ReactModalPortal')).toBeNull();
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
it('Check modal visible, title and footer buttons displayed correctly', async () => {
|
|
38
|
+
const { container, getByText } = render(
|
|
39
|
+
<ModalContent
|
|
40
|
+
key="smallModalWithoutImage"
|
|
41
|
+
title={'Header'}
|
|
42
|
+
size={Size.Small}
|
|
43
|
+
isModalOpen={true}
|
|
44
|
+
closeAction={() => {}}
|
|
45
|
+
footerActions={[
|
|
46
|
+
{
|
|
47
|
+
action: () => {},
|
|
48
|
+
text: 'Close',
|
|
49
|
+
variant: 'tertiary',
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
action: () => {},
|
|
53
|
+
text: 'Save',
|
|
54
|
+
},
|
|
55
|
+
]}
|
|
56
|
+
/>,
|
|
57
|
+
);
|
|
58
|
+
//check modal portal defined
|
|
59
|
+
expect(container.querySelector('.ReactModalPortal')).toBeDefined();
|
|
60
|
+
//Check header and footer buttons
|
|
61
|
+
expect(getByText('Header')).toBeDefined();
|
|
62
|
+
expect(getByText('Close')).toBeDefined();
|
|
63
|
+
expect(getByText('Save')).toBeDefined();
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
it('Check tooltip, and link displayed without right footer buttons', async () => {
|
|
67
|
+
const { baseElement, getByText } = render(
|
|
68
|
+
<ModalContent
|
|
69
|
+
key="smallModalWithoutImage"
|
|
70
|
+
title={'Header'}
|
|
71
|
+
size={Size.Small}
|
|
72
|
+
isModalOpen={true}
|
|
73
|
+
closeAction={() => {}}
|
|
74
|
+
tooltip={'some test tooltip'}
|
|
75
|
+
leftFooterAction={{ id: 'test-link', actionType: 'hyperlink', text: 'Link', href: 'http://test.com', icon: <></>, variant: 'default' }}
|
|
76
|
+
/>,
|
|
77
|
+
);
|
|
78
|
+
//check tooltip displayed
|
|
79
|
+
expect(getByText('some test tooltip').textContent).toBeDefined();
|
|
80
|
+
//check footer link displayed
|
|
81
|
+
expect(getByText('Link').children).toBeDefined();
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
it('Check note and footer note displayed', async () => {
|
|
85
|
+
const { baseElement, getByText } = render(
|
|
86
|
+
<ModalContent
|
|
87
|
+
key="smallModalWithoutImage"
|
|
88
|
+
title={'Header'}
|
|
89
|
+
size={Size.Small}
|
|
90
|
+
isModalOpen={true}
|
|
91
|
+
closeAction={() => {}}
|
|
92
|
+
leftFooterAction={{ id: 'test-note', actionType: 'note', text: 'Test note', icon: <SystemIcons.Information /> }}
|
|
93
|
+
note={'Message text'}
|
|
94
|
+
/>,
|
|
95
|
+
);
|
|
96
|
+
expect(getByText('Test note').textContent).toBeDefined();
|
|
97
|
+
expect(getByText('Message text').children).toBeDefined();
|
|
98
|
+
});
|
|
99
|
+
|
|
100
|
+
it('Check close button is displayed', async () => {
|
|
101
|
+
const {getByTestId } = render(
|
|
102
|
+
<ModalContent
|
|
103
|
+
key="smallModalWithoutImage"
|
|
104
|
+
title={'Header'}
|
|
105
|
+
size={Size.Small}
|
|
106
|
+
isModalOpen={true}
|
|
107
|
+
closeAction={() => {}}
|
|
108
|
+
/>,
|
|
109
|
+
);
|
|
110
|
+
expect(getByTestId('content-modal-close-button')).toBeDefined();
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
it('Check modal body displayed', async () => {
|
|
114
|
+
const { baseElement, getByText, container } = render(
|
|
115
|
+
<ModalContent
|
|
116
|
+
key="smallModalWithoutImage"
|
|
117
|
+
title={'Header'}
|
|
118
|
+
size={Size.Small}
|
|
119
|
+
isModalOpen={true}
|
|
120
|
+
closeAction={() => {}}>
|
|
121
|
+
<span>Inner modal text</span>
|
|
122
|
+
</ModalContent>,
|
|
123
|
+
);
|
|
124
|
+
expect(getByText('Inner modal text')).toBeDefined();
|
|
125
|
+
});
|
|
126
|
+
});
|
package/dist/NavItem/NavItem.cjs
CHANGED
|
@@ -11,6 +11,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
11
11
|
var _styles = require("../styles");
|
|
12
12
|
var _typography = require("../styles/typography");
|
|
13
13
|
var _zIndexes = require("../styles/z-indexes");
|
|
14
|
+
var _Navigation = require("../Navigation");
|
|
14
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
16
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
16
17
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -91,7 +92,12 @@ const NavItemDiv = exports.NavItemDiv = _styledComponents.default.div`
|
|
|
91
92
|
}
|
|
92
93
|
`;
|
|
93
94
|
const NavItem = props => {
|
|
94
|
-
|
|
95
|
+
const {
|
|
96
|
+
isActiveRoute
|
|
97
|
+
} = (0, _Navigation.useNavigation)();
|
|
98
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavItemDiv, _objectSpread(_objectSpread({}, props), {}, {
|
|
99
|
+
className: props?.className + (props?.href && isActiveRoute && isActiveRoute(props.href, props.exact ?? false) ? ' active' : '')
|
|
100
|
+
}));
|
|
95
101
|
};
|
|
96
102
|
var _default = exports.default = NavItem;
|
|
97
103
|
//# sourceMappingURL=NavItem.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavItem.cjs","names":["_styledComponents","_interopRequireDefault","require","_react","_styles","_typography","_zIndexes","_jsxRuntime","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","NavItemDiv","exports","styled","div","props","ComponentMStyling","ComponentTextStyle","Regular","COLORS","generateToken","componentType","defaultVariant","theme","BREAKPOINTS","LARGE","Z_INDEXES","active","getColor","hover","focusStyles","NavItem","jsx","_default"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport React from 'react';\r\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\r\nimport {ComponentMStyling, ComponentTextStyle} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useFocusVisibleRef} from '../common';\r\n\r\nexport const NavItemDiv = styled.div`\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n\r\n margin: 0;\r\n padding: 0 21px 0 21px;\r\n height: 64px;\r\n\r\n ${BREAKPOINTS.LARGE} {\r\n height: 80px;\r\n }\r\n\r\n display: flex;\r\n align-items: center;\r\n text-align: center;\r\n position: relative;\r\n\r\n &:after {\r\n content: '';\r\n display: block;\r\n position: absolute;\r\n background-color: transparent;\r\n height: 3px;\r\n border-radius: 3px;\r\n left: 2px;\r\n right: 2px;\r\n bottom: 2px;\r\n }\r\n\r\n &.active:not(.disabled) {\r\n z-index: ${Z_INDEXES.active};\r\n background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n }\r\n }\r\n\r\n &.disabled {\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n }\r\n }\r\n\r\n &:hover:not(.disabled) {\r\n z-index: ${Z_INDEXES.hover};\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n\r\n &:active:not(.disabled) {\r\n z-index: ${Z_INDEXES.active};\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n\r\n\r\n &:focus:not(.disabled) {\r\n ${focusStyles}\r\n outline-offset: -4px;\r\n }\r\n`;\r\n\r\
|
|
1
|
+
{"version":3,"file":"NavItem.cjs","names":["_styledComponents","_interopRequireDefault","require","_react","_styles","_typography","_zIndexes","_Navigation","_jsxRuntime","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","NavItemDiv","exports","styled","div","props","ComponentMStyling","ComponentTextStyle","Regular","COLORS","generateToken","componentType","defaultVariant","theme","BREAKPOINTS","LARGE","Z_INDEXES","active","getColor","hover","focusStyles","NavItem","isActiveRoute","useNavigation","jsx","className","href","exact","_default"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport React from 'react';\r\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\r\nimport {ComponentMStyling, ComponentTextStyle} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport { useNavigation } from '../Navigation';\r\n\r\nexport const NavItemDiv = styled.div`\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n\r\n margin: 0;\r\n padding: 0 21px 0 21px;\r\n height: 64px;\r\n\r\n ${BREAKPOINTS.LARGE} {\r\n height: 80px;\r\n }\r\n\r\n display: flex;\r\n align-items: center;\r\n text-align: center;\r\n position: relative;\r\n\r\n &:after {\r\n content: '';\r\n display: block;\r\n position: absolute;\r\n background-color: transparent;\r\n height: 3px;\r\n border-radius: 3px;\r\n left: 2px;\r\n right: 2px;\r\n bottom: 2px;\r\n }\r\n\r\n &.active:not(.disabled) {\r\n z-index: ${Z_INDEXES.active};\r\n background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n }\r\n }\r\n\r\n &.disabled {\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n }\r\n }\r\n\r\n &:hover:not(.disabled) {\r\n z-index: ${Z_INDEXES.hover};\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n\r\n &:active:not(.disabled) {\r\n z-index: ${Z_INDEXES.active};\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n\r\n\r\n &:focus:not(.disabled) {\r\n ${focusStyles}\r\n outline-offset: -4px;\r\n }\r\n`;\r\n\r\nconst NavItem = (props: any) => {\r\n const {isActiveRoute} = useNavigation();\r\n return (\r\n <NavItemDiv {...props} className={props?.className + (props?.href && isActiveRoute && isActiveRoute(props.href, props.exact ?? false) ? ' active' : '')} />\r\n );\r\n};\r\n\r\nexport default NavItem;\r\n"],"mappings":"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","ignoreList":[]}
|
package/dist/NavItem/NavItem.js
CHANGED
|
@@ -6,6 +6,7 @@ import React from 'react';
|
|
|
6
6
|
import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
|
|
7
7
|
import { ComponentMStyling, ComponentTextStyle } from '../styles/typography';
|
|
8
8
|
import { Z_INDEXES } from '../styles/z-indexes';
|
|
9
|
+
import { useNavigation } from '../Navigation';
|
|
9
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
11
|
export const NavItemDiv = styled.div`
|
|
11
12
|
${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
|
|
@@ -84,7 +85,12 @@ export const NavItemDiv = styled.div`
|
|
|
84
85
|
}
|
|
85
86
|
`;
|
|
86
87
|
const NavItem = props => {
|
|
87
|
-
|
|
88
|
+
const {
|
|
89
|
+
isActiveRoute
|
|
90
|
+
} = useNavigation();
|
|
91
|
+
return /*#__PURE__*/_jsx(NavItemDiv, _objectSpread(_objectSpread({}, props), {}, {
|
|
92
|
+
className: props?.className + (props?.href && isActiveRoute && isActiveRoute(props.href, props.exact ?? false) ? ' active' : '')
|
|
93
|
+
}));
|
|
88
94
|
};
|
|
89
95
|
export default NavItem;
|
|
90
96
|
//# sourceMappingURL=NavItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavItem.js","names":["styled","React","BREAKPOINTS","COLORS","focusStyles","ComponentMStyling","ComponentTextStyle","Z_INDEXES","jsx","_jsx","NavItemDiv","div","props","Regular","generateToken","componentType","defaultVariant","theme","LARGE","active","getColor","hover","NavItem","_objectSpread"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport React from 'react';\r\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\r\nimport {ComponentMStyling, ComponentTextStyle} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useFocusVisibleRef} from '../common';\r\n\r\nexport const NavItemDiv = styled.div`\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n\r\n margin: 0;\r\n padding: 0 21px 0 21px;\r\n height: 64px;\r\n\r\n ${BREAKPOINTS.LARGE} {\r\n height: 80px;\r\n }\r\n\r\n display: flex;\r\n align-items: center;\r\n text-align: center;\r\n position: relative;\r\n\r\n &:after {\r\n content: '';\r\n display: block;\r\n position: absolute;\r\n background-color: transparent;\r\n height: 3px;\r\n border-radius: 3px;\r\n left: 2px;\r\n right: 2px;\r\n bottom: 2px;\r\n }\r\n\r\n &.active:not(.disabled) {\r\n z-index: ${Z_INDEXES.active};\r\n background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n }\r\n }\r\n\r\n &.disabled {\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n }\r\n }\r\n\r\n &:hover:not(.disabled) {\r\n z-index: ${Z_INDEXES.hover};\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n\r\n &:active:not(.disabled) {\r\n z-index: ${Z_INDEXES.active};\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n\r\n\r\n &:focus:not(.disabled) {\r\n ${focusStyles}\r\n outline-offset: -4px;\r\n }\r\n`;\r\n\r\
|
|
1
|
+
{"version":3,"file":"NavItem.js","names":["styled","React","BREAKPOINTS","COLORS","focusStyles","ComponentMStyling","ComponentTextStyle","Z_INDEXES","useNavigation","jsx","_jsx","NavItemDiv","div","props","Regular","generateToken","componentType","defaultVariant","theme","LARGE","active","getColor","hover","NavItem","isActiveRoute","_objectSpread","className","href","exact"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport React from 'react';\r\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\r\nimport {ComponentMStyling, ComponentTextStyle} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport { useNavigation } from '../Navigation';\r\n\r\nexport const NavItemDiv = styled.div`\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n\r\n margin: 0;\r\n padding: 0 21px 0 21px;\r\n height: 64px;\r\n\r\n ${BREAKPOINTS.LARGE} {\r\n height: 80px;\r\n }\r\n\r\n display: flex;\r\n align-items: center;\r\n text-align: center;\r\n position: relative;\r\n\r\n &:after {\r\n content: '';\r\n display: block;\r\n position: absolute;\r\n background-color: transparent;\r\n height: 3px;\r\n border-radius: 3px;\r\n left: 2px;\r\n right: 2px;\r\n bottom: 2px;\r\n }\r\n\r\n &.active:not(.disabled) {\r\n z-index: ${Z_INDEXES.active};\r\n background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n }\r\n }\r\n\r\n &.disabled {\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n }\r\n }\r\n\r\n &:hover:not(.disabled) {\r\n z-index: ${Z_INDEXES.hover};\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n\r\n &:active:not(.disabled) {\r\n z-index: ${Z_INDEXES.active};\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n\r\n &:after {\r\n background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n\r\n\r\n &:focus:not(.disabled) {\r\n ${focusStyles}\r\n outline-offset: -4px;\r\n }\r\n`;\r\n\r\nconst NavItem = (props: any) => {\r\n const {isActiveRoute} = useNavigation();\r\n return (\r\n <NavItemDiv {...props} className={props?.className + (props?.href && isActiveRoute && isActiveRoute(props.href, props.exact ?? false) ? ' active' : '')} />\r\n );\r\n};\r\n\r\nexport default NavItem;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationProvider.cjs","names":["_react","_interopRequireWildcard","require","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NavigationContext","createContext","undefined","NavigationProvider","_ref","children","navigate","isActiveRoute","currentPath","value","React","useMemo","jsx","Provider","exports","propTypes","_propTypes","node","isRequired","useNavigation","context","useContext","Error"],"sources":["../../src/Navigation/NavigationProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, ReactNode } from 'react';\r\n\r\ninterface NavigationContextType {\r\n navigate?: (path: string, isExternal: boolean) => void;\r\n currentPath?: string | undefined;\r\n isActiveRoute?: (url: string, exact: boolean) => boolean;\r\n}\r\n\r\nconst NavigationContext = createContext<NavigationContextType | undefined>(undefined);\r\n\r\nexport interface NavigationProviderProps {\r\n children: ReactNode;\r\n}\r\n\r\nexport const NavigationProvider: React.FC<NavigationProviderProps & Partial<NavigationContextType>> = ({ \r\n children, \r\n navigate,\r\n isActiveRoute,\r\n currentPath\r\n}) => {\r\n const value = React.useMemo(() => ({\r\n navigate,\r\n currentPath,\r\n isActiveRoute\r\n }), [navigate, currentPath, isActiveRoute]);\r\n\r\n return (\r\n <NavigationContext.Provider value={value}>\r\n {children}\r\n </NavigationContext.Provider>\r\n );\r\n};\r\n\r\nexport const useNavigation = (): NavigationContextType => {\r\n const context = useContext(NavigationContext);\r\n if (!context) {\r\n throw new Error('useNavigation must be used within a NavigationProvider');\r\n }\r\n return context;\r\n};"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAoE,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;
|
|
1
|
+
{"version":3,"file":"NavigationProvider.cjs","names":["_react","_interopRequireWildcard","require","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NavigationContext","createContext","undefined","NavigationProvider","_ref","children","navigate","isActiveRoute","currentPath","value","React","useMemo","jsx","Provider","exports","propTypes","_propTypes","node","isRequired","useNavigation","context","useContext","Error"],"sources":["../../src/Navigation/NavigationProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, ReactNode } from 'react';\r\n\r\ninterface NavigationContextType {\r\n /** Navigate to a different path. If navigation is happening to the external source, please set 'isExternal' to true */\r\n navigate?: (path: string, isExternal: boolean) => void;\r\n /** Current path in the navigation context */\r\n currentPath?: string | undefined;\r\n /** Check if a route is active, if 'exact' flag is set then we should check for exact match, and not just part of the route */\r\n isActiveRoute?: (url: string, exact: boolean) => boolean;\r\n}\r\n\r\nconst NavigationContext = createContext<NavigationContextType | undefined>(undefined);\r\n\r\nexport interface NavigationProviderProps {\r\n children: ReactNode;\r\n}\r\n\r\nexport const NavigationProvider: React.FC<NavigationProviderProps & Partial<NavigationContextType>> = ({ \r\n children, \r\n navigate,\r\n isActiveRoute,\r\n currentPath\r\n}) => {\r\n const value = React.useMemo(() => ({\r\n navigate,\r\n currentPath,\r\n isActiveRoute\r\n }), [navigate, currentPath, isActiveRoute]);\r\n\r\n return (\r\n <NavigationContext.Provider value={value}>\r\n {children}\r\n </NavigationContext.Provider>\r\n );\r\n};\r\n\r\nexport const useNavigation = (): NavigationContextType => {\r\n const context = useContext(NavigationContext);\r\n if (!context) {\r\n throw new Error('useNavigation must be used within a NavigationProvider');\r\n }\r\n return context;\r\n};"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAoE,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAWpE,MAAMW,iBAAiB,gBAAG,IAAAC,oBAAa,EAAoCC,SAAS,CAAC;AAM9E,MAAMC,kBAAsF,GAAGC,IAAA,IAKhG;EAAA,IALiG;IACnGC,QAAQ;IACRC,QAAQ;IACRC,aAAa;IACbC;EACJ,CAAC,GAAAJ,IAAA;EACG,MAAMK,KAAK,GAAGC,cAAK,CAACC,OAAO,CAAC,OAAO;IAC/BL,QAAQ;IACRE,WAAW;IACXD;EACJ,CAAC,CAAC,EAAE,CAACD,QAAQ,EAAEE,WAAW,EAAED,aAAa,CAAC,CAAC;EAE3C,oBACI,IAAA5B,WAAA,CAAAiC,GAAA,EAACZ,iBAAiB,CAACa,QAAQ;IAACJ,KAAK,EAAEA,KAAM;IAAAJ,QAAA,EACpCA;EAAQ,CACe,CAAC;AAErC,CAAC;AAACS,OAAA,CAAAX,kBAAA,GAAAA,kBAAA;AAAAA,kBAAA,CAAAY,SAAA;EApBEV,QAAQ,EAAAW,UAAA,CAAA9B,OAAA,CAAA+B,IAAA,CAAAC;AAAA;AAsBL,MAAMC,aAAa,GAAGA,CAAA,KAA6B;EACtD,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACrB,iBAAiB,CAAC;EAC7C,IAAI,CAACoB,OAAO,EAAE;IACV,MAAM,IAAIE,KAAK,CAAC,wDAAwD,CAAC;EAC7E;EACA,OAAOF,OAAO;AAClB,CAAC;AAACN,OAAA,CAAAK,aAAA,GAAAA,aAAA","ignoreList":[]}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
2
|
interface NavigationContextType {
|
|
3
|
+
/** Navigate to a different path. If navigation is happening to the external source, please set 'isExternal' to true */
|
|
3
4
|
navigate?: (path: string, isExternal: boolean) => void;
|
|
5
|
+
/** Current path in the navigation context */
|
|
4
6
|
currentPath?: string | undefined;
|
|
7
|
+
/** Check if a route is active, if 'exact' flag is set then we should check for exact match, and not just part of the route */
|
|
5
8
|
isActiveRoute?: (url: string, exact: boolean) => boolean;
|
|
6
9
|
}
|
|
7
10
|
export interface NavigationProviderProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationProvider.js","names":["React","createContext","useContext","jsx","_jsx","NavigationContext","undefined","NavigationProvider","_ref","children","navigate","isActiveRoute","currentPath","value","useMemo","Provider","propTypes","_pt","node","isRequired","useNavigation","context","Error"],"sources":["../../src/Navigation/NavigationProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, ReactNode } from 'react';\r\n\r\ninterface NavigationContextType {\r\n navigate?: (path: string, isExternal: boolean) => void;\r\n currentPath?: string | undefined;\r\n isActiveRoute?: (url: string, exact: boolean) => boolean;\r\n}\r\n\r\nconst NavigationContext = createContext<NavigationContextType | undefined>(undefined);\r\n\r\nexport interface NavigationProviderProps {\r\n children: ReactNode;\r\n}\r\n\r\nexport const NavigationProvider: React.FC<NavigationProviderProps & Partial<NavigationContextType>> = ({ \r\n children, \r\n navigate,\r\n isActiveRoute,\r\n currentPath\r\n}) => {\r\n const value = React.useMemo(() => ({\r\n navigate,\r\n currentPath,\r\n isActiveRoute\r\n }), [navigate, currentPath, isActiveRoute]);\r\n\r\n return (\r\n <NavigationContext.Provider value={value}>\r\n {children}\r\n </NavigationContext.Provider>\r\n );\r\n};\r\n\r\nexport const useNavigation = (): NavigationContextType => {\r\n const context = useContext(NavigationContext);\r\n if (!context) {\r\n throw new Error('useNavigation must be used within a NavigationProvider');\r\n }\r\n return context;\r\n};"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,QAAmB,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;
|
|
1
|
+
{"version":3,"file":"NavigationProvider.js","names":["React","createContext","useContext","jsx","_jsx","NavigationContext","undefined","NavigationProvider","_ref","children","navigate","isActiveRoute","currentPath","value","useMemo","Provider","propTypes","_pt","node","isRequired","useNavigation","context","Error"],"sources":["../../src/Navigation/NavigationProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, ReactNode } from 'react';\r\n\r\ninterface NavigationContextType {\r\n /** Navigate to a different path. If navigation is happening to the external source, please set 'isExternal' to true */\r\n navigate?: (path: string, isExternal: boolean) => void;\r\n /** Current path in the navigation context */\r\n currentPath?: string | undefined;\r\n /** Check if a route is active, if 'exact' flag is set then we should check for exact match, and not just part of the route */\r\n isActiveRoute?: (url: string, exact: boolean) => boolean;\r\n}\r\n\r\nconst NavigationContext = createContext<NavigationContextType | undefined>(undefined);\r\n\r\nexport interface NavigationProviderProps {\r\n children: ReactNode;\r\n}\r\n\r\nexport const NavigationProvider: React.FC<NavigationProviderProps & Partial<NavigationContextType>> = ({ \r\n children, \r\n navigate,\r\n isActiveRoute,\r\n currentPath\r\n}) => {\r\n const value = React.useMemo(() => ({\r\n navigate,\r\n currentPath,\r\n isActiveRoute\r\n }), [navigate, currentPath, isActiveRoute]);\r\n\r\n return (\r\n <NavigationContext.Provider value={value}>\r\n {children}\r\n </NavigationContext.Provider>\r\n );\r\n};\r\n\r\nexport const useNavigation = (): NavigationContextType => {\r\n const context = useContext(NavigationContext);\r\n if (!context) {\r\n throw new Error('useNavigation must be used within a NavigationProvider');\r\n }\r\n return context;\r\n};"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,QAAmB,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAWpE,MAAMC,iBAAiB,gBAAGJ,aAAa,CAAoCK,SAAS,CAAC;AAMrF,OAAO,MAAMC,kBAAsF,GAAGC,IAAA,IAKhG;EAAA,IALiG;IACnGC,QAAQ;IACRC,QAAQ;IACRC,aAAa;IACbC;EACJ,CAAC,GAAAJ,IAAA;EACG,MAAMK,KAAK,GAAGb,KAAK,CAACc,OAAO,CAAC,OAAO;IAC/BJ,QAAQ;IACRE,WAAW;IACXD;EACJ,CAAC,CAAC,EAAE,CAACD,QAAQ,EAAEE,WAAW,EAAED,aAAa,CAAC,CAAC;EAE3C,oBACIP,IAAA,CAACC,iBAAiB,CAACU,QAAQ;IAACF,KAAK,EAAEA,KAAM;IAAAJ,QAAA,EACpCA;EAAQ,CACe,CAAC;AAErC,CAAC;AAACF,kBAAA,CAAAS,SAAA;EApBEP,QAAQ,EAAAQ,GAAA,CAAAC,IAAA,CAAAC;AAAA;AAsBZ,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAA6B;EACtD,MAAMC,OAAO,GAAGnB,UAAU,CAACG,iBAAiB,CAAC;EAC7C,IAAI,CAACgB,OAAO,EAAE;IACV,MAAM,IAAIC,KAAK,CAAC,wDAAwD,CAAC;EAC7E;EACA,OAAOD,OAAO;AAClB,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render } from '../../test-utils';
|
|
3
|
+
import 'jest-styled-components';
|
|
4
|
+
import { NotificationDot } from '..';
|
|
5
|
+
import { Size } from '../../types';
|
|
6
|
+
import COLORS from '../../styles/colors';
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
describe('<NotificationDot />',()=>{
|
|
10
|
+
it('renders positive small notification dot', async () => {
|
|
11
|
+
const{getByTestId} = render(
|
|
12
|
+
<NotificationDot variant='positive' size={Size.Small} testId='testId'/>
|
|
13
|
+
);
|
|
14
|
+
expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.bg_fill_positive);
|
|
15
|
+
expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.bg_surface_default);
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
it('renders critical large notification dot', async () => {
|
|
19
|
+
const{getByTestId} = render(
|
|
20
|
+
<NotificationDot variant='critical' size={Size.Large} testId='testId'/>
|
|
21
|
+
);
|
|
22
|
+
expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.bg_fill_critical);
|
|
23
|
+
expect(getByTestId('testId')).toHaveStyleRule('border', '3px solid ' + COLORS.bg_surface_default);
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
it('renders critical medium notification dot', async () => {
|
|
27
|
+
const{getByTestId} = render(
|
|
28
|
+
<NotificationDot variant='critical' testId='testId'/>
|
|
29
|
+
);
|
|
30
|
+
expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.bg_fill_critical);
|
|
31
|
+
expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.bg_surface_default);
|
|
32
|
+
});
|
|
33
|
+
});
|
|
@@ -98,7 +98,7 @@ const ItemContent = (0, _styledComponents.default)('div')`
|
|
|
98
98
|
width: 100%;
|
|
99
99
|
height: 100%;
|
|
100
100
|
|
|
101
|
-
&.
|
|
101
|
+
&.currentPage {
|
|
102
102
|
z-index: ${_styles.Z_INDEXES.active};
|
|
103
103
|
color: ${props => _styles.COLORS.generateToken({
|
|
104
104
|
componentType: 'text',
|
|
@@ -131,7 +131,7 @@ const ItemContent = (0, _styledComponents.default)('div')`
|
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
&.
|
|
134
|
+
&.currentPage:after{
|
|
135
135
|
content: '';
|
|
136
136
|
position: absolute;
|
|
137
137
|
bottom: 4px;
|
|
@@ -143,13 +143,13 @@ const ItemContent = (0, _styledComponents.default)('div')`
|
|
|
143
143
|
defaultVariant: 'selected'
|
|
144
144
|
}, props.theme)}
|
|
145
145
|
}
|
|
146
|
-
&.
|
|
146
|
+
&.currentPage:hover:after{
|
|
147
147
|
background-color: ${props => _styles.COLORS.generateToken({
|
|
148
148
|
componentType: 'border',
|
|
149
149
|
defaultVariant: 'selected'
|
|
150
150
|
}, props.theme)}
|
|
151
151
|
}
|
|
152
|
-
&.
|
|
152
|
+
&.currentPage:active:after{
|
|
153
153
|
background-color: ${props => _styles.COLORS.generateToken({
|
|
154
154
|
componentType: 'border',
|
|
155
155
|
defaultVariant: 'selected'
|
|
@@ -160,14 +160,13 @@ const ItemContent = (0, _styledComponents.default)('div')`
|
|
|
160
160
|
const Step = _ref => {
|
|
161
161
|
let {
|
|
162
162
|
up = true,
|
|
163
|
-
target = '',
|
|
164
163
|
disabled = false,
|
|
165
164
|
page,
|
|
166
165
|
onPageChange,
|
|
167
166
|
id
|
|
168
167
|
} = _ref;
|
|
169
168
|
const handleButtonClick = () => {
|
|
170
|
-
onPageChange &&
|
|
169
|
+
onPageChange && onPageChange(page);
|
|
171
170
|
};
|
|
172
171
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
|
|
173
172
|
id: id,
|
|
@@ -175,14 +174,17 @@ const Step = _ref => {
|
|
|
175
174
|
variant: 'secondary',
|
|
176
175
|
shape: 'circular',
|
|
177
176
|
disabled: disabled,
|
|
178
|
-
children: up ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronRight, {
|
|
177
|
+
children: up ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronRight, {
|
|
178
|
+
"aria-label": "Next Page"
|
|
179
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronLeft, {
|
|
180
|
+
"aria-label": "Previous Page"
|
|
181
|
+
})
|
|
179
182
|
});
|
|
180
183
|
};
|
|
181
184
|
const Paginator = _ref2 => {
|
|
182
185
|
let {
|
|
183
186
|
pageCount = 1,
|
|
184
187
|
currentPage = 1,
|
|
185
|
-
baseUrl = '',
|
|
186
188
|
onPageChange
|
|
187
189
|
} = _ref2;
|
|
188
190
|
const pages = [];
|
|
@@ -205,15 +207,16 @@ const Paginator = _ref2 => {
|
|
|
205
207
|
}
|
|
206
208
|
}
|
|
207
209
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
|
|
210
|
+
"aria-label": "Pagination",
|
|
208
211
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Items, {
|
|
209
212
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Step, {
|
|
210
213
|
up: false,
|
|
211
|
-
target: `${baseUrl}/${currentPage - 1}`,
|
|
212
214
|
page: currentPage - 1,
|
|
213
215
|
disabled: currentPage === 1,
|
|
214
216
|
onPageChange: onPageChange,
|
|
215
217
|
id: "paginator-left"
|
|
216
218
|
}), pages.findIndex(item => item === 1) === -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
|
|
219
|
+
"aria-current": currentPage === 1,
|
|
217
220
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
|
|
218
221
|
target: "_self",
|
|
219
222
|
onClick: e => {
|
|
@@ -223,29 +226,32 @@ const Paginator = _ref2 => {
|
|
|
223
226
|
variant: 'styleless',
|
|
224
227
|
href: '',
|
|
225
228
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, {
|
|
226
|
-
className: currentPage === 1 ? '
|
|
229
|
+
className: currentPage === 1 ? 'currentPage' : '',
|
|
227
230
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
228
231
|
children: "1"
|
|
229
232
|
})
|
|
230
233
|
})
|
|
231
234
|
})
|
|
232
235
|
}), currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Dots, {}), pages.map(page => /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
|
|
236
|
+
"aria-current": currentPage === page,
|
|
233
237
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
|
|
234
238
|
target: "_self",
|
|
235
239
|
href: '',
|
|
236
240
|
onClick: e => {
|
|
241
|
+
console.log(`Page changed to: ${page}`);
|
|
237
242
|
onPageChange && onPageChange(page);
|
|
238
243
|
e.preventDefault();
|
|
239
244
|
},
|
|
240
245
|
variant: 'styleless',
|
|
241
246
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, {
|
|
242
|
-
className: currentPage === page ? '
|
|
247
|
+
className: currentPage === page ? 'currentPage' : '',
|
|
243
248
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
244
249
|
children: page
|
|
245
250
|
})
|
|
246
251
|
})
|
|
247
252
|
})
|
|
248
253
|
}, page)), pageCount > 5 && currentPage <= pageCount - 3 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Dots, {}), pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
|
|
254
|
+
"aria-current": currentPage === pageCount,
|
|
249
255
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
|
|
250
256
|
target: "_self",
|
|
251
257
|
href: '',
|
|
@@ -255,7 +261,7 @@ const Paginator = _ref2 => {
|
|
|
255
261
|
e.preventDefault();
|
|
256
262
|
},
|
|
257
263
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, {
|
|
258
|
-
className: currentPage === pageCount ? '
|
|
264
|
+
className: currentPage === pageCount ? 'currentPage' : '',
|
|
259
265
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
260
266
|
children: pageCount
|
|
261
267
|
})
|
|
@@ -263,7 +269,6 @@ const Paginator = _ref2 => {
|
|
|
263
269
|
})
|
|
264
270
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Step, {
|
|
265
271
|
up: true,
|
|
266
|
-
target: `${baseUrl}/${currentPage + 1}`,
|
|
267
272
|
page: currentPage + 1,
|
|
268
273
|
disabled: currentPage === pageCount,
|
|
269
274
|
onPageChange: onPageChange,
|
|
@@ -275,7 +280,6 @@ const Paginator = _ref2 => {
|
|
|
275
280
|
Paginator.propTypes = {
|
|
276
281
|
pageCount: _propTypes.default.number.isRequired,
|
|
277
282
|
currentPage: _propTypes.default.number.isRequired,
|
|
278
|
-
baseUrl: _propTypes.default.string.isRequired,
|
|
279
283
|
onPageChange: _propTypes.default.func
|
|
280
284
|
};
|
|
281
285
|
var _default = exports.default = Paginator;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paginator.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styles","_icons","_Button","_HyperLink","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","props","ComponentMStyling","ComponentTextStyle","Regular","COLORS","generateToken","componentType","defaultVariant","theme","focusStyles","Z_INDEXES","hover","state","active","Dots","ItemContent","Step","_ref","up","target","disabled","page","onPageChange","id","handleButtonClick","jsx","IconButton","action","event","variant","shape","children","SystemIcons","ChevronRight","ChevronLeft","Paginator","_ref2","pageCount","currentPage","baseUrl","pages","from","to","push","jsxs","findIndex","item","HyperLink","onClick","preventDefault","href","className","map","propTypes","_propTypes","number","isRequired","string","func","_default","exports"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {ComponentMStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {IconButton} from '../Button';\r\nimport { HyperLink } from '../HyperLink';\r\n\r\nconst Container = styled.nav`\r\n margin: 20px 0;\r\n display: flex;\r\n justify-content: center;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: 75%;\r\n }\r\n`;\r\n\r\nconst Items = styled.ul`\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n display: flex;\r\n`;\r\n\r\nconst Item = styled.li`\r\n width: 48px;\r\n height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n & > * {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100%;\r\n text-decoration: none;\r\n\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n\r\n &:focus,\r\n &:focus-within {\r\n ${focusStyles}\r\n }\r\n }\r\n & > a:hover {\r\n z-index: ${Z_INDEXES.hover};\r\n color: ${props => COLORS.generateToken({ componentType:'text', state: 'hover' }, props.theme)};\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'hover' }, props.theme)};\r\n }\r\n\r\n & > a:active {\r\n z-index: ${Z_INDEXES.active};\r\n color: ${props => COLORS.generateToken({ componentType:'text', state:'active' }, props.theme)};\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'active' }, props.theme)};\r\n }\r\n`;\r\n\r\nconst Dots = styled(Item)`\r\n cursor: not-allowed;\r\n &:after{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, props.theme))}\r\n content: '...';\r\n }\r\n`;\r\n\r\nconst ItemContent = styled('div')`\r\n text-align:center;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n \r\n &.somename {\r\n z-index: ${Z_INDEXES.active};\r\n color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme)};\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'selected' }, props.theme)};\r\n cursor: default;\r\n &:hover {\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)};\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n }\r\n &:active {\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n }\r\n }\r\n\r\n &.somename:after{\r\n content: '';\r\n position: absolute;\r\n bottom: 4px;\r\n width: 32px;\r\n border-radius: 4px;\r\n height: 4px;\r\n background-color: ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'selected'}, props.theme)}\r\n }\r\n &.somename:hover:after{\r\n background-color: ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'selected'}, props.theme)}\r\n }\r\n &.somename:active:after{\r\n background-color: ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'selected'}, props.theme)}\r\n }\r\n`\r\n\r\nexport interface PaginatorProps {\r\n /**\r\n * Required. The total number of pages.\r\n */\r\n pageCount: number;\r\n\r\n /**\r\n * Required. The current active page.\r\n */\r\n currentPage: number;\r\n\r\n /**\r\n * Required. The base URL to which the page number will be appended.\r\n */\r\n baseUrl: string;\r\n\r\n /**\r\n * Optional. A callback function that will be called when the page changes.\r\n * It receives the new page number as its argument.\r\n * If the function returns false, the page change will be prevented.\r\n */\r\n onPageChange?: (page: number) => boolean | void;\r\n};\r\n\r\nconst Step = ({\r\n up = true,\r\n target = '',\r\n disabled = false,\r\n page,\r\n onPageChange,\r\n id,\r\n}: {\r\n up: boolean;\r\n target: string;\r\n disabled: boolean;\r\n page: number;\r\n onPageChange?: (page: number) => void | boolean;\r\n id?: string;\r\n}) => {\r\n \r\n const handleButtonClick = () => {\r\n onPageChange && !onPageChange(page);\r\n }\r\n\r\n return (\r\n <IconButton id={id}\r\n action={event => handleButtonClick()}\r\n variant={'secondary'}\r\n shape={'circular'}\r\n disabled={disabled}>\r\n {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\r\n </IconButton>\r\n )\r\n};\r\n\r\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\r\n const pages = [];\r\n let from = 2;\r\n let to = 4;\r\n if (pageCount === 0) return null;\r\n\r\n if (pageCount > 1) {\r\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\r\n from = currentPage - 1;\r\n to = currentPage + 1;\r\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\r\n from = pageCount - 3;\r\n to = pageCount - 1;\r\n }\r\n if (to > pageCount) {\r\n to = pageCount;\r\n }\r\n for (let i = from; i <= to; i += 1) {\r\n pages.push(i);\r\n }\r\n }\r\n\r\n return (\r\n <Container>\r\n <Items>\r\n <Step up={false}\r\n target={`${baseUrl}/${currentPage - 1}`}\r\n page={currentPage - 1}\r\n disabled={currentPage === 1}\r\n onPageChange={onPageChange}\r\n id=\"paginator-left\"/>\r\n {pages.findIndex(item => item === 1) === -1 && (\r\n <Item>\r\n <HyperLink\r\n target='_self'\r\n onClick={(e) => {\r\n onPageChange && onPageChange(1);\r\n e.preventDefault();\r\n } } variant={'styleless'} href={''}>\r\n <ItemContent className={currentPage === 1 ? 'somename' : ''}>\r\n <span>1</span>\r\n </ItemContent>\r\n </HyperLink>\r\n </Item>\r\n )}\r\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\r\n <Dots/>\r\n )}\r\n {pages.map(page => (\r\n <Item key={page}>\r\n <HyperLink\r\n target='_self'\r\n href={''}\r\n onClick={(e) => {\r\n onPageChange && onPageChange(page);\r\n e.preventDefault();\r\n } } variant={'styleless'}>\r\n <ItemContent className={currentPage === page ? 'somename' : ''}>\r\n <span>{page}</span>\r\n </ItemContent>\r\n </HyperLink>\r\n </Item>\r\n ))}\r\n {pageCount > 5 && currentPage <= pageCount - 3 && (\r\n <Dots/>\r\n )}\r\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\r\n <Item>\r\n <HyperLink\r\n target='_self'\r\n href={''}\r\n variant='styleless'\r\n onClick={(e) => {\r\n onPageChange && onPageChange(pageCount);\r\n e.preventDefault();\r\n }}>\r\n <ItemContent className={currentPage === pageCount ? 'somename' : ''}>\r\n <span>{pageCount}</span>\r\n </ItemContent>\r\n </HyperLink>\r\n </Item>\r\n )}\r\n <Step up\r\n target={`${baseUrl}/${currentPage + 1}`}\r\n page={currentPage + 1}\r\n disabled={currentPage === pageCount}\r\n onPageChange={onPageChange}\r\n id=\"paginator-right\"/>\r\n </Items>\r\n </Container>\r\n );\r\n};\r\n\r\nexport default Paginator;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Paginator.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styles","_icons","_Button","_HyperLink","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","props","ComponentMStyling","ComponentTextStyle","Regular","COLORS","generateToken","componentType","defaultVariant","theme","focusStyles","Z_INDEXES","hover","state","active","Dots","ItemContent","Step","_ref","up","disabled","page","onPageChange","id","handleButtonClick","jsx","IconButton","action","event","variant","shape","children","SystemIcons","ChevronRight","ChevronLeft","Paginator","_ref2","pageCount","currentPage","pages","from","to","push","jsxs","findIndex","item","HyperLink","target","onClick","preventDefault","href","className","map","console","log","propTypes","_propTypes","number","isRequired","func","_default","exports"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {ComponentMStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {IconButton} from '../Button';\r\nimport { HyperLink } from '../HyperLink';\r\n\r\nconst Container = styled.nav`\r\n margin: 20px 0;\r\n display: flex;\r\n justify-content: center;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: 75%;\r\n }\r\n`;\r\n\r\nconst Items = styled.ul`\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n display: flex;\r\n`;\r\n\r\nconst Item = styled.li`\r\n width: 48px;\r\n height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n & > * {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100%;\r\n text-decoration: none;\r\n\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n\r\n &:focus,\r\n &:focus-within {\r\n ${focusStyles}\r\n }\r\n }\r\n & > a:hover {\r\n z-index: ${Z_INDEXES.hover};\r\n color: ${props => COLORS.generateToken({ componentType:'text', state: 'hover' }, props.theme)};\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'hover' }, props.theme)};\r\n }\r\n\r\n & > a:active {\r\n z-index: ${Z_INDEXES.active};\r\n color: ${props => COLORS.generateToken({ componentType:'text', state:'active' }, props.theme)};\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'active' }, props.theme)};\r\n }\r\n`;\r\n\r\nconst Dots = styled(Item)`\r\n cursor: not-allowed;\r\n &:after{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, props.theme))}\r\n content: '...';\r\n }\r\n`;\r\n\r\nconst ItemContent = styled('div')`\r\n text-align:center;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n \r\n &.currentPage {\r\n z-index: ${Z_INDEXES.active};\r\n color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme)};\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'selected' }, props.theme)};\r\n cursor: default;\r\n &:hover {\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)};\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n }\r\n &:active {\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n }\r\n }\r\n\r\n &.currentPage:after{\r\n content: '';\r\n position: absolute;\r\n bottom: 4px;\r\n width: 32px;\r\n border-radius: 4px;\r\n height: 4px;\r\n background-color: ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'selected'}, props.theme)}\r\n }\r\n &.currentPage:hover:after{\r\n background-color: ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'selected'}, props.theme)}\r\n }\r\n &.currentPage:active:after{\r\n background-color: ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'selected'}, props.theme)}\r\n }\r\n`\r\n\r\nexport interface PaginatorProps {\r\n /**\r\n * Required. The total number of pages.\r\n */\r\n pageCount: number;\r\n\r\n /**\r\n * Required. The current active page.\r\n */\r\n currentPage: number;\r\n\r\n /**\r\n * Optional. A callback function that will be called when the page changes.\r\n * It receives the new page number as its argument.\r\n * If the function returns false, the page change will be prevented.\r\n */\r\n onPageChange?: (page: number) => boolean | void;\r\n};\r\n\r\nconst Step = ({\r\n up = true,\r\n disabled = false,\r\n page,\r\n onPageChange,\r\n id,\r\n}: {\r\n up: boolean;\r\n disabled: boolean;\r\n page: number;\r\n onPageChange?: (page: number) => void | boolean;\r\n id?: string;\r\n}) => {\r\n \r\n const handleButtonClick = () => {\r\n onPageChange && onPageChange(page);\r\n }\r\n\r\n return (\r\n <IconButton id={id}\r\n action={event => handleButtonClick()}\r\n variant={'secondary'}\r\n shape={'circular'}\r\n disabled={disabled}>\r\n {up ? <SystemIcons.ChevronRight aria-label=\"Next Page\" /> : <SystemIcons.ChevronLeft aria-label=\"Previous Page\"/>}\r\n </IconButton>\r\n )\r\n};\r\n\r\nconst Paginator = ({ pageCount = 1, currentPage = 1, onPageChange }: PaginatorProps) => {\r\n const pages = [];\r\n let from = 2;\r\n let to = 4;\r\n if (pageCount === 0) return null;\r\n\r\n if (pageCount > 1) {\r\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\r\n from = currentPage - 1;\r\n to = currentPage + 1;\r\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\r\n from = pageCount - 3;\r\n to = pageCount - 1;\r\n }\r\n if (to > pageCount) {\r\n to = pageCount;\r\n }\r\n for (let i = from; i <= to; i += 1) {\r\n pages.push(i);\r\n }\r\n }\r\n\r\n return (\r\n <Container aria-label=\"Pagination\">\r\n <Items>\r\n <Step up={false}\r\n page={currentPage - 1}\r\n disabled={currentPage === 1}\r\n onPageChange={onPageChange}\r\n id=\"paginator-left\"/>\r\n {pages.findIndex(item => item === 1) === -1 && (\r\n <Item aria-current={currentPage === 1}>\r\n <HyperLink\r\n target='_self'\r\n onClick={(e) => {\r\n onPageChange && onPageChange(1);\r\n e.preventDefault();\r\n } } variant={'styleless'} href={''}>\r\n <ItemContent className={currentPage === 1 ? 'currentPage' : ''}>\r\n <span>1</span>\r\n </ItemContent>\r\n </HyperLink>\r\n </Item>\r\n )}\r\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\r\n <Dots/>\r\n )}\r\n {pages.map(page => (\r\n <Item key={page} aria-current={currentPage === page}>\r\n <HyperLink\r\n target='_self'\r\n href={''}\r\n onClick={(e) => {\r\n console.log(`Page changed to: ${page}`);\r\n onPageChange && onPageChange(page);\r\n e.preventDefault();\r\n } } variant={'styleless'}>\r\n <ItemContent className={currentPage === page ? 'currentPage' : ''}>\r\n <span>{page}</span>\r\n </ItemContent>\r\n </HyperLink>\r\n </Item>\r\n ))}\r\n {pageCount > 5 && currentPage <= pageCount - 3 && (\r\n <Dots/>\r\n )}\r\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\r\n <Item aria-current={currentPage === pageCount}>\r\n <HyperLink\r\n target='_self'\r\n href={''}\r\n variant='styleless'\r\n onClick={(e) => {\r\n onPageChange && onPageChange(pageCount);\r\n e.preventDefault();\r\n }}>\r\n <ItemContent className={currentPage === pageCount ? 'currentPage' : ''}>\r\n <span>{pageCount}</span>\r\n </ItemContent>\r\n </HyperLink>\r\n </Item>\r\n )}\r\n <Step up\r\n page={currentPage + 1}\r\n disabled={currentPage === pageCount}\r\n onPageChange={onPageChange}\r\n id=\"paginator-right\"/>\r\n </Items>\r\n </Container>\r\n );\r\n};\r\n\r\nexport default Paginator;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -8,10 +8,6 @@ export interface PaginatorProps {
|
|
|
8
8
|
* Required. The current active page.
|
|
9
9
|
*/
|
|
10
10
|
currentPage: number;
|
|
11
|
-
/**
|
|
12
|
-
* Required. The base URL to which the page number will be appended.
|
|
13
|
-
*/
|
|
14
|
-
baseUrl: string;
|
|
15
11
|
/**
|
|
16
12
|
* Optional. A callback function that will be called when the page changes.
|
|
17
13
|
* It receives the new page number as its argument.
|
|
@@ -19,5 +15,5 @@ export interface PaginatorProps {
|
|
|
19
15
|
*/
|
|
20
16
|
onPageChange?: (page: number) => boolean | void;
|
|
21
17
|
}
|
|
22
|
-
declare const Paginator: ({ pageCount, currentPage,
|
|
18
|
+
declare const Paginator: ({ pageCount, currentPage, onPageChange }: PaginatorProps) => React.JSX.Element | null;
|
|
23
19
|
export default Paginator;
|