superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/img/spinner.svg +3 -0
- package/app/img/themes/theme-base.svg +1 -0
- package/app/img/themes/theme-contrast.svg +45 -0
- package/app/img/themes/theme-dark.svg +1 -0
- package/app/img/themes/theme-light.svg +1 -0
- package/app/index.js +1 -1
- package/app/scripts/modals.js +22 -9
- package/app/styles/_accessibility.scss +311 -4
- package/app/styles/_alerts.scss +57 -19
- package/app/styles/_avatar.scss +25 -1
- package/app/styles/_badge.scss +2 -2
- package/app/styles/_big-icon-font.scss +1 -1
- package/app/styles/_boxed-list.scss +38 -18
- package/app/styles/_buttons.scss +431 -332
- package/app/styles/_carousel.scss +17 -11
- package/app/styles/_design-tokens.scss +2 -0
- package/app/styles/_helpers.scss +186 -30
- package/app/styles/_icon-font.scss +1 -1
- package/app/styles/_labels.scss +12 -6
- package/app/styles/_loaders.scss +13 -0
- package/app/styles/_master-desk.scss +5 -5
- package/app/styles/_mixins.scss +13 -3
- package/app/styles/_modals.scss +4 -28
- package/app/styles/_normalize.scss +1 -0
- package/app/styles/_panel-info.scss +19 -14
- package/app/styles/_sd-tag-input.scss +104 -3
- package/app/styles/_simple-list.scss +39 -17
- package/app/styles/_spinner.scss +46 -0
- package/app/styles/_tabs.scss +6 -8
- package/app/styles/_tag-labels.scss +11 -2
- package/app/styles/_thumb-carousel.scss +11 -10
- package/app/styles/_toggle-box.scss +46 -12
- package/app/styles/_toggle-button.scss +42 -0
- package/app/styles/_tooltips.scss +3 -3
- package/app/styles/_variables.scss +0 -1
- package/app/styles/app.scss +9 -2
- package/app/styles/components/_card-item.scss +33 -21
- package/app/styles/components/_list-item.scss +9 -4
- package/app/styles/components/_sd-dropzone.scss +78 -0
- package/app/styles/components/_sd-grid-item.scss +2 -2
- package/app/styles/components/_sd-searchbar.scss +5 -98
- package/app/styles/components/_subnav.scss +83 -61
- package/app/styles/components/_theme-selector.scss +189 -0
- package/app/styles/design-tokens/_design-tokens-general.scss +77 -0
- package/app/styles/{variables → design-tokens}/_new-colors.scss +34 -20
- package/app/styles/dropdowns/_basic-dropdown.scss +30 -3
- package/app/styles/editor/_editor-buttons.scss +54 -0
- package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
- package/app/styles/form-elements/_checkbox.scss +85 -58
- package/app/styles/form-elements/_forms-general.scss +90 -14
- package/app/styles/form-elements/_inputs.scss +22 -3
- package/app/styles/form-elements/_select-grid.scss +79 -0
- package/app/styles/grids/_basic-grid.scss +52 -26
- package/app/styles/grids/_grid-layout.scss +35 -21
- package/app/styles/grids/_layout-grid.scss +4 -4
- package/app/styles/grids/_sd-kanban-list.scss +2 -2
- package/app/styles/interface-elements/_side-panel.scss +87 -58
- package/app/styles/layout/_basic-layout.scss +1 -4
- package/app/styles/layout/_container.scss +32 -0
- package/app/styles/layout/_editor.scss +306 -0
- package/app/styles/menus/_sd-left-navigation.scss +14 -2
- package/app/styles/menus/_sd-sidebar-menu.scss +102 -9
- package/app/styles/pr-superdesk-theme.scss +3 -0
- package/app/styles/primereact/_pr-datepicker.scss +58 -7
- package/app/styles/primereact/_pr-dropdown.scss +157 -8
- package/app/styles/primereact/_pr-general.scss +4 -0
- package/app/styles/primereact/_pr-skeleton.scss +35 -0
- package/app/styles/variables/_colors.scss +2 -452
- package/app/styles/variables/_dimensions.scss +85 -1
- package/app/styles/variables/_form-elements.scss +0 -2
- package/app-typescript/components/Alert.tsx +16 -1
- package/app-typescript/components/Avatar.tsx +21 -0
- package/app-typescript/components/Button.tsx +7 -1
- package/app-typescript/components/ButtonGroup.tsx +5 -4
- package/app-typescript/components/Carousel.tsx +1 -1
- package/app-typescript/components/CheckButtonGroup.tsx +19 -5
- package/app-typescript/components/CheckGroup.tsx +2 -1
- package/app-typescript/components/Checkbox.tsx +7 -3
- package/app-typescript/components/CheckboxButton.tsx +9 -2
- package/app-typescript/components/DatePicker.tsx +6 -2
- package/app-typescript/components/DropZone.tsx +89 -0
- package/app-typescript/components/Dropdown.tsx +9 -1
- package/app-typescript/components/Editor/EditorButton.tsx +34 -0
- package/app-typescript/components/Form/FormGroup.tsx +33 -0
- package/app-typescript/components/Form/FormItem.tsx +20 -0
- package/app-typescript/components/Form/FormLabel.tsx +22 -0
- package/app-typescript/components/Form/FormRow.tsx +40 -0
- package/app-typescript/components/Form/FormText.tsx +15 -0
- package/app-typescript/components/Form/index.tsx +5 -0
- package/app-typescript/components/IconButton.tsx +26 -12
- package/app-typescript/components/IconPicker.tsx +277 -0
- package/app-typescript/components/Input.tsx +41 -8
- package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
- package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
- package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
- package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +38 -0
- package/app-typescript/components/Layouts/AuthoringMain.tsx +46 -0
- package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +15 -0
- package/app-typescript/components/Layouts/Container.tsx +30 -0
- package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
- package/app-typescript/components/Layouts/LayoutContainer.tsx +18 -0
- package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
- package/app-typescript/components/Layouts/MainPanel.tsx +22 -0
- package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
- package/app-typescript/components/Layouts/Panel.tsx +207 -0
- package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
- package/app-typescript/components/Layouts/index.tsx +25 -0
- package/app-typescript/components/LeftMenu.tsx +123 -49
- package/app-typescript/components/ListItemLoader.tsx +30 -0
- package/app-typescript/components/Lists/BoxedList.tsx +133 -0
- package/app-typescript/components/Lists/SimpleList.tsx +54 -0
- package/app-typescript/components/Lists/index.tsx +2 -0
- package/app-typescript/components/Modal.tsx +1 -1
- package/app-typescript/components/MultiSelect.tsx +69 -0
- package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
- package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
- package/app-typescript/components/Navigation/SideBarTabs.tsx +77 -0
- package/app-typescript/components/Navigation/index.tsx +3 -0
- package/app-typescript/components/RadioButtonGroup.tsx +113 -0
- package/app-typescript/components/RadioGroup.tsx +69 -0
- package/app-typescript/components/Select.tsx +12 -4
- package/app-typescript/components/SelectGrid.tsx +233 -0
- package/app-typescript/components/Skeleton.tsx +48 -0
- package/app-typescript/components/SlidingToolbar.tsx +8 -2
- package/app-typescript/components/Spinner.tsx +32 -0
- package/app-typescript/components/SubNav.tsx +25 -4
- package/app-typescript/components/Switch.tsx +34 -12
- package/app-typescript/components/Tag.tsx +31 -7
- package/app-typescript/components/Text/Heading.tsx +67 -0
- package/app-typescript/components/Text/Text.tsx +36 -0
- package/app-typescript/components/ThemeSelector.tsx +113 -0
- package/app-typescript/components/Togglebox.tsx +8 -6
- package/app-typescript/components/TreeSelect.tsx +330 -0
- package/app-typescript/index.ts +19 -3
- package/dist/avatar-2.jpg +0 -0
- package/dist/avatar-3.jpg +0 -0
- package/dist/avatar-4.jpg +0 -0
- package/dist/avatar-5.jpg +0 -0
- package/dist/avatar-6.jpg +0 -0
- package/dist/components/basic-grid.html +1 -1
- package/dist/components/checkbox.html +1 -1
- package/dist/components/modals.html +1 -0
- package/dist/examples.bundle.css +99 -1225
- package/dist/examples.bundle.js +24704 -15626
- package/dist/playgrounds/boxed-list.html +1 -1
- package/dist/playgrounds/cards.html +9 -4
- package/dist/playgrounds/editor-3-test.html +15 -0
- package/dist/playgrounds/form-layout.html +9 -7
- package/dist/playgrounds/master-desk.html +1 -3
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
- package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
- package/dist/playgrounds/react-playgrounds/Index.tsx +4 -1
- package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
- package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +232 -23
- package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +8 -79
- package/dist/react/Alerts.tsx +91 -18
- package/dist/react/Avatar.tsx +314 -127
- package/dist/react/BoxedList.tsx +362 -0
- package/dist/react/ButtonGroups.tsx +66 -65
- package/dist/react/Buttons.tsx +65 -113
- package/dist/react/Carousel.tsx +2 -3
- package/dist/react/Checkboxs.tsx +66 -25
- package/dist/react/Container.tsx +143 -0
- package/dist/react/DropZone.tsx +103 -0
- package/dist/react/Heading.tsx +106 -0
- package/dist/react/IconButtons.tsx +51 -21
- package/dist/react/IconFont.tsx +7 -6
- package/dist/react/IconPicker.tsx +65 -0
- package/dist/react/Index.tsx +100 -19
- package/dist/react/Inputs.tsx +9 -3
- package/dist/react/LeftNavigations.tsx +161 -9
- package/dist/react/ListItems.tsx +34 -0
- package/dist/react/Modal.tsx +7 -7
- package/dist/react/MultiSelect.tsx +193 -0
- package/dist/react/NavButtons.tsx +4 -4
- package/dist/react/Panel.tsx +366 -0
- package/dist/react/QuickNavigationBar.tsx +142 -0
- package/dist/react/RadioGroup.tsx +351 -0
- package/dist/react/SelectGrid.tsx +121 -0
- package/dist/react/Selects.tsx +2 -0
- package/dist/react/SimpleList.tsx +148 -0
- package/dist/react/SubNav.tsx +65 -18
- package/dist/react/Tags.tsx +57 -5
- package/dist/react/Text.tsx +134 -0
- package/dist/react/TreeSelect.tsx +178 -0
- package/dist/react.html +4 -0
- package/dist/superdesk-ui.bundle.css +26706 -20044
- package/dist/superdesk-ui.bundle.js +8456 -3426
- package/dist/vendor.bundle.js +13677 -13655
- package/examples/css/docs-page.css +98 -27
- package/examples/img/avatar-2.jpg +0 -0
- package/examples/img/avatar-3.jpg +0 -0
- package/examples/img/avatar-4.jpg +0 -0
- package/examples/img/avatar-5.jpg +0 -0
- package/examples/img/avatar-6.jpg +0 -0
- package/examples/index.js +16 -0
- package/examples/pages/components/basic-grid.html +1 -1
- package/examples/pages/components/checkbox.html +1 -1
- package/examples/pages/components/modals.html +1 -0
- package/examples/pages/playgrounds/boxed-list.html +1 -1
- package/examples/pages/playgrounds/cards.html +9 -4
- package/examples/pages/playgrounds/editor-3-test.html +15 -0
- package/examples/pages/playgrounds/form-layout.html +9 -7
- package/examples/pages/playgrounds/master-desk.html +1 -3
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
- package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
- package/examples/pages/playgrounds/react-playgrounds/Index.tsx +4 -1
- package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
- package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +232 -23
- package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +8 -79
- package/examples/pages/react/Alerts.tsx +91 -18
- package/examples/pages/react/Avatar.tsx +314 -127
- package/examples/pages/react/BoxedList.tsx +362 -0
- package/examples/pages/react/ButtonGroups.tsx +66 -65
- package/examples/pages/react/Buttons.tsx +65 -113
- package/examples/pages/react/Carousel.tsx +2 -3
- package/examples/pages/react/Checkboxs.tsx +66 -25
- package/examples/pages/react/Container.tsx +143 -0
- package/examples/pages/react/DropZone.tsx +103 -0
- package/examples/pages/react/Heading.tsx +106 -0
- package/examples/pages/react/IconButtons.tsx +51 -21
- package/examples/pages/react/IconFont.tsx +7 -6
- package/examples/pages/react/IconPicker.tsx +65 -0
- package/examples/pages/react/Index.tsx +100 -19
- package/examples/pages/react/Inputs.tsx +9 -3
- package/examples/pages/react/LeftNavigations.tsx +161 -9
- package/examples/pages/react/ListItems.tsx +34 -0
- package/examples/pages/react/Modal.tsx +7 -7
- package/examples/pages/react/MultiSelect.tsx +193 -0
- package/examples/pages/react/NavButtons.tsx +4 -4
- package/examples/pages/react/Panel.tsx +366 -0
- package/examples/pages/react/QuickNavigationBar.tsx +142 -0
- package/examples/pages/react/RadioGroup.tsx +351 -0
- package/examples/pages/react/SelectGrid.tsx +121 -0
- package/examples/pages/react/Selects.tsx +2 -0
- package/examples/pages/react/SimpleList.tsx +148 -0
- package/examples/pages/react/SubNav.tsx +65 -18
- package/examples/pages/react/Tags.tsx +57 -5
- package/examples/pages/react/Text.tsx +134 -0
- package/examples/pages/react/TreeSelect.tsx +178 -0
- package/examples/pages/react.html +4 -0
- package/package.json +9 -5
- package/react/components/Alert.d.ts +3 -0
- package/react/components/Alert.js +9 -1
- package/react/components/Avatar.d.ts +9 -0
- package/react/components/Avatar.js +19 -1
- package/react/components/Button.d.ts +2 -0
- package/react/components/Button.js +4 -2
- package/react/components/ButtonGroup.d.ts +3 -2
- package/react/components/ButtonGroup.js +2 -2
- package/react/components/Carousel.js +1 -1
- package/react/components/CheckButtonGroup.d.ts +3 -1
- package/react/components/CheckButtonGroup.js +8 -2
- package/react/components/CheckGroup.d.ts +1 -0
- package/react/components/CheckGroup.js +1 -1
- package/react/components/Checkbox.d.ts +2 -1
- package/react/components/Checkbox.js +2 -2
- package/react/components/CheckboxButton.d.ts +1 -0
- package/react/components/CheckboxButton.js +2 -2
- package/react/components/DatePicker.js +7 -2
- package/react/components/DropZone.d.ts +25 -0
- package/react/components/DropZone.js +93 -0
- package/react/components/Dropdown.d.ts +1 -0
- package/react/components/Dropdown.js +3 -3
- package/react/components/Form/FormGroup.d.ts +13 -0
- package/react/components/Form/FormGroup.js +61 -0
- package/react/components/Form/FormItem.d.ts +9 -0
- package/react/components/Form/FormItem.js +54 -0
- package/react/components/Form/FormLabel.d.ts +10 -0
- package/react/components/Form/FormLabel.js +54 -0
- package/react/components/Form/FormRow.d.ts +17 -0
- package/react/components/Form/FormRow.js +62 -0
- package/react/components/Form/FormText.d.ts +8 -0
- package/react/components/Form/FormText.js +47 -0
- package/react/components/Form/index.d.ts +5 -0
- package/react/components/Form/index.js +12 -0
- package/react/components/IconButton.d.ts +9 -2
- package/react/components/IconButton.js +13 -5
- package/react/components/IconPicker.d.ts +24 -0
- package/react/components/IconPicker.js +283 -0
- package/react/components/Input.d.ts +20 -3
- package/react/components/Input.js +12 -3
- package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
- package/react/components/Layouts/AuthorinInnerSideBar.js +47 -0
- package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
- package/react/components/Layouts/AuthoringFrame.js +56 -0
- package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameContainer.js +47 -0
- package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameLeftBar.js +47 -0
- package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameMain.js +47 -0
- package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameNavBar.js +47 -0
- package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameOverlay.js +47 -0
- package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameRightBar.js +47 -0
- package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
- package/react/components/Layouts/AuthoringFrameSidePanel.js +56 -0
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +56 -0
- package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
- package/react/components/Layouts/AuthoringInnerBody.js +47 -0
- package/react/components/Layouts/AuthoringInnerHeader.d.ts +13 -0
- package/react/components/{RadioButton.js → Layouts/AuthoringInnerHeader.js} +20 -22
- package/react/components/Layouts/AuthoringMain.d.ts +12 -0
- package/react/components/Layouts/AuthoringMain.js +53 -0
- package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainContainer.js +47 -0
- package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainContent.js +47 -0
- package/react/components/Layouts/AuthoringMainToolBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainToolBar.js +47 -0
- package/react/components/Layouts/Container.d.ts +14 -0
- package/react/components/Layouts/Container.js +60 -0
- package/react/components/Layouts/HeaderPanel.d.ts +8 -0
- package/react/components/Layouts/HeaderPanel.js +47 -0
- package/react/components/Layouts/LayoutContainer.d.ts +8 -0
- package/react/components/Layouts/LayoutContainer.js +47 -0
- package/react/components/Layouts/LeftPanel.d.ts +9 -0
- package/react/components/Layouts/LeftPanel.js +54 -0
- package/react/components/Layouts/MainPanel.d.ts +10 -0
- package/react/components/Layouts/MainPanel.js +50 -0
- package/react/components/Layouts/PageLayout.d.ts +16 -0
- package/react/components/Layouts/PageLayout.js +64 -0
- package/react/components/Layouts/Panel.d.ts +65 -0
- package/react/components/Layouts/Panel.js +166 -0
- package/react/components/Layouts/RightPanel.d.ts +9 -0
- package/react/components/Layouts/RightPanel.js +47 -0
- package/react/components/Layouts/index.d.ts +24 -0
- package/react/components/Layouts/index.js +55 -0
- package/react/components/LeftMenu.d.ts +8 -3
- package/react/components/LeftMenu.js +55 -16
- package/react/components/ListItemLoader.d.ts +4 -0
- package/react/components/ListItemLoader.js +62 -0
- package/react/components/Lists/BoxedList.d.ts +36 -0
- package/react/components/Lists/BoxedList.js +137 -0
- package/react/components/Lists/SimpleList.d.ts +21 -0
- package/react/components/Lists/SimpleList.js +78 -0
- package/react/components/Lists/index.d.ts +2 -0
- package/react/components/Lists/index.js +9 -0
- package/react/components/Modal.js +1 -1
- package/react/components/Navigation/QuickNavBar.d.ts +24 -0
- package/react/components/Navigation/QuickNavBar.js +113 -0
- package/react/components/Navigation/SideBarMenu.d.ts +21 -0
- package/react/components/Navigation/SideBarMenu.js +77 -0
- package/react/components/Navigation/SideBarTabs.d.ts +22 -0
- package/react/components/Navigation/SideBarTabs.js +82 -0
- package/react/components/Navigation/index.d.ts +3 -0
- package/react/components/Navigation/index.js +8 -0
- package/react/components/RadioButtonGroup.d.ts +29 -0
- package/react/components/RadioButtonGroup.js +89 -0
- package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
- package/react/components/{Radio.js → RadioGroup.js} +15 -11
- package/react/components/Select.d.ts +3 -1
- package/react/components/Select.js +5 -3
- package/react/components/SelectGrid.d.ts +45 -0
- package/react/components/SelectGrid.js +179 -0
- package/react/components/Skeleton.d.ts +30 -0
- package/react/components/Skeleton.js +55 -0
- package/react/components/SlidingToolbar.d.ts +1 -1
- package/react/components/SlidingToolbar.js +11 -1
- package/react/components/Spinner.d.ts +11 -0
- package/react/components/Spinner.js +69 -0
- package/react/components/SubNav.d.ts +8 -1
- package/react/components/SubNav.js +22 -4
- package/react/components/Switch.d.ts +4 -1
- package/react/components/Switch.js +19 -7
- package/react/components/TabCustom.d.ts +0 -1
- package/react/components/Tag.d.ts +3 -2
- package/react/components/Tag.js +16 -5
- package/react/components/TagInput.d.ts +0 -1
- package/react/components/Text/Heading.d.ts +15 -0
- package/react/components/Text/Heading.js +77 -0
- package/react/components/Text/Text.d.ts +15 -0
- package/react/components/Text/Text.js +65 -0
- package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
- package/react/components/ThemeSelector.js +112 -0
- package/react/components/Togglebox.d.ts +1 -0
- package/react/components/Togglebox.js +9 -2
- package/react/index.d.ts +17 -3
- package/react/index.js +40 -4
- package/app/styles/variables/_design-tokens-general.scss +0 -136
- package/app-typescript/components/Radio.tsx +0 -57
- package/app-typescript/components/RadioButton.tsx +0 -57
- package/dist/react/Radios.tsx +0 -391
- package/examples/pages/react/Radios.tsx +0 -391
@@ -6,7 +6,6 @@ import { ButtonGroup, Button, NavButton, Dropdown } from '../../../app-typescrip
|
|
6
6
|
import {
|
7
7
|
Switch,
|
8
8
|
Route,
|
9
|
-
|
10
9
|
} from "react-router-dom";
|
11
10
|
|
12
11
|
import InputsDoc from './Inputs';
|
@@ -24,10 +23,11 @@ import TooltipDoc from './Tooltips';
|
|
24
23
|
import DatePickerDoc from './DatePicker';
|
25
24
|
import TimePickerDoc from './TimePicker';
|
26
25
|
import SwitchDoc from './Switch';
|
27
|
-
import
|
26
|
+
import RadioGroupDoc from './RadioGroup';
|
28
27
|
import CheckboxsDoc from './Checkboxs';
|
29
28
|
import TabsDoc from './Tabs';
|
30
29
|
import LeftNavigationsDoc from './LeftNavigations';
|
30
|
+
import QuickNavBarDoc from './QuickNavigationBar';
|
31
31
|
import NavButtonsDoc from './NavButtons';
|
32
32
|
import IconFontDoc from './IconFont';
|
33
33
|
import BigIconFontDoc from './BigIconFont';
|
@@ -43,9 +43,21 @@ import ModalDoc from './Modal';
|
|
43
43
|
import CarouselDoc from './Carousel';
|
44
44
|
import ContentDividerDoc from './ContentDivider';
|
45
45
|
import ToggleboxDocs from './Togglebox';
|
46
|
+
import ListItemsDoc from './ListItems';
|
47
|
+
import PanelDoc from './Panel';
|
48
|
+
import SelectGridDocs from './SelectGrid';
|
49
|
+
import IconPickerDocs from "./IconPicker";
|
50
|
+
import SimpleListDoc from "./SimpleList";
|
51
|
+
import BoxedListDoc from "./BoxedList";
|
52
|
+
import HeadingDoc from "./Heading";
|
53
|
+
import TextDoc from "./Text";
|
54
|
+
import ContainerDoc from './Container';
|
55
|
+
import DropZoneDoc from './DropZone';
|
46
56
|
|
47
57
|
import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
|
48
58
|
import { SelectWithTemplateDocs } from './SelectWithTemplate';
|
59
|
+
import { MultiselectDocs } from './MultiSelect';
|
60
|
+
import { TreeSelectDocs } from './TreeSelect';
|
49
61
|
import { PopoverDoc } from './Popover';
|
50
62
|
import { MenuDocs } from './Menu';
|
51
63
|
|
@@ -115,6 +127,9 @@ const pages = {
|
|
115
127
|
'left-navigation': {
|
116
128
|
name: 'Left navigation'
|
117
129
|
},
|
130
|
+
'Quick-navigation-bar': {
|
131
|
+
name: 'Quick navigation bar'
|
132
|
+
},
|
118
133
|
'sub-navigation': {
|
119
134
|
name: 'Sub navigation bar'
|
120
135
|
},
|
@@ -123,26 +138,57 @@ const pages = {
|
|
123
138
|
containerComponents: {
|
124
139
|
name: "Containers",
|
125
140
|
items: {
|
141
|
+
'container': {
|
142
|
+
name: 'Container component'
|
143
|
+
},
|
126
144
|
'empty-states': {
|
127
145
|
name: 'Empty states'
|
128
146
|
},
|
129
147
|
'grid-item': {
|
130
148
|
name: 'Grid Item'
|
131
149
|
},
|
150
|
+
'panel': {
|
151
|
+
name: 'Panel'
|
152
|
+
},
|
132
153
|
}
|
133
154
|
},
|
134
155
|
layoutComponents: {
|
135
156
|
name: "Layout",
|
136
157
|
items: {
|
137
|
-
'grid-list': {
|
138
|
-
name: 'Grid List'
|
139
|
-
},
|
140
158
|
'content-divider': {
|
141
159
|
name: 'Content Divider'
|
142
160
|
},
|
143
161
|
"togglebox": {
|
144
162
|
name: "Togglebox"
|
145
|
-
}
|
163
|
+
},
|
164
|
+
}
|
165
|
+
},
|
166
|
+
textComponents: {
|
167
|
+
name: "Text",
|
168
|
+
items: {
|
169
|
+
'heading': {
|
170
|
+
name: 'Heading component'
|
171
|
+
},
|
172
|
+
'text': {
|
173
|
+
name: 'Text component'
|
174
|
+
},
|
175
|
+
}
|
176
|
+
},
|
177
|
+
listComponents: {
|
178
|
+
name: "Lists",
|
179
|
+
items: {
|
180
|
+
'grid-list': {
|
181
|
+
name: 'Grid List'
|
182
|
+
},
|
183
|
+
'list-items': {
|
184
|
+
name: 'List items'
|
185
|
+
},
|
186
|
+
'simple-list': {
|
187
|
+
name: 'Simple list'
|
188
|
+
},
|
189
|
+
'boxed-list': {
|
190
|
+
name: 'Boxed list'
|
191
|
+
},
|
146
192
|
}
|
147
193
|
},
|
148
194
|
formComponents: {
|
@@ -160,24 +206,39 @@ const pages = {
|
|
160
206
|
'select': {
|
161
207
|
name: 'Select',
|
162
208
|
},
|
209
|
+
'select-grid': {
|
210
|
+
name: 'Select Grid',
|
211
|
+
},
|
163
212
|
'select-with-template': {
|
164
213
|
name: 'Select with template',
|
165
214
|
},
|
215
|
+
'multiselect': {
|
216
|
+
name: 'MultiSelect',
|
217
|
+
},
|
218
|
+
'treeselect': {
|
219
|
+
name: 'TreeSelect',
|
220
|
+
},
|
166
221
|
'date-picker': {
|
167
222
|
name: 'Date Picker',
|
168
223
|
},
|
169
224
|
'time-picker': {
|
170
225
|
name: 'Time Picker',
|
171
226
|
},
|
227
|
+
'icon-picker': {
|
228
|
+
name: 'Icon Picker',
|
229
|
+
},
|
172
230
|
'switch': {
|
173
231
|
name: 'Switch'
|
174
232
|
},
|
175
|
-
'
|
176
|
-
name: '
|
233
|
+
'radiogroup': {
|
234
|
+
name: 'RadioGroup'
|
177
235
|
},
|
178
236
|
'checkbox': {
|
179
237
|
name: 'Checkbox'
|
180
|
-
}
|
238
|
+
},
|
239
|
+
'dropzone': {
|
240
|
+
name: 'DropZone'
|
241
|
+
},
|
181
242
|
}
|
182
243
|
},
|
183
244
|
generalComponents: {
|
@@ -196,40 +257,48 @@ interface IProps {
|
|
196
257
|
theme?: string;
|
197
258
|
}
|
198
259
|
interface IState {
|
199
|
-
theme: 'dark' | 'light' | string;
|
260
|
+
theme: 'dark-ui' | 'light-ui' | string;
|
200
261
|
}
|
201
262
|
|
202
263
|
class ReactDoc extends React.Component<IProps, IState> {
|
203
264
|
constructor(props: IProps) {
|
204
265
|
super(props);
|
205
266
|
this.state = {
|
206
|
-
theme: 'light',
|
267
|
+
theme: 'light-ui',
|
207
268
|
}
|
208
269
|
this.handleTheme = this.handleTheme.bind(this);
|
209
270
|
}
|
271
|
+
|
210
272
|
handleTheme(newTheme: string) {
|
273
|
+
document.body.setAttribute('data-theme', newTheme);
|
274
|
+
|
211
275
|
this.setState({
|
212
276
|
theme: newTheme
|
213
277
|
})
|
214
278
|
}
|
279
|
+
|
280
|
+
checkTheme(theme: string) {
|
281
|
+
return this.state.theme === theme;
|
282
|
+
}
|
283
|
+
|
215
284
|
render() {
|
216
285
|
return (
|
217
286
|
<React.Fragment>
|
218
287
|
<ReactNav pages={pages} />
|
219
|
-
<main className="docs-page__content docs-page__container-fluid"
|
288
|
+
<main className="docs-page__content docs-page__container-fluid">
|
220
289
|
<div className="docs-page__fla-button-container">
|
221
290
|
<Dropdown
|
222
291
|
items={[
|
223
292
|
{
|
224
293
|
type: 'group', label: 'Chose a theme', items: [
|
225
294
|
'divider',
|
226
|
-
{ label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
|
227
|
-
{ label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
|
228
|
-
{ label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
|
295
|
+
{ label: 'Light', icon: 'adjust', active: this.checkTheme('light-ui'), onSelect: () => this.handleTheme('light-ui') },
|
296
|
+
{ label: 'Dark', icon: 'adjust', active: this.checkTheme('dark-ui'), onSelect: () => this.handleTheme('dark-ui') },
|
297
|
+
{ label: 'Accessible Light', active: this.checkTheme('accessible-light-ui'), icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui') },
|
229
298
|
]
|
230
299
|
},
|
231
300
|
]}>
|
232
|
-
<button className="docs-page__fla-button" aria-label="Change theme" onClick={()=> false}>
|
301
|
+
<button className="docs-page__fla-button" aria-label="Change theme" onClick={() => false}>
|
233
302
|
<i className="icon-adjust"></i>
|
234
303
|
</button>
|
235
304
|
</Dropdown>
|
@@ -249,14 +318,17 @@ class ReactDoc extends React.Component<IProps, IState> {
|
|
249
318
|
<Route path="/react/autocomplete" component={AutocompleteDoc} />
|
250
319
|
<Route path="/react/select" component={SelectsDoc} />
|
251
320
|
<Route path="/react/select-with-template" component={SelectWithTemplateDocs} />
|
321
|
+
<Route path="/react/multiselect" component={MultiselectDocs} />
|
322
|
+
<Route path="/react/treeselect" component={TreeSelectDocs} />
|
252
323
|
<Route path="/react/popover" component={PopoverDoc} />
|
253
324
|
<Route path="/react/date-picker" component={DatePickerDoc} />
|
254
325
|
<Route path="/react/time-picker" component={TimePickerDoc} />
|
255
326
|
<Route path="/react/switch" component={SwitchDoc} />
|
256
|
-
<Route path="/react/
|
327
|
+
<Route path="/react/radiogroup" component={RadioGroupDoc} />
|
257
328
|
<Route path="/react/checkbox" component={CheckboxsDoc} />
|
258
329
|
<Route path="/react/tab" component={TabsDoc} />
|
259
330
|
<Route path="/react/left-navigation" component={LeftNavigationsDoc} />
|
331
|
+
<Route path="/react/Quick-navigation-bar" component={QuickNavBarDoc} />
|
260
332
|
<Route path="/react/nav-buttons" component={NavButtonsDoc} />
|
261
333
|
<Route path="/react/icon-font" component={IconFontDoc} />
|
262
334
|
<Route path="/react/big-icon-font" component={BigIconFontDoc} />
|
@@ -272,6 +344,16 @@ class ReactDoc extends React.Component<IProps, IState> {
|
|
272
344
|
<Route path="/react/content-divider" component={ContentDividerDoc} />
|
273
345
|
<Route path="/react/menu" component={MenuDocs} />
|
274
346
|
<Route path="/react/togglebox" component={ToggleboxDocs} />
|
347
|
+
<Route path="/react/list-items" component={ListItemsDoc} />
|
348
|
+
<Route path="/react/panel" component={PanelDoc} />
|
349
|
+
<Route path="/react/select-grid" component={SelectGridDocs} />
|
350
|
+
<Route path="/react/icon-picker" component={IconPickerDocs} />
|
351
|
+
<Route path="/react/simple-list" component={SimpleListDoc} />
|
352
|
+
<Route path="/react/boxed-list" component={BoxedListDoc} />
|
353
|
+
<Route path="/react/heading" component={HeadingDoc} />
|
354
|
+
<Route path="/react/text" component={TextDoc} />
|
355
|
+
<Route path="/react/container" component={ContainerDoc} />
|
356
|
+
<Route path="/react/dropzone" component={DropZoneDoc} />
|
275
357
|
<Route path="/" component={ReactDefault} />
|
276
358
|
</Switch>
|
277
359
|
</main>
|
@@ -296,10 +378,9 @@ class ReactPlayground extends React.Component<IProps> {
|
|
296
378
|
|
297
379
|
const parsePlayground = ({ match }, playgrounds) => {
|
298
380
|
const Component = Playgrounds[playgrounds[match.params.id].component];
|
299
|
-
|
300
381
|
return (
|
301
382
|
<Component />
|
302
383
|
);
|
303
384
|
};
|
304
385
|
|
305
|
-
export { ReactDoc, ReactPlayground };
|
386
|
+
export { ReactDoc, ReactPlayground };
|
@@ -9,6 +9,7 @@ interface IState {
|
|
9
9
|
required: boolean;
|
10
10
|
disabled: boolean;
|
11
11
|
invalid: boolean;
|
12
|
+
value: number;
|
12
13
|
}
|
13
14
|
|
14
15
|
export default class InputsDoc extends React.Component<{}, IState> {
|
@@ -18,7 +19,8 @@ export default class InputsDoc extends React.Component<{}, IState> {
|
|
18
19
|
inlineLabel: false,
|
19
20
|
required: true,
|
20
21
|
disabled: false,
|
21
|
-
invalid: false
|
22
|
+
invalid: false,
|
23
|
+
value: null
|
22
24
|
}
|
23
25
|
}
|
24
26
|
|
@@ -45,15 +47,17 @@ export default class InputsDoc extends React.Component<{}, IState> {
|
|
45
47
|
|
46
48
|
<div className='form__row'>
|
47
49
|
<Input label='Input label'
|
48
|
-
value=
|
50
|
+
value={this.state.value}
|
49
51
|
maxLength={30}
|
52
|
+
type='number'
|
50
53
|
error='This is error message'
|
51
54
|
info='This is some hint message'
|
52
55
|
inlineLabel={this.state.inlineLabel}
|
53
56
|
required={this.state.required}
|
54
57
|
disabled={this.state.disabled}
|
55
58
|
invalid={this.state.invalid}
|
56
|
-
|
59
|
+
tabindex={0}
|
60
|
+
onChange={(value) => this.setState({value: value})} />
|
57
61
|
</div>
|
58
62
|
</div>
|
59
63
|
|
@@ -75,6 +79,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
|
|
75
79
|
<h3 className='docs-page__h3'>Props</h3>
|
76
80
|
<PropsList>
|
77
81
|
<Prop name='value' isRequired={false} type='string' default='/' description='Item value'/>
|
82
|
+
<Prop name='type' isRequired={false} type='text | number | password' default='text' description='Input type. Defaults to type text.'/>
|
78
83
|
<Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
|
79
84
|
<Prop name='maxLength' isRequired={false} type='number' default='/' description='Sets max length for input text'/>
|
80
85
|
<Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
|
@@ -83,6 +88,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
|
|
83
88
|
<Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
|
84
89
|
<Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
|
85
90
|
<Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
|
91
|
+
<Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.'/>
|
86
92
|
</PropsList>
|
87
93
|
</section>
|
88
94
|
)
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import * as Markup from '../../js/react';
|
3
|
-
import { LeftMenu, Prop, PropsList } from '../../../app-typescript';
|
3
|
+
import { Container, Heading, LeftMenu, Prop, PropsList, SimpleList, SimpleListItem } from '../../../app-typescript';
|
4
4
|
|
5
5
|
export default class LeftNavigationsDoc extends React.Component<{}> {
|
6
6
|
render() {
|
@@ -8,8 +8,20 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
8
8
|
return (
|
9
9
|
<section className="docs-page__container">
|
10
10
|
<h2 className="docs-page__h2">Left navigation</h2>
|
11
|
-
<p className="docs-page__paragraph">...</p>
|
12
11
|
|
12
|
+
<Markup.ReactMarkupCodePreview>{`
|
13
|
+
<LeftMenu
|
14
|
+
activeItemId='1'
|
15
|
+
groups={[
|
16
|
+
{ label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
|
17
|
+
{ label: 'WORKFLOW', items: [{ id: '4', label: 'Desk' }, { id: '5', label: 'User Roles & Privileges'}]},
|
18
|
+
{ label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
|
19
|
+
]}
|
20
|
+
onSelect={() => false} />
|
21
|
+
`}
|
22
|
+
</Markup.ReactMarkupCodePreview>
|
23
|
+
|
24
|
+
<h3 className="docs-page__h3">Default</h3>
|
13
25
|
<Markup.ReactMarkup>
|
14
26
|
<Markup.ReactMarkupPreview>
|
15
27
|
<div className='docs-page__content-row'>
|
@@ -20,23 +32,160 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
20
32
|
<p className="sd-top-menu__header">Top menu</p>
|
21
33
|
</div>
|
22
34
|
</div>
|
23
|
-
<LeftMenu ariaLabel={'Left navigation'}
|
24
|
-
groups={[
|
25
|
-
|
26
|
-
|
35
|
+
<LeftMenu ariaLabel={'Left navigation'} className={'docs-page__grid-page-example__side'} activeItemId='1'
|
36
|
+
groups={[
|
37
|
+
{label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
|
38
|
+
{label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
|
39
|
+
{label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
|
40
|
+
]}
|
27
41
|
onSelect={() => false} />
|
28
42
|
<div className='docs-page__grid-page-example__main'></div>
|
29
43
|
</div>
|
30
44
|
</div>
|
31
45
|
</Markup.ReactMarkupPreview>
|
32
46
|
<Markup.ReactMarkupCode>{`
|
33
|
-
<LeftMenu ariaLabel={'Left navigation'}
|
34
|
-
{
|
35
|
-
|
47
|
+
<LeftMenu ariaLabel={'Left navigation'} className={'docs-page__grid-page-example__side'} activeItemId='1'
|
48
|
+
groups={[
|
49
|
+
{label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
|
50
|
+
{label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
|
51
|
+
{label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
|
52
|
+
]}
|
36
53
|
onSelect={() => false} />
|
37
54
|
`}
|
38
55
|
</Markup.ReactMarkupCode>
|
39
56
|
</Markup.ReactMarkup>
|
57
|
+
<h3 className="docs-page__h3">With scrollspy</h3>
|
58
|
+
<p className="docs-page__paragraph">The component also supports the scrollspy variant. It is necessary to add ID value to items and add the ID value of scrollable container in the <code>scrollSpy</code> attribute.</p>
|
59
|
+
<Markup.ReactMarkup>
|
60
|
+
<Markup.ReactMarkupPreview>
|
61
|
+
<div className='docs-page__content-row'>
|
62
|
+
<div className='docs-page__grid-page-example'>
|
63
|
+
<div className='docs-page__grid-page-example__top'>
|
64
|
+
<div className="sd-top-menu">
|
65
|
+
<a className="sd-top-menu__collapse-nav"><i className="icon-collapse icon--white"></i></a>
|
66
|
+
<p className="sd-top-menu__header">Top menu</p>
|
67
|
+
</div>
|
68
|
+
</div>
|
69
|
+
<LeftMenu ariaLabel={'Left navigation'}
|
70
|
+
className={'docs-page__grid-page-example__side'}
|
71
|
+
scrollSpy='#scrollContainer'
|
72
|
+
offset={-300}
|
73
|
+
activeItemId='1'
|
74
|
+
groups={[
|
75
|
+
{ label: 'MAIN SECTIONS', items: [
|
76
|
+
{ id: '1', label: 'Section 1', ref:'section1'},
|
77
|
+
{ id: '2', label: 'Section 2', ref: 'section2' },
|
78
|
+
{ id: '3', label: 'Section 3', ref: 'section3' },
|
79
|
+
|
80
|
+
]},
|
81
|
+
{ label:'OTHER SECTIONS', items: [
|
82
|
+
{ id: '4', label: 'Section 4', ref: 'section4' },
|
83
|
+
{ id: '5', label: 'Section 5', ref: 'section5' }
|
84
|
+
]},
|
85
|
+
{ label:'OTHER SECTIONS', items: [
|
86
|
+
{ id: '6', label: 'Section 6', ref: 'section6' },
|
87
|
+
{ id: '7', label: 'Section 7', ref: 'section7' }
|
88
|
+
]}
|
89
|
+
]}
|
90
|
+
onSelect={() => false} />
|
91
|
+
<div className='docs-page__grid-page-example__main sd-padding--4' id='scrollContainer' style={{height:600}}>
|
92
|
+
<SimpleList density='comfortable'>
|
93
|
+
<SimpleListItem stacked={true} id='section1' >
|
94
|
+
<Heading type='h3'>Section 1</Heading>
|
95
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
96
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
97
|
+
</Container>
|
98
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
99
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
100
|
+
</Container>
|
101
|
+
</SimpleListItem >
|
102
|
+
<SimpleListItem stacked={true} id='section2' >
|
103
|
+
<Heading type='h3'>Section 2</Heading>
|
104
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
105
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
106
|
+
</Container>
|
107
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
108
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
109
|
+
</Container>
|
110
|
+
</SimpleListItem>
|
111
|
+
<SimpleListItem stacked={true} id='section3' >
|
112
|
+
<Heading type='h3'>Section 3</Heading>
|
113
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
114
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
115
|
+
</Container>
|
116
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
117
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
118
|
+
</Container>
|
119
|
+
</SimpleListItem>
|
120
|
+
<SimpleListItem stacked={true} id='section4' >
|
121
|
+
<Heading type='h3'>Section 4</Heading>
|
122
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
123
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
124
|
+
</Container>
|
125
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
126
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
127
|
+
</Container>
|
128
|
+
</SimpleListItem>
|
129
|
+
<SimpleListItem stacked={true} id='section5' >
|
130
|
+
<Heading type='h3'>Section 5</Heading>
|
131
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
132
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
133
|
+
</Container>
|
134
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
135
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
136
|
+
</Container>
|
137
|
+
</SimpleListItem>
|
138
|
+
<SimpleListItem stacked={true} id='section6' >
|
139
|
+
<Heading type='h3'>Section 6</Heading>
|
140
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
141
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
142
|
+
</Container>
|
143
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
144
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
145
|
+
</Container>
|
146
|
+
</SimpleListItem>
|
147
|
+
<SimpleListItem stacked={true} id='section7' >
|
148
|
+
<Heading type='h3'>Section 7</Heading>
|
149
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
150
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
151
|
+
</Container>
|
152
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
|
153
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
|
154
|
+
</Container>
|
155
|
+
</SimpleListItem>
|
156
|
+
</SimpleList>
|
157
|
+
</div>
|
158
|
+
</div>
|
159
|
+
</div>
|
160
|
+
</Markup.ReactMarkupPreview>
|
161
|
+
<Markup.ReactMarkupCode>
|
162
|
+
{`
|
163
|
+
<LeftMenu ariaLabel={'Left navigation'}
|
164
|
+
className={'docs-page__grid-page-example__side'}
|
165
|
+
scrollSpy='#scrollContainer'
|
166
|
+
activeItemId='1'
|
167
|
+
groups={[
|
168
|
+
{ label: 'MAIN SECTIONS', items: [
|
169
|
+
{ id: '1', label: 'Section 1', ref:'section1'},
|
170
|
+
{ id: '2', label: 'Section 2', ref: 'section2' },
|
171
|
+
{ id: '3', label: 'Section 3', ref: 'section3' },
|
172
|
+
|
173
|
+
]},
|
174
|
+
{label:'OTHER SECTIONS', items: [
|
175
|
+
{ id: '4', label: 'Section 4', ref: 'section4' },
|
176
|
+
{ id: '5', label: 'Section 5', ref: 'section5' }
|
177
|
+
]},
|
178
|
+
{label:'OTHER SECTIONS', items: [
|
179
|
+
{ id: '4', label: 'Section 6', ref: 'section6' },
|
180
|
+
{ id: '5', label: 'Section 7', ref: 'section7' }
|
181
|
+
]}
|
182
|
+
]}
|
183
|
+
onSelect={() => false} />
|
184
|
+
|
185
|
+
<div id='#scrollContainer'>...</div>
|
186
|
+
`}
|
187
|
+
</Markup.ReactMarkupCode>
|
188
|
+
</Markup.ReactMarkup>
|
40
189
|
|
41
190
|
<h3 className="docs-page__h3">Props</h3>
|
42
191
|
<PropsList>
|
@@ -46,7 +195,10 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
46
195
|
<Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items'/>
|
47
196
|
<Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value'/>
|
48
197
|
<Prop name='menuitem label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
|
198
|
+
<Prop name='scrollSpy' isRequired={false} type='string' default='HTML' description='Name of the element of scrollable container.'/>
|
199
|
+
<Prop name='offset' isRequired={false} type='number' default='-300' description='Offset value that adjusts to determine the elements are in the viewport.'/>
|
49
200
|
</PropsList>
|
201
|
+
|
50
202
|
</section>
|
51
203
|
)
|
52
204
|
}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as Markup from "../../js/react";
|
3
|
+
import { ListItemLoader, PropsList } from "../../../app-typescript";
|
4
|
+
|
5
|
+
export default class ListItemsDoc extends React.Component {
|
6
|
+
render() {
|
7
|
+
return (
|
8
|
+
<section className="docs-page__container">
|
9
|
+
<h2 className="docs-page__h2">ListItemLoader</h2>
|
10
|
+
<Markup.ReactMarkupCodePreview>{`
|
11
|
+
<ListItemLoader />
|
12
|
+
`}
|
13
|
+
</Markup.ReactMarkupCodePreview>
|
14
|
+
<h3 className="docs-page__h3 docs-page__h3--small-top-m">Skeleton type loader for list items.</h3>
|
15
|
+
{/* <p className="docs-page__paragraph">Basic layout structure for list elements. The content inside the elements serves just as an example.</p> */}
|
16
|
+
<Markup.ReactMarkup>
|
17
|
+
<Markup.ReactMarkupPreview>
|
18
|
+
<div className="docs-page__content-row">
|
19
|
+
<ListItemLoader />
|
20
|
+
</div>
|
21
|
+
</Markup.ReactMarkupPreview>
|
22
|
+
<Markup.ReactMarkupCode>{`
|
23
|
+
<ListItemLoader />
|
24
|
+
`}</Markup.ReactMarkupCode>
|
25
|
+
</Markup.ReactMarkup>
|
26
|
+
|
27
|
+
<h3 className="docs-page__h3">Props</h3>
|
28
|
+
<PropsList>
|
29
|
+
|
30
|
+
</PropsList>
|
31
|
+
</section>
|
32
|
+
)
|
33
|
+
}
|
34
|
+
}
|
@@ -27,19 +27,19 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
27
27
|
|
28
28
|
render() {
|
29
29
|
const modalFullFooter=(
|
30
|
-
<ButtonGroup align="
|
30
|
+
<ButtonGroup align="end">
|
31
31
|
<Button text='Cancel' onClick={() => {this.setState({modalFull:false})}}/>
|
32
32
|
<Button type='primary' text='Save' onClick={() => {}}/>
|
33
33
|
</ButtonGroup>
|
34
34
|
);
|
35
35
|
const modalLargeFooter=(
|
36
|
-
<ButtonGroup align="
|
36
|
+
<ButtonGroup align="end">
|
37
37
|
<Button text='Cancel' onClick={() => {this.setState({modalLarge:false})}}/>
|
38
38
|
<Button type='primary' text='Save' onClick={() => {}}/>
|
39
39
|
</ButtonGroup>
|
40
40
|
);
|
41
41
|
const modalXLargeFooter=(
|
42
|
-
<ButtonGroup align="
|
42
|
+
<ButtonGroup align="end">
|
43
43
|
<Button text='Cancel' onClick={() => {this.setState({modalXLarge:false})}}/>
|
44
44
|
<Button type='primary' text='Save' onClick={() => {}}/>
|
45
45
|
</ButtonGroup>
|
@@ -60,7 +60,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
60
60
|
</p>
|
61
61
|
<Markup.ReactMarkup>
|
62
62
|
<Markup.ReactMarkupPreview>
|
63
|
-
<ButtonGroup align="
|
63
|
+
<ButtonGroup align="end">
|
64
64
|
<Button text="Basic (no size)" onClick={() => this.setState({modalBasic: true})} />
|
65
65
|
<Button text="Small" onClick={() => this.setState({modalSmall: true})} />
|
66
66
|
<Button text="Medium" onClick={() => this.setState({modalMedium: true})} />
|
@@ -144,7 +144,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
144
144
|
// Large
|
145
145
|
<Button text="Large with footer" onClick={() => this.setState({modalLarge: true})} />
|
146
146
|
const modalLargeFooter=(
|
147
|
-
<ButtonGroup align="
|
147
|
+
<ButtonGroup align="end">
|
148
148
|
<Button text='Cancel' onClick={() => {this.setState({modalLarge:false})}}/>
|
149
149
|
<Button type='primary' text='Save' onClick={() => {}}/>
|
150
150
|
</ButtonGroup>
|
@@ -159,7 +159,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
159
159
|
// Extra large
|
160
160
|
<Button text="Extra Large with footer" onClick={() => this.setState({modalXLarge: true})} />
|
161
161
|
const modalXLargeFooter=(
|
162
|
-
<ButtonGroup align="
|
162
|
+
<ButtonGroup align="end">
|
163
163
|
<Button text='Cancel' onClick={() => {this.setState({modalXLarge:false})}}/>
|
164
164
|
<Button type='primary' text='Save' onClick={() => {}}/>
|
165
165
|
</ButtonGroup>
|
@@ -203,7 +203,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
203
203
|
<Markup.ReactMarkupCode>{`
|
204
204
|
<Button text="Open Modal" onClick={() => this.setState({modalFull: true})} />
|
205
205
|
const modalFullFooter=(
|
206
|
-
<ButtonGroup align="
|
206
|
+
<ButtonGroup align="end">
|
207
207
|
<Button text='Cancel' onClick={() => {this.setState({modalFull:false})}}/>
|
208
208
|
<Button type='primary' text='Save' onClick={() => {}}/>
|
209
209
|
</ButtonGroup>
|