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,12 +1,12 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import * as Markup from '../../js/react';
|
3
|
-
import {
|
3
|
+
import {GridList, Icon, IconButton, Badge, Label, Checkbox, Prop, PropsList} from '../../../app-typescript';
|
4
4
|
import * as GridElements from '../../../app-typescript/components/GridItem';
|
5
5
|
|
6
6
|
interface IState {
|
7
|
-
selected: boolean
|
8
|
-
locked: boolean
|
9
|
-
status: Array<string
|
7
|
+
selected: boolean;
|
8
|
+
locked: boolean;
|
9
|
+
status: Array<string>;
|
10
10
|
}
|
11
11
|
|
12
12
|
export default class GridItemDoc extends React.Component<{}, IState> {
|
@@ -15,7 +15,7 @@ export default class GridItemDoc extends React.Component<{}, IState> {
|
|
15
15
|
this.state = {
|
16
16
|
selected: true,
|
17
17
|
locked: false,
|
18
|
-
status: ['selected']
|
18
|
+
status: ['selected'],
|
19
19
|
};
|
20
20
|
}
|
21
21
|
|
@@ -30,13 +30,14 @@ export default class GridItemDoc extends React.Component<{}, IState> {
|
|
30
30
|
|
31
31
|
this.setState({status: statuses});
|
32
32
|
}
|
33
|
-
|
33
|
+
|
34
34
|
render() {
|
35
35
|
return (
|
36
|
-
<section className=
|
37
|
-
<h2 className=
|
38
|
-
|
39
|
-
<Markup.ReactMarkupCodePreview>
|
36
|
+
<section className="docs-page__container">
|
37
|
+
<h2 className="docs-page__h2">GridItem</h2>
|
38
|
+
|
39
|
+
<Markup.ReactMarkupCodePreview>
|
40
|
+
{`
|
40
41
|
<GridElements.GridItem itemtype='photo'>
|
41
42
|
<GridElements.GridItemMedia>...</GridElements.GridItemMedia>
|
42
43
|
<GridElements.GridItemContent>
|
@@ -56,9 +57,11 @@ export default class GridItemDoc extends React.Component<{}, IState> {
|
|
56
57
|
`}
|
57
58
|
</Markup.ReactMarkupCodePreview>
|
58
59
|
|
59
|
-
<p className="docs-page__paragraph">
|
60
|
-
|
61
|
-
|
60
|
+
<p className="docs-page__paragraph">
|
61
|
+
The <code>GridItem</code> is a complex container component intended for the display of content items
|
62
|
+
in a grid structure. Although it can be used as a standalone element, it works best as a child of
|
63
|
+
the <code>GridList</code> component. If used without the <code>GridList</code> it should be placed
|
64
|
+
in an element with a constrained width, as it doesn't have a limited width on its own.
|
62
65
|
</p>
|
63
66
|
|
64
67
|
<h3 className="docs-page__h3 docs-page__h3--small-top-m">Full structure</h3>
|
@@ -66,129 +69,169 @@ export default class GridItemDoc extends React.Component<{}, IState> {
|
|
66
69
|
<Markup.ReactMarkup>
|
67
70
|
<Markup.ReactMarkupPreview>
|
68
71
|
<GridList size="small" gap="medium" margin="1">
|
69
|
-
<GridElements.GridItem itemtype=
|
72
|
+
<GridElements.GridItem itemtype="photo" status={this.state.status} onClick={() => false}>
|
70
73
|
<GridElements.GridItemCheckWrapper>
|
71
|
-
<Checkbox
|
74
|
+
<Checkbox
|
75
|
+
checked={this.state.selected}
|
76
|
+
label={{text: ''}}
|
77
|
+
onChange={(value) => {
|
72
78
|
this.setState({selected: value});
|
73
79
|
this.changeStatus('selected');
|
74
|
-
|
80
|
+
}}
|
81
|
+
/>
|
75
82
|
</GridElements.GridItemCheckWrapper>
|
76
83
|
<GridElements.GridItemTopActions>
|
77
|
-
<IconButton
|
84
|
+
<IconButton
|
85
|
+
icon="fullscreen"
|
86
|
+
ariaValue="Fullscreen preview"
|
87
|
+
onClick={() => false}
|
88
|
+
/>
|
78
89
|
</GridElements.GridItemTopActions>
|
79
90
|
<GridElements.GridItemMedia>
|
80
91
|
<img src="/bill.jpg" alt="Bill" />
|
81
92
|
</GridElements.GridItemMedia>
|
82
93
|
<GridElements.GridItemContent>
|
83
|
-
<GridElements.GridItemTime time=
|
84
|
-
<GridElements.GridItemTitle>
|
85
|
-
|
94
|
+
<GridElements.GridItemTime time="10.11.2020" />
|
95
|
+
<GridElements.GridItemTitle>
|
96
|
+
Item title nulla vitae elit libero, a pharetra augue
|
97
|
+
</GridElements.GridItemTitle>
|
98
|
+
<GridElements.GridItemText>
|
99
|
+
Item description cras mattis consectetur purus sit amet fermentum. Vivamus
|
100
|
+
sagittis lacus vel augue laoreet...
|
101
|
+
</GridElements.GridItemText>
|
86
102
|
</GridElements.GridItemContent>
|
87
103
|
<GridElements.GridItemFooter>
|
88
|
-
<GridElements.GridItemFooterBlock align=
|
89
|
-
<Icon name=
|
90
|
-
<Badge text=
|
91
|
-
<Badge text=
|
104
|
+
<GridElements.GridItemFooterBlock align="left">
|
105
|
+
<Icon name="photo" className="sd-grid-item__type-icn" />
|
106
|
+
<Badge text="2" color="deep-orange--500" />
|
107
|
+
<Badge text="5" shape="square" color="blue-grey--300" />
|
92
108
|
</GridElements.GridItemFooterBlock>
|
93
109
|
<GridElements.GridItemFooterActions>
|
94
|
-
<IconButton icon=
|
110
|
+
<IconButton icon="dots-vertical" ariaValue="Actions" onClick={() => false} />
|
95
111
|
</GridElements.GridItemFooterActions>
|
96
112
|
</GridElements.GridItemFooter>
|
97
113
|
</GridElements.GridItem>
|
98
114
|
|
99
|
-
<GridElements.GridItem itemtype=
|
115
|
+
<GridElements.GridItem itemtype="audio" locked={true} fetched={true} onClick={() => false}>
|
100
116
|
<GridElements.GridItemTopActions>
|
101
|
-
<IconButton icon=
|
117
|
+
<IconButton icon="play" ariaValue="Play" onClick={() => false} />
|
102
118
|
</GridElements.GridItemTopActions>
|
103
119
|
<GridElements.GridItemMedia></GridElements.GridItemMedia>
|
104
120
|
<GridElements.GridItemContent>
|
105
|
-
<GridElements.GridItemTime time=
|
106
|
-
<GridElements.GridItemTitle>
|
107
|
-
|
121
|
+
<GridElements.GridItemTime time="10.11.2020" />
|
122
|
+
<GridElements.GridItemTitle>
|
123
|
+
Maecenas faucibus mollis interdum
|
124
|
+
</GridElements.GridItemTitle>
|
125
|
+
<GridElements.GridItemText>
|
126
|
+
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
|
127
|
+
Sed posuere consectetur est at lobortis...
|
128
|
+
</GridElements.GridItemText>
|
108
129
|
</GridElements.GridItemContent>
|
109
130
|
<GridElements.GridItemFooter>
|
110
|
-
<GridElements.GridItemFooterBlock align=
|
111
|
-
<Icon name=
|
112
|
-
<Badge text=
|
113
|
-
<Badge text=
|
131
|
+
<GridElements.GridItemFooterBlock align="left">
|
132
|
+
<Icon name="audio" className="sd-grid-item__type-icn" />
|
133
|
+
<Badge text="1" color="deep-orange--600" />
|
134
|
+
<Badge text="4" shape="square" color="blue-grey--500" />
|
114
135
|
</GridElements.GridItemFooterBlock>
|
115
136
|
<GridElements.GridItemFooterActions>
|
116
|
-
<IconButton icon=
|
137
|
+
<IconButton icon="dots-vertical" ariaValue="Actions" onClick={() => false} />
|
117
138
|
</GridElements.GridItemFooterActions>
|
118
139
|
</GridElements.GridItemFooter>
|
119
140
|
</GridElements.GridItem>
|
120
141
|
|
121
|
-
<GridElements.GridItem itemtype=
|
142
|
+
<GridElements.GridItem itemtype="photo">
|
122
143
|
<GridElements.GridItemTopActions>
|
123
|
-
<IconButton
|
144
|
+
<IconButton
|
145
|
+
icon="fullscreen"
|
146
|
+
ariaValue="Fullscreen preview"
|
147
|
+
onClick={() => false}
|
148
|
+
/>
|
124
149
|
</GridElements.GridItemTopActions>
|
125
150
|
<GridElements.GridItemMedia>
|
126
151
|
<img src="/obama_2.jpg" alt="Barack" />
|
127
152
|
</GridElements.GridItemMedia>
|
128
153
|
<GridElements.GridItemContent>
|
129
|
-
<GridElements.GridItemTime time=
|
130
|
-
<GridElements.GridItemTitle>
|
131
|
-
|
154
|
+
<GridElements.GridItemTime time="10.11.2020" />
|
155
|
+
<GridElements.GridItemTitle>
|
156
|
+
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
157
|
+
</GridElements.GridItemTitle>
|
158
|
+
<GridElements.GridItemText>
|
159
|
+
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam
|
160
|
+
eget risus varius blandit sit amet non magna...
|
161
|
+
</GridElements.GridItemText>
|
132
162
|
</GridElements.GridItemContent>
|
133
163
|
<GridElements.GridItemFooter>
|
134
|
-
<GridElements.GridItemFooterBlock align=
|
135
|
-
<Icon name=
|
136
|
-
<Badge text=
|
137
|
-
<Badge text=
|
164
|
+
<GridElements.GridItemFooterBlock align="left">
|
165
|
+
<Icon name="photo" className="sd-grid-item__type-icn" />
|
166
|
+
<Badge text="3" color="orange--500" />
|
167
|
+
<Badge text="5" shape="square" color="blue-grey--300" />
|
138
168
|
</GridElements.GridItemFooterBlock>
|
139
169
|
<GridElements.GridItemFooterActions>
|
140
|
-
<IconButton icon=
|
170
|
+
<IconButton icon="dots-vertical" ariaValue="Actions" onClick={() => false} />
|
141
171
|
</GridElements.GridItemFooterActions>
|
142
172
|
</GridElements.GridItemFooter>
|
143
173
|
</GridElements.GridItem>
|
144
174
|
|
145
|
-
<GridElements.GridItem itemtype=
|
175
|
+
<GridElements.GridItem itemtype="photo" status={['actioning']}>
|
146
176
|
<GridElements.GridItemTopActions>
|
147
|
-
<IconButton
|
177
|
+
<IconButton
|
178
|
+
icon="fullscreen"
|
179
|
+
ariaValue="Fullscreen preview"
|
180
|
+
onClick={() => false}
|
181
|
+
/>
|
148
182
|
</GridElements.GridItemTopActions>
|
149
183
|
<GridElements.GridItemMedia>
|
150
184
|
<img src="/d_trump.jpg" alt="Ronmo" />
|
151
185
|
</GridElements.GridItemMedia>
|
152
186
|
<GridElements.GridItemContent>
|
153
|
-
<GridElements.GridItemTime time=
|
154
|
-
<GridElements.GridItemTitle>
|
155
|
-
|
187
|
+
<GridElements.GridItemTime time="10.11.2020" />
|
188
|
+
<GridElements.GridItemTitle>
|
189
|
+
Sed posuere consectetur est at lobortis
|
190
|
+
</GridElements.GridItemTitle>
|
191
|
+
<GridElements.GridItemText>
|
192
|
+
Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere
|
193
|
+
consectetur est at lobortis...
|
194
|
+
</GridElements.GridItemText>
|
156
195
|
</GridElements.GridItemContent>
|
157
196
|
<GridElements.GridItemFooter>
|
158
|
-
<GridElements.GridItemFooterBlock align=
|
159
|
-
<Icon name=
|
160
|
-
<Badge text=
|
161
|
-
<Badge text=
|
197
|
+
<GridElements.GridItemFooterBlock align="left">
|
198
|
+
<Icon name="photo" className="sd-grid-item__type-icn" />
|
199
|
+
<Badge text="3" color="orange--500" />
|
200
|
+
<Badge text="5" shape="square" color="blue-grey--300" />
|
162
201
|
</GridElements.GridItemFooterBlock>
|
163
202
|
<GridElements.GridItemFooterActions>
|
164
|
-
<IconButton icon=
|
203
|
+
<IconButton icon="dots-vertical" ariaValue="Actions" onClick={() => false} />
|
165
204
|
</GridElements.GridItemFooterActions>
|
166
205
|
</GridElements.GridItemFooter>
|
167
206
|
</GridElements.GridItem>
|
168
207
|
|
169
|
-
<GridElements.GridItem itemtype=
|
208
|
+
<GridElements.GridItem itemtype="slideshow" fetched={true} onClick={() => false}>
|
170
209
|
<GridElements.GridItemMedia></GridElements.GridItemMedia>
|
171
210
|
<GridElements.GridItemContent>
|
172
|
-
<GridElements.GridItemTime time=
|
173
|
-
<GridElements.GridItemTitle>
|
174
|
-
|
211
|
+
<GridElements.GridItemTime time="10.11.2020" />
|
212
|
+
<GridElements.GridItemTitle>
|
213
|
+
Nulla vitae elit libero, a pharetra augue
|
214
|
+
</GridElements.GridItemTitle>
|
215
|
+
<GridElements.GridItemText>
|
216
|
+
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio
|
217
|
+
dui...
|
218
|
+
</GridElements.GridItemText>
|
175
219
|
</GridElements.GridItemContent>
|
176
220
|
<GridElements.GridItemFooter>
|
177
|
-
<GridElements.GridItemFooterBlock align=
|
178
|
-
<Icon name=
|
179
|
-
<Badge text=
|
180
|
-
<Badge text=
|
221
|
+
<GridElements.GridItemFooterBlock align="left">
|
222
|
+
<Icon name="slideshow" className="sd-grid-item__type-icn" />
|
223
|
+
<Badge text="1" color="deep-orange--600" />
|
224
|
+
<Badge text="5" shape="square" color="blue-grey--300" />
|
181
225
|
</GridElements.GridItemFooterBlock>
|
182
226
|
<GridElements.GridItemFooterActions>
|
183
|
-
<IconButton icon=
|
227
|
+
<IconButton icon="dots-vertical" ariaValue="Actions" onClick={() => false} />
|
184
228
|
</GridElements.GridItemFooterActions>
|
185
229
|
</GridElements.GridItemFooter>
|
186
230
|
</GridElements.GridItem>
|
187
|
-
|
188
231
|
</GridList>
|
189
|
-
|
190
232
|
</Markup.ReactMarkupPreview>
|
191
|
-
<Markup.ReactMarkupCode>
|
233
|
+
<Markup.ReactMarkupCode>
|
234
|
+
{`
|
192
235
|
<GridList size="small" gap="medium" margin="1">
|
193
236
|
<GridElements.GridItem itemtype='photo' status={this.state.status} onClick={()=> false}>
|
194
237
|
<GridElements.GridItemCheckWrapper>
|
@@ -315,39 +358,50 @@ export default class GridItemDoc extends React.Component<{}, IState> {
|
|
315
358
|
</Markup.ReactMarkup>
|
316
359
|
|
317
360
|
<h3 className="docs-page__h3 docs-page__h3--small-top-m">Minimal structure</h3>
|
318
|
-
<p className="docs-page__paragraph">
|
319
|
-
|
361
|
+
<p className="docs-page__paragraph">
|
362
|
+
Mandatory structural sub-elements of the <code>GridItem</code> are <code>GridItemMedia</code> and{' '}
|
363
|
+
<code>GridItemContent</code>. The use of the <code>GridItemText</code> component is optional, any
|
364
|
+
appropriate and properly styled HTML element can be used instead.
|
320
365
|
</p>
|
321
366
|
|
322
367
|
<Markup.ReactMarkup>
|
323
368
|
<Markup.ReactMarkupPreview>
|
324
369
|
<GridList size="small" gap="medium" margin="1">
|
325
|
-
<GridElements.GridItem itemtype=
|
370
|
+
<GridElements.GridItem itemtype="photo" onClick={() => false}>
|
326
371
|
<GridElements.GridItemMedia>
|
327
372
|
<img src="/bill.jpg" alt="Bill" />
|
328
373
|
</GridElements.GridItemMedia>
|
329
374
|
<GridElements.GridItemContent>
|
330
|
-
<GridElements.GridItemText>
|
375
|
+
<GridElements.GridItemText>
|
376
|
+
Item description cras mattis consectetur purus sit amet fermentum. Vivamus
|
377
|
+
sagittis lacus vel augue laoreet...
|
378
|
+
</GridElements.GridItemText>
|
331
379
|
</GridElements.GridItemContent>
|
332
380
|
</GridElements.GridItem>
|
333
381
|
|
334
|
-
<GridElements.GridItem itemtype=
|
382
|
+
<GridElements.GridItem itemtype="audio" locked={true} fetched={true} onClick={() => false}>
|
335
383
|
<GridElements.GridItemMedia></GridElements.GridItemMedia>
|
336
384
|
<GridElements.GridItemContent>
|
337
|
-
<GridElements.GridItemText>
|
385
|
+
<GridElements.GridItemText>
|
386
|
+
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
|
387
|
+
Sed posuere consectetur est at lobortis...
|
388
|
+
</GridElements.GridItemText>
|
338
389
|
</GridElements.GridItemContent>
|
339
390
|
</GridElements.GridItem>
|
340
391
|
|
341
|
-
<GridElements.GridItem itemtype=
|
392
|
+
<GridElements.GridItem itemtype="composite" status={['activated']}>
|
342
393
|
<GridElements.GridItemMedia></GridElements.GridItemMedia>
|
343
394
|
<GridElements.GridItemContent>
|
344
|
-
<GridElements.GridItemText>
|
395
|
+
<GridElements.GridItemText>
|
396
|
+
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam
|
397
|
+
eget risus varius blandit sit amet non magna...
|
398
|
+
</GridElements.GridItemText>
|
345
399
|
</GridElements.GridItemContent>
|
346
400
|
</GridElements.GridItem>
|
347
401
|
</GridList>
|
348
|
-
|
349
402
|
</Markup.ReactMarkupPreview>
|
350
|
-
<Markup.ReactMarkupCode>
|
403
|
+
<Markup.ReactMarkupCode>
|
404
|
+
{`
|
351
405
|
<GridList size="small" gap="medium" margin="1">
|
352
406
|
<GridElements.GridItem itemtype='photo' onClick={()=> false}>
|
353
407
|
<GridElements.GridItemMedia>
|
@@ -375,34 +429,79 @@ export default class GridItemDoc extends React.Component<{}, IState> {
|
|
375
429
|
`}
|
376
430
|
</Markup.ReactMarkupCode>
|
377
431
|
</Markup.ReactMarkup>
|
378
|
-
|
432
|
+
|
379
433
|
<h3 className="docs-page__h3">GridItem Props</h3>
|
380
434
|
<PropsList>
|
381
|
-
<Prop
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
435
|
+
<Prop
|
436
|
+
name="status"
|
437
|
+
isRequired={false}
|
438
|
+
type="actioning | selected | activated | string"
|
439
|
+
default="/"
|
440
|
+
description="Specifies the status of the item. Multiple values are possible."
|
441
|
+
/>
|
442
|
+
<Prop
|
443
|
+
name="itemtype"
|
444
|
+
isRequired={false}
|
445
|
+
type="audio | composite | file | graphic | photo | slideshow | text | video | string"
|
446
|
+
default="file"
|
447
|
+
description="Specifies the file type of the item."
|
448
|
+
/>
|
449
|
+
<Prop
|
450
|
+
name="fetched"
|
451
|
+
isRequired={false}
|
452
|
+
type="boolean"
|
453
|
+
default="false"
|
454
|
+
description="If set to true it will add a visual marker in the content area indicating that the item was fetched."
|
455
|
+
/>
|
456
|
+
<Prop
|
457
|
+
name="locked"
|
458
|
+
isRequired={false}
|
459
|
+
type="boolean"
|
460
|
+
default="false"
|
461
|
+
description="Visual indication if the item is locked (red border at the bottom)."
|
462
|
+
/>
|
463
|
+
<Prop
|
464
|
+
name="onClick"
|
465
|
+
isRequired={false}
|
466
|
+
type="function"
|
467
|
+
default="false"
|
468
|
+
description="Callback fired when when the item is pressed. Should be added only if there is a click action on the whole item. Adds pointer cursor and hover action to the item if present."
|
469
|
+
/>
|
386
470
|
</PropsList>
|
387
471
|
|
388
472
|
<h3 className="docs-page__h3">GridItemFooterBlock Props</h3>
|
389
473
|
<PropsList>
|
390
|
-
<Prop
|
474
|
+
<Prop
|
475
|
+
name="align"
|
476
|
+
isRequired={false}
|
477
|
+
type="left | right"
|
478
|
+
default="left"
|
479
|
+
description="Sets the alignment of items inside the footer. Must be placed inside the GridItemFooter component."
|
480
|
+
/>
|
391
481
|
</PropsList>
|
392
482
|
|
393
483
|
<h3 className="docs-page__h3">GridItemFooterActions Props</h3>
|
394
484
|
<PropsList>
|
395
|
-
<Prop
|
485
|
+
<Prop
|
486
|
+
name="autohide"
|
487
|
+
isRequired={false}
|
488
|
+
type="boolean"
|
489
|
+
default="true"
|
490
|
+
description="Action buttons in the footer are by default hidden and revealed only when the cursor hovers the item. Set to false to make the action buttons always visible."
|
491
|
+
/>
|
396
492
|
</PropsList>
|
397
493
|
|
398
494
|
<h3 className="docs-page__h3">GridItemTime Props</h3>
|
399
495
|
<PropsList>
|
400
|
-
<Prop
|
496
|
+
<Prop
|
497
|
+
name="time"
|
498
|
+
isRequired={true}
|
499
|
+
type="sring"
|
500
|
+
default="/"
|
501
|
+
description="Sets the value of the time component."
|
502
|
+
/>
|
401
503
|
</PropsList>
|
402
|
-
|
403
|
-
|
404
|
-
|
405
504
|
</section>
|
406
|
-
)
|
505
|
+
);
|
407
506
|
}
|
408
|
-
}
|
507
|
+
}
|
@@ -1,28 +1,32 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import * as Markup from '../../js/react';
|
3
|
-
import {
|
4
|
-
|
3
|
+
import {GridList, Prop, PropsList} from '../../../app-typescript';
|
5
4
|
|
6
5
|
export default class GridListDoc extends React.Component {
|
7
6
|
render() {
|
8
7
|
return (
|
9
|
-
<section className=
|
10
|
-
<h2 className=
|
11
|
-
|
12
|
-
<Markup.ReactMarkupCodePreview>
|
8
|
+
<section className="docs-page__container">
|
9
|
+
<h2 className="docs-page__h2">GridList</h2>
|
10
|
+
|
11
|
+
<Markup.ReactMarkupCodePreview>
|
12
|
+
{`
|
13
13
|
<GridList size="small" gap="medium" margin="1">
|
14
14
|
...
|
15
15
|
</GridList>
|
16
16
|
`}
|
17
17
|
</Markup.ReactMarkupCodePreview>
|
18
18
|
|
19
|
-
<p className="docs-page__paragraph">
|
19
|
+
<p className="docs-page__paragraph">
|
20
|
+
Grid list component implemented with CSS grid. The list is responsive by default, no additional
|
21
|
+
media query is needed. Any container item can be placed inside the grid list but it's ideally
|
22
|
+
combined with the GridItem.
|
23
|
+
</p>
|
20
24
|
|
21
25
|
<Markup.ReactMarkup>
|
22
26
|
<Markup.ReactMarkupPreview>
|
23
27
|
<p className="docs-page__paragraph">// default (small)</p>
|
24
28
|
<GridList size="small" gap="medium" margin="1">
|
25
|
-
|
29
|
+
<div className="docs-page__example-box sd-shadow--z2">
|
26
30
|
<p>Item 1</p>
|
27
31
|
</div>
|
28
32
|
<div className="docs-page__example-box sd-shadow--z2">
|
@@ -65,9 +69,9 @@ export default class GridListDoc extends React.Component {
|
|
65
69
|
<p>Item 4</p>
|
66
70
|
</div>
|
67
71
|
</GridList>
|
68
|
-
|
69
72
|
</Markup.ReactMarkupPreview>
|
70
|
-
<Markup.ReactMarkupCode>
|
73
|
+
<Markup.ReactMarkupCode>
|
74
|
+
{`
|
71
75
|
// default (small)
|
72
76
|
<GridList size="small" gap="medium" margin="1">
|
73
77
|
Item 1
|
@@ -92,15 +96,31 @@ export default class GridListDoc extends React.Component {
|
|
92
96
|
</Markup.ReactMarkupCode>
|
93
97
|
</Markup.ReactMarkup>
|
94
98
|
|
95
|
-
|
96
99
|
<h3 className="docs-page__h3">Props</h3>
|
97
100
|
<PropsList>
|
98
|
-
<Prop
|
99
|
-
|
100
|
-
|
101
|
+
<Prop
|
102
|
+
name="size"
|
103
|
+
isRequired={false}
|
104
|
+
type="x-small | small | medium | large"
|
105
|
+
default="small"
|
106
|
+
description="Specifies the size of the items in the grid. "
|
107
|
+
/>
|
108
|
+
<Prop
|
109
|
+
name="gap"
|
110
|
+
isRequired={false}
|
111
|
+
type="small | medium | large | x-large"
|
112
|
+
default="small"
|
113
|
+
description="Defines the gap between the items inside the Grid list. "
|
114
|
+
/>
|
115
|
+
<Prop
|
116
|
+
name="margin"
|
117
|
+
isRequired={false}
|
118
|
+
type="0 | 1 | 2 | 3"
|
119
|
+
default="3"
|
120
|
+
description="Defines the margin around the Grid list. The values are based on multipliers of the the $sd-base-increment (equal to 8px). Setting the value to 3 results in a margin of 24px."
|
121
|
+
/>
|
101
122
|
</PropsList>
|
102
|
-
|
103
123
|
</section>
|
104
|
-
)
|
124
|
+
);
|
105
125
|
}
|
106
|
-
}
|
126
|
+
}
|