superdesk-ui-framework 3.0.65 → 3.0.67
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/app/styles/_boxed-list.scss +10 -3
- package/app/styles/_helpers.scss +3 -1
- package/app/styles/components/_list-item.scss +22 -11
- package/app/styles/components/_sd-searchbar.scss +20 -1
- package/app/styles/primereact/_pr-dialog.scss +29 -13
- package/app-typescript/components/Autocomplete.tsx +9 -3
- package/app-typescript/components/Badge.tsx +16 -2
- package/app-typescript/components/Dropdown.tsx +3 -1
- package/app-typescript/components/DropdownFirst.tsx +14 -2
- package/app-typescript/components/DurationInput.tsx +19 -4
- package/app-typescript/components/EmptyState.tsx +11 -2
- package/app-typescript/components/Layouts/Panel.tsx +12 -1
- package/app-typescript/components/Lists/ContentList.tsx +5 -1
- package/app-typescript/components/Modal.tsx +12 -3
- package/app-typescript/components/Navigation/BottomNav.tsx +9 -2
- package/app-typescript/components/Navigation/QuickNavBar.tsx +10 -2
- package/app-typescript/components/Navigation/SideBarMenu.tsx +9 -4
- package/app-typescript/components/SearchBar.tsx +1 -0
- package/app-typescript/components/SidebarMenu.tsx +8 -1
- package/app-typescript/components/TabList.tsx +5 -1
- package/app-typescript/components/TagInput.tsx +4 -1
- package/app-typescript/components/ThemeSelector.tsx +13 -2
- package/app-typescript/components/TreeMenu.tsx +127 -122
- package/app-typescript/components/TreeSelect/TreeSelect.tsx +157 -141
- package/app-typescript/components/WithPortal.tsx +49 -0
- package/app-typescript/components/avatar/avatar-image.tsx +2 -0
- package/app-typescript/components/avatar/avatar.tsx +2 -1
- package/dist/examples.bundle.js +1409 -1278
- package/dist/playgrounds/planning.html +121 -43
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +398 -385
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +359 -365
- package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +33 -33
- package/dist/playgrounds/react-playgrounds/Multiedit.tsx +227 -231
- package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +41 -38
- package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +76 -96
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +73 -101
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +788 -729
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +35 -26
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +140 -121
- package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +40 -25
- package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +6 -5
- package/dist/playgrounds/react-playgrounds/components/Layout.tsx +0 -2
- package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -9
- package/dist/superdesk-ui.bundle.css +79 -33
- package/dist/superdesk-ui.bundle.js +833 -729
- package/dist/vendor.bundle.js +14 -14
- package/examples/pages/playgrounds/planning.html +121 -43
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +398 -385
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +359 -365
- package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +33 -33
- package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +227 -231
- package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +41 -38
- package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +76 -96
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +73 -101
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +788 -729
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +35 -26
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +140 -121
- package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +40 -25
- package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +6 -5
- package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +0 -2
- package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -9
- package/package.json +1 -1
- package/react/{components → app-typescript/components}/Autocomplete.js +2 -2
- package/react/{components → app-typescript/components}/Badge.js +1 -1
- package/react/{components → app-typescript/components}/Dropdown.js +3 -1
- package/react/{components → app-typescript/components}/DropdownFirst.js +6 -2
- package/react/{components → app-typescript/components}/DurationInput.js +5 -1
- package/react/{components → app-typescript/components}/EmptyState.js +2 -1
- package/react/{components → app-typescript/components}/Lists/ContentList.js +1 -1
- package/react/{components → app-typescript/components}/Modal.js +2 -2
- package/react/{components → app-typescript/components}/Navigation/BottomNav.js +4 -1
- package/react/{components → app-typescript/components}/Navigation/QuickNavBar.js +2 -1
- package/react/{components → app-typescript/components}/Navigation/SideBarMenu.js +3 -1
- package/react/{components → app-typescript/components}/SearchBar.js +1 -0
- package/react/{components → app-typescript/components}/TabList.js +2 -1
- package/react/{components → app-typescript/components}/TagInput.js +1 -1
- package/react/{components → app-typescript/components}/TreeSelect/TreeSelect.d.ts +3 -2
- package/react/{components → app-typescript/components}/TreeSelect/TreeSelect.js +81 -73
- package/react/app-typescript/components/WithPortal.d.ts +14 -0
- package/react/app-typescript/components/WithPortal.js +69 -0
- package/react/{components → app-typescript/components}/avatar/avatar.js +2 -1
- package/react/examples/pages/playgrounds/dummy-data/items.d.ts +16 -0
- package/react/examples/pages/playgrounds/dummy-data/items.js +95 -0
- package/react/examples/pages/playgrounds/react-playgrounds/CoreLayout.d.ts +51 -0
- package/react/examples/pages/playgrounds/react-playgrounds/CoreLayout.js +454 -0
- package/react/examples/pages/playgrounds/react-playgrounds/EditorTest.d.ts +27 -0
- package/react/examples/pages/playgrounds/react-playgrounds/EditorTest.js +256 -0
- package/react/examples/pages/playgrounds/react-playgrounds/FirstPlayground.d.ts +19 -0
- package/react/examples/pages/playgrounds/react-playgrounds/FirstPlayground.js +160 -0
- package/react/examples/pages/playgrounds/react-playgrounds/Index.d.ts +11 -0
- package/react/examples/pages/playgrounds/react-playgrounds/Index.js +25 -0
- package/react/examples/pages/playgrounds/react-playgrounds/Multiedit.d.ts +36 -0
- package/react/examples/pages/playgrounds/react-playgrounds/Multiedit.js +200 -0
- package/react/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.d.ts +22 -0
- package/react/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.js +134 -0
- package/react/examples/pages/playgrounds/react-playgrounds/PersonalProfile.d.ts +40 -0
- package/react/examples/pages/playgrounds/react-playgrounds/PersonalProfile.js +350 -0
- package/react/examples/pages/playgrounds/react-playgrounds/RundownEditor.d.ts +32 -0
- package/react/examples/pages/playgrounds/react-playgrounds/RundownEditor.js +267 -0
- package/react/examples/pages/playgrounds/react-playgrounds/Rundowns.d.ts +39 -0
- package/react/examples/pages/playgrounds/react-playgrounds/Rundowns.js +558 -0
- package/react/examples/pages/playgrounds/react-playgrounds/SamsPlayground.d.ts +24 -0
- package/react/examples/pages/playgrounds/react-playgrounds/SamsPlayground.js +241 -0
- package/react/examples/pages/playgrounds/react-playgrounds/TestGround.d.ts +27 -0
- package/react/examples/pages/playgrounds/react-playgrounds/TestGround.js +508 -0
- package/react/examples/pages/playgrounds/react-playgrounds/UiPlayground.d.ts +24 -0
- package/react/examples/pages/playgrounds/react-playgrounds/UiPlayground.js +239 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.d.ts +11 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.js +64 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.d.ts +10 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.js +62 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.d.ts +14 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.js +65 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.d.ts +8 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.js +53 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.d.ts +8 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.js +53 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/Index.d.ts +19 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/Index.js +41 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/Layout.d.ts +8 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/Layout.js +40 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.d.ts +8 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.js +53 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/LeftPanel.d.ts +9 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/LeftPanel.js +53 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/MainPanel.d.ts +10 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/MainPanel.js +63 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.d.ts +8 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.js +55 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/Panel.d.ts +10 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/Panel.js +63 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/PanelContent.d.ts +8 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/PanelContent.js +53 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.d.ts +11 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.js +63 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/PanelFooter.d.ts +8 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/PanelFooter.js +54 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.d.ts +12 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.js +63 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/RightPanel.d.ts +9 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/RightPanel.js +53 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/SearchBar.d.ts +23 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/SearchBar.js +92 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.d.ts +20 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.js +83 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/SubNav.d.ts +9 -0
- package/react/examples/pages/playgrounds/react-playgrounds/components/SubNav.js +60 -0
- package/tsconfig.json +5 -1
- /package/dist/playgrounds/dummy-data/{items.js → items.ts} +0 -0
- /package/examples/pages/playgrounds/dummy-data/{items.js → items.ts} +0 -0
- /package/react/{components → app-typescript/components}/Alert.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Alert.js +0 -0
- /package/react/{components → app-typescript/components}/Autocomplete.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Badge.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Button.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Button.js +0 -0
- /package/react/{components → app-typescript/components}/ButtonGroup.d.ts +0 -0
- /package/react/{components → app-typescript/components}/ButtonGroup.js +0 -0
- /package/react/{components → app-typescript/components}/Carousel.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Carousel.js +0 -0
- /package/react/{components → app-typescript/components}/CheckButtonGroup.d.ts +0 -0
- /package/react/{components → app-typescript/components}/CheckButtonGroup.js +0 -0
- /package/react/{components → app-typescript/components}/CheckGroup.d.ts +0 -0
- /package/react/{components → app-typescript/components}/CheckGroup.js +0 -0
- /package/react/{components → app-typescript/components}/Checkbox.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Checkbox.js +0 -0
- /package/react/{components → app-typescript/components}/CheckboxButton.d.ts +0 -0
- /package/react/{components → app-typescript/components}/CheckboxButton.js +0 -0
- /package/react/{components → app-typescript/components}/ContentDivider.d.ts +0 -0
- /package/react/{components → app-typescript/components}/ContentDivider.js +0 -0
- /package/react/{components → app-typescript/components}/CreateButton.d.ts +0 -0
- /package/react/{components → app-typescript/components}/CreateButton.js +0 -0
- /package/react/{components → app-typescript/components}/DatePicker.d.ts +0 -0
- /package/react/{components → app-typescript/components}/DatePicker.js +0 -0
- /package/react/{components → app-typescript/components}/Divider.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Divider.js +0 -0
- /package/react/{components → app-typescript/components}/DonutChart.d.ts +0 -0
- /package/react/{components → app-typescript/components}/DonutChart.js +0 -0
- /package/react/{components → app-typescript/components}/DragHandle.d.ts +0 -0
- /package/react/{components → app-typescript/components}/DragHandle.js +0 -0
- /package/react/{components → app-typescript/components}/DropZone.d.ts +0 -0
- /package/react/{components → app-typescript/components}/DropZone.js +0 -0
- /package/react/{components → app-typescript/components}/Dropdown.d.ts +0 -0
- /package/react/{components → app-typescript/components}/DropdownFirst.d.ts +0 -0
- /package/react/{components → app-typescript/components}/DurationInput.d.ts +0 -0
- /package/react/{components → app-typescript/components}/EmptyState.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Form/FormGroup.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Form/FormGroup.js +0 -0
- /package/react/{components → app-typescript/components}/Form/FormItem.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Form/FormItem.js +0 -0
- /package/react/{components → app-typescript/components}/Form/FormLabel.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Form/FormLabel.js +0 -0
- /package/react/{components → app-typescript/components}/Form/FormRow.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Form/FormRow.js +0 -0
- /package/react/{components → app-typescript/components}/Form/FormRowNew.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Form/FormRowNew.js +0 -0
- /package/react/{components → app-typescript/components}/Form/FormText.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Form/FormText.js +0 -0
- /package/react/{components → app-typescript/components}/Form/InputBase.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Form/InputBase.js +0 -0
- /package/react/{components → app-typescript/components}/Form/InputNew.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Form/InputNew.js +0 -0
- /package/react/{components → app-typescript/components}/Form/InputWrapper.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Form/InputWrapper.js +0 -0
- /package/react/{components → app-typescript/components}/Form/index.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Form/index.js +0 -0
- /package/react/{components → app-typescript/components}/FormLabel.d.ts +0 -0
- /package/react/{components → app-typescript/components}/FormLabel.js +0 -0
- /package/react/{components → app-typescript/components}/GridItem.d.ts +0 -0
- /package/react/{components → app-typescript/components}/GridItem.js +0 -0
- /package/react/{components → app-typescript/components}/GridList.d.ts +0 -0
- /package/react/{components → app-typescript/components}/GridList.js +0 -0
- /package/react/{components → app-typescript/components}/HeadingText.d.ts +0 -0
- /package/react/{components → app-typescript/components}/HeadingText.js +0 -0
- /package/react/{components → app-typescript/components}/HelloWorld.d.ts +0 -0
- /package/react/{components → app-typescript/components}/HelloWorld.js +0 -0
- /package/react/{components → app-typescript/components}/Icon.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Icon.js +0 -0
- /package/react/{components → app-typescript/components}/IconButton.d.ts +0 -0
- /package/react/{components → app-typescript/components}/IconButton.js +0 -0
- /package/react/{components → app-typescript/components}/IconLabel.d.ts +0 -0
- /package/react/{components → app-typescript/components}/IconLabel.js +0 -0
- /package/react/{components → app-typescript/components}/IconPicker.d.ts +0 -0
- /package/react/{components → app-typescript/components}/IconPicker.js +0 -0
- /package/react/{components → app-typescript/components}/Input.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Input.js +0 -0
- /package/react/{components → app-typescript/components}/Label.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Label.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthorinInnerSideBar.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthorinInnerSideBar.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringContainer.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringContainer.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrame.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrame.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameContainer.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameContainer.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameLeftBar.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameLeftBar.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameMain.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameMain.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameNavBar.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameNavBar.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameOverlay.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameOverlay.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameRightBar.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameRightBar.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameSidePanel.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameSidePanel.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameSidePanelOverlay.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringFrameSidePanelOverlay.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringInnerBody.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringInnerBody.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringInnerHeader.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringInnerHeader.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringMain.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringMain.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringMainContainer.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringMainContainer.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringMainContent.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringMainContent.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringMainToolBar.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/AuthoringMainToolBar.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/BottomBarAction.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/BottomBarAction.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/Container.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/Container.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/ContentSplitter.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/ContentSplitter.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/CoreLayout.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/CoreLayout.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/CoreLayoutContainer.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/CoreLayoutContainer.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/CoreLayoutFooter.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/CoreLayoutFooter.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/CoreLayoutMain.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/CoreLayoutMain.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/CoreLayoutOverlay.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/CoreLayoutOverlay.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/CoreLayoutSlideInMenu.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/CoreLayoutSlideInMenu.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/CoreLayoutTopMenu.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/CoreLayoutTopMenu.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/HamburgerButton.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/HamburgerButton.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/HeaderPanel.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/HeaderPanel.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/Layout.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/Layout.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/LayoutContainer.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/LayoutContainer.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/LeftPanel.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/LeftPanel.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/MainMenu.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/MainMenu.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/MainPanel.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/MainPanel.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/NotificationPanel.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/NotificationPanel.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/OverlayPanel.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/OverlayPanel.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/PageLayout.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/PageLayout.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/Panel.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/Panel.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/RightPanel.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/RightPanel.js +0 -0
- /package/react/{components → app-typescript/components}/Layouts/index.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Layouts/index.js +0 -0
- /package/react/{components → app-typescript/components}/LeftMenu.d.ts +0 -0
- /package/react/{components → app-typescript/components}/LeftMenu.js +0 -0
- /package/react/{components → app-typescript/components}/ListItemLoader.d.ts +0 -0
- /package/react/{components → app-typescript/components}/ListItemLoader.js +0 -0
- /package/react/{components → app-typescript/components}/Lists/BoxedList.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Lists/BoxedList.js +0 -0
- /package/react/{components → app-typescript/components}/Lists/ContentList.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Lists/SimpleList.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Lists/SimpleList.js +0 -0
- /package/react/{components → app-typescript/components}/Lists/TableList.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Lists/TableList.js +0 -0
- /package/react/{components → app-typescript/components}/Lists/index.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Lists/index.js +0 -0
- /package/react/{components → app-typescript/components}/Loader.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Loader.js +0 -0
- /package/react/{components → app-typescript/components}/Menu.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Menu.js +0 -0
- /package/react/{components → app-typescript/components}/Modal.d.ts +0 -0
- /package/react/{components → app-typescript/components}/MultiSelect.d.ts +0 -0
- /package/react/{components → app-typescript/components}/MultiSelect.js +0 -0
- /package/react/{components → app-typescript/components}/NavButton.d.ts +0 -0
- /package/react/{components → app-typescript/components}/NavButton.js +0 -0
- /package/react/{components → app-typescript/components}/Navigation/BottomNav.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Navigation/QuickNavBar.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Navigation/SideBarMenu.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Navigation/SideBarTabs.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Navigation/SideBarTabs.js +0 -0
- /package/react/{components → app-typescript/components}/Navigation/index.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Navigation/index.js +0 -0
- /package/react/{components → app-typescript/components}/Popover.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Popover.js +0 -0
- /package/react/{components → app-typescript/components}/PropsList.d.ts +0 -0
- /package/react/{components → app-typescript/components}/PropsList.js +0 -0
- /package/react/{components → app-typescript/components}/RadioButtonGroup.d.ts +0 -0
- /package/react/{components → app-typescript/components}/RadioButtonGroup.js +0 -0
- /package/react/{components → app-typescript/components}/RadioGroup.d.ts +0 -0
- /package/react/{components → app-typescript/components}/RadioGroup.js +0 -0
- /package/react/{components → app-typescript/components}/ResizablePanels.d.ts +0 -0
- /package/react/{components → app-typescript/components}/ResizablePanels.js +0 -0
- /package/react/{components → app-typescript/components}/ResizeObserverComponent.d.ts +0 -0
- /package/react/{components → app-typescript/components}/ResizeObserverComponent.js +0 -0
- /package/react/{components → app-typescript/components}/Rotate.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Rotate.js +0 -0
- /package/react/{components → app-typescript/components}/SearchBar.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Select.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Select.js +0 -0
- /package/react/{components → app-typescript/components}/SelectGrid.d.ts +0 -0
- /package/react/{components → app-typescript/components}/SelectGrid.js +0 -0
- /package/react/{components → app-typescript/components}/SelectPreview.d.ts +0 -0
- /package/react/{components → app-typescript/components}/SelectPreview.js +0 -0
- /package/react/{components → app-typescript/components}/SelectWithTemplate.d.ts +0 -0
- /package/react/{components → app-typescript/components}/SelectWithTemplate.js +0 -0
- /package/react/{components → app-typescript/components}/ShowPopup.d.ts +0 -0
- /package/react/{components → app-typescript/components}/ShowPopup.js +0 -0
- /package/react/{components → app-typescript/components}/SingleAndDoubleClickFunction.d.ts +0 -0
- /package/react/{components → app-typescript/components}/SingleAndDoubleClickFunction.js +0 -0
- /package/react/{components → app-typescript/components}/Skeleton.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Skeleton.js +0 -0
- /package/react/{components → app-typescript/components}/SlidingToolbar.d.ts +0 -0
- /package/react/{components → app-typescript/components}/SlidingToolbar.js +0 -0
- /package/react/{components → app-typescript/components}/Spacer.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Spacer.js +0 -0
- /package/react/{components → app-typescript/components}/Spinner.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Spinner.js +0 -0
- /package/react/{components → app-typescript/components}/StrechBar.d.ts +0 -0
- /package/react/{components → app-typescript/components}/StrechBar.js +0 -0
- /package/react/{components → app-typescript/components}/SubNav.d.ts +0 -0
- /package/react/{components → app-typescript/components}/SubNav.js +0 -0
- /package/react/{components → app-typescript/components}/Switch.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Switch.js +0 -0
- /package/react/{components → app-typescript/components}/SwitchGroup.d.ts +0 -0
- /package/react/{components → app-typescript/components}/SwitchGroup.js +0 -0
- /package/react/{components → app-typescript/components}/TabCustom.d.ts +0 -0
- /package/react/{components → app-typescript/components}/TabCustom.js +0 -0
- /package/react/{components → app-typescript/components}/TabList.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Tag.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Tag.js +0 -0
- /package/react/{components → app-typescript/components}/TagInput.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Text/Heading.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Text/Heading.js +0 -0
- /package/react/{components → app-typescript/components}/Text/Text.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Text/Text.js +0 -0
- /package/react/{components → app-typescript/components}/Text/Time.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Text/Time.js +0 -0
- /package/react/{components → app-typescript/components}/ThemeSelector.d.ts +0 -0
- /package/react/{components → app-typescript/components}/ThemeSelector.js +0 -0
- /package/react/{components → app-typescript/components}/TimePicker.d.ts +0 -0
- /package/react/{components → app-typescript/components}/TimePicker.js +0 -0
- /package/react/{components → app-typescript/components}/Toast.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Toast.js +0 -0
- /package/react/{components → app-typescript/components}/ToastMessage.d.ts +0 -0
- /package/react/{components → app-typescript/components}/ToastMessage.js +0 -0
- /package/react/{components → app-typescript/components}/ToastText.d.ts +0 -0
- /package/react/{components → app-typescript/components}/ToastText.js +0 -0
- /package/react/{components → app-typescript/components}/ToastWrapper.d.ts +0 -0
- /package/react/{components → app-typescript/components}/ToastWrapper.js +0 -0
- /package/react/{components → app-typescript/components}/Togglebox.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Togglebox.js +0 -0
- /package/react/{components → app-typescript/components}/Tooltip.d.ts +0 -0
- /package/react/{components → app-typescript/components}/Tooltip.js +0 -0
- /package/react/{components → app-typescript/components}/TreeSelect/KeyboardNavigation.d.ts +0 -0
- /package/react/{components → app-typescript/components}/TreeSelect/KeyboardNavigation.js +0 -0
- /package/react/{components → app-typescript/components}/TreeSelect/TreeSelectItem.d.ts +0 -0
- /package/react/{components → app-typescript/components}/TreeSelect/TreeSelectItem.js +0 -0
- /package/react/{components → app-typescript/components}/TreeSelect/TreeSelectPill.d.ts +0 -0
- /package/react/{components → app-typescript/components}/TreeSelect/TreeSelectPill.js +0 -0
- /package/react/{components → app-typescript/components}/WithPagination.d.ts +0 -0
- /package/react/{components → app-typescript/components}/WithPagination.js +0 -0
- /package/react/{components → app-typescript/components}/WithPopover.d.ts +0 -0
- /package/react/{components → app-typescript/components}/WithPopover.js +0 -0
- /package/react/{components → app-typescript/components}/WithSizeObserver.d.ts +0 -0
- /package/react/{components → app-typescript/components}/WithSizeObserver.js +0 -0
- /package/react/{components → app-typescript/components}/_Positioner.d.ts +0 -0
- /package/react/{components → app-typescript/components}/_Positioner.js +0 -0
- /package/react/{components → app-typescript/components}/avatar/avatar-action-add.d.ts +0 -0
- /package/react/{components → app-typescript/components}/avatar/avatar-action-add.js +0 -0
- /package/react/{components → app-typescript/components}/avatar/avatar-group.d.ts +0 -0
- /package/react/{components → app-typescript/components}/avatar/avatar-group.js +0 -0
- /package/react/{components → app-typescript/components}/avatar/avatar-image.d.ts +0 -0
- /package/react/{components → app-typescript/components}/avatar/avatar-image.js +0 -0
- /package/react/{components → app-typescript/components}/avatar/avatar-number.d.ts +0 -0
- /package/react/{components → app-typescript/components}/avatar/avatar-number.js +0 -0
- /package/react/{components → app-typescript/components}/avatar/avatar-placeholder.d.ts +0 -0
- /package/react/{components → app-typescript/components}/avatar/avatar-placeholder.js +0 -0
- /package/react/{components → app-typescript/components}/avatar/avatar-text.d.ts +0 -0
- /package/react/{components → app-typescript/components}/avatar/avatar-text.js +0 -0
- /package/react/{components → app-typescript/components}/avatar/avatar-wrapper.d.ts +0 -0
- /package/react/{components → app-typescript/components}/avatar/avatar-wrapper.js +0 -0
- /package/react/{components → app-typescript/components}/avatar/avatar.d.ts +0 -0
- /package/react/{components → app-typescript/components}/avatar/interfaces.d.ts +0 -0
- /package/react/{components → app-typescript/components}/avatar/interfaces.js +0 -0
- /package/react/{helpers.d.ts → app-typescript/helpers.d.ts} +0 -0
- /package/react/{helpers.js → app-typescript/helpers.js} +0 -0
- /package/react/{index.d.ts → app-typescript/index.d.ts} +0 -0
- /package/react/{index.js → app-typescript/index.js} +0 -0
@@ -4,12 +4,16 @@
|
|
4
4
|
display: flex;
|
5
5
|
flex-direction: column;
|
6
6
|
align-self: stretch;
|
7
|
-
gap: $sd-base-increment * 1
|
7
|
+
gap: $sd-base-increment * 1;
|
8
8
|
margin-block-end: $sd-base-increment * 2;
|
9
9
|
}
|
10
10
|
|
11
|
+
.boxed-list--compact {
|
12
|
+
gap: $sd-base-increment * 1;
|
13
|
+
}
|
14
|
+
|
11
15
|
.boxed-list--comfortable {
|
12
|
-
gap: $sd-base-increment *
|
16
|
+
gap: $sd-base-increment * 1.5;
|
13
17
|
}
|
14
18
|
|
15
19
|
$boxed-list-palette: $sd-basic-palette;
|
@@ -80,7 +84,10 @@ $boxed-list-palette: $sd-basic-palette;
|
|
80
84
|
.boxed-list__item--clickable {
|
81
85
|
&:hover {
|
82
86
|
cursor: pointer;
|
83
|
-
box-shadow: $shadow__base--
|
87
|
+
box-shadow: $shadow__base--z2;
|
88
|
+
}
|
89
|
+
&:active {
|
90
|
+
box-shadow: 0 0 2px 1px hsla(0, 0%, 0%, 0.12);
|
84
91
|
}
|
85
92
|
}
|
86
93
|
|
package/app/styles/_helpers.scss
CHANGED
@@ -549,22 +549,34 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
|
|
549
549
|
|
550
550
|
// NESTED list items
|
551
551
|
.sd-list-item-nested {
|
552
|
-
|
553
|
-
|
554
|
-
|
552
|
+
--parent-item-height: 58px;
|
553
|
+
display: grid;
|
554
|
+
grid-template-rows: var(--parent-item-height) 0fr;
|
555
|
+
transition: grid-template-rows 0.3s ease-out;
|
556
|
+
& > .sd-list-item {
|
557
|
+
max-height: var(--parent-item-height);
|
558
|
+
height: var(--parent-item-height);
|
559
|
+
}
|
555
560
|
}
|
556
561
|
|
557
562
|
.sd-list-item-nested__childs {
|
558
563
|
position: relative;
|
559
564
|
z-index: 0;
|
560
|
-
|
561
|
-
|
565
|
+
overflow: hidden !important;
|
566
|
+
display: grid;
|
567
|
+
grid-template-rows: 1fr;
|
562
568
|
margin-inline-start: 1rem;
|
569
|
+
transition: all 0.3s ease-out;
|
563
570
|
|
564
571
|
.sd-list-item {
|
565
572
|
margin-block-start: 0;
|
566
573
|
border-block-start: 1px solid var(--sd-colour-line--x-light);
|
567
574
|
}
|
575
|
+
.sd-list-item-nested__childs-inner {
|
576
|
+
overflow: hidden;
|
577
|
+
opacity: 0;
|
578
|
+
transition: opacity 0.2s ease-out;
|
579
|
+
}
|
568
580
|
}
|
569
581
|
|
570
582
|
.sd-list-item-nested__parent {
|
@@ -574,19 +586,18 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
|
|
574
586
|
|
575
587
|
.sd-list-item-nested--collapsed {
|
576
588
|
.sd-list-item-nested__childs {
|
577
|
-
transition: all ease-in 0.2s;
|
578
|
-
max-height: 0;
|
579
589
|
opacity: 0;
|
580
|
-
margin-block-end: 0;
|
581
|
-
overflow: hidden;
|
582
590
|
}
|
583
591
|
}
|
584
592
|
|
585
593
|
.sd-list-item-nested--expanded {
|
594
|
+
grid-template-rows: var(--parent-item-height) 1fr;
|
586
595
|
.sd-list-item-nested__childs {
|
587
|
-
|
588
|
-
max-height: 114rem;
|
596
|
+
grid-template-rows: 1fr;
|
589
597
|
opacity: 1;
|
598
|
+
.sd-list-item-nested__childs-inner {
|
599
|
+
opacity: 1;
|
600
|
+
}
|
590
601
|
}
|
591
602
|
}
|
592
603
|
|
@@ -44,7 +44,7 @@
|
|
44
44
|
border-radius: $border-radius__base--medium;
|
45
45
|
border: 1px solid var(--color-border-line--medium);
|
46
46
|
background-color: var(--sd-colour-bg__searchbar);
|
47
|
-
box-shadow: inset 0
|
47
|
+
box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.14);
|
48
48
|
transition: box-shadow 0.2s ease-out;
|
49
49
|
|
50
50
|
&:hover {
|
@@ -77,6 +77,25 @@
|
|
77
77
|
border-color: rgba(123,123,123,0.4);
|
78
78
|
}
|
79
79
|
}
|
80
|
+
|
81
|
+
.dropdown {
|
82
|
+
background-color: var(--sd-colour-bg__searchbar);
|
83
|
+
border-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
|
84
|
+
border-inline-end: 1px solid var(--color-border-line--medium);
|
85
|
+
margin-inline-end: 1px;
|
86
|
+
transition: box-shadow 0.2s ease-out;
|
87
|
+
.dropdown__toggle {
|
88
|
+
height: 100%;
|
89
|
+
padding-inline: var(--space--1-5);
|
90
|
+
}
|
91
|
+
}
|
92
|
+
&.sd-searchbar--focused,
|
93
|
+
&:focus-within {
|
94
|
+
.dropdown {
|
95
|
+
border-inline-end-color: var(--sd-colour-interactive--alpha-50);
|
96
|
+
box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), 3px 0 0 var(--sd-colour-interactive--alpha-10);
|
97
|
+
}
|
98
|
+
}
|
80
99
|
}
|
81
100
|
|
82
101
|
.sd-searchbar__input, input[type="text"].sd-searchbar__input, input[type="search"].sd-searchbar__input {
|
@@ -260,7 +260,6 @@
|
|
260
260
|
}
|
261
261
|
|
262
262
|
.p-dialog .p-dialog-content {
|
263
|
-
background-color: transparent;
|
264
263
|
font-size: 1.4rem;
|
265
264
|
|
266
265
|
p {
|
@@ -323,7 +322,8 @@
|
|
323
322
|
}
|
324
323
|
|
325
324
|
.p-dialog-content {
|
326
|
-
|
325
|
+
padding: var(--dialog-content-padding);
|
326
|
+
background-color: var(--dialog-content-bg);
|
327
327
|
.sd-main-content-grid {
|
328
328
|
height: 100% !important;
|
329
329
|
}
|
@@ -350,30 +350,46 @@
|
|
350
350
|
}
|
351
351
|
|
352
352
|
// padding
|
353
|
-
.p-dialog-content--0-padding
|
354
|
-
|
353
|
+
.p-dialog-content--0-padding,
|
354
|
+
.p-dialog-content--padding-none {
|
355
|
+
--dialog-content-padding: 0 !important;
|
355
356
|
}
|
356
357
|
|
357
|
-
.p-dialog-content--s-padding
|
358
|
-
|
358
|
+
.p-dialog-content--s-padding,
|
359
|
+
.p-dialog-content--padding-small {
|
360
|
+
--dialog-content-padding: var(--space--2);
|
359
361
|
}
|
360
362
|
|
361
|
-
.p-dialog-content--m-padding
|
362
|
-
|
363
|
+
.p-dialog-content--m-padding,
|
364
|
+
.p-dialog-content--padding-medium {
|
365
|
+
--dialog-content-padding: var(--space--3);
|
363
366
|
}
|
364
367
|
|
365
|
-
.p-dialog-content--l-padding
|
366
|
-
|
368
|
+
.p-dialog-content--l-padding,
|
369
|
+
.p-dialog-content--padding-large, {
|
370
|
+
--dialog-content-padding: var(--space--4);
|
367
371
|
}
|
368
372
|
|
369
373
|
.p-dialog-content-bg--default {
|
370
|
-
|
374
|
+
--dialog-content-bg: var(--color-modal-Bg) !important;
|
371
375
|
}
|
372
376
|
|
373
377
|
.p-dialog-content-bg--dark {
|
374
|
-
|
378
|
+
--dialog-content-bg: var(--sd-colour-panel-bg--200) !important;
|
375
379
|
}
|
376
380
|
|
377
381
|
.p-dialog-content-bg--medium {
|
378
|
-
|
382
|
+
--dialog-content-bg: var(--sd-colour-panel-bg--100) !important;
|
379
383
|
}
|
384
|
+
|
385
|
+
.modal__sticky-header {
|
386
|
+
position: sticky;
|
387
|
+
inset-block-start: calc(-1 * var(--dialog-content-padding));
|
388
|
+
background-color: var(--dialog-content-bg);
|
389
|
+
padding-inline: var(--dialog-content-padding);
|
390
|
+
padding-block-start: var(--dialog-content-padding);
|
391
|
+
padding-block-end: var(--space--1);
|
392
|
+
z-index: 2;
|
393
|
+
margin: calc(-1 * var(--dialog-content-padding));
|
394
|
+
margin-block-end: 0;
|
395
|
+
}
|
@@ -146,9 +146,15 @@ export class Autocomplete extends React.Component<IProps, IState> {
|
|
146
146
|
onChange={(event: {originalEvent: Event, value: any}) => this.handleChange(event)}
|
147
147
|
onSelect={(event: {originalEvent: Event, value: any}) => this.handleSelect(event)} />
|
148
148
|
|
149
|
-
{this.props.isSearchField && this.state.selectedItem
|
150
|
-
<button
|
151
|
-
|
149
|
+
{this.props.isSearchField && this.state.selectedItem
|
150
|
+
? <button
|
151
|
+
className="sd-searchbar__cancel"
|
152
|
+
onClick={() => this.handleInputClear()}
|
153
|
+
>
|
154
|
+
<i className="icon-remove-sign" aria-label="remove-sign" />
|
155
|
+
</button>
|
156
|
+
: null
|
157
|
+
}
|
152
158
|
|
153
159
|
{!this.props.isSearchField ?
|
154
160
|
<div className='sd-input__message-box'>
|
@@ -22,11 +22,25 @@ export class Badge extends React.PureComponent<IProps> {
|
|
22
22
|
return (
|
23
23
|
<div className='element-with-badge' data-test-id={this.props['data-test-id']}>
|
24
24
|
{this.props.children}
|
25
|
-
<span
|
25
|
+
<span
|
26
|
+
className={classes}
|
27
|
+
style={{backgroundColor: this.props.hexColor}}
|
28
|
+
data-test-id="badge-content"
|
29
|
+
>
|
30
|
+
{this.props.text}
|
31
|
+
</span>
|
26
32
|
</div>
|
27
33
|
);
|
28
34
|
} else {
|
29
|
-
return
|
35
|
+
return (
|
36
|
+
<span
|
37
|
+
className={classes}
|
38
|
+
style={{backgroundColor: this.props.hexColor}}
|
39
|
+
data-test-id={this.props['data-test-id']}
|
40
|
+
>
|
41
|
+
{this.props.text}
|
42
|
+
</span>
|
43
|
+
);
|
30
44
|
}
|
31
45
|
}
|
32
46
|
}
|
@@ -259,7 +259,9 @@ export const Dropdown = ({
|
|
259
259
|
<div ref={buttonRef} style={{ display: 'content' }}>
|
260
260
|
{(() => {
|
261
261
|
const attrs = {
|
262
|
-
className: children.props.className
|
262
|
+
className: children.props.className
|
263
|
+
? (children.props.className + ' dropdown__toggle dropdown-toggle')
|
264
|
+
: 'dropdown__toggle dropdown-toggle',
|
263
265
|
'aria-haspopup': "menu",
|
264
266
|
'aria-expanded': open,
|
265
267
|
onClick: toggleDisplay,
|
@@ -125,7 +125,13 @@ export const DropdownFirst = ({
|
|
125
125
|
if (headerFooter) {
|
126
126
|
return (
|
127
127
|
<div className={classes} >
|
128
|
-
<button
|
128
|
+
<button
|
129
|
+
className={navDropdown
|
130
|
+
? 'dropdown__toggle navbtn dropdown-toggle'
|
131
|
+
: 'dropdown__toggle nav-btn dropdown-toggle'
|
132
|
+
}
|
133
|
+
onClick={isOpen}
|
134
|
+
>
|
129
135
|
{icon ?
|
130
136
|
(<i className={"icon-" + icon}></i>) :
|
131
137
|
(<React.Fragment>{name}<span className="dropdown__caret"></span></React.Fragment>)
|
@@ -157,7 +163,13 @@ export const DropdownFirst = ({
|
|
157
163
|
} else {
|
158
164
|
return (
|
159
165
|
<div className={classes} >
|
160
|
-
<button
|
166
|
+
<button
|
167
|
+
className={navDropdown
|
168
|
+
? 'dropdown__toggle navbtn dropdown-toggle'
|
169
|
+
: 'dropdown__toggle nav-btn dropdown-toggle'
|
170
|
+
}
|
171
|
+
onClick={isOpen}
|
172
|
+
>
|
161
173
|
{icon ?
|
162
174
|
(<i className={"icon-" + icon}></i>) :
|
163
175
|
(<React.Fragment>{name}<span className="dropdown__caret"></span></React.Fragment>)
|
@@ -261,7 +261,13 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
|
|
261
261
|
}
|
262
262
|
|
263
263
|
handleFocusOnKeyUp(event: React.KeyboardEvent<HTMLInputElement>, ref: HTMLInputElement | null) {
|
264
|
-
if (
|
264
|
+
if (
|
265
|
+
event.key !== 'ArrowRight'
|
266
|
+
&& event.key !== 'ArrowLeft'
|
267
|
+
&& event.key !== 'ArrowUp'
|
268
|
+
&& event.key !== 'ArrowDown'
|
269
|
+
&& event.key !== 'Backspace'
|
270
|
+
) {
|
265
271
|
if ((event.keyCode > 46 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106)) {
|
266
272
|
const target = event.target as HTMLInputElement;
|
267
273
|
if (target.value.length >= 2) {
|
@@ -278,9 +284,18 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
|
|
278
284
|
if (this.props.preview) {
|
279
285
|
return (
|
280
286
|
<div className='sd-input__duration-input-preview'>
|
281
|
-
<div
|
282
|
-
|
283
|
-
|
287
|
+
<div>
|
288
|
+
<span className='duration-input-preview'>{this.state.hours}</span>
|
289
|
+
<span className='sd-input__suffix'>h</span>
|
290
|
+
</div>
|
291
|
+
<div>
|
292
|
+
<span className='duration-input-preview'>{this.state.minutes}</span>
|
293
|
+
<span className='sd-input__suffix'>m</span>
|
294
|
+
</div>
|
295
|
+
<div>
|
296
|
+
<span className='duration-input-preview'>{this.state.seconds}</span>
|
297
|
+
<span className='sd-input__suffix'>s</span>
|
298
|
+
</div>
|
284
299
|
</div>
|
285
300
|
);
|
286
301
|
}
|
@@ -16,10 +16,19 @@ export class EmptyState extends React.PureComponent<IProps> {
|
|
16
16
|
[`content-state__image--${this.props.size}`]: this.props.size || this.props.size !== undefined,
|
17
17
|
});
|
18
18
|
|
19
|
-
let image = require(
|
19
|
+
let image = require(
|
20
|
+
`../../app/img/empty_states/empty-state--${
|
21
|
+
this.props.size ? this.props.size : 'small'
|
22
|
+
}-${
|
23
|
+
this.props.illustration ? this.props.illustration : '1'
|
24
|
+
}.svg`,
|
25
|
+
);
|
20
26
|
|
21
27
|
return (
|
22
|
-
<div className={
|
28
|
+
<div className={
|
29
|
+
'content-state--empty-container'
|
30
|
+
+ (this.props.absolutePositioned ? ' content-state__empty-container--absolute' : '')}
|
31
|
+
>
|
23
32
|
<div className='content-state__empty-info'>
|
24
33
|
<figure className={classes}>
|
25
34
|
<img src={image} alt={this.props.illustration} />
|
@@ -11,7 +11,18 @@ interface IPropsPanel {
|
|
11
11
|
side?: 'left' | 'right';
|
12
12
|
theme?: 'light' | 'dark';
|
13
13
|
className?: string;
|
14
|
-
size?:
|
14
|
+
size?:
|
15
|
+
'xx-small'
|
16
|
+
| 'x-small'
|
17
|
+
| 'small'
|
18
|
+
| 'medium'
|
19
|
+
| 'large'
|
20
|
+
| 'x-large'
|
21
|
+
| 'xx-large'
|
22
|
+
| 'xxx-large'
|
23
|
+
| 'full'
|
24
|
+
| 'auto'
|
25
|
+
| {custom: React.CSSProperties['width']};
|
15
26
|
background?: 'transparent' | 'light' | 'grey'; // defaults to light (white)
|
16
27
|
open?: boolean;
|
17
28
|
}
|
@@ -66,7 +66,11 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
|
|
66
66
|
}
|
67
67
|
{this.props.itemColum.map((item, index) => {
|
68
68
|
return <div
|
69
|
-
className={`
|
69
|
+
className={`
|
70
|
+
sd-list-item__column
|
71
|
+
${item.fullwidth && 'sd-list-item__column--grow'}
|
72
|
+
${!item.border && 'sd-list-item__column--no-border'}`
|
73
|
+
}
|
70
74
|
key={index}>
|
71
75
|
{item.itemRow.map((e, i) => {
|
72
76
|
return (
|
@@ -13,7 +13,16 @@ interface IProps {
|
|
13
13
|
contentBg?: 'default' | 'medium' | 'dark';
|
14
14
|
contentPadding?: 'none' | 'small' | 'medium' | 'large';
|
15
15
|
size?: 'small' | 'medium' | 'large' | 'x-large';
|
16
|
-
position?:
|
16
|
+
position?:
|
17
|
+
"center"
|
18
|
+
| "top"
|
19
|
+
| "bottom"
|
20
|
+
| "left"
|
21
|
+
| "right"
|
22
|
+
| "top-left"
|
23
|
+
| "top-right"
|
24
|
+
| "bottom-left"
|
25
|
+
| "bottom-right";
|
17
26
|
maximized?: boolean;
|
18
27
|
maximizable?: boolean;
|
19
28
|
headerTemplate?: JSX.Element | string;
|
@@ -28,8 +37,8 @@ export class Modal extends React.Component<IProps, {}> {
|
|
28
37
|
[`p-dialog-content--${this.props.size}`]: this.props.size,
|
29
38
|
'p-dialog-content-bg--default': this.props.contentBg === undefined,
|
30
39
|
[`p-dialog-content-bg--${this.props.contentBg}`]: this.props.contentBg,
|
31
|
-
'p-dialog-content--
|
32
|
-
[`p-dialog-content
|
40
|
+
'p-dialog-content--padding-small': this.props.contentPadding === undefined,
|
41
|
+
[`p-dialog-content--padding-${this.props.contentPadding}`]: this.props.contentPadding,
|
33
42
|
}, this.props.className);
|
34
43
|
return (
|
35
44
|
<div style={{display: 'content'}}
|
@@ -58,8 +58,15 @@ export class BottomNav extends React.PureComponent<IProps, IState> {
|
|
58
58
|
<ul className='sd-bottom-nav-list'>
|
59
59
|
{this.props.items.map((item, index) => {
|
60
60
|
return (
|
61
|
-
<li
|
62
|
-
|
61
|
+
<li
|
62
|
+
key={index}
|
63
|
+
className={
|
64
|
+
'sd-bottom-nav-list__item'
|
65
|
+
+ (item['active']
|
66
|
+
? ' sd-bottom-nav-list__item--active'
|
67
|
+
: (index === this.state.index ? ' sd-bottom-nav-list__item--active' : ''))
|
68
|
+
}
|
69
|
+
>
|
63
70
|
<a className='sd-bottom-nav-list__item-title' onClick={(event) => {
|
64
71
|
this.handleClick(index);
|
65
72
|
item.onClick(event);
|
@@ -76,7 +76,12 @@ export class QuickNavBar extends React.PureComponent<IProps, IState> {
|
|
76
76
|
);
|
77
77
|
} else {
|
78
78
|
return (
|
79
|
-
<li
|
79
|
+
<li
|
80
|
+
key={index}
|
81
|
+
data-sd-tooltip={item['tooltip']}
|
82
|
+
data-flow='right'
|
83
|
+
className="sd-quickbar-menu__list-item"
|
84
|
+
>
|
80
85
|
<a role='button' aria-label={item['tooltip']} className={'sd-quickbar__btn'}
|
81
86
|
onClick={() => this.handleClick(item, index, event)}>
|
82
87
|
<Icon size={'small'} name={item['icon']} />
|
@@ -98,7 +103,10 @@ export class QuickNavBar extends React.PureComponent<IProps, IState> {
|
|
98
103
|
<li key={index} data-sd-tooltip={item['tooltip']} data-flow='right'>
|
99
104
|
<a role='button'
|
100
105
|
aria-label={item['tooltip']}
|
101
|
-
className={
|
106
|
+
className={
|
107
|
+
'sd-quickbar__btn'
|
108
|
+
+ (index === this.state.index ? ' sd-quickbar__btn--active' : '')
|
109
|
+
}
|
102
110
|
onClick={() => this.handleClick(item, index, event)}>
|
103
111
|
<Icon size={'small'} name={item['icon']} />
|
104
112
|
</a>
|
@@ -67,9 +67,13 @@ export class SideBarMenu extends React.PureComponent<IProps, IState> {
|
|
67
67
|
data-sd-tooltip={item['tooltip']}
|
68
68
|
data-flow='right'
|
69
69
|
className={item.hover ? 'authoring-active__item' : ''}>
|
70
|
-
<a
|
71
|
-
|
72
|
-
|
70
|
+
<a
|
71
|
+
className={'sd-sidebar-menu__btn'
|
72
|
+
+ (this.state.hover ? ' sd-sidebar-menu__btn--closed ' : '')
|
73
|
+
+ (item['active']
|
74
|
+
? ' sd-sidebar-menu__btn--active'
|
75
|
+
: (index === this.state.index ? ' sd-sidebar-menu__btn--active' : '')
|
76
|
+
)}
|
73
77
|
onClick={() => {
|
74
78
|
this.handleClick(index);
|
75
79
|
if (item.hover) {
|
@@ -78,7 +82,8 @@ export class SideBarMenu extends React.PureComponent<IProps, IState> {
|
|
78
82
|
item.onCLick();
|
79
83
|
}
|
80
84
|
}
|
81
|
-
}}
|
85
|
+
}}
|
86
|
+
>
|
82
87
|
<span className='sd-sidebar-menu__main-icon '>
|
83
88
|
<Icon size={item['size']} name={item['icon']} />
|
84
89
|
</span>
|
@@ -56,6 +56,7 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
|
|
56
56
|
});
|
57
57
|
return (
|
58
58
|
<div className={classes} ref={this.inputRef}>
|
59
|
+
{this.props.children}
|
59
60
|
<label className="sd-searchbar__icon"></label>
|
60
61
|
<input id="search-input"
|
61
62
|
ref={(input: any) => (input && this.props.focused) && input.focus()}
|
@@ -50,7 +50,14 @@ export class SidebarMenu extends React.PureComponent<IProps, IState> {
|
|
50
50
|
} else {
|
51
51
|
return (
|
52
52
|
<li key={index} data-sd-tooltip={item['tooltip']} data-flow='right'>
|
53
|
-
<a className={
|
53
|
+
<a className={
|
54
|
+
'sd-sidebar-menu__btn'
|
55
|
+
+ (index === this.state.closeIndex ? ' sd-sidebar-menu__btn--closed ' : '')
|
56
|
+
+ (item['active']
|
57
|
+
? ' sd-sidebar-menu__btn--active'
|
58
|
+
: (index === this.state.index ? ' sd-sidebar-menu__btn--active' : '')
|
59
|
+
)
|
60
|
+
}
|
54
61
|
onClick={() => this.handleClick(index)}>
|
55
62
|
<span className='sd-sidebar-menu__main-icon '>
|
56
63
|
<Icon size={item['size']} name={item['icon']} />
|
@@ -63,7 +63,11 @@ class TabList extends React.PureComponent<ITabList, IState> {
|
|
63
63
|
onClick={() => this.handleChange(index)}
|
64
64
|
role='tab'
|
65
65
|
aria-selected={this.state.index === index ? 'true' : 'false'}
|
66
|
-
className={
|
66
|
+
className={
|
67
|
+
'sd-nav-tabs__tab'
|
68
|
+
+ (this.state.index === index ? ' sd-nav-tabs__tab--active' : '')
|
69
|
+
}
|
70
|
+
>
|
67
71
|
<span>{item.props.label}</span>
|
68
72
|
</button>)}
|
69
73
|
</div>
|
@@ -41,7 +41,10 @@ export class TagInput extends React.Component<IProps> {
|
|
41
41
|
tabindex={this.props.tabindex}
|
42
42
|
>
|
43
43
|
<Chips
|
44
|
-
className={`
|
44
|
+
className={`
|
45
|
+
tags-input--multi-select sd-input__input
|
46
|
+
${this.props.disabled ? ' tags-input__padding-disabled' : ''}`
|
47
|
+
}
|
45
48
|
allowDuplicate={false}
|
46
49
|
separator=","
|
47
50
|
onChange={(event) => onChange(event.value)}
|
@@ -40,12 +40,23 @@ export class ThemeSelector extends React.Component<IProps> {
|
|
40
40
|
<div className='sd-theme-selector__item'
|
41
41
|
key={index}
|
42
42
|
tabIndex={-1}>
|
43
|
-
<figure
|
43
|
+
<figure
|
44
|
+
className="sd-theme-selector__item-thumb"
|
45
|
+
data-theme={item.theme + '-ui'}
|
46
|
+
aria-hidden="true"
|
47
|
+
>
|
44
48
|
<svg viewBox="0 0 156 94" xmlns="http://www.w3.org/2000/svg">
|
45
49
|
<g fill="none" fillRule="evenodd">
|
46
50
|
<path d="m0 0h156v94h-156z" fill="var(--sd-colour-panel-bg--100)" />
|
47
51
|
<circle cx="144" cy="33" fill="var(--color-text-lighter)" r="4" />
|
48
|
-
<rect
|
52
|
+
<rect
|
53
|
+
fill="var(--sd-colour-interactive)"
|
54
|
+
height="15"
|
55
|
+
rx="2"
|
56
|
+
width="58"
|
57
|
+
x="91"
|
58
|
+
y="71"
|
59
|
+
/>
|
49
60
|
<g fill="var(--sd-colour-btn-bg-neutral)">
|
50
61
|
<rect height="15" rx="2" width="58" x="29" y="52" />
|
51
62
|
<rect height="15" rx="2" width="58" x="29" y="71" />
|