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
@@ -56,6 +56,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
|
|
56
56
|
required={this.state.required}
|
57
57
|
disabled={this.state.disabled}
|
58
58
|
invalid={this.state.invalid}
|
59
|
+
tabindex={0}
|
59
60
|
onChange={(value) => { console.log(value) }}>
|
60
61
|
<Option>Option 1</Option>
|
61
62
|
<Option>Option 2</Option>
|
@@ -90,6 +91,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
|
|
90
91
|
<Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
|
91
92
|
<Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
|
92
93
|
<Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid' />
|
94
|
+
<Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.' />
|
93
95
|
</PropsList>
|
94
96
|
</section>
|
95
97
|
)
|
@@ -0,0 +1,148 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import * as Markup from '../../js/react';
|
3
|
+
import { SimpleList, SimpleListItem, Label, Badge, Icon, IconButton, ButtonGroup, Text, Heading, Prop, PropsList } from '../../../app-typescript';
|
4
|
+
|
5
|
+
export default class SimpleListDoc extends React.Component {
|
6
|
+
render() {
|
7
|
+
return (
|
8
|
+
<section className='docs-page__container'>
|
9
|
+
<h2 className='docs-page__h2'>SimpleList</h2>
|
10
|
+
|
11
|
+
<Markup.ReactMarkupCodePreview>{`
|
12
|
+
<SimpleList>
|
13
|
+
<SimpleListItem>...</SimpleListItem>
|
14
|
+
</SimpleList>
|
15
|
+
`}
|
16
|
+
</Markup.ReactMarkupCodePreview>
|
17
|
+
|
18
|
+
<p className="docs-page__paragraph">...</p>
|
19
|
+
|
20
|
+
<Markup.ReactMarkup>
|
21
|
+
<Markup.ReactMarkupPreview>
|
22
|
+
<p className="docs-page__paragraph">// no border / compact (default)</p>
|
23
|
+
<SimpleList>
|
24
|
+
<SimpleListItem>Maecenas sed diam eget risus varius blandit sit amet non magna.</SimpleListItem>
|
25
|
+
<SimpleListItem>Donec sed odio dui.</SimpleListItem>
|
26
|
+
<SimpleListItem>Etiam porta sem malesuada magna mollis euismod.</SimpleListItem>
|
27
|
+
<SimpleListItem>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</SimpleListItem>
|
28
|
+
</SimpleList>
|
29
|
+
<p className="docs-page__paragraph">// border / space-between</p>
|
30
|
+
<SimpleList border={true}>
|
31
|
+
<SimpleListItem justify="space-between">
|
32
|
+
Vehicula Ridiculus <Label text='Active' type='success' style='translucent'/>
|
33
|
+
</SimpleListItem>
|
34
|
+
<SimpleListItem justify="space-between">
|
35
|
+
Tellus Mollis Aenean <Label text='Pending' type='warning' style='translucent'/>
|
36
|
+
</SimpleListItem>
|
37
|
+
<SimpleListItem justify="space-between">
|
38
|
+
Elit Vestibulum <Label text='Closed' type='alert' style='translucent'/>
|
39
|
+
</SimpleListItem>
|
40
|
+
</SimpleList>
|
41
|
+
<p className="docs-page__paragraph">// border / comfortable</p>
|
42
|
+
<SimpleList border={true} density='comfortable'>
|
43
|
+
<SimpleListItem>
|
44
|
+
<Icon name='photo' />
|
45
|
+
<Text weight='medium'>Adipiscing</Text>
|
46
|
+
<Text color='light'>Tellus Dolor Amet</Text>
|
47
|
+
<ButtonGroup align='end'>
|
48
|
+
<IconButton icon='pencil' ariaValue="Edit" onClick={()=> false} />
|
49
|
+
<IconButton icon='trash' ariaValue="Delete" onClick={()=> false} />
|
50
|
+
</ButtonGroup>
|
51
|
+
</SimpleListItem>
|
52
|
+
<SimpleListItem>
|
53
|
+
<Icon name='video' />
|
54
|
+
<Text weight='medium'>Condimentum</Text>
|
55
|
+
<Text color='light'>Nullam Ridiculus Mattis</Text>
|
56
|
+
<ButtonGroup align='end'>
|
57
|
+
<IconButton icon='pencil' ariaValue="Edit" onClick={()=> false} />
|
58
|
+
<IconButton icon='trash' ariaValue="Delete" onClick={()=> false} />
|
59
|
+
</ButtonGroup>
|
60
|
+
</SimpleListItem>
|
61
|
+
<SimpleListItem>
|
62
|
+
<Icon name='slideshow' />
|
63
|
+
<Text weight='medium'>Magna Bibendum</Text>
|
64
|
+
<Text color='light'>Vehicula Ornare Cras Aenean</Text>
|
65
|
+
<ButtonGroup align='end'>
|
66
|
+
<IconButton icon='pencil' ariaValue="Edit" onClick={()=> false} />
|
67
|
+
<IconButton icon='trash' ariaValue="Delete" onClick={()=> false} />
|
68
|
+
</ButtonGroup>
|
69
|
+
</SimpleListItem>
|
70
|
+
</SimpleList>
|
71
|
+
|
72
|
+
|
73
|
+
</Markup.ReactMarkupPreview>
|
74
|
+
<Markup.ReactMarkupCode>{`
|
75
|
+
// no border / compact (default)
|
76
|
+
<SimpleList>
|
77
|
+
<SimpleListItem>Maecenas sed diam eget risus varius blandit sit amet non magna.</SimpleListItem>
|
78
|
+
<SimpleListItem>Donec sed odio dui.</SimpleListItem>
|
79
|
+
<SimpleListItem>Etiam porta sem malesuada magna mollis euismod.</SimpleListItem>
|
80
|
+
<SimpleListItem>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</SimpleListItem>
|
81
|
+
</SimpleList>
|
82
|
+
|
83
|
+
// border / space-between
|
84
|
+
<SimpleList border={true}>
|
85
|
+
<SimpleListItem justify="space-between">
|
86
|
+
Vehicula Ridiculus <Label text='Active' type='success' style='translucent'/>
|
87
|
+
</SimpleListItem>
|
88
|
+
<SimpleListItem justify="space-between">
|
89
|
+
Tellus Mollis Aenean <Label text='Pending' type='warning' style='translucent'/>
|
90
|
+
</SimpleListItem>
|
91
|
+
<SimpleListItem justify="space-between">
|
92
|
+
Elit Vestibulum <Label text='Closed' type='alert' style='translucent'/>
|
93
|
+
</SimpleListItem>
|
94
|
+
</SimpleList>
|
95
|
+
|
96
|
+
// border / comfortable
|
97
|
+
<SimpleList border={true} density='comfortable'>
|
98
|
+
<SimpleListItem>
|
99
|
+
<Icon name='photo' />
|
100
|
+
<Text weight='medium'>Adipiscing</Text>
|
101
|
+
<Text color='light'>Tellus Dolor Amet</Text>
|
102
|
+
<ButtonGroup align='end'>
|
103
|
+
<IconButton icon='pencil' ariaValue="Edit" onClick={()=> false} />
|
104
|
+
<IconButton icon='trash' ariaValue="Delete" onClick={()=> false} />
|
105
|
+
</ButtonGroup>
|
106
|
+
</SimpleListItem>
|
107
|
+
<SimpleListItem>
|
108
|
+
<Icon name='video' />
|
109
|
+
<Text weight='medium'>Condimentum</Text>
|
110
|
+
<Text color='light'>Nullam Ridiculus Mattis</Text>
|
111
|
+
<ButtonGroup align='end'>
|
112
|
+
<IconButton icon='pencil' ariaValue="Edit" onClick={()=> false} />
|
113
|
+
<IconButton icon='trash' ariaValue="Delete" onClick={()=> false} />
|
114
|
+
</ButtonGroup>
|
115
|
+
</SimpleListItem>
|
116
|
+
<SimpleListItem>
|
117
|
+
<Icon name='slideshow' />
|
118
|
+
<Text weight='medium'>Magna Bibendum</Text>
|
119
|
+
<Text color='light'>Vehicula Ornare Cras Aenean</Text>
|
120
|
+
<ButtonGroup align='end'>
|
121
|
+
<IconButton icon='pencil' ariaValue="Edit" onClick={()=> false} />
|
122
|
+
<IconButton icon='trash' ariaValue="Delete" onClick={()=> false} />
|
123
|
+
</ButtonGroup>
|
124
|
+
</SimpleListItem>
|
125
|
+
</SimpleList>
|
126
|
+
`}
|
127
|
+
</Markup.ReactMarkupCode>
|
128
|
+
</Markup.ReactMarkup>
|
129
|
+
|
130
|
+
|
131
|
+
<h3 className="docs-page__h3">Props</h3>
|
132
|
+
<p className="docs-page__paragraph">SimpleList</p>
|
133
|
+
<PropsList>
|
134
|
+
<Prop name='density' isRequired={false} type='compact | comfortable | loose' default='compact' description='Specifies the vertical padding inside the list items. '/>
|
135
|
+
<Prop name='width' isRequired={false} type='none | x-small | small | medium | large' default='none' description='Defines the width of the list. If not specified the list will take the full width of the parent container.'/>
|
136
|
+
<Prop name='border' isRequired={false} type='boolean' default='false' description='Adds a dotted border on top of the list and between list items.'/>
|
137
|
+
<Prop name='className' isRequired={false} type='string' default='false' description='Add custom or helper classes to the list to modify the behaviour (e.g. top or bootom margins).'/>
|
138
|
+
</PropsList>
|
139
|
+
<p className="docs-page__paragraph">SimpleListItem</p>
|
140
|
+
<PropsList>
|
141
|
+
<Prop name='stacked' isRequired={false} type='boolean' default='false' description='Changes the flex-direction from row to column.'/>
|
142
|
+
<Prop name='justify' isRequired={false} type='flex-start | flex-end | center | space-between' default='flex-start' description='Changes the flex justification of the elements inside the list item. '/>
|
143
|
+
</PropsList>
|
144
|
+
|
145
|
+
</section>
|
146
|
+
)
|
147
|
+
}
|
148
|
+
}
|
@@ -1,8 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
|
3
2
|
import * as Markup from '../../js/react';
|
4
|
-
|
5
|
-
import { SubNav, NavButton, Button, ButtonGroup, Divider} from '../../../app-typescript';
|
3
|
+
import { SubNav, NavButton, Button, ButtonGroup, Divider, PropsList, Prop} from '../../../app-typescript';
|
6
4
|
|
7
5
|
export default class SubNavDoc extends React.Component {
|
8
6
|
render() {
|
@@ -12,10 +10,10 @@ export default class SubNavDoc extends React.Component {
|
|
12
10
|
<p></p>
|
13
11
|
<Markup.ReactMarkupCodePreview>{`
|
14
12
|
<SubNav zIndex={2}>
|
15
|
-
<ButtonGroup align='
|
13
|
+
<ButtonGroup align='start'>
|
16
14
|
<NavButton icon='search' onClick={()=> false} />
|
17
15
|
</ButtonGroup>
|
18
|
-
<ButtonGroup align='
|
16
|
+
<ButtonGroup align='end'>
|
19
17
|
<NavButton icon='dots-vertical' onClick={()=> false} />
|
20
18
|
</ButtonGroup>
|
21
19
|
</SubNav>
|
@@ -25,18 +23,18 @@ export default class SubNavDoc extends React.Component {
|
|
25
23
|
<Markup.ReactMarkup>
|
26
24
|
<Markup.ReactMarkupPreview>
|
27
25
|
<SubNav zIndex={4}>
|
28
|
-
<ButtonGroup align='
|
26
|
+
<ButtonGroup align='start'>
|
29
27
|
<NavButton icon='search' onClick={()=> false} />
|
30
28
|
</ButtonGroup>
|
31
|
-
<ButtonGroup align='
|
29
|
+
<ButtonGroup align='end'>
|
32
30
|
<NavButton icon='expand-thin' type='highlight' onClick={()=> false} />
|
33
31
|
</ButtonGroup>
|
34
32
|
</SubNav>
|
35
33
|
<SubNav color='darker' zIndex={3}>
|
36
|
-
<ButtonGroup align='
|
34
|
+
<ButtonGroup align='start'>
|
37
35
|
<NavButton icon='filter-large' type='darker' onClick={()=> false} />
|
38
36
|
</ButtonGroup>
|
39
|
-
<ButtonGroup align='
|
37
|
+
<ButtonGroup align='end'>
|
40
38
|
<Button text='Something' onClick={()=> false} />
|
41
39
|
<Button text='Else' onClick={()=> false} />
|
42
40
|
<Divider border={true} />
|
@@ -51,7 +49,7 @@ export default class SubNavDoc extends React.Component {
|
|
51
49
|
</SubNav>
|
52
50
|
<br />
|
53
51
|
<SubNav color='darker' zIndex={2}>
|
54
|
-
<ButtonGroup align='
|
52
|
+
<ButtonGroup align='start' padded={true}>
|
55
53
|
<Button text='Something' onClick={()=> false} />
|
56
54
|
<Button text='Else' onClick={()=> false} />
|
57
55
|
<Divider border={true} />
|
@@ -60,7 +58,7 @@ export default class SubNavDoc extends React.Component {
|
|
60
58
|
</ButtonGroup>
|
61
59
|
</SubNav>
|
62
60
|
<br />
|
63
|
-
<SubNav color='
|
61
|
+
<SubNav color='blueGreyDarker' zIndex={1}>
|
64
62
|
<ButtonGroup align='center'>
|
65
63
|
<Button text='One' onClick={()=> false} />
|
66
64
|
<Button text='Two' onClick={()=> false} />
|
@@ -74,20 +72,69 @@ export default class SubNavDoc extends React.Component {
|
|
74
72
|
</SubNav>
|
75
73
|
</Markup.ReactMarkupPreview>
|
76
74
|
<Markup.ReactMarkupCode>{`
|
77
|
-
<SubNav zIndex={
|
78
|
-
<ButtonGroup align='
|
79
|
-
<NavButton icon='filter-large' type='darker' onClick={()=> false} />
|
75
|
+
<SubNav zIndex={4}>
|
76
|
+
<ButtonGroup align='start'>
|
80
77
|
<NavButton icon='search' onClick={()=> false} />
|
81
78
|
</ButtonGroup>
|
82
|
-
<ButtonGroup align='
|
83
|
-
<NavButton icon='list-plus' onClick={()=> false} />
|
84
|
-
<NavButton icon='dots-vertical' onClick={()=> false} />
|
79
|
+
<ButtonGroup align='end'>
|
85
80
|
<NavButton icon='expand-thin' type='highlight' onClick={()=> false} />
|
86
81
|
</ButtonGroup>
|
87
|
-
</SubNav>
|
82
|
+
</SubNav>
|
83
|
+
<SubNav color='darker' zIndex={3}>
|
84
|
+
<ButtonGroup align='start'>
|
85
|
+
<NavButton icon='filter-large' type='darker' onClick={()=> false} />
|
86
|
+
</ButtonGroup>
|
87
|
+
<ButtonGroup align='end'>
|
88
|
+
<Button text='Something' onClick={()=> false} />
|
89
|
+
<Button text='Else' onClick={()=> false} />
|
90
|
+
<Divider border={true} />
|
91
|
+
<Button text='Cancel' onClick={()=> false} />
|
92
|
+
<Button text='Save' type='primary' onClick={()=> false} />
|
93
|
+
<Divider size="mini" />
|
94
|
+
<ButtonGroup subgroup={true} spaces='no-space'>
|
95
|
+
<NavButton icon='list-plus' onClick={()=> false} />
|
96
|
+
<NavButton icon='dots-vertical' onClick={()=> false} />
|
97
|
+
</ButtonGroup>
|
98
|
+
</ButtonGroup>
|
99
|
+
</SubNav>
|
100
|
+
|
101
|
+
<br />
|
102
|
+
|
103
|
+
<SubNav color='darker' zIndex={2}>
|
104
|
+
<ButtonGroup align='start' padded={true}>
|
105
|
+
<Button text='Something' onClick={()=> false} />
|
106
|
+
<Button text='Else' onClick={()=> false} />
|
107
|
+
<Divider border={true} />
|
108
|
+
<Button text='Cancel' onClick={()=> false} />
|
109
|
+
<Button text='Save' type='primary' onClick={()=> false} />
|
110
|
+
</ButtonGroup>
|
111
|
+
</SubNav>
|
112
|
+
|
113
|
+
<br />
|
114
|
+
|
115
|
+
<SubNav color='blueGreyDarker' zIndex={1}>
|
116
|
+
<ButtonGroup align='center'>
|
117
|
+
<Button text='One' onClick={()=> false} />
|
118
|
+
<Button text='Two' onClick={()=> false} />
|
119
|
+
<Divider border={true} />
|
120
|
+
<Button text='Three' onClick={()=> false} />
|
121
|
+
<Button text='Four' onClick={()=> false} />
|
122
|
+
<Divider border={true} />
|
123
|
+
<Button text='Five' onClick={()=> false} />
|
124
|
+
<Button text='Six' onClick={()=> false} />
|
125
|
+
</ButtonGroup>
|
126
|
+
</SubNav>
|
88
127
|
`}
|
89
128
|
</Markup.ReactMarkupCode>
|
90
129
|
</Markup.ReactMarkup>
|
130
|
+
|
131
|
+
<h3 className="docs-page__h3">Props</h3>
|
132
|
+
<PropsList>
|
133
|
+
<Prop name='color' isRequired={false} type='light | darker | blueGrey | blueGreyDarker' default='light' description='Background colour of the SubNav component.'/>
|
134
|
+
<Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All child elements will inherit the theme of the SubNav if it is set.'/>
|
135
|
+
<Prop name='zIndex' isRequired={true} type='number' default='1000' description='Increase the default z-index value (1000) by the specified amount.'/>
|
136
|
+
<Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles.'/>
|
137
|
+
</PropsList>
|
91
138
|
</section>
|
92
139
|
);
|
93
140
|
}
|
@@ -5,14 +5,26 @@ import { Tag, Prop, PropsList } from '../../../app-typescript';
|
|
5
5
|
|
6
6
|
interface ITag{
|
7
7
|
tags: Array<any>;
|
8
|
+
tags2: Array<any>;
|
8
9
|
}
|
9
10
|
export default class TagDoc extends React.Component<{}, ITag> {
|
10
11
|
constructor(props){
|
11
12
|
super(props);
|
12
13
|
this.state = {
|
13
|
-
tags: [
|
14
|
+
tags: [
|
15
|
+
{text: 'This is a tag'},
|
16
|
+
{text: 'This is another tag', shade:'darker'},
|
17
|
+
{text: 'Inverse tag', shade:'inverse'},
|
18
|
+
{text: 'Lorem ipsum', shade:'highlight1'},
|
19
|
+
{text: 'Dolor amet', shade:'highlight2', shape:'square'},
|
20
|
+
{text: 'Read only tag', readOnly: true}
|
21
|
+
],
|
22
|
+
tags2: [
|
23
|
+
{text: 'Tag with label', label: 'Label'},
|
24
|
+
],
|
14
25
|
}
|
15
26
|
this.handleClick=this.handleClick.bind(this);
|
27
|
+
this.handleClick2=this.handleClick2.bind(this);
|
16
28
|
}
|
17
29
|
|
18
30
|
handleClick(i:number){
|
@@ -22,6 +34,14 @@ export default class TagDoc extends React.Component<{}, ITag> {
|
|
22
34
|
tags: newTags
|
23
35
|
});
|
24
36
|
}
|
37
|
+
|
38
|
+
handleClick2(i:number){
|
39
|
+
let newTags2 = clone(this.state.tags2);
|
40
|
+
newTags2.splice(i, 1);
|
41
|
+
this.setState({
|
42
|
+
tags2: newTags2
|
43
|
+
});
|
44
|
+
}
|
25
45
|
render() {
|
26
46
|
return (
|
27
47
|
<section className="docs-page__container">
|
@@ -37,7 +57,12 @@ export default class TagDoc extends React.Component<{}, ITag> {
|
|
37
57
|
{this.state.tags.map((tag,index)=>{
|
38
58
|
return (
|
39
59
|
<React.Fragment key={index}>
|
40
|
-
<Tag keyValue={index}
|
60
|
+
<Tag keyValue={index}
|
61
|
+
text={tag.text}
|
62
|
+
shade={tag.shade}
|
63
|
+
shape={tag.shape}
|
64
|
+
readOnly={tag.readOnly}
|
65
|
+
onClick={()=>this.handleClick(index)}/>
|
41
66
|
</React.Fragment>
|
42
67
|
)
|
43
68
|
})}
|
@@ -46,19 +71,46 @@ export default class TagDoc extends React.Component<{}, ITag> {
|
|
46
71
|
<Markup.ReactMarkupCode>{`
|
47
72
|
<Tag text='This is a tag' onClick={()=>false}/>
|
48
73
|
<Tag text='This is a another tag' shade='darker' onClick={()=>false}/>
|
74
|
+
<Tag text='Inverse tag' shade='inverse' onClick={()=>false}/>
|
49
75
|
<Tag text='Lorem ipsum' shade='highlight1' onClick={()=>false}/>
|
50
76
|
<Tag text='Dolor amet' shade='highlight2' shape='square' onClick={()=>false}/>
|
77
|
+
<Tag text='Read only tag' readOnly={trye} onClick={()=>false}/>
|
51
78
|
|
52
79
|
`}
|
53
80
|
</Markup.ReactMarkupCode>
|
54
81
|
</Markup.ReactMarkup>
|
55
82
|
|
83
|
+
<Markup.ReactMarkup>
|
84
|
+
<Markup.ReactMarkupPreview>
|
85
|
+
<div className='docs-page__content-row'>
|
86
|
+
{this.state.tags2.map((tag,index)=>{
|
87
|
+
return (
|
88
|
+
<React.Fragment key={index}>
|
89
|
+
<Tag keyValue={index}
|
90
|
+
text={tag.text}
|
91
|
+
label={tag.label}
|
92
|
+
onClick={() => this.handleClick2(index)}/>
|
93
|
+
</React.Fragment>
|
94
|
+
)
|
95
|
+
})}
|
96
|
+
</div>
|
97
|
+
</Markup.ReactMarkupPreview>
|
98
|
+
<Markup.ReactMarkupCode>{`
|
99
|
+
<Tag text='Tag with label'
|
100
|
+
label='Label'
|
101
|
+
onClick={() => false} />
|
102
|
+
`}
|
103
|
+
</Markup.ReactMarkupCode>
|
104
|
+
</Markup.ReactMarkup>
|
105
|
+
|
56
106
|
<h3 className="docs-page__h3">Props</h3>
|
57
107
|
<PropsList>
|
58
108
|
<Prop name='text' isRequired={true} type='string' default='/' description='Tag text value.'/>
|
59
|
-
<Prop name='shade' isRequired={false} type='light | darker | highlight1 | highlight2 | inverse' default='light' description='Shade colour of tag'/>
|
60
|
-
<Prop name='shape' isRequired={false} type='round | square' default='round' description='
|
61
|
-
<Prop name='
|
109
|
+
<Prop name='shade' isRequired={false} type='light | darker | highlight1 | highlight2 | inverse' default='light' description='Shade colour of the tag.'/>
|
110
|
+
<Prop name='shape' isRequired={false} type='round | square' default='round' description='Shape of tag. Round (default) or square.'/>
|
111
|
+
<Prop name='readOnly' isRequired={false} type='boolean' default='false' description='Removes the option to delete the tag if set to true.'/>
|
112
|
+
<Prop name='keyValue' isRequired={false} type='number' default='/' description='Value of the tag key.'/>
|
113
|
+
<Prop name='label' isRequired={false} type='string' default='/' description='Text of label.'/>
|
62
114
|
</PropsList>
|
63
115
|
</section>
|
64
116
|
)
|
@@ -0,0 +1,134 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import * as Markup from '../../js/react';
|
3
|
+
import { PropsList, Prop, Text } from '../../../app-typescript';
|
4
|
+
|
5
|
+
interface IProps {
|
6
|
+
children?: React.ReactNode;
|
7
|
+
}
|
8
|
+
|
9
|
+
export default class TextDoc extends React.Component<IProps> {
|
10
|
+
render() {
|
11
|
+
return (
|
12
|
+
<section className='docs-page__container'>
|
13
|
+
<h2 className='docs-page__h2'>Text</h2>
|
14
|
+
|
15
|
+
<Markup.ReactMarkupCodePreview>{`
|
16
|
+
<Text>Cum sociis natoque penatibus et magnis dis parturient...</Text>
|
17
|
+
`}
|
18
|
+
</Markup.ReactMarkupCodePreview>
|
19
|
+
|
20
|
+
<p className="docs-page__paragraph">Text component.</p>
|
21
|
+
|
22
|
+
<Markup.ReactMarkup>
|
23
|
+
<Markup.ReactMarkupPreview>
|
24
|
+
<p className="docs-page__paragraph">// Sizes and alignments</p>
|
25
|
+
<div className='docs-page__content-row sd-margin-b--5'>
|
26
|
+
<Text size='x-small' style='italic'>
|
27
|
+
Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus ac cursus commodo,
|
28
|
+
tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis
|
29
|
+
ornare vel eu leo. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
30
|
+
</Text>
|
31
|
+
</div>
|
32
|
+
<div className='docs-page__content-row sd-margin-b--5'>
|
33
|
+
<Text align='end'>
|
34
|
+
Default size (small), align to end. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
|
35
|
+
Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
36
|
+
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
|
37
|
+
posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent
|
38
|
+
commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Morbi leo
|
39
|
+
risus, porta ac consectetur ac, vestibulum at eros.
|
40
|
+
</Text>
|
41
|
+
</div>
|
42
|
+
<div className='docs-page__content-row sd-margin-b--5'>
|
43
|
+
<Text size='medium' align='center'>
|
44
|
+
Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere
|
45
|
+
consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus,
|
46
|
+
porta ac consectetur ac, vestibulum at eros.
|
47
|
+
</Text>
|
48
|
+
</div>
|
49
|
+
<div className='docs-page__content-row sd-margin-b--5'>
|
50
|
+
<Text size='large' align='justify'>
|
51
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
|
52
|
+
est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
|
53
|
+
consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
|
54
|
+
sem lacinia quam venenatis vestibulum.
|
55
|
+
</Text>
|
56
|
+
</div>
|
57
|
+
|
58
|
+
<p className="docs-page__paragraph">// Variations</p>
|
59
|
+
<div className='docs-page__content-row sd-margin-b--5'>
|
60
|
+
<Text weight='light' size='medium'>
|
61
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
|
62
|
+
est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
|
63
|
+
consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
|
64
|
+
sem lacinia quam venenatis vestibulum.
|
65
|
+
</Text>
|
66
|
+
</div>
|
67
|
+
<div className='docs-page__content-row sd-margin-b--5'>
|
68
|
+
<Text fontStyle='serif' weight='strong' size='medium' color='light' align='center'>
|
69
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
|
70
|
+
est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
|
71
|
+
consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
|
72
|
+
sem lacinia quam venenatis vestibulum.
|
73
|
+
</Text>
|
74
|
+
</div>
|
75
|
+
<div className='docs-page__content-row sd-margin-b--5'>
|
76
|
+
<Text fontStyle='serif' weight='light' size='small' align='start'>
|
77
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
|
78
|
+
est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
|
79
|
+
consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
|
80
|
+
sem lacinia quam venenatis vestibulum.
|
81
|
+
</Text>
|
82
|
+
</div>
|
83
|
+
|
84
|
+
</Markup.ReactMarkupPreview>
|
85
|
+
<Markup.ReactMarkupCode>{`
|
86
|
+
// Sizes and alignments
|
87
|
+
|
88
|
+
<Text size='x-small' style='italic'>
|
89
|
+
Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus...
|
90
|
+
</Text>
|
91
|
+
|
92
|
+
<Text align='end'>
|
93
|
+
Default size (small), align to end. Praesent commodo cursus magna...
|
94
|
+
</Text>
|
95
|
+
|
96
|
+
<Text size='medium' align='center'>
|
97
|
+
Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque...
|
98
|
+
</Text>
|
99
|
+
|
100
|
+
<Text size='large' align='justify'>
|
101
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl...
|
102
|
+
</Text>
|
103
|
+
|
104
|
+
// Variations
|
105
|
+
|
106
|
+
<Text weight='light' size='medium'>
|
107
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
|
108
|
+
</Text>
|
109
|
+
|
110
|
+
<Text fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
|
111
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
|
112
|
+
</Text>
|
113
|
+
|
114
|
+
<Text className='' fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
|
115
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
|
116
|
+
</Text>
|
117
|
+
`}
|
118
|
+
</Markup.ReactMarkupCode>
|
119
|
+
</Markup.ReactMarkup>
|
120
|
+
|
121
|
+
<h3 className="docs-page__h3">Props</h3>
|
122
|
+
<PropsList>
|
123
|
+
<Prop name='weight' isRequired={false} type='light | normal | medium | strong' default='normal' description='Change the default font weight.'/>
|
124
|
+
<Prop name='size' isRequired={true} type='x-small | small | medium | large' default='small' description='Choose between four predefined font sizes.'/>
|
125
|
+
<Prop name='style' isRequired={false} type='normal | italic' default='normal' description='Change the default text style.'/>
|
126
|
+
<Prop name='align' isRequired={false} type='start | end | center | justify' default='start' description='Text-align'/>
|
127
|
+
<Prop name='fontStyle' isRequired={false} type='sans | serif' default='sans' description='Choose between the default – sans (Roboto) – and serif (Merriweather) font styles. '/>
|
128
|
+
<Prop name='color' isRequired={false} type='normal | light | lighter' default='normal' description='Choose a different text colour. Additional two lighter shades are available.'/>
|
129
|
+
<Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
|
130
|
+
</PropsList>
|
131
|
+
</section>
|
132
|
+
)
|
133
|
+
}
|
134
|
+
}
|