superdesk-ui-framework 3.0.1-beta.1 → 3.0.1-beta.11
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 +221 -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 +490 -208
- 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 +81672 -64212
- 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 +270 -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 +49460 -26118
- package/dist/superdesk-ui.bundle.js +75427 -59872
- package/dist/vendor.bundle.js +25029 -25029
- 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 +270 -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 +80 -0
- package/react/components/TreeSelect.js +494 -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
@@ -0,0 +1,71 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
|
3
|
+
import * as Markup from '../../js/react';
|
4
|
+
|
5
|
+
import { SubNav, NavButton, ButtonGroup, Tooltip, CreateButton, PropsList, Prop } from '../../../app-typescript';
|
6
|
+
|
7
|
+
export default class CreateButtonDoc extends React.Component {
|
8
|
+
render() {
|
9
|
+
return (
|
10
|
+
<section className='docs-page__container'>
|
11
|
+
<h2 className='docs-page__h2'>Navigation button</h2>
|
12
|
+
<p></p>
|
13
|
+
<Markup.ReactMarkupCodePreview>{`
|
14
|
+
<NavButton type='default' icon='home' onClick={()=> false} />
|
15
|
+
`}
|
16
|
+
</Markup.ReactMarkupCodePreview>
|
17
|
+
|
18
|
+
<Markup.ReactMarkup>
|
19
|
+
<Markup.ReactMarkupPreview>
|
20
|
+
<SubNav zIndex={2}>
|
21
|
+
<ButtonGroup align='start' spaces='no-space'>
|
22
|
+
<Tooltip text='Filters' flow='right'>
|
23
|
+
<NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
|
24
|
+
</Tooltip>
|
25
|
+
<NavButton icon='search' text="Search" onClick={() => false} />
|
26
|
+
</ButtonGroup>
|
27
|
+
<ButtonGroup align='end' spaces='no-space'>
|
28
|
+
<NavButton icon='list-plus' text="Add to list" onClick={() => false} />
|
29
|
+
<Tooltip text='More actions' flow='down'>
|
30
|
+
<NavButton icon='dots-vertical' text="More actions" onClick={() => false} />
|
31
|
+
</Tooltip>
|
32
|
+
<CreateButton ariaValue='Create' onClick={() => false} />
|
33
|
+
</ButtonGroup>
|
34
|
+
</SubNav>
|
35
|
+
</Markup.ReactMarkupPreview>
|
36
|
+
<Markup.ReactMarkupCode>{`
|
37
|
+
<SubNav zIndex={2}>
|
38
|
+
<ButtonGroup align='start' spaces='no-space'>
|
39
|
+
<Tooltip text='Filters' flow='right'>
|
40
|
+
<NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
|
41
|
+
</Tooltip>
|
42
|
+
<NavButton icon='search' text="Search" onClick={() => false} />
|
43
|
+
</ButtonGroup>
|
44
|
+
<ButtonGroup align='end' spaces='no-space'>
|
45
|
+
<NavButton icon='list-plus' text="Add to list" onClick={() => false} />
|
46
|
+
<Tooltip text='More actions' flow='down'>
|
47
|
+
<NavButton icon='dots-vertical' text="More actions" onClick={() => false} />
|
48
|
+
</Tooltip>
|
49
|
+
<Tooltip text='Send to / Publish' flow='left'>
|
50
|
+
<NavButton icon='expand-thin' text='Send to / Publish' type='highlight' onClick={() => false} />
|
51
|
+
</Tooltip>
|
52
|
+
</ButtonGroup>
|
53
|
+
</SubNav>
|
54
|
+
`}
|
55
|
+
</Markup.ReactMarkupCode>
|
56
|
+
</Markup.ReactMarkup>
|
57
|
+
|
58
|
+
<h3 className="docs-page__h3">Props</h3>
|
59
|
+
<PropsList>
|
60
|
+
<Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.' />
|
61
|
+
<Prop name='text' isRequired={false} type='string' default='/' description='Defines the value for aria-label, for screen-readers accessibility.' />
|
62
|
+
<Prop name='iconSize' isRequired={false} type='small | big' default='small' description='Specifies a small or big button' />
|
63
|
+
<Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).' />
|
64
|
+
<Prop name='state' isRequired={false} type='normal | active' default='normal' description='Defines the optional state of the button (e.g. active)' />
|
65
|
+
<Prop name='theme' isRequired={false} type='light | dark' default='light' description='Styles nav button for diffrent background.' />
|
66
|
+
<Prop name='value' isRequired={false} type='button | submit | reset' default='button' description='Specifies a value of nav button' />
|
67
|
+
</PropsList>
|
68
|
+
</section>
|
69
|
+
);
|
70
|
+
}
|
71
|
+
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
|
3
3
|
import * as Markup from '../../js/react';
|
4
|
-
import {DatePicker, PropsList, Prop} from '../../../app-typescript';
|
4
|
+
import {DatePicker, PropsList, Prop, DatePickerISO} from '../../../app-typescript';
|
5
5
|
|
6
6
|
class DatePickerExample extends React.PureComponent<{}, {date: Date}> {
|
7
7
|
constructor(props) {
|
@@ -14,11 +14,16 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date}> {
|
|
14
14
|
render() {
|
15
15
|
return (
|
16
16
|
<DatePicker
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
17
|
+
value={this.state.date}
|
18
|
+
dateFormat="YYYY-MM-DD"
|
19
|
+
onChange={(date) => {
|
20
|
+
this.setState({date});
|
21
|
+
}}
|
22
|
+
required
|
23
|
+
tabindex={1}
|
24
|
+
label={'This is Label'}
|
25
|
+
info={'This is info'}
|
26
|
+
error={'This is error'}
|
22
27
|
/>
|
23
28
|
);
|
24
29
|
}
|
@@ -43,6 +48,11 @@ export default class DatePickerDoc extends React.Component {
|
|
43
48
|
onChange={(date) => {
|
44
49
|
this.setState({date});
|
45
50
|
}}
|
51
|
+
required
|
52
|
+
tabindex={1}
|
53
|
+
label={'This is Label'}
|
54
|
+
info={'This is info'}
|
55
|
+
error={'This is error'}
|
46
56
|
/>
|
47
57
|
);
|
48
58
|
}
|
@@ -53,6 +63,21 @@ export default class DatePickerDoc extends React.Component {
|
|
53
63
|
<div className='docs-page__content-row'>
|
54
64
|
<DatePickerExample />
|
55
65
|
</div>
|
66
|
+
|
67
|
+
<p className="docs-page__paragraph">// DatePickerISO</p>
|
68
|
+
<div className='docs-page__content-row'>
|
69
|
+
<DatePickerISO
|
70
|
+
value={'2019-01-01'}
|
71
|
+
dateFormat="YYYY-MM-DD"
|
72
|
+
onChange={(date) => {
|
73
|
+
this.setState({date});
|
74
|
+
}}
|
75
|
+
tabindex={1}
|
76
|
+
label={'This is Label'}
|
77
|
+
info={'This is info'}
|
78
|
+
error={'This is error'}
|
79
|
+
/>
|
80
|
+
</div>
|
56
81
|
</Markup.ReactMarkupPreview>
|
57
82
|
<Markup.ReactMarkupCode>{`
|
58
83
|
<DatePicker
|
package/dist/react/DropZone.tsx
CHANGED
@@ -29,19 +29,27 @@ export default class DropZoneDoc extends React.Component<IProps> {
|
|
29
29
|
<Markup.ReactMarkupPreview>
|
30
30
|
<p className="docs-page__paragraph">// Basic</p>
|
31
31
|
<div className='docs-page__content-row'>
|
32
|
-
<DropZone
|
33
|
-
|
32
|
+
<DropZone text="Drag one or more files here to upload them, or just click on the field.">
|
34
33
|
</DropZone>
|
35
34
|
</div>
|
36
35
|
|
37
|
-
<p className="docs-page__paragraph">//
|
38
|
-
|
39
|
-
|
40
|
-
|
36
|
+
<p className="docs-page__paragraph">// With heading</p>
|
41
37
|
<div className='docs-page__content-row'>
|
38
|
+
<DropZone heading="Nothing here yet" text="Drag one or more files here to upload them, or just click on the field.">
|
39
|
+
</DropZone>
|
40
|
+
</div>
|
42
41
|
|
42
|
+
<p className="docs-page__paragraph">// With icon</p>
|
43
|
+
<div className='docs-page__content-row'>
|
44
|
+
<DropZone icon={true} text="Drag one or more files here to upload them, or just click on the field.">
|
45
|
+
</DropZone>
|
43
46
|
</div>
|
44
47
|
|
48
|
+
<p className="docs-page__paragraph">// With heading & icon</p>
|
49
|
+
<div className='docs-page__content-row'>
|
50
|
+
<DropZone icon={true} heading="Nothing here yet" text="Drag one or more files here to upload them, or just click on the field.">
|
51
|
+
</DropZone>
|
52
|
+
</div>
|
45
53
|
|
46
54
|
</Markup.ReactMarkupPreview>
|
47
55
|
<Markup.ReactMarkupCode>{`
|
@@ -0,0 +1,104 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
|
3
|
+
import * as Markup from '../../js/react';
|
4
|
+
|
5
|
+
import { Input, Select, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
|
6
|
+
import { DurationInput } from '../../../app-typescript/components/DurationInput';
|
7
|
+
|
8
|
+
interface IState {
|
9
|
+
inlineLabel: boolean;
|
10
|
+
required: boolean;
|
11
|
+
disabled: boolean;
|
12
|
+
invalid: boolean;
|
13
|
+
}
|
14
|
+
|
15
|
+
export default class DurationInputDoc extends React.Component<{}, IState> {
|
16
|
+
constructor(props) {
|
17
|
+
super(props);
|
18
|
+
this.state = {
|
19
|
+
inlineLabel: false,
|
20
|
+
required: true,
|
21
|
+
disabled: false,
|
22
|
+
invalid: false,
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
render() {
|
27
|
+
return (
|
28
|
+
<section className='docs-page__container'>
|
29
|
+
<h2 className='docs-page__h2'>Duration Input</h2>
|
30
|
+
<Markup.ReactMarkupCodePreview>{`
|
31
|
+
<DurationInput
|
32
|
+
label='Label'
|
33
|
+
info='info message'
|
34
|
+
disabled={this.state.disabled}
|
35
|
+
required={this.state.required}
|
36
|
+
invalid={this.state.invalid}
|
37
|
+
inlineLabel={this.state.inlineLabel}
|
38
|
+
onChange={(e) => {
|
39
|
+
console.log(e)
|
40
|
+
}}
|
41
|
+
/>
|
42
|
+
`}
|
43
|
+
</Markup.ReactMarkupCodePreview>
|
44
|
+
<p className='docs-page__paragraph'></p>
|
45
|
+
<Markup.ReactMarkup>
|
46
|
+
<Markup.ReactMarkupPreview>
|
47
|
+
<div className='docs-page__content-row docs-page__content-row--no-margin'>
|
48
|
+
<div className='form__row'>
|
49
|
+
<CheckGroup>
|
50
|
+
<Checkbox checked={this.state.required} label={{text:'Required input'}} onChange={(value) => {this.setState({required: value})}} />
|
51
|
+
<Checkbox checked={this.state.disabled} label={{text:'Disabled input'}} onChange={(value) => {this.setState({disabled: value})}} />
|
52
|
+
<Checkbox checked={this.state.invalid} label={{text:'Invalid input'}} onChange={(value) => {this.setState({invalid: value})}} />
|
53
|
+
<Checkbox checked={this.state.inlineLabel} label={{text:'Label positioned inline'}} onChange={(value) => {this.setState({inlineLabel: value})}} />
|
54
|
+
</CheckGroup>
|
55
|
+
</div>
|
56
|
+
|
57
|
+
<div className='form__row'>
|
58
|
+
<DurationInput
|
59
|
+
label='Label'
|
60
|
+
info='info message'
|
61
|
+
disabled={this.state.disabled}
|
62
|
+
required={this.state.required}
|
63
|
+
invalid={this.state.invalid}
|
64
|
+
inlineLabel={this.state.inlineLabel}
|
65
|
+
onChange={(e) => {
|
66
|
+
console.log(e)
|
67
|
+
}}
|
68
|
+
/>
|
69
|
+
</div>
|
70
|
+
</div>
|
71
|
+
|
72
|
+
</Markup.ReactMarkupPreview>
|
73
|
+
<Markup.ReactMarkupCode>{`
|
74
|
+
<DurationInput
|
75
|
+
label='Label'
|
76
|
+
info='info message'
|
77
|
+
disabled={this.state.disabled}
|
78
|
+
required={this.state.required}
|
79
|
+
invalid={this.state.invalid}
|
80
|
+
inlineLabel={this.state.inlineLabel}
|
81
|
+
onChange={(e) => {
|
82
|
+
console.log(e)
|
83
|
+
}}
|
84
|
+
/>
|
85
|
+
`}</Markup.ReactMarkupCode>
|
86
|
+
</Markup.ReactMarkup>
|
87
|
+
|
88
|
+
<h3 className='docs-page__h3'>Props</h3>
|
89
|
+
<PropsList>
|
90
|
+
<Prop name='hours' isRequired={false} type='number' default='00' description='Hours value'/>
|
91
|
+
<Prop name='minutes' isRequired={false} type='number' default='00' description='Minutes value'/>
|
92
|
+
<Prop name='seconds' isRequired={false} type='number' default='00' description='Seconds value'/>
|
93
|
+
<Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
|
94
|
+
<Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
|
95
|
+
<Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
|
96
|
+
<Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
|
97
|
+
<Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
|
98
|
+
<Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
|
99
|
+
<Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
|
100
|
+
</PropsList>
|
101
|
+
</section>
|
102
|
+
)
|
103
|
+
}
|
104
|
+
}
|
@@ -46,9 +46,9 @@ export default class IconButtonDoc extends React.Component {
|
|
46
46
|
<p className="docs-page__paragraph--small">The 'outlineWhite' syle forces a white icon and outline. It can be used on dark overlays for example.</p>
|
47
47
|
<div style={{background: 'hsla(214, 13%, 12%, 1)'}} className="sd-container sd-container--flex sd-container--gap-large sd-radius--medium sd-shadow--z2 sd-padding--3">
|
48
48
|
<ButtonGroup align='center' spaces='loose'>
|
49
|
-
<IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='
|
50
|
-
<IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='
|
51
|
-
<IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='
|
49
|
+
<IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Edit metadata' onClick={()=> false} />
|
50
|
+
<IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Edit image' onClick={()=> false} />
|
51
|
+
<IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Edit crops' onClick={()=> false} />
|
52
52
|
</ButtonGroup>
|
53
53
|
</div>
|
54
54
|
|
@@ -74,9 +74,9 @@ export default class IconButtonDoc extends React.Component {
|
|
74
74
|
|
75
75
|
// Xtra large, outlineWhite style
|
76
76
|
<ButtonGroup align='center' spaces='loose'>
|
77
|
-
<IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='
|
78
|
-
<IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='
|
79
|
-
<IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='
|
77
|
+
<IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Edit metadata' onClick={()=> false} />
|
78
|
+
<IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Edit image' onClick={()=> false} />
|
79
|
+
<IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Edit crops' onClick={()=> false} />
|
80
80
|
</ButtonGroup>
|
81
81
|
`}
|
82
82
|
</Markup.ReactMarkupCode>
|
@@ -27,12 +27,34 @@ export default class IconLabelDoc extends React.Component {
|
|
27
27
|
<IconLabel text='Label sd-green' icon='video' type='sd-green' />
|
28
28
|
|
29
29
|
<p className="docs-page__paragraph">// Translucent</p>
|
30
|
-
<IconLabel style='translucent' text='
|
31
|
-
<IconLabel style='translucent' text='
|
30
|
+
<IconLabel innerLabel='Start:' style='translucent' text='00:45' type='success' icon='time' />
|
31
|
+
<IconLabel innerLabel='end:' style='translucent' text='00:30' type='warning' icon='time' />
|
32
32
|
<IconLabel style='translucent' text='Label alert' type='alert' icon='time' />
|
33
33
|
<IconLabel style='translucent' text='Label highlight' type='highlight' icon='calendar' />
|
34
34
|
<IconLabel style='translucent' text='Label sd-green' type='sd-green' icon='calendar' />
|
35
35
|
<IconLabel style='translucent' text='Default label' icon='bell' />
|
36
|
+
<br />
|
37
|
+
<IconLabel innerLabel='Start:' style='translucent' text='00:45' type='success'/>
|
38
|
+
<IconLabel innerLabel='end:' style='translucent' text='00:30' type='warning'/>
|
39
|
+
<IconLabel style='translucent' text='Label alert' type='alert' />
|
40
|
+
|
41
|
+
<p className="docs-page__paragraph">// Translucent & Large</p>
|
42
|
+
<IconLabel innerLabel='Start:' size='large' style='translucent' text='00:45' type='success' icon='time' />
|
43
|
+
<IconLabel innerLabel='Start:' size='large' style='translucent' text='00:55' type='warning' icon='time' />
|
44
|
+
<IconLabel innerLabel='Start:' size='large' style='translucent' text='00:15' type='alert' icon='time' />
|
45
|
+
<br />
|
46
|
+
<IconLabel innerLabel='Start:' size='large' style='translucent' text='18:30' type='success' />
|
47
|
+
<IconLabel innerLabel='End:' size='large' style='translucent' text='20:30' type='highlight' />
|
48
|
+
<IconLabel innerLabel='Duration:' size='large' style='translucent' text='00:30' type='primary' />
|
49
|
+
|
50
|
+
<p className="docs-page__paragraph">// Translucent & Small</p>
|
51
|
+
<IconLabel innerLabel='Start:' size='small' style='translucent' text='00:45' type='success' icon='time' />
|
52
|
+
<IconLabel innerLabel='Start:' size='small' style='translucent' text='00:55' type='warning' icon='time' />
|
53
|
+
<IconLabel innerLabel='Start:' size='small' style='translucent' text='00:15' type='alert' icon='time' />
|
54
|
+
<br />
|
55
|
+
<IconLabel innerLabel='Start:' size='small' style='translucent' text='18:30' type='success' />
|
56
|
+
<IconLabel innerLabel='End:' size='small' style='translucent' text='20:30' type='highlight' />
|
57
|
+
<IconLabel innerLabel='Duration:' size='small' style='translucent' text='00:30' type='primary' />
|
36
58
|
</div>
|
37
59
|
|
38
60
|
</Markup.ReactMarkupPreview>
|
package/dist/react/Index.tsx
CHANGED
@@ -49,17 +49,22 @@ import SelectGridDocs from './SelectGrid';
|
|
49
49
|
import IconPickerDocs from "./IconPicker";
|
50
50
|
import SimpleListDoc from "./SimpleList";
|
51
51
|
import BoxedListDoc from "./BoxedList";
|
52
|
+
import TableListDoc from "./TableList";
|
53
|
+
import ContentListDoc from "./ContentList";
|
52
54
|
import HeadingDoc from "./Heading";
|
53
55
|
import TextDoc from "./Text";
|
54
56
|
import ContainerDoc from './Container';
|
55
57
|
import DropZoneDoc from './DropZone';
|
58
|
+
import CreateButtonDoc from './CreateButton';
|
56
59
|
|
57
60
|
import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
|
58
61
|
import { SelectWithTemplateDocs } from './SelectWithTemplate';
|
59
62
|
import { MultiselectDocs } from './MultiSelect';
|
60
63
|
import { TreeSelectDocs } from './TreeSelect';
|
64
|
+
import DurationInputDoc from './DurationInput';
|
61
65
|
import { PopoverDoc } from './Popover';
|
62
66
|
import { MenuDocs } from './Menu';
|
67
|
+
import {WithSizeObserverDocs} from './WithSizeObserver';
|
63
68
|
|
64
69
|
const pages = {
|
65
70
|
basicComponents: {
|
@@ -189,6 +194,12 @@ const pages = {
|
|
189
194
|
'boxed-list': {
|
190
195
|
name: 'Boxed list'
|
191
196
|
},
|
197
|
+
'table-list': {
|
198
|
+
name: 'Table list'
|
199
|
+
},
|
200
|
+
'content-list': {
|
201
|
+
name: 'Content list'
|
202
|
+
},
|
192
203
|
}
|
193
204
|
},
|
194
205
|
formComponents: {
|
@@ -212,6 +223,9 @@ const pages = {
|
|
212
223
|
'select-with-template': {
|
213
224
|
name: 'Select with template',
|
214
225
|
},
|
226
|
+
'with-size-observer': {
|
227
|
+
name: 'With size observer',
|
228
|
+
},
|
215
229
|
'multiselect': {
|
216
230
|
name: 'MultiSelect',
|
217
231
|
},
|
@@ -227,6 +241,9 @@ const pages = {
|
|
227
241
|
'icon-picker': {
|
228
242
|
name: 'Icon Picker',
|
229
243
|
},
|
244
|
+
'duration-input': {
|
245
|
+
name: 'Duration Input',
|
246
|
+
},
|
230
247
|
'switch': {
|
231
248
|
name: 'Switch'
|
232
249
|
},
|
@@ -239,6 +256,9 @@ const pages = {
|
|
239
256
|
'dropzone': {
|
240
257
|
name: 'DropZone'
|
241
258
|
},
|
259
|
+
'create-button': {
|
260
|
+
name: 'CreateButton'
|
261
|
+
},
|
242
262
|
}
|
243
263
|
},
|
244
264
|
generalComponents: {
|
@@ -318,8 +338,10 @@ class ReactDoc extends React.Component<IProps, IState> {
|
|
318
338
|
<Route path="/react/autocomplete" component={AutocompleteDoc} />
|
319
339
|
<Route path="/react/select" component={SelectsDoc} />
|
320
340
|
<Route path="/react/select-with-template" component={SelectWithTemplateDocs} />
|
341
|
+
<Route path="/react/with-size-observer" component={WithSizeObserverDocs} />
|
321
342
|
<Route path="/react/multiselect" component={MultiselectDocs} />
|
322
343
|
<Route path="/react/treeselect" component={TreeSelectDocs} />
|
344
|
+
<Route path="/react/duration-input" component={DurationInputDoc} />
|
323
345
|
<Route path="/react/popover" component={PopoverDoc} />
|
324
346
|
<Route path="/react/date-picker" component={DatePickerDoc} />
|
325
347
|
<Route path="/react/time-picker" component={TimePickerDoc} />
|
@@ -350,10 +372,13 @@ class ReactDoc extends React.Component<IProps, IState> {
|
|
350
372
|
<Route path="/react/icon-picker" component={IconPickerDocs} />
|
351
373
|
<Route path="/react/simple-list" component={SimpleListDoc} />
|
352
374
|
<Route path="/react/boxed-list" component={BoxedListDoc} />
|
375
|
+
<Route path="/react/table-list" component={TableListDoc} />
|
376
|
+
<Route path="/react/content-list" component={ContentListDoc} />
|
353
377
|
<Route path="/react/heading" component={HeadingDoc} />
|
354
378
|
<Route path="/react/text" component={TextDoc} />
|
355
379
|
<Route path="/react/container" component={ContainerDoc} />
|
356
380
|
<Route path="/react/dropzone" component={DropZoneDoc} />
|
381
|
+
<Route path="/react/create-button" component={CreateButtonDoc} />
|
357
382
|
<Route path="/" component={ReactDefault} />
|
358
383
|
</Switch>
|
359
384
|
</main>
|