superdesk-ui-framework 3.0.1-beta.1 → 3.0.1-beta.10
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/.vscode/settings.json +5 -0
- package/app/fonts/sd_big-icons.eot +0 -0
- package/app/fonts/sd_big-icons.svg +55 -53
- package/app/fonts/sd_big-icons.ttf +0 -0
- package/app/fonts/sd_big-icons.woff +0 -0
- package/app/fonts/sd_icons.eot +0 -0
- package/app/fonts/sd_icons.svg +15 -7
- package/app/fonts/sd_icons.ttf +0 -0
- package/app/fonts/sd_icons.woff +0 -0
- package/app/img/SD-logo.svg +52 -0
- package/app/img/dots.svg +3 -0
- package/app/styles/_accessibility.scss +4 -3
- package/app/styles/_big-icon-font.scss +63 -23
- package/app/styles/_boxed-list.scss +29 -3
- package/app/styles/_buttons.scss +4 -0
- package/app/styles/_hamburger.scss +160 -0
- package/app/styles/_helpers.scss +15 -7
- package/app/styles/_icon-font.scss +351 -307
- package/app/styles/_icon-labels.scss +66 -10
- package/app/styles/_sd-tag-input.scss +202 -296
- package/app/styles/_table-list.scss +244 -0
- package/app/styles/app.scss +4 -0
- package/app/styles/components/_list-item.scss +37 -21
- package/app/styles/components/_sd-dropzone.scss +52 -16
- package/app/styles/components/_sd-grid-item.scss +30 -16
- package/app/styles/components/_sd-notification-panel.scss +48 -0
- package/app/styles/components/_sd-photo-preview.scss +1 -1
- package/app/styles/components/_sd-searchbar.scss +7 -0
- package/app/styles/components/_subnav.scss +87 -80
- package/app/styles/design-tokens/_design-tokens-general.scss +10 -6
- package/app/styles/design-tokens/_new-colors.scss +10 -3
- package/app/styles/form-elements/_forms-general.scss +81 -7
- package/app/styles/form-elements/_inputs.scss +372 -62
- package/app/styles/grids/_grid-layout.scss +163 -45
- package/app/styles/layout/_basic-layout.scss +2 -2
- package/app/styles/layout/_container.scss +3 -0
- package/app/styles/layout/_editor.scss +109 -17
- package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
- package/app/styles/menus/_sd-left-navigation.scss +24 -1
- package/app/styles/menus/_sd-sidebar-menu.scss +16 -14
- package/app/styles/menus/_sd-top-menu.scss +19 -5
- package/app/styles/primereact/_pr-dialog.scss +39 -7
- package/app/styles/primereact/_pr-dropdown.scss +17 -3
- package/app-typescript/components/Badge.tsx +3 -2
- package/app-typescript/components/CreateButton.tsx +38 -0
- package/app-typescript/components/DatePicker.tsx +71 -36
- package/app-typescript/components/DonutChart.tsx +1 -1
- package/app-typescript/components/DropZone.tsx +4 -4
- package/app-typescript/components/DurationInput.tsx +375 -0
- package/app-typescript/components/EmptyState.tsx +2 -1
- package/app-typescript/components/Form/FormRowNew.tsx +41 -0
- package/app-typescript/components/Form/InputBase.tsx +85 -0
- package/app-typescript/components/Form/InputNew.tsx +107 -0
- package/app-typescript/components/Form/InputWrapper.tsx +79 -0
- package/app-typescript/components/Form/index.tsx +4 -0
- package/app-typescript/components/Icon.tsx +4 -2
- package/app-typescript/components/IconButton.tsx +5 -1
- package/app-typescript/components/IconLabel.tsx +8 -1
- package/app-typescript/components/Input.tsx +40 -41
- package/app-typescript/components/Label.tsx +49 -10
- package/app-typescript/components/Layouts/AuthoringContainer.tsx +28 -0
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +2 -0
- package/app-typescript/components/Layouts/AuthoringMain.tsx +11 -7
- package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +7 -1
- package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
- package/app-typescript/components/Layouts/Container.tsx +1 -1
- package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
- package/app-typescript/components/Layouts/CoreLayout.tsx +62 -0
- package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
- package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
- package/app-typescript/components/Layouts/CoreLayoutMain.tsx +16 -0
- package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
- package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
- package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
- package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
- package/app-typescript/components/Layouts/Layout.tsx +33 -0
- package/app-typescript/components/Layouts/LayoutContainer.tsx +1 -4
- package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
- package/app-typescript/components/Layouts/MainPanel.tsx +10 -5
- package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
- package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
- package/app-typescript/components/Layouts/Panel.tsx +1 -0
- package/app-typescript/components/Layouts/index.tsx +20 -2
- package/app-typescript/components/LeftMenu.tsx +127 -116
- package/app-typescript/components/Lists/BoxedList.tsx +41 -5
- package/app-typescript/components/Lists/ContentList.tsx +100 -0
- package/app-typescript/components/Lists/TableList.tsx +212 -0
- package/app-typescript/components/Menu.tsx +31 -7
- package/app-typescript/components/Modal.tsx +31 -18
- package/app-typescript/components/MultiSelect.tsx +35 -5
- package/app-typescript/components/NavButton.tsx +4 -0
- package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
- package/app-typescript/components/Navigation/SideBarTabs.tsx +10 -0
- package/app-typescript/components/SearchBar.tsx +98 -0
- package/app-typescript/components/Select.tsx +28 -36
- package/app-typescript/components/SelectGrid.tsx +1 -1
- package/app-typescript/components/SelectWithTemplate.tsx +32 -7
- package/app-typescript/components/SidebarMenu.tsx +68 -0
- package/app-typescript/components/Skeleton.tsx +1 -1
- package/app-typescript/components/Spinner.tsx +1 -1
- package/app-typescript/components/SwitchGroup.tsx +2 -1
- package/app-typescript/components/Text/Time.tsx +34 -0
- package/app-typescript/components/TimePicker.tsx +50 -16
- package/app-typescript/components/Togglebox.tsx +1 -1
- package/app-typescript/components/Tooltip.tsx +7 -5
- package/app-typescript/components/TreeSelect.tsx +423 -195
- package/app-typescript/components/WithSizeObserver.tsx +88 -0
- package/app-typescript/dist/components/Alert.d.ts +16 -0
- package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
- package/app-typescript/dist/components/Avatar.d.ts +33 -0
- package/app-typescript/dist/components/Badge.d.ts +13 -0
- package/app-typescript/dist/components/Button.d.ts +23 -0
- package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
- package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
- package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
- package/app-typescript/dist/components/Checkbox.d.ts +19 -0
- package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
- package/app-typescript/dist/components/DatePicker.d.ts +37 -0
- package/app-typescript/dist/components/Divider.d.ts +9 -0
- package/app-typescript/dist/components/DonutChart.d.ts +12 -0
- package/app-typescript/dist/components/Dropdown.d.ts +28 -0
- package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
- package/app-typescript/dist/components/EmptyState.d.ts +11 -0
- package/app-typescript/dist/components/FormLabel.d.ts +9 -0
- package/app-typescript/dist/components/Genie.d.ts +13 -0
- package/app-typescript/dist/components/GridItem.d.ts +69 -0
- package/app-typescript/dist/components/GridList.d.ts +14 -0
- package/app-typescript/dist/components/HeadingText.d.ts +10 -0
- package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
- package/app-typescript/dist/components/Icon.d.ts +12 -0
- package/app-typescript/dist/components/IconButton.d.ts +12 -0
- package/app-typescript/dist/components/IconLabel.d.ts +11 -0
- package/app-typescript/dist/components/Input.d.ts +24 -0
- package/app-typescript/dist/components/Label.d.ts +15 -0
- package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
- package/app-typescript/dist/components/Loader.d.ts +8 -0
- package/app-typescript/dist/components/NavButton.d.ts +15 -0
- package/app-typescript/dist/components/Popover.d.ts +13 -0
- package/app-typescript/dist/components/PropsList.d.ts +15 -0
- package/app-typescript/dist/components/Radio.d.ts +19 -0
- package/app-typescript/dist/components/RadioButton.d.ts +20 -0
- package/app-typescript/dist/components/Select.d.ts +29 -0
- package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
- package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
- package/app-typescript/dist/components/StrechBar.d.ts +4 -0
- package/app-typescript/dist/components/SubNav.d.ts +10 -0
- package/app-typescript/dist/components/Switch.d.ts +12 -0
- package/app-typescript/dist/components/TabCustom.d.ts +25 -0
- package/app-typescript/dist/components/TabList.d.ts +22 -0
- package/app-typescript/dist/components/Tag.d.ts +9 -0
- package/app-typescript/dist/components/TagInput.d.ts +7 -0
- package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
- package/app-typescript/dist/components/TimePicker.d.ts +11 -0
- package/app-typescript/dist/components/Tooltip.d.ts +11 -0
- package/app-typescript/dist/components/_Positioner.d.ts +27 -0
- package/app-typescript/dist/index.d.ts +56 -0
- package/app-typescript/helpers.tsx +3 -0
- package/app-typescript/index.ts +10 -0
- package/dist/SD-logo.svg +52 -0
- package/dist/dots.svg +3 -0
- package/dist/examples.bundle.css +8803 -378
- package/dist/examples.bundle.js +79537 -62691
- package/dist/playgrounds/accessible-theme-test.html +1 -1
- package/dist/playgrounds/layout-test-2.html +1 -1
- package/dist/playgrounds/list-item-test.html +1 -1
- package/dist/playgrounds/master-desk.html +1 -1
- package/dist/playgrounds/media-carousel.html +1 -1
- package/dist/playgrounds/photo-desk.html +1 -1
- package/dist/playgrounds/planning.html +1 -1
- package/dist/playgrounds/publish.html +1 -1
- package/dist/playgrounds/publisher-content-analytics.html +1 -1
- package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
- package/dist/playgrounds/publisher-content-list-manual.html +1 -1
- package/dist/playgrounds/publisher-content-lists.html +1 -1
- package/dist/playgrounds/publisher-dashboard.html +1 -1
- package/dist/playgrounds/publisher-output-control.html +1 -1
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +155 -0
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +9 -4
- package/dist/playgrounds/react-playgrounds/Index.tsx +4 -1
- package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +13 -0
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +474 -0
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +407 -182
- package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +4 -0
- package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
- package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
- package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
- package/dist/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
- package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
- package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
- package/dist/playgrounds/swimlane-view.html +1 -1
- package/dist/playgrounds/toasts.html +1 -1
- package/dist/playgrounds/video-editor.html +1 -1
- package/dist/react/Badges.tsx +18 -0
- package/dist/react/Container.tsx +1 -1
- package/dist/react/ContentList.tsx +286 -0
- package/dist/react/CreateButton.tsx +71 -0
- package/dist/react/DatePicker.tsx +31 -6
- package/dist/react/DropZone.tsx +14 -6
- package/dist/react/DurationInput.tsx +104 -0
- package/dist/react/IconButtons.tsx +6 -6
- package/dist/react/IconLabels.tsx +24 -2
- package/dist/react/Index.tsx +25 -0
- package/dist/react/Inputs.tsx +290 -7
- package/dist/react/Labels.tsx +51 -1
- package/dist/react/LeftNavigations.tsx +71 -44
- package/dist/react/Modal.tsx +1 -0
- package/dist/react/MultiSelect.tsx +10 -2
- package/dist/react/SelectWithTemplate.tsx +6 -1
- package/dist/react/Selects.tsx +55 -0
- package/dist/react/TableList.tsx +248 -0
- package/dist/react/TimePicker.tsx +22 -12
- package/dist/react/TreeSelect.tsx +301 -48
- package/dist/react/WithSizeObserver.tsx +44 -0
- package/dist/react/tree-select/TreeSelect.tsx +273 -0
- package/dist/react/tree-select/example-1.tsx +71 -0
- package/dist/react/tree-select/example-2.tsx +59 -0
- package/dist/sd_big-icons.eot +0 -0
- package/dist/sd_big-icons.svg +55 -53
- package/dist/sd_big-icons.ttf +0 -0
- package/dist/sd_big-icons.woff +0 -0
- package/dist/sd_icons.eot +0 -0
- package/dist/sd_icons.svg +15 -7
- package/dist/sd_icons.ttf +0 -0
- package/dist/sd_icons.woff +0 -0
- package/dist/superdesk-ui.bundle.css +49437 -26114
- package/dist/superdesk-ui.bundle.js +75814 -60910
- package/dist/vendor.bundle.js +25030 -25030
- package/examples/css/docs-page.css +2 -3
- package/examples/index.js +12 -0
- package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
- package/examples/pages/playgrounds/layout-test-2.html +1 -1
- package/examples/pages/playgrounds/list-item-test.html +1 -1
- package/examples/pages/playgrounds/master-desk.html +1 -1
- package/examples/pages/playgrounds/media-carousel.html +1 -1
- package/examples/pages/playgrounds/photo-desk.html +1 -1
- package/examples/pages/playgrounds/planning.html +1 -1
- package/examples/pages/playgrounds/publish.html +1 -1
- package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
- package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
- package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
- package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
- package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
- package/examples/pages/playgrounds/publisher-output-control.html +1 -1
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +155 -0
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +9 -4
- package/examples/pages/playgrounds/react-playgrounds/Index.tsx +4 -1
- package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +13 -0
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +474 -0
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +407 -182
- package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +4 -0
- package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
- package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
- package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
- package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
- package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
- package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
- package/examples/pages/playgrounds/swimlane-view.html +1 -1
- package/examples/pages/playgrounds/toasts.html +1 -1
- package/examples/pages/playgrounds/video-editor.html +1 -1
- package/examples/pages/react/Badges.tsx +18 -0
- package/examples/pages/react/Container.tsx +1 -1
- package/examples/pages/react/ContentList.tsx +286 -0
- package/examples/pages/react/CreateButton.tsx +71 -0
- package/examples/pages/react/DatePicker.tsx +31 -6
- package/examples/pages/react/DropZone.tsx +14 -6
- package/examples/pages/react/DurationInput.tsx +104 -0
- package/examples/pages/react/IconButtons.tsx +6 -6
- package/examples/pages/react/IconLabels.tsx +24 -2
- package/examples/pages/react/Index.tsx +25 -0
- package/examples/pages/react/Inputs.tsx +290 -7
- package/examples/pages/react/Labels.tsx +51 -1
- package/examples/pages/react/LeftNavigations.tsx +71 -44
- package/examples/pages/react/Modal.tsx +1 -0
- package/examples/pages/react/MultiSelect.tsx +10 -2
- package/examples/pages/react/SelectWithTemplate.tsx +6 -1
- package/examples/pages/react/Selects.tsx +55 -0
- package/examples/pages/react/TableList.tsx +248 -0
- package/examples/pages/react/TimePicker.tsx +22 -12
- package/examples/pages/react/TreeSelect.tsx +301 -48
- package/examples/pages/react/WithSizeObserver.tsx +44 -0
- package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
- package/examples/pages/react/tree-select/example-1.tsx +71 -0
- package/examples/pages/react/tree-select/example-2.tsx +59 -0
- package/package.json +9 -8
- package/react/components/Alert.js +10 -8
- package/react/components/Autocomplete.js +16 -12
- package/react/components/Avatar.js +8 -6
- package/react/components/Badge.d.ts +1 -0
- package/react/components/Badge.js +9 -7
- package/react/components/Button.js +8 -6
- package/react/components/ButtonGroup.js +7 -5
- package/react/components/Carousel.js +4 -2
- package/react/components/CheckButtonGroup.js +6 -4
- package/react/components/CheckGroup.js +5 -3
- package/react/components/Checkbox.js +5 -3
- package/react/components/CheckboxButton.js +6 -4
- package/react/components/ContentDivider.js +8 -6
- package/react/components/CreateButton.d.ts +17 -0
- package/react/components/CreateButton.js +68 -0
- package/react/components/DatePicker.d.ts +11 -0
- package/react/components/DatePicker.js +44 -35
- package/react/components/Divider.js +6 -4
- package/react/components/DonutChart.d.ts +1 -1
- package/react/components/DonutChart.js +24 -6
- package/react/components/DropZone.d.ts +2 -2
- package/react/components/DropZone.js +8 -6
- package/react/components/Dropdown.js +7 -6
- package/react/components/DropdownFirst.js +18 -11
- package/react/components/DurationInput.d.ts +42 -0
- package/react/components/DurationInput.js +335 -0
- package/react/components/EmptyState.d.ts +1 -0
- package/react/components/EmptyState.js +8 -6
- package/react/components/Form/FormGroup.js +7 -5
- package/react/components/Form/FormItem.js +5 -3
- package/react/components/Form/FormLabel.js +5 -3
- package/react/components/Form/FormRow.js +5 -3
- package/react/components/Form/FormRowNew.d.ts +12 -0
- package/react/components/Form/FormRowNew.js +67 -0
- package/react/components/Form/FormText.js +4 -2
- package/react/components/Form/InputBase.d.ts +42 -0
- package/react/components/Form/InputBase.js +72 -0
- package/react/components/Form/InputNew.d.ts +45 -0
- package/react/components/Form/InputNew.js +75 -0
- package/react/components/Form/InputWrapper.d.ts +28 -0
- package/react/components/Form/InputWrapper.js +91 -0
- package/react/components/Form/index.d.ts +4 -0
- package/react/components/Form/index.js +9 -0
- package/react/components/FormLabel.js +5 -3
- package/react/components/GridItem.js +9 -7
- package/react/components/GridList.js +8 -6
- package/react/components/HeadingText.js +4 -2
- package/react/components/HelloWorld.js +4 -2
- package/react/components/Icon.d.ts +2 -1
- package/react/components/Icon.js +9 -6
- package/react/components/IconButton.js +8 -6
- package/react/components/IconLabel.d.ts +2 -0
- package/react/components/IconLabel.js +12 -7
- package/react/components/IconPicker.js +13 -9
- package/react/components/Input.d.ts +7 -2
- package/react/components/Input.js +16 -30
- package/react/components/Label.d.ts +1 -0
- package/react/components/Label.js +28 -10
- package/react/components/Layouts/AuthorinInnerSideBar.js +4 -2
- package/react/components/Layouts/AuthoringContainer.d.ts +12 -0
- package/react/components/Layouts/AuthoringContainer.js +60 -0
- package/react/components/Layouts/AuthoringFrame.js +4 -2
- package/react/components/Layouts/AuthoringFrameContainer.js +4 -2
- package/react/components/Layouts/AuthoringFrameLeftBar.js +4 -2
- package/react/components/Layouts/AuthoringFrameMain.js +4 -2
- package/react/components/Layouts/AuthoringFrameNavBar.js +4 -2
- package/react/components/Layouts/AuthoringFrameOverlay.js +4 -2
- package/react/components/Layouts/AuthoringFrameRightBar.js +4 -2
- package/react/components/Layouts/AuthoringFrameSidePanel.js +5 -3
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +5 -3
- package/react/components/Layouts/AuthoringInnerBody.js +4 -2
- package/react/components/Layouts/AuthoringInnerHeader.d.ts +1 -0
- package/react/components/Layouts/AuthoringInnerHeader.js +10 -5
- package/react/components/Layouts/AuthoringMain.d.ts +3 -1
- package/react/components/Layouts/AuthoringMain.js +6 -4
- package/react/components/Layouts/AuthoringMainContainer.js +4 -2
- package/react/components/Layouts/AuthoringMainContent.js +4 -2
- package/react/components/Layouts/AuthoringMainToolBar.d.ts +1 -0
- package/react/components/Layouts/AuthoringMainToolBar.js +12 -3
- package/react/components/Layouts/BottomBarAction.d.ts +12 -0
- package/react/components/Layouts/BottomBarAction.js +59 -0
- package/react/components/Layouts/Container.d.ts +1 -1
- package/react/components/Layouts/Container.js +9 -7
- package/react/components/Layouts/ContentSplitter.d.ts +10 -0
- package/react/components/Layouts/ContentSplitter.js +58 -0
- package/react/components/Layouts/CoreLayout.d.ts +19 -0
- package/react/components/Layouts/CoreLayout.js +55 -0
- package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
- package/react/components/Layouts/CoreLayoutContainer.js +49 -0
- package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
- package/react/components/Layouts/CoreLayoutFooter.js +49 -0
- package/react/components/Layouts/CoreLayoutMain.d.ts +9 -0
- package/react/components/Layouts/CoreLayoutMain.js +49 -0
- package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
- package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
- package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
- package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
- package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
- package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
- package/react/components/Layouts/HamburgerButton.d.ts +14 -0
- package/react/components/Layouts/HamburgerButton.js +63 -0
- package/react/components/Layouts/HeaderPanel.js +4 -2
- package/react/components/Layouts/Layout.d.ts +8 -0
- package/react/components/Layouts/Layout.js +36 -0
- package/react/components/Layouts/LayoutContainer.js +5 -3
- package/react/components/Layouts/LeftPanel.js +5 -3
- package/react/components/Layouts/MainMenu.d.ts +41 -0
- package/react/components/Layouts/MainMenu.js +103 -0
- package/react/components/Layouts/MainPanel.d.ts +1 -0
- package/react/components/Layouts/MainPanel.js +15 -6
- package/react/components/Layouts/NotificationPanel.d.ts +45 -0
- package/react/components/Layouts/NotificationPanel.js +110 -0
- package/react/components/Layouts/OverlayPanel.d.ts +8 -0
- package/react/components/Layouts/OverlayPanel.js +51 -0
- package/react/components/Layouts/PageLayout.js +4 -2
- package/react/components/Layouts/Panel.d.ts +1 -0
- package/react/components/Layouts/Panel.js +16 -14
- package/react/components/Layouts/RightPanel.js +4 -2
- package/react/components/Layouts/index.d.ts +17 -2
- package/react/components/Layouts/index.js +35 -4
- package/react/components/LeftMenu.d.ts +5 -1
- package/react/components/LeftMenu.js +27 -13
- package/react/components/ListItemLoader.js +4 -2
- package/react/components/Lists/BoxedList.d.ts +8 -0
- package/react/components/Lists/BoxedList.js +39 -16
- package/react/components/Lists/ContentList.d.ts +45 -0
- package/react/components/Lists/ContentList.js +85 -0
- package/react/components/Lists/SimpleList.js +9 -7
- package/react/components/Lists/TableList.d.ts +42 -0
- package/react/components/Lists/TableList.js +145 -0
- package/react/components/Lists/index.js +1 -0
- package/react/components/Loader.js +4 -2
- package/react/components/Menu.d.ts +2 -1
- package/react/components/Menu.js +48 -12
- package/react/components/Modal.d.ts +4 -1
- package/react/components/Modal.js +35 -6
- package/react/components/NavButton.d.ts +1 -0
- package/react/components/NavButton.js +9 -4
- package/react/components/Navigation/BottomNav.d.ts +24 -0
- package/react/components/Navigation/BottomNav.js +88 -0
- package/react/components/Navigation/QuickNavBar.js +13 -9
- package/react/components/Navigation/SideBarMenu.js +4 -2
- package/react/components/Navigation/SideBarTabs.d.ts +1 -0
- package/react/components/Navigation/SideBarTabs.js +8 -2
- package/react/components/Navigation/index.js +1 -0
- package/react/components/Popover.js +4 -2
- package/react/components/PropsList.js +4 -2
- package/react/components/RadioButtonGroup.js +9 -7
- package/react/components/RadioGroup.js +6 -4
- package/react/components/SearchBar.d.ts +24 -0
- package/react/components/SearchBar.js +105 -0
- package/react/components/Select.d.ts +6 -1
- package/react/components/Select.js +9 -22
- package/react/components/SelectGrid.d.ts +1 -1
- package/react/components/SelectGrid.js +44 -23
- package/react/components/SelectWithTemplate.d.ts +11 -1
- package/react/components/SelectWithTemplate.js +23 -12
- package/react/components/Skeleton.d.ts +1 -1
- package/react/components/Skeleton.js +26 -5
- package/react/components/SlidingToolbar.js +6 -4
- package/react/components/Spinner.js +7 -5
- package/react/components/StrechBar.js +4 -2
- package/react/components/SubNav.js +9 -7
- package/react/components/Switch.js +6 -4
- package/react/components/SwitchGroup.d.ts +1 -0
- package/react/components/SwitchGroup.js +6 -4
- package/react/components/TabCustom.js +11 -7
- package/react/components/TabList.js +6 -4
- package/react/components/Tag.js +5 -4
- package/react/components/TagInput.js +7 -6
- package/react/components/TagInputTest.js +13 -9
- package/react/components/Text/Heading.js +10 -8
- package/react/components/Text/Text.js +10 -8
- package/react/components/Text/Time.d.ts +15 -0
- package/react/components/Text/Time.js +65 -0
- package/react/components/ThemeSelector.js +7 -5
- package/react/components/TimePicker.d.ts +16 -2
- package/react/components/TimePicker.js +19 -6
- package/react/components/Toast.js +1 -1
- package/react/components/ToastMessage.js +6 -5
- package/react/components/ToastText.js +1 -1
- package/react/components/ToastWrapper.d.ts +2 -2
- package/react/components/ToastWrapper.js +14 -10
- package/react/components/Togglebox.d.ts +1 -1
- package/react/components/Togglebox.js +36 -15
- package/react/components/Tooltip.d.ts +1 -0
- package/react/components/Tooltip.js +14 -10
- package/react/components/TreeSelect.d.ts +75 -0
- package/react/components/TreeSelect.js +448 -0
- package/react/components/WithSizeObserver.d.ts +25 -0
- package/react/components/WithSizeObserver.js +95 -0
- package/react/components/_Positioner.js +4 -2
- package/react/helpers.d.ts +1 -0
- package/react/helpers.js +7 -0
- package/react/index.d.ts +10 -0
- package/react/index.js +24 -1
- package/yarn-error.log +111 -0
- package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import * as Components from './components/Index';
|
3
|
-
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container } from '../../../../app-typescript/index';
|
3
|
+
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase, Text, FormRowNew } from '../../../../app-typescript/index';
|
4
4
|
import { Carousel } from '../../../../app-typescript/index';
|
5
5
|
import * as GridElements from '../../../../app-typescript/components/GridItem';
|
6
6
|
|
@@ -16,13 +16,16 @@ interface IState {
|
|
16
16
|
itemSelected1: boolean;
|
17
17
|
itemSelected2: boolean;
|
18
18
|
itemSelected3: boolean;
|
19
|
-
value1
|
20
|
-
value2
|
21
|
-
value3
|
22
|
-
value4
|
23
|
-
value5
|
24
|
-
value6
|
19
|
+
value1?: string;
|
20
|
+
value2?: string;
|
21
|
+
value3?: string;
|
22
|
+
value4?: string;
|
23
|
+
value5?: string;
|
24
|
+
value6?: string;
|
25
25
|
selctedTheme: string;
|
26
|
+
invalid: boolean;
|
27
|
+
date: any;
|
28
|
+
time: string;
|
26
29
|
}
|
27
30
|
|
28
31
|
export class TestGround extends React.Component<IProps, IState> {
|
@@ -40,6 +43,9 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
40
43
|
value5: undefined,
|
41
44
|
value6: undefined,
|
42
45
|
selctedTheme: 'light',
|
46
|
+
invalid: false,
|
47
|
+
date: '01/08/2022',
|
48
|
+
time: '16:50',
|
43
49
|
}
|
44
50
|
}
|
45
51
|
|
@@ -56,6 +62,346 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
56
62
|
<Components.Layout header='Testing Ground'>
|
57
63
|
<Components.LayoutContainer>
|
58
64
|
<Components.MainPanel>
|
65
|
+
<InputNew
|
66
|
+
label='test'
|
67
|
+
value=''
|
68
|
+
onChange={(value) => false}
|
69
|
+
placeholder='test'
|
70
|
+
required={true}
|
71
|
+
info='Nullam Sollicitudin'
|
72
|
+
maxLength={20}
|
73
|
+
error='Error message'
|
74
|
+
inlineLabel={true}
|
75
|
+
labelHidden={true}
|
76
|
+
type='text' />
|
77
|
+
|
78
|
+
<hr />
|
79
|
+
<div className='form__group-new'>
|
80
|
+
<Input
|
81
|
+
value=''
|
82
|
+
onChange={(value) => {}}
|
83
|
+
type='text'
|
84
|
+
label='Text input'
|
85
|
+
placeholder='Enter text'
|
86
|
+
disabled={true} />
|
87
|
+
<Input value=''
|
88
|
+
onChange={(value) => {}}
|
89
|
+
type='text'
|
90
|
+
label='Text input'
|
91
|
+
placeholder='Enter text'
|
92
|
+
disabled={true} />
|
93
|
+
<DatePicker
|
94
|
+
value={this.state.date}
|
95
|
+
onChange={(date) => {
|
96
|
+
this.setState({date});
|
97
|
+
}}
|
98
|
+
disabled={true}
|
99
|
+
dateFormat="DD-MM-YYYY"
|
100
|
+
label='Date'
|
101
|
+
info='Nullam Sollicitudin'
|
102
|
+
error='Error message'
|
103
|
+
inlineLabel={false}
|
104
|
+
shortcuts={[
|
105
|
+
{label: 'tomorrow', days: 1},
|
106
|
+
{label: 'yesterday', days: -1},
|
107
|
+
]}
|
108
|
+
/>
|
109
|
+
<TimePicker
|
110
|
+
value={this.state.time}
|
111
|
+
disabled={true}
|
112
|
+
required={true}
|
113
|
+
label='Time'
|
114
|
+
onChange={(time) => {
|
115
|
+
this.setState({time});
|
116
|
+
}}
|
117
|
+
/>
|
118
|
+
<Button text="Clear" onClick={()=> false} />
|
119
|
+
<Button text="Cancel" onClick={()=> false} />
|
120
|
+
<Button text="Save" type='primary' onClick={()=> false} />
|
121
|
+
</div>
|
122
|
+
<hr />
|
123
|
+
|
124
|
+
<FormRowNew rowLabel='My group label' inlineLabels={true}>
|
125
|
+
<Input
|
126
|
+
value=''
|
127
|
+
onChange={(value) => {}}
|
128
|
+
type='text'
|
129
|
+
label='Text input'
|
130
|
+
placeholder='Enter text'
|
131
|
+
inlineLabel={true}
|
132
|
+
labelHidden={true}
|
133
|
+
disabled={false} />
|
134
|
+
<Text size='small' align='center'>To:</Text>
|
135
|
+
<Input
|
136
|
+
value=''
|
137
|
+
onChange={(value) => {}}
|
138
|
+
type='text'
|
139
|
+
label='Text input'
|
140
|
+
placeholder='Enter text'
|
141
|
+
inlineLabel={true}
|
142
|
+
labelHidden={true}
|
143
|
+
disabled={false} />
|
144
|
+
<DatePicker
|
145
|
+
value={this.state.date}
|
146
|
+
onChange={(date) => {
|
147
|
+
this.setState({date});
|
148
|
+
}}
|
149
|
+
// disabled={true}
|
150
|
+
dateFormat="DD-MM-YYYY"
|
151
|
+
label='Date'
|
152
|
+
info='Nullam Sollicitudin'
|
153
|
+
error='Error message'
|
154
|
+
inlineLabel={true}
|
155
|
+
labelHidden={true}
|
156
|
+
shortcuts={[
|
157
|
+
{label: 'tomorrow', days: 1},
|
158
|
+
{label: 'yesterday', days: -1},
|
159
|
+
]}
|
160
|
+
/>
|
161
|
+
<TimePicker
|
162
|
+
value={this.state.time}
|
163
|
+
// disabled={true}
|
164
|
+
required={true}
|
165
|
+
inlineLabel={true}
|
166
|
+
labelHidden={true}
|
167
|
+
label='Time'
|
168
|
+
onChange={(time) => {
|
169
|
+
this.setState({time});
|
170
|
+
}}
|
171
|
+
/>
|
172
|
+
<Button text="Save" type='primary' onClick={()=> false} />
|
173
|
+
</FormRowNew>
|
174
|
+
|
175
|
+
<hr />
|
176
|
+
|
177
|
+
<FormRowNew>
|
178
|
+
<Input
|
179
|
+
value=''
|
180
|
+
onChange={(value) => {}}
|
181
|
+
type='text'
|
182
|
+
label='Text input'
|
183
|
+
placeholder='Enter text'
|
184
|
+
disabled={false} />
|
185
|
+
<Text size='small' align='center'>To:</Text>
|
186
|
+
<Input
|
187
|
+
value=''
|
188
|
+
onChange={(value) => {}}
|
189
|
+
type='text'
|
190
|
+
label='Text input'
|
191
|
+
placeholder='Enter text'
|
192
|
+
labelHidden={true}
|
193
|
+
disabled={false} />
|
194
|
+
<DatePicker
|
195
|
+
value={this.state.date}
|
196
|
+
onChange={(date) => {
|
197
|
+
this.setState({date});
|
198
|
+
}}
|
199
|
+
// disabled={true}
|
200
|
+
dateFormat="DD-MM-YYYY"
|
201
|
+
label='Date'
|
202
|
+
info='Nullam Sollicitudin'
|
203
|
+
error='Error message'
|
204
|
+
inlineLabel={false}
|
205
|
+
shortcuts={[
|
206
|
+
{label: 'tomorrow', days: 1},
|
207
|
+
{label: 'yesterday', days: -1},
|
208
|
+
]}
|
209
|
+
/>
|
210
|
+
<TimePicker
|
211
|
+
value={this.state.time}
|
212
|
+
// disabled={true}
|
213
|
+
required={true}
|
214
|
+
label='Time'
|
215
|
+
onChange={(time) => {
|
216
|
+
this.setState({time});
|
217
|
+
}}
|
218
|
+
/>
|
219
|
+
<Button text="Save" type='primary' onClick={()=> false} />
|
220
|
+
</FormRowNew>
|
221
|
+
|
222
|
+
<hr />
|
223
|
+
<h3 className="docs-page__h3 sd-margin-y--0">Table list</h3>
|
224
|
+
<hr />
|
225
|
+
<ul className='table-list'>
|
226
|
+
<li className='table-list__item table-list__item--clickable table-list__item--draggable'>
|
227
|
+
<div className='table-list__item-content'>
|
228
|
+
<div className='table-list__item-content-block'>
|
229
|
+
<Label style='translucent' text='aacc' />
|
230
|
+
<Label style='translucent' type='primary' text='prlg' />
|
231
|
+
</div>
|
232
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
233
|
+
<span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
|
234
|
+
</div>
|
235
|
+
<div className='table-list__item-content-block'>
|
236
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
237
|
+
</div>
|
238
|
+
</div>
|
239
|
+
<div className='table-list__slide-in-actions'>
|
240
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
241
|
+
</div>
|
242
|
+
</li>
|
243
|
+
<li className='table-list__item table-list__item--clickable table-list__item--draggable'>
|
244
|
+
<div className='table-list__item-content'>
|
245
|
+
<div className='table-list__item-content-block'>
|
246
|
+
<Label style='translucent' type='warning' text='pokr' />
|
247
|
+
<Label style='translucent' text='slika' />
|
248
|
+
</div>
|
249
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
250
|
+
<span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
|
251
|
+
</div>
|
252
|
+
<div className='table-list__item-content-block'>
|
253
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
254
|
+
</div>
|
255
|
+
</div>
|
256
|
+
<div className='table-list__slide-in-actions'>
|
257
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
258
|
+
</div>
|
259
|
+
</li>
|
260
|
+
<li className='table-list__item table-list__item--clickable'>
|
261
|
+
<div className='table-list__item-content'>
|
262
|
+
<div className='table-list__item-content-block'>
|
263
|
+
<Label style='translucent' type='warning' text='pokr' />
|
264
|
+
<Label style='translucent' text='slika' />
|
265
|
+
</div>
|
266
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
267
|
+
<span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
|
268
|
+
</div>
|
269
|
+
<div className='table-list__item-content-block'>
|
270
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
271
|
+
</div>
|
272
|
+
</div>
|
273
|
+
<div className='table-list__slide-in-actions'>
|
274
|
+
<IconButton icon='pencil' size='small' ariaValue='More actions' onClick={()=> false} />
|
275
|
+
<IconButton icon='trash' size='small' ariaValue='More actions' onClick={()=> false} />
|
276
|
+
</div>
|
277
|
+
</li>
|
278
|
+
<li className='table-list__item table-list__item--clickable table-list__item--selected'>
|
279
|
+
<div className='table-list__item-content'>
|
280
|
+
<div className='table-list__item-content-block'>
|
281
|
+
<Label style='translucent' type='warning' text='pokr' />
|
282
|
+
<Label style='translucent' text='slika' />
|
283
|
+
</div>
|
284
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
285
|
+
<span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
|
286
|
+
</div>
|
287
|
+
<div className='table-list__item-content-block'>
|
288
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
289
|
+
</div>
|
290
|
+
</div>
|
291
|
+
<div className='table-list__slide-in-actions'>
|
292
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
293
|
+
</div>
|
294
|
+
</li>
|
295
|
+
<li className='table-list__item table-list__item--clickable'>
|
296
|
+
<div className='table-list__item-content'>
|
297
|
+
<div className='table-list__item-content-block'>
|
298
|
+
<Label style='translucent' type='warning' text='pokr' />
|
299
|
+
<Label style='translucent' text='slika' />
|
300
|
+
</div>
|
301
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
302
|
+
<span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
|
303
|
+
</div>
|
304
|
+
<div className='table-list__item-content-block'>
|
305
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
306
|
+
</div>
|
307
|
+
</div>
|
308
|
+
<div className='table-list__slide-in-actions'>
|
309
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
310
|
+
</div>
|
311
|
+
</li>
|
312
|
+
</ul>
|
313
|
+
|
314
|
+
<h3 className="docs-page__h3 sd-margin-y--0 sd-margin-t--3">Table list with items between</h3>
|
315
|
+
<hr />
|
316
|
+
<ul className='table-list table-list--contained'>
|
317
|
+
<li className='table-list__item-container'>
|
318
|
+
<div className='table-list__item table-list__item--clickable table-list__item--draggable'>
|
319
|
+
<div className='table-list__item-content'>
|
320
|
+
<div className='table-list__item-content-block'>
|
321
|
+
<Label style='translucent' text='aacc' />
|
322
|
+
<Label style='translucent' type='primary' text='prlg' />
|
323
|
+
</div>
|
324
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
325
|
+
<span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
|
326
|
+
</div>
|
327
|
+
<div className='table-list__item-content-block'>
|
328
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
329
|
+
</div>
|
330
|
+
</div>
|
331
|
+
<div className='table-list__slide-in-actions'>
|
332
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
333
|
+
</div>
|
334
|
+
</div>
|
335
|
+
|
336
|
+
<div className='table-list__add-bar-container'>
|
337
|
+
<Tooltip text='Add item' flow='top' appendToBody={true}>
|
338
|
+
<div className='table-list__add-bar'>
|
339
|
+
<Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
340
|
+
</div>
|
341
|
+
</Tooltip>
|
342
|
+
</div>
|
343
|
+
</li>
|
344
|
+
|
345
|
+
<li className='table-list__item-container'>
|
346
|
+
<div className='table-list__item table-list__item--clickable table-list__item--draggable'>
|
347
|
+
<div className='table-list__item-content'>
|
348
|
+
<div className='table-list__item-content-block'>
|
349
|
+
<Label style='translucent' type='warning' text='pokr' />
|
350
|
+
<Label style='translucent' text='slika' />
|
351
|
+
</div>
|
352
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
353
|
+
<span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
|
354
|
+
</div>
|
355
|
+
<div className='table-list__item-content-block'>
|
356
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
357
|
+
</div>
|
358
|
+
</div>
|
359
|
+
<div className='table-list__slide-in-actions'>
|
360
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
361
|
+
</div>
|
362
|
+
</div>
|
363
|
+
|
364
|
+
<div className='table-list__add-bar-container'>
|
365
|
+
<Tooltip text='Add item' flow='top' appendToBody={true}>
|
366
|
+
<div className='table-list__add-bar'>
|
367
|
+
<Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
368
|
+
</div>
|
369
|
+
</Tooltip>
|
370
|
+
</div>
|
371
|
+
</li>
|
372
|
+
|
373
|
+
<li className='table-list__item-container'>
|
374
|
+
<div className='table-list__item table-list__item--clickable table-list__item--draggable'>
|
375
|
+
<div className='table-list__item-content'>
|
376
|
+
<div className='table-list__item-content-block'>
|
377
|
+
<Label style='translucent' type='warning' text='pokr' />
|
378
|
+
<Label style='translucent' text='slika' />
|
379
|
+
</div>
|
380
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
381
|
+
<span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
|
382
|
+
</div>
|
383
|
+
<div className='table-list__item-content-block'>
|
384
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
385
|
+
</div>
|
386
|
+
</div>
|
387
|
+
<div className='table-list__slide-in-actions'>
|
388
|
+
<IconButton icon='pencil' size='small' ariaValue='More actions' onClick={()=> false} />
|
389
|
+
<IconButton icon='trash' size='small' ariaValue='More actions' onClick={()=> false} />
|
390
|
+
</div>
|
391
|
+
</div>
|
392
|
+
|
393
|
+
<div className='table-list__add-bar-container'>
|
394
|
+
<Tooltip text='Add item' flow='top' appendToBody={true}>
|
395
|
+
<div className='table-list__add-bar'>
|
396
|
+
<Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
397
|
+
</div>
|
398
|
+
</Tooltip>
|
399
|
+
</div>
|
400
|
+
</li>
|
401
|
+
</ul>
|
402
|
+
|
403
|
+
<hr /><hr />
|
404
|
+
|
59
405
|
<h3 className="docs-page__h3 sd-margin-y--0">Checkbox</h3>
|
60
406
|
<hr />
|
61
407
|
<div className="sd-check__group-new sd-check__group-new--vertical">
|
@@ -81,6 +427,42 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
81
427
|
</div>
|
82
428
|
|
83
429
|
<hr /><hr />
|
430
|
+
<h3 className="docs-page__h3 sd-margin-y--0 sd-margin-b--3">Duration input</h3>
|
431
|
+
|
432
|
+
|
433
|
+
<div className="sd-input">
|
434
|
+
<label className="sd-input__label" id="duration01">Input label</label>
|
435
|
+
<div className="sd-input__duration-input" id="id06" aria-describedby="duration01">
|
436
|
+
<input type="number" className="" placeholder='00'/>
|
437
|
+
<span className="sd-input__suffix">h</span>
|
438
|
+
<input type="number" className="" placeholder='00'/>
|
439
|
+
<span className="sd-input__suffix">m</span>
|
440
|
+
<input type="number" className="" placeholder='00'/>
|
441
|
+
<span className="sd-input__suffix">s</span>
|
442
|
+
</div>
|
443
|
+
<div className="sd-input__char-count">0 / 30</div>
|
444
|
+
<div className="sd-input__message-box">
|
445
|
+
<div className="sd-input__hint">This is some hint message</div>
|
446
|
+
</div>
|
447
|
+
</div>
|
448
|
+
|
449
|
+
<h3 className="docs-page__h3 sd-margin-y--0 sd-margin-b--3">testiramt</h3>
|
450
|
+
|
451
|
+
|
452
|
+
<div className="sd-input">
|
453
|
+
<label className="sd-input__label" id="duration01">Input label</label>
|
454
|
+
{/* temp */}
|
455
|
+
<div id="pr_id_1" className="p-dropdown p-component p-inputwrapper p-dropdown-clearable"><div className="p-hidden-accessible"><input type="text" aria-haspopup="listbox" /></div><div className="p-hidden-accessible p-dropdown-hidden-select"><select aria-hidden="true"><option value=""> </option></select></div><span className="p-dropdown-label p-inputtext p-placeholder"><div>Select a color</div></span><div className="p-dropdown-trigger" role="button" aria-haspopup="listbox" aria-expanded="false"><span className="p-dropdown-trigger-icon pi pi-chevron-down p-clickable"></span></div></div>
|
456
|
+
{/* temp */}
|
457
|
+
|
458
|
+
|
459
|
+
<div className="sd-input__char-count">0 / 30</div>
|
460
|
+
<div className="sd-input__message-box">
|
461
|
+
<div className="sd-input__hint">This is some hint message</div>
|
462
|
+
</div>
|
463
|
+
</div>
|
464
|
+
|
465
|
+
<hr />
|
84
466
|
|
85
467
|
<h3 className="docs-page__h3 sd-margin-t--2 sd-margin-b--0">Radio</h3>
|
86
468
|
<hr />
|
@@ -166,183 +548,9 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
166
548
|
<div className="button-group button-group--comfort">
|
167
549
|
<div className="color-swatch colour-test--1"></div>
|
168
550
|
<div className="color-swatch colour-test--2"></div>
|
551
|
+
<Spinner />
|
169
552
|
</div>
|
170
|
-
{/* <hr />
|
171
|
-
<div className="sd-theme-selector__list">
|
172
|
-
<div className="sd-theme-selector__item">
|
173
|
-
<figure className="sd-theme-selector__item-thumb" data-theme="light-ui">
|
174
|
-
<svg viewBox="0 0 156 94" xmlns="http://www.w3.org/2000/svg">
|
175
|
-
<g fill="none" fillRule="evenodd">
|
176
|
-
<path d="m0 0h156v94h-156z" fill="var(--sd-colour-panel-bg--100)"/>
|
177
|
-
<circle cx="144" cy="33" fill="var(--color-text-lighter)" r="4"/>
|
178
|
-
<rect fill="var(--sd-colour-interactive)" height="15" rx="2" width="58" x="91" y="71"/>
|
179
|
-
<g fill="var(--sd-colour-btn-bg-neutral)">
|
180
|
-
<rect height="15" rx="2" width="58" x="29" y="52"/>
|
181
|
-
<rect height="15" rx="2" width="58" x="29" y="71"/>
|
182
|
-
<rect height="15" rx="2" width="58" x="91" y="52"/>
|
183
|
-
</g>
|
184
|
-
<g fill="#fff">
|
185
|
-
<rect height="3" rx="1.5" width="9" x="99" y="77"/>
|
186
|
-
<rect height="3" rx="1.5" width="11" x="130" y="77"/>
|
187
|
-
<rect height="3" rx="1.5" width="18" x="110" y="77"/>
|
188
|
-
</g>
|
189
|
-
<g fill="var(--color-text-light)">
|
190
|
-
<rect height="3" rx="1.5" width="9" x="37" y="58"/>
|
191
|
-
<rect height="3" rx="1.5" width="11" x="68" y="58"/>
|
192
|
-
<rect height="3" rx="1.5" width="18" x="48" y="58"/>
|
193
|
-
<rect height="3" rx="1.5" width="9" x="37" y="77"/>
|
194
|
-
<rect height="3" rx="1.5" width="11" x="68" y="77"/>
|
195
|
-
<rect height="3" rx="1.5" width="18" x="48" y="77"/>
|
196
|
-
<rect height="3" rx="1.5" width="9" x="99" y="58"/>
|
197
|
-
<rect height="3" rx="1.5" width="11" x="130" y="58"/>
|
198
|
-
<rect height="3" rx="1.5" width="18" x="110" y="58"/>
|
199
|
-
</g>
|
200
|
-
<g fill="var(--color-text)">
|
201
|
-
<rect height="4" rx="2" width="11" x="29" y="31"/>
|
202
|
-
<rect height="4" rx="2" width="14" x="70" y="31"/>
|
203
|
-
<rect height="4" rx="2" width="23" x="43" y="31"/>
|
204
|
-
</g>
|
205
|
-
<path d="m0 22h22v72h-22z" fill="var(--sd-colour-sidebar-menu--00)"/>
|
206
|
-
<circle cx="11" cy="52" fill="var(--sd-colour-interactive)" r="6"/>
|
207
|
-
<g fill="var(--color-icon-default)" opacity=".75">
|
208
|
-
<circle cx="11" cy="34" r="6"/>
|
209
|
-
<circle cx="11" cy="70" r="6"/>
|
210
|
-
</g>
|
211
|
-
<path d="m0 0h156v22h-156z" fill="var(--sd-colour-top-menu)"/>
|
212
|
-
<path d="m0 22h156v1h-156z" fill="var(--sd-colour--shadow-line)"/>
|
213
|
-
<g fill="hsla(214, 13%, 65%, 1)" opacity="1">
|
214
|
-
<rect height="4" rx="2" width="11" x="31" y="9"/>
|
215
|
-
<rect height="4" rx="2" width="23" x="45" y="9"/>
|
216
|
-
</g>
|
217
|
-
<path d="m22 44h134v1h-134z" fill="var(--sd-colour-line--medium)"/>
|
218
|
-
<path d="m0 0h22v22h-22z" fill="var(--sd-colour-top-menu__btn)"/>
|
219
|
-
<path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/>
|
220
|
-
</g>
|
221
|
-
</svg>
|
222
|
-
</figure>
|
223
|
-
<div className="sd-theme-selector__item-action">
|
224
|
-
<input type="radio" className="sd-theme-selector__input" id="id50" name="id5" />
|
225
|
-
<span className="sd-radio-new"></span>
|
226
|
-
<label className="sd-theme-selector__label" htmlFor="id50">Light</label>
|
227
|
-
</div>
|
228
|
-
</div>
|
229
|
-
|
230
|
-
<div className="sd-theme-selector__item">
|
231
|
-
<figure className="sd-theme-selector__item-thumb" data-theme="dark-ui">
|
232
|
-
<svg viewBox="0 0 156 94" xmlns="http://www.w3.org/2000/svg">
|
233
|
-
<g fill="none" fillRule="evenodd">
|
234
|
-
<path d="m0 0h156v94h-156z" fill="var(--sd-colour-panel-bg--100)"/>
|
235
|
-
<circle cx="144" cy="33" fill="var(--color-text-lighter)" r="4"/>
|
236
|
-
<rect fill="var(--sd-colour-interactive)" height="15" rx="2" width="58" x="91" y="71"/>
|
237
|
-
<g fill="var(--sd-colour-btn-bg-neutral)">
|
238
|
-
<rect height="15" rx="2" width="58" x="29" y="52"/>
|
239
|
-
<rect height="15" rx="2" width="58" x="29" y="71"/>
|
240
|
-
<rect height="15" rx="2" width="58" x="91" y="52"/>
|
241
|
-
</g>
|
242
|
-
<g fill="#fff">
|
243
|
-
<rect height="3" rx="1.5" width="9" x="99" y="77"/>
|
244
|
-
<rect height="3" rx="1.5" width="11" x="130" y="77"/>
|
245
|
-
<rect height="3" rx="1.5" width="18" x="110" y="77"/>
|
246
|
-
</g>
|
247
|
-
<g fill="var(--color-text-light)">
|
248
|
-
<rect height="3" rx="1.5" width="9" x="37" y="58"/>
|
249
|
-
<rect height="3" rx="1.5" width="11" x="68" y="58"/>
|
250
|
-
<rect height="3" rx="1.5" width="18" x="48" y="58"/>
|
251
|
-
<rect height="3" rx="1.5" width="9" x="37" y="77"/>
|
252
|
-
<rect height="3" rx="1.5" width="11" x="68" y="77"/>
|
253
|
-
<rect height="3" rx="1.5" width="18" x="48" y="77"/>
|
254
|
-
<rect height="3" rx="1.5" width="9" x="99" y="58"/>
|
255
|
-
<rect height="3" rx="1.5" width="11" x="130" y="58"/>
|
256
|
-
<rect height="3" rx="1.5" width="18" x="110" y="58"/>
|
257
|
-
</g>
|
258
|
-
<g fill="var(--color-text)">
|
259
|
-
<rect height="4" rx="2" width="11" x="29" y="31"/>
|
260
|
-
<rect height="4" rx="2" width="14" x="70" y="31"/>
|
261
|
-
<rect height="4" rx="2" width="23" x="43" y="31"/>
|
262
|
-
</g>
|
263
|
-
<path d="m0 22h22v72h-22z" fill="var(--sd-colour-sidebar-menu--00)"/>
|
264
|
-
<circle cx="11" cy="52" fill="var(--sd-colour-interactive)" r="6"/>
|
265
|
-
<g fill="var(--color-icon-default)" opacity=".75">
|
266
|
-
<circle cx="11" cy="34" r="6"/>
|
267
|
-
<circle cx="11" cy="70" r="6"/>
|
268
|
-
</g>
|
269
|
-
<path d="m0 0h156v22h-156z" fill="var(--sd-colour-top-menu)"/>
|
270
|
-
<path d="m0 22h156v1h-156z" fill="var(--sd-colour--shadow-line)"/>
|
271
|
-
<g fill="hsla(214, 13%, 65%, 1)" opacity="1">
|
272
|
-
<rect height="4" rx="2" width="11" x="31" y="9"/>
|
273
|
-
<rect height="4" rx="2" width="23" x="45" y="9"/>
|
274
|
-
</g>
|
275
|
-
<path d="m22 44h134v1h-134z" fill="var(--sd-colour-line--medium)"/>
|
276
|
-
<path d="m0 0h22v22h-22z" fill="var(--sd-colour-top-menu__btn)"/>
|
277
|
-
<path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/>
|
278
|
-
</g>
|
279
|
-
</svg>
|
280
|
-
</figure>
|
281
|
-
<div className="sd-theme-selector__item-action">
|
282
|
-
<input type="radio" className="sd-theme-selector__input" id="id50" name="id5" />
|
283
|
-
<span className="sd-radio-new"></span>
|
284
|
-
<label className="sd-theme-selector__label" htmlFor="id50">Dark</label>
|
285
|
-
</div>
|
286
|
-
</div>
|
287
553
|
|
288
|
-
<div className="sd-theme-selector__item">
|
289
|
-
<figure className="sd-theme-selector__item-thumb" data-theme="accessible-light-ui">
|
290
|
-
<svg viewBox="0 0 156 94" xmlns="http://www.w3.org/2000/svg">
|
291
|
-
<g fill="none" fillRule="evenodd">
|
292
|
-
<path d="m0 0h156v94h-156z" fill="var(--sd-colour-panel-bg--100)"/>
|
293
|
-
<circle cx="144" cy="33" fill="var(--color-text-lighter)" r="4"/>
|
294
|
-
<rect fill="var(--sd-colour-interactive)" height="15" rx="2" width="58" x="91" y="71"/>
|
295
|
-
<g fill="var(--sd-colour-btn-bg-neutral)">
|
296
|
-
<rect height="15" rx="2" width="58" x="29" y="52"/>
|
297
|
-
<rect height="15" rx="2" width="58" x="29" y="71"/>
|
298
|
-
<rect height="15" rx="2" width="58" x="91" y="52"/>
|
299
|
-
</g>
|
300
|
-
<g fill="#fff">
|
301
|
-
<rect height="3" rx="1.5" width="9" x="99" y="77"/>
|
302
|
-
<rect height="3" rx="1.5" width="11" x="130" y="77"/>
|
303
|
-
<rect height="3" rx="1.5" width="18" x="110" y="77"/>
|
304
|
-
</g>
|
305
|
-
<g fill="var(--color-text-light)">
|
306
|
-
<rect height="3" rx="1.5" width="9" x="37" y="58"/>
|
307
|
-
<rect height="3" rx="1.5" width="11" x="68" y="58"/>
|
308
|
-
<rect height="3" rx="1.5" width="18" x="48" y="58"/>
|
309
|
-
<rect height="3" rx="1.5" width="9" x="37" y="77"/>
|
310
|
-
<rect height="3" rx="1.5" width="11" x="68" y="77"/>
|
311
|
-
<rect height="3" rx="1.5" width="18" x="48" y="77"/>
|
312
|
-
<rect height="3" rx="1.5" width="9" x="99" y="58"/>
|
313
|
-
<rect height="3" rx="1.5" width="11" x="130" y="58"/>
|
314
|
-
<rect height="3" rx="1.5" width="18" x="110" y="58"/>
|
315
|
-
</g>
|
316
|
-
<g fill="var(--color-text)">
|
317
|
-
<rect height="4" rx="2" width="11" x="29" y="31"/>
|
318
|
-
<rect height="4" rx="2" width="14" x="70" y="31"/>
|
319
|
-
<rect height="4" rx="2" width="23" x="43" y="31"/>
|
320
|
-
</g>
|
321
|
-
<path d="m0 22h22v72h-22z" fill="var(--sd-colour-sidebar-menu--00)"/>
|
322
|
-
<circle cx="11" cy="52" fill="var(--sd-colour-interactive)" r="6"/>
|
323
|
-
<g fill="var(--color-icon-default)" opacity=".75">
|
324
|
-
<circle cx="11" cy="34" r="6"/>
|
325
|
-
<circle cx="11" cy="70" r="6"/>
|
326
|
-
</g>
|
327
|
-
<path d="m0 0h156v22h-156z" fill="var(--sd-colour-top-menu)"/>
|
328
|
-
<path d="m0 22h156v1h-156z" fill="var(--sd-colour--shadow-line)"/>
|
329
|
-
<g fill="hsla(214, 13%, 65%, 1)" opacity="1">
|
330
|
-
<rect height="4" rx="2" width="11" x="31" y="9"/>
|
331
|
-
<rect height="4" rx="2" width="23" x="45" y="9"/>
|
332
|
-
</g>
|
333
|
-
<path d="m22 44h134v1h-134z" fill="var(--sd-colour-line--medium)"/>
|
334
|
-
<path d="m0 0h22v22h-22z" fill="var(--sd-colour-top-menu__btn)"/>
|
335
|
-
<path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/>
|
336
|
-
</g>
|
337
|
-
</svg>
|
338
|
-
</figure>
|
339
|
-
<div className="sd-theme-selector__item-action">
|
340
|
-
<input type="radio" className="sd-theme-selector__input" id="id50" name="id5" />
|
341
|
-
<span className="sd-radio-new"></span>
|
342
|
-
<label className="sd-theme-selector__label" htmlFor="id50">High Contrast</label>
|
343
|
-
</div>
|
344
|
-
</div>
|
345
|
-
</div> */}
|
346
554
|
<hr />
|
347
555
|
<Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
|
348
556
|
<ThemeSelector size='small' options={[
|
@@ -352,6 +560,23 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
352
560
|
]} onChange={($event)=>{this.setState({selctedTheme: $event})}} value={this.state.selctedTheme} />
|
353
561
|
</Container>
|
354
562
|
<hr />
|
563
|
+
<Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
|
564
|
+
<Button text="Exit" type='primary' onClick={()=> false} />
|
565
|
+
<Divider />
|
566
|
+
<Button text="Cancel" onClick={()=> false} />
|
567
|
+
<Divider />
|
568
|
+
<Button text="Save" type='primary' onClick={()=> false} />
|
569
|
+
</Container>
|
570
|
+
<hr />
|
571
|
+
<Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
|
572
|
+
|
573
|
+
<InputWrapper
|
574
|
+
label="Label"
|
575
|
+
invalid={false}>
|
576
|
+
<input type='text' />
|
577
|
+
</InputWrapper>
|
578
|
+
</Container>
|
579
|
+
<hr />
|
355
580
|
<Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
|
356
581
|
<div className='sd-dropzone__drop-target'>
|
357
582
|
<div className='sd-dropzone__target-border'></div>
|