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
@@ -67,6 +67,12 @@ export default class LabelsDoc extends React.Component {
|
|
67
67
|
<Label text='deep-orange--700' color='deep-orange--700'/>
|
68
68
|
<Label text='lime--700' color='lime--700'/>
|
69
69
|
</div>
|
70
|
+
<p className="docs-page__paragraph">// Custom Hex colors</p>
|
71
|
+
<div className='docs-page__content-row'>
|
72
|
+
<Label text='Hex: #008773' hexColor='#008773'/>
|
73
|
+
<Label text='Hex: #000FB5' hexColor='#000FB5'/>
|
74
|
+
<Label text='Hex: #696B00' hexColor='#696B00'/>
|
75
|
+
</div>
|
70
76
|
</Markup.ReactMarkupPreview>
|
71
77
|
<Markup.ReactMarkupCode>{`
|
72
78
|
<Label text='default label'/>
|
@@ -82,7 +88,11 @@ export default class LabelsDoc extends React.Component {
|
|
82
88
|
<Label text='cyan--600' color='cyan--600'/>
|
83
89
|
<Label text='light-green--700' color='light-green--700'/>
|
84
90
|
<Label text='deep-orange--700' color='deep-orange--700'/>
|
85
|
-
<Label text='lime--700' color='lime--700'/>
|
91
|
+
<Label text='lime--700' color='lime--700'/>
|
92
|
+
// Custom Hex colors
|
93
|
+
<Label text='Hex: #008773' hexColor='#008773'/>
|
94
|
+
<Label text='Hex: #000FB5' hexColor='#000FB5'/>
|
95
|
+
<Label text='Hex: #696B00' hexColor='#696B00'/>
|
86
96
|
`}
|
87
97
|
</Markup.ReactMarkupCode>
|
88
98
|
</Markup.ReactMarkup>
|
@@ -113,6 +123,12 @@ export default class LabelsDoc extends React.Component {
|
|
113
123
|
<Label text='light-green--700 label' style='hollow' color='light-green--700'/>
|
114
124
|
<Label text='deep-purple--600 label' style='hollow' color='deep-purple--600'/>
|
115
125
|
</div>
|
126
|
+
<p className="docs-page__paragraph">// Custom Hex colours</p>
|
127
|
+
<div className='docs-page__content-row'>
|
128
|
+
<Label text='Hex: #008773' style='hollow' hexColor='#008773'/>
|
129
|
+
<Label text='Hex: #000FB5' style='hollow' hexColor='#000FB5'/>
|
130
|
+
<Label text='Hex: #696B00' style='hollow' hexColor='#696B00'/>
|
131
|
+
</div>
|
116
132
|
</Markup.ReactMarkupPreview>
|
117
133
|
<Markup.ReactMarkupCode>{`
|
118
134
|
<Label text='default label' style='hollow'/>
|
@@ -133,6 +149,11 @@ export default class LabelsDoc extends React.Component {
|
|
133
149
|
<Label text='blue-grey--600 label' style='hollow' color='blue-grey--600'/>
|
134
150
|
<Label text='light-green--700 label' style='hollow' color='light-green--700'/>
|
135
151
|
<Label text='deep-purple--600 label' style='hollow' color='deep-purple--600'/>
|
152
|
+
|
153
|
+
// Custom Hex colours
|
154
|
+
<Label text='Hex: #008773' style='hollow' hexColor='#008773'/>
|
155
|
+
<Label text='Hex: #000FB5' style='hollow' hexColor='#000FB5'/>
|
156
|
+
<Label text='Hex: #696B00' style='hollow' hexColor='#696B00'/>
|
136
157
|
`}
|
137
158
|
</Markup.ReactMarkupCode>
|
138
159
|
</Markup.ReactMarkup>
|
@@ -156,6 +177,12 @@ export default class LabelsDoc extends React.Component {
|
|
156
177
|
<Label text='Translucent large' size='large' type='primary' style='translucent'/>
|
157
178
|
<Label text='Translucent, large & no text transformation' type='highlight' size='large' style='translucent' noTransform={true}/>
|
158
179
|
</div>
|
180
|
+
<p className="docs-page__paragraph">// Custom Hex colours</p>
|
181
|
+
<div className='docs-page__content-row'>
|
182
|
+
<Label text='Hex: #008773' style='translucent' hexColor='#008773'/>
|
183
|
+
<Label text='Hex: #000FB5' style='translucent' hexColor='#000FB5'/>
|
184
|
+
<Label text='Hex: #696B00' style='translucent' hexColor='#696B00'/>
|
185
|
+
</div>
|
159
186
|
</Markup.ReactMarkupPreview>
|
160
187
|
<Markup.ReactMarkupCode>{`
|
161
188
|
<Label text='default label' style='hollow'/>
|
@@ -169,6 +196,11 @@ export default class LabelsDoc extends React.Component {
|
|
169
196
|
<Label text='Translucent large' size='large' style='translucent'/>
|
170
197
|
<Label text='Translucent large' size='large' type='primary' style='translucent'/>
|
171
198
|
<Label text='Translucent, large & no text transformation' type='highlight' size='large' style='translucent' noTransform={true}/>
|
199
|
+
|
200
|
+
// Custom Hex colours
|
201
|
+
<Label text='Hex: #008773' style='translucent' hexColor='#008773'/>
|
202
|
+
<Label text='Hex: #000FB5' style='translucent' hexColor='#000FB5'/>
|
203
|
+
<Label text='Hex: #696B00' style='translucent' hexColor='#696B00'/>
|
172
204
|
`}
|
173
205
|
</Markup.ReactMarkupCode>
|
174
206
|
</Markup.ReactMarkup>
|
@@ -195,6 +227,15 @@ export default class LabelsDoc extends React.Component {
|
|
195
227
|
<Label text='success label' type='success' style='translucent' onClick={()=> false}/>
|
196
228
|
<Label text='alert label' type='alert' style='translucent' onClick={()=> false}/>
|
197
229
|
</div>
|
230
|
+
<p className="docs-page__paragraph">// Custom Hex colours</p>
|
231
|
+
<div className='docs-page__content-row'>
|
232
|
+
<Label text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
|
233
|
+
<Label text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
|
234
|
+
<Label style='hollow' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
|
235
|
+
<Label style='hollow' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
|
236
|
+
<Label style='translucent' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
|
237
|
+
<Label style='translucent' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
|
238
|
+
</div>
|
198
239
|
</Markup.ReactMarkupPreview>
|
199
240
|
<Markup.ReactMarkupCode>{`
|
200
241
|
<Label text='default label' onClick={()=> false}/>
|
@@ -211,6 +252,14 @@ export default class LabelsDoc extends React.Component {
|
|
211
252
|
<Label text='primary label' type='primary' style='translucent' onClick={()=> false}/>
|
212
253
|
<Label text='success label' type='success' style='translucent' onClick={()=> false}/>
|
213
254
|
<Label text='alert label' type='alert' style='translucent' onClick={()=> false}/>
|
255
|
+
|
256
|
+
// Custom Hex colours
|
257
|
+
<Label text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
|
258
|
+
<Label text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
|
259
|
+
<Label style='hollow' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
|
260
|
+
<Label style='hollow' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
|
261
|
+
<Label style='translucent' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
|
262
|
+
<Label style='translucent' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
|
214
263
|
`}
|
215
264
|
</Markup.ReactMarkupCode>
|
216
265
|
</Markup.ReactMarkup>
|
@@ -223,6 +272,7 @@ export default class LabelsDoc extends React.Component {
|
|
223
272
|
<Prop name='size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large label.'/>
|
224
273
|
<Prop name='noTransform' isRequired={false} type='boolean' default='false' description='Transforms text to uppercase.'/>
|
225
274
|
<Prop name='style' isRequired={false} type='filled | hollow | translucent' default='filled' description='Label may have one of these styles - filled (default), hollow or translucent.'/>
|
275
|
+
<Prop name='hexColor' isRequired={false} type='string' default='/' description='Define a custom Hex colour for the label.'/>
|
226
276
|
</PropsList>
|
227
277
|
</section>
|
228
278
|
)
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import * as Markup from '../../js/react';
|
3
|
-
import { LeftMenu, Prop, PropsList } from '../../../app-typescript';
|
3
|
+
import { Container, Heading, LeftMenu, Prop, PropsList, SimpleList, SimpleListItem } from '../../../app-typescript';
|
4
4
|
|
5
5
|
export default class LeftNavigationsDoc extends React.Component<{}> {
|
6
6
|
render() {
|
@@ -8,8 +8,26 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
8
8
|
return (
|
9
9
|
<section className="docs-page__container">
|
10
10
|
<h2 className="docs-page__h2">Left navigation</h2>
|
11
|
-
<p className="docs-page__paragraph">...</p>
|
12
11
|
|
12
|
+
<Markup.ReactMarkupCodePreview>{`
|
13
|
+
<LeftMenu
|
14
|
+
activeItemId='1'
|
15
|
+
groups={[
|
16
|
+
{ label: 'SYSTEM SETTINGS', items: [
|
17
|
+
{id: '1', label: 'General'},
|
18
|
+
{id: '2', label: 'Email settings'},
|
19
|
+
]},
|
20
|
+
{ label: 'WORKFLOW', items: [
|
21
|
+
{ id: '4', label: 'Desk' },
|
22
|
+
{ id: '5', label: 'User Roles & Privileges'},
|
23
|
+
]}
|
24
|
+
]}
|
25
|
+
onSelect={() => false}
|
26
|
+
/>
|
27
|
+
`}
|
28
|
+
</Markup.ReactMarkupCodePreview>
|
29
|
+
|
30
|
+
<h3 className="docs-page__h3">Default</h3>
|
13
31
|
<Markup.ReactMarkup>
|
14
32
|
<Markup.ReactMarkupPreview>
|
15
33
|
<div className='docs-page__content-row'>
|
@@ -20,32 +38,193 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
20
38
|
<p className="sd-top-menu__header">Top menu</p>
|
21
39
|
</div>
|
22
40
|
</div>
|
23
|
-
<LeftMenu ariaLabel={'Left navigation'}
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
41
|
+
<LeftMenu ariaLabel={'Left navigation'}
|
42
|
+
className={'docs-page__grid-page-example__side'}
|
43
|
+
activeItemId='3'
|
44
|
+
groups={[
|
45
|
+
{label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
|
46
|
+
{label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
|
47
|
+
{label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
|
48
|
+
]}
|
49
|
+
onSelect={() => false} />
|
28
50
|
<div className='docs-page__grid-page-example__main'></div>
|
29
51
|
</div>
|
30
52
|
</div>
|
31
53
|
</Markup.ReactMarkupPreview>
|
32
54
|
<Markup.ReactMarkupCode>{`
|
33
|
-
<LeftMenu
|
34
|
-
{
|
35
|
-
{
|
36
|
-
|
55
|
+
<LeftMenu
|
56
|
+
ariaLabel={'Left navigation'}
|
57
|
+
className={'docs-page__grid-page-example__side'}
|
58
|
+
activeItemId='1'
|
59
|
+
groups={[
|
60
|
+
{label: 'SYSTEM SETTINGS', items: [
|
61
|
+
{id: '1', label: 'General'},
|
62
|
+
{id: '2', label: 'Email settings'},
|
63
|
+
{id: '3', label: 'Spell checking'},
|
64
|
+
]},
|
65
|
+
{label: 'WORKFLOW', items: [
|
66
|
+
{id: '4', label: 'Desk'},
|
67
|
+
{id: '5', label: 'User Roles & Privileges'},
|
68
|
+
]},
|
69
|
+
{label: 'CONTENT CONFIG', items: [
|
70
|
+
{id: '6', label: 'Image renditions'},
|
71
|
+
{id: '7', label: 'Controlled Vocabularies'},
|
72
|
+
]}
|
73
|
+
]}
|
74
|
+
onSelect={() => false}
|
75
|
+
/>
|
37
76
|
`}
|
38
77
|
</Markup.ReactMarkupCode>
|
39
78
|
</Markup.ReactMarkup>
|
79
|
+
<h3 className="docs-page__h3">With scrollspy</h3>
|
80
|
+
<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 scrollable container in the <code>scrollSpy</code> attribute.</p>
|
81
|
+
<Markup.ReactMarkup>
|
82
|
+
<Markup.ReactMarkupPreview>
|
83
|
+
<div className='docs-page__content-row'>
|
84
|
+
<div className='docs-page__grid-page-example'>
|
85
|
+
<div className='docs-page__grid-page-example__top'>
|
86
|
+
<div className="sd-top-menu">
|
87
|
+
<a className="sd-top-menu__collapse-nav"><i className="icon-collapse icon--white"></i></a>
|
88
|
+
<p className="sd-top-menu__header">Top menu</p>
|
89
|
+
</div>
|
90
|
+
</div>
|
91
|
+
<LeftMenu ariaLabel={'Left navigation'}
|
92
|
+
className={'docs-page__grid-page-example__side'}
|
93
|
+
scrollSpy='#scrollContainer'
|
94
|
+
offset={-300}
|
95
|
+
//scrollTo={'section4'}
|
96
|
+
groups={[
|
97
|
+
{ label: 'MAIN SECTIONS', items: [
|
98
|
+
{ id: '1', label: 'Section 1', ref:'section1'},
|
99
|
+
{ id: '2', label: 'Section 2', ref: 'section2' },
|
100
|
+
{ id: '3', label: 'Section 3', ref: 'section3' },
|
101
|
+
|
102
|
+
]},
|
103
|
+
{ label:'OTHER SECTIONS', items: [
|
104
|
+
{ id: '4', label: 'Section 4', ref: 'section4' },
|
105
|
+
{ id: '5', label: 'Section 5', ref: 'section5' }
|
106
|
+
]},
|
107
|
+
{ label:'OTHER SECTIONS', items: [
|
108
|
+
{ id: '6', label: 'Section 6', ref: 'section6' },
|
109
|
+
{ id: '7', label: 'Section 7', ref: 'section7' }
|
110
|
+
]}
|
111
|
+
]}
|
112
|
+
onSelect={() => false} />
|
113
|
+
<div className='docs-page__grid-page-example__main sd-padding--4' id='scrollContainer' style={{height:600}}>
|
114
|
+
<SimpleList density='comfortable'>
|
115
|
+
<SimpleListItem stacked={true} id='section1' >
|
116
|
+
<Heading type='h3'>Section 1</Heading>
|
117
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
118
|
+
<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>
|
119
|
+
</Container>
|
120
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
121
|
+
<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>
|
122
|
+
</Container>
|
123
|
+
</SimpleListItem >
|
124
|
+
<SimpleListItem stacked={true} id='section2' >
|
125
|
+
<Heading type='h3'>Section 2</Heading>
|
126
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
127
|
+
<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>
|
128
|
+
</Container>
|
129
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
130
|
+
<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>
|
131
|
+
</Container>
|
132
|
+
</SimpleListItem>
|
133
|
+
<SimpleListItem stacked={true} id='section3' >
|
134
|
+
<Heading type='h3'>Section 3</Heading>
|
135
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
136
|
+
<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>
|
137
|
+
</Container>
|
138
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
139
|
+
<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>
|
140
|
+
</Container>
|
141
|
+
</SimpleListItem>
|
142
|
+
<SimpleListItem stacked={true} id='section4' >
|
143
|
+
<Heading type='h3'>Section 4</Heading>
|
144
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
145
|
+
<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>
|
146
|
+
</Container>
|
147
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
148
|
+
<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>
|
149
|
+
</Container>
|
150
|
+
</SimpleListItem>
|
151
|
+
<SimpleListItem stacked={true} id='section5' >
|
152
|
+
<Heading type='h3'>Section 5</Heading>
|
153
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
154
|
+
<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>
|
155
|
+
</Container>
|
156
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
157
|
+
<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>
|
158
|
+
</Container>
|
159
|
+
</SimpleListItem>
|
160
|
+
<SimpleListItem stacked={true} id='section6' >
|
161
|
+
<Heading type='h3'>Section 6</Heading>
|
162
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
163
|
+
<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>
|
164
|
+
</Container>
|
165
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
166
|
+
<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>
|
167
|
+
</Container>
|
168
|
+
</SimpleListItem>
|
169
|
+
<SimpleListItem stacked={true} id='section7' >
|
170
|
+
<Heading type='h3'>Section 7</Heading>
|
171
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
172
|
+
<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>
|
173
|
+
</Container>
|
174
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
175
|
+
<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>
|
176
|
+
</Container>
|
177
|
+
</SimpleListItem>
|
178
|
+
</SimpleList>
|
179
|
+
</div>
|
180
|
+
</div>
|
181
|
+
</div>
|
182
|
+
</Markup.ReactMarkupPreview>
|
183
|
+
<Markup.ReactMarkupCode>
|
184
|
+
{`
|
185
|
+
<LeftMenu
|
186
|
+
ariaLabel={'Left navigation'}
|
187
|
+
className={'docs-page__grid-page-example__side'}
|
188
|
+
scrollSpy='#scrollContainer'
|
189
|
+
offset={-300}
|
190
|
+
activeItemId='1'
|
191
|
+
groups={[
|
192
|
+
{ label: 'MAIN SECTIONS', items: [
|
193
|
+
{ id: '1', label: 'Section 1', ref:'section1'},
|
194
|
+
{ id: '2', label: 'Section 2', ref: 'section2' },
|
195
|
+
{ id: '3', label: 'Section 3', ref: 'section3' }
|
196
|
+
]},
|
197
|
+
{label:'OTHER SECTIONS', items: [
|
198
|
+
{ id: '4', label: 'Section 4', ref: 'section4' },
|
199
|
+
{ id: '5', label: 'Section 5', ref: 'section5' }
|
200
|
+
]},
|
201
|
+
{label:'OTHER SECTIONS', items: [
|
202
|
+
{ id: '4', label: 'Section 6', ref: 'section6' },
|
203
|
+
{ id: '5', label: 'Section 7', ref: 'section7' }
|
204
|
+
]}
|
205
|
+
]}
|
206
|
+
onSelect={() => false}
|
207
|
+
/>
|
208
|
+
|
209
|
+
<div id='#scrollContainer'>...</div>
|
210
|
+
`}
|
211
|
+
</Markup.ReactMarkupCode>
|
212
|
+
</Markup.ReactMarkup>
|
40
213
|
|
41
214
|
<h3 className="docs-page__h3">Props</h3>
|
42
215
|
<PropsList>
|
43
|
-
<Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups'/>
|
44
|
-
<Prop name='activeItemId' isRequired={true} type='string' default='/' description='Id of active item'/>
|
216
|
+
<Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups.'/>
|
45
217
|
<Prop name='menugroup label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
|
46
|
-
<Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items'/>
|
47
|
-
<Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value'/>
|
218
|
+
<Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items.'/>
|
219
|
+
<Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value.'/>
|
48
220
|
<Prop name='menuitem label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
|
221
|
+
<Prop name='menuitem ref' isRequired={false} type='string' default='/' description='Menugroup ref.'/>
|
222
|
+
<Prop name='menuitem route' isRequired={false} type='string' default='/' description='Menugroup route value.'/>
|
223
|
+
<Prop name='menuitem onCLick' isRequired={true} type='string' default='/' description='On click function.'/>
|
224
|
+
<Prop name='scrollSpy' isRequired={false} type='string' default='HTML' description='Name of the element of scrollable container.'/>
|
225
|
+
<Prop name='offset' isRequired={false} type='number' default='-300' description='Offset value that adjusts to determine the elements are in the viewport.'/>
|
226
|
+
<Prop name='activeItemId' isRequired={false} type='string' default='/' description='Id of active item'/>
|
227
|
+
<Prop name='scrollTo' isRequired={false} type='string' default='/' description='Ref of active item.'/>
|
49
228
|
</PropsList>
|
50
229
|
</section>
|
51
230
|
)
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as Markup from "../../js/react";
|
3
|
+
import { ListItemLoader, PropsList } from "../../../app-typescript";
|
4
|
+
|
5
|
+
export default class ListItemsDoc extends React.Component {
|
6
|
+
render() {
|
7
|
+
return (
|
8
|
+
<section className="docs-page__container">
|
9
|
+
<h2 className="docs-page__h2">ListItemLoader</h2>
|
10
|
+
<Markup.ReactMarkupCodePreview>{`
|
11
|
+
<ListItemLoader />
|
12
|
+
`}
|
13
|
+
</Markup.ReactMarkupCodePreview>
|
14
|
+
<h3 className="docs-page__h3 docs-page__h3--small-top-m">Skeleton type loader for list items.</h3>
|
15
|
+
{/* <p className="docs-page__paragraph">Basic layout structure for list elements. The content inside the elements serves just as an example.</p> */}
|
16
|
+
<Markup.ReactMarkup>
|
17
|
+
<Markup.ReactMarkupPreview>
|
18
|
+
<div className="docs-page__content-row">
|
19
|
+
<ListItemLoader />
|
20
|
+
</div>
|
21
|
+
</Markup.ReactMarkupPreview>
|
22
|
+
<Markup.ReactMarkupCode>{`
|
23
|
+
<ListItemLoader />
|
24
|
+
`}</Markup.ReactMarkupCode>
|
25
|
+
</Markup.ReactMarkup>
|
26
|
+
|
27
|
+
<h3 className="docs-page__h3">Props</h3>
|
28
|
+
<PropsList>
|
29
|
+
|
30
|
+
</PropsList>
|
31
|
+
</section>
|
32
|
+
)
|
33
|
+
}
|
34
|
+
}
|