superdesk-ui-framework 3.0.0-beta.0 → 3.0.0-rc12
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/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/img/spinner.svg +3 -0
- package/app/img/themes/theme-base.svg +1 -0
- package/app/img/themes/theme-contrast.svg +45 -0
- package/app/img/themes/theme-dark.svg +1 -0
- package/app/img/themes/theme-light.svg +1 -0
- package/app/index.js +1 -1
- package/app/scripts/modals.js +22 -9
- package/app/scripts/toggleBoxNext.js +1 -1
- package/app/styles/_accessibility.scss +312 -4
- package/app/styles/_alerts.scss +57 -19
- package/app/styles/_avatar.scss +25 -1
- package/app/styles/_badge.scss +2 -2
- package/app/styles/_big-icon-font.scss +64 -24
- package/app/styles/_boxed-list.scss +67 -21
- package/app/styles/_buttons.scss +441 -333
- package/app/styles/_carousel.scss +17 -11
- package/app/styles/_content-divider.scss +63 -8
- package/app/styles/_design-tokens.scss +2 -0
- package/app/styles/_hamburger.scss +160 -0
- package/app/styles/_helpers.scss +221 -34
- package/app/styles/_icon-font.scss +351 -307
- package/app/styles/_icon-labels.scss +66 -10
- package/app/styles/_labels.scss +12 -7
- package/app/styles/_loaders.scss +13 -0
- package/app/styles/_master-desk.scss +8 -7
- package/app/styles/_mixins.scss +13 -3
- package/app/styles/_modals.scss +10 -31
- package/app/styles/_normalize.scss +5 -0
- package/app/styles/_panel-info.scss +19 -14
- package/app/styles/_sd-tag-input.scss +280 -219
- package/app/styles/_simple-list.scss +37 -17
- package/app/styles/_spinner.scss +46 -0
- package/app/styles/_table-list.scss +348 -0
- package/app/styles/_tabs.scss +6 -8
- package/app/styles/_tag-labels.scss +11 -2
- package/app/styles/_thumb-carousel.scss +11 -10
- package/app/styles/_toggle-box.scss +46 -12
- package/app/styles/_toggle-button.scss +42 -0
- package/app/styles/_tooltips.scss +3 -3
- package/app/styles/_variables.scss +0 -1
- package/app/styles/app.scss +15 -2
- package/app/styles/components/_card-item.scss +33 -21
- package/app/styles/components/_list-item.scss +63 -35
- package/app/styles/components/_sd-collapse-box.scss +6 -6
- package/app/styles/components/_sd-comment-box.scss +8 -4
- package/app/styles/components/_sd-dropzone.scss +114 -0
- package/app/styles/components/_sd-editor-popup.scss +4 -4
- package/app/styles/components/_sd-grid-item.scss +32 -18
- package/app/styles/components/_sd-media-carousel.scss +37 -2
- package/app/styles/components/_sd-notification-panel.scss +48 -0
- package/app/styles/components/_sd-photo-preview.scss +3 -3
- package/app/styles/components/_sd-searchbar.scss +12 -98
- package/app/styles/components/_subnav.scss +464 -435
- package/app/styles/components/_theme-selector.scss +189 -0
- package/app/styles/design-tokens/_design-tokens-general.scss +81 -0
- package/app/styles/{variables → design-tokens}/_new-colors.scss +68 -30
- package/app/styles/dropdowns/_basic-dropdown.scss +36 -3
- package/app/styles/editor/_editor-buttons.scss +54 -0
- package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
- package/app/styles/form-elements/_checkbox.scss +85 -58
- package/app/styles/form-elements/_forms-general.scss +171 -21
- package/app/styles/form-elements/_input-wrap.scss +138 -0
- package/app/styles/form-elements/_inputs.scss +602 -104
- package/app/styles/form-elements/_select-grid.scss +79 -0
- package/app/styles/grids/_basic-grid.scss +52 -26
- package/app/styles/grids/_grid-layout.scss +207 -66
- package/app/styles/grids/_layout-grid.scss +4 -4
- package/app/styles/grids/_sd-kanban-list.scss +2 -2
- package/app/styles/interface-elements/_side-panel.scss +88 -59
- package/app/styles/layout/_basic-layout.scss +3 -6
- package/app/styles/layout/_container.scss +35 -0
- package/app/styles/layout/_editor.scss +404 -0
- package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
- package/app/styles/menus/_sd-left-navigation.scss +38 -3
- package/app/styles/menus/_sd-sidebar-menu.scss +109 -14
- package/app/styles/menus/_sd-top-menu.scss +19 -5
- package/app/styles/pr-superdesk-theme.scss +3 -0
- package/app/styles/primereact/_pr-datepicker.scss +62 -9
- package/app/styles/primereact/_pr-dialog.scss +44 -7
- package/app/styles/primereact/_pr-dropdown.scss +170 -7
- package/app/styles/primereact/_pr-general.scss +4 -0
- package/app/styles/primereact/_pr-menu.scss +6 -5
- package/app/styles/primereact/_pr-skeleton.scss +35 -0
- package/app/styles/variables/_colors.scss +23 -473
- package/app/styles/variables/_dimensions.scss +85 -1
- package/app/styles/variables/_form-elements.scss +0 -2
- package/app-typescript/components/Alert.tsx +16 -1
- package/app-typescript/components/Avatar.tsx +21 -0
- package/app-typescript/components/Badge.tsx +3 -2
- package/app-typescript/components/Button.tsx +7 -1
- package/app-typescript/components/ButtonGroup.tsx +5 -4
- package/app-typescript/components/Carousel.tsx +1 -1
- package/app-typescript/components/CheckButtonGroup.tsx +19 -5
- package/app-typescript/components/CheckGroup.tsx +2 -1
- package/app-typescript/components/Checkbox.tsx +7 -3
- package/app-typescript/components/CheckboxButton.tsx +9 -2
- package/app-typescript/components/ContentDivider.tsx +3 -0
- package/app-typescript/components/CreateButton.tsx +38 -0
- package/app-typescript/components/DatePicker.tsx +77 -38
- package/app-typescript/components/DonutChart.tsx +1 -1
- package/app-typescript/components/DropZone.tsx +89 -0
- package/app-typescript/components/Dropdown.tsx +133 -80
- package/app-typescript/components/DurationInput.tsx +400 -0
- package/app-typescript/components/Editor/EditorButton.tsx +34 -0
- package/app-typescript/components/EmptyState.tsx +2 -1
- package/app-typescript/components/Form/FormGroup.tsx +33 -0
- package/app-typescript/components/Form/FormItem.tsx +20 -0
- package/app-typescript/components/Form/FormLabel.tsx +29 -0
- package/app-typescript/components/Form/FormRow.tsx +40 -0
- package/app-typescript/components/Form/FormRowNew.tsx +41 -0
- package/app-typescript/components/Form/FormText.tsx +15 -0
- package/app-typescript/components/Form/InputBase.tsx +95 -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 +9 -0
- package/app-typescript/components/Icon.tsx +4 -2
- package/app-typescript/components/IconButton.tsx +30 -12
- package/app-typescript/components/IconLabel.tsx +8 -1
- package/app-typescript/components/IconPicker.tsx +277 -0
- package/app-typescript/components/Input.tsx +67 -35
- package/app-typescript/components/Label.tsx +65 -10
- package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringContainer.tsx +28 -0
- package/app-typescript/components/Layouts/AuthoringFrame.tsx +73 -0
- package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +34 -0
- package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
- package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
- package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
- package/app-typescript/components/Layouts/AuthoringMain.tsx +52 -0
- package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -0
- package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
- package/app-typescript/components/Layouts/Container.tsx +30 -0
- package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
- package/app-typescript/components/Layouts/CoreLayout.tsx +63 -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 +22 -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/HeaderPanel.tsx +15 -0
- package/app-typescript/components/Layouts/Layout.tsx +33 -0
- package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
- package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
- package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
- package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
- package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
- package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
- package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
- package/app-typescript/components/Layouts/Panel.tsx +208 -0
- package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
- package/app-typescript/components/Layouts/index.tsx +43 -0
- package/app-typescript/components/LeftMenu.tsx +116 -31
- package/app-typescript/components/ListItemLoader.tsx +30 -0
- package/app-typescript/components/Lists/BoxedList.tsx +169 -0
- package/app-typescript/components/Lists/ContentList.tsx +133 -0
- package/app-typescript/components/Lists/SimpleList.tsx +54 -0
- package/app-typescript/components/Lists/TableList.tsx +405 -0
- package/app-typescript/components/Lists/index.tsx +2 -0
- package/app-typescript/components/Menu.tsx +33 -9
- package/app-typescript/components/Modal.tsx +31 -18
- package/app-typescript/components/MultiSelect.tsx +99 -0
- package/app-typescript/components/NavButton.tsx +6 -1
- package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
- package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
- package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
- package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
- package/app-typescript/components/Navigation/index.tsx +3 -0
- package/app-typescript/components/RadioButtonGroup.tsx +113 -0
- package/app-typescript/components/RadioGroup.tsx +69 -0
- package/app-typescript/components/SearchBar.tsx +106 -0
- package/app-typescript/components/Select.tsx +31 -31
- package/app-typescript/components/SelectGrid.tsx +233 -0
- package/app-typescript/components/SelectWithTemplate.tsx +32 -7
- package/app-typescript/components/SidebarMenu.tsx +68 -0
- package/app-typescript/components/Skeleton.tsx +48 -0
- package/app-typescript/components/SlidingToolbar.tsx +8 -2
- package/app-typescript/components/Spacer.tsx +87 -0
- package/app-typescript/components/Spinner.tsx +32 -0
- package/app-typescript/components/SubNav.tsx +25 -4
- package/app-typescript/components/Switch.tsx +34 -12
- package/app-typescript/components/SwitchGroup.tsx +2 -1
- package/app-typescript/components/Tag.tsx +31 -7
- package/app-typescript/components/Text/Heading.tsx +67 -0
- package/app-typescript/components/Text/Text.tsx +36 -0
- package/app-typescript/components/Text/Time.tsx +34 -0
- package/app-typescript/components/ThemeSelector.tsx +113 -0
- package/app-typescript/components/TimePicker.tsx +38 -15
- package/app-typescript/components/Togglebox.tsx +9 -7
- package/app-typescript/components/Tooltip.tsx +7 -5
- package/app-typescript/components/TreeSelect.tsx +664 -0
- package/app-typescript/components/WithSizeObserver.tsx +88 -0
- package/app-typescript/helpers.tsx +3 -0
- package/app-typescript/index.ts +30 -3
- package/dist/SD-logo.svg +52 -0
- package/dist/avatar-2.jpg +0 -0
- package/dist/avatar-3.jpg +0 -0
- package/dist/avatar-4.jpg +0 -0
- package/dist/avatar-5.jpg +0 -0
- package/dist/avatar-6.jpg +0 -0
- package/dist/components/basic-grid.html +1 -1
- package/dist/components/checkbox.html +1 -1
- package/dist/components/modals.html +1 -0
- package/dist/dots.svg +3 -0
- package/dist/examples.bundle.css +8916 -1617
- package/dist/examples.bundle.js +99314 -71560
- package/dist/playgrounds/accessible-theme-test.html +1 -1
- package/dist/playgrounds/boxed-list.html +1 -1
- package/dist/playgrounds/cards.html +9 -4
- package/dist/playgrounds/editor-3-test.html +15 -0
- package/dist/playgrounds/form-layout.html +9 -7
- package/dist/playgrounds/layout-test-2.html +1 -1
- package/dist/playgrounds/list-item-test.html +1 -1
- package/dist/playgrounds/master-desk.html +2 -4
- 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 +156 -0
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
- package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
- package/dist/playgrounds/react-playgrounds/Index.tsx +8 -1
- package/dist/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
- package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
- package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +631 -24
- package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
- 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/Alerts.tsx +91 -18
- package/dist/react/Avatar.tsx +314 -127
- package/dist/react/Badges.tsx +18 -0
- package/dist/react/BoxedList.tsx +362 -0
- package/dist/react/ButtonGroups.tsx +66 -65
- package/dist/react/Buttons.tsx +65 -113
- package/dist/react/Carousel.tsx +2 -3
- package/dist/react/Checkboxs.tsx +66 -25
- package/dist/react/Container.tsx +143 -0
- package/dist/react/ContentDivider.tsx +22 -18
- package/dist/react/ContentList.tsx +462 -0
- package/dist/react/CreateButton.tsx +71 -0
- package/dist/react/DatePicker.tsx +31 -6
- package/dist/react/DropZone.tsx +111 -0
- package/dist/react/Dropdowns.tsx +580 -48
- package/dist/react/DurationInput.tsx +108 -0
- package/dist/react/Heading.tsx +106 -0
- package/dist/react/IconButtons.tsx +51 -21
- package/dist/react/IconFont.tsx +7 -6
- package/dist/react/IconLabels.tsx +24 -2
- package/dist/react/IconPicker.tsx +65 -0
- package/dist/react/Index.tsx +125 -19
- package/dist/react/Inputs.tsx +289 -6
- package/dist/react/Labels.tsx +51 -1
- package/dist/react/LeftNavigations.tsx +194 -15
- package/dist/react/ListItems.tsx +34 -0
- package/dist/react/Modal.tsx +8 -7
- package/dist/react/MultiSelect.tsx +201 -0
- package/dist/react/NavButtons.tsx +35 -5
- package/dist/react/Panel.tsx +366 -0
- package/dist/react/QuickNavigationBar.tsx +142 -0
- package/dist/react/RadioGroup.tsx +351 -0
- package/dist/react/SelectGrid.tsx +121 -0
- package/dist/react/SelectWithTemplate.tsx +6 -1
- package/dist/react/Selects.tsx +57 -0
- package/dist/react/SimpleList.tsx +148 -0
- package/dist/react/SubNav.tsx +65 -18
- package/dist/react/TableList.tsx +161 -0
- package/dist/react/Tags.tsx +57 -5
- package/dist/react/Text.tsx +134 -0
- package/dist/react/TimePicker.tsx +22 -12
- package/dist/react/Togglebox.tsx +1 -1
- package/dist/react/TreeSelect.tsx +422 -0
- 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/react.html +4 -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 +55688 -25164
- package/dist/superdesk-ui.bundle.js +89363 -66822
- package/dist/vendor.bundle.js +25685 -25663
- package/examples/css/docs-page.css +103 -33
- package/examples/img/avatar-2.jpg +0 -0
- package/examples/img/avatar-3.jpg +0 -0
- package/examples/img/avatar-4.jpg +0 -0
- package/examples/img/avatar-5.jpg +0 -0
- package/examples/img/avatar-6.jpg +0 -0
- package/examples/index.js +32 -0
- package/examples/pages/components/basic-grid.html +1 -1
- package/examples/pages/components/checkbox.html +1 -1
- package/examples/pages/components/modals.html +1 -0
- package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
- package/examples/pages/playgrounds/boxed-list.html +1 -1
- package/examples/pages/playgrounds/cards.html +9 -4
- package/examples/pages/playgrounds/editor-3-test.html +15 -0
- package/examples/pages/playgrounds/form-layout.html +9 -7
- 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 +2 -4
- 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 +156 -0
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
- package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
- package/examples/pages/playgrounds/react-playgrounds/Index.tsx +8 -1
- package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
- package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
- package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +631 -24
- package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
- 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/Alerts.tsx +91 -18
- package/examples/pages/react/Avatar.tsx +314 -127
- package/examples/pages/react/Badges.tsx +18 -0
- package/examples/pages/react/BoxedList.tsx +362 -0
- package/examples/pages/react/ButtonGroups.tsx +66 -65
- package/examples/pages/react/Buttons.tsx +65 -113
- package/examples/pages/react/Carousel.tsx +2 -3
- package/examples/pages/react/Checkboxs.tsx +66 -25
- package/examples/pages/react/Container.tsx +143 -0
- package/examples/pages/react/ContentDivider.tsx +22 -18
- package/examples/pages/react/ContentList.tsx +462 -0
- package/examples/pages/react/CreateButton.tsx +71 -0
- package/examples/pages/react/DatePicker.tsx +31 -6
- package/examples/pages/react/DropZone.tsx +111 -0
- package/examples/pages/react/Dropdowns.tsx +580 -48
- package/examples/pages/react/DurationInput.tsx +108 -0
- package/examples/pages/react/Heading.tsx +106 -0
- package/examples/pages/react/IconButtons.tsx +51 -21
- package/examples/pages/react/IconFont.tsx +7 -6
- package/examples/pages/react/IconLabels.tsx +24 -2
- package/examples/pages/react/IconPicker.tsx +65 -0
- package/examples/pages/react/Index.tsx +125 -19
- package/examples/pages/react/Inputs.tsx +289 -6
- package/examples/pages/react/Labels.tsx +51 -1
- package/examples/pages/react/LeftNavigations.tsx +194 -15
- package/examples/pages/react/ListItems.tsx +34 -0
- package/examples/pages/react/Modal.tsx +8 -7
- package/examples/pages/react/MultiSelect.tsx +201 -0
- package/examples/pages/react/NavButtons.tsx +35 -5
- package/examples/pages/react/Panel.tsx +366 -0
- package/examples/pages/react/QuickNavigationBar.tsx +142 -0
- package/examples/pages/react/RadioGroup.tsx +351 -0
- package/examples/pages/react/SelectGrid.tsx +121 -0
- package/examples/pages/react/SelectWithTemplate.tsx +6 -1
- package/examples/pages/react/Selects.tsx +57 -0
- package/examples/pages/react/SimpleList.tsx +148 -0
- package/examples/pages/react/SubNav.tsx +65 -18
- package/examples/pages/react/TableList.tsx +161 -0
- package/examples/pages/react/Tags.tsx +57 -5
- package/examples/pages/react/Text.tsx +134 -0
- package/examples/pages/react/TimePicker.tsx +22 -12
- package/examples/pages/react/Togglebox.tsx +1 -1
- package/examples/pages/react/TreeSelect.tsx +422 -0
- 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/examples/pages/react.html +4 -0
- package/package.json +16 -11
- package/react/components/Alert.d.ts +3 -0
- package/react/components/Alert.js +17 -7
- package/react/components/Autocomplete.js +16 -12
- package/react/components/Avatar.d.ts +9 -0
- package/react/components/Avatar.js +24 -4
- package/react/components/Badge.d.ts +1 -0
- package/react/components/Badge.js +9 -7
- package/react/components/Button.d.ts +2 -0
- package/react/components/Button.js +12 -8
- package/react/components/ButtonGroup.d.ts +3 -2
- package/react/components/ButtonGroup.js +9 -7
- package/react/components/Carousel.js +5 -3
- package/react/components/CheckButtonGroup.d.ts +3 -1
- package/react/components/CheckButtonGroup.js +14 -6
- package/react/components/CheckGroup.d.ts +1 -0
- package/react/components/CheckGroup.js +6 -4
- package/react/components/Checkbox.d.ts +2 -1
- package/react/components/Checkbox.js +7 -5
- package/react/components/CheckboxButton.d.ts +1 -0
- package/react/components/CheckboxButton.js +8 -6
- package/react/components/ContentDivider.d.ts +1 -0
- package/react/components/ContentDivider.js +10 -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 +45 -31
- 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 +25 -0
- package/react/components/DropZone.js +95 -0
- package/react/components/Dropdown.d.ts +7 -5
- package/react/components/Dropdown.js +64 -36
- package/react/components/DropdownFirst.js +18 -11
- package/react/components/DurationInput.d.ts +42 -0
- package/react/components/DurationInput.js +364 -0
- package/react/components/EmptyState.d.ts +1 -0
- package/react/components/EmptyState.js +8 -6
- package/react/components/Form/FormGroup.d.ts +13 -0
- package/react/components/Form/FormGroup.js +63 -0
- package/react/components/Form/FormItem.d.ts +9 -0
- package/react/components/Form/FormItem.js +56 -0
- package/react/components/Form/FormLabel.d.ts +13 -0
- package/react/components/Form/FormLabel.js +62 -0
- package/react/components/Form/FormRow.d.ts +17 -0
- package/react/components/Form/FormRow.js +64 -0
- package/react/components/Form/FormRowNew.d.ts +12 -0
- package/react/components/Form/FormRowNew.js +67 -0
- package/react/components/Form/FormText.d.ts +8 -0
- package/react/components/Form/FormText.js +49 -0
- package/react/components/Form/InputBase.d.ts +41 -0
- package/react/components/Form/InputBase.js +86 -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 +9 -0
- package/react/components/Form/index.js +21 -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.d.ts +9 -2
- package/react/components/IconButton.js +17 -7
- package/react/components/IconLabel.d.ts +2 -0
- package/react/components/IconLabel.js +12 -7
- package/react/components/IconPicker.d.ts +24 -0
- package/react/components/IconPicker.js +287 -0
- package/react/components/Input.d.ts +25 -3
- package/react/components/Input.js +22 -26
- package/react/components/Label.d.ts +2 -0
- package/react/components/Label.js +44 -11
- package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
- package/react/components/Layouts/AuthorinInnerSideBar.js +49 -0
- package/react/components/Layouts/AuthoringContainer.d.ts +12 -0
- package/react/components/Layouts/AuthoringContainer.js +60 -0
- package/react/components/Layouts/AuthoringFrame.d.ts +19 -0
- package/react/components/Layouts/AuthoringFrame.js +58 -0
- package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameContainer.js +49 -0
- package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameLeftBar.js +49 -0
- package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameMain.js +49 -0
- package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameNavBar.js +49 -0
- package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameOverlay.js +49 -0
- package/react/components/Layouts/AuthoringFrameRightBar.d.ts +15 -0
- package/react/components/Layouts/AuthoringFrameRightBar.js +60 -0
- package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
- package/react/components/Layouts/AuthoringFrameSidePanel.js +58 -0
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +58 -0
- package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
- package/react/components/Layouts/AuthoringInnerBody.js +49 -0
- package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
- package/react/components/Layouts/AuthoringInnerHeader.js +68 -0
- package/react/components/Layouts/AuthoringMain.d.ts +14 -0
- package/react/components/Layouts/AuthoringMain.js +55 -0
- package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainContainer.js +49 -0
- package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainContent.js +49 -0
- package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
- package/react/components/Layouts/AuthoringMainToolBar.js +56 -0
- package/react/components/Layouts/BottomBarAction.d.ts +12 -0
- package/react/components/Layouts/BottomBarAction.js +59 -0
- package/react/components/Layouts/Container.d.ts +14 -0
- package/react/components/Layouts/Container.js +62 -0
- package/react/components/Layouts/ContentSplitter.d.ts +10 -0
- package/react/components/Layouts/ContentSplitter.js +58 -0
- package/react/components/Layouts/CoreLayout.d.ts +20 -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 +10 -0
- package/react/components/Layouts/CoreLayoutMain.js +56 -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.d.ts +8 -0
- package/react/components/Layouts/HeaderPanel.js +49 -0
- package/react/components/Layouts/Layout.d.ts +8 -0
- package/react/components/Layouts/Layout.js +36 -0
- package/react/components/Layouts/LayoutContainer.d.ts +8 -0
- package/react/components/Layouts/LayoutContainer.js +49 -0
- package/react/components/Layouts/LeftPanel.d.ts +9 -0
- package/react/components/Layouts/LeftPanel.js +56 -0
- package/react/components/Layouts/MainMenu.d.ts +41 -0
- package/react/components/Layouts/MainMenu.js +103 -0
- package/react/components/Layouts/MainPanel.d.ts +11 -0
- package/react/components/Layouts/MainPanel.js +59 -0
- 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.d.ts +16 -0
- package/react/components/Layouts/PageLayout.js +66 -0
- package/react/components/Layouts/Panel.d.ts +66 -0
- package/react/components/Layouts/Panel.js +168 -0
- package/react/components/Layouts/RightPanel.d.ts +9 -0
- package/react/components/Layouts/RightPanel.js +49 -0
- package/react/components/Layouts/index.d.ts +39 -0
- package/react/components/Layouts/index.js +86 -0
- package/react/components/LeftMenu.d.ts +13 -4
- package/react/components/LeftMenu.js +71 -18
- package/react/components/ListItemLoader.d.ts +4 -0
- package/react/components/ListItemLoader.js +64 -0
- package/react/components/Lists/BoxedList.d.ts +44 -0
- package/react/components/Lists/BoxedList.js +160 -0
- package/react/components/Lists/ContentList.d.ts +51 -0
- package/react/components/Lists/ContentList.js +110 -0
- package/react/components/Lists/SimpleList.d.ts +21 -0
- package/react/components/Lists/SimpleList.js +80 -0
- package/react/components/Lists/TableList.d.ts +64 -0
- package/react/components/Lists/TableList.js +240 -0
- package/react/components/Lists/index.d.ts +2 -0
- package/react/components/Lists/index.js +10 -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/MultiSelect.d.ts +40 -0
- package/react/components/MultiSelect.js +70 -0
- package/react/components/NavButton.d.ts +2 -1
- 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.d.ts +24 -0
- package/react/components/Navigation/QuickNavBar.js +117 -0
- package/react/components/Navigation/SideBarMenu.d.ts +21 -0
- package/react/components/Navigation/SideBarMenu.js +79 -0
- package/react/components/Navigation/SideBarTabs.d.ts +23 -0
- package/react/components/Navigation/SideBarTabs.js +88 -0
- package/react/components/Navigation/index.d.ts +3 -0
- package/react/components/Navigation/index.js +9 -0
- package/react/components/Popover.js +4 -2
- package/react/components/PropsList.js +4 -2
- package/react/components/RadioButtonGroup.d.ts +29 -0
- package/react/components/RadioButtonGroup.js +91 -0
- package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
- package/react/components/{Radio.js → RadioGroup.js} +20 -14
- package/react/components/SearchBar.d.ts +24 -0
- package/react/components/SearchBar.js +113 -0
- package/react/components/Select.d.ts +9 -2
- package/react/components/Select.js +9 -20
- package/react/components/SelectGrid.d.ts +45 -0
- package/react/components/SelectGrid.js +200 -0
- package/react/components/SelectWithTemplate.d.ts +11 -1
- package/react/components/SelectWithTemplate.js +23 -12
- package/react/components/Skeleton.d.ts +30 -0
- package/react/components/Skeleton.js +76 -0
- package/react/components/SlidingToolbar.d.ts +1 -1
- package/react/components/SlidingToolbar.js +15 -3
- package/react/components/Spinner.d.ts +11 -0
- package/react/components/Spinner.js +71 -0
- package/react/components/StrechBar.js +4 -2
- package/react/components/SubNav.d.ts +8 -1
- package/react/components/SubNav.js +28 -8
- package/react/components/Switch.d.ts +4 -1
- package/react/components/Switch.js +25 -11
- package/react/components/SwitchGroup.d.ts +1 -0
- package/react/components/SwitchGroup.js +6 -4
- package/react/components/TabCustom.d.ts +0 -1
- package/react/components/TabCustom.js +11 -7
- package/react/components/TabList.js +6 -4
- package/react/components/Tag.d.ts +3 -2
- package/react/components/Tag.js +21 -9
- package/react/components/TagInput.d.ts +0 -1
- package/react/components/TagInput.js +7 -6
- package/react/components/TagInputTest.js +13 -9
- package/react/components/Text/Heading.d.ts +15 -0
- package/react/components/Text/Heading.js +79 -0
- package/react/components/Text/Text.d.ts +15 -0
- package/react/components/Text/Text.js +67 -0
- package/react/components/Text/Time.d.ts +15 -0
- package/react/components/Text/Time.js +65 -0
- package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
- package/react/components/ThemeSelector.js +114 -0
- package/react/components/TimePicker.d.ts +11 -1
- package/react/components/TimePicker.js +14 -5
- 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 +2 -1
- package/react/components/Togglebox.js +42 -14
- package/react/components/Tooltip.d.ts +1 -0
- package/react/components/Tooltip.js +14 -10
- package/react/components/TreeSelect.d.ts +82 -0
- package/react/components/TreeSelect.js +521 -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 +28 -3
- package/react/index.js +66 -4
- package/app/styles/variables/_design-tokens-general.scss +0 -136
- package/app-typescript/components/Radio.tsx +0 -57
- package/app-typescript/components/RadioButton.tsx +0 -57
- package/dist/react/Radios.tsx +0 -391
- package/examples/pages/react/Radios.tsx +0 -391
- package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
- package/react/components/RadioButton.js +0 -65
@@ -1,8 +1,9 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import * as Components from './components/Index';
|
3
|
-
import { Checkbox,
|
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
|
-
import
|
5
|
+
import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
|
6
|
+
|
6
7
|
|
7
8
|
import dummy_items from '../dummy-data/items';
|
8
9
|
|
@@ -16,10 +17,16 @@ interface IState {
|
|
16
17
|
itemSelected1: boolean;
|
17
18
|
itemSelected2: boolean;
|
18
19
|
itemSelected3: boolean;
|
19
|
-
value1
|
20
|
-
value2
|
21
|
-
value3
|
22
|
-
value4
|
20
|
+
value1?: string;
|
21
|
+
value2?: string;
|
22
|
+
value3?: string;
|
23
|
+
value4?: string;
|
24
|
+
value5?: string;
|
25
|
+
value6?: string;
|
26
|
+
selctedTheme: string;
|
27
|
+
invalid: boolean;
|
28
|
+
date: any;
|
29
|
+
time: string;
|
23
30
|
}
|
24
31
|
|
25
32
|
export class TestGround extends React.Component<IProps, IState> {
|
@@ -30,10 +37,16 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
30
37
|
itemSelected1: false,
|
31
38
|
itemSelected2: false,
|
32
39
|
itemSelected3: false,
|
33
|
-
value1:
|
34
|
-
value2:
|
35
|
-
value3:
|
36
|
-
value4:
|
40
|
+
value1: undefined,
|
41
|
+
value2: undefined,
|
42
|
+
value3: undefined,
|
43
|
+
value4: undefined,
|
44
|
+
value5: undefined,
|
45
|
+
value6: undefined,
|
46
|
+
selctedTheme: 'light',
|
47
|
+
invalid: false,
|
48
|
+
date: '01/08/2022',
|
49
|
+
time: '16:50',
|
37
50
|
}
|
38
51
|
}
|
39
52
|
|
@@ -50,17 +63,529 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
50
63
|
<Components.Layout header='Testing Ground'>
|
51
64
|
<Components.LayoutContainer>
|
52
65
|
<Components.MainPanel>
|
66
|
+
|
67
|
+
|
68
|
+
<h3 className="docs-page__h3 sd-margin-y--0">Form test</h3>
|
69
|
+
<hr />
|
70
|
+
<div className="input-wrap">
|
71
|
+
<FormLabel invalid required={true} state='focused' text="Form Label" forId="input1" />
|
72
|
+
<IconButton size='small' icon="settings" ariaValue="Screen-reader text" onClick={()=> false} />
|
73
|
+
<InputBase placeholder='Test placeholder' boxedStyle invalid type='text' id="input1" value='' onChange={(value) => {}} />
|
74
|
+
<div className="input-wrap__message-box">
|
75
|
+
<div className="sd-input__hint">Error message</div>
|
76
|
+
</div>
|
77
|
+
<span className="sd-input__char-count">0 / 40</span>
|
78
|
+
</div>
|
79
|
+
|
80
|
+
<hr />
|
81
|
+
|
82
|
+
<div className="input-wrap input-wrap--boxed">
|
83
|
+
<FormLabel style='boxed' text="Form Label" required={true} forId="input2" />
|
84
|
+
<IconButton size='small' icon="settings" ariaValue="Screen-reader text" onClick={()=> false} />
|
85
|
+
<InputBase disabled size='medium' placeholder='Test placeholder' boxedStyle type='text' id="input2" value='' onChange={(value) => {}} />
|
86
|
+
<div className="input-wrap__message-box">
|
87
|
+
<div className="sd-input__hint">Error message</div>
|
88
|
+
</div>
|
89
|
+
<span className="sd-input__char-count">0 / 40</span>
|
90
|
+
</div>
|
91
|
+
|
92
|
+
<hr />
|
93
|
+
<hr />
|
94
|
+
|
95
|
+
<InputNew
|
96
|
+
label='test'
|
97
|
+
value=''
|
98
|
+
onChange={(value) => false}
|
99
|
+
placeholder='test'
|
100
|
+
required={true}
|
101
|
+
info='Nullam Sollicitudin'
|
102
|
+
maxLength={20}
|
103
|
+
error='Error message'
|
104
|
+
inlineLabel={true}
|
105
|
+
labelHidden={true}
|
106
|
+
type='text' />
|
107
|
+
|
108
|
+
<hr />
|
109
|
+
<div className='form__group-new'>
|
110
|
+
<Input
|
111
|
+
value=''
|
112
|
+
onChange={(value) => {}}
|
113
|
+
type='text'
|
114
|
+
label='Text input'
|
115
|
+
placeholder='Enter text'
|
116
|
+
disabled={true} />
|
117
|
+
<Input value=''
|
118
|
+
onChange={(value) => {}}
|
119
|
+
type='text'
|
120
|
+
label='Text input'
|
121
|
+
placeholder='Enter text'
|
122
|
+
disabled={true} />
|
123
|
+
<DatePicker
|
124
|
+
value={this.state.date}
|
125
|
+
onChange={(date) => {
|
126
|
+
this.setState({date});
|
127
|
+
}}
|
128
|
+
disabled={true}
|
129
|
+
dateFormat="DD-MM-YYYY"
|
130
|
+
label='Date'
|
131
|
+
info='Nullam Sollicitudin'
|
132
|
+
error='Error message'
|
133
|
+
inlineLabel={false}
|
134
|
+
shortcuts={[
|
135
|
+
{label: 'tomorrow', days: 1},
|
136
|
+
{label: 'yesterday', days: -1},
|
137
|
+
]}
|
138
|
+
/>
|
139
|
+
<TimePicker
|
140
|
+
value={this.state.time}
|
141
|
+
disabled={true}
|
142
|
+
required={true}
|
143
|
+
label='Time'
|
144
|
+
onChange={(time) => {
|
145
|
+
this.setState({time});
|
146
|
+
}}
|
147
|
+
/>
|
148
|
+
<Button text="Clear" onClick={()=> false} />
|
149
|
+
<Button text="Cancel" onClick={()=> false} />
|
150
|
+
<Button text="Save" type='primary' onClick={()=> false} />
|
151
|
+
</div>
|
152
|
+
<hr />
|
153
|
+
|
154
|
+
<FormRowNew rowLabel='My group label' inlineLabels={true}>
|
155
|
+
<Input
|
156
|
+
value=''
|
157
|
+
onChange={(value) => {}}
|
158
|
+
type='text'
|
159
|
+
label='Text input'
|
160
|
+
placeholder='Enter text'
|
161
|
+
inlineLabel={true}
|
162
|
+
labelHidden={true}
|
163
|
+
disabled={false} />
|
164
|
+
<Text size='small' align='center'>To:</Text>
|
165
|
+
<Input
|
166
|
+
value=''
|
167
|
+
onChange={(value) => {}}
|
168
|
+
type='text'
|
169
|
+
label='Text input'
|
170
|
+
placeholder='Enter text'
|
171
|
+
inlineLabel={true}
|
172
|
+
labelHidden={true}
|
173
|
+
disabled={false} />
|
174
|
+
<DatePicker
|
175
|
+
value={this.state.date}
|
176
|
+
onChange={(date) => {
|
177
|
+
this.setState({date});
|
178
|
+
}}
|
179
|
+
// disabled={true}
|
180
|
+
dateFormat="DD-MM-YYYY"
|
181
|
+
label='Date'
|
182
|
+
info='Nullam Sollicitudin'
|
183
|
+
error='Error message'
|
184
|
+
inlineLabel={true}
|
185
|
+
labelHidden={true}
|
186
|
+
shortcuts={[
|
187
|
+
{label: 'tomorrow', days: 1},
|
188
|
+
{label: 'yesterday', days: -1},
|
189
|
+
]}
|
190
|
+
/>
|
191
|
+
<TimePicker
|
192
|
+
value={this.state.time}
|
193
|
+
// disabled={true}
|
194
|
+
required={true}
|
195
|
+
inlineLabel={true}
|
196
|
+
labelHidden={true}
|
197
|
+
label='Time'
|
198
|
+
onChange={(time) => {
|
199
|
+
this.setState({time});
|
200
|
+
}}
|
201
|
+
/>
|
202
|
+
<Button text="Save" type='primary' onClick={()=> false} />
|
203
|
+
</FormRowNew>
|
204
|
+
|
205
|
+
<hr />
|
206
|
+
|
207
|
+
<FormRowNew>
|
208
|
+
<Input
|
209
|
+
value=''
|
210
|
+
onChange={(value) => {}}
|
211
|
+
type='text'
|
212
|
+
label='Text input'
|
213
|
+
placeholder='Enter text'
|
214
|
+
disabled={false} />
|
215
|
+
<Text size='small' align='center'>To:</Text>
|
216
|
+
<Input
|
217
|
+
value=''
|
218
|
+
onChange={(value) => {}}
|
219
|
+
type='text'
|
220
|
+
label='Text input'
|
221
|
+
placeholder='Enter text'
|
222
|
+
labelHidden={true}
|
223
|
+
disabled={false} />
|
224
|
+
<DatePicker
|
225
|
+
value={this.state.date}
|
226
|
+
onChange={(date) => {
|
227
|
+
this.setState({date});
|
228
|
+
}}
|
229
|
+
// disabled={true}
|
230
|
+
dateFormat="DD-MM-YYYY"
|
231
|
+
label='Date'
|
232
|
+
info='Nullam Sollicitudin'
|
233
|
+
error='Error message'
|
234
|
+
inlineLabel={false}
|
235
|
+
shortcuts={[
|
236
|
+
{label: 'tomorrow', days: 1},
|
237
|
+
{label: 'yesterday', days: -1},
|
238
|
+
]}
|
239
|
+
/>
|
240
|
+
<TimePicker
|
241
|
+
value={this.state.time}
|
242
|
+
// disabled={true}
|
243
|
+
required={true}
|
244
|
+
label='Time'
|
245
|
+
onChange={(time) => {
|
246
|
+
this.setState({time});
|
247
|
+
}}
|
248
|
+
/>
|
249
|
+
<Button text="Save" type='primary' onClick={()=> false} />
|
250
|
+
</FormRowNew>
|
251
|
+
|
252
|
+
<hr />
|
253
|
+
<h3 className="docs-page__h3 sd-margin-y--0">Table list (draggable)</h3>
|
254
|
+
<hr />
|
255
|
+
<h4 className="docs-page__h4 sd-margin-y--1">Handles visible</h4>
|
256
|
+
<ul className='table-list table-list--gap-s'>
|
257
|
+
<li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
|
258
|
+
<div className='table-list__item-border'></div>
|
259
|
+
<div className='table-list__item-content'>
|
260
|
+
<div className='table-list__item-content-block'>
|
261
|
+
<Label text='Uvod' />
|
262
|
+
<Label type='primary' text='prlg' />
|
263
|
+
</div>
|
264
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
265
|
+
<span>Handle visible. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
|
266
|
+
</div>
|
267
|
+
<div className='table-list__item-content-block'>
|
268
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
269
|
+
</div>
|
270
|
+
</div>
|
271
|
+
<div className='table-list__slide-in-actions'>
|
272
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
273
|
+
</div>
|
274
|
+
</li>
|
275
|
+
<li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
|
276
|
+
<div className='table-list__item-border'></div>
|
277
|
+
<div className='table-list__item-content'>
|
278
|
+
<div className='table-list__item-content-block'>
|
279
|
+
<Label text='Gost' />
|
280
|
+
<Label type='primary' text='prlg' />
|
281
|
+
</div>
|
282
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
283
|
+
<span>Handle visible. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
|
284
|
+
</div>
|
285
|
+
<div className='table-list__item-content-block'>
|
286
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
287
|
+
</div>
|
288
|
+
</div>
|
289
|
+
<div className='table-list__slide-in-actions'>
|
290
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
291
|
+
</div>
|
292
|
+
</li>
|
293
|
+
<li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
|
294
|
+
<div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
|
295
|
+
<div className='table-list__item-content'>
|
296
|
+
<div className='table-list__item-content-block'>
|
297
|
+
<Label text='Podatak' />
|
298
|
+
<Label type='primary' text='Gost' />
|
299
|
+
</div>
|
300
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
301
|
+
<span>Handle visible. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
|
302
|
+
</div>
|
303
|
+
<div className='table-list__item-content-block'>
|
304
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
305
|
+
</div>
|
306
|
+
</div>
|
307
|
+
<div className='table-list__slide-in-actions'>
|
308
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
309
|
+
</div>
|
310
|
+
</li>
|
311
|
+
<li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always table-list__item--selected'>
|
312
|
+
<div className='table-list__item-border'></div>
|
313
|
+
<div className='table-list__item-content'>
|
314
|
+
<div className='table-list__item-content-block'>
|
315
|
+
<Label text='Odjava' />
|
316
|
+
<Label type='warning' text='Slika' />
|
317
|
+
</div>
|
318
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
319
|
+
<span>Handle visible. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
|
320
|
+
</div>
|
321
|
+
<div className='table-list__item-content-block'>
|
322
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
323
|
+
</div>
|
324
|
+
</div>
|
325
|
+
<div className='table-list__slide-in-actions'>
|
326
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
327
|
+
</div>
|
328
|
+
</li>
|
329
|
+
</ul>
|
330
|
+
|
331
|
+
<hr />
|
332
|
+
<h4 className="docs-page__h4 sd-margin-y--1">Handles hidden</h4>
|
333
|
+
<ul className='table-list table-list--gap-s'>
|
334
|
+
<li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
|
335
|
+
<div className='table-list__item-border'></div>
|
336
|
+
<div className='table-list__item-content'>
|
337
|
+
<div className='table-list__item-content-block'>
|
338
|
+
<Label text='Uvod' />
|
339
|
+
<Label type='primary' text='prlg' />
|
340
|
+
</div>
|
341
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
342
|
+
<span>Handle hidden. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
|
343
|
+
</div>
|
344
|
+
<div className='table-list__item-content-block'>
|
345
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
346
|
+
</div>
|
347
|
+
</div>
|
348
|
+
<div className='table-list__slide-in-actions'>
|
349
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
350
|
+
</div>
|
351
|
+
</li>
|
352
|
+
<li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
|
353
|
+
<div className='table-list__item-border'></div>
|
354
|
+
<div className='table-list__item-content'>
|
355
|
+
<div className='table-list__item-content-block'>
|
356
|
+
<Label text='Gost' />
|
357
|
+
<Label type='primary' text='prlg' />
|
358
|
+
</div>
|
359
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
360
|
+
<span>Handle hidden. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
|
361
|
+
</div>
|
362
|
+
<div className='table-list__item-content-block'>
|
363
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
364
|
+
</div>
|
365
|
+
</div>
|
366
|
+
<div className='table-list__slide-in-actions'>
|
367
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
368
|
+
</div>
|
369
|
+
</li>
|
370
|
+
<li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
|
371
|
+
<div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
|
372
|
+
<div className='table-list__item-content'>
|
373
|
+
<div className='table-list__item-content-block'>
|
374
|
+
<Label text='Podatak' />
|
375
|
+
<Label type='primary' text='Gost' />
|
376
|
+
</div>
|
377
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
378
|
+
<span>Handle hidden. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
|
379
|
+
</div>
|
380
|
+
<div className='table-list__item-content-block'>
|
381
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
382
|
+
</div>
|
383
|
+
</div>
|
384
|
+
<div className='table-list__slide-in-actions'>
|
385
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
386
|
+
</div>
|
387
|
+
</li>
|
388
|
+
<li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none table-list__item--selected'>
|
389
|
+
<div className='table-list__item-border'></div>
|
390
|
+
<div className='table-list__item-content'>
|
391
|
+
<div className='table-list__item-content-block'>
|
392
|
+
<Label text='Odjava' />
|
393
|
+
<Label type='warning' text='Slika' />
|
394
|
+
</div>
|
395
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
396
|
+
<span>Handle hidden. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
|
397
|
+
</div>
|
398
|
+
<div className='table-list__item-content-block'>
|
399
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
400
|
+
</div>
|
401
|
+
</div>
|
402
|
+
<div className='table-list__slide-in-actions'>
|
403
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
404
|
+
</div>
|
405
|
+
</li>
|
406
|
+
</ul>
|
407
|
+
|
408
|
+
<hr />
|
409
|
+
<h4 className="docs-page__h4 sd-margin-y--1">Handles on hover</h4>
|
410
|
+
<ul className='table-list table-list--gap-s'>
|
411
|
+
<li className='table-list__item table-list__item--clickable table-list__item--draggable'>
|
412
|
+
<div className='table-list__item-border'></div>
|
413
|
+
<div className='table-list__item-content'>
|
414
|
+
<div className='table-list__item-content-block'>
|
415
|
+
<Label text='Uvod' />
|
416
|
+
<Label type='primary' text='prlg' />
|
417
|
+
</div>
|
418
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
419
|
+
<span>Handle on hover. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
|
420
|
+
</div>
|
421
|
+
<div className='table-list__item-content-block'>
|
422
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
423
|
+
</div>
|
424
|
+
</div>
|
425
|
+
<div className='table-list__slide-in-actions'>
|
426
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
427
|
+
</div>
|
428
|
+
</li>
|
429
|
+
<li className='table-list__item table-list__item--clickable table-list__item--draggable'>
|
430
|
+
<div className='table-list__item-border'></div>
|
431
|
+
<div className='table-list__item-content'>
|
432
|
+
<div className='table-list__item-content-block'>
|
433
|
+
<Label text='Gost' />
|
434
|
+
<Label type='primary' text='prlg' />
|
435
|
+
</div>
|
436
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
437
|
+
<span>Handle on hover. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
|
438
|
+
</div>
|
439
|
+
<div className='table-list__item-content-block'>
|
440
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
441
|
+
</div>
|
442
|
+
</div>
|
443
|
+
<div className='table-list__slide-in-actions'>
|
444
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
445
|
+
</div>
|
446
|
+
</li>
|
447
|
+
<li className='table-list__item table-list__item--clickable table-list__item--draggable'>
|
448
|
+
<div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
|
449
|
+
<div className='table-list__item-content'>
|
450
|
+
<div className='table-list__item-content-block'>
|
451
|
+
<Label text='Podatak' />
|
452
|
+
<Label type='primary' text='Gost' />
|
453
|
+
</div>
|
454
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
455
|
+
<span>Handle on hover. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
|
456
|
+
</div>
|
457
|
+
<div className='table-list__item-content-block'>
|
458
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
459
|
+
</div>
|
460
|
+
</div>
|
461
|
+
<div className='table-list__slide-in-actions'>
|
462
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
463
|
+
</div>
|
464
|
+
</li>
|
465
|
+
<li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--selected'>
|
466
|
+
<div className='table-list__item-border'></div>
|
467
|
+
<div className='table-list__item-content'>
|
468
|
+
<div className='table-list__item-content-block'>
|
469
|
+
<Label text='Odjava' />
|
470
|
+
<Label type='warning' text='Slika' />
|
471
|
+
</div>
|
472
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
473
|
+
<span>Handle on hover. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
|
474
|
+
</div>
|
475
|
+
<div className='table-list__item-content-block'>
|
476
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
477
|
+
</div>
|
478
|
+
</div>
|
479
|
+
<div className='table-list__slide-in-actions'>
|
480
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
481
|
+
</div>
|
482
|
+
</li>
|
483
|
+
</ul>
|
484
|
+
<hr />
|
485
|
+
<hr />
|
486
|
+
|
487
|
+
<h3 className="docs-page__h3 sd-margin-y--0 sd-margin-t--3">Table list with items between</h3>
|
488
|
+
<hr />
|
489
|
+
<ul className='table-list table-list--contained'>
|
490
|
+
<li className='table-list__item-container'>
|
491
|
+
<div className='table-list__item table-list__item--clickable table-list__item--draggable'>
|
492
|
+
<div className='table-list__item-content'>
|
493
|
+
<div className='table-list__item-content-block'>
|
494
|
+
<Label style='translucent' text='aacc' />
|
495
|
+
<Label style='translucent' type='primary' text='prlg' />
|
496
|
+
</div>
|
497
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
498
|
+
<span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
|
499
|
+
</div>
|
500
|
+
<div className='table-list__item-content-block'>
|
501
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
502
|
+
</div>
|
503
|
+
</div>
|
504
|
+
<div className='table-list__slide-in-actions'>
|
505
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
506
|
+
</div>
|
507
|
+
</div>
|
508
|
+
|
509
|
+
<div className='table-list__add-bar-container'>
|
510
|
+
<Tooltip text='Add item' flow='top' appendToBody={true}>
|
511
|
+
<div className='table-list__add-bar'>
|
512
|
+
<Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
513
|
+
</div>
|
514
|
+
</Tooltip>
|
515
|
+
</div>
|
516
|
+
</li>
|
517
|
+
|
518
|
+
<li className='table-list__item-container'>
|
519
|
+
<div className='table-list__item table-list__item--clickable table-list__item--draggable'>
|
520
|
+
<div className='table-list__item-content'>
|
521
|
+
<div className='table-list__item-content-block'>
|
522
|
+
<Label style='translucent' type='warning' text='pokr' />
|
523
|
+
<Label style='translucent' text='slika' />
|
524
|
+
</div>
|
525
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
526
|
+
<span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
|
527
|
+
</div>
|
528
|
+
<div className='table-list__item-content-block'>
|
529
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
530
|
+
</div>
|
531
|
+
</div>
|
532
|
+
<div className='table-list__slide-in-actions'>
|
533
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
534
|
+
</div>
|
535
|
+
</div>
|
536
|
+
|
537
|
+
<div className='table-list__add-bar-container'>
|
538
|
+
<Tooltip text='Add item' flow='top' appendToBody={true}>
|
539
|
+
<div className='table-list__add-bar'>
|
540
|
+
<Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
541
|
+
</div>
|
542
|
+
</Tooltip>
|
543
|
+
</div>
|
544
|
+
</li>
|
545
|
+
|
546
|
+
<li className='table-list__item-container'>
|
547
|
+
<div className='table-list__item table-list__item--clickable table-list__item--draggable'>
|
548
|
+
<div className='table-list__item-content'>
|
549
|
+
<div className='table-list__item-content-block'>
|
550
|
+
<Label style='translucent' type='warning' text='pokr' />
|
551
|
+
<Label style='translucent' text='slika' />
|
552
|
+
</div>
|
553
|
+
<div className='table-list__item-content-block table-list__item-content-block--center'>
|
554
|
+
<span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
|
555
|
+
</div>
|
556
|
+
<div className='table-list__item-content-block'>
|
557
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
558
|
+
</div>
|
559
|
+
</div>
|
560
|
+
<div className='table-list__slide-in-actions'>
|
561
|
+
<IconButton icon='pencil' size='small' ariaValue='More actions' onClick={()=> false} />
|
562
|
+
<IconButton icon='trash' size='small' ariaValue='More actions' onClick={()=> false} />
|
563
|
+
</div>
|
564
|
+
</div>
|
565
|
+
|
566
|
+
<div className='table-list__add-bar-container'>
|
567
|
+
<Tooltip text='Add item' flow='top' appendToBody={true}>
|
568
|
+
<div className='table-list__add-bar'>
|
569
|
+
<Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
570
|
+
</div>
|
571
|
+
</Tooltip>
|
572
|
+
</div>
|
573
|
+
</li>
|
574
|
+
</ul>
|
575
|
+
|
576
|
+
<hr /><hr />
|
577
|
+
|
53
578
|
<h3 className="docs-page__h3 sd-margin-y--0">Checkbox</h3>
|
54
579
|
<hr />
|
55
580
|
<div className="sd-check__group-new sd-check__group-new--vertical">
|
56
581
|
<Checkbox label={{text: 'Label side not defined'}} onChange={(value) => console.log('value changed', value)} />
|
57
|
-
<Checkbox label={{text: 'Defined label side - right', side: '
|
582
|
+
<Checkbox label={{text: 'Defined label side - right', side: 'end'}} onChange={(value) => console.log('value changed', value)} />
|
58
583
|
<Checkbox label={{text: 'This checkbox is disabled'}} onChange={(value) => console.log('value changed', value)} disabled={true}/>
|
59
584
|
</div>
|
60
585
|
|
61
586
|
<hr />
|
62
587
|
|
63
|
-
<Checkbox label={{text: 'Defined label side - left', side: '
|
588
|
+
<Checkbox label={{text: 'Defined label side - left', side: 'start'}} onChange={(value) => console.log('value changed', value)} />
|
64
589
|
|
65
590
|
<hr />
|
66
591
|
|
@@ -68,38 +593,74 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
68
593
|
|
69
594
|
<hr />
|
70
595
|
|
71
|
-
<div className="sd-
|
596
|
+
<div className="sd-check-button__group sd-check-button__group--start">
|
72
597
|
<CheckboxButton label={{text: 'CheckboxButton rules!'}} onChange={(value) => console.log('value changed', value)} />
|
73
598
|
<CheckboxButton label={{text: 'CheckboxButton rules again!', icon: 'th'}} onChange={(value) => console.log('value changed', value)} />
|
74
599
|
<CheckboxButton label={{text: 'Hell yeah!'}} onChange={(value) => console.log('value changed', value)} />
|
75
600
|
</div>
|
76
601
|
|
77
602
|
<hr /><hr />
|
603
|
+
<h3 className="docs-page__h3 sd-margin-y--0 sd-margin-b--3">Duration input</h3>
|
604
|
+
|
605
|
+
|
606
|
+
<div className="sd-input">
|
607
|
+
<label className="sd-input__label" id="duration01">Input label</label>
|
608
|
+
<div className="sd-input__duration-input" id="id06" aria-describedby="duration01">
|
609
|
+
<input type="number" className="" placeholder='00'/>
|
610
|
+
<span className="sd-input__suffix">h</span>
|
611
|
+
<input type="number" className="" placeholder='00'/>
|
612
|
+
<span className="sd-input__suffix">m</span>
|
613
|
+
<input type="number" className="" placeholder='00'/>
|
614
|
+
<span className="sd-input__suffix">s</span>
|
615
|
+
</div>
|
616
|
+
<div className="sd-input__char-count">0 / 30</div>
|
617
|
+
<div className="sd-input__message-box">
|
618
|
+
<div className="sd-input__hint">This is some hint message</div>
|
619
|
+
</div>
|
620
|
+
</div>
|
621
|
+
|
622
|
+
<h3 className="docs-page__h3 sd-margin-y--0 sd-margin-b--3">testiramt</h3>
|
623
|
+
|
624
|
+
|
625
|
+
<div className="sd-input">
|
626
|
+
<label className="sd-input__label" id="duration01">Input label</label>
|
627
|
+
{/* temp */}
|
628
|
+
<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>
|
629
|
+
{/* temp */}
|
630
|
+
|
631
|
+
|
632
|
+
<div className="sd-input__char-count">0 / 30</div>
|
633
|
+
<div className="sd-input__message-box">
|
634
|
+
<div className="sd-input__hint">This is some hint message</div>
|
635
|
+
</div>
|
636
|
+
</div>
|
637
|
+
|
638
|
+
<hr />
|
78
639
|
|
79
640
|
<h3 className="docs-page__h3 sd-margin-t--2 sd-margin-b--0">Radio</h3>
|
80
641
|
<hr />
|
81
642
|
<div className="sd-check__group-new">
|
82
|
-
<
|
83
|
-
{label: "Radio 1", value: "
|
84
|
-
{label: "Radio 2", value: "
|
85
|
-
{label: "Radio 3", value: "
|
86
|
-
]} onChange={(value) =>
|
643
|
+
<RadioGroup value={this.state.value2} options={[
|
644
|
+
{label: "Radio 1", value: "somevalue1"},
|
645
|
+
{label: "Radio 2", value: "somevalue2"},
|
646
|
+
{label: "Radio 3", value: "somevalue3"},
|
647
|
+
]} onChange={(value) => this.setState(() => ({ value2: value }))} />
|
87
648
|
</div>
|
88
649
|
|
89
650
|
<hr />
|
90
651
|
|
91
652
|
<div className="sd-check__group-new sd-check-button__group--left">
|
92
|
-
<
|
93
|
-
{label: "RadioButton with an icon", value: "
|
94
|
-
{label: "RadioButton with no visible text, only an icon", value: "
|
95
|
-
{label: "Normal RadioButton", value: "
|
96
|
-
]} onChange={(value) =>
|
653
|
+
<RadioButtonGroup value={this.state.value3} options={[
|
654
|
+
{label: "RadioButton with an icon", value: "somevalue4", icon: "th-list"},
|
655
|
+
{label: "RadioButton with no visible text, only an icon", value: "somevalue5", icon: "th", labelHidden: true},
|
656
|
+
{label: "Normal RadioButton", value: "somevalue6"},
|
657
|
+
]} onChange={(value) => this.setState(() => ({ value3: value }))} />
|
97
658
|
</div>
|
98
659
|
|
99
660
|
|
100
661
|
<hr />
|
101
662
|
|
102
|
-
<Carousel></Carousel>
|
663
|
+
{/* <Carousel></Carousel> */}
|
103
664
|
|
104
665
|
<hr />
|
105
666
|
<div className="sd-thumb-carousel" data-theme="dark-ui">
|
@@ -156,6 +717,52 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
156
717
|
parturient montes, nascetur ridiculus mus.
|
157
718
|
</div>
|
158
719
|
</div>
|
720
|
+
<hr />
|
721
|
+
<div className="button-group button-group--comfort">
|
722
|
+
<div className="color-swatch colour-test--1"></div>
|
723
|
+
<div className="color-swatch colour-test--2"></div>
|
724
|
+
<Spinner />
|
725
|
+
</div>
|
726
|
+
|
727
|
+
<hr />
|
728
|
+
<Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
|
729
|
+
<ThemeSelector size='small' options={[
|
730
|
+
{label: 'Light', value: 'light', theme: 'light'},
|
731
|
+
{label: 'Dark', value: 'dark', theme: 'dark'},
|
732
|
+
{label: 'High Contrast', value: 'high-contrast', theme: 'contrast-light', disabled: true},
|
733
|
+
]} onChange={($event)=>{this.setState({selctedTheme: $event})}} value={this.state.selctedTheme} />
|
734
|
+
</Container>
|
735
|
+
<hr />
|
736
|
+
<Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
|
737
|
+
<Button text="Exit" type='primary' onClick={()=> false} />
|
738
|
+
<Divider />
|
739
|
+
<Button text="Cancel" onClick={()=> false} />
|
740
|
+
<Divider />
|
741
|
+
<Button text="Save" type='primary' onClick={()=> false} />
|
742
|
+
</Container>
|
743
|
+
<hr />
|
744
|
+
<Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
|
745
|
+
|
746
|
+
<InputWrapper
|
747
|
+
label="Label"
|
748
|
+
invalid={false}>
|
749
|
+
<input type='text' />
|
750
|
+
</InputWrapper>
|
751
|
+
</Container>
|
752
|
+
<hr />
|
753
|
+
<Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
|
754
|
+
<div className='sd-dropzone__drop-target'>
|
755
|
+
<div className='sd-dropzone__target-border'></div>
|
756
|
+
<figure className='sd-dropzone__icon'>
|
757
|
+
<Icon name='upload-alt' size='big' />
|
758
|
+
</figure>
|
759
|
+
<h4 className='sd-dropzone__heading'>
|
760
|
+
Upload files
|
761
|
+
</h4>
|
762
|
+
<p className='sd-dropzone__description'>Drag one or more files here to upload them, or just click the button below.</p>
|
763
|
+
<button className='btn btn--hollow sd-dropzone__action'>Attach files</button>
|
764
|
+
</div>
|
765
|
+
</Container>
|
159
766
|
</Components.MainPanel>
|
160
767
|
{/* MAIN CONTENT (Monitoring) */}
|
161
768
|
</Components.LayoutContainer>
|