superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.vscode/settings.json +5 -0
- package/app/fonts/sd_big-icons.eot +0 -0
- package/app/fonts/sd_big-icons.svg +55 -53
- package/app/fonts/sd_big-icons.ttf +0 -0
- package/app/fonts/sd_big-icons.woff +0 -0
- package/app/fonts/sd_icons.eot +0 -0
- package/app/fonts/sd_icons.svg +15 -7
- package/app/fonts/sd_icons.ttf +0 -0
- package/app/fonts/sd_icons.woff +0 -0
- package/app/img/SD-logo.svg +52 -0
- package/app/img/dots.svg +3 -0
- package/app/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/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 +435 -332
- package/app/styles/_carousel.scss +17 -11
- package/app/styles/_design-tokens.scss +2 -0
- package/app/styles/_hamburger.scss +160 -0
- package/app/styles/_helpers.scss +198 -34
- package/app/styles/_icon-font.scss +351 -307
- package/app/styles/_icon-labels.scss +66 -10
- package/app/styles/_labels.scss +12 -6
- package/app/styles/_loaders.scss +13 -0
- package/app/styles/_master-desk.scss +5 -5
- package/app/styles/_mixins.scss +13 -3
- package/app/styles/_modals.scss +4 -28
- package/app/styles/_normalize.scss +1 -0
- package/app/styles/_panel-info.scss +19 -14
- package/app/styles/_sd-tag-input.scss +226 -219
- package/app/styles/_simple-list.scss +39 -17
- package/app/styles/_spinner.scss +46 -0
- package/app/styles/_table-list.scss +244 -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 +13 -2
- package/app/styles/components/_card-item.scss +33 -21
- package/app/styles/components/_list-item.scss +45 -24
- package/app/styles/components/_sd-dropzone.scss +114 -0
- package/app/styles/components/_sd-grid-item.scss +32 -18
- package/app/styles/components/_sd-notification-panel.scss +48 -0
- package/app/styles/components/_sd-photo-preview.scss +1 -1
- package/app/styles/components/_sd-searchbar.scss +12 -98
- package/app/styles/components/_subnav.scss +149 -120
- 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 +42 -21
- package/app/styles/dropdowns/_basic-dropdown.scss +30 -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/_inputs.scss +393 -64
- 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 +198 -66
- package/app/styles/grids/_layout-grid.scss +4 -4
- package/app/styles/grids/_sd-kanban-list.scss +2 -2
- package/app/styles/interface-elements/_side-panel.scss +87 -58
- package/app/styles/layout/_basic-layout.scss +3 -6
- package/app/styles/layout/_container.scss +35 -0
- package/app/styles/layout/_editor.scss +398 -0
- package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
- package/app/styles/menus/_sd-left-navigation.scss +38 -3
- package/app/styles/menus/_sd-sidebar-menu.scss +109 -14
- package/app/styles/menus/_sd-top-menu.scss +19 -5
- package/app/styles/pr-superdesk-theme.scss +3 -0
- package/app/styles/primereact/_pr-datepicker.scss +58 -7
- package/app/styles/primereact/_pr-dialog.scss +39 -7
- package/app/styles/primereact/_pr-dropdown.scss +170 -7
- package/app/styles/primereact/_pr-general.scss +4 -0
- package/app/styles/primereact/_pr-skeleton.scss +35 -0
- package/app/styles/variables/_colors.scss +2 -452
- package/app/styles/variables/_dimensions.scss +85 -1
- package/app/styles/variables/_form-elements.scss +0 -2
- package/app-typescript/components/Alert.tsx +16 -1
- package/app-typescript/components/Avatar.tsx +21 -0
- package/app-typescript/components/Badge.tsx +3 -2
- package/app-typescript/components/Button.tsx +7 -1
- package/app-typescript/components/ButtonGroup.tsx +5 -4
- package/app-typescript/components/Carousel.tsx +1 -1
- package/app-typescript/components/CheckButtonGroup.tsx +19 -5
- package/app-typescript/components/CheckGroup.tsx +2 -1
- package/app-typescript/components/Checkbox.tsx +7 -3
- package/app-typescript/components/CheckboxButton.tsx +9 -2
- package/app-typescript/components/CreateButton.tsx +38 -0
- package/app-typescript/components/DatePicker.tsx +77 -38
- package/app-typescript/components/DonutChart.tsx +1 -1
- package/app-typescript/components/DropZone.tsx +89 -0
- package/app-typescript/components/Dropdown.tsx +9 -1
- package/app-typescript/components/DurationInput.tsx +375 -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 +22 -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 +85 -0
- package/app-typescript/components/Form/InputNew.tsx +107 -0
- package/app-typescript/components/Form/InputWrapper.tsx +79 -0
- package/app-typescript/components/Form/index.tsx +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 +49 -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 +72 -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 +15 -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 +50 -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 +62 -0
- package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
- package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
- package/app-typescript/components/Layouts/CoreLayoutMain.tsx +16 -0
- package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
- package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
- package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
- package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
- package/app-typescript/components/Layouts/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 +100 -0
- package/app-typescript/components/Lists/SimpleList.tsx +54 -0
- package/app-typescript/components/Lists/TableList.tsx +212 -0
- package/app-typescript/components/Lists/index.tsx +2 -0
- package/app-typescript/components/Menu.tsx +31 -7
- package/app-typescript/components/Modal.tsx +31 -18
- package/app-typescript/components/MultiSelect.tsx +99 -0
- package/app-typescript/components/NavButton.tsx +4 -0
- package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
- package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
- package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
- package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
- package/app-typescript/components/Navigation/index.tsx +3 -0
- package/app-typescript/components/RadioButtonGroup.tsx +113 -0
- package/app-typescript/components/RadioGroup.tsx +69 -0
- package/app-typescript/components/SearchBar.tsx +98 -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/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 +50 -16
- package/app-typescript/components/Togglebox.tsx +9 -7
- package/app-typescript/components/Tooltip.tsx +7 -5
- package/app-typescript/components/TreeSelect.tsx +558 -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 +29 -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 +8901 -1602
- package/dist/examples.bundle.js +103604 -77680
- 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 +155 -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 +7 -1
- 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 +474 -0
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +457 -23
- 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/ContentList.tsx +286 -0
- package/dist/react/CreateButton.tsx +71 -0
- package/dist/react/DatePicker.tsx +31 -6
- package/dist/react/DropZone.tsx +111 -0
- package/dist/react/DurationInput.tsx +104 -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 +295 -6
- package/dist/react/Labels.tsx +51 -1
- package/dist/react/LeftNavigations.tsx +194 -15
- package/dist/react/ListItems.tsx +34 -0
- package/dist/react/Modal.tsx +8 -7
- package/dist/react/MultiSelect.tsx +201 -0
- package/dist/react/NavButtons.tsx +4 -4
- 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 +248 -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/TreeSelect.tsx +431 -0
- package/dist/react/WithSizeObserver.tsx +44 -0
- package/dist/react/tree-select/TreeSelect.tsx +273 -0
- package/dist/react/tree-select/example-1.tsx +71 -0
- package/dist/react/tree-select/example-2.tsx +59 -0
- package/dist/react.html +4 -0
- package/dist/sd_big-icons.eot +0 -0
- package/dist/sd_big-icons.svg +55 -53
- package/dist/sd_big-icons.ttf +0 -0
- package/dist/sd_big-icons.woff +0 -0
- package/dist/sd_icons.eot +0 -0
- package/dist/sd_icons.svg +15 -7
- package/dist/sd_icons.ttf +0 -0
- package/dist/sd_icons.woff +0 -0
- package/dist/superdesk-ui.bundle.css +55129 -25144
- package/dist/superdesk-ui.bundle.js +76296 -56362
- package/dist/vendor.bundle.js +25684 -25662
- package/examples/css/docs-page.css +99 -29
- 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 +28 -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 +155 -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 +7 -1
- 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 +474 -0
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +457 -23
- 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/ContentList.tsx +286 -0
- package/examples/pages/react/CreateButton.tsx +71 -0
- package/examples/pages/react/DatePicker.tsx +31 -6
- package/examples/pages/react/DropZone.tsx +111 -0
- package/examples/pages/react/DurationInput.tsx +104 -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 +295 -6
- package/examples/pages/react/Labels.tsx +51 -1
- package/examples/pages/react/LeftNavigations.tsx +194 -15
- package/examples/pages/react/ListItems.tsx +34 -0
- package/examples/pages/react/Modal.tsx +8 -7
- package/examples/pages/react/MultiSelect.tsx +201 -0
- package/examples/pages/react/NavButtons.tsx +4 -4
- 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 +248 -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/TreeSelect.tsx +431 -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.js +8 -6
- package/react/components/CreateButton.d.ts +17 -0
- package/react/components/CreateButton.js +68 -0
- package/react/components/DatePicker.d.ts +11 -0
- package/react/components/DatePicker.js +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 +1 -0
- package/react/components/Dropdown.js +10 -9
- package/react/components/DropdownFirst.js +18 -11
- package/react/components/DurationInput.d.ts +42 -0
- package/react/components/DurationInput.js +335 -0
- package/react/components/EmptyState.d.ts +1 -0
- package/react/components/EmptyState.js +8 -6
- package/react/components/Form/FormGroup.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 +10 -0
- package/react/components/Form/FormLabel.js +56 -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 +42 -0
- package/react/components/Form/InputBase.js +72 -0
- package/react/components/Form/InputNew.d.ts +45 -0
- package/react/components/Form/InputNew.js +75 -0
- package/react/components/Form/InputWrapper.d.ts +28 -0
- package/react/components/Form/InputWrapper.js +91 -0
- package/react/components/Form/index.d.ts +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 +21 -26
- package/react/components/Label.d.ts +1 -0
- package/react/components/Label.js +28 -10
- 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 +18 -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 +8 -0
- package/react/components/Layouts/AuthoringFrameRightBar.js +49 -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 +19 -0
- package/react/components/Layouts/CoreLayout.js +55 -0
- package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
- package/react/components/Layouts/CoreLayoutContainer.js +49 -0
- package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
- package/react/components/Layouts/CoreLayoutFooter.js +49 -0
- package/react/components/Layouts/CoreLayoutMain.d.ts +9 -0
- package/react/components/Layouts/CoreLayoutMain.js +49 -0
- package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
- package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
- package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
- package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
- package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
- package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
- package/react/components/Layouts/HamburgerButton.d.ts +14 -0
- package/react/components/Layouts/HamburgerButton.js +63 -0
- package/react/components/Layouts/HeaderPanel.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 +45 -0
- package/react/components/Lists/ContentList.js +85 -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 +42 -0
- package/react/components/Lists/TableList.js +145 -0
- package/react/components/Lists/index.d.ts +2 -0
- package/react/components/Lists/index.js +10 -0
- package/react/components/Loader.js +4 -2
- package/react/components/Menu.d.ts +2 -1
- package/react/components/Menu.js +48 -12
- package/react/components/Modal.d.ts +4 -1
- package/react/components/Modal.js +35 -6
- package/react/components/NavButton.d.ts +1 -0
- package/react/components/NavButton.js +9 -4
- package/react/components/Navigation/BottomNav.d.ts +24 -0
- package/react/components/Navigation/BottomNav.js +88 -0
- package/react/components/Navigation/QuickNavBar.d.ts +24 -0
- package/react/components/Navigation/QuickNavBar.js +117 -0
- package/react/components/Navigation/SideBarMenu.d.ts +21 -0
- package/react/components/Navigation/SideBarMenu.js +79 -0
- package/react/components/Navigation/SideBarTabs.d.ts +23 -0
- package/react/components/Navigation/SideBarTabs.js +88 -0
- package/react/components/Navigation/index.d.ts +3 -0
- package/react/components/Navigation/index.js +9 -0
- package/react/components/Popover.js +4 -2
- package/react/components/PropsList.js +4 -2
- package/react/components/RadioButtonGroup.d.ts +29 -0
- package/react/components/RadioButtonGroup.js +91 -0
- package/react/components/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 +105 -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 +16 -2
- package/react/components/TimePicker.js +19 -6
- package/react/components/Toast.js +1 -1
- package/react/components/ToastMessage.js +6 -5
- package/react/components/ToastText.js +1 -1
- package/react/components/ToastWrapper.d.ts +2 -2
- package/react/components/ToastWrapper.js +14 -10
- package/react/components/Togglebox.d.ts +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 +75 -0
- package/react/components/TreeSelect.js +448 -0
- package/react/components/WithSizeObserver.d.ts +25 -0
- package/react/components/WithSizeObserver.js +95 -0
- package/react/components/_Positioner.js +4 -2
- package/react/helpers.d.ts +1 -0
- package/react/helpers.js +7 -0
- package/react/index.d.ts +27 -3
- package/react/index.js +63 -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,111 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import * as Markup from '../../js/react';
|
3
|
+
import { DropZone, Button, Icon, Prop, PropsList } from '../../../app-typescript';
|
4
|
+
|
5
|
+
interface IProps {
|
6
|
+
children?: React.ReactNode;
|
7
|
+
}
|
8
|
+
|
9
|
+
export default class DropZoneDoc extends React.Component<IProps> {
|
10
|
+
render() {
|
11
|
+
return (
|
12
|
+
<section className='docs-page__container'>
|
13
|
+
<h2 className='docs-page__h2'>Container</h2>
|
14
|
+
|
15
|
+
<Markup.ReactMarkupCodePreview>{`
|
16
|
+
<DropZone>
|
17
|
+
|
18
|
+
</DropZone>
|
19
|
+
`}
|
20
|
+
</Markup.ReactMarkupCodePreview>
|
21
|
+
|
22
|
+
<p className="docs-page__paragraph">
|
23
|
+
The Container is a convenient layout component with different layout options and support for external CSS classes.
|
24
|
+
The display model is <code>flex</code> by default, but can be changed with the <code>display</code> prop. It is
|
25
|
+
intended to be used with helper CSS classes to achieve desired styling options
|
26
|
+
</p>
|
27
|
+
|
28
|
+
<Markup.ReactMarkup>
|
29
|
+
<Markup.ReactMarkupPreview>
|
30
|
+
<p className="docs-page__paragraph">// Basic</p>
|
31
|
+
<div className='docs-page__content-row'>
|
32
|
+
<DropZone text="Drag one or more files here to upload them, or just click on the field.">
|
33
|
+
</DropZone>
|
34
|
+
</div>
|
35
|
+
|
36
|
+
<p className="docs-page__paragraph">// With heading</p>
|
37
|
+
<div className='docs-page__content-row'>
|
38
|
+
<DropZone heading="Nothing here yet" text="Drag one or more files here to upload them, or just click on the field.">
|
39
|
+
</DropZone>
|
40
|
+
</div>
|
41
|
+
|
42
|
+
<p className="docs-page__paragraph">// With icon</p>
|
43
|
+
<div className='docs-page__content-row'>
|
44
|
+
<DropZone icon={true} text="Drag one or more files here to upload them, or just click on the field.">
|
45
|
+
</DropZone>
|
46
|
+
</div>
|
47
|
+
|
48
|
+
<p className="docs-page__paragraph">// With heading & icon</p>
|
49
|
+
<div className='docs-page__content-row'>
|
50
|
+
<DropZone icon={true} heading="Nothing here yet" text="Drag one or more files here to upload them, or just click on the field.">
|
51
|
+
</DropZone>
|
52
|
+
</div>
|
53
|
+
|
54
|
+
</Markup.ReactMarkupPreview>
|
55
|
+
<Markup.ReactMarkupCode>{`
|
56
|
+
// Basic
|
57
|
+
|
58
|
+
<Container>
|
59
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
|
60
|
+
</Container>
|
61
|
+
|
62
|
+
// Usage examples
|
63
|
+
|
64
|
+
<Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
|
65
|
+
<span>Curabitur blandit tempus porttitor.</span>
|
66
|
+
<Button text="Test button" type="primary" onClick={()=> false} />
|
67
|
+
<Button text="Test button" type="highlight" onClick={()=> false} />
|
68
|
+
<ButtonGroup align="end">
|
69
|
+
<Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
|
70
|
+
<Button text="Submit" onClick={()=> false} type="primary" />
|
71
|
+
</ButtonGroup>
|
72
|
+
</Container>
|
73
|
+
|
74
|
+
<Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
|
75
|
+
<Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
|
76
|
+
<Text color='light'>
|
77
|
+
Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
|
78
|
+
</Text>
|
79
|
+
<ButtonGroup align="end">
|
80
|
+
<Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
|
81
|
+
<Button text="Submit" onClick={()=> false} type="primary" />
|
82
|
+
</ButtonGroup>
|
83
|
+
</Container>
|
84
|
+
|
85
|
+
<Container gap="large" theme='dark-ui' direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
|
86
|
+
<Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
|
87
|
+
<Text color='light'>
|
88
|
+
Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
|
89
|
+
</Text>
|
90
|
+
<ButtonGroup align="end">
|
91
|
+
<Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
|
92
|
+
<Button text="Submit" onClick={()=> false} type="primary" />
|
93
|
+
</ButtonGroup>
|
94
|
+
</Container>
|
95
|
+
|
96
|
+
`}
|
97
|
+
</Markup.ReactMarkupCode>
|
98
|
+
</Markup.ReactMarkup>
|
99
|
+
|
100
|
+
<h3 className="docs-page__h3">Props</h3>
|
101
|
+
<PropsList>
|
102
|
+
<Prop name='display' isRequired={false} type='flex | inline-flex | block' default='flex' description='Change the default display mode (flex).'/>
|
103
|
+
<Prop name='direction' isRequired={false} type='row | column' default='row' description='Change the flex-direction property.'/>
|
104
|
+
<Prop name='gap' isRequired={false} type='none | small | medium | large' default='none' description='Set the gap between elements inside the Container.'/>
|
105
|
+
<Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All items inside will inherit the theme of the Container if it is set.'/>
|
106
|
+
<Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
|
107
|
+
</PropsList>
|
108
|
+
</section>
|
109
|
+
)
|
110
|
+
}
|
111
|
+
}
|
@@ -0,0 +1,104 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
|
3
|
+
import * as Markup from '../../js/react';
|
4
|
+
|
5
|
+
import { Input, Select, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
|
6
|
+
import { DurationInput } from '../../../app-typescript/components/DurationInput';
|
7
|
+
|
8
|
+
interface IState {
|
9
|
+
inlineLabel: boolean;
|
10
|
+
required: boolean;
|
11
|
+
disabled: boolean;
|
12
|
+
invalid: boolean;
|
13
|
+
}
|
14
|
+
|
15
|
+
export default class DurationInputDoc extends React.Component<{}, IState> {
|
16
|
+
constructor(props) {
|
17
|
+
super(props);
|
18
|
+
this.state = {
|
19
|
+
inlineLabel: false,
|
20
|
+
required: true,
|
21
|
+
disabled: false,
|
22
|
+
invalid: false,
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
render() {
|
27
|
+
return (
|
28
|
+
<section className='docs-page__container'>
|
29
|
+
<h2 className='docs-page__h2'>Duration Input</h2>
|
30
|
+
<Markup.ReactMarkupCodePreview>{`
|
31
|
+
<DurationInput
|
32
|
+
label='Label'
|
33
|
+
info='info message'
|
34
|
+
disabled={this.state.disabled}
|
35
|
+
required={this.state.required}
|
36
|
+
invalid={this.state.invalid}
|
37
|
+
inlineLabel={this.state.inlineLabel}
|
38
|
+
onChange={(e) => {
|
39
|
+
console.log(e)
|
40
|
+
}}
|
41
|
+
/>
|
42
|
+
`}
|
43
|
+
</Markup.ReactMarkupCodePreview>
|
44
|
+
<p className='docs-page__paragraph'></p>
|
45
|
+
<Markup.ReactMarkup>
|
46
|
+
<Markup.ReactMarkupPreview>
|
47
|
+
<div className='docs-page__content-row docs-page__content-row--no-margin'>
|
48
|
+
<div className='form__row'>
|
49
|
+
<CheckGroup>
|
50
|
+
<Checkbox checked={this.state.required} label={{text:'Required input'}} onChange={(value) => {this.setState({required: value})}} />
|
51
|
+
<Checkbox checked={this.state.disabled} label={{text:'Disabled input'}} onChange={(value) => {this.setState({disabled: value})}} />
|
52
|
+
<Checkbox checked={this.state.invalid} label={{text:'Invalid input'}} onChange={(value) => {this.setState({invalid: value})}} />
|
53
|
+
<Checkbox checked={this.state.inlineLabel} label={{text:'Label positioned inline'}} onChange={(value) => {this.setState({inlineLabel: value})}} />
|
54
|
+
</CheckGroup>
|
55
|
+
</div>
|
56
|
+
|
57
|
+
<div className='form__row'>
|
58
|
+
<DurationInput
|
59
|
+
label='Label'
|
60
|
+
info='info message'
|
61
|
+
disabled={this.state.disabled}
|
62
|
+
required={this.state.required}
|
63
|
+
invalid={this.state.invalid}
|
64
|
+
inlineLabel={this.state.inlineLabel}
|
65
|
+
onChange={(e) => {
|
66
|
+
console.log(e)
|
67
|
+
}}
|
68
|
+
/>
|
69
|
+
</div>
|
70
|
+
</div>
|
71
|
+
|
72
|
+
</Markup.ReactMarkupPreview>
|
73
|
+
<Markup.ReactMarkupCode>{`
|
74
|
+
<DurationInput
|
75
|
+
label='Label'
|
76
|
+
info='info message'
|
77
|
+
disabled={this.state.disabled}
|
78
|
+
required={this.state.required}
|
79
|
+
invalid={this.state.invalid}
|
80
|
+
inlineLabel={this.state.inlineLabel}
|
81
|
+
onChange={(e) => {
|
82
|
+
console.log(e)
|
83
|
+
}}
|
84
|
+
/>
|
85
|
+
`}</Markup.ReactMarkupCode>
|
86
|
+
</Markup.ReactMarkup>
|
87
|
+
|
88
|
+
<h3 className='docs-page__h3'>Props</h3>
|
89
|
+
<PropsList>
|
90
|
+
<Prop name='hours' isRequired={false} type='number' default='00' description='Hours value'/>
|
91
|
+
<Prop name='minutes' isRequired={false} type='number' default='00' description='Minutes value'/>
|
92
|
+
<Prop name='seconds' isRequired={false} type='number' default='00' description='Seconds value'/>
|
93
|
+
<Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
|
94
|
+
<Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
|
95
|
+
<Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
|
96
|
+
<Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
|
97
|
+
<Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
|
98
|
+
<Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
|
99
|
+
<Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
|
100
|
+
</PropsList>
|
101
|
+
</section>
|
102
|
+
)
|
103
|
+
}
|
104
|
+
}
|
@@ -0,0 +1,106 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import * as Markup from '../../js/react';
|
3
|
+
import { PropsList, Prop, Heading } from '../../../app-typescript';
|
4
|
+
|
5
|
+
interface IProps {
|
6
|
+
children?: React.ReactNode;
|
7
|
+
}
|
8
|
+
|
9
|
+
export default class HeadingDoc extends React.Component<IProps> {
|
10
|
+
render() {
|
11
|
+
return (
|
12
|
+
<section className='docs-page__container'>
|
13
|
+
<h2 className='docs-page__h2'>Heading</h2>
|
14
|
+
|
15
|
+
<Markup.ReactMarkupCodePreview>{`
|
16
|
+
<Heading type='h2'>
|
17
|
+
Purus Dolor Ligula
|
18
|
+
</Heading>
|
19
|
+
`}
|
20
|
+
</Markup.ReactMarkupCodePreview>
|
21
|
+
|
22
|
+
<p className="docs-page__paragraph">Heading component. By choosing the type (h1, h2, h3...) appropriate HTML tags will be rendered, preserving the semantcs.</p>
|
23
|
+
|
24
|
+
<Markup.ReactMarkup>
|
25
|
+
<Markup.ReactMarkupPreview>
|
26
|
+
<p className="docs-page__paragraph">// Basic</p>
|
27
|
+
<div className='docs-page__content-row'>
|
28
|
+
<Heading type='h1'>Heading one example</Heading>
|
29
|
+
</div>
|
30
|
+
<div className='docs-page__content-row'>
|
31
|
+
<Heading type='h2'>Heading two example</Heading>
|
32
|
+
</div>
|
33
|
+
<div className='docs-page__content-row'>
|
34
|
+
<Heading type='h3'>Heading three example</Heading>
|
35
|
+
</div>
|
36
|
+
<div className='docs-page__content-row'>
|
37
|
+
<Heading type='h4'>Heading four example</Heading>
|
38
|
+
</div>
|
39
|
+
<div className='docs-page__content-row'>
|
40
|
+
<Heading type='h5'>Heading five example</Heading>
|
41
|
+
</div>
|
42
|
+
<div className='docs-page__content-row'>
|
43
|
+
<Heading type='h6'>Heading six example</Heading>
|
44
|
+
</div>
|
45
|
+
|
46
|
+
<p className="docs-page__paragraph">// Variations</p>
|
47
|
+
|
48
|
+
<div className='docs-page__content-row'>
|
49
|
+
<Heading fontStyle='serif' color='light' weight='strong' type='h1'>
|
50
|
+
Maecenas faucibus mollis interdum.
|
51
|
+
</Heading>
|
52
|
+
</div>
|
53
|
+
<div className='docs-page__content-row'>
|
54
|
+
<Heading type='h2' style='italic' align='end'>
|
55
|
+
Cras mattis consectetur purus sit amet fermentum.
|
56
|
+
</Heading>
|
57
|
+
</div>
|
58
|
+
<div className='docs-page__content-row'>
|
59
|
+
<Heading fontStyle='serif' type='h3' align='center' color='lighter'>
|
60
|
+
Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla.
|
61
|
+
</Heading>
|
62
|
+
</div>
|
63
|
+
|
64
|
+
</Markup.ReactMarkupPreview>
|
65
|
+
<Markup.ReactMarkupCode>{`
|
66
|
+
// Basic
|
67
|
+
|
68
|
+
<Heading type='h1'>Heading one example</Heading>
|
69
|
+
<Heading type='h2'>Heading two example</Heading>
|
70
|
+
<Heading type='h3'>Heading three example</Heading>
|
71
|
+
<Heading type='h4'>Heading four example</Heading>
|
72
|
+
<Heading type='h5'>Heading five example</Heading>
|
73
|
+
<Heading type='h6'>Heading six example</Heading>
|
74
|
+
|
75
|
+
// Variations
|
76
|
+
|
77
|
+
<Heading fontStyle='serif' color='light' weight='strong' type='h1'>
|
78
|
+
Maecenas faucibus mollis interdum.
|
79
|
+
</Heading>
|
80
|
+
|
81
|
+
<Heading type='h2' style='italic' align='end'>
|
82
|
+
Cras mattis consectetur purus sit amet fermentum.
|
83
|
+
</Heading>
|
84
|
+
|
85
|
+
<Heading fontStyle='serif' type='h3' align='center' color='lighter'>
|
86
|
+
Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla.
|
87
|
+
</Heading>
|
88
|
+
|
89
|
+
`}
|
90
|
+
</Markup.ReactMarkupCode>
|
91
|
+
</Markup.ReactMarkup>
|
92
|
+
|
93
|
+
<h3 className="docs-page__h3">Props</h3>
|
94
|
+
<PropsList>
|
95
|
+
<Prop name='type' isRequired={true} type='h1 | h2 | h3 | h4 | h5 | h6' default='/' description='Heading type (eg. H1, H2, H3... etc.)'/>
|
96
|
+
<Prop name='weight' isRequired={false} type='normal | medium | strong' default='normal' description='Change the default font weight.'/>
|
97
|
+
<Prop name='style' isRequired={false} type='normal | italic' default='normal' description='Change the default text style.'/>
|
98
|
+
<Prop name='align' isRequired={false} type='start | end | center | justify' default='start' description='Text-align'/>
|
99
|
+
<Prop name='fontStyle' isRequired={false} type='sans | serif' default='sans' description='Choose between default sans (Roboto) and serif (Merriweather) font styles. '/>
|
100
|
+
<Prop name='color' isRequired={false} type='normal | light | lighter' default='normal' description='Choose a different text colour. Additional two lighter shades are available.'/>
|
101
|
+
<Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
|
102
|
+
</PropsList>
|
103
|
+
</section>
|
104
|
+
)
|
105
|
+
}
|
106
|
+
}
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
2
2
|
|
3
3
|
import * as Markup from '../../js/react';
|
4
4
|
|
5
|
-
import { IconButton, Prop, PropsList, Tooltip } from '../../../app-typescript';
|
5
|
+
import { IconButton, Prop, PropsList, Tooltip, Container, ButtonGroup } from '../../../app-typescript';
|
6
6
|
|
7
7
|
export default class IconButtonDoc extends React.Component {
|
8
8
|
render() {
|
@@ -20,38 +20,64 @@ export default class IconButtonDoc extends React.Component {
|
|
20
20
|
<p className="docs-page__paragraph">// Default</p>
|
21
21
|
<p className="docs-page__paragraph--small">Hover buttons to see tooltips.</p>
|
22
22
|
<div className="docs-page__content-row docs-page__content-row--white">
|
23
|
-
<
|
24
|
-
|
25
|
-
</Tooltip>
|
26
|
-
<IconButton icon='plus-large' ariaValue='Add' onClick ={()=> false} />
|
23
|
+
<IconButton icon='close-small' disabled ariaValue='Close' onClick={()=> false} />
|
24
|
+
<IconButton icon='plus-large' ariaValue='Add' onClick={()=> false} />
|
27
25
|
<IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
|
28
26
|
<IconButton icon='trash' ariaValue='Move to trash' onClick={()=> false} />
|
29
|
-
<
|
30
|
-
<IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
|
31
|
-
</Tooltip>
|
27
|
+
<IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
|
32
28
|
</div>
|
33
29
|
<p className="docs-page__paragraph">// Small</p>
|
34
30
|
<div className="docs-page__content-row docs-page__content-row--white sd-d-flex ">
|
35
|
-
<IconButton size='small' icon='plus-large' ariaValue='Add' onClick
|
31
|
+
<IconButton size='small' icon='plus-large' ariaValue='Add' onClick={()=> false} />
|
36
32
|
<span className="sd-margin-x--auto"></span>
|
37
33
|
<IconButton size='small' icon='close-small' ariaValue='Close' onClick={()=> false} />
|
38
34
|
</div>
|
35
|
+
|
36
|
+
<p className="docs-page__paragraph">// Xtra large, 'outline' style</p>
|
37
|
+
<Container gap="large" className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--3'>
|
38
|
+
<ButtonGroup align='center' spaces='loose'>
|
39
|
+
<IconButton style='outline' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
|
40
|
+
<IconButton style='outline' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
|
41
|
+
<IconButton style='outline' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
|
42
|
+
</ButtonGroup>
|
43
|
+
</Container>
|
44
|
+
|
45
|
+
<p className="docs-page__paragraph">// Xtra large, outlineWhite style</p>
|
46
|
+
<p className="docs-page__paragraph--small">The 'outlineWhite' syle forces a white icon and outline. It can be used on dark overlays for example.</p>
|
47
|
+
<div style={{background: 'hsla(214, 13%, 12%, 1)'}} className="sd-container sd-container--flex sd-container--gap-large sd-radius--medium sd-shadow--z2 sd-padding--3">
|
48
|
+
<ButtonGroup align='center' spaces='loose'>
|
49
|
+
<IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Edit metadata' onClick={()=> false} />
|
50
|
+
<IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Edit image' onClick={()=> false} />
|
51
|
+
<IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Edit crops' onClick={()=> false} />
|
52
|
+
</ButtonGroup>
|
53
|
+
</div>
|
54
|
+
|
39
55
|
</Markup.ReactMarkupPreview>
|
40
56
|
<Markup.ReactMarkupCode>{`
|
41
|
-
<
|
42
|
-
|
43
|
-
|
44
|
-
<IconButton icon='
|
45
|
-
<IconButton icon='
|
46
|
-
<IconButton icon='trash' ariaValue='trash' onClick={()=> false} />
|
47
|
-
<Tooltip text='My tooltip is on right.' flow='right'>
|
48
|
-
<IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
|
49
|
-
</Tooltip>
|
57
|
+
<IconButton icon='close-small' disabled ariaValue='Close' onClick={()=> false} />
|
58
|
+
<IconButton icon='plus-large' ariaValue='Add' onClick={()=> false} />
|
59
|
+
<IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
|
60
|
+
<IconButton icon='trash' ariaValue='Move to trash' onClick={()=> false} />
|
61
|
+
<IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
|
50
62
|
|
51
63
|
// Small
|
52
|
-
<IconButton size='small' icon='plus-large' ariaValue='Add' onClick
|
64
|
+
<IconButton size='small' icon='plus-large' ariaValue='Add' onClick={()=> false} />
|
53
65
|
...
|
54
66
|
<IconButton size='small' icon='close-small' ariaValue='Close' onClick={()=> false} />
|
67
|
+
|
68
|
+
// Xtra large, 'outline' style
|
69
|
+
<ButtonGroup align='center' spaces='loose'>
|
70
|
+
<IconButton style='outline' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
|
71
|
+
<IconButton style='outline' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
|
72
|
+
<IconButton style='outline' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
|
73
|
+
</ButtonGroup>
|
74
|
+
|
75
|
+
// Xtra large, outlineWhite style
|
76
|
+
<ButtonGroup align='center' spaces='loose'>
|
77
|
+
<IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Edit metadata' onClick={()=> false} />
|
78
|
+
<IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Edit image' onClick={()=> false} />
|
79
|
+
<IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Edit crops' onClick={()=> false} />
|
80
|
+
</ButtonGroup>
|
55
81
|
`}
|
56
82
|
</Markup.ReactMarkupCode>
|
57
83
|
</Markup.ReactMarkup>
|
@@ -59,8 +85,12 @@ export default class IconButtonDoc extends React.Component {
|
|
59
85
|
<h3 className="docs-page__h3">Props</h3>
|
60
86
|
<PropsList>
|
61
87
|
<Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
|
62
|
-
<Prop name='ariaValue' isRequired={true} type='string' default='/' description='Description for screen readers'/>
|
63
|
-
<Prop name='size' isRequired={false} type='small' default='
|
88
|
+
<Prop name='ariaValue' isRequired={true} type='string' default='/' description='Description for screen readers, also used as the ToolTip value.'/>
|
89
|
+
<Prop name='size' isRequired={false} type='default | small | x-large' default='default' description='Creates an IconButton with a smaller or larger footprint.'/>
|
90
|
+
<Prop name='style' isRequired={false} type='default | outline | outlineWhite' default='default' description='Different styling options.'/>
|
91
|
+
<Prop name='disabled' isRequired={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
|
92
|
+
<Prop name='toolTipFlow' isRequired={false} type='top | left | right | down' default='top' description='Defines the possition of the ToolTip.'/>
|
93
|
+
<Prop name='toolTipAppend' isRequired={false} type='boolean' default='false' description='Uses the append to body version of the ToolTips if set to true.'/>
|
64
94
|
</PropsList>
|
65
95
|
</section>
|
66
96
|
)
|
package/dist/react/IconFont.tsx
CHANGED
@@ -3,19 +3,20 @@ import * as Markup from "../../js/react";
|
|
3
3
|
|
4
4
|
import { Icon, Prop, PropsList } from '../../../app-typescript';
|
5
5
|
|
6
|
+
//@ts-ignore
|
6
7
|
import * as iconFont from '../../../app/styles/_icon-font.scss';
|
7
8
|
|
8
|
-
export default class IconFontDoc extends React.PureComponent{
|
9
|
-
render(){
|
9
|
+
export default class IconFontDoc extends React.PureComponent {
|
10
|
+
render() {
|
10
11
|
const array = iconFont.icon.split(', ');
|
11
12
|
const icons = array.map((icon, index) =>
|
12
13
|
<li key={index}>
|
13
|
-
<Icon name={icon}/>
|
14
|
+
<Icon name={icon} />
|
14
15
|
<span>{icon}</span>
|
15
16
|
</li>
|
16
|
-
|
17
|
-
return(
|
18
|
-
<section className="docs-page__container">
|
17
|
+
);
|
18
|
+
return (
|
19
|
+
<section className="docs-page__container">
|
19
20
|
<h2 className="docs-page__h2 docs-page__text-align--center">Icon font</h2>
|
20
21
|
<Markup.ReactMarkupCodePreview>{`
|
21
22
|
<Icon name="photo" />
|
@@ -27,12 +27,34 @@ export default class IconLabelDoc extends React.Component {
|
|
27
27
|
<IconLabel text='Label sd-green' icon='video' type='sd-green' />
|
28
28
|
|
29
29
|
<p className="docs-page__paragraph">// Translucent</p>
|
30
|
-
<IconLabel style='translucent' text='
|
31
|
-
<IconLabel style='translucent' text='
|
30
|
+
<IconLabel innerLabel='Start:' style='translucent' text='00:45' type='success' icon='time' />
|
31
|
+
<IconLabel innerLabel='end:' style='translucent' text='00:30' type='warning' icon='time' />
|
32
32
|
<IconLabel style='translucent' text='Label alert' type='alert' icon='time' />
|
33
33
|
<IconLabel style='translucent' text='Label highlight' type='highlight' icon='calendar' />
|
34
34
|
<IconLabel style='translucent' text='Label sd-green' type='sd-green' icon='calendar' />
|
35
35
|
<IconLabel style='translucent' text='Default label' icon='bell' />
|
36
|
+
<br />
|
37
|
+
<IconLabel innerLabel='Start:' style='translucent' text='00:45' type='success'/>
|
38
|
+
<IconLabel innerLabel='end:' style='translucent' text='00:30' type='warning'/>
|
39
|
+
<IconLabel style='translucent' text='Label alert' type='alert' />
|
40
|
+
|
41
|
+
<p className="docs-page__paragraph">// Translucent & Large</p>
|
42
|
+
<IconLabel innerLabel='Start:' size='large' style='translucent' text='00:45' type='success' icon='time' />
|
43
|
+
<IconLabel innerLabel='Start:' size='large' style='translucent' text='00:55' type='warning' icon='time' />
|
44
|
+
<IconLabel innerLabel='Start:' size='large' style='translucent' text='00:15' type='alert' icon='time' />
|
45
|
+
<br />
|
46
|
+
<IconLabel innerLabel='Start:' size='large' style='translucent' text='18:30' type='success' />
|
47
|
+
<IconLabel innerLabel='End:' size='large' style='translucent' text='20:30' type='highlight' />
|
48
|
+
<IconLabel innerLabel='Duration:' size='large' style='translucent' text='00:30' type='primary' />
|
49
|
+
|
50
|
+
<p className="docs-page__paragraph">// Translucent & Small</p>
|
51
|
+
<IconLabel innerLabel='Start:' size='small' style='translucent' text='00:45' type='success' icon='time' />
|
52
|
+
<IconLabel innerLabel='Start:' size='small' style='translucent' text='00:55' type='warning' icon='time' />
|
53
|
+
<IconLabel innerLabel='Start:' size='small' style='translucent' text='00:15' type='alert' icon='time' />
|
54
|
+
<br />
|
55
|
+
<IconLabel innerLabel='Start:' size='small' style='translucent' text='18:30' type='success' />
|
56
|
+
<IconLabel innerLabel='End:' size='small' style='translucent' text='20:30' type='highlight' />
|
57
|
+
<IconLabel innerLabel='Duration:' size='small' style='translucent' text='00:30' type='primary' />
|
36
58
|
</div>
|
37
59
|
|
38
60
|
</Markup.ReactMarkupPreview>
|
@@ -0,0 +1,65 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as Markup from "../../js/react";
|
3
|
+
import { IconPicker, PropsList, Prop } from "../../../app-typescript";
|
4
|
+
|
5
|
+
const IconPickerDocs = () => {
|
6
|
+
|
7
|
+
const [value, setValue] = React.useState('amp');
|
8
|
+
|
9
|
+
return (
|
10
|
+
<section className="docs-page__container">
|
11
|
+
<h2 className="docs-page__h2">Icon Picker</h2>
|
12
|
+
<Markup.ReactMarkupCodePreview>{`
|
13
|
+
<IconPicker
|
14
|
+
label="Icon"
|
15
|
+
filterPlaceholder="Search..."
|
16
|
+
translateFunction={(text: string): string => text}
|
17
|
+
value={value}
|
18
|
+
onChange={(value) => {
|
19
|
+
setValue(value);
|
20
|
+
}}
|
21
|
+
/>
|
22
|
+
`}
|
23
|
+
</Markup.ReactMarkupCodePreview>
|
24
|
+
<Markup.ReactMarkup>
|
25
|
+
<Markup.ReactMarkupPreview>
|
26
|
+
<IconPicker
|
27
|
+
label="Icon"
|
28
|
+
filterPlaceholder="Search..."
|
29
|
+
translateFunction={(text: string): string => text}
|
30
|
+
value={value}
|
31
|
+
onChange={(value) => {
|
32
|
+
setValue(value);
|
33
|
+
}}
|
34
|
+
/>
|
35
|
+
</Markup.ReactMarkupPreview>
|
36
|
+
<Markup.ReactMarkupCode>{`
|
37
|
+
|
38
|
+
const [value, setValue] = React.useState("amp");
|
39
|
+
...
|
40
|
+
<IconPicker
|
41
|
+
label="Icon"
|
42
|
+
filterPlaceholder="Search..."
|
43
|
+
translateFunction={(text: string): string => text}
|
44
|
+
value={value}
|
45
|
+
onChange={(value) => {
|
46
|
+
setValue(value);
|
47
|
+
}}
|
48
|
+
/>
|
49
|
+
`}</Markup.ReactMarkupCode>
|
50
|
+
</Markup.ReactMarkup>
|
51
|
+
|
52
|
+
<h3 className="docs-page__h3">Props</h3>
|
53
|
+
<PropsList>
|
54
|
+
<Prop name='label' isRequired={false} type='string' default='Icon' description='Select label' />
|
55
|
+
<Prop name='filterPlaceholder' isRequired={false} type='string' default='Search...' description='Filter placeholder' />
|
56
|
+
<Prop name='translateFunction' isRequired={false} type='function' default='(text) => text' description='eg: gettext' />
|
57
|
+
<Prop name='value' isRequired={true} type='string' default='null' description='Current value' />
|
58
|
+
<Prop name='onChange' isRequired={true} type='Function' default='null' description='Callback onChange event ' />
|
59
|
+
</PropsList>
|
60
|
+
|
61
|
+
</section>
|
62
|
+
)
|
63
|
+
}
|
64
|
+
|
65
|
+
export default IconPickerDocs;
|