superdesk-ui-framework 3.0.0-beta.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.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 +16 -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 +352 -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 +10 -9
- package/app/styles/_mixins.scss +13 -3
- package/app/styles/_modals.scss +11 -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 +16 -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-pagination.scss +41 -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 +211 -80
- 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 +110 -15
- 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 +74 -9
- package/app/styles/primereact/_pr-dialog.scss +48 -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 +49 -499
- package/app/styles/variables/_dimensions.scss +85 -1
- package/app/styles/variables/_form-elements.scss +0 -2
- package/app/template/search-handler.html +2 -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 +79 -41
- 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 +64 -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 +25 -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 +134 -0
- package/app-typescript/components/Lists/SimpleList.tsx +54 -0
- package/app-typescript/components/Lists/TableList.tsx +414 -0
- package/app-typescript/components/Lists/index.tsx +2 -0
- package/app-typescript/components/Menu.tsx +33 -9
- package/app-typescript/components/Modal.tsx +35 -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 +94 -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/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/{react → app-typescript/dist}/components/Radio.d.ts +7 -8
- package/{react → app-typescript/dist}/components/RadioButton.d.ts +0 -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 +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 +8955 -1617
- package/dist/examples.bundle.js +100795 -72607
- 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 +658 -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 +472 -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 +659 -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 +81 -8
- 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 +161 -28
- 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 +16 -7
- package/dist/sd_icons.ttf +0 -0
- package/dist/sd_icons.woff +0 -0
- package/dist/superdesk-ui.bundle.css +55848 -25170
- package/dist/superdesk-ui.bundle.js +89426 -66859
- package/dist/vendor.bundle.js +25682 -25660
- 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 +658 -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 +472 -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 +659 -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 +81 -8
- 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 +161 -28
- 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 +13 -2
- 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 +21 -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 +11 -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 +111 -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 +248 -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 +6 -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 +27 -0
- package/react/components/Navigation/SideBarMenu.js +96 -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/RadioGroup.d.ts +24 -0
- 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/ThemeSelector.d.ts +21 -0
- 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/yarn-error.log +111 -0
- 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
@@ -0,0 +1,366 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import * as Markup from '../../js/react';
|
3
|
+
import { PropsList, Prop, Button, ButtonGroup, IconButton, Label, SlidingToolbar } from '../../../app-typescript';
|
4
|
+
import * as PanelElements from '../../../app-typescript/components/Layouts/Panel';
|
5
|
+
|
6
|
+
interface IProps {
|
7
|
+
children?: React.ReactNode;
|
8
|
+
}
|
9
|
+
|
10
|
+
interface IState {
|
11
|
+
openPanel1: boolean;
|
12
|
+
openPanel2: boolean;
|
13
|
+
openPanel3: boolean;
|
14
|
+
openPanel4: boolean;
|
15
|
+
openToolbar1: boolean;
|
16
|
+
}
|
17
|
+
|
18
|
+
export default class PanelDoc extends React.Component<IProps, IState> {
|
19
|
+
constructor(props: IProps) {
|
20
|
+
super(props);
|
21
|
+
this.state = {
|
22
|
+
openPanel1: true,
|
23
|
+
openPanel2: true,
|
24
|
+
openPanel3: true,
|
25
|
+
openPanel4: true,
|
26
|
+
openToolbar1: true
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
// handlePanel() {
|
31
|
+
// this.setState((state) => ({
|
32
|
+
// openPanel: !state.openPanel,
|
33
|
+
// }));
|
34
|
+
// }
|
35
|
+
|
36
|
+
render() {
|
37
|
+
return (
|
38
|
+
<section className='docs-page__container'>
|
39
|
+
<h2 className='docs-page__h2'>Panel</h2>
|
40
|
+
|
41
|
+
<Markup.ReactMarkupCodePreview>{`
|
42
|
+
<Panel side='left' size="small">
|
43
|
+
<PanelHeader title='Title for the Panel' handlePanelParent={()=> false}>
|
44
|
+
</PanelHeader>
|
45
|
+
<PanelContent>
|
46
|
+
<PanelContentBlock>
|
47
|
+
...
|
48
|
+
</PanelContentBlock>
|
49
|
+
</PanelContent>
|
50
|
+
<PanelFooter>
|
51
|
+
<Button text='Clear' style='hollow' onClick={() => false} />
|
52
|
+
<Button text='Submit' type='primary' onClick={() => false} />
|
53
|
+
</PanelFooter>
|
54
|
+
</Panel>
|
55
|
+
`}
|
56
|
+
</Markup.ReactMarkupCodePreview>
|
57
|
+
|
58
|
+
<p className="docs-page__paragraph">...</p>
|
59
|
+
|
60
|
+
<Markup.ReactMarkup>
|
61
|
+
<Markup.ReactMarkupPreview>
|
62
|
+
<p className="docs-page__paragraph">// Left</p>
|
63
|
+
<div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
|
64
|
+
{this.state.openPanel1 ? null :
|
65
|
+
<div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
|
66
|
+
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel1': true})} />
|
67
|
+
</div>
|
68
|
+
}
|
69
|
+
<PanelElements.Panel side='left' background='light' open={this.state.openPanel1} size='x-small'>
|
70
|
+
<PanelElements.PanelHeader title='This is the title for the Panel' onClose={() => this.setState({'openPanel1': false})}>
|
71
|
+
</PanelElements.PanelHeader>
|
72
|
+
<PanelElements.PanelContent>
|
73
|
+
<PanelElements.PanelContentBlock>
|
74
|
+
<p className='sd-margin-b--2'>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
|
75
|
+
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
76
|
+
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
|
77
|
+
vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>
|
78
|
+
</PanelElements.PanelContentBlock>
|
79
|
+
</PanelElements.PanelContent>
|
80
|
+
<PanelElements.PanelFooter>
|
81
|
+
<Button text='Clear' style='hollow' onClick={() => false} />
|
82
|
+
<Button text='Submit' type='primary' onClick={() => false} />
|
83
|
+
</PanelElements.PanelFooter>
|
84
|
+
</PanelElements.Panel>
|
85
|
+
</div>
|
86
|
+
</Markup.ReactMarkupPreview>
|
87
|
+
<Markup.ReactMarkupCode>{`
|
88
|
+
// Left
|
89
|
+
{this.state.openPanel1 ? null :
|
90
|
+
<div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
|
91
|
+
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel1': true})} />
|
92
|
+
</div>
|
93
|
+
}
|
94
|
+
<PanelElements.Panel side='left' background='light' open={this.state.openPanel1} size='x-small'>
|
95
|
+
<PanelElements.PanelHeader title='This is the title for the Panel' onClose={() => this.setState({'openPanel1': false})}>
|
96
|
+
</PanelElements.PanelHeader>
|
97
|
+
<PanelElements.PanelContent>
|
98
|
+
<PanelElements.PanelContentBlock>
|
99
|
+
<p className='sd-margin-b--2'>Maecenas sed diam eget risus varius blandit sit amet non magna...</p>
|
100
|
+
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada...</p>
|
101
|
+
</PanelElements.PanelContentBlock>
|
102
|
+
</PanelElements.PanelContent>
|
103
|
+
<PanelElements.PanelFooter>
|
104
|
+
<Button text='Clear' style='hollow' onClick={() => false} />
|
105
|
+
<Button text='Submit' type='primary' onClick={() => false} />
|
106
|
+
</PanelElements.PanelFooter>
|
107
|
+
</PanelElements.Panel>
|
108
|
+
`}
|
109
|
+
</Markup.ReactMarkupCode>
|
110
|
+
</Markup.ReactMarkup>
|
111
|
+
|
112
|
+
<Markup.ReactMarkup>
|
113
|
+
<Markup.ReactMarkupPreview>
|
114
|
+
<p className="docs-page__paragraph">// Right, custom elements inside the footer + dark theme.</p>
|
115
|
+
<div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
|
116
|
+
{this.state.openPanel2 ? null :
|
117
|
+
<div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
|
118
|
+
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel2': true})} />
|
119
|
+
</div>
|
120
|
+
}
|
121
|
+
<PanelElements.Panel side='right' background='light' open={this.state.openPanel2} size='small' theme="dark">
|
122
|
+
<PanelElements.PanelHeader title='Right panel title' onClose={()=> this.setState({openPanel2: false})} color='blueGreyDarker'>
|
123
|
+
</PanelElements.PanelHeader>
|
124
|
+
<PanelElements.PanelContent>
|
125
|
+
<PanelElements.PanelContentBlock>
|
126
|
+
<p className='sd-margin-b--2'>Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem
|
127
|
+
lacinia quam venenatis vestibulum.</p>
|
128
|
+
<p className='sd-margin-b--2'>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.
|
129
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus,
|
130
|
+
nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.</p>
|
131
|
+
<p>Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada
|
132
|
+
magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
|
133
|
+
</PanelElements.PanelContentBlock>
|
134
|
+
</PanelElements.PanelContent>
|
135
|
+
<PanelElements.PanelFooter>
|
136
|
+
<ButtonGroup align='start'>
|
137
|
+
<Button text='one' style='hollow' onClick={()=> false} />
|
138
|
+
<Button text='two' style='hollow' onClick={()=> false} />
|
139
|
+
<Label text='Published' type='primary' style='translucent'/>
|
140
|
+
</ButtonGroup>
|
141
|
+
<ButtonGroup align='end'>
|
142
|
+
<IconButton icon='pencil' ariaValue={'Edit'} onClick={() => false} />
|
143
|
+
<IconButton icon='dots-vertical' ariaValue={'More options'} onClick={() => false} />
|
144
|
+
</ButtonGroup>
|
145
|
+
</PanelElements.PanelFooter>
|
146
|
+
</PanelElements.Panel>
|
147
|
+
</div>
|
148
|
+
</Markup.ReactMarkupPreview>
|
149
|
+
<Markup.ReactMarkupCode>{`
|
150
|
+
// Right, custom elements inside the footer + dark theme.
|
151
|
+
|
152
|
+
{this.state.openPanel2 ? null :
|
153
|
+
<div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
|
154
|
+
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel2': true})} />
|
155
|
+
</div>
|
156
|
+
}
|
157
|
+
<PanelElements.Panel side='right' background='light' open={this.state.openPanel2} size='small' theme="dark-ui">
|
158
|
+
<PanelElements.PanelHeader title='Right panel title' onClose={()=> this.setState({openPanel2: false})} color='blueGreyDarker'>
|
159
|
+
</PanelElements.PanelHeader>
|
160
|
+
<PanelElements.PanelContent>
|
161
|
+
<PanelElements.PanelContentBlock>
|
162
|
+
<p className='sd-margin-b--2'>Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
|
163
|
+
<p className='sd-margin-b--2'>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum...</p>
|
164
|
+
<p>Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient...</p>
|
165
|
+
</PanelElements.PanelContentBlock>
|
166
|
+
</PanelElements.PanelContent>
|
167
|
+
<PanelElements.PanelFooter>
|
168
|
+
<ButtonGroup align='start'>
|
169
|
+
<Button text='one' style='hollow' onClick={()=> false} />
|
170
|
+
<Button text='two' style='hollow' onClick={()=> false} />
|
171
|
+
<Label text='Published' type='primary' style='translucent'/>
|
172
|
+
</ButtonGroup>
|
173
|
+
<ButtonGroup align='end'>
|
174
|
+
<IconButton icon='pencil' ariaValue={'Edit'} onClick={() => false} />
|
175
|
+
<IconButton icon='dots-vertical' ariaValue={'More options'} onClick={() => false} />
|
176
|
+
</ButtonGroup>
|
177
|
+
</PanelElements.PanelFooter>
|
178
|
+
</PanelElements.Panel>
|
179
|
+
`}
|
180
|
+
</Markup.ReactMarkupCode>
|
181
|
+
</Markup.ReactMarkup>
|
182
|
+
|
183
|
+
<Markup.ReactMarkup>
|
184
|
+
<Markup.ReactMarkupPreview>
|
185
|
+
<p className="docs-page__paragraph">// With PanelHeaderSlidingToolbar element inside the PanelHeader</p>
|
186
|
+
<div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
|
187
|
+
{this.state.openPanel3 ? null :
|
188
|
+
<div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
|
189
|
+
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel3': true})} />
|
190
|
+
</div>
|
191
|
+
}
|
192
|
+
<PanelElements.Panel side='left' background='light' open={this.state.openPanel3} size='small'>
|
193
|
+
<PanelElements.PanelHeader title='Donec sed odio dui' onClose={()=> this.setState({openPanel3: false})}>
|
194
|
+
{!this.state.openToolbar1 ? null :
|
195
|
+
<PanelElements.PanelHeaderSlidingToolbar>
|
196
|
+
<ButtonGroup align='end'>
|
197
|
+
<Button text='Cancel' style='hollow' onClick={()=> this.setState({openToolbar1: false})} />
|
198
|
+
<Button text='Save' style='hollow' type='primary' onClick={()=> this.setState({openToolbar1: false})} />
|
199
|
+
</ButtonGroup>
|
200
|
+
</PanelElements.PanelHeaderSlidingToolbar>
|
201
|
+
}
|
202
|
+
</PanelElements.PanelHeader>
|
203
|
+
<PanelElements.PanelContent>
|
204
|
+
<PanelElements.PanelContentBlock>
|
205
|
+
<p className='sd-margin-b--2'>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida
|
206
|
+
at eget metus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
|
207
|
+
dolor auctor. Nulla vitae elit libero, a pharetra augue.</p>
|
208
|
+
<p>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.
|
209
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus,
|
210
|
+
nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.</p>
|
211
|
+
</PanelElements.PanelContentBlock>
|
212
|
+
</PanelElements.PanelContent>
|
213
|
+
<PanelElements.PanelFooter>
|
214
|
+
{this.state.openToolbar1 ? null :
|
215
|
+
<ButtonGroup align='start'>
|
216
|
+
<Button text='Open Slide In Toolbar' style='hollow' onClick={()=> this.setState({openToolbar1: true})} />
|
217
|
+
</ButtonGroup>
|
218
|
+
}
|
219
|
+
<ButtonGroup align='end'>
|
220
|
+
<IconButton icon='dots-vertical' ariaValue={'More options'} onClick={() => false} />
|
221
|
+
</ButtonGroup>
|
222
|
+
</PanelElements.PanelFooter>
|
223
|
+
</PanelElements.Panel>
|
224
|
+
</div>
|
225
|
+
</Markup.ReactMarkupPreview>
|
226
|
+
<Markup.ReactMarkupCode>{`
|
227
|
+
// With PanelHeaderSlidingToolbar element inside the PanelHeader
|
228
|
+
|
229
|
+
{this.state.openPanel3 ? null :
|
230
|
+
<div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
|
231
|
+
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel3': true})} />
|
232
|
+
</div>
|
233
|
+
}
|
234
|
+
<PanelElements.Panel side='left' background='light' open={this.state.openPanel3} size='small'>
|
235
|
+
<PanelElements.PanelHeader title='Donec sed odio dui' onClose={()=> this.setState({openPanel3: false})}>
|
236
|
+
{!this.state.openToolbar1 ? null :
|
237
|
+
<PanelElements.PanelHeaderSlidingToolbar>
|
238
|
+
<ButtonGroup align='end'>
|
239
|
+
<Button text='Cancel' style='hollow' onClick={()=> this.setState({openToolbar1: false})} />
|
240
|
+
<Button text='Save' style='hollow' type='primary' onClick={()=> this.setState({openToolbar1: false})} />
|
241
|
+
</ButtonGroup>
|
242
|
+
</PanelElements.PanelHeaderSlidingToolbar>
|
243
|
+
}
|
244
|
+
</PanelElements.PanelHeader>
|
245
|
+
<PanelElements.PanelContent>
|
246
|
+
<PanelElements.PanelContentBlock>
|
247
|
+
<p className='sd-margin-b--2'>Fusce dapibus, tellus ac cursus commodo...</p>
|
248
|
+
<p>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus...</p>
|
249
|
+
</PanelElements.PanelContentBlock>
|
250
|
+
</PanelElements.PanelContent>
|
251
|
+
<PanelElements.PanelFooter>
|
252
|
+
{this.state.openToolbar1 ? null :
|
253
|
+
<ButtonGroup align='start'>
|
254
|
+
<Button text='Open Slide In Toolbar' style='hollow' onClick={()=> this.setState({openToolbar1: true})} />
|
255
|
+
</ButtonGroup>
|
256
|
+
}
|
257
|
+
<ButtonGroup align='end'>
|
258
|
+
<IconButton icon='dots-vertical' ariaValue={'More options'} onClick={() => false} />
|
259
|
+
</ButtonGroup>
|
260
|
+
</PanelElements.PanelFooter>
|
261
|
+
</PanelElements.Panel>
|
262
|
+
`}
|
263
|
+
</Markup.ReactMarkupCode>
|
264
|
+
</Markup.ReactMarkup>
|
265
|
+
|
266
|
+
<Markup.ReactMarkup>
|
267
|
+
<Markup.ReactMarkupPreview>
|
268
|
+
<p className="docs-page__paragraph">// With PanelTools (allowing custom actions) + dark theme</p>
|
269
|
+
<div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
|
270
|
+
{this.state.openPanel4 ? null :
|
271
|
+
<div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
|
272
|
+
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel4': true})} />
|
273
|
+
</div>
|
274
|
+
}
|
275
|
+
<PanelElements.Panel side='left' background='light' open={this.state.openPanel4} size='x-small' theme='dark'>
|
276
|
+
<PanelElements.PanelHeader title='Donec sed odio dui'>
|
277
|
+
<PanelElements.PanelTools tools={[
|
278
|
+
{title: 'Delete', icon: 'trash', onClick: () => false, ariaValue: 'Delete' },
|
279
|
+
{title: 'Edit', icon: 'pencil', onClick: () => false, ariaValue: 'Edit' },
|
280
|
+
{title: 'Close', icon: 'close-small', onClick: ()=> this.setState({openPanel4: false}), ariaValue: 'Close' },
|
281
|
+
]} />
|
282
|
+
</PanelElements.PanelHeader>
|
283
|
+
<PanelElements.PanelContent>
|
284
|
+
<PanelElements.PanelContentBlock>
|
285
|
+
<p className='sd-margin-b--2'>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida
|
286
|
+
at eget metus. Nulla vitae elit libero, a pharetra augue.</p>
|
287
|
+
<p>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.
|
288
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
289
|
+
</PanelElements.PanelContentBlock>
|
290
|
+
</PanelElements.PanelContent>
|
291
|
+
<PanelElements.PanelFooter>
|
292
|
+
<Button text='Cancel' style='hollow' onClick={() => false} />
|
293
|
+
<Button text='Save' type='primary' onClick={() => false} />
|
294
|
+
</PanelElements.PanelFooter>
|
295
|
+
</PanelElements.Panel>
|
296
|
+
</div>
|
297
|
+
</Markup.ReactMarkupPreview>
|
298
|
+
<Markup.ReactMarkupCode>{`
|
299
|
+
// With PanelTools (allowing custom actions) + dark theme
|
300
|
+
|
301
|
+
{this.state.openPanel4 ? null :
|
302
|
+
<div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
|
303
|
+
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel4': true})} />
|
304
|
+
</div>
|
305
|
+
}
|
306
|
+
<PanelElements.Panel side='left' background='light' open={this.state.openPanel4} size='x-small' theme='dark-ui'>
|
307
|
+
<PanelElements.PanelHeader title='Donec sed odio dui'>
|
308
|
+
<PanelElements.PanelTools tools={[
|
309
|
+
{title: 'Delete', icon: 'trash', onClick: () => false, ariaValue: 'Delete' },
|
310
|
+
{title: 'Edit', icon: 'pencil', onClick: () => false, ariaValue: 'Edit' },
|
311
|
+
{title: 'Close', icon: 'close-small', onClick: ()=> this.setState({openPanel4: false}), ariaValue: 'Close' },
|
312
|
+
]} />
|
313
|
+
</PanelElements.PanelHeader>
|
314
|
+
<PanelElements.PanelContent>
|
315
|
+
<PanelElements.PanelContentBlock>
|
316
|
+
<p className='sd-margin-b--2'>Fusce dapibus, tellus ac cursus commodo, tortor mauris...</p>
|
317
|
+
<p>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet...</p>
|
318
|
+
</PanelElements.PanelContentBlock>
|
319
|
+
</PanelElements.PanelContent>
|
320
|
+
<PanelElements.PanelFooter>
|
321
|
+
<Button text='Cancel' style='hollow' onClick={() => false} />
|
322
|
+
<Button text='Save' type='primary' onClick={() => false} />
|
323
|
+
</PanelElements.PanelFooter>
|
324
|
+
</PanelElements.Panel>
|
325
|
+
`}
|
326
|
+
</Markup.ReactMarkupCode>
|
327
|
+
</Markup.ReactMarkup>
|
328
|
+
|
329
|
+
|
330
|
+
<h3 className="docs-page__h3">Props</h3>
|
331
|
+
<p className="docs-page__paragraph">Panel</p>
|
332
|
+
<PropsList>
|
333
|
+
<Prop name='size' isRequired={false} type='xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large | full | auto' default='small' description='Specifies the width of the panel.'/>
|
334
|
+
<Prop name='side' isRequired={false} type='left | right' default='left' description='Defines the side of the panel. It will also add the appropriate shadow on the opsite side.'/>
|
335
|
+
<Prop name='theme' isRequired={false} type='light | dark' default='/' description='Explicitly define the theme of the panel. All child elements and the content will inherit the selected theme.'/>
|
336
|
+
<Prop name='background' isRequired={false} type='transparent | light | grey' default='light' description='Background colour of the panel.'/>
|
337
|
+
<Prop name='open' isRequired={false} type='boolean' default='false' description='Toggles the open/closed state of the panel.'/>
|
338
|
+
<Prop name='ClassName' isRequired={false} type='string' default='false' description='Add custom classes to modify the default behaviour or specify the placement in complex layouts.'/>
|
339
|
+
</PropsList>
|
340
|
+
|
341
|
+
<p className="docs-page__paragraph">PanelHeader</p>
|
342
|
+
<PropsList>
|
343
|
+
<Prop name='title' isRequired={false} type='string' default='/' description='Specifies the title of the panel.'/>
|
344
|
+
<Prop name='zIndex' isRequired={false} type='number' default='1' description='Increase the z-index of the header if needed.'/>
|
345
|
+
<Prop name='theme' isRequired={false} type='light | dark' default='/' description='Explicitly define the theme just for the of Panel Header. All child elements and the content inside the Header will inherit the selected theme.'/>
|
346
|
+
<Prop name='color' isRequired={false} type='light | darker | blueGrey | blueGreyDarker' default='light' description='Background colour of the Panel Header. blueGrey and blueGreyDarker will also change the text colour to white.'/>
|
347
|
+
<Prop name='ClassName' isRequired={false} type='string' default='false' description='Add custom or helper classes to modify the default behaviour if needed. Use only if necessary.'/>
|
348
|
+
</PropsList>
|
349
|
+
|
350
|
+
<p className="docs-page__paragraph">PanelContent</p>
|
351
|
+
<PropsList>
|
352
|
+
<Prop name='loading' isRequired={false} type='boolean' default='false' description='Loading state.'/>
|
353
|
+
<Prop name='empty' isRequired={false} type='boolean' default='false' description='Empty state'/>
|
354
|
+
<Prop name='emptyTemplate' isRequired={false} type='ReactNode' default='/' description='Use the EmptyState component to define the image and text for the empty state.'/>
|
355
|
+
</PropsList>
|
356
|
+
|
357
|
+
<p className="docs-page__paragraph">PanelContentBlock</p>
|
358
|
+
<PropsList>
|
359
|
+
<Prop name='flex' isRequired={false} type='boolean' default='false' description='Change to flex display mode.'/>
|
360
|
+
<Prop name='padding' isRequired={false} type='0 | 1-5 | 3' default='2' description='Choose padding for the content block. Defaults to 2 (16px) without specifiying a value.'/>
|
361
|
+
<Prop name='ClassName' isRequired={false} type='string' default='false' description='Add custom or helper classes to modify the default behaviour or layout if needed.'/>
|
362
|
+
</PropsList>
|
363
|
+
</section>
|
364
|
+
)
|
365
|
+
}
|
366
|
+
}
|
@@ -0,0 +1,142 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import * as Markup from '../../js/react';
|
3
|
+
import { Button, ButtonGroup, Container, Heading, LeftMenu, Prop, PropsList, QuickNavBar, SimpleList, SimpleListItem } from '../../../app-typescript';
|
4
|
+
|
5
|
+
export default class QuickNavBarDoc extends React.Component<{}> {
|
6
|
+
render() {
|
7
|
+
|
8
|
+
return (
|
9
|
+
<section className="docs-page__container">
|
10
|
+
<h2 className="docs-page__h2">Quick navigation bar</h2>
|
11
|
+
|
12
|
+
<Markup.ReactMarkupCodePreview>{`
|
13
|
+
<QuickNavBar
|
14
|
+
items={[
|
15
|
+
{ icon: 'heading-1', onClick:()=> false, id: 'section1' },
|
16
|
+
{ icon: 'align-left', onClick:()=> false, id: 'section2' },
|
17
|
+
{ icon: 'picture', onClick:()=> false, id: 'section3' },
|
18
|
+
{ icon: 'attachment-large', onClick:()=> false, id: 'section4' }]} />
|
19
|
+
`}
|
20
|
+
</Markup.ReactMarkupCodePreview>
|
21
|
+
<p className="docs-page__paragraph">If you want the default variant, follow the instructions in the description above.</p>
|
22
|
+
<p className="docs-page__paragraph">The component also supports the scrollspy variant. It is necessary to add ID value to items and add the ID value of the scrollable container in the <code>scrollSpy</code> attribute.</p>
|
23
|
+
<Markup.ReactMarkup>
|
24
|
+
<Markup.ReactMarkupPreview>
|
25
|
+
<div className='docs-page__content-row'>
|
26
|
+
<div className='docs-page__grid-page-example'>
|
27
|
+
<div className='docs-page__grid-page-example__top'>
|
28
|
+
<div className="sd-top-menu">
|
29
|
+
<a className="sd-top-menu__collapse-nav"><i className="icon-collapse icon--white"></i></a>
|
30
|
+
<p className="sd-top-menu__header">Top menu</p>
|
31
|
+
</div>
|
32
|
+
</div>
|
33
|
+
<QuickNavBar
|
34
|
+
scrollSpy='#scrollContainer'
|
35
|
+
offset={-300}
|
36
|
+
items={[
|
37
|
+
{ icon: 'heading-1', tooltip: 'Headline', onClick:()=> false, id: 'section1' },
|
38
|
+
{ icon: 'align-left', tooltip: 'Body', onClick:()=> false, id: 'section2' },
|
39
|
+
{ icon: 'picture', tooltip: 'Media', onClick:()=> false, id: 'section3' },
|
40
|
+
{ icon: 'attachment-large', tooltip: 'Attachments', onClick:()=> false, id: 'section4' }]} />
|
41
|
+
<div className='docs-page__grid-page-example__main sd-padding--4' id='scrollContainer' style={{height:600}}>
|
42
|
+
<SimpleList density='comfortable'>
|
43
|
+
<SimpleListItem stacked={true} id='section1' >
|
44
|
+
<Heading type='h2' className='sd-padding--2'>Section 1</Heading>
|
45
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3'>
|
46
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
47
|
+
</Container>
|
48
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3'>
|
49
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
50
|
+
</Container>
|
51
|
+
<Container gap="large" display='flex'>
|
52
|
+
<ButtonGroup align='end'>
|
53
|
+
<Button text="button" type="primary" onClick={()=> false} />
|
54
|
+
<Button text="button" type="highlight" onClick={()=> false} />
|
55
|
+
</ButtonGroup>
|
56
|
+
</Container>
|
57
|
+
</SimpleListItem >
|
58
|
+
<SimpleListItem stacked={true} id='section2' >
|
59
|
+
<Heading type='h2' className='sd-padding--2'>Section 2</Heading>
|
60
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3'>
|
61
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
62
|
+
</Container>
|
63
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3'>
|
64
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
65
|
+
</Container>
|
66
|
+
<Container gap="large" display='flex'>
|
67
|
+
<ButtonGroup align='end'>
|
68
|
+
<Button text="button" type="primary" onClick={()=> false} />
|
69
|
+
<Button text="button" type="highlight" onClick={()=> false} />
|
70
|
+
</ButtonGroup>
|
71
|
+
</Container>
|
72
|
+
</SimpleListItem>
|
73
|
+
<SimpleListItem stacked={true} id='section3' >
|
74
|
+
<Heading type='h2' className='sd-padding--2'>Section 3</Heading>
|
75
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3'>
|
76
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
77
|
+
</Container>
|
78
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3'>
|
79
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
80
|
+
</Container>
|
81
|
+
<Container gap="large" display='flex'>
|
82
|
+
<ButtonGroup align='end'>
|
83
|
+
<Button text="button" type="primary" onClick={()=> false} />
|
84
|
+
<Button text="button" type="highlight" onClick={()=> false} />
|
85
|
+
</ButtonGroup>
|
86
|
+
</Container>
|
87
|
+
</SimpleListItem>
|
88
|
+
<SimpleListItem stacked={true} id='section4' >
|
89
|
+
<Heading type='h2' className='sd-padding--2'>Section 4</Heading>
|
90
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3'>
|
91
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
92
|
+
</Container>
|
93
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3'>
|
94
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
95
|
+
</Container>
|
96
|
+
</SimpleListItem>
|
97
|
+
<Container gap="large" display='flex'>
|
98
|
+
<ButtonGroup align='end'>
|
99
|
+
<Button text="button" type="primary" onClick={()=> false} />
|
100
|
+
<Button text="button" type="highlight" onClick={()=> false} />
|
101
|
+
</ButtonGroup>
|
102
|
+
</Container>
|
103
|
+
</SimpleList>
|
104
|
+
</div>
|
105
|
+
</div>
|
106
|
+
</div>
|
107
|
+
</Markup.ReactMarkupPreview>
|
108
|
+
<Markup.ReactMarkupCode>
|
109
|
+
{`
|
110
|
+
<QuickNavBar
|
111
|
+
scrollSpy='#scrollContainer'
|
112
|
+
offset={-300}
|
113
|
+
items={[
|
114
|
+
{ icon: 'heading-1', tooltip: 'Headline', onClick:()=> false, id: 'section1' },
|
115
|
+
{ icon: 'align-left', tooltip: 'Body', onClick:()=> false, id: 'section2' },
|
116
|
+
{ icon: 'picture', tooltip: 'Media', onClick:()=> false, id: 'section3' },
|
117
|
+
{ icon: 'attachment-large', tooltip: 'Attachments', onClick:()=> false, id: 'section4' }]}
|
118
|
+
/>
|
119
|
+
|
120
|
+
<div id='#scrollContainer'>...</div>
|
121
|
+
`}
|
122
|
+
</Markup.ReactMarkupCode>
|
123
|
+
</Markup.ReactMarkup>
|
124
|
+
|
125
|
+
<h3 className="docs-page__h3">Props</h3>
|
126
|
+
<PropsList>
|
127
|
+
<Prop name='items' isRequired={true} type='Array<Items>' default='/' description='Array of items'/>
|
128
|
+
<Prop name='scrollSpy' isRequired={false} type='string' default='/' description='Name of the element of scrollable container.'/>
|
129
|
+
<Prop name='offset' isRequired={false} type='Array<menuitem>' default='/' description='Offset value that adjusts to determine the elements are in the viewport.'/>
|
130
|
+
</PropsList>
|
131
|
+
<p className='docs-page__paragraph'>Items:</p>
|
132
|
+
<PropsList>
|
133
|
+
<Prop name='icon' isRequired={true} type='string' default='/' description='Icon class name without the icon- part.'/>
|
134
|
+
<Prop name='tooltip' isRequired={false} type='string' default='/' description='Defines the possition of the ToolTip.'/>
|
135
|
+
<Prop name='id' isRequired={false} type='string' default='/' description='Item id value. It is necessary for scrollspy.'/>
|
136
|
+
<Prop name='onClick' isRequired={false} type='function' default='/' description='Callback fired when a button is pressed.'/>
|
137
|
+
</PropsList>
|
138
|
+
|
139
|
+
</section>
|
140
|
+
)
|
141
|
+
}
|
142
|
+
}
|