superdesk-ui-framework 4.0.47 → 4.0.49
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/.eslintrc.js +0 -1
- package/.eslintrc.json +2 -5
- package/.github/workflows/test.yml +22 -26
- package/.prettierignore +3 -0
- package/.prettierrc.js +9 -0
- package/.travis.yml +4 -4
- package/README.md +14 -1
- package/app/styles/_time.scss +28 -0
- package/app/styles/app.scss +1 -0
- package/app/styles/design-tokens/_design-tokens-general.scss +6 -3
- package/app/styles/form-elements/_forms-general.scss +0 -4
- package/app-typescript/components/Alert.tsx +12 -16
- package/app-typescript/components/Autocomplete.tsx +53 -42
- package/app-typescript/components/Badge.tsx +1 -1
- package/app-typescript/components/Button.tsx +5 -11
- package/app-typescript/components/ButtonGroup.tsx +15 -10
- package/app-typescript/components/Carousel.tsx +25 -26
- package/app-typescript/components/CheckButtonGroup.tsx +6 -10
- package/app-typescript/components/Checkbox.tsx +16 -10
- package/app-typescript/components/CheckboxButton.tsx +22 -13
- package/app-typescript/components/ContentDivider.tsx +6 -7
- package/app-typescript/components/CreateButton.tsx +8 -6
- package/app-typescript/components/DatePicker.tsx +59 -55
- package/app-typescript/components/DateTimePicker.tsx +51 -48
- package/app-typescript/components/Divider.tsx +2 -4
- package/app-typescript/components/DonutChart.tsx +11 -6
- package/app-typescript/components/DragHandle.tsx +10 -6
- package/app-typescript/components/DragHandleDots.tsx +1 -3
- package/app-typescript/components/DropZone.tsx +27 -25
- package/app-typescript/components/Dropdown.tsx +61 -102
- package/app-typescript/components/DropdownFirst.tsx +57 -69
- package/app-typescript/components/DurationInput.tsx +64 -54
- package/app-typescript/components/Editor/EditorButton.tsx +4 -3
- package/app-typescript/components/EmptyState.tsx +10 -14
- package/app-typescript/components/Form/FormGroup.tsx +9 -16
- package/app-typescript/components/Form/FormItem.tsx +1 -5
- package/app-typescript/components/Form/FormLabel.tsx +0 -1
- package/app-typescript/components/Form/FormRow.tsx +12 -19
- package/app-typescript/components/Form/FormRowNew.tsx +9 -16
- package/app-typescript/components/Form/FormText.tsx +1 -5
- package/app-typescript/components/Form/InputBase.tsx +12 -11
- package/app-typescript/components/Form/InputNew.tsx +11 -12
- package/app-typescript/components/Form/InputWrapper.tsx +9 -18
- package/app-typescript/components/Form/index.tsx +9 -9
- package/app-typescript/components/FormLabel.tsx +1 -5
- package/app-typescript/components/GridItem.tsx +38 -69
- package/app-typescript/components/GridList.tsx +2 -6
- package/app-typescript/components/HeadingText.tsx +4 -5
- package/app-typescript/components/IconButton.tsx +4 -10
- package/app-typescript/components/IconLabel.tsx +5 -5
- package/app-typescript/components/IconPicker.tsx +128 -126
- package/app-typescript/components/IllustrationButton.tsx +2 -8
- package/app-typescript/components/Input.tsx +2 -2
- package/app-typescript/components/Label.tsx +11 -7
- package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringContainer.tsx +4 -6
- package/app-typescript/components/Layouts/AuthoringFrame.tsx +4 -20
- package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +1 -3
- package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -6
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +5 -5
- package/app-typescript/components/Layouts/AuthoringMain.tsx +3 -4
- package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringMainContent.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +1 -6
- package/app-typescript/components/Layouts/BottomBarAction.tsx +8 -10
- package/app-typescript/components/Layouts/Container.tsx +13 -8
- package/app-typescript/components/Layouts/ContentSplitter.tsx +2 -6
- package/app-typescript/components/Layouts/CoreLayout.tsx +5 -12
- package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +1 -1
- package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +1 -5
- package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -4
- package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +1 -5
- package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +2 -4
- package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +8 -9
- package/app-typescript/components/Layouts/HamburgerButton.tsx +13 -14
- package/app-typescript/components/Layouts/HeaderPanel.tsx +1 -5
- package/app-typescript/components/Layouts/Layout.tsx +10 -16
- package/app-typescript/components/Layouts/LayoutContainer.tsx +2 -7
- package/app-typescript/components/Layouts/LeftPanel.tsx +4 -11
- package/app-typescript/components/Layouts/MainMenu.tsx +18 -32
- package/app-typescript/components/Layouts/MainPanel.tsx +10 -11
- package/app-typescript/components/Layouts/NotificationPanel.tsx +20 -29
- package/app-typescript/components/Layouts/OverlayPanel.tsx +3 -5
- package/app-typescript/components/Layouts/PageLayout.tsx +4 -21
- package/app-typescript/components/Layouts/Panel.tsx +45 -81
- package/app-typescript/components/Layouts/index.tsx +39 -39
- package/app-typescript/components/LeftMenu.tsx +51 -53
- package/app-typescript/components/ListItemLoader.tsx +1 -1
- package/app-typescript/components/Lists/BoxedList.tsx +16 -41
- package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +2 -10
- package/app-typescript/components/Lists/ContentList.tsx +68 -62
- package/app-typescript/components/Lists/SimpleList.tsx +13 -12
- package/app-typescript/components/Lists/TableList.tsx +169 -217
- package/app-typescript/components/Lists/index.tsx +2 -2
- package/app-typescript/components/Loader.tsx +1 -3
- package/app-typescript/components/Menu.tsx +2 -4
- package/app-typescript/components/Modal.tsx +21 -21
- package/app-typescript/components/MultiSelect.tsx +6 -6
- package/app-typescript/components/NavButton.tsx +10 -8
- package/app-typescript/components/Navigation/BottomNav.tsx +21 -17
- package/app-typescript/components/Navigation/QuickNavBar.tsx +40 -37
- package/app-typescript/components/Navigation/SideBarMenu.tsx +21 -17
- package/app-typescript/components/Navigation/SideBarTabs.tsx +13 -19
- package/app-typescript/components/Navigation/index.tsx +3 -3
- package/app-typescript/components/Popover.tsx +19 -21
- package/app-typescript/components/PropsList.tsx +2 -4
- package/app-typescript/components/RadioButtonGroup.tsx +48 -45
- package/app-typescript/components/RadioGroup.tsx +9 -8
- package/app-typescript/components/ResizablePanels.tsx +2 -3
- package/app-typescript/components/ResizeObserverComponent.tsx +1 -5
- package/app-typescript/components/SearchBar.tsx +53 -45
- package/app-typescript/components/Select.tsx +6 -8
- package/app-typescript/components/SelectGrid.tsx +32 -40
- package/app-typescript/components/SelectPreview.tsx +31 -25
- package/app-typescript/components/SelectWithTemplate.tsx +10 -11
- package/app-typescript/components/ShowPopup.tsx +32 -46
- package/app-typescript/components/SidebarMenu.tsx +19 -18
- package/app-typescript/components/Skeleton.tsx +12 -11
- package/app-typescript/components/SlidingToolbar.tsx +1 -6
- package/app-typescript/components/Spinner.tsx +2 -6
- package/app-typescript/components/StrechBar.tsx +1 -5
- package/app-typescript/components/SubNav.tsx +10 -8
- package/app-typescript/components/SvgIconIllustration.tsx +477 -105
- package/app-typescript/components/Switch.tsx +14 -12
- package/app-typescript/components/SwitchGroup.tsx +10 -10
- package/app-typescript/components/TabCustom.tsx +28 -35
- package/app-typescript/components/TabList.tsx +13 -10
- package/app-typescript/components/Tag.tsx +21 -24
- package/app-typescript/components/TagInput.tsx +4 -11
- package/app-typescript/components/Text/Heading.tsx +21 -41
- package/app-typescript/components/Text/Text.tsx +16 -12
- package/app-typescript/components/Text/Time.tsx +14 -10
- package/app-typescript/components/ThemeSelector.tsx +15 -14
- package/app-typescript/components/TimePicker.tsx +60 -6
- package/app-typescript/components/TimePickerPopover.tsx +274 -0
- package/app-typescript/components/TimePickerV2.tsx +20 -20
- package/app-typescript/components/Toast.tsx +11 -7
- package/app-typescript/components/ToastMessage.tsx +3 -14
- package/app-typescript/components/ToastText.tsx +30 -32
- package/app-typescript/components/ToastWrapper.tsx +76 -74
- package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -45
- package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +31 -33
- package/app-typescript/components/ToggleBox/index.tsx +3 -7
- package/app-typescript/components/Tooltip.tsx +1 -1
- package/app-typescript/components/TreeMenu.tsx +72 -81
- package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +1 -5
- package/app-typescript/components/TreeSelect/TreeSelect.tsx +221 -238
- package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +20 -24
- package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +12 -15
- package/app-typescript/components/WithPagination.tsx +34 -39
- package/app-typescript/components/WithPopover.tsx +0 -1
- package/app-typescript/components/WithPortal.tsx +4 -7
- package/app-typescript/components/WithSizeObserver.tsx +2 -6
- package/app-typescript/components/_Positioner.tsx +26 -26
- package/app-typescript/components/avatar/avatar-action-add.tsx +1 -6
- package/app-typescript/components/avatar/avatar-group.tsx +49 -68
- package/app-typescript/components/avatar/avatar-image.tsx +18 -12
- package/app-typescript/components/avatar/avatar-placeholder.tsx +3 -15
- package/app-typescript/components/avatar/avatar-text.tsx +1 -4
- package/app-typescript/components/avatar/avatar-wrapper.tsx +18 -30
- package/app-typescript/components/avatar/avatar.tsx +5 -8
- package/app-typescript/components/with-pagination.spec.tsx +8 -27
- package/app-typescript/helpers.tsx +2 -2
- package/app-typescript/index.ts +111 -100
- package/app-typescript/utils/time.tsx +31 -0
- package/declarations.d.ts +1 -1
- package/dist/components/Alerts.tsx +171 -78
- package/dist/components/Autocomplete.tsx +187 -78
- package/dist/components/Avatar.tsx +52 -112
- package/dist/components/Badges.tsx +111 -67
- package/dist/components/BigIconFont.tsx +29 -17
- package/dist/components/BoxedList.tsx +244 -114
- package/dist/components/ButtonGroups.tsx +213 -147
- package/dist/components/Buttons.tsx +409 -137
- package/dist/components/Card.tsx +6 -7
- package/dist/components/Carousel.tsx +126 -39
- package/dist/components/Checkboxs.tsx +446 -105
- package/dist/components/Container.tsx +95 -48
- package/dist/components/ContentDivider.tsx +110 -63
- package/dist/components/ContentList.tsx +577 -253
- package/dist/components/CreateButton.tsx +71 -21
- package/dist/components/DatePicker.tsx +102 -26
- package/dist/components/DateTimePicker.tsx +49 -11
- package/dist/components/DragHandleDocs.tsx +56 -26
- package/dist/components/DropZone.tsx +67 -29
- package/dist/components/Dropdowns.tsx +220 -131
- package/dist/components/DurationInput.tsx +92 -32
- package/dist/components/EmptyStates.tsx +61 -26
- package/dist/components/GridItem.tsx +190 -91
- package/dist/components/GridList.tsx +37 -17
- package/dist/components/Heading.tsx +81 -35
- package/dist/components/IconButtons.tsx +125 -32
- package/dist/components/IconFont.tsx +24 -12
- package/dist/components/IconLabels.tsx +146 -39
- package/dist/components/IconPicker.tsx +30 -13
- package/dist/components/IllustrationButton.tsx +40 -20
- package/dist/components/Index.tsx +128 -114
- package/dist/components/Inputs.tsx +153 -51
- package/dist/components/Labels.tsx +191 -117
- package/dist/components/LeftNavigations.tsx +327 -100
- package/dist/components/ListItems.tsx +8 -9
- package/dist/components/Loader.tsx +5 -4
- package/dist/components/Menu.tsx +48 -26
- package/dist/components/Modal.tsx +298 -104
- package/dist/components/MultiSelect.tsx +189 -53
- package/dist/components/NavButtons.tsx +86 -30
- package/dist/components/Panel.tsx +367 -120
- package/dist/components/Popover.tsx +37 -17
- package/dist/components/QuickNavigationBar.tsx +222 -86
- package/dist/components/RadioGroup.tsx +375 -137
- package/dist/components/ResizablePanels.tsx +8 -14
- package/dist/components/SelectGrid.tsx +79 -38
- package/dist/components/SelectWithTemplate.tsx +23 -14
- package/dist/components/Selects.tsx +94 -29
- package/dist/components/SimpleList.tsx +91 -41
- package/dist/components/SubNav.tsx +57 -37
- package/dist/components/Switch.tsx +168 -42
- package/dist/components/TableList.tsx +220 -66
- package/dist/components/Tabs.tsx +149 -64
- package/dist/components/TagInputDocs.tsx +73 -17
- package/dist/components/Tags.tsx +104 -73
- package/dist/components/Text.tsx +108 -58
- package/dist/components/TimePicker.tsx +76 -22
- package/dist/components/Toasts.tsx +162 -80
- package/dist/components/Togglebox.tsx +164 -62
- package/dist/components/Tooltips.tsx +27 -15
- package/dist/components/TreeMenu.tsx +95 -59
- package/dist/components/TreeSelect.tsx +297 -162
- package/dist/components/WithPaginationDocs.tsx +15 -16
- package/dist/components/WithSizeObserver.tsx +9 -9
- package/dist/components/tree-select/TreeSelect.tsx +126 -77
- package/dist/components/tree-select/example-1.tsx +8 -12
- package/dist/components/tree-select/example-2.tsx +2 -5
- package/dist/components/utilities/BorderRadiusUtilities.tsx +28 -13
- package/dist/components/utilities/BorderUtilities.tsx +31 -32
- package/dist/components/utilities/DisplayUtilities.tsx +4 -5
- package/dist/components/utilities/FlexAndGridUtilities.tsx +38 -38
- package/dist/components/utilities/ObjectFitUtilities.tsx +4 -6
- package/dist/components/utilities/ObjectPositionUtilities.tsx +3 -4
- package/dist/components/utilities/OpacityUtilities.tsx +4 -7
- package/dist/components/utilities/OverflowUtilities.tsx +4 -5
- package/dist/components/utilities/PositionUtilities.tsx +4 -5
- package/dist/components/utilities/ShadowUtilities.tsx +15 -16
- package/dist/components/utilities/SpacingUtilities.tsx +483 -178
- package/dist/components/utilities/TextUtilities.tsx +109 -60
- package/dist/design-patterns/Index.tsx +8 -11
- package/dist/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
- package/dist/examples.bundle.css +1257 -1155
- package/dist/examples.bundle.js +7904 -7035
- package/dist/playgrounds/dummy-data/items.ts +9 -8
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
- package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
- package/dist/playgrounds/react-playgrounds/Index.tsx +11 -11
- package/dist/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
- package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
- package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
- package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
- package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
- package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
- package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
- package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
- package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
- package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
- package/dist/playgrounds/react-playgrounds/components/Index.tsx +19 -21
- package/dist/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
- package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
- package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
- package/dist/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
- package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
- package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
- package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
- package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
- package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
- package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
- package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
- package/dist/playgrounds/react-playgrounds/tsconfig.json +1 -1
- package/dist/superdesk-ui.bundle.css +25 -4
- package/dist/superdesk-ui.bundle.js +3072 -2903
- package/dist/vendor.bundle.js +18 -18
- package/examples/css/docs-page.css +1135 -1116
- package/examples/css/reset.css +124 -43
- package/examples/css/vendor.css +125 -125
- package/examples/index.js +138 -139
- package/examples/js/doc.js +41 -40
- package/examples/js/react.js +82 -48
- package/examples/pages/components/Alerts.tsx +171 -78
- package/examples/pages/components/Autocomplete.tsx +187 -78
- package/examples/pages/components/Avatar.tsx +52 -112
- package/examples/pages/components/Badges.tsx +111 -67
- package/examples/pages/components/BigIconFont.tsx +29 -17
- package/examples/pages/components/BoxedList.tsx +244 -114
- package/examples/pages/components/ButtonGroups.tsx +213 -147
- package/examples/pages/components/Buttons.tsx +409 -137
- package/examples/pages/components/Card.tsx +6 -7
- package/examples/pages/components/Carousel.tsx +126 -39
- package/examples/pages/components/Checkboxs.tsx +446 -105
- package/examples/pages/components/Container.tsx +95 -48
- package/examples/pages/components/ContentDivider.tsx +110 -63
- package/examples/pages/components/ContentList.tsx +577 -253
- package/examples/pages/components/CreateButton.tsx +71 -21
- package/examples/pages/components/DatePicker.tsx +102 -26
- package/examples/pages/components/DateTimePicker.tsx +49 -11
- package/examples/pages/components/DragHandleDocs.tsx +56 -26
- package/examples/pages/components/DropZone.tsx +67 -29
- package/examples/pages/components/Dropdowns.tsx +220 -131
- package/examples/pages/components/DurationInput.tsx +92 -32
- package/examples/pages/components/EmptyStates.tsx +61 -26
- package/examples/pages/components/GridItem.tsx +190 -91
- package/examples/pages/components/GridList.tsx +37 -17
- package/examples/pages/components/Heading.tsx +81 -35
- package/examples/pages/components/IconButtons.tsx +125 -32
- package/examples/pages/components/IconFont.tsx +24 -12
- package/examples/pages/components/IconLabels.tsx +146 -39
- package/examples/pages/components/IconPicker.tsx +30 -13
- package/examples/pages/components/IllustrationButton.tsx +40 -20
- package/examples/pages/components/Index.tsx +128 -114
- package/examples/pages/components/Inputs.tsx +153 -51
- package/examples/pages/components/Labels.tsx +191 -117
- package/examples/pages/components/LeftNavigations.tsx +327 -100
- package/examples/pages/components/ListItems.tsx +8 -9
- package/examples/pages/components/Loader.tsx +5 -4
- package/examples/pages/components/Menu.tsx +48 -26
- package/examples/pages/components/Modal.tsx +298 -104
- package/examples/pages/components/MultiSelect.tsx +189 -53
- package/examples/pages/components/NavButtons.tsx +86 -30
- package/examples/pages/components/Panel.tsx +367 -120
- package/examples/pages/components/Popover.tsx +37 -17
- package/examples/pages/components/QuickNavigationBar.tsx +222 -86
- package/examples/pages/components/RadioGroup.tsx +375 -137
- package/examples/pages/components/ResizablePanels.tsx +8 -14
- package/examples/pages/components/SelectGrid.tsx +79 -38
- package/examples/pages/components/SelectWithTemplate.tsx +23 -14
- package/examples/pages/components/Selects.tsx +94 -29
- package/examples/pages/components/SimpleList.tsx +91 -41
- package/examples/pages/components/SubNav.tsx +57 -37
- package/examples/pages/components/Switch.tsx +168 -42
- package/examples/pages/components/TableList.tsx +220 -66
- package/examples/pages/components/Tabs.tsx +149 -64
- package/examples/pages/components/TagInputDocs.tsx +73 -17
- package/examples/pages/components/Tags.tsx +104 -73
- package/examples/pages/components/Text.tsx +108 -58
- package/examples/pages/components/TimePicker.tsx +76 -22
- package/examples/pages/components/Toasts.tsx +162 -80
- package/examples/pages/components/Togglebox.tsx +164 -62
- package/examples/pages/components/Tooltips.tsx +27 -15
- package/examples/pages/components/TreeMenu.tsx +95 -59
- package/examples/pages/components/TreeSelect.tsx +297 -162
- package/examples/pages/components/WithPaginationDocs.tsx +15 -16
- package/examples/pages/components/WithSizeObserver.tsx +9 -9
- package/examples/pages/components/tree-select/TreeSelect.tsx +126 -77
- package/examples/pages/components/tree-select/example-1.tsx +8 -12
- package/examples/pages/components/tree-select/example-2.tsx +2 -5
- package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +28 -13
- package/examples/pages/components/utilities/BorderUtilities.tsx +31 -32
- package/examples/pages/components/utilities/DisplayUtilities.tsx +4 -5
- package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +38 -38
- package/examples/pages/components/utilities/ObjectFitUtilities.tsx +4 -6
- package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +3 -4
- package/examples/pages/components/utilities/OpacityUtilities.tsx +4 -7
- package/examples/pages/components/utilities/OverflowUtilities.tsx +4 -5
- package/examples/pages/components/utilities/PositionUtilities.tsx +4 -5
- package/examples/pages/components/utilities/ShadowUtilities.tsx +15 -16
- package/examples/pages/components/utilities/SpacingUtilities.tsx +483 -178
- package/examples/pages/components/utilities/TextUtilities.tsx +109 -60
- package/examples/pages/design-patterns/Index.tsx +8 -11
- package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
- package/examples/pages/playgrounds/dummy-data/items.ts +9 -8
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
- package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
- package/examples/pages/playgrounds/react-playgrounds/Index.tsx +11 -11
- package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
- package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
- package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
- package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
- package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
- package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
- package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
- package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
- package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
- package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
- package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +19 -21
- package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
- package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
- package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
- package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
- package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
- package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
- package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
- package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
- package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
- package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
- package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
- package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +1 -1
- package/globals.d.ts +1 -1
- package/mocha-setup.ts +3 -3
- package/package.json +119 -117
- package/react/components/Alert.js +6 -9
- package/react/components/Autocomplete.js +15 -23
- package/react/components/Badge.js +1 -1
- package/react/components/Button.js +4 -6
- package/react/components/ButtonGroup.js +1 -1
- package/react/components/Carousel.js +3 -3
- package/react/components/CheckButtonGroup.js +3 -6
- package/react/components/CheckboxButton.js +2 -4
- package/react/components/ContentDivider.js +1 -1
- package/react/components/DatePicker.js +29 -26
- package/react/components/DateTimePicker.d.ts +8 -4
- package/react/components/DateTimePicker.js +6 -8
- package/react/components/Divider.js +1 -1
- package/react/components/DonutChart.js +1 -1
- package/react/components/DragHandle.js +1 -1
- package/react/components/DragHandleDots.js +1 -1
- package/react/components/DropZone.js +6 -8
- package/react/components/Dropdown.d.ts +1 -1
- package/react/components/Dropdown.js +34 -38
- package/react/components/DropdownFirst.d.ts +11 -11
- package/react/components/DropdownFirst.js +20 -24
- package/react/components/DurationInput.js +37 -34
- package/react/components/EmptyState.js +5 -5
- package/react/components/Form/FormGroup.js +1 -1
- package/react/components/Form/FormItem.js +1 -1
- package/react/components/Form/FormRow.js +1 -1
- package/react/components/Form/FormRowNew.js +3 -3
- package/react/components/Form/FormText.js +1 -1
- package/react/components/Form/InputNew.js +3 -3
- package/react/components/Form/InputWrapper.js +7 -10
- package/react/components/GridItem.d.ts +1 -1
- package/react/components/GridItem.js +16 -16
- package/react/components/GridList.js +1 -1
- package/react/components/HeadingText.js +4 -5
- package/react/components/IconLabel.js +3 -5
- package/react/components/IconPicker.d.ts +1 -1
- package/react/components/IconPicker.js +111 -104
- package/react/components/IllustrationButton.js +1 -1
- package/react/components/Input.js +1 -1
- package/react/components/Layouts/AuthorinInnerSideBar.js +1 -1
- package/react/components/Layouts/AuthoringContainer.js +1 -1
- package/react/components/Layouts/AuthoringFrame.js +4 -4
- package/react/components/Layouts/AuthoringFrameContainer.js +1 -1
- package/react/components/Layouts/AuthoringFrameLeftBar.js +1 -1
- package/react/components/Layouts/AuthoringFrameMain.js +1 -1
- package/react/components/Layouts/AuthoringFrameNavBar.js +1 -1
- package/react/components/Layouts/AuthoringFrameOverlay.js +1 -1
- package/react/components/Layouts/AuthoringFrameRightBar.js +1 -1
- package/react/components/Layouts/AuthoringFrameSidePanel.js +1 -1
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +1 -1
- package/react/components/Layouts/AuthoringMainContainer.js +1 -1
- package/react/components/Layouts/AuthoringMainContent.js +1 -1
- package/react/components/Layouts/AuthoringMainToolBar.js +1 -1
- package/react/components/Layouts/BottomBarAction.js +2 -2
- package/react/components/Layouts/ContentSplitter.js +1 -1
- package/react/components/Layouts/CoreLayout.js +2 -2
- package/react/components/Layouts/CoreLayoutContainer.js +1 -1
- package/react/components/Layouts/CoreLayoutFooter.js +1 -1
- package/react/components/Layouts/CoreLayoutOverlay.js +1 -1
- package/react/components/Layouts/CoreLayoutSlideInMenu.js +2 -2
- package/react/components/Layouts/CoreLayoutTopMenu.js +3 -3
- package/react/components/Layouts/HamburgerButton.js +1 -1
- package/react/components/Layouts/HeaderPanel.js +1 -1
- package/react/components/Layouts/Layout.d.ts +1 -1
- package/react/components/Layouts/Layout.js +9 -9
- package/react/components/Layouts/LayoutContainer.js +1 -1
- package/react/components/Layouts/LeftPanel.js +1 -1
- package/react/components/Layouts/MainMenu.js +8 -10
- package/react/components/Layouts/MainPanel.js +1 -1
- package/react/components/Layouts/NotificationPanel.d.ts +1 -1
- package/react/components/Layouts/NotificationPanel.js +7 -7
- package/react/components/Layouts/OverlayPanel.js +3 -3
- package/react/components/Layouts/PageLayout.js +2 -2
- package/react/components/Layouts/Panel.d.ts +1 -1
- package/react/components/Layouts/Panel.js +12 -18
- package/react/components/LeftMenu.d.ts +3 -3
- package/react/components/LeftMenu.js +11 -13
- package/react/components/Lists/BoxedList.js +6 -6
- package/react/components/Lists/CalendarWeekDayItem.js +2 -2
- package/react/components/Lists/ContentList.js +24 -26
- package/react/components/Lists/TableList.d.ts +1 -1
- package/react/components/Lists/TableList.js +59 -79
- package/react/components/Loader.js +1 -1
- package/react/components/Menu.js +1 -1
- package/react/components/Modal.d.ts +1 -1
- package/react/components/MultiSelect.d.ts +1 -1
- package/react/components/MultiSelect.js +2 -2
- package/react/components/NavButton.js +2 -4
- package/react/components/Navigation/BottomNav.js +9 -8
- package/react/components/Navigation/QuickNavBar.js +17 -20
- package/react/components/Navigation/SideBarMenu.js +11 -9
- package/react/components/Navigation/SideBarTabs.js +9 -8
- package/react/components/Popover.js +1 -1
- package/react/components/RadioButtonGroup.js +15 -23
- package/react/components/ResizablePanels.js +1 -3
- package/react/components/ResizeObserverComponent.js +1 -3
- package/react/components/SearchBar.js +14 -16
- package/react/components/Select.js +3 -3
- package/react/components/SelectGrid.js +15 -20
- package/react/components/SelectPreview.js +13 -13
- package/react/components/SelectWithTemplate.js +3 -5
- package/react/components/ShowPopup.d.ts +1 -0
- package/react/components/ShowPopup.js +7 -10
- package/react/components/Skeleton.js +1 -1
- package/react/components/SlidingToolbar.js +1 -1
- package/react/components/Spinner.js +1 -1
- package/react/components/StrechBar.js +1 -1
- package/react/components/SubNav.js +1 -1
- package/react/components/Switch.js +4 -6
- package/react/components/SwitchGroup.js +1 -1
- package/react/components/TabCustom.js +6 -4
- package/react/components/TabList.js +4 -8
- package/react/components/Tag.js +13 -17
- package/react/components/TagInput.js +1 -1
- package/react/components/Text/Heading.js +6 -6
- package/react/components/ThemeSelector.js +1 -1
- package/react/components/TimePicker.d.ts +9 -2
- package/react/components/TimePicker.js +29 -4
- package/react/components/TimePickerPopover.d.ts +19 -0
- package/react/components/TimePickerPopover.js +225 -0
- package/react/components/TimePickerV2.js +17 -17
- package/react/components/Toast.js +3 -3
- package/react/components/ToastMessage.d.ts +1 -1
- package/react/components/ToastMessage.js +1 -1
- package/react/components/ToastText.js +5 -8
- package/react/components/ToastWrapper.js +3 -5
- package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
- package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -7
- package/react/components/ToggleBox/SimpleToggleBox.d.ts +1 -1
- package/react/components/ToggleBox/SimpleToggleBox.js +5 -5
- package/react/components/ToggleBox/index.js +3 -3
- package/react/components/TreeMenu.d.ts +1 -1
- package/react/components/TreeMenu.js +38 -44
- package/react/components/TreeSelect/TreeSelect.d.ts +2 -2
- package/react/components/TreeSelect/TreeSelect.js +105 -127
- package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -1
- package/react/components/TreeSelect/TreeSelectItem.js +10 -13
- package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -1
- package/react/components/TreeSelect/TreeSelectPill.js +8 -9
- package/react/components/WithPagination.js +18 -21
- package/react/components/WithPortal.d.ts +1 -1
- package/react/components/WithPortal.js +2 -1
- package/react/components/WithSizeObserver.js +1 -3
- package/react/components/_Positioner.js +11 -11
- package/react/components/avatar/avatar-action-add.js +1 -1
- package/react/components/avatar/avatar-group.js +11 -14
- package/react/components/avatar/avatar-image.js +6 -4
- package/react/components/avatar/avatar-placeholder.js +1 -1
- package/react/components/avatar/avatar-wrapper.js +2 -4
- package/react/components/avatar/avatar.js +4 -3
- package/react/helpers.js +2 -2
- package/react/index.d.ts +1 -1
- package/react/utils/time.d.ts +5 -0
- package/react/utils/time.js +36 -0
- package/tasks/webpack.dev.js +1 -1
- package/tasks/webpack.js +5 -5
- package/tasks/webpack.prod.js +1 -5
- package/tsconfig.json +2 -5
- package/tslint.json +6 -12
- package/webpack.config.js +2 -5
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import * as Markup from '../../js/react';
|
3
|
-
import {
|
3
|
+
import {PropsList, Prop, Button, ButtonGroup, IconButton, Label, SlidingToolbar} from '../../../app-typescript';
|
4
4
|
import * as PanelElements from '../../../app-typescript/components/Layouts/Panel';
|
5
5
|
import {Rotate} from '../../../app-typescript/components/Rotate';
|
6
6
|
|
@@ -18,24 +18,25 @@ interface IState {
|
|
18
18
|
}
|
19
19
|
|
20
20
|
export default class PanelDoc extends React.Component<IProps, IState> {
|
21
|
-
|
22
|
-
|
23
|
-
|
21
|
+
constructor(props: IProps) {
|
22
|
+
super(props);
|
23
|
+
this.state = {
|
24
24
|
openPanel1: true,
|
25
25
|
openPanel2: true,
|
26
26
|
openPanel3: true,
|
27
27
|
openPanel4: true,
|
28
28
|
openToolbar1: true,
|
29
29
|
rotate: false,
|
30
|
-
|
30
|
+
};
|
31
31
|
}
|
32
32
|
|
33
33
|
render() {
|
34
34
|
return (
|
35
|
-
<section className=
|
36
|
-
<h2 className=
|
37
|
-
|
38
|
-
<Markup.ReactMarkupCodePreview>
|
35
|
+
<section className="docs-page__container">
|
36
|
+
<h2 className="docs-page__h2">Panel</h2>
|
37
|
+
|
38
|
+
<Markup.ReactMarkupCodePreview>
|
39
|
+
{`
|
39
40
|
<Panel side='left' size="small">
|
40
41
|
<PanelHeader title='Title for the Panel' handlePanelParent={()=> false}>
|
41
42
|
</PanelHeader>
|
@@ -57,39 +58,69 @@ export default class PanelDoc extends React.Component<IProps, IState> {
|
|
57
58
|
<Markup.ReactMarkup>
|
58
59
|
<Markup.ReactMarkupPreview>
|
59
60
|
<p className="docs-page__paragraph">// Left</p>
|
60
|
-
<div
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
61
|
+
<div
|
62
|
+
className="d-flex"
|
63
|
+
style={{
|
64
|
+
border: '1px solid var(--sd-colour-line--medium)',
|
65
|
+
backgroundColor: 'var(--sd-colour-panel-bg--100)',
|
66
|
+
maxHeight: '400px',
|
67
|
+
}}
|
68
|
+
>
|
69
|
+
{this.state.openPanel1 ? null : (
|
70
|
+
<div className="d-flex items-center justify-center sd-flex--grow">
|
71
|
+
<Button
|
72
|
+
text="Open Panel"
|
73
|
+
style="filled"
|
74
|
+
onClick={() => this.setState({openPanel1: true})}
|
75
|
+
/>
|
76
|
+
</div>
|
77
|
+
)}
|
78
|
+
<PanelElements.Panel
|
79
|
+
side="left"
|
80
|
+
background="light"
|
81
|
+
open={this.state.openPanel1}
|
82
|
+
size="x-small"
|
83
|
+
>
|
67
84
|
<PanelElements.PanelHeader
|
68
|
-
title=
|
69
|
-
onClose={() => this.setState({
|
85
|
+
title="This is the Panel title"
|
86
|
+
onClose={() => this.setState({openPanel1: false})}
|
70
87
|
iconButtons={[
|
71
88
|
<Rotate degrees={this.state.rotate ? 90 : 0}>
|
72
|
-
<IconButton
|
89
|
+
<IconButton
|
90
|
+
ariaValue="Pin"
|
91
|
+
icon="pin"
|
92
|
+
onClick={() => this.setState({rotate: !this.state.rotate})}
|
93
|
+
/>
|
73
94
|
</Rotate>,
|
74
95
|
]}
|
75
|
-
>
|
76
|
-
</PanelElements.PanelHeader>
|
96
|
+
></PanelElements.PanelHeader>
|
77
97
|
<PanelElements.PanelContent>
|
78
98
|
<PanelElements.PanelContentBlock>
|
79
|
-
<p className=
|
80
|
-
|
81
|
-
|
82
|
-
|
99
|
+
<p className="sd-margin-b--2">
|
100
|
+
Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum
|
101
|
+
dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis
|
102
|
+
interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
|
103
|
+
Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet,
|
104
|
+
consectetur adipiscing elit.
|
105
|
+
</p>
|
106
|
+
<p>
|
107
|
+
Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada
|
108
|
+
magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia
|
109
|
+
quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu
|
110
|
+
leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed
|
111
|
+
consectetur.
|
112
|
+
</p>
|
83
113
|
</PanelElements.PanelContentBlock>
|
84
114
|
</PanelElements.PanelContent>
|
85
115
|
<PanelElements.PanelFooter>
|
86
|
-
<Button text=
|
87
|
-
<Button text=
|
116
|
+
<Button text="Clear" style="hollow" onClick={() => false} />
|
117
|
+
<Button text="Submit" type="primary" onClick={() => false} />
|
88
118
|
</PanelElements.PanelFooter>
|
89
119
|
</PanelElements.Panel>
|
90
120
|
</div>
|
91
121
|
</Markup.ReactMarkupPreview>
|
92
|
-
<Markup.ReactMarkupCode>
|
122
|
+
<Markup.ReactMarkupCode>
|
123
|
+
{`
|
93
124
|
// Left
|
94
125
|
{this.state.openPanel1 ? null :
|
95
126
|
<div className='d-flex items-center justify-center sd-flex--grow'>
|
@@ -129,42 +160,82 @@ export default class PanelDoc extends React.Component<IProps, IState> {
|
|
129
160
|
|
130
161
|
<Markup.ReactMarkup>
|
131
162
|
<Markup.ReactMarkupPreview>
|
132
|
-
<p className="docs-page__paragraph"
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
163
|
+
<p className="docs-page__paragraph">
|
164
|
+
// Right, custom elements inside the footer + dark theme.
|
165
|
+
</p>
|
166
|
+
<div
|
167
|
+
className="d-flex"
|
168
|
+
style={{
|
169
|
+
border: '1px solid var(--sd-colour-line--medium)',
|
170
|
+
backgroundColor: 'var(--sd-colour-panel-bg--100)',
|
171
|
+
maxHeight: '400px',
|
172
|
+
}}
|
173
|
+
>
|
174
|
+
{this.state.openPanel2 ? null : (
|
175
|
+
<div className="d-flex items-center justify-center sd-flex--grow">
|
176
|
+
<Button
|
177
|
+
text="Open Panel"
|
178
|
+
style="filled"
|
179
|
+
onClick={() => this.setState({openPanel2: true})}
|
180
|
+
/>
|
137
181
|
</div>
|
138
|
-
}
|
139
|
-
<PanelElements.Panel
|
140
|
-
|
141
|
-
|
182
|
+
)}
|
183
|
+
<PanelElements.Panel
|
184
|
+
side="right"
|
185
|
+
background="light"
|
186
|
+
open={this.state.openPanel2}
|
187
|
+
size="small"
|
188
|
+
theme="dark"
|
189
|
+
>
|
190
|
+
<PanelElements.PanelHeader
|
191
|
+
title="Right panel title"
|
192
|
+
onClose={() => this.setState({openPanel2: false})}
|
193
|
+
color="blueGreyDarker"
|
194
|
+
></PanelElements.PanelHeader>
|
142
195
|
<PanelElements.PanelContent>
|
143
196
|
<PanelElements.PanelContentBlock>
|
144
|
-
<p className=
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
<p>
|
150
|
-
|
197
|
+
<p className="sd-margin-b--2">
|
198
|
+
Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur
|
199
|
+
adipiscing elit. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare
|
200
|
+
sem lacinia quam venenatis vestibulum.
|
201
|
+
</p>
|
202
|
+
<p className="sd-margin-b--2">
|
203
|
+
Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur
|
204
|
+
purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.
|
205
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio,
|
206
|
+
dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo
|
207
|
+
luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
208
|
+
Vestibulum id ligula porta felis euismod semper.
|
209
|
+
</p>
|
210
|
+
<p>
|
211
|
+
Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus
|
212
|
+
et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem
|
213
|
+
malesuada magna mollis euismod. Integer posuere erat a ante venenatis
|
214
|
+
dapibus posuere velit aliquet. Praesent commodo cursus magna, vel
|
215
|
+
scelerisque nisl consectetur et.
|
216
|
+
</p>
|
151
217
|
</PanelElements.PanelContentBlock>
|
152
218
|
</PanelElements.PanelContent>
|
153
219
|
<PanelElements.PanelFooter>
|
154
|
-
<ButtonGroup align=
|
155
|
-
<Button text=
|
156
|
-
<Button text=
|
157
|
-
<Label text=
|
220
|
+
<ButtonGroup align="start">
|
221
|
+
<Button text="one" style="hollow" onClick={() => false} />
|
222
|
+
<Button text="two" style="hollow" onClick={() => false} />
|
223
|
+
<Label text="Published" type="primary" style="translucent" />
|
158
224
|
</ButtonGroup>
|
159
|
-
<ButtonGroup align=
|
160
|
-
<IconButton icon=
|
161
|
-
<IconButton
|
225
|
+
<ButtonGroup align="end">
|
226
|
+
<IconButton icon="pencil" ariaValue={'Edit'} onClick={() => false} />
|
227
|
+
<IconButton
|
228
|
+
icon="dots-vertical"
|
229
|
+
ariaValue={'More options'}
|
230
|
+
onClick={() => false}
|
231
|
+
/>
|
162
232
|
</ButtonGroup>
|
163
233
|
</PanelElements.PanelFooter>
|
164
234
|
</PanelElements.Panel>
|
165
235
|
</div>
|
166
236
|
</Markup.ReactMarkupPreview>
|
167
|
-
<Markup.ReactMarkupCode>
|
237
|
+
<Markup.ReactMarkupCode>
|
238
|
+
{`
|
168
239
|
// Right, custom elements inside the footer + dark theme.
|
169
240
|
|
170
241
|
{this.state.openPanel2 ? null :
|
@@ -200,48 +271,96 @@ export default class PanelDoc extends React.Component<IProps, IState> {
|
|
200
271
|
|
201
272
|
<Markup.ReactMarkup>
|
202
273
|
<Markup.ReactMarkupPreview>
|
203
|
-
<p className="docs-page__paragraph"
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
274
|
+
<p className="docs-page__paragraph">
|
275
|
+
// With PanelHeaderSlidingToolbar element inside the PanelHeader
|
276
|
+
</p>
|
277
|
+
<div
|
278
|
+
className="d-flex"
|
279
|
+
style={{
|
280
|
+
border: '1px solid var(--sd-colour-line--medium)',
|
281
|
+
backgroundColor: 'var(--sd-colour-panel-bg--100)',
|
282
|
+
maxHeight: '400px',
|
283
|
+
}}
|
284
|
+
>
|
285
|
+
{this.state.openPanel3 ? null : (
|
286
|
+
<div className="d-flex items-center justify-center sd-flex--grow">
|
287
|
+
<Button
|
288
|
+
text="Open Panel"
|
289
|
+
style="filled"
|
290
|
+
onClick={() => this.setState({openPanel3: true})}
|
291
|
+
/>
|
208
292
|
</div>
|
209
|
-
}
|
210
|
-
<PanelElements.Panel
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
293
|
+
)}
|
294
|
+
<PanelElements.Panel
|
295
|
+
side="left"
|
296
|
+
background="light"
|
297
|
+
open={this.state.openPanel3}
|
298
|
+
size="small"
|
299
|
+
>
|
300
|
+
<PanelElements.PanelHeader
|
301
|
+
title="Donec sed odio dui"
|
302
|
+
onClose={() => this.setState({openPanel3: false})}
|
303
|
+
>
|
304
|
+
{!this.state.openToolbar1 ? null : (
|
305
|
+
<PanelElements.PanelHeaderSlidingToolbar>
|
306
|
+
<ButtonGroup align="end">
|
307
|
+
<Button
|
308
|
+
text="Cancel"
|
309
|
+
style="hollow"
|
310
|
+
onClick={() => this.setState({openToolbar1: false})}
|
311
|
+
/>
|
312
|
+
<Button
|
313
|
+
text="Save"
|
314
|
+
style="hollow"
|
315
|
+
type="primary"
|
316
|
+
onClick={() => this.setState({openToolbar1: false})}
|
317
|
+
/>
|
318
|
+
</ButtonGroup>
|
319
|
+
</PanelElements.PanelHeaderSlidingToolbar>
|
320
|
+
)}
|
220
321
|
</PanelElements.PanelHeader>
|
221
322
|
<PanelElements.PanelContent>
|
222
323
|
<PanelElements.PanelContentBlock>
|
223
|
-
<p className=
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
324
|
+
<p className="sd-margin-b--2">
|
325
|
+
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
|
326
|
+
fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at
|
327
|
+
eget metus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus
|
328
|
+
mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
|
329
|
+
dolor auctor. Nulla vitae elit libero, a pharetra augue.
|
330
|
+
</p>
|
331
|
+
<p>
|
332
|
+
Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur
|
333
|
+
purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.
|
334
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio,
|
335
|
+
dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo
|
336
|
+
luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
337
|
+
Vestibulum id ligula porta felis euismod semper.
|
338
|
+
</p>
|
229
339
|
</PanelElements.PanelContentBlock>
|
230
340
|
</PanelElements.PanelContent>
|
231
341
|
<PanelElements.PanelFooter>
|
232
|
-
{this.state.openToolbar1 ? null :
|
233
|
-
<ButtonGroup align=
|
234
|
-
<Button
|
342
|
+
{this.state.openToolbar1 ? null : (
|
343
|
+
<ButtonGroup align="start">
|
344
|
+
<Button
|
345
|
+
text="Open Slide In Toolbar"
|
346
|
+
style="hollow"
|
347
|
+
onClick={() => this.setState({openToolbar1: true})}
|
348
|
+
/>
|
235
349
|
</ButtonGroup>
|
236
|
-
}
|
237
|
-
<ButtonGroup align=
|
238
|
-
<IconButton
|
350
|
+
)}
|
351
|
+
<ButtonGroup align="end">
|
352
|
+
<IconButton
|
353
|
+
icon="dots-vertical"
|
354
|
+
ariaValue={'More options'}
|
355
|
+
onClick={() => false}
|
356
|
+
/>
|
239
357
|
</ButtonGroup>
|
240
358
|
</PanelElements.PanelFooter>
|
241
359
|
</PanelElements.Panel>
|
242
360
|
</div>
|
243
361
|
</Markup.ReactMarkupPreview>
|
244
|
-
<Markup.ReactMarkupCode>
|
362
|
+
<Markup.ReactMarkupCode>
|
363
|
+
{`
|
245
364
|
// With PanelHeaderSlidingToolbar element inside the PanelHeader
|
246
365
|
|
247
366
|
{this.state.openPanel3 ? null :
|
@@ -283,37 +402,70 @@ export default class PanelDoc extends React.Component<IProps, IState> {
|
|
283
402
|
|
284
403
|
<Markup.ReactMarkup>
|
285
404
|
<Markup.ReactMarkupPreview>
|
286
|
-
<p className="docs-page__paragraph"
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
405
|
+
<p className="docs-page__paragraph">
|
406
|
+
// With PanelTools (allowing custom actions) + dark theme
|
407
|
+
</p>
|
408
|
+
<div
|
409
|
+
className="d-flex"
|
410
|
+
style={{
|
411
|
+
border: '1px solid var(--sd-colour-line--medium)',
|
412
|
+
backgroundColor: 'var(--sd-colour-panel-bg--100)',
|
413
|
+
maxHeight: '400px',
|
414
|
+
}}
|
415
|
+
>
|
416
|
+
{this.state.openPanel4 ? null : (
|
417
|
+
<div className="d-flex items-center justify-center sd-flex--grow">
|
418
|
+
<Button
|
419
|
+
text="Open Panel"
|
420
|
+
style="filled"
|
421
|
+
onClick={() => this.setState({openPanel4: true})}
|
422
|
+
/>
|
291
423
|
</div>
|
292
|
-
}
|
293
|
-
<PanelElements.Panel
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
424
|
+
)}
|
425
|
+
<PanelElements.Panel
|
426
|
+
side="left"
|
427
|
+
background="light"
|
428
|
+
open={this.state.openPanel4}
|
429
|
+
size="x-small"
|
430
|
+
theme="dark"
|
431
|
+
>
|
432
|
+
<PanelElements.PanelHeader title="Donec sed odio dui">
|
433
|
+
<PanelElements.PanelTools
|
434
|
+
tools={[
|
435
|
+
{title: 'Delete', icon: 'trash', onClick: () => false, ariaValue: 'Delete'},
|
436
|
+
{title: 'Edit', icon: 'pencil', onClick: () => false, ariaValue: 'Edit'},
|
437
|
+
{
|
438
|
+
title: 'Close',
|
439
|
+
icon: 'close-small',
|
440
|
+
onClick: () => this.setState({openPanel4: false}),
|
441
|
+
ariaValue: 'Close',
|
442
|
+
},
|
443
|
+
]}
|
444
|
+
/>
|
300
445
|
</PanelElements.PanelHeader>
|
301
446
|
<PanelElements.PanelContent>
|
302
447
|
<PanelElements.PanelContentBlock>
|
303
|
-
<p className=
|
304
|
-
|
305
|
-
|
306
|
-
|
448
|
+
<p className="sd-margin-b--2">
|
449
|
+
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
|
450
|
+
fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at
|
451
|
+
eget metus. Nulla vitae elit libero, a pharetra augue.
|
452
|
+
</p>
|
453
|
+
<p>
|
454
|
+
Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur
|
455
|
+
purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.
|
456
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
457
|
+
</p>
|
307
458
|
</PanelElements.PanelContentBlock>
|
308
459
|
</PanelElements.PanelContent>
|
309
460
|
<PanelElements.PanelFooter>
|
310
|
-
<Button text=
|
311
|
-
<Button text=
|
461
|
+
<Button text="Cancel" style="hollow" onClick={() => false} />
|
462
|
+
<Button text="Save" type="primary" onClick={() => false} />
|
312
463
|
</PanelElements.PanelFooter>
|
313
464
|
</PanelElements.Panel>
|
314
465
|
</div>
|
315
466
|
</Markup.ReactMarkupPreview>
|
316
|
-
<Markup.ReactMarkupCode>
|
467
|
+
<Markup.ReactMarkupCode>
|
468
|
+
{`
|
317
469
|
// With PanelTools (allowing custom actions) + dark theme
|
318
470
|
|
319
471
|
{this.state.openPanel4 ? null :
|
@@ -343,42 +495,137 @@ export default class PanelDoc extends React.Component<IProps, IState> {
|
|
343
495
|
`}
|
344
496
|
</Markup.ReactMarkupCode>
|
345
497
|
</Markup.ReactMarkup>
|
346
|
-
|
347
498
|
|
348
499
|
<h3 className="docs-page__h3">Props</h3>
|
349
500
|
<p className="docs-page__paragraph">Panel</p>
|
350
501
|
<PropsList>
|
351
|
-
<Prop
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
502
|
+
<Prop
|
503
|
+
name="size"
|
504
|
+
isRequired={false}
|
505
|
+
type="xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large | full | auto"
|
506
|
+
default="small"
|
507
|
+
description="Specifies the width of the panel."
|
508
|
+
/>
|
509
|
+
<Prop
|
510
|
+
name="side"
|
511
|
+
isRequired={false}
|
512
|
+
type="left | right"
|
513
|
+
default="left"
|
514
|
+
description="Defines the side of the panel. It will also add the appropriate shadow on the opsite side."
|
515
|
+
/>
|
516
|
+
<Prop
|
517
|
+
name="theme"
|
518
|
+
isRequired={false}
|
519
|
+
type="light | dark"
|
520
|
+
default="/"
|
521
|
+
description="Explicitly define the theme of the panel. All child elements and the content will inherit the selected theme."
|
522
|
+
/>
|
523
|
+
<Prop
|
524
|
+
name="background"
|
525
|
+
isRequired={false}
|
526
|
+
type="transparent | light | grey"
|
527
|
+
default="light"
|
528
|
+
description="Background colour of the panel."
|
529
|
+
/>
|
530
|
+
<Prop
|
531
|
+
name="open"
|
532
|
+
isRequired={false}
|
533
|
+
type="boolean"
|
534
|
+
default="false"
|
535
|
+
description="Toggles the open/closed state of the panel."
|
536
|
+
/>
|
537
|
+
<Prop
|
538
|
+
name="ClassName"
|
539
|
+
isRequired={false}
|
540
|
+
type="string"
|
541
|
+
default="false"
|
542
|
+
description="Add custom classes to modify the default behaviour or specify the placement in complex layouts."
|
543
|
+
/>
|
357
544
|
</PropsList>
|
358
545
|
|
359
546
|
<p className="docs-page__paragraph">PanelHeader</p>
|
360
547
|
<PropsList>
|
361
|
-
<Prop
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
548
|
+
<Prop
|
549
|
+
name="title"
|
550
|
+
isRequired={false}
|
551
|
+
type="string"
|
552
|
+
default="/"
|
553
|
+
description="Specifies the title of the panel."
|
554
|
+
/>
|
555
|
+
<Prop
|
556
|
+
name="theme"
|
557
|
+
isRequired={false}
|
558
|
+
type="light | dark"
|
559
|
+
default="/"
|
560
|
+
description="Explicitly define the theme just for the of Panel Header. All child elements and the content inside the Header will inherit the selected theme."
|
561
|
+
/>
|
562
|
+
<Prop
|
563
|
+
name="color"
|
564
|
+
isRequired={false}
|
565
|
+
type="light | darker | blueGrey | blueGreyDarker"
|
566
|
+
default="light"
|
567
|
+
description="Background colour of the Panel Header. blueGrey and blueGreyDarker will also change the text colour to white."
|
568
|
+
/>
|
569
|
+
<Prop
|
570
|
+
name="ClassName"
|
571
|
+
isRequired={false}
|
572
|
+
type="string"
|
573
|
+
default="false"
|
574
|
+
description="Add custom or helper classes to modify the default behaviour if needed. Use only if necessary."
|
575
|
+
/>
|
576
|
+
<Prop
|
577
|
+
name="iconButtons"
|
578
|
+
isRequired={false}
|
579
|
+
type="Aarray"
|
580
|
+
default="false"
|
581
|
+
description="Array of JSX Elements."
|
582
|
+
/>
|
366
583
|
</PropsList>
|
367
584
|
|
368
585
|
<p className="docs-page__paragraph">PanelContent</p>
|
369
586
|
<PropsList>
|
370
|
-
<Prop
|
371
|
-
|
372
|
-
|
587
|
+
<Prop
|
588
|
+
name="loading"
|
589
|
+
isRequired={false}
|
590
|
+
type="boolean"
|
591
|
+
default="false"
|
592
|
+
description="Loading state."
|
593
|
+
/>
|
594
|
+
<Prop name="empty" isRequired={false} type="boolean" default="false" description="Empty state" />
|
595
|
+
<Prop
|
596
|
+
name="emptyTemplate"
|
597
|
+
isRequired={false}
|
598
|
+
type="ReactNode"
|
599
|
+
default="/"
|
600
|
+
description="Use the EmptyState component to define the image and text for the empty state."
|
601
|
+
/>
|
373
602
|
</PropsList>
|
374
603
|
|
375
604
|
<p className="docs-page__paragraph">PanelContentBlock</p>
|
376
605
|
<PropsList>
|
377
|
-
<Prop
|
378
|
-
|
379
|
-
|
606
|
+
<Prop
|
607
|
+
name="flex"
|
608
|
+
isRequired={false}
|
609
|
+
type="boolean"
|
610
|
+
default="false"
|
611
|
+
description="Change to flex display mode."
|
612
|
+
/>
|
613
|
+
<Prop
|
614
|
+
name="padding"
|
615
|
+
isRequired={false}
|
616
|
+
type="0 | 1-5 | 3"
|
617
|
+
default="2"
|
618
|
+
description="Choose padding for the content block. Defaults to 2 (16px) without specifiying a value."
|
619
|
+
/>
|
620
|
+
<Prop
|
621
|
+
name="ClassName"
|
622
|
+
isRequired={false}
|
623
|
+
type="string"
|
624
|
+
default="false"
|
625
|
+
description="Add custom or helper classes to modify the default behaviour or layout if needed."
|
626
|
+
/>
|
380
627
|
</PropsList>
|
381
628
|
</section>
|
382
|
-
)
|
629
|
+
);
|
383
630
|
}
|
384
631
|
}
|