superdesk-ui-framework 2.4.20 → 3.0.1-beta.1
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/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 +2 -1
- package/app/scripts/modals.js +1 -0
- package/app/styles/_accessibility.scss +305 -3
- package/app/styles/_alerts.scss +227 -97
- package/app/styles/_avatar.scss +60 -33
- package/app/styles/_badge.scss +55 -26
- package/app/styles/_big-icon-font.scss +2 -1
- package/app/styles/_boxed-list.scss +41 -20
- package/app/styles/_buttons.scss +544 -1026
- package/app/styles/_carousel.scss +19 -13
- package/app/styles/_content-divider.scss +125 -0
- package/app/styles/_design-tokens.scss +2 -0
- package/app/styles/_drag-drop.scss +1 -1
- package/app/styles/_empty-states.scss +9 -1
- package/app/styles/_helpers.scss +650 -308
- package/app/styles/_icon-font.scss +5 -5
- package/app/styles/_icon-labels.scss +6 -7
- package/app/styles/_labels.scss +65 -52
- package/app/styles/_loaders.scss +28 -0
- package/app/styles/_master-desk.scss +11 -11
- package/app/styles/_mixins.scss +21 -13
- package/app/styles/_modals.scss +103 -116
- package/app/styles/_normalize.scss +1 -0
- package/app/styles/_panel-info.scss +21 -16
- package/app/styles/_popover.scss +2 -2
- package/app/styles/_pr-superdesk-theme.scss +4 -0
- package/app/styles/_publisher-styles.scss +182 -0
- package/app/styles/_reboot.scss +1 -0
- package/app/styles/_sd-tag-input.scss +184 -97
- package/app/styles/_simple-list.scss +41 -19
- package/app/styles/_tables.scss +5 -4
- package/app/styles/_tabs.scss +24 -75
- package/app/styles/_tag-labels.scss +47 -47
- package/app/styles/_thumb-carousel.scss +11 -10
- package/app/styles/_toggle-box.scss +52 -46
- package/app/styles/_toggle-button.scss +42 -0
- package/app/styles/_tooltips.scss +55 -98
- package/app/styles/_variables.scss +0 -1
- package/app/styles/app.scss +16 -1
- package/app/styles/components/_card-item.scss +41 -28
- package/app/styles/components/_list-item.scss +24 -94
- package/app/styles/components/_sd-circular-progress.scss +1 -1
- package/app/styles/components/_sd-collapse-box.scss +6 -33
- package/app/styles/components/_sd-comment-box.scss +1 -1
- package/app/styles/components/_sd-dropzone.scss +78 -0
- package/app/styles/components/_sd-grid-item.scss +78 -180
- package/app/styles/components/_sd-loader.scss +1 -16
- package/app/styles/components/_sd-media-carousel.scss +10 -12
- package/app/styles/components/_sd-photo-preview.scss +13 -13
- package/app/styles/components/_sd-searchbar.scss +43 -127
- package/app/styles/components/_sd-toaster.scss +13 -6
- package/app/styles/components/_subnav.scss +111 -117
- package/app/styles/components/_theme-selector.scss +189 -0
- package/app/styles/components/sd-slider.scss +11 -11
- package/app/styles/design-tokens/_design-tokens-general.scss +77 -0
- package/app/styles/design-tokens/_new-colors.scss +700 -0
- package/app/styles/dropdowns/_basic-dropdown.scss +119 -76
- package/app/styles/dropdowns/_navigation_dropdown.scss +7 -8
- package/app/styles/dropdowns/_nested-dropdown.scss +30 -16
- package/app/styles/dropdowns/_other_dropdown.scss +1 -1
- package/app/styles/editor/_editor-buttons.scss +54 -0
- package/app/styles/editor/_editor-themes.scss +437 -0
- package/app/styles/form-elements/_autocomplete.scss +12 -41
- package/app/styles/form-elements/_checkbox.scss +180 -245
- package/app/styles/form-elements/_forms-general.scss +92 -20
- package/app/styles/form-elements/_inputs.scss +96 -350
- package/app/styles/form-elements/_radio.scss +6 -6
- package/app/styles/form-elements/_select-grid.scss +16 -14
- package/app/styles/form-elements/_switch.scss +26 -47
- package/app/styles/grids/_basic-grid.scss +52 -26
- package/app/styles/grids/_grid-layout.scss +93 -58
- package/app/styles/grids/_layout-grid.scss +6 -6
- package/app/styles/grids/_sd-kanban-list.scss +2 -2
- package/app/styles/interface-elements/_side-panel.scss +115 -83
- package/app/styles/layout/_basic-layout.scss +11 -19
- package/app/styles/layout/_container.scss +32 -0
- package/app/styles/layout/_editor.scss +306 -0
- package/app/styles/layout/_general.scss +4 -5
- package/app/styles/menus/_sd-content-navigation.scss +1 -1
- package/app/styles/menus/_sd-left-navigation.scss +34 -18
- package/app/styles/menus/_sd-sidebar-menu.scss +117 -25
- package/app/styles/menus/_sd-top-menu.scss +3 -3
- package/app/styles/primereact/_pr-datepicker.scss +60 -9
- package/app/styles/primereact/_pr-dialog.scss +99 -30
- package/app/styles/primereact/_pr-dropdown.scss +177 -19
- package/app/styles/primereact/_pr-general.scss +14 -7
- package/app/styles/primereact/_pr-menu.scss +9 -12
- package/app/styles/variables/_colors.scss +124 -516
- package/app/styles/variables/_dimensions.scss +82 -4
- package/app/styles/variables/_form-elements.scss +0 -2
- package/app/styles/variables/_typography.scss +2 -0
- package/app-typescript/components/Alert.tsx +16 -1
- package/app-typescript/components/Avatar.tsx +21 -0
- package/app-typescript/components/ButtonGroup.tsx +9 -5
- 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 +34 -0
- package/app-typescript/components/DatePicker.tsx +6 -2
- package/app-typescript/components/DropZone.tsx +89 -0
- package/app-typescript/components/Dropdown.tsx +30 -11
- package/app-typescript/components/DropdownFirst.tsx +1 -1
- package/app-typescript/components/Editor/EditorButton.tsx +34 -0
- 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/FormText.tsx +15 -0
- package/app-typescript/components/Form/index.tsx +5 -0
- package/app-typescript/components/IconButton.tsx +26 -12
- package/app-typescript/components/Input.tsx +38 -20
- package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -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 +38 -0
- package/app-typescript/components/Layouts/AuthoringMain.tsx +46 -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 +15 -0
- package/app-typescript/components/Layouts/Container.tsx +30 -0
- package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
- package/app-typescript/components/Layouts/LayoutContainer.tsx +18 -0
- package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
- package/app-typescript/components/Layouts/MainPanel.tsx +22 -0
- package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
- package/app-typescript/components/Layouts/Panel.tsx +207 -0
- package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
- package/app-typescript/components/Layouts/index.tsx +25 -0
- package/app-typescript/components/LeftMenu.tsx +123 -49
- package/app-typescript/components/Lists/BoxedList.tsx +133 -0
- package/app-typescript/components/Lists/SimpleList.tsx +54 -0
- package/app-typescript/components/Lists/index.tsx +2 -0
- package/app-typescript/components/Modal.tsx +7 -2
- package/app-typescript/components/MultiSelect.tsx +69 -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 +77 -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/Select.tsx +7 -9
- package/app-typescript/components/SelectGrid.tsx +3 -3
- package/app-typescript/components/SlidingToolbar.tsx +8 -2
- package/app-typescript/components/Spinner.tsx +0 -1
- package/app-typescript/components/SubNav.tsx +25 -4
- package/app-typescript/components/Switch.tsx +34 -12
- package/app-typescript/components/TabCustom.tsx +40 -89
- package/app-typescript/components/TabList.tsx +18 -43
- package/app-typescript/components/Tag.tsx +31 -8
- package/app-typescript/components/Text/Heading.tsx +67 -0
- package/app-typescript/components/Text/Text.tsx +36 -0
- package/app-typescript/components/ThemeSelector.tsx +113 -0
- package/app-typescript/components/TimePicker.tsx +3 -3
- package/app-typescript/components/Togglebox.tsx +8 -6
- package/app-typescript/components/TreeSelect.tsx +330 -0
- package/app-typescript/index.ts +16 -4
- 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/avatar_64.png +0 -0
- package/dist/components/basic-grid.html +1 -1
- package/dist/components/checkbox.html +1 -1
- package/dist/examples.bundle.css +1933 -2393
- package/dist/examples.bundle.js +23583 -15736
- package/dist/index.html +9 -12
- 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 +40 -36
- package/dist/playgrounds/list-item-test.html +1 -1
- package/dist/playgrounds/master-desk.html +1 -3
- package/dist/playgrounds/photo-desk.html +33 -33
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
- package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
- package/dist/playgrounds/react-playgrounds/Index.tsx +5 -1
- package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
- package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +232 -23
- package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +300 -0
- package/dist/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
- package/dist/playgrounds/tags-input.html +1 -1
- package/dist/react/Alerts.tsx +123 -23
- package/dist/react/Avatar.tsx +314 -127
- package/dist/react/BoxedList.tsx +362 -0
- package/dist/react/ButtonGroups.tsx +66 -65
- package/dist/react/Buttons.tsx +62 -247
- 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 +178 -0
- package/dist/react/DropZone.tsx +103 -0
- package/dist/react/Heading.tsx +106 -0
- package/dist/react/IconButtons.tsx +49 -42
- package/dist/react/Index.tsx +118 -11
- package/dist/react/Inputs.tsx +9 -24
- package/dist/react/LeftNavigations.tsx +161 -9
- package/dist/react/ListItems.tsx +3 -3
- package/dist/react/Modal.tsx +173 -19
- package/dist/react/MultiSelect.tsx +193 -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/SelectWithTemplate.tsx +1 -1
- package/dist/react/Selects.tsx +3 -23
- package/dist/react/SimpleList.tsx +148 -0
- package/dist/react/SubNav.tsx +69 -20
- package/dist/react/Tabs.tsx +72 -248
- package/dist/react/Tags.tsx +45 -4
- package/dist/react/Text.tsx +134 -0
- package/dist/react/Tooltips.tsx +1 -1
- package/dist/react/TreeSelect.tsx +178 -0
- package/dist/react.html +4 -0
- package/dist/superdesk-ui.bundle.css +28522 -23998
- package/dist/superdesk-ui.bundle.js +7546 -3667
- package/dist/vendor.bundle.js +64 -68
- package/examples/css/docs-page.css +205 -46
- 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.html +9 -12
- package/examples/index.js +20 -0
- package/examples/pages/components/basic-grid.html +1 -1
- package/examples/pages/components/checkbox.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 +40 -36
- package/examples/pages/playgrounds/list-item-test.html +1 -1
- package/examples/pages/playgrounds/master-desk.html +1 -3
- package/examples/pages/playgrounds/photo-desk.html +33 -33
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
- package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
- package/examples/pages/playgrounds/react-playgrounds/Index.tsx +5 -1
- package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
- package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +232 -23
- package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +300 -0
- package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
- package/examples/pages/playgrounds/tags-input.html +1 -1
- package/examples/pages/react/Alerts.tsx +123 -23
- package/examples/pages/react/Avatar.tsx +314 -127
- package/examples/pages/react/BoxedList.tsx +362 -0
- package/examples/pages/react/ButtonGroups.tsx +66 -65
- package/examples/pages/react/Buttons.tsx +62 -247
- 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 +178 -0
- package/examples/pages/react/DropZone.tsx +103 -0
- package/examples/pages/react/Heading.tsx +106 -0
- package/examples/pages/react/IconButtons.tsx +49 -42
- package/examples/pages/react/Index.tsx +118 -11
- package/examples/pages/react/Inputs.tsx +9 -24
- package/examples/pages/react/LeftNavigations.tsx +161 -9
- package/examples/pages/react/ListItems.tsx +3 -3
- package/examples/pages/react/Modal.tsx +173 -19
- package/examples/pages/react/MultiSelect.tsx +193 -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/SelectWithTemplate.tsx +1 -1
- package/examples/pages/react/Selects.tsx +3 -23
- package/examples/pages/react/SimpleList.tsx +148 -0
- package/examples/pages/react/SubNav.tsx +69 -20
- package/examples/pages/react/Tabs.tsx +72 -248
- package/examples/pages/react/Tags.tsx +45 -4
- package/examples/pages/react/Text.tsx +134 -0
- package/examples/pages/react/Tooltips.tsx +1 -1
- package/examples/pages/react/TreeSelect.tsx +178 -0
- package/examples/pages/react.html +4 -0
- package/images/avatar_64.png +0 -0
- package/package.json +10 -6
- package/react/components/Alert.d.ts +3 -0
- package/react/components/Alert.js +9 -1
- package/react/components/Avatar.d.ts +9 -0
- package/react/components/Avatar.js +19 -1
- package/react/components/ButtonGroup.d.ts +4 -2
- package/react/components/ButtonGroup.js +5 -3
- package/react/components/Carousel.js +1 -1
- package/react/components/CheckButtonGroup.d.ts +3 -1
- package/react/components/CheckButtonGroup.js +8 -2
- package/react/components/CheckGroup.d.ts +1 -0
- package/react/components/CheckGroup.js +1 -1
- package/react/components/Checkbox.d.ts +2 -1
- package/react/components/Checkbox.js +2 -2
- package/react/components/CheckboxButton.d.ts +1 -0
- package/react/components/CheckboxButton.js +2 -2
- package/react/components/ContentDivider.d.ts +12 -0
- package/react/components/ContentDivider.js +66 -0
- package/react/components/DatePicker.js +7 -2
- package/react/components/DropZone.d.ts +25 -0
- package/react/components/DropZone.js +93 -0
- package/react/components/Dropdown.d.ts +1 -0
- package/react/components/Dropdown.js +28 -23
- package/react/components/DropdownFirst.js +1 -1
- package/react/components/Form/FormGroup.d.ts +13 -0
- package/react/components/Form/FormGroup.js +61 -0
- package/react/components/Form/FormItem.d.ts +9 -0
- package/react/components/Form/FormItem.js +54 -0
- package/react/components/Form/FormLabel.d.ts +10 -0
- package/react/components/Form/FormLabel.js +54 -0
- package/react/components/Form/FormRow.d.ts +17 -0
- package/react/components/Form/FormRow.js +62 -0
- package/react/components/Form/FormText.d.ts +8 -0
- package/react/components/Form/FormText.js +47 -0
- package/react/components/Form/index.d.ts +5 -0
- package/react/components/Form/index.js +12 -0
- package/react/components/IconButton.d.ts +9 -2
- package/react/components/IconButton.js +13 -5
- package/react/components/Input.d.ts +20 -6
- package/react/components/Input.js +10 -13
- package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
- package/react/components/Layouts/AuthorinInnerSideBar.js +47 -0
- package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
- package/react/components/Layouts/AuthoringFrame.js +56 -0
- package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameContainer.js +47 -0
- package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameLeftBar.js +47 -0
- package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameMain.js +47 -0
- package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameNavBar.js +47 -0
- package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameOverlay.js +47 -0
- package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameRightBar.js +47 -0
- package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
- package/react/components/Layouts/AuthoringFrameSidePanel.js +56 -0
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +56 -0
- package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
- package/react/components/Layouts/AuthoringInnerBody.js +47 -0
- package/react/components/Layouts/AuthoringInnerHeader.d.ts +13 -0
- package/react/components/{RadioButton.js → Layouts/AuthoringInnerHeader.js} +20 -22
- package/react/components/Layouts/AuthoringMain.d.ts +12 -0
- package/react/components/Layouts/AuthoringMain.js +53 -0
- package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainContainer.js +47 -0
- package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainContent.js +47 -0
- package/react/components/Layouts/AuthoringMainToolBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainToolBar.js +47 -0
- package/react/components/Layouts/Container.d.ts +14 -0
- package/react/components/Layouts/Container.js +60 -0
- package/react/components/Layouts/HeaderPanel.d.ts +8 -0
- package/react/components/Layouts/HeaderPanel.js +47 -0
- package/react/components/Layouts/LayoutContainer.d.ts +8 -0
- package/react/components/Layouts/LayoutContainer.js +47 -0
- package/react/components/Layouts/LeftPanel.d.ts +9 -0
- package/react/components/Layouts/LeftPanel.js +54 -0
- package/react/components/Layouts/MainPanel.d.ts +10 -0
- package/react/components/Layouts/MainPanel.js +50 -0
- package/react/components/Layouts/PageLayout.d.ts +16 -0
- package/react/components/Layouts/PageLayout.js +64 -0
- package/react/components/Layouts/Panel.d.ts +65 -0
- package/react/components/Layouts/Panel.js +166 -0
- package/react/components/Layouts/RightPanel.d.ts +9 -0
- package/react/components/Layouts/RightPanel.js +47 -0
- package/react/components/Layouts/index.d.ts +24 -0
- package/react/components/Layouts/index.js +55 -0
- package/react/components/LeftMenu.d.ts +8 -3
- package/react/components/LeftMenu.js +55 -16
- package/react/components/Lists/BoxedList.d.ts +36 -0
- package/react/components/Lists/BoxedList.js +137 -0
- package/react/components/Lists/SimpleList.d.ts +21 -0
- package/react/components/Lists/SimpleList.js +78 -0
- package/react/components/Lists/index.d.ts +2 -0
- package/react/components/Lists/index.js +9 -0
- package/react/components/Modal.d.ts +3 -1
- package/react/components/Modal.js +3 -2
- package/react/components/Navigation/QuickNavBar.d.ts +24 -0
- package/react/components/Navigation/QuickNavBar.js +113 -0
- package/react/components/Navigation/SideBarMenu.d.ts +21 -0
- package/react/components/Navigation/SideBarMenu.js +77 -0
- package/react/components/Navigation/SideBarTabs.d.ts +22 -0
- package/react/components/Navigation/SideBarTabs.js +82 -0
- package/react/components/Navigation/index.d.ts +3 -0
- package/react/components/Navigation/index.js +8 -0
- package/react/components/RadioButtonGroup.d.ts +29 -0
- package/react/components/RadioButtonGroup.js +89 -0
- package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
- package/react/components/{Radio.js → RadioGroup.js} +15 -11
- package/react/components/Select.d.ts +1 -1
- package/react/components/Select.js +2 -9
- package/react/components/SelectGrid.js +3 -3
- package/react/components/SlidingToolbar.d.ts +1 -1
- package/react/components/SlidingToolbar.js +11 -1
- package/react/components/Spinner.d.ts +0 -1
- package/react/components/Spinner.js +0 -1
- package/react/components/SubNav.d.ts +8 -1
- package/react/components/SubNav.js +22 -4
- package/react/components/Switch.d.ts +4 -1
- package/react/components/Switch.js +19 -7
- package/react/components/TabCustom.d.ts +11 -22
- package/react/components/TabCustom.js +23 -52
- package/react/components/TabList.d.ts +2 -11
- package/react/components/TabList.js +11 -32
- package/react/components/Tag.d.ts +3 -3
- package/react/components/Tag.js +16 -5
- package/react/components/TagInput.d.ts +0 -1
- package/react/components/Text/Heading.d.ts +15 -0
- package/react/components/Text/Heading.js +77 -0
- package/react/components/Text/Text.d.ts +15 -0
- package/react/components/Text/Text.js +65 -0
- package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
- package/react/components/ThemeSelector.js +112 -0
- package/react/components/TimePicker.js +2 -2
- package/react/components/Togglebox.d.ts +1 -0
- package/react/components/Togglebox.js +9 -2
- package/react/index.d.ts +15 -4
- package/react/index.js +36 -6
- package/app/styles/_editor-themes.scss +0 -326
- package/app/styles/variables/_design-tokens-general.scss +0 -76
- 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/dist/react/Buttons.tsx
CHANGED
@@ -108,106 +108,63 @@ export default class ButtonsDoc extends React.Component {
|
|
108
108
|
<Markup.ReactMarkup>
|
109
109
|
<Markup.ReactMarkupPreview>
|
110
110
|
<div className="docs-page__content-row">
|
111
|
-
<Button text="button small" size="small" onClick={()=> false} />
|
112
|
-
<Button text="button default" onClick={()=> false} />
|
113
111
|
<Button text="button large" size="large" onClick={()=> false} />
|
112
|
+
<Button text="button default" onClick={()=> false} />
|
113
|
+
<Button text="button small" size="small" onClick={()=> false} />
|
114
114
|
</div>
|
115
115
|
<div className="docs-page__content-row">
|
116
|
-
<Button text="
|
117
|
-
</div>
|
116
|
+
<Button text="large expanded button" expand={true} size="large" onClick={()=> false} />
|
117
|
+
</div>
|
118
118
|
<div className="docs-page__content-row">
|
119
119
|
<Button text="default expanded button" expand={true} onClick={()=> false} />
|
120
120
|
</div>
|
121
121
|
<div className="docs-page__content-row">
|
122
|
-
<Button text="
|
123
|
-
</div>
|
122
|
+
<Button text="small expanded button" expand={true} size="small" onClick={()=> false} />
|
123
|
+
</div>
|
124
124
|
</Markup.ReactMarkupPreview>
|
125
125
|
<Markup.ReactMarkupCode>{`
|
126
|
-
<Button text="button
|
127
|
-
<Button text="button
|
126
|
+
<Button text="button large" size="large" onClick={()=> false} />
|
127
|
+
<Button text="button default" onClick={()=> false} />
|
128
|
+
<Button text="button small" size="small" onClick={()=> false} />
|
129
|
+
|
130
|
+
<Button text="large expanded button" expand={true} size="large" onClick={()=> false} />
|
131
|
+
<Button text="default expanded button" expand={true} onClick={()=> false} />
|
132
|
+
<Button text="small expanded button" expand={true} size="small" onClick={()=> false} />
|
128
133
|
`}</Markup.ReactMarkupCode>
|
129
134
|
</Markup.ReactMarkup>
|
130
135
|
|
131
|
-
<h3 className="docs-page__h3">
|
132
|
-
<p className="docs-page__paragraph"
|
136
|
+
<h3 className="docs-page__h3">States</h3>
|
137
|
+
<p className="docs-page__paragraph">Disabled state:<code>disabled={'{true}'}</code>; Loading state:<code>isLoading={'{true}'}</code>; </p>
|
133
138
|
<Markup.ReactMarkup>
|
134
139
|
<Markup.ReactMarkupPreview>
|
140
|
+
<p className="docs-page__paragraph">// Disabled</p>
|
135
141
|
<div className="docs-page__content-row">
|
136
142
|
<Button text="default" disabled={true} onClick={()=> false} />
|
137
143
|
<Button text="primary" type="primary" disabled={true} onClick={()=> false} />
|
138
|
-
<Button text="success" type="success" disabled={true} onClick={()=> false} />
|
139
|
-
<Button text="warning" type="warning" disabled={true} onClick={()=> false} />
|
140
|
-
<Button text="alert" type="alert" disabled={true} onClick={()=> false} />
|
141
|
-
<Button text="highlight" type="highlight" disabled={true} onClick={()=> false} />
|
142
|
-
<Button text="sd-green" type="sd-green" disabled={true} onClick={()=> false} />
|
143
|
-
</div>
|
144
|
-
<div className="docs-page__content-row">
|
145
144
|
<Button text="default" style="hollow" disabled={true} onClick={()=> false} />
|
146
|
-
<Button text="primary" type="primary" style="hollow"
|
147
|
-
<Button text="success" type="success" style="hollow" disabled={true} onClick={()=> false} />
|
148
|
-
<Button text="warning" type="warning" style="hollow" disabled={true} onClick={()=> false} />
|
149
|
-
<Button text="alert" type="alert" style="hollow" disabled={true} onClick={()=> false} />
|
150
|
-
<Button text="highlight" type="highlight" style="hollow" disabled={true} onClick={()=> false} />
|
151
|
-
<Button text="sd-green" type="sd-green" style="hollow" disabled={true} onClick={()=> false} />
|
145
|
+
<Button text="primary" type="primary" disabled={true} style="hollow" onClick={()=> false} />
|
152
146
|
</div>
|
153
|
-
<
|
154
|
-
|
155
|
-
<Button text="
|
156
|
-
<Button text="
|
157
|
-
<Button text="
|
158
|
-
<Button text="
|
159
|
-
<Button text="highlight" type="highlight" style="text-only" disabled={true} onClick={()=> false} />
|
160
|
-
<Button text="sd-green" type="sd-green" style="text-only" disabled={true} onClick={()=> false} />
|
147
|
+
<p className="docs-page__paragraph">// Loading</p>
|
148
|
+
<div className="docs-page__content-row">
|
149
|
+
<Button text="default" isLoading={true} onClick={()=> false} />
|
150
|
+
<Button text="primary" type="primary" isLoading={true} onClick={()=> false} />
|
151
|
+
<Button text="default" style="hollow" isLoading={true} onClick={()=> false} />
|
152
|
+
<Button text="primary" type="primary" isLoading={true} style="hollow" onClick={()=> false} />
|
161
153
|
</div>
|
154
|
+
|
162
155
|
</Markup.ReactMarkupPreview>
|
163
156
|
<Markup.ReactMarkupCode>{`
|
157
|
+
// Disabled
|
164
158
|
<Button text="default" disabled={true} onClick={()=> false} />
|
165
159
|
<Button text="primary" type="primary" disabled={true} onClick={()=> false} />
|
166
|
-
<Button text="success" type="success" disabled={true} onClick={()=> false} />
|
167
|
-
<Button text="warning" type="warning" disabled={true} onClick={()=> false} />
|
168
|
-
<Button text="alert" type="alert" disabled={true} onClick={()=> false} />
|
169
|
-
<Button text="highlight" type="highlight" disabled={true} onClick={()=> false} />
|
170
|
-
<Button text="sd-green" type="sd-green" disabled={true} onClick={()=> false} />
|
171
|
-
|
172
160
|
<Button text="default" style="hollow" disabled={true} onClick={()=> false} />
|
173
|
-
<Button text="primary" type="primary" style="hollow"
|
174
|
-
<Button text="success" type="success" style="hollow" disabled={true} onClick={()=> false} />
|
175
|
-
<Button text="warning" type="warning" style="hollow" disabled={true} onClick={()=> false} />
|
176
|
-
<Button text="alert" type="alert" style="hollow" disabled={true} onClick={()=> false} />
|
177
|
-
<Button text="highlight" type="highlight" style="hollow" disabled={true} onClick={()=> false} />
|
178
|
-
<Button text="sd-green" type="sd-green" style="hollow" disabled={true} onClick={()=> false} />
|
179
|
-
|
180
|
-
<Button text="default" style="text-only" disabled={true} onClick={()=> false} />
|
181
|
-
<Button text="primary" type="primary" style="text-only" disabled={true} onClick={()=> false} />
|
182
|
-
<Button text="success" type="success" style="text-only" disabled={true} onClick={()=> false} />
|
183
|
-
<Button text="warning" type="warning" style="text-only" disabled={true} onClick={()=> false} />
|
184
|
-
<Button text="alert" type="alert" style="text-only" disabled={true} onClick={()=> false} />
|
185
|
-
<Button text="highlight" type="highlight" style="text-only" disabled={true} onClick={()=> false} />
|
186
|
-
<Button text="sd-green" type="sd-green" style="text-only" disabled={true} onClick={()=> false} />
|
187
|
-
`}</Markup.ReactMarkupCode>
|
188
|
-
</Markup.ReactMarkup>
|
189
|
-
|
161
|
+
<Button text="primary" type="primary" disabled={true} style="hollow" onClick={()=> false} />
|
190
162
|
|
191
|
-
|
192
|
-
<p className="docs-page__paragraph"><code>isLoading={'{true}'}</code></p>
|
193
|
-
<Markup.ReactMarkup>
|
194
|
-
<Markup.ReactMarkupPreview>
|
195
|
-
<div className="docs-page__content-row">
|
163
|
+
// Loading
|
196
164
|
<Button text="default" isLoading={true} onClick={()=> false} />
|
197
165
|
<Button text="primary" type="primary" isLoading={true} onClick={()=> false} />
|
198
|
-
<Button text="
|
199
|
-
<Button text="
|
200
|
-
<Button text="alert" type="alert" isLoading={true} onClick={()=> false} />
|
201
|
-
<Button text="highlight" type="highlight" isLoading={true} onClick={()=> false} />
|
202
|
-
</div>
|
203
|
-
</Markup.ReactMarkupPreview>
|
204
|
-
<Markup.ReactMarkupCode>{`
|
205
|
-
<Button text="default" isLoading={true} onClick={()=> false} />
|
206
|
-
<Button text="primary" type="primary" isLoading={true} onClick={()=> false} />
|
207
|
-
<Button text="success" type="success" isLoading={true} onClick={()=> false} />
|
208
|
-
<Button text="warning" type="warning" isLoading={true} onClick={()=> false} />
|
209
|
-
<Button text="alert" type="alert" isLoading={true} onClick={()=> false} />
|
210
|
-
<Button text="highlight" type="highlight" isLoading={true} onClick={()=> false} />
|
166
|
+
<Button text="default" style="hollow" isLoading={true} onClick={()=> false} />
|
167
|
+
<Button text="primary" type="primary" isLoading={true} style="hollow" onClick={()=> false} />
|
211
168
|
`}</Markup.ReactMarkupCode>
|
212
169
|
</Markup.ReactMarkup>
|
213
170
|
|
@@ -220,26 +177,21 @@ export default class ButtonsDoc extends React.Component {
|
|
220
177
|
<Button text="default" icon="info-sign" onClick={()=> false} />
|
221
178
|
<Button text="primary" type="primary" icon="plus-sign" onClick={()=> false} />
|
222
179
|
<Button text="success" type="success" icon="ok" onClick={()=> false} />
|
180
|
+
<Button text="warning" type="warning" icon="exclamation-sign" onClick={()=> false} />
|
223
181
|
<Button text="alert" type="alert" icon="warning-sign" onClick={()=> false} />
|
182
|
+
<br />
|
224
183
|
<Button text="default" icon="info-sign" style="hollow" onClick={()=> false} />
|
225
184
|
<Button text="primary" type="primary" icon="plus-sign" style="hollow" onClick={()=> false} />
|
226
185
|
<Button text="success" type="success" icon="ok" style="hollow" onClick={()=> false} />
|
227
|
-
<Button text="warning" type="warning" icon="
|
228
|
-
<Button text="
|
229
|
-
<Button text="primary" type="primary" icon="plus-sign" disabled={true} onClick={()=> false} />
|
186
|
+
<Button text="warning" type="warning" icon="exclamation-sign" style="hollow" onClick={()=> false} />
|
187
|
+
<Button text="alert" type="alert" icon="warning-sign" style="hollow" onClick={()=> false} />
|
230
188
|
</div>
|
231
|
-
<p className="docs-page__paragraph">// Large
|
189
|
+
<p className="docs-page__paragraph">// Large and small options</p>
|
232
190
|
<div className="docs-page__content-row">
|
233
|
-
<Button text="default" icon="info-sign" size="large" onClick={()=> false} />
|
234
|
-
<Button text="primary" type="primary" icon="plus-sign" size="large" onClick={()=> false} />
|
235
|
-
<Button text="
|
236
|
-
<Button text="
|
237
|
-
<Button text="primary" type="primary" icon="plus-sign" style="hollow" size="large" onClick={()=> false} />
|
238
|
-
</div>
|
239
|
-
<p className="docs-page__paragraph">// Small size</p>
|
240
|
-
<div className="docs-page__content-row">
|
241
|
-
<Button text="default" icon="info-sign" size="small" onClick={()=> false} />
|
242
|
-
<Button text="primary" type="primary" icon="plus-sign" size="small" onClick={()=> false} />
|
191
|
+
<Button text="default large" icon="info-sign" size="large" onClick={()=> false} />
|
192
|
+
<Button text="primary large" type="primary" icon="plus-sign" size="large" onClick={()=> false} />
|
193
|
+
<Button text="default small" icon="info-sign" size="small" onClick={()=> false} />
|
194
|
+
<Button text="primary small" type="primary" icon="plus-sign" size="small" onClick={()=> false} />
|
243
195
|
</div>
|
244
196
|
</Markup.ReactMarkupPreview>
|
245
197
|
<Markup.ReactMarkupCode>{`
|
@@ -247,24 +199,20 @@ export default class ButtonsDoc extends React.Component {
|
|
247
199
|
<Button text="default" icon="info-sign" onClick={()=> false} />
|
248
200
|
<Button text="primary" type="primary" icon="plus-sign" onClick={()=> false} />
|
249
201
|
<Button text="success" type="success" icon="ok" onClick={()=> false} />
|
202
|
+
<Button text="warning" type="warning" icon="exclamation-sign" onClick={()=> false} />
|
250
203
|
<Button text="alert" type="alert" icon="warning-sign" onClick={()=> false} />
|
204
|
+
|
251
205
|
<Button text="default" icon="info-sign" style="hollow" onClick={()=> false} />
|
252
206
|
<Button text="primary" type="primary" icon="plus-sign" style="hollow" onClick={()=> false} />
|
253
207
|
<Button text="success" type="success" icon="ok" style="hollow" onClick={()=> false} />
|
254
|
-
<Button text="warning" type="warning" icon="
|
255
|
-
<Button text="
|
256
|
-
<Button text="primary" type="primary" icon="plus-sign" disabled={true} onClick={()=> false} />
|
257
|
-
|
258
|
-
// Large size
|
259
|
-
<Button text="default" icon="info-sign" size="large" onClick={()=> false} />
|
260
|
-
<Button text="primary" type="primary" icon="plus-sign" size="large" onClick={()=> false} />
|
261
|
-
<Button text="success" type="success" icon="ok" size="large" onClick={()=> false} />
|
262
|
-
<Button text="default" icon="info-sign" style="hollow" size="large" onClick={()=> false} />
|
263
|
-
<Button text="primary" type="primary" icon="plus-sign" style="hollow" size="large" onClick={()=> false} />
|
208
|
+
<Button text="warning" type="warning" icon="exclamation-sign" style="hollow" onClick={()=> false} />
|
209
|
+
<Button text="alert" type="alert" icon="warning-sign" style="hollow" onClick={()=> false} />
|
264
210
|
|
265
|
-
//
|
266
|
-
<Button text="default" icon="info-sign" size="
|
267
|
-
<Button text="primary" type="primary" icon="plus-sign" size="
|
211
|
+
// Large and small options
|
212
|
+
<Button text="default large" icon="info-sign" size="large" onClick={()=> false} />
|
213
|
+
<Button text="primary large" type="primary" icon="plus-sign" size="large" onClick={()=> false} />
|
214
|
+
<Button text="default small" icon="info-sign" size="small" onClick={()=> false} />
|
215
|
+
<Button text="primary small" type="primary" icon="plus-sign" size="small" onClick={()=> false} />
|
268
216
|
`}</Markup.ReactMarkupCode>
|
269
217
|
</Markup.ReactMarkup>
|
270
218
|
|
@@ -273,188 +221,55 @@ export default class ButtonsDoc extends React.Component {
|
|
273
221
|
The specified text value will be used for the <code>aria-label</code>.</p>
|
274
222
|
<Markup.ReactMarkup>
|
275
223
|
<Markup.ReactMarkupPreview>
|
276
|
-
<p className="docs-page__paragraph">//
|
224
|
+
<p className="docs-page__paragraph">// Large default and small</p>
|
277
225
|
<div className="docs-page__content-row">
|
226
|
+
<Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" iconOnly={true} onClick={()=> false} />
|
227
|
+
<Button type="primary" icon="plus-sign" text="plus-sign" style="hollow" size="large" iconOnly={true} onClick={()=> false} />
|
228
|
+
<Button type="highlight" icon="bell" text="bell" size="large" iconOnly={true} onClick={()=> false} />
|
278
229
|
<Button icon="info-sign" text="info-sign" iconOnly={true} onClick={()=> false} />
|
279
230
|
<Button type="primary" icon="plus-sign" text="plus-sign" iconOnly={true} onClick={()=> false} />
|
280
231
|
<Button type="success" icon="ok" text="ok" iconOnly={true} onClick={()=> false} />
|
281
|
-
</div>
|
282
|
-
<p className="docs-page__paragraph">// Large</p>
|
283
|
-
<div className="docs-page__content-row">
|
284
|
-
<Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" iconOnly={true} onClick={()=> false} />
|
285
|
-
<Button type="primary" icon="plus-sign" text="plus-sign" style="hollow" size="large" iconOnly={true} onClick={()=> false} />
|
286
|
-
<Button type="highlight" icon="bell" text="bell" size="large" iconOnly={true} onClick={()=> false} />
|
287
|
-
</div>
|
288
|
-
<p className="docs-page__paragraph">// Small</p>
|
289
|
-
<div className="docs-page__content-row">
|
290
232
|
<Button type="alert" style="hollow" icon="kill" text="kill" size="small" iconOnly={true} onClick={()=> false} />
|
291
233
|
<Button icon="calendar" size="small" text="calendar" iconOnly={true} onClick={()=> false} />
|
292
234
|
<Button type="primary" style="hollow" icon="refresh" text="refresh" size="small" iconOnly={true} onClick={()=> false} />
|
293
235
|
</div>
|
294
|
-
|
236
|
+
|
237
|
+
<p className="docs-page__paragraph">// Circle (large, default and small)</p>
|
295
238
|
<div className="docs-page__content-row">
|
239
|
+
<Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" shape="round" iconOnly={true} onClick={()=> false} />
|
240
|
+
<Button type="primary" icon="plus-large" text="plus-large" style="hollow" size="large" shape="round" iconOnly={true} onClick={()=> false} />
|
241
|
+
<Button type="highlight" icon="bell" text="bell" size="large" shape="round" iconOnly={true} onClick={()=> false} />
|
296
242
|
<Button size="normal" icon="info-sign" text="info-sign" shape="round" iconOnly={true} onClick={()=> false} />
|
297
243
|
<Button type="primary" icon="plus-large" text="plus-large" shape="round" iconOnly={true} onClick={()=> false} />
|
298
244
|
<Button type="success" icon="ok" text="ok" shape="round" iconOnly={true} onClick={()=> false} />
|
299
|
-
</div>
|
300
|
-
<p className="docs-page__paragraph">// Circle large</p>
|
301
|
-
<div className="docs-page__content-row">
|
302
|
-
<Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" shape="round" iconOnly={true} onClick={()=> false} />
|
303
|
-
<Button type="primary" icon="plus-large" text="plus-large" style="hollow" size="large" shape="round" iconOnly={true} onClick={()=> false} />
|
304
|
-
<Button type="highlight" icon="bell" text="bell" size="large" shape="round" iconOnly={true} onClick={()=> false} />
|
305
|
-
</div>
|
306
|
-
<p className="docs-page__paragraph">// Circle small</p>
|
307
|
-
<div className="docs-page__content-row">
|
308
245
|
<Button type="alert" icon="close-small" text="close-small" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
309
246
|
<Button type="primary" icon="plus-large" text="plus-large" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
310
247
|
<Button type="sd-green" icon="star" text="star" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
311
248
|
</div>
|
312
249
|
</Markup.ReactMarkupPreview>
|
313
250
|
<Markup.ReactMarkupCode>{`
|
314
|
-
//
|
251
|
+
// Large default and small
|
252
|
+
<Button type="primary" icon="plus-sign" text="plus-sign" style="hollow" size="large" iconOnly={true} onClick={()=> false} />
|
253
|
+
<Button type="highlight" icon="bell" text="bell" size="large" iconOnly={true} onClick={()=> false} />
|
315
254
|
<Button icon="info-sign" text="info-sign" iconOnly={true} onClick={()=> false} />
|
316
255
|
<Button type="primary" icon="plus-sign" text="plus-sign" iconOnly={true} onClick={()=> false} />
|
317
256
|
<Button type="success" icon="ok" text="ok" iconOnly={true} onClick={()=> false} />
|
318
|
-
|
319
|
-
// Large
|
320
|
-
<Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" iconOnly={true} onClick={()=> false} />
|
321
|
-
<Button type="primary" icon="plus-sign" text="plus-sign" style="hollow" size="large" iconOnly={true} onClick={()=> false} />
|
322
|
-
<Button type="highlight" icon="bell" text="bell" size="large" iconOnly={true} onClick={()=> false} />
|
323
|
-
|
324
|
-
// Small
|
325
257
|
<Button type="alert" style="hollow" icon="kill" text="kill" size="small" iconOnly={true} onClick={()=> false} />
|
326
258
|
<Button icon="calendar" size="small" text="calendar" iconOnly={true} onClick={()=> false} />
|
327
259
|
<Button type="primary" style="hollow" icon="refresh" text="refresh" size="small" iconOnly={true} onClick={()=> false} />
|
328
260
|
|
329
|
-
// Circle default
|
261
|
+
// // Circle (large, default and small)
|
262
|
+
<Button type="primary" icon="plus-large" text="plus-large" style="hollow" size="large" shape="round" iconOnly={true} onClick={()=> false} />
|
263
|
+
<Button type="highlight" icon="bell" text="bell" size="large" shape="round" iconOnly={true} onClick={()=> false} />
|
330
264
|
<Button size="normal" icon="info-sign" text="info-sign" shape="round" iconOnly={true} onClick={()=> false} />
|
331
265
|
<Button type="primary" icon="plus-large" text="plus-large" shape="round" iconOnly={true} onClick={()=> false} />
|
332
266
|
<Button type="success" icon="ok" text="ok" shape="round" iconOnly={true} onClick={()=> false} />
|
333
|
-
|
334
|
-
// Circle large
|
335
|
-
<Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" shape="round" iconOnly={true} onClick={()=> false} />
|
336
|
-
<Button type="primary" icon="plus-large" text="plus-large" style="hollow" size="large" shape="round" iconOnly={true} onClick={()=> false} />
|
337
|
-
<Button type="highlight" icon="bell" text="bell" size="large" shape="round" iconOnly={true} onClick={()=> false} />
|
338
|
-
|
339
|
-
// Circle small
|
340
267
|
<Button type="alert" icon="close-small" text="close-small" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
341
268
|
<Button type="primary" icon="plus-large" text="plus-large" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
342
269
|
<Button type="sd-green" icon="star" text="star" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
343
270
|
`}</Markup.ReactMarkupCode>
|
344
271
|
</Markup.ReactMarkup>
|
345
272
|
|
346
|
-
<h3 className="docs-page__h3">Dark UI</h3>
|
347
|
-
<p className="docs-page__paragraph">To directly modify the button styles for a dark background set the prop <code>theme</code> to <code>"dark"</code>.</p>
|
348
|
-
<Markup.ReactMarkup>
|
349
|
-
<Markup.ReactMarkupPreview>
|
350
|
-
<p className="docs-page__paragraph">// Default style</p>
|
351
|
-
<div className="docs-page__content-row docs-page__content-row--ui-dark">
|
352
|
-
<Button text="default" theme="dark" onClick={()=> false} />
|
353
|
-
<Button text="primary" type="primary" theme="dark" onClick={()=> false} />
|
354
|
-
<Button text="success" type="success" theme="dark" onClick={()=> false} />
|
355
|
-
<Button text="warning" type="warning" theme="dark" onClick={()=> false} />
|
356
|
-
<Button text="alert" type="alert" theme="dark" onClick={()=> false} />
|
357
|
-
<Button text="highlight" type="highlight" theme="dark" onClick={()=> false} />
|
358
|
-
<Button text="sd-green" type="sd-green" theme="dark" onClick={()=> false} />
|
359
|
-
</div>
|
360
|
-
<p className="docs-page__paragraph">// Hollow style</p>
|
361
|
-
<div className="docs-page__content-row docs-page__content-row--ui-dark">
|
362
|
-
<Button text="default" style="hollow" theme="dark" onClick={()=> false} />
|
363
|
-
<Button text="primary" type="primary" style="hollow" theme="dark" onClick={()=> false} />
|
364
|
-
<Button text="success" type="success" style="hollow" theme="dark" onClick={()=> false} />
|
365
|
-
<Button text="warning" type="warning" style="hollow" theme="dark" onClick={()=> false} />
|
366
|
-
<Button text="alert" type="alert" style="hollow" theme="dark" onClick={()=> false} />
|
367
|
-
<Button text="highlight" type="highlight" style="hollow" theme="dark" onClick={()=> false} />
|
368
|
-
<Button text="sd-green" type="sd-green" style="hollow" theme="dark" onClick={()=> false} />
|
369
|
-
</div>
|
370
|
-
<p className="docs-page__paragraph">// Text only style</p>
|
371
|
-
<div className="docs-page__content-row docs-page__content-row--ui-dark">
|
372
|
-
<Button text="default" theme="dark" style="text-only" onClick={()=> false} />
|
373
|
-
<Button text="primary" type="primary" style="text-only" theme="dark" onClick={()=> false} />
|
374
|
-
<Button text="success" type="success" style="text-only" theme="dark" onClick={()=> false} />
|
375
|
-
<Button text="warning" type="warning" style="text-only" theme="dark" onClick={()=> false} />
|
376
|
-
<Button text="alert" type="alert" style="text-only" theme="dark" onClick={()=> false} />
|
377
|
-
<Button text="highlight" type="highlight" style="text-only" theme="dark" onClick={()=> false} />
|
378
|
-
<Button text="sd-green" type="sd-green" style="text-only" theme="dark" onClick={()=> false} />
|
379
|
-
</div>
|
380
|
-
<p className="docs-page__paragraph">// Disabled</p>
|
381
|
-
<div className="docs-page__content-row docs-page__content-row--ui-dark">
|
382
|
-
<Button text="default" disabled={true} theme="dark" onClick={()=> false} />
|
383
|
-
<Button text="primary" type="primary" disabled={true} theme="dark" onClick={()=> false} />
|
384
|
-
<Button text="success" type="success" disabled={true} theme="dark" onClick={()=> false} />
|
385
|
-
<Button text="warning" type="warning" disabled={true} theme="dark" onClick={()=> false} />
|
386
|
-
<Button text="alert" type="alert" disabled={true} theme="dark" onClick={()=> false} />
|
387
|
-
<Button text="highlight" type="highlight" disabled={true} theme="dark" onClick={()=> false} />
|
388
|
-
<Button text="sd-green" type="sd-green" disabled={true} theme="dark" onClick={()=> false} />
|
389
|
-
<Button text="default" style="hollow" disabled={true} theme="dark" onClick={()=> false} />
|
390
|
-
<Button text="primary" type="primary" style="hollow" disabled={true} theme="dark" onClick={()=> false} />
|
391
|
-
<Button text="success" type="success" style="hollow" disabled={true} theme="dark" onClick={()=> false} />
|
392
|
-
<Button text="warning" type="warning" style="hollow" disabled={true} theme="dark" onClick={()=> false} />
|
393
|
-
<Button text="alert" type="alert" style="hollow" disabled={true} theme="dark" onClick={()=> false} />
|
394
|
-
<Button text="highlight" type="highlight" style="hollow" disabled={true} theme="dark" onClick={()=> false} />
|
395
|
-
<Button text="sd-green" type="sd-green" style="hollow" disabled={true} theme="dark" onClick={()=> false} />
|
396
|
-
<Button text="default" disabled={true} style="text-only" theme="dark" onClick={()=> false} />
|
397
|
-
<Button text="primary" type="primary" style="text-only" disabled={true} theme="dark" onClick={()=> false} />
|
398
|
-
<Button text="success" type="success" style="text-only" disabled={true} theme="dark" onClick={()=> false} />
|
399
|
-
<Button text="warning" type="warning" style="text-only" disabled={true} theme="dark" onClick={()=> false} />
|
400
|
-
<Button text="alert" type="alert" style="text-only" disabled={true} theme="dark" onClick={()=> false} />
|
401
|
-
<Button text="highlight" type="highlight" style="text-only" disabled={true} theme="dark" onClick={()=> false} />
|
402
|
-
<Button text="sd-green" type="sd-green" style="text-only" disabled={true} theme="dark" onClick={()=> false} />
|
403
|
-
</div>
|
404
|
-
</Markup.ReactMarkupPreview>
|
405
|
-
<Markup.ReactMarkupCode>{`
|
406
|
-
// Defaut size
|
407
|
-
<Button text="default" theme="dark" onClick={()=> false} />
|
408
|
-
<Button text="primary" type="primary" theme="dark" onClick={()=> false} />
|
409
|
-
<Button text="success" type="success" theme="dark" onClick={()=> false} />
|
410
|
-
<Button text="warning" type="warning" theme="dark" onClick={()=> false} />
|
411
|
-
<Button text="alert" type="alert" theme="dark" onClick={()=> false} />
|
412
|
-
<Button text="highlight" type="highlight" theme="dark" onClick={()=> false} />
|
413
|
-
<Button text="sd-green" type="sd-green" theme="dark" onClick={()=> false} />
|
414
|
-
|
415
|
-
// Hollow style
|
416
|
-
<Button text="default" style="hollow" theme="dark" onClick={()=> false} />
|
417
|
-
<Button text="primary" type="primary" style="hollow" theme="dark" onClick={()=> false} />
|
418
|
-
<Button text="success" type="success" style="hollow" theme="dark" onClick={()=> false} />
|
419
|
-
<Button text="warning" type="warning" style="hollow" theme="dark" onClick={()=> false} />
|
420
|
-
<Button text="alert" type="alert" style="hollow" theme="dark" onClick={()=> false} />
|
421
|
-
<Button text="highlight" type="highlight" style="hollow" theme="dark" onClick={()=> false} />
|
422
|
-
<Button text="sd-green" type="sd-green" style="hollow" theme="dark" onClick={()=> false} />
|
423
|
-
|
424
|
-
// Text only style
|
425
|
-
<Button text="default" theme="dark" style="text-only" onClick={()=> false} />
|
426
|
-
<Button text="primary" type="primary" style="text-only" theme="dark" onClick={()=> false} />
|
427
|
-
<Button text="success" type="success" style="text-only" theme="dark" onClick={()=> false} />
|
428
|
-
<Button text="warning" type="warning" style="text-only" theme="dark" onClick={()=> false} />
|
429
|
-
<Button text="alert" type="alert" style="text-only" theme="dark" onClick={()=> false} />
|
430
|
-
<Button text="highlight" type="highlight" style="text-only" theme="dark" onClick={()=> false} />
|
431
|
-
<Button text="sd-green" type="sd-green" style="text-only" theme="dark" onClick={()=> false} />
|
432
|
-
|
433
|
-
// Disabled
|
434
|
-
<Button text="default" disabled={true} theme="dark" onClick={()=> false} />
|
435
|
-
<Button text="primary" type="primary" disabled={true} theme="dark" onClick={()=> false} />
|
436
|
-
<Button text="success" type="success" disabled={true} theme="dark" onClick={()=> false} />
|
437
|
-
<Button text="warning" type="warning" disabled={true} theme="dark" onClick={()=> false} />
|
438
|
-
<Button text="alert" type="alert" disabled={true} theme="dark" onClick={()=> false} />
|
439
|
-
<Button text="highlight" type="highlight" disabled={true} theme="dark" onClick={()=> false} />
|
440
|
-
<Button text="sd-green" type="sd-green" disabled={true} theme="dark" onClick={()=> false} />
|
441
|
-
<Button text="default" style="hollow" disabled={true} theme="dark" onClick={()=> false} />
|
442
|
-
<Button text="primary" type="primary" style="hollow" disabled={true} theme="dark" onClick={()=> false} />
|
443
|
-
<Button text="success" type="success" style="hollow" disabled={true} theme="dark" onClick={()=> false} />
|
444
|
-
<Button text="warning" type="warning" style="hollow" disabled={true} theme="dark" onClick={()=> false} />
|
445
|
-
<Button text="alert" type="alert" style="hollow" disabled={true} theme="dark" onClick={()=> false} />
|
446
|
-
<Button text="highlight" type="highlight" style="hollow" disabled={true} theme="dark" onClick={()=> false} />
|
447
|
-
<Button text="sd-green" type="sd-green" style="hollow" disabled={true} theme="dark" onClick={()=> false} />
|
448
|
-
<Button text="default" disabled={true} style="text-only" theme="dark" onClick={()=> false} />
|
449
|
-
<Button text="primary" type="primary" style="text-only" disabled={true} theme="dark" onClick={()=> false} />
|
450
|
-
<Button text="success" type="success" style="text-only" disabled={true} theme="dark" onClick={()=> false} />
|
451
|
-
<Button text="warning" type="warning" style="text-only" disabled={true} theme="dark" onClick={()=> false} />
|
452
|
-
<Button text="alert" type="alert" style="text-only" disabled={true} theme="dark" onClick={()=> false} />
|
453
|
-
<Button text="highlight" type="highlight" style="text-only" disabled={true} theme="dark" onClick={()=> false} />
|
454
|
-
<Button text="sd-green" type="sd-green" style="text-only" disabled={true} theme="dark" onClick={()=> false} />
|
455
|
-
`}</Markup.ReactMarkupCode>
|
456
|
-
</Markup.ReactMarkup>
|
457
|
-
|
458
273
|
<h3 className="docs-page__h3">Props</h3>
|
459
274
|
<PropsList>
|
460
275
|
<Prop name='text' isRequired={true} type='string' default='/' description='Text value of the Button. In the case of iconOnly buttons the value will be set to the aria-label.'/>
|
package/dist/react/Carousel.tsx
CHANGED
@@ -46,11 +46,10 @@ export default class CarouselDoc extends React.Component {
|
|
46
46
|
</p>
|
47
47
|
<Markup.ReactMarkup>
|
48
48
|
<Markup.ReactMarkupPreview>
|
49
|
-
<Carousel images={images}
|
49
|
+
<Carousel images={images}></Carousel>
|
50
50
|
</Markup.ReactMarkupPreview>
|
51
51
|
<Markup.ReactMarkupCode>{`
|
52
|
-
const images = ${JSON.stringify(images, null, 2)};
|
53
|
-
|
52
|
+
const images = ${JSON.stringify(images, null, 2)};
|
54
53
|
<Carousel images={images}></Carousel>
|
55
54
|
`}</Markup.ReactMarkupCode>
|
56
55
|
</Markup.ReactMarkup>
|