superdesk-ui-framework 3.0.0-beta.0 → 3.0.0-rc12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/fonts/sd_big-icons.eot +0 -0
- package/app/fonts/sd_big-icons.svg +55 -53
- package/app/fonts/sd_big-icons.ttf +0 -0
- package/app/fonts/sd_big-icons.woff +0 -0
- package/app/fonts/sd_icons.eot +0 -0
- package/app/fonts/sd_icons.svg +15 -7
- package/app/fonts/sd_icons.ttf +0 -0
- package/app/fonts/sd_icons.woff +0 -0
- package/app/img/SD-logo.svg +52 -0
- package/app/img/dots.svg +3 -0
- package/app/img/spinner.svg +3 -0
- package/app/img/themes/theme-base.svg +1 -0
- package/app/img/themes/theme-contrast.svg +45 -0
- package/app/img/themes/theme-dark.svg +1 -0
- package/app/img/themes/theme-light.svg +1 -0
- package/app/index.js +1 -1
- package/app/scripts/modals.js +22 -9
- package/app/scripts/toggleBoxNext.js +1 -1
- package/app/styles/_accessibility.scss +312 -4
- package/app/styles/_alerts.scss +57 -19
- package/app/styles/_avatar.scss +25 -1
- package/app/styles/_badge.scss +2 -2
- package/app/styles/_big-icon-font.scss +64 -24
- package/app/styles/_boxed-list.scss +67 -21
- package/app/styles/_buttons.scss +441 -333
- package/app/styles/_carousel.scss +17 -11
- package/app/styles/_content-divider.scss +63 -8
- package/app/styles/_design-tokens.scss +2 -0
- package/app/styles/_hamburger.scss +160 -0
- package/app/styles/_helpers.scss +221 -34
- package/app/styles/_icon-font.scss +351 -307
- package/app/styles/_icon-labels.scss +66 -10
- package/app/styles/_labels.scss +12 -7
- package/app/styles/_loaders.scss +13 -0
- package/app/styles/_master-desk.scss +8 -7
- package/app/styles/_mixins.scss +13 -3
- package/app/styles/_modals.scss +10 -31
- package/app/styles/_normalize.scss +5 -0
- package/app/styles/_panel-info.scss +19 -14
- package/app/styles/_sd-tag-input.scss +280 -219
- package/app/styles/_simple-list.scss +37 -17
- package/app/styles/_spinner.scss +46 -0
- package/app/styles/_table-list.scss +348 -0
- package/app/styles/_tabs.scss +6 -8
- package/app/styles/_tag-labels.scss +11 -2
- package/app/styles/_thumb-carousel.scss +11 -10
- package/app/styles/_toggle-box.scss +46 -12
- package/app/styles/_toggle-button.scss +42 -0
- package/app/styles/_tooltips.scss +3 -3
- package/app/styles/_variables.scss +0 -1
- package/app/styles/app.scss +15 -2
- package/app/styles/components/_card-item.scss +33 -21
- package/app/styles/components/_list-item.scss +63 -35
- package/app/styles/components/_sd-collapse-box.scss +6 -6
- package/app/styles/components/_sd-comment-box.scss +8 -4
- package/app/styles/components/_sd-dropzone.scss +114 -0
- package/app/styles/components/_sd-editor-popup.scss +4 -4
- package/app/styles/components/_sd-grid-item.scss +32 -18
- package/app/styles/components/_sd-media-carousel.scss +37 -2
- package/app/styles/components/_sd-notification-panel.scss +48 -0
- package/app/styles/components/_sd-photo-preview.scss +3 -3
- package/app/styles/components/_sd-searchbar.scss +12 -98
- package/app/styles/components/_subnav.scss +464 -435
- package/app/styles/components/_theme-selector.scss +189 -0
- package/app/styles/design-tokens/_design-tokens-general.scss +81 -0
- package/app/styles/{variables → design-tokens}/_new-colors.scss +68 -30
- package/app/styles/dropdowns/_basic-dropdown.scss +36 -3
- package/app/styles/editor/_editor-buttons.scss +54 -0
- package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
- package/app/styles/form-elements/_checkbox.scss +85 -58
- package/app/styles/form-elements/_forms-general.scss +171 -21
- package/app/styles/form-elements/_input-wrap.scss +138 -0
- package/app/styles/form-elements/_inputs.scss +602 -104
- package/app/styles/form-elements/_select-grid.scss +79 -0
- package/app/styles/grids/_basic-grid.scss +52 -26
- package/app/styles/grids/_grid-layout.scss +207 -66
- package/app/styles/grids/_layout-grid.scss +4 -4
- package/app/styles/grids/_sd-kanban-list.scss +2 -2
- package/app/styles/interface-elements/_side-panel.scss +88 -59
- package/app/styles/layout/_basic-layout.scss +3 -6
- package/app/styles/layout/_container.scss +35 -0
- package/app/styles/layout/_editor.scss +404 -0
- package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
- package/app/styles/menus/_sd-left-navigation.scss +38 -3
- package/app/styles/menus/_sd-sidebar-menu.scss +109 -14
- package/app/styles/menus/_sd-top-menu.scss +19 -5
- package/app/styles/pr-superdesk-theme.scss +3 -0
- package/app/styles/primereact/_pr-datepicker.scss +62 -9
- package/app/styles/primereact/_pr-dialog.scss +44 -7
- package/app/styles/primereact/_pr-dropdown.scss +170 -7
- package/app/styles/primereact/_pr-general.scss +4 -0
- package/app/styles/primereact/_pr-menu.scss +6 -5
- package/app/styles/primereact/_pr-skeleton.scss +35 -0
- package/app/styles/variables/_colors.scss +23 -473
- package/app/styles/variables/_dimensions.scss +85 -1
- package/app/styles/variables/_form-elements.scss +0 -2
- package/app-typescript/components/Alert.tsx +16 -1
- package/app-typescript/components/Avatar.tsx +21 -0
- package/app-typescript/components/Badge.tsx +3 -2
- package/app-typescript/components/Button.tsx +7 -1
- package/app-typescript/components/ButtonGroup.tsx +5 -4
- package/app-typescript/components/Carousel.tsx +1 -1
- package/app-typescript/components/CheckButtonGroup.tsx +19 -5
- package/app-typescript/components/CheckGroup.tsx +2 -1
- package/app-typescript/components/Checkbox.tsx +7 -3
- package/app-typescript/components/CheckboxButton.tsx +9 -2
- package/app-typescript/components/ContentDivider.tsx +3 -0
- package/app-typescript/components/CreateButton.tsx +38 -0
- package/app-typescript/components/DatePicker.tsx +77 -38
- package/app-typescript/components/DonutChart.tsx +1 -1
- package/app-typescript/components/DropZone.tsx +89 -0
- package/app-typescript/components/Dropdown.tsx +133 -80
- package/app-typescript/components/DurationInput.tsx +400 -0
- package/app-typescript/components/Editor/EditorButton.tsx +34 -0
- package/app-typescript/components/EmptyState.tsx +2 -1
- package/app-typescript/components/Form/FormGroup.tsx +33 -0
- package/app-typescript/components/Form/FormItem.tsx +20 -0
- package/app-typescript/components/Form/FormLabel.tsx +29 -0
- package/app-typescript/components/Form/FormRow.tsx +40 -0
- package/app-typescript/components/Form/FormRowNew.tsx +41 -0
- package/app-typescript/components/Form/FormText.tsx +15 -0
- package/app-typescript/components/Form/InputBase.tsx +95 -0
- package/app-typescript/components/Form/InputNew.tsx +107 -0
- package/app-typescript/components/Form/InputWrapper.tsx +79 -0
- package/app-typescript/components/Form/index.tsx +9 -0
- package/app-typescript/components/Icon.tsx +4 -2
- package/app-typescript/components/IconButton.tsx +30 -12
- package/app-typescript/components/IconLabel.tsx +8 -1
- package/app-typescript/components/IconPicker.tsx +277 -0
- package/app-typescript/components/Input.tsx +67 -35
- package/app-typescript/components/Label.tsx +65 -10
- package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringContainer.tsx +28 -0
- package/app-typescript/components/Layouts/AuthoringFrame.tsx +73 -0
- package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +34 -0
- package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
- package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
- package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
- package/app-typescript/components/Layouts/AuthoringMain.tsx +52 -0
- package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -0
- package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
- package/app-typescript/components/Layouts/Container.tsx +30 -0
- package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
- package/app-typescript/components/Layouts/CoreLayout.tsx +63 -0
- package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
- package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
- package/app-typescript/components/Layouts/CoreLayoutMain.tsx +22 -0
- package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
- package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
- package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
- package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
- package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
- package/app-typescript/components/Layouts/Layout.tsx +33 -0
- package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
- package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
- package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
- package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
- package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
- package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
- package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
- package/app-typescript/components/Layouts/Panel.tsx +208 -0
- package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
- package/app-typescript/components/Layouts/index.tsx +43 -0
- package/app-typescript/components/LeftMenu.tsx +116 -31
- package/app-typescript/components/ListItemLoader.tsx +30 -0
- package/app-typescript/components/Lists/BoxedList.tsx +169 -0
- package/app-typescript/components/Lists/ContentList.tsx +133 -0
- package/app-typescript/components/Lists/SimpleList.tsx +54 -0
- package/app-typescript/components/Lists/TableList.tsx +405 -0
- package/app-typescript/components/Lists/index.tsx +2 -0
- package/app-typescript/components/Menu.tsx +33 -9
- package/app-typescript/components/Modal.tsx +31 -18
- package/app-typescript/components/MultiSelect.tsx +99 -0
- package/app-typescript/components/NavButton.tsx +6 -1
- package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
- package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
- package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
- package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
- package/app-typescript/components/Navigation/index.tsx +3 -0
- package/app-typescript/components/RadioButtonGroup.tsx +113 -0
- package/app-typescript/components/RadioGroup.tsx +69 -0
- package/app-typescript/components/SearchBar.tsx +106 -0
- package/app-typescript/components/Select.tsx +31 -31
- package/app-typescript/components/SelectGrid.tsx +233 -0
- package/app-typescript/components/SelectWithTemplate.tsx +32 -7
- package/app-typescript/components/SidebarMenu.tsx +68 -0
- package/app-typescript/components/Skeleton.tsx +48 -0
- package/app-typescript/components/SlidingToolbar.tsx +8 -2
- package/app-typescript/components/Spacer.tsx +87 -0
- package/app-typescript/components/Spinner.tsx +32 -0
- package/app-typescript/components/SubNav.tsx +25 -4
- package/app-typescript/components/Switch.tsx +34 -12
- package/app-typescript/components/SwitchGroup.tsx +2 -1
- package/app-typescript/components/Tag.tsx +31 -7
- package/app-typescript/components/Text/Heading.tsx +67 -0
- package/app-typescript/components/Text/Text.tsx +36 -0
- package/app-typescript/components/Text/Time.tsx +34 -0
- package/app-typescript/components/ThemeSelector.tsx +113 -0
- package/app-typescript/components/TimePicker.tsx +38 -15
- package/app-typescript/components/Togglebox.tsx +9 -7
- package/app-typescript/components/Tooltip.tsx +7 -5
- package/app-typescript/components/TreeSelect.tsx +664 -0
- package/app-typescript/components/WithSizeObserver.tsx +88 -0
- package/app-typescript/helpers.tsx +3 -0
- package/app-typescript/index.ts +30 -3
- package/dist/SD-logo.svg +52 -0
- package/dist/avatar-2.jpg +0 -0
- package/dist/avatar-3.jpg +0 -0
- package/dist/avatar-4.jpg +0 -0
- package/dist/avatar-5.jpg +0 -0
- package/dist/avatar-6.jpg +0 -0
- package/dist/components/basic-grid.html +1 -1
- package/dist/components/checkbox.html +1 -1
- package/dist/components/modals.html +1 -0
- package/dist/dots.svg +3 -0
- package/dist/examples.bundle.css +8916 -1617
- package/dist/examples.bundle.js +99314 -71560
- package/dist/playgrounds/accessible-theme-test.html +1 -1
- package/dist/playgrounds/boxed-list.html +1 -1
- package/dist/playgrounds/cards.html +9 -4
- package/dist/playgrounds/editor-3-test.html +15 -0
- package/dist/playgrounds/form-layout.html +9 -7
- package/dist/playgrounds/layout-test-2.html +1 -1
- package/dist/playgrounds/list-item-test.html +1 -1
- package/dist/playgrounds/master-desk.html +2 -4
- package/dist/playgrounds/media-carousel.html +1 -1
- package/dist/playgrounds/photo-desk.html +1 -1
- package/dist/playgrounds/planning.html +1 -1
- package/dist/playgrounds/publish.html +1 -1
- package/dist/playgrounds/publisher-content-analytics.html +1 -1
- package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
- package/dist/playgrounds/publisher-content-list-manual.html +1 -1
- package/dist/playgrounds/publisher-content-lists.html +1 -1
- package/dist/playgrounds/publisher-dashboard.html +1 -1
- package/dist/playgrounds/publisher-output-control.html +1 -1
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +156 -0
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
- package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
- package/dist/playgrounds/react-playgrounds/Index.tsx +8 -1
- package/dist/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
- package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
- package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +631 -24
- package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
- package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
- package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
- package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
- package/dist/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
- package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
- package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
- package/dist/playgrounds/swimlane-view.html +1 -1
- package/dist/playgrounds/toasts.html +1 -1
- package/dist/playgrounds/video-editor.html +1 -1
- package/dist/react/Alerts.tsx +91 -18
- package/dist/react/Avatar.tsx +314 -127
- package/dist/react/Badges.tsx +18 -0
- package/dist/react/BoxedList.tsx +362 -0
- package/dist/react/ButtonGroups.tsx +66 -65
- package/dist/react/Buttons.tsx +65 -113
- package/dist/react/Carousel.tsx +2 -3
- package/dist/react/Checkboxs.tsx +66 -25
- package/dist/react/Container.tsx +143 -0
- package/dist/react/ContentDivider.tsx +22 -18
- package/dist/react/ContentList.tsx +462 -0
- package/dist/react/CreateButton.tsx +71 -0
- package/dist/react/DatePicker.tsx +31 -6
- package/dist/react/DropZone.tsx +111 -0
- package/dist/react/Dropdowns.tsx +580 -48
- package/dist/react/DurationInput.tsx +108 -0
- package/dist/react/Heading.tsx +106 -0
- package/dist/react/IconButtons.tsx +51 -21
- package/dist/react/IconFont.tsx +7 -6
- package/dist/react/IconLabels.tsx +24 -2
- package/dist/react/IconPicker.tsx +65 -0
- package/dist/react/Index.tsx +125 -19
- package/dist/react/Inputs.tsx +289 -6
- package/dist/react/Labels.tsx +51 -1
- package/dist/react/LeftNavigations.tsx +194 -15
- package/dist/react/ListItems.tsx +34 -0
- package/dist/react/Modal.tsx +8 -7
- package/dist/react/MultiSelect.tsx +201 -0
- package/dist/react/NavButtons.tsx +35 -5
- package/dist/react/Panel.tsx +366 -0
- package/dist/react/QuickNavigationBar.tsx +142 -0
- package/dist/react/RadioGroup.tsx +351 -0
- package/dist/react/SelectGrid.tsx +121 -0
- package/dist/react/SelectWithTemplate.tsx +6 -1
- package/dist/react/Selects.tsx +57 -0
- package/dist/react/SimpleList.tsx +148 -0
- package/dist/react/SubNav.tsx +65 -18
- package/dist/react/TableList.tsx +161 -0
- package/dist/react/Tags.tsx +57 -5
- package/dist/react/Text.tsx +134 -0
- package/dist/react/TimePicker.tsx +22 -12
- package/dist/react/Togglebox.tsx +1 -1
- package/dist/react/TreeSelect.tsx +422 -0
- package/dist/react/WithSizeObserver.tsx +44 -0
- package/dist/react/tree-select/TreeSelect.tsx +273 -0
- package/dist/react/tree-select/example-1.tsx +71 -0
- package/dist/react/tree-select/example-2.tsx +59 -0
- package/dist/react.html +4 -0
- package/dist/sd_big-icons.eot +0 -0
- package/dist/sd_big-icons.svg +55 -53
- package/dist/sd_big-icons.ttf +0 -0
- package/dist/sd_big-icons.woff +0 -0
- package/dist/sd_icons.eot +0 -0
- package/dist/sd_icons.svg +15 -7
- package/dist/sd_icons.ttf +0 -0
- package/dist/sd_icons.woff +0 -0
- package/dist/superdesk-ui.bundle.css +55688 -25164
- package/dist/superdesk-ui.bundle.js +89363 -66822
- package/dist/vendor.bundle.js +25685 -25663
- package/examples/css/docs-page.css +103 -33
- package/examples/img/avatar-2.jpg +0 -0
- package/examples/img/avatar-3.jpg +0 -0
- package/examples/img/avatar-4.jpg +0 -0
- package/examples/img/avatar-5.jpg +0 -0
- package/examples/img/avatar-6.jpg +0 -0
- package/examples/index.js +32 -0
- package/examples/pages/components/basic-grid.html +1 -1
- package/examples/pages/components/checkbox.html +1 -1
- package/examples/pages/components/modals.html +1 -0
- package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
- package/examples/pages/playgrounds/boxed-list.html +1 -1
- package/examples/pages/playgrounds/cards.html +9 -4
- package/examples/pages/playgrounds/editor-3-test.html +15 -0
- package/examples/pages/playgrounds/form-layout.html +9 -7
- package/examples/pages/playgrounds/layout-test-2.html +1 -1
- package/examples/pages/playgrounds/list-item-test.html +1 -1
- package/examples/pages/playgrounds/master-desk.html +2 -4
- package/examples/pages/playgrounds/media-carousel.html +1 -1
- package/examples/pages/playgrounds/photo-desk.html +1 -1
- package/examples/pages/playgrounds/planning.html +1 -1
- package/examples/pages/playgrounds/publish.html +1 -1
- package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
- package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
- package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
- package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
- package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
- package/examples/pages/playgrounds/publisher-output-control.html +1 -1
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +156 -0
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
- package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
- package/examples/pages/playgrounds/react-playgrounds/Index.tsx +8 -1
- package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
- package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
- package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +631 -24
- package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
- package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
- package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
- package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
- package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
- package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
- package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
- package/examples/pages/playgrounds/swimlane-view.html +1 -1
- package/examples/pages/playgrounds/toasts.html +1 -1
- package/examples/pages/playgrounds/video-editor.html +1 -1
- package/examples/pages/react/Alerts.tsx +91 -18
- package/examples/pages/react/Avatar.tsx +314 -127
- package/examples/pages/react/Badges.tsx +18 -0
- package/examples/pages/react/BoxedList.tsx +362 -0
- package/examples/pages/react/ButtonGroups.tsx +66 -65
- package/examples/pages/react/Buttons.tsx +65 -113
- package/examples/pages/react/Carousel.tsx +2 -3
- package/examples/pages/react/Checkboxs.tsx +66 -25
- package/examples/pages/react/Container.tsx +143 -0
- package/examples/pages/react/ContentDivider.tsx +22 -18
- package/examples/pages/react/ContentList.tsx +462 -0
- package/examples/pages/react/CreateButton.tsx +71 -0
- package/examples/pages/react/DatePicker.tsx +31 -6
- package/examples/pages/react/DropZone.tsx +111 -0
- package/examples/pages/react/Dropdowns.tsx +580 -48
- package/examples/pages/react/DurationInput.tsx +108 -0
- package/examples/pages/react/Heading.tsx +106 -0
- package/examples/pages/react/IconButtons.tsx +51 -21
- package/examples/pages/react/IconFont.tsx +7 -6
- package/examples/pages/react/IconLabels.tsx +24 -2
- package/examples/pages/react/IconPicker.tsx +65 -0
- package/examples/pages/react/Index.tsx +125 -19
- package/examples/pages/react/Inputs.tsx +289 -6
- package/examples/pages/react/Labels.tsx +51 -1
- package/examples/pages/react/LeftNavigations.tsx +194 -15
- package/examples/pages/react/ListItems.tsx +34 -0
- package/examples/pages/react/Modal.tsx +8 -7
- package/examples/pages/react/MultiSelect.tsx +201 -0
- package/examples/pages/react/NavButtons.tsx +35 -5
- package/examples/pages/react/Panel.tsx +366 -0
- package/examples/pages/react/QuickNavigationBar.tsx +142 -0
- package/examples/pages/react/RadioGroup.tsx +351 -0
- package/examples/pages/react/SelectGrid.tsx +121 -0
- package/examples/pages/react/SelectWithTemplate.tsx +6 -1
- package/examples/pages/react/Selects.tsx +57 -0
- package/examples/pages/react/SimpleList.tsx +148 -0
- package/examples/pages/react/SubNav.tsx +65 -18
- package/examples/pages/react/TableList.tsx +161 -0
- package/examples/pages/react/Tags.tsx +57 -5
- package/examples/pages/react/Text.tsx +134 -0
- package/examples/pages/react/TimePicker.tsx +22 -12
- package/examples/pages/react/Togglebox.tsx +1 -1
- package/examples/pages/react/TreeSelect.tsx +422 -0
- package/examples/pages/react/WithSizeObserver.tsx +44 -0
- package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
- package/examples/pages/react/tree-select/example-1.tsx +71 -0
- package/examples/pages/react/tree-select/example-2.tsx +59 -0
- package/examples/pages/react.html +4 -0
- package/package.json +16 -11
- package/react/components/Alert.d.ts +3 -0
- package/react/components/Alert.js +17 -7
- package/react/components/Autocomplete.js +16 -12
- package/react/components/Avatar.d.ts +9 -0
- package/react/components/Avatar.js +24 -4
- package/react/components/Badge.d.ts +1 -0
- package/react/components/Badge.js +9 -7
- package/react/components/Button.d.ts +2 -0
- package/react/components/Button.js +12 -8
- package/react/components/ButtonGroup.d.ts +3 -2
- package/react/components/ButtonGroup.js +9 -7
- package/react/components/Carousel.js +5 -3
- package/react/components/CheckButtonGroup.d.ts +3 -1
- package/react/components/CheckButtonGroup.js +14 -6
- package/react/components/CheckGroup.d.ts +1 -0
- package/react/components/CheckGroup.js +6 -4
- package/react/components/Checkbox.d.ts +2 -1
- package/react/components/Checkbox.js +7 -5
- package/react/components/CheckboxButton.d.ts +1 -0
- package/react/components/CheckboxButton.js +8 -6
- package/react/components/ContentDivider.d.ts +1 -0
- package/react/components/ContentDivider.js +10 -6
- package/react/components/CreateButton.d.ts +17 -0
- package/react/components/CreateButton.js +68 -0
- package/react/components/DatePicker.d.ts +11 -0
- package/react/components/DatePicker.js +45 -31
- package/react/components/Divider.js +6 -4
- package/react/components/DonutChart.d.ts +1 -1
- package/react/components/DonutChart.js +24 -6
- package/react/components/DropZone.d.ts +25 -0
- package/react/components/DropZone.js +95 -0
- package/react/components/Dropdown.d.ts +7 -5
- package/react/components/Dropdown.js +64 -36
- package/react/components/DropdownFirst.js +18 -11
- package/react/components/DurationInput.d.ts +42 -0
- package/react/components/DurationInput.js +364 -0
- package/react/components/EmptyState.d.ts +1 -0
- package/react/components/EmptyState.js +8 -6
- package/react/components/Form/FormGroup.d.ts +13 -0
- package/react/components/Form/FormGroup.js +63 -0
- package/react/components/Form/FormItem.d.ts +9 -0
- package/react/components/Form/FormItem.js +56 -0
- package/react/components/Form/FormLabel.d.ts +13 -0
- package/react/components/Form/FormLabel.js +62 -0
- package/react/components/Form/FormRow.d.ts +17 -0
- package/react/components/Form/FormRow.js +64 -0
- package/react/components/Form/FormRowNew.d.ts +12 -0
- package/react/components/Form/FormRowNew.js +67 -0
- package/react/components/Form/FormText.d.ts +8 -0
- package/react/components/Form/FormText.js +49 -0
- package/react/components/Form/InputBase.d.ts +41 -0
- package/react/components/Form/InputBase.js +86 -0
- package/react/components/Form/InputNew.d.ts +45 -0
- package/react/components/Form/InputNew.js +75 -0
- package/react/components/Form/InputWrapper.d.ts +28 -0
- package/react/components/Form/InputWrapper.js +91 -0
- package/react/components/Form/index.d.ts +9 -0
- package/react/components/Form/index.js +21 -0
- package/react/components/FormLabel.js +5 -3
- package/react/components/GridItem.js +9 -7
- package/react/components/GridList.js +8 -6
- package/react/components/HeadingText.js +4 -2
- package/react/components/HelloWorld.js +4 -2
- package/react/components/Icon.d.ts +2 -1
- package/react/components/Icon.js +9 -6
- package/react/components/IconButton.d.ts +9 -2
- package/react/components/IconButton.js +17 -7
- package/react/components/IconLabel.d.ts +2 -0
- package/react/components/IconLabel.js +12 -7
- package/react/components/IconPicker.d.ts +24 -0
- package/react/components/IconPicker.js +287 -0
- package/react/components/Input.d.ts +25 -3
- package/react/components/Input.js +22 -26
- package/react/components/Label.d.ts +2 -0
- package/react/components/Label.js +44 -11
- package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
- package/react/components/Layouts/AuthorinInnerSideBar.js +49 -0
- package/react/components/Layouts/AuthoringContainer.d.ts +12 -0
- package/react/components/Layouts/AuthoringContainer.js +60 -0
- package/react/components/Layouts/AuthoringFrame.d.ts +19 -0
- package/react/components/Layouts/AuthoringFrame.js +58 -0
- package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameContainer.js +49 -0
- package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameLeftBar.js +49 -0
- package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameMain.js +49 -0
- package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameNavBar.js +49 -0
- package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameOverlay.js +49 -0
- package/react/components/Layouts/AuthoringFrameRightBar.d.ts +15 -0
- package/react/components/Layouts/AuthoringFrameRightBar.js +60 -0
- package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
- package/react/components/Layouts/AuthoringFrameSidePanel.js +58 -0
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +58 -0
- package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
- package/react/components/Layouts/AuthoringInnerBody.js +49 -0
- package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
- package/react/components/Layouts/AuthoringInnerHeader.js +68 -0
- package/react/components/Layouts/AuthoringMain.d.ts +14 -0
- package/react/components/Layouts/AuthoringMain.js +55 -0
- package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainContainer.js +49 -0
- package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainContent.js +49 -0
- package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
- package/react/components/Layouts/AuthoringMainToolBar.js +56 -0
- package/react/components/Layouts/BottomBarAction.d.ts +12 -0
- package/react/components/Layouts/BottomBarAction.js +59 -0
- package/react/components/Layouts/Container.d.ts +14 -0
- package/react/components/Layouts/Container.js +62 -0
- package/react/components/Layouts/ContentSplitter.d.ts +10 -0
- package/react/components/Layouts/ContentSplitter.js +58 -0
- package/react/components/Layouts/CoreLayout.d.ts +20 -0
- package/react/components/Layouts/CoreLayout.js +55 -0
- package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
- package/react/components/Layouts/CoreLayoutContainer.js +49 -0
- package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
- package/react/components/Layouts/CoreLayoutFooter.js +49 -0
- package/react/components/Layouts/CoreLayoutMain.d.ts +10 -0
- package/react/components/Layouts/CoreLayoutMain.js +56 -0
- package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
- package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
- package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
- package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
- package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
- package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
- package/react/components/Layouts/HamburgerButton.d.ts +14 -0
- package/react/components/Layouts/HamburgerButton.js +63 -0
- package/react/components/Layouts/HeaderPanel.d.ts +8 -0
- package/react/components/Layouts/HeaderPanel.js +49 -0
- package/react/components/Layouts/Layout.d.ts +8 -0
- package/react/components/Layouts/Layout.js +36 -0
- package/react/components/Layouts/LayoutContainer.d.ts +8 -0
- package/react/components/Layouts/LayoutContainer.js +49 -0
- package/react/components/Layouts/LeftPanel.d.ts +9 -0
- package/react/components/Layouts/LeftPanel.js +56 -0
- package/react/components/Layouts/MainMenu.d.ts +41 -0
- package/react/components/Layouts/MainMenu.js +103 -0
- package/react/components/Layouts/MainPanel.d.ts +11 -0
- package/react/components/Layouts/MainPanel.js +59 -0
- package/react/components/Layouts/NotificationPanel.d.ts +45 -0
- package/react/components/Layouts/NotificationPanel.js +110 -0
- package/react/components/Layouts/OverlayPanel.d.ts +8 -0
- package/react/components/Layouts/OverlayPanel.js +51 -0
- package/react/components/Layouts/PageLayout.d.ts +16 -0
- package/react/components/Layouts/PageLayout.js +66 -0
- package/react/components/Layouts/Panel.d.ts +66 -0
- package/react/components/Layouts/Panel.js +168 -0
- package/react/components/Layouts/RightPanel.d.ts +9 -0
- package/react/components/Layouts/RightPanel.js +49 -0
- package/react/components/Layouts/index.d.ts +39 -0
- package/react/components/Layouts/index.js +86 -0
- package/react/components/LeftMenu.d.ts +13 -4
- package/react/components/LeftMenu.js +71 -18
- package/react/components/ListItemLoader.d.ts +4 -0
- package/react/components/ListItemLoader.js +64 -0
- package/react/components/Lists/BoxedList.d.ts +44 -0
- package/react/components/Lists/BoxedList.js +160 -0
- package/react/components/Lists/ContentList.d.ts +51 -0
- package/react/components/Lists/ContentList.js +110 -0
- package/react/components/Lists/SimpleList.d.ts +21 -0
- package/react/components/Lists/SimpleList.js +80 -0
- package/react/components/Lists/TableList.d.ts +64 -0
- package/react/components/Lists/TableList.js +240 -0
- package/react/components/Lists/index.d.ts +2 -0
- package/react/components/Lists/index.js +10 -0
- package/react/components/Loader.js +4 -2
- package/react/components/Menu.d.ts +2 -1
- package/react/components/Menu.js +48 -12
- package/react/components/Modal.d.ts +4 -1
- package/react/components/Modal.js +35 -6
- package/react/components/MultiSelect.d.ts +40 -0
- package/react/components/MultiSelect.js +70 -0
- package/react/components/NavButton.d.ts +2 -1
- package/react/components/NavButton.js +9 -4
- package/react/components/Navigation/BottomNav.d.ts +24 -0
- package/react/components/Navigation/BottomNav.js +88 -0
- package/react/components/Navigation/QuickNavBar.d.ts +24 -0
- package/react/components/Navigation/QuickNavBar.js +117 -0
- package/react/components/Navigation/SideBarMenu.d.ts +21 -0
- package/react/components/Navigation/SideBarMenu.js +79 -0
- package/react/components/Navigation/SideBarTabs.d.ts +23 -0
- package/react/components/Navigation/SideBarTabs.js +88 -0
- package/react/components/Navigation/index.d.ts +3 -0
- package/react/components/Navigation/index.js +9 -0
- package/react/components/Popover.js +4 -2
- package/react/components/PropsList.js +4 -2
- package/react/components/RadioButtonGroup.d.ts +29 -0
- package/react/components/RadioButtonGroup.js +91 -0
- package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
- package/react/components/{Radio.js → RadioGroup.js} +20 -14
- package/react/components/SearchBar.d.ts +24 -0
- package/react/components/SearchBar.js +113 -0
- package/react/components/Select.d.ts +9 -2
- package/react/components/Select.js +9 -20
- package/react/components/SelectGrid.d.ts +45 -0
- package/react/components/SelectGrid.js +200 -0
- package/react/components/SelectWithTemplate.d.ts +11 -1
- package/react/components/SelectWithTemplate.js +23 -12
- package/react/components/Skeleton.d.ts +30 -0
- package/react/components/Skeleton.js +76 -0
- package/react/components/SlidingToolbar.d.ts +1 -1
- package/react/components/SlidingToolbar.js +15 -3
- package/react/components/Spinner.d.ts +11 -0
- package/react/components/Spinner.js +71 -0
- package/react/components/StrechBar.js +4 -2
- package/react/components/SubNav.d.ts +8 -1
- package/react/components/SubNav.js +28 -8
- package/react/components/Switch.d.ts +4 -1
- package/react/components/Switch.js +25 -11
- package/react/components/SwitchGroup.d.ts +1 -0
- package/react/components/SwitchGroup.js +6 -4
- package/react/components/TabCustom.d.ts +0 -1
- package/react/components/TabCustom.js +11 -7
- package/react/components/TabList.js +6 -4
- package/react/components/Tag.d.ts +3 -2
- package/react/components/Tag.js +21 -9
- package/react/components/TagInput.d.ts +0 -1
- package/react/components/TagInput.js +7 -6
- package/react/components/TagInputTest.js +13 -9
- package/react/components/Text/Heading.d.ts +15 -0
- package/react/components/Text/Heading.js +79 -0
- package/react/components/Text/Text.d.ts +15 -0
- package/react/components/Text/Text.js +67 -0
- package/react/components/Text/Time.d.ts +15 -0
- package/react/components/Text/Time.js +65 -0
- package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
- package/react/components/ThemeSelector.js +114 -0
- package/react/components/TimePicker.d.ts +11 -1
- package/react/components/TimePicker.js +14 -5
- package/react/components/Toast.js +1 -1
- package/react/components/ToastMessage.js +6 -5
- package/react/components/ToastText.js +1 -1
- package/react/components/ToastWrapper.d.ts +2 -2
- package/react/components/ToastWrapper.js +14 -10
- package/react/components/Togglebox.d.ts +2 -1
- package/react/components/Togglebox.js +42 -14
- package/react/components/Tooltip.d.ts +1 -0
- package/react/components/Tooltip.js +14 -10
- package/react/components/TreeSelect.d.ts +82 -0
- package/react/components/TreeSelect.js +521 -0
- package/react/components/WithSizeObserver.d.ts +25 -0
- package/react/components/WithSizeObserver.js +95 -0
- package/react/components/_Positioner.js +4 -2
- package/react/helpers.d.ts +1 -0
- package/react/helpers.js +7 -0
- package/react/index.d.ts +28 -3
- package/react/index.js +66 -4
- package/app/styles/variables/_design-tokens-general.scss +0 -136
- package/app-typescript/components/Radio.tsx +0 -57
- package/app-typescript/components/RadioButton.tsx +0 -57
- package/dist/react/Radios.tsx +0 -391
- package/examples/pages/react/Radios.tsx +0 -391
- package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
- package/react/components/RadioButton.js +0 -65
@@ -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
|
+
}
|
@@ -27,19 +27,19 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
27
27
|
|
28
28
|
render() {
|
29
29
|
const modalFullFooter=(
|
30
|
-
<ButtonGroup align="
|
30
|
+
<ButtonGroup align="end">
|
31
31
|
<Button text='Cancel' onClick={() => {this.setState({modalFull:false})}}/>
|
32
32
|
<Button type='primary' text='Save' onClick={() => {}}/>
|
33
33
|
</ButtonGroup>
|
34
34
|
);
|
35
35
|
const modalLargeFooter=(
|
36
|
-
<ButtonGroup align="
|
36
|
+
<ButtonGroup align="end">
|
37
37
|
<Button text='Cancel' onClick={() => {this.setState({modalLarge:false})}}/>
|
38
38
|
<Button type='primary' text='Save' onClick={() => {}}/>
|
39
39
|
</ButtonGroup>
|
40
40
|
);
|
41
41
|
const modalXLargeFooter=(
|
42
|
-
<ButtonGroup align="
|
42
|
+
<ButtonGroup align="end">
|
43
43
|
<Button text='Cancel' onClick={() => {this.setState({modalXLarge:false})}}/>
|
44
44
|
<Button type='primary' text='Save' onClick={() => {}}/>
|
45
45
|
</ButtonGroup>
|
@@ -60,7 +60,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
60
60
|
</p>
|
61
61
|
<Markup.ReactMarkup>
|
62
62
|
<Markup.ReactMarkupPreview>
|
63
|
-
<ButtonGroup align="
|
63
|
+
<ButtonGroup align="end">
|
64
64
|
<Button text="Basic (no size)" onClick={() => this.setState({modalBasic: true})} />
|
65
65
|
<Button text="Small" onClick={() => this.setState({modalSmall: true})} />
|
66
66
|
<Button text="Medium" onClick={() => this.setState({modalMedium: true})} />
|
@@ -144,7 +144,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
144
144
|
// Large
|
145
145
|
<Button text="Large with footer" onClick={() => this.setState({modalLarge: true})} />
|
146
146
|
const modalLargeFooter=(
|
147
|
-
<ButtonGroup align="
|
147
|
+
<ButtonGroup align="end">
|
148
148
|
<Button text='Cancel' onClick={() => {this.setState({modalLarge:false})}}/>
|
149
149
|
<Button type='primary' text='Save' onClick={() => {}}/>
|
150
150
|
</ButtonGroup>
|
@@ -159,7 +159,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
159
159
|
// Extra large
|
160
160
|
<Button text="Extra Large with footer" onClick={() => this.setState({modalXLarge: true})} />
|
161
161
|
const modalXLargeFooter=(
|
162
|
-
<ButtonGroup align="
|
162
|
+
<ButtonGroup align="end">
|
163
163
|
<Button text='Cancel' onClick={() => {this.setState({modalXLarge:false})}}/>
|
164
164
|
<Button type='primary' text='Save' onClick={() => {}}/>
|
165
165
|
</ButtonGroup>
|
@@ -187,6 +187,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
187
187
|
visible={this.state.modalFull}
|
188
188
|
theme='dark'
|
189
189
|
maximized={true}
|
190
|
+
className='testClass'
|
190
191
|
onHide={() => {this.setState({modalFull: false})}}>
|
191
192
|
<p className="sd-margin-b--3">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes,
|
192
193
|
nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
|
@@ -203,7 +204,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
203
204
|
<Markup.ReactMarkupCode>{`
|
204
205
|
<Button text="Open Modal" onClick={() => this.setState({modalFull: true})} />
|
205
206
|
const modalFullFooter=(
|
206
|
-
<ButtonGroup align="
|
207
|
+
<ButtonGroup align="end">
|
207
208
|
<Button text='Cancel' onClick={() => {this.setState({modalFull:false})}}/>
|
208
209
|
<Button type='primary' text='Save' onClick={() => {}}/>
|
209
210
|
</ButtonGroup>
|