superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.vscode/settings.json +5 -0
- package/app/fonts/sd_big-icons.eot +0 -0
- package/app/fonts/sd_big-icons.svg +55 -53
- package/app/fonts/sd_big-icons.ttf +0 -0
- package/app/fonts/sd_big-icons.woff +0 -0
- package/app/fonts/sd_icons.eot +0 -0
- package/app/fonts/sd_icons.svg +1 -0
- package/app/fonts/sd_icons.ttf +0 -0
- package/app/fonts/sd_icons.woff +0 -0
- package/app/img/SD-logo.svg +52 -0
- package/app/img/dots.svg +3 -0
- package/app/img/spinner.svg +3 -0
- package/app/img/themes/theme-base.svg +1 -0
- package/app/img/themes/theme-contrast.svg +45 -0
- package/app/img/themes/theme-dark.svg +1 -0
- package/app/img/themes/theme-light.svg +1 -0
- package/app/index.js +1 -1
- package/app/scripts/modals.js +22 -9
- package/app/styles/_accessibility.scss +312 -4
- package/app/styles/_alerts.scss +57 -19
- package/app/styles/_avatar.scss +25 -1
- package/app/styles/_badge.scss +2 -2
- package/app/styles/_big-icon-font.scss +64 -24
- package/app/styles/_boxed-list.scss +67 -21
- package/app/styles/_buttons.scss +435 -332
- package/app/styles/_carousel.scss +17 -11
- package/app/styles/_design-tokens.scss +2 -0
- package/app/styles/_hamburger.scss +160 -0
- package/app/styles/_helpers.scss +198 -34
- package/app/styles/_icon-font.scss +344 -307
- package/app/styles/_icon-labels.scss +66 -10
- package/app/styles/_labels.scss +12 -6
- package/app/styles/_loaders.scss +13 -0
- package/app/styles/_master-desk.scss +5 -5
- package/app/styles/_mixins.scss +13 -3
- package/app/styles/_modals.scss +4 -28
- package/app/styles/_normalize.scss +1 -0
- package/app/styles/_panel-info.scss +19 -14
- package/app/styles/_sd-tag-input.scss +104 -3
- package/app/styles/_simple-list.scss +39 -17
- package/app/styles/_spinner.scss +46 -0
- package/app/styles/_table-list.scss +244 -0
- package/app/styles/_tabs.scss +6 -8
- package/app/styles/_tag-labels.scss +11 -2
- package/app/styles/_thumb-carousel.scss +11 -10
- package/app/styles/_toggle-box.scss +46 -12
- package/app/styles/_toggle-button.scss +42 -0
- package/app/styles/_tooltips.scss +3 -3
- package/app/styles/_variables.scss +0 -1
- package/app/styles/app.scss +13 -2
- package/app/styles/components/_card-item.scss +33 -21
- package/app/styles/components/_list-item.scss +32 -23
- package/app/styles/components/_sd-dropzone.scss +114 -0
- package/app/styles/components/_sd-grid-item.scss +2 -2
- package/app/styles/components/_sd-notification-panel.scss +48 -0
- package/app/styles/components/_sd-searchbar.scss +5 -98
- package/app/styles/components/_subnav.scss +149 -120
- package/app/styles/components/_theme-selector.scss +189 -0
- package/app/styles/design-tokens/_design-tokens-general.scss +81 -0
- package/app/styles/{variables → design-tokens}/_new-colors.scss +41 -20
- package/app/styles/dropdowns/_basic-dropdown.scss +30 -3
- package/app/styles/editor/_editor-buttons.scss +54 -0
- package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
- package/app/styles/form-elements/_checkbox.scss +85 -58
- package/app/styles/form-elements/_forms-general.scss +90 -14
- package/app/styles/form-elements/_inputs.scss +305 -65
- 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 +174 -66
- package/app/styles/grids/_layout-grid.scss +4 -4
- package/app/styles/grids/_sd-kanban-list.scss +2 -2
- package/app/styles/interface-elements/_side-panel.scss +87 -58
- package/app/styles/layout/_basic-layout.scss +1 -4
- package/app/styles/layout/_container.scss +35 -0
- package/app/styles/layout/_editor.scss +398 -0
- package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
- package/app/styles/menus/_sd-left-navigation.scss +38 -3
- package/app/styles/menus/_sd-sidebar-menu.scss +109 -14
- package/app/styles/menus/_sd-top-menu.scss +19 -5
- package/app/styles/pr-superdesk-theme.scss +3 -0
- package/app/styles/primereact/_pr-datepicker.scss +58 -7
- package/app/styles/primereact/_pr-dialog.scss +39 -7
- package/app/styles/primereact/_pr-dropdown.scss +155 -8
- package/app/styles/primereact/_pr-general.scss +4 -0
- package/app/styles/primereact/_pr-skeleton.scss +35 -0
- package/app/styles/variables/_colors.scss +2 -452
- package/app/styles/variables/_dimensions.scss +85 -1
- package/app/styles/variables/_form-elements.scss +0 -2
- package/app-typescript/components/Alert.tsx +16 -1
- package/app-typescript/components/Avatar.tsx +21 -0
- package/app-typescript/components/Button.tsx +7 -1
- package/app-typescript/components/ButtonGroup.tsx +5 -4
- package/app-typescript/components/Carousel.tsx +1 -1
- package/app-typescript/components/CheckButtonGroup.tsx +19 -5
- package/app-typescript/components/CheckGroup.tsx +2 -1
- package/app-typescript/components/Checkbox.tsx +7 -3
- package/app-typescript/components/CheckboxButton.tsx +9 -2
- package/app-typescript/components/CreateButton.tsx +38 -0
- package/app-typescript/components/DatePicker.tsx +73 -22
- package/app-typescript/components/DonutChart.tsx +1 -1
- package/app-typescript/components/DropZone.tsx +89 -0
- package/app-typescript/components/Dropdown.tsx +9 -1
- package/app-typescript/components/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/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 +58 -9
- package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringContainer.tsx +27 -0
- package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
- package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
- package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
- package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
- package/app-typescript/components/Layouts/AuthoringMain.tsx +50 -0
- package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -0
- package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
- package/app-typescript/components/Layouts/Container.tsx +30 -0
- package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
- package/app-typescript/components/Layouts/CoreLayout.tsx +62 -0
- package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
- package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
- package/app-typescript/components/Layouts/CoreLayoutMain.tsx +16 -0
- package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
- package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
- package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
- package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
- package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
- package/app-typescript/components/Layouts/Layout.tsx +33 -0
- package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
- package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
- package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
- package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
- package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
- package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
- package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
- package/app-typescript/components/Layouts/Panel.tsx +208 -0
- package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
- package/app-typescript/components/Layouts/index.tsx +43 -0
- package/app-typescript/components/LeftMenu.tsx +129 -49
- package/app-typescript/components/ListItemLoader.tsx +30 -0
- package/app-typescript/components/Lists/BoxedList.tsx +169 -0
- package/app-typescript/components/Lists/ContentList.tsx +100 -0
- package/app-typescript/components/Lists/SimpleList.tsx +54 -0
- package/app-typescript/components/Lists/TableList.tsx +208 -0
- package/app-typescript/components/Lists/index.tsx +2 -0
- package/app-typescript/components/Menu.tsx +31 -7
- package/app-typescript/components/Modal.tsx +31 -18
- package/app-typescript/components/MultiSelect.tsx +112 -0
- package/app-typescript/components/NavButton.tsx +4 -0
- package/app-typescript/components/Navigation/BottomNav.tsx +82 -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 +79 -0
- package/app-typescript/components/Select.tsx +22 -4
- package/app-typescript/components/SelectGrid.tsx +233 -0
- package/app-typescript/components/SidebarMenu.tsx +68 -0
- package/app-typescript/components/Skeleton.tsx +48 -0
- package/app-typescript/components/SlidingToolbar.tsx +8 -2
- package/app-typescript/components/Spinner.tsx +32 -0
- package/app-typescript/components/SubNav.tsx +25 -4
- package/app-typescript/components/Switch.tsx +34 -12
- package/app-typescript/components/SwitchGroup.tsx +2 -1
- package/app-typescript/components/Tag.tsx +31 -7
- package/app-typescript/components/Text/Heading.tsx +67 -0
- package/app-typescript/components/Text/Text.tsx +36 -0
- package/app-typescript/components/Text/Time.tsx +34 -0
- package/app-typescript/components/ThemeSelector.tsx +113 -0
- package/app-typescript/components/Togglebox.tsx +9 -7
- package/app-typescript/components/Tooltip.tsx +7 -5
- package/app-typescript/components/TreeSelect.tsx +330 -0
- package/app-typescript/components/WithSizeObserver.tsx +88 -0
- package/app-typescript/dist/components/Alert.d.ts +16 -0
- package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
- package/app-typescript/dist/components/Avatar.d.ts +33 -0
- package/app-typescript/dist/components/Badge.d.ts +13 -0
- package/app-typescript/dist/components/Button.d.ts +23 -0
- package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
- package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
- package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
- package/app-typescript/dist/components/Checkbox.d.ts +19 -0
- package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
- package/app-typescript/dist/components/DatePicker.d.ts +37 -0
- package/app-typescript/dist/components/Divider.d.ts +9 -0
- package/app-typescript/dist/components/DonutChart.d.ts +12 -0
- package/app-typescript/dist/components/Dropdown.d.ts +28 -0
- package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
- package/app-typescript/dist/components/EmptyState.d.ts +11 -0
- package/app-typescript/dist/components/FormLabel.d.ts +9 -0
- package/app-typescript/dist/components/Genie.d.ts +13 -0
- package/app-typescript/dist/components/GridItem.d.ts +69 -0
- package/app-typescript/dist/components/GridList.d.ts +14 -0
- package/app-typescript/dist/components/HeadingText.d.ts +10 -0
- package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
- package/app-typescript/dist/components/Icon.d.ts +12 -0
- package/app-typescript/dist/components/IconButton.d.ts +12 -0
- package/app-typescript/dist/components/IconLabel.d.ts +11 -0
- package/app-typescript/dist/components/Input.d.ts +24 -0
- package/app-typescript/dist/components/Label.d.ts +15 -0
- package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
- package/app-typescript/dist/components/Loader.d.ts +8 -0
- package/app-typescript/dist/components/NavButton.d.ts +15 -0
- package/app-typescript/dist/components/Popover.d.ts +13 -0
- package/app-typescript/dist/components/PropsList.d.ts +15 -0
- package/{react → app-typescript/dist}/components/Radio.d.ts +7 -8
- package/{react → app-typescript/dist}/components/RadioButton.d.ts +0 -0
- package/app-typescript/dist/components/Select.d.ts +29 -0
- package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
- package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
- package/app-typescript/dist/components/StrechBar.d.ts +4 -0
- package/app-typescript/dist/components/SubNav.d.ts +10 -0
- package/app-typescript/dist/components/Switch.d.ts +12 -0
- package/app-typescript/dist/components/TabCustom.d.ts +25 -0
- package/app-typescript/dist/components/TabList.d.ts +22 -0
- package/app-typescript/dist/components/Tag.d.ts +9 -0
- package/app-typescript/dist/components/TagInput.d.ts +7 -0
- package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
- package/app-typescript/dist/components/TimePicker.d.ts +11 -0
- package/app-typescript/dist/components/Tooltip.d.ts +11 -0
- package/app-typescript/dist/components/_Positioner.d.ts +27 -0
- package/app-typescript/dist/index.d.ts +56 -0
- package/app-typescript/helpers.tsx +3 -0
- package/app-typescript/index.ts +25 -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 +8628 -1602
- package/dist/examples.bundle.js +73031 -48307
- 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 +145 -0
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
- package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
- package/dist/playgrounds/react-playgrounds/Index.tsx +7 -1
- package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
- package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +466 -0
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +276 -23
- package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
- package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
- package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
- package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
- package/dist/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
- 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/BoxedList.tsx +362 -0
- package/dist/react/ButtonGroups.tsx +66 -65
- package/dist/react/Buttons.tsx +65 -113
- package/dist/react/Carousel.tsx +2 -3
- package/dist/react/Checkboxs.tsx +66 -25
- package/dist/react/Container.tsx +143 -0
- package/dist/react/ContentList.tsx +280 -0
- package/dist/react/CreateButton.tsx +71 -0
- package/dist/react/DatePicker.tsx +10 -5
- package/dist/react/DropZone.tsx +111 -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 +120 -19
- package/dist/react/Inputs.tsx +142 -4
- package/dist/react/LeftNavigations.tsx +161 -9
- package/dist/react/ListItems.tsx +34 -0
- package/dist/react/Modal.tsx +8 -7
- package/dist/react/MultiSelect.tsx +198 -0
- package/dist/react/NavButtons.tsx +4 -4
- package/dist/react/Panel.tsx +366 -0
- package/dist/react/QuickNavigationBar.tsx +142 -0
- package/dist/react/RadioGroup.tsx +351 -0
- package/dist/react/SelectGrid.tsx +121 -0
- package/dist/react/Selects.tsx +57 -0
- package/dist/react/SimpleList.tsx +148 -0
- package/dist/react/SubNav.tsx +65 -18
- package/dist/react/TableList.tsx +268 -0
- package/dist/react/Tags.tsx +57 -5
- package/dist/react/Text.tsx +134 -0
- package/dist/react/TreeSelect.tsx +178 -0
- package/dist/react/WithSizeObserver.tsx +44 -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 +1 -0
- package/dist/sd_icons.ttf +0 -0
- package/dist/sd_icons.woff +0 -0
- package/dist/superdesk-ui.bundle.css +54140 -25145
- package/dist/superdesk-ui.bundle.js +58228 -51200
- package/dist/vendor.bundle.js +25688 -25666
- package/examples/css/docs-page.css +99 -29
- package/examples/img/avatar-2.jpg +0 -0
- package/examples/img/avatar-3.jpg +0 -0
- package/examples/img/avatar-4.jpg +0 -0
- package/examples/img/avatar-5.jpg +0 -0
- package/examples/img/avatar-6.jpg +0 -0
- package/examples/index.js +28 -0
- package/examples/pages/components/basic-grid.html +1 -1
- package/examples/pages/components/checkbox.html +1 -1
- package/examples/pages/components/modals.html +1 -0
- package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
- package/examples/pages/playgrounds/boxed-list.html +1 -1
- package/examples/pages/playgrounds/cards.html +9 -4
- package/examples/pages/playgrounds/editor-3-test.html +15 -0
- package/examples/pages/playgrounds/form-layout.html +9 -7
- package/examples/pages/playgrounds/layout-test-2.html +1 -1
- package/examples/pages/playgrounds/list-item-test.html +1 -1
- package/examples/pages/playgrounds/master-desk.html +2 -4
- package/examples/pages/playgrounds/media-carousel.html +1 -1
- package/examples/pages/playgrounds/photo-desk.html +1 -1
- package/examples/pages/playgrounds/planning.html +1 -1
- package/examples/pages/playgrounds/publish.html +1 -1
- package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
- package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
- package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
- package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
- package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
- package/examples/pages/playgrounds/publisher-output-control.html +1 -1
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +145 -0
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
- package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
- package/examples/pages/playgrounds/react-playgrounds/Index.tsx +7 -1
- package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
- package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +466 -0
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +276 -23
- package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
- package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
- package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
- package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
- package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
- 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/BoxedList.tsx +362 -0
- package/examples/pages/react/ButtonGroups.tsx +66 -65
- package/examples/pages/react/Buttons.tsx +65 -113
- package/examples/pages/react/Carousel.tsx +2 -3
- package/examples/pages/react/Checkboxs.tsx +66 -25
- package/examples/pages/react/Container.tsx +143 -0
- package/examples/pages/react/ContentList.tsx +280 -0
- package/examples/pages/react/CreateButton.tsx +71 -0
- package/examples/pages/react/DatePicker.tsx +10 -5
- package/examples/pages/react/DropZone.tsx +111 -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 +120 -19
- package/examples/pages/react/Inputs.tsx +142 -4
- package/examples/pages/react/LeftNavigations.tsx +161 -9
- package/examples/pages/react/ListItems.tsx +34 -0
- package/examples/pages/react/Modal.tsx +8 -7
- package/examples/pages/react/MultiSelect.tsx +198 -0
- package/examples/pages/react/NavButtons.tsx +4 -4
- package/examples/pages/react/Panel.tsx +366 -0
- package/examples/pages/react/QuickNavigationBar.tsx +142 -0
- package/examples/pages/react/RadioGroup.tsx +351 -0
- package/examples/pages/react/SelectGrid.tsx +121 -0
- package/examples/pages/react/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 +268 -0
- package/examples/pages/react/Tags.tsx +57 -5
- package/examples/pages/react/Text.tsx +134 -0
- package/examples/pages/react/TreeSelect.tsx +178 -0
- package/examples/pages/react/WithSizeObserver.tsx +44 -0
- package/examples/pages/react.html +4 -0
- package/package.json +12 -7
- package/patches/@superdesk+primereact+5.0.2-4.patch +44 -0
- 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.js +7 -5
- package/react/components/Button.d.ts +2 -0
- package/react/components/Button.js +12 -8
- package/react/components/ButtonGroup.d.ts +3 -2
- package/react/components/ButtonGroup.js +9 -7
- package/react/components/Carousel.js +5 -3
- package/react/components/CheckButtonGroup.d.ts +3 -1
- package/react/components/CheckButtonGroup.js +14 -6
- package/react/components/CheckGroup.d.ts +1 -0
- package/react/components/CheckGroup.js +6 -4
- package/react/components/Checkbox.d.ts +2 -1
- package/react/components/Checkbox.js +7 -5
- package/react/components/CheckboxButton.d.ts +1 -0
- package/react/components/CheckboxButton.js +8 -6
- package/react/components/ContentDivider.js +8 -6
- package/react/components/CreateButton.d.ts +17 -0
- package/react/components/CreateButton.js +68 -0
- package/react/components/DatePicker.d.ts +10 -0
- package/react/components/DatePicker.js +61 -31
- package/react/components/Divider.js +6 -4
- package/react/components/DonutChart.d.ts +1 -1
- package/react/components/DonutChart.js +24 -6
- package/react/components/DropZone.d.ts +25 -0
- package/react/components/DropZone.js +95 -0
- package/react/components/Dropdown.d.ts +1 -0
- package/react/components/Dropdown.js +10 -9
- package/react/components/DropdownFirst.js +18 -11
- package/react/components/EmptyState.js +7 -5
- package/react/components/Form/FormGroup.d.ts +13 -0
- package/react/components/Form/FormGroup.js +63 -0
- package/react/components/Form/FormItem.d.ts +9 -0
- package/react/components/Form/FormItem.js +56 -0
- package/react/components/Form/FormLabel.d.ts +10 -0
- package/react/components/Form/FormLabel.js +56 -0
- package/react/components/Form/FormRow.d.ts +17 -0
- package/react/components/Form/FormRow.js +64 -0
- package/react/components/Form/FormText.d.ts +8 -0
- package/react/components/Form/FormText.js +49 -0
- package/react/components/Form/index.d.ts +5 -0
- package/react/components/Form/index.js +13 -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 +36 -12
- package/react/components/Label.js +10 -8
- package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
- package/react/components/Layouts/AuthorinInnerSideBar.js +49 -0
- package/react/components/Layouts/AuthoringContainer.d.ts +11 -0
- package/react/components/Layouts/AuthoringContainer.js +60 -0
- package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
- package/react/components/Layouts/AuthoringFrame.js +58 -0
- package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameContainer.js +49 -0
- package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameLeftBar.js +49 -0
- package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameMain.js +49 -0
- package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameNavBar.js +49 -0
- package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameOverlay.js +49 -0
- package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameRightBar.js +49 -0
- package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
- package/react/components/Layouts/AuthoringFrameSidePanel.js +58 -0
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +58 -0
- package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
- package/react/components/Layouts/AuthoringInnerBody.js +49 -0
- package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
- package/react/components/Layouts/AuthoringInnerHeader.js +68 -0
- package/react/components/Layouts/AuthoringMain.d.ts +14 -0
- package/react/components/Layouts/AuthoringMain.js +55 -0
- package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainContainer.js +49 -0
- package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainContent.js +49 -0
- package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
- package/react/components/Layouts/AuthoringMainToolBar.js +56 -0
- package/react/components/Layouts/BottomBarAction.d.ts +12 -0
- package/react/components/Layouts/BottomBarAction.js +59 -0
- package/react/components/Layouts/Container.d.ts +14 -0
- package/react/components/Layouts/Container.js +62 -0
- package/react/components/Layouts/ContentSplitter.d.ts +10 -0
- package/react/components/Layouts/ContentSplitter.js +58 -0
- package/react/components/Layouts/CoreLayout.d.ts +19 -0
- package/react/components/Layouts/CoreLayout.js +55 -0
- package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
- package/react/components/Layouts/CoreLayoutContainer.js +49 -0
- package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
- package/react/components/Layouts/CoreLayoutFooter.js +49 -0
- package/react/components/Layouts/CoreLayoutMain.d.ts +9 -0
- package/react/components/Layouts/CoreLayoutMain.js +49 -0
- package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
- package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
- package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
- package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
- package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
- package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
- package/react/components/Layouts/HamburgerButton.d.ts +14 -0
- package/react/components/Layouts/HamburgerButton.js +63 -0
- package/react/components/Layouts/HeaderPanel.d.ts +8 -0
- package/react/components/Layouts/HeaderPanel.js +49 -0
- package/react/components/Layouts/Layout.d.ts +8 -0
- package/react/components/Layouts/Layout.js +36 -0
- package/react/components/Layouts/LayoutContainer.d.ts +8 -0
- package/react/components/Layouts/LayoutContainer.js +49 -0
- package/react/components/Layouts/LeftPanel.d.ts +9 -0
- package/react/components/Layouts/LeftPanel.js +56 -0
- package/react/components/Layouts/MainMenu.d.ts +41 -0
- package/react/components/Layouts/MainMenu.js +103 -0
- package/react/components/Layouts/MainPanel.d.ts +11 -0
- package/react/components/Layouts/MainPanel.js +59 -0
- package/react/components/Layouts/NotificationPanel.d.ts +45 -0
- package/react/components/Layouts/NotificationPanel.js +110 -0
- package/react/components/Layouts/OverlayPanel.d.ts +8 -0
- package/react/components/Layouts/OverlayPanel.js +51 -0
- package/react/components/Layouts/PageLayout.d.ts +16 -0
- package/react/components/Layouts/PageLayout.js +66 -0
- package/react/components/Layouts/Panel.d.ts +66 -0
- package/react/components/Layouts/Panel.js +168 -0
- package/react/components/Layouts/RightPanel.d.ts +9 -0
- package/react/components/Layouts/RightPanel.js +49 -0
- package/react/components/Layouts/index.d.ts +39 -0
- package/react/components/Layouts/index.js +86 -0
- package/react/components/LeftMenu.d.ts +10 -3
- package/react/components/LeftMenu.js +64 -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/SimpleList.d.ts +21 -0
- package/react/components/Lists/SimpleList.js +80 -0
- package/react/components/Lists/index.d.ts +2 -0
- package/react/components/Lists/index.js +10 -0
- package/react/components/Loader.js +4 -2
- package/react/components/Menu.d.ts +2 -1
- package/react/components/Menu.js +48 -12
- package/react/components/Modal.d.ts +4 -1
- package/react/components/Modal.js +35 -6
- package/react/components/NavButton.d.ts +1 -0
- package/react/components/NavButton.js +9 -4
- package/react/components/Navigation/BottomNav.d.ts +23 -0
- package/react/components/Navigation/BottomNav.js +88 -0
- package/react/components/Navigation/QuickNavBar.d.ts +24 -0
- package/react/components/Navigation/QuickNavBar.js +117 -0
- package/react/components/Navigation/SideBarMenu.d.ts +21 -0
- package/react/components/Navigation/SideBarMenu.js +79 -0
- package/react/components/Navigation/SideBarTabs.d.ts +23 -0
- package/react/components/Navigation/SideBarTabs.js +88 -0
- package/react/components/Navigation/index.d.ts +3 -0
- package/react/components/Navigation/index.js +9 -0
- package/react/components/Popover.js +4 -2
- package/react/components/PropsList.js +4 -2
- package/react/components/RadioButtonGroup.d.ts +29 -0
- package/react/components/RadioButtonGroup.js +91 -0
- package/react/components/RadioGroup.d.ts +24 -0
- package/react/components/{Radio.js → RadioGroup.js} +20 -14
- package/react/components/SearchBar.d.ts +23 -0
- package/react/components/SearchBar.js +89 -0
- package/react/components/Select.d.ts +8 -1
- package/react/components/Select.js +22 -11
- package/react/components/SelectGrid.d.ts +45 -0
- package/react/components/SelectGrid.js +200 -0
- package/react/components/SelectWithTemplate.js +4 -2
- package/react/components/Skeleton.d.ts +30 -0
- package/react/components/Skeleton.js +76 -0
- package/react/components/SlidingToolbar.d.ts +1 -1
- package/react/components/SlidingToolbar.js +15 -3
- package/react/components/Spinner.d.ts +11 -0
- package/react/components/Spinner.js +71 -0
- package/react/components/StrechBar.js +4 -2
- package/react/components/SubNav.d.ts +8 -1
- package/react/components/SubNav.js +28 -8
- package/react/components/Switch.d.ts +4 -1
- package/react/components/Switch.js +25 -11
- package/react/components/SwitchGroup.d.ts +1 -0
- package/react/components/SwitchGroup.js +6 -4
- package/react/components/TabCustom.d.ts +0 -1
- package/react/components/TabCustom.js +11 -7
- package/react/components/TabList.js +6 -4
- package/react/components/Tag.d.ts +3 -2
- package/react/components/Tag.js +21 -9
- package/react/components/TagInput.d.ts +0 -1
- package/react/components/TagInput.js +7 -6
- package/react/components/TagInputTest.js +13 -9
- package/react/components/Text/Heading.d.ts +15 -0
- package/react/components/Text/Heading.js +79 -0
- package/react/components/Text/Text.d.ts +15 -0
- package/react/components/Text/Text.js +67 -0
- package/react/components/Text/Time.d.ts +15 -0
- package/react/components/Text/Time.js +65 -0
- package/react/components/ThemeSelector.d.ts +21 -0
- package/react/components/ThemeSelector.js +114 -0
- package/react/components/TimePicker.js +4 -2
- 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/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 +22 -3
- package/react/index.js +53 -4
- package/yarn-error.log +111 -0
- package/app/styles/variables/_design-tokens-general.scss +0 -136
- package/app-typescript/components/Radio.tsx +0 -57
- package/app-typescript/components/RadioButton.tsx +0 -57
- package/dist/react/Radios.tsx +0 -391
- package/examples/pages/react/Radios.tsx +0 -391
- package/react/components/RadioButton.js +0 -65
@@ -0,0 +1,362 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import * as Markup from '../../js/react';
|
3
|
+
import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container } from '../../../app-typescript';
|
4
|
+
|
5
|
+
export default class BoxedListDoc extends React.Component {
|
6
|
+
render() {
|
7
|
+
return (
|
8
|
+
<section className='docs-page__container'>
|
9
|
+
<h2 className='docs-page__h2'>BoxedList</h2>
|
10
|
+
|
11
|
+
<Markup.ReactMarkupCodePreview>{`
|
12
|
+
<BoxedList>
|
13
|
+
<BoxedListItem>...</BoxedListItem>
|
14
|
+
</BoxedList>
|
15
|
+
`}
|
16
|
+
</Markup.ReactMarkupCodePreview>
|
17
|
+
|
18
|
+
<p className="docs-page__paragraph">...</p>
|
19
|
+
|
20
|
+
<Markup.ReactMarkup>
|
21
|
+
<Markup.ReactMarkupPreview>
|
22
|
+
<p className="docs-page__paragraph">// basic</p>
|
23
|
+
|
24
|
+
<BoxedList>
|
25
|
+
<BoxedListItem>None, nulla vitae elit libero, a pharetra augue.</BoxedListItem>
|
26
|
+
<BoxedListItem type='default'>Default. Nulla vitae elit libero, a pharetra augue.</BoxedListItem>
|
27
|
+
<BoxedListItem type='success'>Succes, donec sed odio dui.</BoxedListItem>
|
28
|
+
<BoxedListItem type='warning'>Warning, maecenas sed diam eget risus varius.</BoxedListItem>
|
29
|
+
<BoxedListItem type='alert'>Alert. Nullam quis risus eget urna mollis ornare vel eu leo.</BoxedListItem>
|
30
|
+
<BoxedListItem type='highlight'>Highlight type, cras mattis consectetur purus sit amet fermentum.</BoxedListItem>
|
31
|
+
</BoxedList>
|
32
|
+
|
33
|
+
<p className="docs-page__paragraph">// clickable, with media and actions</p>
|
34
|
+
|
35
|
+
<BoxedList>
|
36
|
+
<BoxedListItem
|
37
|
+
type="success"
|
38
|
+
clickable={true}
|
39
|
+
media={(
|
40
|
+
<Icon name='slideshow' />
|
41
|
+
)}
|
42
|
+
actions={(
|
43
|
+
<IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
|
44
|
+
)}
|
45
|
+
>
|
46
|
+
<BoxedListContentRow>
|
47
|
+
Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula
|
48
|
+
porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Curabitur
|
49
|
+
blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes,
|
50
|
+
nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
|
51
|
+
</BoxedListContentRow>
|
52
|
+
</BoxedListItem>
|
53
|
+
<BoxedListItem
|
54
|
+
type="primary"
|
55
|
+
clickable={true}
|
56
|
+
media={(
|
57
|
+
<AvatarWrapper size="medium">
|
58
|
+
<AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
|
59
|
+
</AvatarWrapper>
|
60
|
+
)}
|
61
|
+
actions={(
|
62
|
+
<IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
|
63
|
+
)}
|
64
|
+
>
|
65
|
+
<BoxedListContentRow>
|
66
|
+
Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque
|
67
|
+
nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Nulla
|
68
|
+
vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
69
|
+
</BoxedListContentRow>
|
70
|
+
</BoxedListItem>
|
71
|
+
<BoxedListItem
|
72
|
+
type="alert"
|
73
|
+
selected={true}
|
74
|
+
media={(
|
75
|
+
<AvatarWrapper size="medium">
|
76
|
+
<AvatarContentText text="WS" tooltipText="Walter Sobchak" />
|
77
|
+
</AvatarWrapper>
|
78
|
+
)}
|
79
|
+
actions={(
|
80
|
+
<IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
|
81
|
+
)}
|
82
|
+
>
|
83
|
+
<BoxedListContentRow>
|
84
|
+
Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.
|
85
|
+
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Nullam
|
86
|
+
id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Duis mollis,
|
87
|
+
est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
88
|
+
</BoxedListContentRow>
|
89
|
+
</BoxedListItem>
|
90
|
+
</BoxedList>
|
91
|
+
|
92
|
+
<p className="docs-page__paragraph">// with footer + different layout options.</p>
|
93
|
+
|
94
|
+
<BoxedList>
|
95
|
+
<BoxedListItem
|
96
|
+
type="warning"
|
97
|
+
clickable={true}
|
98
|
+
media={(
|
99
|
+
<Icon name='calendar-list' />
|
100
|
+
)}
|
101
|
+
actions={(
|
102
|
+
<IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
|
103
|
+
)}
|
104
|
+
>
|
105
|
+
<BoxedListContentRow>
|
106
|
+
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis
|
107
|
+
dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna
|
108
|
+
mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem
|
109
|
+
lacinia quam venenatis vestibulum.
|
110
|
+
</BoxedListContentRow>
|
111
|
+
</BoxedListItem>
|
112
|
+
<BoxedListItem
|
113
|
+
type="primary"
|
114
|
+
clickable={true}
|
115
|
+
media={(
|
116
|
+
<AvatarWrapper size="medium">
|
117
|
+
<AvatarContentText text="JC" tooltipText="Joel Coen" />
|
118
|
+
</AvatarWrapper>
|
119
|
+
)}
|
120
|
+
footer={(
|
121
|
+
<ButtonGroup align='end'>
|
122
|
+
<Button size='small' style='hollow' text='Decline' onClick={()=> false} />
|
123
|
+
<Button size='small' style='hollow' type='primary' text='Accept' onClick={()=> false} />
|
124
|
+
</ButtonGroup>
|
125
|
+
)}
|
126
|
+
>
|
127
|
+
<Heading className='sd-margin-b--1' type='h5'>Amet Mollis Porta</Heading>
|
128
|
+
<BoxedListContentRow>
|
129
|
+
Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.
|
130
|
+
Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
|
131
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.
|
132
|
+
Cras mattis consectetur purus sit amet fermentum.
|
133
|
+
</BoxedListContentRow>
|
134
|
+
</BoxedListItem>
|
135
|
+
<BoxedListItem
|
136
|
+
type="success"
|
137
|
+
clickable={true}
|
138
|
+
media={(
|
139
|
+
<AvatarWrapper size="medium">
|
140
|
+
<AvatarContentText text="EC" tooltipText="Ethan Coen" />
|
141
|
+
</AvatarWrapper>
|
142
|
+
)}
|
143
|
+
actions={(
|
144
|
+
<React.Fragment>
|
145
|
+
<IconButton icon="pencil" ariaValue="Edit" onClick={()=> false} />
|
146
|
+
<IconButton icon="trash" ariaValue="Delete" onClick={()=> false} />
|
147
|
+
</React.Fragment>
|
148
|
+
)}
|
149
|
+
>
|
150
|
+
<BoxedListContentRow>
|
151
|
+
Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
|
152
|
+
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
|
153
|
+
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
154
|
+
</BoxedListContentRow>
|
155
|
+
<BoxedListContentRow>
|
156
|
+
<Label type='success' text='In progress' style='translucent' />
|
157
|
+
</BoxedListContentRow>
|
158
|
+
</BoxedListItem>
|
159
|
+
<BoxedListItem
|
160
|
+
type="warning"
|
161
|
+
clickable={true}
|
162
|
+
media={(
|
163
|
+
<AvatarWrapper size="medium">
|
164
|
+
<AvatarContentText text="BL" tooltipText="Bunny Lebowski" />
|
165
|
+
</AvatarWrapper>
|
166
|
+
)}
|
167
|
+
actions={(
|
168
|
+
<IconButton icon="pencil" ariaValue="Edit" onClick={()=> false} />
|
169
|
+
)}
|
170
|
+
footer={(
|
171
|
+
<ButtonGroup align='end'>
|
172
|
+
<Button size='small' style='hollow' text='Decline' onClick={()=> false} />
|
173
|
+
<Button size='small' style='hollow' type='primary' text='Accept' onClick={()=> false} />
|
174
|
+
</ButtonGroup>
|
175
|
+
)}
|
176
|
+
>
|
177
|
+
<BoxedListContentRow>
|
178
|
+
<Heading className='sd-margin-e--auto' align='start' type='h4'>Dolor Bibenduma</Heading>
|
179
|
+
<Text align='end' color='light'>23.12.2021</Text>
|
180
|
+
</BoxedListContentRow>
|
181
|
+
<BoxedListContentRow>
|
182
|
+
<Text>
|
183
|
+
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
|
184
|
+
venenatis vestibulum. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.
|
185
|
+
</Text>
|
186
|
+
</BoxedListContentRow>
|
187
|
+
</BoxedListItem>
|
188
|
+
</BoxedList>
|
189
|
+
|
190
|
+
</Markup.ReactMarkupPreview>
|
191
|
+
<Markup.ReactMarkupCode>{`
|
192
|
+
// basic
|
193
|
+
|
194
|
+
<BoxedList>
|
195
|
+
<BoxedListItem>None, nulla vitae elit libero, a pharetra augue.</BoxedListItem>
|
196
|
+
<BoxedListItem type='default'>Default. Nulla vitae elit libero, a pharetra augue.</BoxedListItem>
|
197
|
+
<BoxedListItem type='success'>Succes, donec sed odio dui.</BoxedListItem>
|
198
|
+
<BoxedListItem type='warning'>Warning, maecenas sed diam eget risus varius.</BoxedListItem>
|
199
|
+
<BoxedListItem type='alert'>Alert. Nullam quis risus eget urna mollis ornare vel eu leo.</BoxedListItem>
|
200
|
+
<BoxedListItem type='highlight'>Highlight type, cras mattis consectetur purus sit amet fermentum.</BoxedListItem>
|
201
|
+
</BoxedList>
|
202
|
+
|
203
|
+
// clickable, with media and actions
|
204
|
+
|
205
|
+
<BoxedList>
|
206
|
+
<BoxedListItem
|
207
|
+
type="success"
|
208
|
+
clickable={true}
|
209
|
+
media={(
|
210
|
+
<Icon name='slideshow' />
|
211
|
+
)}
|
212
|
+
actions={(
|
213
|
+
<IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
|
214
|
+
)}
|
215
|
+
>
|
216
|
+
<BoxedListContentRow>
|
217
|
+
Maecenas sed diam eget risus varius blandit sit amet...
|
218
|
+
</BoxedListContentRow>
|
219
|
+
</BoxedListItem>
|
220
|
+
<BoxedListItem
|
221
|
+
type="primary"
|
222
|
+
clickable={true}
|
223
|
+
media={(
|
224
|
+
<AvatarWrapper size="medium">
|
225
|
+
<AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
|
226
|
+
</AvatarWrapper>
|
227
|
+
)}
|
228
|
+
actions={(
|
229
|
+
<IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
|
230
|
+
)}
|
231
|
+
>
|
232
|
+
<BoxedListContentRow>
|
233
|
+
Cras mattis consectetur purus sit amet fermentum...
|
234
|
+
</BoxedListContentRow>
|
235
|
+
</BoxedListItem>
|
236
|
+
<BoxedListItem
|
237
|
+
type="alert"
|
238
|
+
selected={true}
|
239
|
+
media={(
|
240
|
+
<AvatarWrapper size="medium">
|
241
|
+
<AvatarContentText text="WS" tooltipText="Walter Sobchak" />
|
242
|
+
</AvatarWrapper>
|
243
|
+
)}
|
244
|
+
actions={(
|
245
|
+
<IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
|
246
|
+
)}
|
247
|
+
>
|
248
|
+
<BoxedListContentRow>
|
249
|
+
Nullam id dolor id nibh ultricies vehicula ut id elit...
|
250
|
+
</BoxedListContentRow>
|
251
|
+
</BoxedListItem>
|
252
|
+
</BoxedList>
|
253
|
+
|
254
|
+
// with footer + different layout options.
|
255
|
+
|
256
|
+
<BoxedList>
|
257
|
+
<BoxedListItem
|
258
|
+
type="warning"
|
259
|
+
clickable={true}
|
260
|
+
media={(
|
261
|
+
<Icon name='calendar-list' />
|
262
|
+
)}
|
263
|
+
actions={(
|
264
|
+
<IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
|
265
|
+
)}
|
266
|
+
>
|
267
|
+
<BoxedListContentRow>
|
268
|
+
Vivamus sagittis lacus vel augue laoreet rutrum...
|
269
|
+
</BoxedListContentRow>
|
270
|
+
</BoxedListItem>
|
271
|
+
<BoxedListItem
|
272
|
+
type="primary"
|
273
|
+
clickable={true}
|
274
|
+
media={(
|
275
|
+
<AvatarWrapper size="medium">
|
276
|
+
<AvatarContentText text="JC" tooltipText="Joel Coen" />
|
277
|
+
</AvatarWrapper>
|
278
|
+
)}
|
279
|
+
footer={(
|
280
|
+
<ButtonGroup align='end'>
|
281
|
+
<Button size='small' style='hollow' text='Decline' onClick={()=> false} />
|
282
|
+
<Button size='small' style='hollow' type='primary' text='Accept' onClick={()=> false} />
|
283
|
+
</ButtonGroup>
|
284
|
+
)}
|
285
|
+
>
|
286
|
+
<Heading className='sd-margin-b--1' type='h5'>Amet Mollis Porta</Heading>
|
287
|
+
<BoxedListContentRow>
|
288
|
+
Nullam id dolor id nibh ultricies vehicula...
|
289
|
+
</BoxedListContentRow>
|
290
|
+
</BoxedListItem>
|
291
|
+
<BoxedListItem
|
292
|
+
type="success"
|
293
|
+
clickable={true}
|
294
|
+
media={(
|
295
|
+
<AvatarWrapper size="medium">
|
296
|
+
<AvatarContentText text="EC" tooltipText="Ethan Coen" />
|
297
|
+
</AvatarWrapper>
|
298
|
+
)}
|
299
|
+
actions={(
|
300
|
+
<React.Fragment>
|
301
|
+
<IconButton icon="pencil" ariaValue="Edit" onClick={()=> false} />
|
302
|
+
<IconButton icon="trash" ariaValue="Delete" onClick={()=> false} />
|
303
|
+
</React.Fragment>
|
304
|
+
)}
|
305
|
+
>
|
306
|
+
<BoxedListContentRow>
|
307
|
+
Cras mattis consectetur...
|
308
|
+
</BoxedListContentRow>
|
309
|
+
<BoxedListContentRow>
|
310
|
+
<Label type='success' text='In progress' style='translucent' />
|
311
|
+
</BoxedListContentRow>
|
312
|
+
</BoxedListItem>
|
313
|
+
<BoxedListItem
|
314
|
+
type="warning"
|
315
|
+
clickable={true}
|
316
|
+
media={(
|
317
|
+
<AvatarWrapper size="medium">
|
318
|
+
<AvatarContentText text="BL" tooltipText="Bunny Lebowski" />
|
319
|
+
</AvatarWrapper>
|
320
|
+
)}
|
321
|
+
actions={(
|
322
|
+
<IconButton icon="pencil" ariaValue="Edit" onClick={()=> false} />
|
323
|
+
)}
|
324
|
+
footer={(
|
325
|
+
<ButtonGroup align='end'>
|
326
|
+
<Button size='small' style='hollow' text='Decline' onClick={()=> false} />
|
327
|
+
<Button size='small' style='hollow' type='primary' text='Accept' onClick={()=> false} />
|
328
|
+
</ButtonGroup>
|
329
|
+
)}
|
330
|
+
>
|
331
|
+
<BoxedListContentRow>
|
332
|
+
<Heading className='sd-margin-e--auto' align='start' type='h4'>Dolor Bibenduma</Heading>
|
333
|
+
<Text align='end' color='light'>23.12.2021</Text>
|
334
|
+
</BoxedListContentRow>
|
335
|
+
<BoxedListContentRow>
|
336
|
+
<Text>
|
337
|
+
Cras justo odio, dapibus ac facilisis in...
|
338
|
+
</Text>
|
339
|
+
</BoxedListContentRow>
|
340
|
+
</BoxedListItem>
|
341
|
+
</BoxedList>
|
342
|
+
`}
|
343
|
+
</Markup.ReactMarkupCode>
|
344
|
+
</Markup.ReactMarkup>
|
345
|
+
|
346
|
+
<h3 className="docs-page__h3">Props</h3>
|
347
|
+
<p className="docs-page__paragraph">BoxedList</p>
|
348
|
+
<PropsList>
|
349
|
+
<Prop name='density' isRequired={false} type='compact | comfortable' default='compact' description='Increase the gap beetween list items.'/>
|
350
|
+
</PropsList>
|
351
|
+
<p className="docs-page__paragraph">BoxedListItem</p>
|
352
|
+
<PropsList>
|
353
|
+
<Prop name='clickable' isRequired={false} type='boolean' default='false' description='Adds hover effect and changes the cursor to poiter.'/>
|
354
|
+
<Prop name='selected' isRequired={false} type='boolean' default='false' description='Changes the state to selected and adds apropriate styling for it.'/>
|
355
|
+
<Prop name='slideInActions' isRequired={false} type='boolean' default='false' description='If set to true, the action buttons will be hidden and slide in from the right on hover.'/>
|
356
|
+
<Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight' default='/' description='Adds a clour coded border on the right, based on the selected type.'/>
|
357
|
+
</PropsList>
|
358
|
+
|
359
|
+
</section>
|
360
|
+
)
|
361
|
+
}
|
362
|
+
}
|
@@ -24,33 +24,33 @@ export default class ButtonGroupsDoc extends React.Component {
|
|
24
24
|
</Alert>
|
25
25
|
<Markup.ReactMarkup>
|
26
26
|
<Markup.ReactMarkupPreview>
|
27
|
-
<p className="docs-page__paragraph">//
|
27
|
+
<p className="docs-page__paragraph">// Start (left)</p>
|
28
28
|
<div className="form__row form__row--flex docs-page__test-helper-2">
|
29
|
-
<ButtonGroup align='
|
29
|
+
<ButtonGroup align='start'>
|
30
30
|
<Button text='one' style='hollow' onClick={()=> false} />
|
31
31
|
<Button text='two' style='hollow' onClick={()=> false} />
|
32
32
|
</ButtonGroup>
|
33
33
|
</div>
|
34
34
|
<div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
|
35
|
-
<ButtonGroup align='
|
36
|
-
<IconButton icon='home'
|
37
|
-
<IconButton icon='bell'
|
38
|
-
<IconButton icon='heart'
|
35
|
+
<ButtonGroup align='start'>
|
36
|
+
<IconButton icon='home' ariaValue='Home' onClick={()=> false} />
|
37
|
+
<IconButton icon='bell' ariaValue='Notifications' onClick={()=> false} />
|
38
|
+
<IconButton icon='heart' ariaValue='Favorites' onClick={()=> false} />
|
39
39
|
</ButtonGroup>
|
40
40
|
</div>
|
41
41
|
|
42
|
-
<p className="docs-page__paragraph">//
|
42
|
+
<p className="docs-page__paragraph">// End (right)</p>
|
43
43
|
<div className="form__row form__row--flex docs-page__test-helper-2">
|
44
|
-
<ButtonGroup align='
|
44
|
+
<ButtonGroup align='end'>
|
45
45
|
<Button text='Cancel' style='hollow' onClick={()=> false} />
|
46
46
|
<Button text='Save' type='primary' onClick={()=> false} />
|
47
47
|
</ButtonGroup>
|
48
48
|
</div>
|
49
49
|
<div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
|
50
|
-
<ButtonGroup align='
|
51
|
-
<IconButton icon='trash'
|
52
|
-
<IconButton icon='pencil'
|
53
|
-
<IconButton icon='close-small'
|
50
|
+
<ButtonGroup align='end'>
|
51
|
+
<IconButton icon='trash' ariaValue='Delete' onClick={()=> false} />
|
52
|
+
<IconButton icon='pencil' ariaValue='Edit' onClick={()=> false} />
|
53
|
+
<IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
|
54
54
|
</ButtonGroup>
|
55
55
|
</div>
|
56
56
|
<p className="docs-page__paragraph">// Center</p>
|
@@ -60,9 +60,9 @@ export default class ButtonGroupsDoc extends React.Component {
|
|
60
60
|
<Button text='two' style='hollow' onClick={()=> false} />
|
61
61
|
</ButtonGroup>
|
62
62
|
</div>
|
63
|
-
<p className="docs-page__paragraph">//
|
63
|
+
<p className="docs-page__paragraph">// Start + Center + End</p>
|
64
64
|
<div className="form__row form__row--flex docs-page__test-helper-2">
|
65
|
-
<ButtonGroup align='
|
65
|
+
<ButtonGroup align='start'>
|
66
66
|
<Button text='one' style='hollow' onClick={()=> false} />
|
67
67
|
<Button text='two' style='hollow' onClick={()=> false} />
|
68
68
|
</ButtonGroup>
|
@@ -70,38 +70,38 @@ export default class ButtonGroupsDoc extends React.Component {
|
|
70
70
|
<Button text='three' style='hollow' onClick={()=> false} />
|
71
71
|
<Button text='four' style='hollow' onClick={()=> false} />
|
72
72
|
</ButtonGroup>
|
73
|
-
<ButtonGroup align='
|
73
|
+
<ButtonGroup align='end'>
|
74
74
|
<Button text='Cancel' style='hollow' onClick={()=> false} />
|
75
75
|
<Button text='Save' type='primary' onClick={()=> false} />
|
76
76
|
</ButtonGroup>
|
77
77
|
</div>
|
78
78
|
</Markup.ReactMarkupPreview>
|
79
79
|
<Markup.ReactMarkupCode>{`
|
80
|
-
//
|
81
|
-
<ButtonGroup align='
|
80
|
+
// Start (left)
|
81
|
+
<ButtonGroup align='start'>
|
82
82
|
<Button text='one' style='hollow' onClick={()=> false} />
|
83
83
|
<Button text='two' style='hollow' onClick={()=> false} />
|
84
84
|
</ButtonGroup>
|
85
|
-
<ButtonGroup align='
|
86
|
-
<IconButton icon='
|
87
|
-
<IconButton icon='
|
88
|
-
<IconButton icon='
|
85
|
+
<ButtonGroup align='start'>
|
86
|
+
<IconButton icon='trash' ariaValue='Delete' onClick={()=> false} />
|
87
|
+
<IconButton icon='pencil' ariaValue='Edit' onClick={()=> false} />
|
88
|
+
<IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
|
89
89
|
</ButtonGroup>
|
90
90
|
|
91
|
-
//
|
92
|
-
<ButtonGroup align='
|
91
|
+
// End (right)
|
92
|
+
<ButtonGroup align='end'>
|
93
93
|
<Button text='Cancel' style='hollow' onClick={()=> false} />
|
94
94
|
<Button text='Save' type='primary' onClick={()=> false} />
|
95
95
|
</ButtonGroup>
|
96
96
|
|
97
|
-
<ButtonGroup align='
|
98
|
-
<IconButton icon='trash'
|
99
|
-
<IconButton icon='pencil'
|
100
|
-
<IconButton icon='close-small'
|
97
|
+
<ButtonGroup align='end'>
|
98
|
+
<IconButton icon='trash' ariaValue='Delete' onClick={()=> false} />
|
99
|
+
<IconButton icon='pencil' ariaValue='Edit' onClick={()=> false} />
|
100
|
+
<IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
|
101
101
|
</ButtonGroup>
|
102
102
|
|
103
|
-
//
|
104
|
-
<ButtonGroup align='
|
103
|
+
// Start + Center + End
|
104
|
+
<ButtonGroup align='start'>
|
105
105
|
<Button text='one' style='hollow' onClick={()=> false} />
|
106
106
|
<Button text='two' style='hollow' onClick={()=> false} />
|
107
107
|
</ButtonGroup>
|
@@ -109,7 +109,7 @@ export default class ButtonGroupsDoc extends React.Component {
|
|
109
109
|
<Button text='three' style='hollow' onClick={()=> false} />
|
110
110
|
<Button text='four' style='hollow' onClick={()=> false} />
|
111
111
|
</ButtonGroup>
|
112
|
-
<ButtonGroup align='
|
112
|
+
<ButtonGroup align='end'>
|
113
113
|
<Button text='Cancel' style='hollow' onClick={()=> false} />
|
114
114
|
<Button text='Save' type='primary' onClick={()=> false} />
|
115
115
|
</ButtonGroup>
|
@@ -143,9 +143,10 @@ export default class ButtonGroupsDoc extends React.Component {
|
|
143
143
|
<h3 className="docs-page__h3">Props</h3>
|
144
144
|
<PropsList>
|
145
145
|
<Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='Specifies orientation for child components of ButtonGroup'/>
|
146
|
-
<Prop name='spaces' isRequired={false} type='comfort | compact' default='comfort' description='Space between buttons: comfort (default)
|
147
|
-
<Prop name='align' isRequired={false} type='
|
146
|
+
<Prop name='spaces' isRequired={false} type='comfort | compact | no-space' default='comfort' description='Space (gap) between buttons: comfort (default), compact and no-space.'/>
|
147
|
+
<Prop name='align' isRequired={false} type='start | end | center | inline | sub' default='start' description='Alignment in relation to the parent element. Inline value renders the ButtonGroup without pushing surrounding elements.'/>
|
148
148
|
<Prop name='padded' isRequired={false} type='boolean' default='false' description='Adds predefined space to the side based on alignment and orientation.'/>
|
149
|
+
<Prop name='subgroup' isRequired={false} type='boolean' default='false' description='For nested ButtonGroups. Set to true for a ButtonGroup nested inside a parent ButtonGroup.'/>
|
149
150
|
</PropsList>
|
150
151
|
|
151
152
|
|
@@ -161,7 +162,7 @@ export default class ButtonGroupsDoc extends React.Component {
|
|
161
162
|
<Markup.ReactMarkupPreview>
|
162
163
|
<p className="docs-page__paragraph">// Default (small)</p>
|
163
164
|
<div className="form__row form__row--flex docs-page__test-helper-2">
|
164
|
-
<ButtonGroup align='
|
165
|
+
<ButtonGroup align='start'>
|
165
166
|
<Button text='one' style='hollow' onClick={()=> false} />
|
166
167
|
<Button text='two' style='hollow' onClick={()=> false} />
|
167
168
|
<Divider />
|
@@ -172,7 +173,7 @@ export default class ButtonGroupsDoc extends React.Component {
|
|
172
173
|
|
173
174
|
<p className="docs-page__paragraph">// Small with border</p>
|
174
175
|
<div className="form__row form__row--flex docs-page__test-helper-2">
|
175
|
-
<ButtonGroup align='
|
176
|
+
<ButtonGroup align='end'>
|
176
177
|
<Button text='one' style='hollow' onClick={()=> false} />
|
177
178
|
<Button text='two' style='hollow' onClick={()=> false} />
|
178
179
|
<Divider border={true} />
|
@@ -183,35 +184,35 @@ export default class ButtonGroupsDoc extends React.Component {
|
|
183
184
|
|
184
185
|
<div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
|
185
186
|
<ButtonGroup align='center'>
|
186
|
-
<IconButton icon='undo'
|
187
|
-
<IconButton icon='redo'
|
188
|
-
<IconButton icon='print'
|
187
|
+
<IconButton icon='undo' ariaValue='Undo' onClick={()=> false} />
|
188
|
+
<IconButton icon='redo' ariaValue='Redo' onClick={()=> false} />
|
189
|
+
<IconButton icon='print' ariaValue='Print' onClick={()=> false} />
|
189
190
|
<Divider border={true} />
|
190
|
-
<IconButton icon='bold'
|
191
|
-
<IconButton icon='italic'
|
192
|
-
<IconButton icon='underline'
|
193
|
-
<IconButton icon='strikethrough'
|
191
|
+
<IconButton icon='bold' ariaValue='Bold' onClick={()=> false} />
|
192
|
+
<IconButton icon='italic' ariaValue='Italic' onClick={()=> false} />
|
193
|
+
<IconButton icon='underline' ariaValue='Underline' onClick={()=> false} />
|
194
|
+
<IconButton icon='strikethrough' ariaValue='Strikethrough' onClick={()=> false} />
|
194
195
|
<Divider border={true} />
|
195
|
-
<IconButton icon='align-left'
|
196
|
-
<IconButton icon='align-center'
|
197
|
-
<IconButton icon='align-right'
|
196
|
+
<IconButton icon='align-left' ariaValue='Align left' onClick={()=> false} />
|
197
|
+
<IconButton icon='align-center' ariaValue='Align center' onClick={()=> false} />
|
198
|
+
<IconButton icon='align-right' ariaValue='Align right' onClick={()=> false} />
|
198
199
|
</ButtonGroup>
|
199
200
|
</div>
|
200
201
|
|
201
202
|
<p className="docs-page__paragraph">// Medium</p>
|
202
203
|
<div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
|
203
|
-
<ButtonGroup align='
|
204
|
-
<IconButton icon='home'
|
205
|
-
<IconButton icon='slideshow'
|
204
|
+
<ButtonGroup align='start'>
|
205
|
+
<IconButton icon='home' ariaValue='Home' onClick={()=> false} />
|
206
|
+
<IconButton icon='slideshow' ariaValue='Gallery' onClick={()=> false} />
|
206
207
|
<Divider size='medium' />
|
207
|
-
<IconButton icon='bell'
|
208
|
-
<IconButton icon='heart'
|
208
|
+
<IconButton icon='bell' ariaValue='Notifications' onClick={()=> false} />
|
209
|
+
<IconButton icon='heart' ariaValue='Favorites' onClick={()=> false} />
|
209
210
|
</ButtonGroup>
|
210
211
|
</div>
|
211
212
|
</Markup.ReactMarkupPreview>
|
212
213
|
<Markup.ReactMarkupCode>{`
|
213
214
|
// // Default (small)
|
214
|
-
<ButtonGroup align='
|
215
|
+
<ButtonGroup align='start'>
|
215
216
|
<Button text='one' style='hollow' onClick={()=> false} />
|
216
217
|
<Button text='two' style='hollow' onClick={()=> false} />
|
217
218
|
<Divider />
|
@@ -220,7 +221,7 @@ export default class ButtonGroupsDoc extends React.Component {
|
|
220
221
|
</ButtonGroup>
|
221
222
|
|
222
223
|
// Small with border
|
223
|
-
<ButtonGroup align='
|
224
|
+
<ButtonGroup align='end'>
|
224
225
|
<Button text='one' style='hollow' onClick={()=> false} />
|
225
226
|
<Button text='two' style='hollow' onClick={()=> false} />
|
226
227
|
<Divider border={true} />
|
@@ -229,27 +230,27 @@ export default class ButtonGroupsDoc extends React.Component {
|
|
229
230
|
</ButtonGroup>
|
230
231
|
|
231
232
|
<ButtonGroup align='center'>
|
232
|
-
<IconButton icon='undo'
|
233
|
-
<IconButton icon='redo'
|
234
|
-
<IconButton icon='print'
|
233
|
+
<IconButton icon='undo' ariaValue='Undo' onClick={()=> false} />
|
234
|
+
<IconButton icon='redo' ariaValue='Redo' onClick={()=> false} />
|
235
|
+
<IconButton icon='print' ariaValue='Print' onClick={()=> false} />
|
235
236
|
<Divider border={true} />
|
236
|
-
<IconButton icon='bold'
|
237
|
-
<IconButton icon='italic'
|
238
|
-
<IconButton icon='underline'
|
239
|
-
<IconButton icon='strikethrough'
|
237
|
+
<IconButton icon='bold' ariaValue='Bold' onClick={()=> false} />
|
238
|
+
<IconButton icon='italic' ariaValue='Italic' onClick={()=> false} />
|
239
|
+
<IconButton icon='underline' ariaValue='Underline' onClick={()=> false} />
|
240
|
+
<IconButton icon='strikethrough' ariaValue='Strikethrough' onClick={()=> false} />
|
240
241
|
<Divider border={true} />
|
241
|
-
<IconButton icon='align-left'
|
242
|
-
<IconButton icon='align-center'
|
243
|
-
<IconButton icon='align-right'
|
242
|
+
<IconButton icon='align-left' ariaValue='Align left' onClick={()=> false} />
|
243
|
+
<IconButton icon='align-center' ariaValue='Align center' onClick={()=> false} />
|
244
|
+
<IconButton icon='align-right' ariaValue='Align right' onClick={()=> false} />
|
244
245
|
</ButtonGroup>
|
245
246
|
|
246
247
|
// Medium
|
247
248
|
<ButtonGroup align='left'>
|
248
|
-
<IconButton icon='home'
|
249
|
-
<IconButton icon='slideshow'
|
249
|
+
<IconButton icon='home' ariaValue='Home' onClick={()=> false} />
|
250
|
+
<IconButton icon='slideshow' ariaValue='Gallery' onClick={()=> false} />
|
250
251
|
<Divider size='medium' />
|
251
|
-
<IconButton icon='bell'
|
252
|
-
<IconButton icon='heart'
|
252
|
+
<IconButton icon='bell' ariaValue='Notifications' onClick={()=> false} />
|
253
|
+
<IconButton icon='heart' ariaValue='Favorites' onClick={()=> false} />
|
253
254
|
</ButtonGroup>
|
254
255
|
`}
|
255
256
|
</Markup.ReactMarkupCode>
|