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.
Files changed (402) hide show
  1. package/app/img/spinner.svg +3 -0
  2. package/app/img/themes/theme-base.svg +1 -0
  3. package/app/img/themes/theme-contrast.svg +45 -0
  4. package/app/img/themes/theme-dark.svg +1 -0
  5. package/app/img/themes/theme-light.svg +1 -0
  6. package/app/index.js +1 -1
  7. package/app/scripts/modals.js +22 -9
  8. package/app/styles/_accessibility.scss +311 -4
  9. package/app/styles/_alerts.scss +57 -19
  10. package/app/styles/_avatar.scss +25 -1
  11. package/app/styles/_badge.scss +2 -2
  12. package/app/styles/_big-icon-font.scss +1 -1
  13. package/app/styles/_boxed-list.scss +38 -18
  14. package/app/styles/_buttons.scss +431 -332
  15. package/app/styles/_carousel.scss +17 -11
  16. package/app/styles/_design-tokens.scss +2 -0
  17. package/app/styles/_helpers.scss +186 -30
  18. package/app/styles/_icon-font.scss +1 -1
  19. package/app/styles/_labels.scss +12 -6
  20. package/app/styles/_loaders.scss +13 -0
  21. package/app/styles/_master-desk.scss +5 -5
  22. package/app/styles/_mixins.scss +13 -3
  23. package/app/styles/_modals.scss +4 -28
  24. package/app/styles/_normalize.scss +1 -0
  25. package/app/styles/_panel-info.scss +19 -14
  26. package/app/styles/_sd-tag-input.scss +104 -3
  27. package/app/styles/_simple-list.scss +39 -17
  28. package/app/styles/_spinner.scss +46 -0
  29. package/app/styles/_tabs.scss +6 -8
  30. package/app/styles/_tag-labels.scss +11 -2
  31. package/app/styles/_thumb-carousel.scss +11 -10
  32. package/app/styles/_toggle-box.scss +46 -12
  33. package/app/styles/_toggle-button.scss +42 -0
  34. package/app/styles/_tooltips.scss +3 -3
  35. package/app/styles/_variables.scss +0 -1
  36. package/app/styles/app.scss +9 -2
  37. package/app/styles/components/_card-item.scss +33 -21
  38. package/app/styles/components/_list-item.scss +9 -4
  39. package/app/styles/components/_sd-dropzone.scss +78 -0
  40. package/app/styles/components/_sd-grid-item.scss +2 -2
  41. package/app/styles/components/_sd-searchbar.scss +5 -98
  42. package/app/styles/components/_subnav.scss +83 -61
  43. package/app/styles/components/_theme-selector.scss +189 -0
  44. package/app/styles/design-tokens/_design-tokens-general.scss +77 -0
  45. package/app/styles/{variables → design-tokens}/_new-colors.scss +34 -20
  46. package/app/styles/dropdowns/_basic-dropdown.scss +30 -3
  47. package/app/styles/editor/_editor-buttons.scss +54 -0
  48. package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
  49. package/app/styles/form-elements/_checkbox.scss +85 -58
  50. package/app/styles/form-elements/_forms-general.scss +90 -14
  51. package/app/styles/form-elements/_inputs.scss +22 -3
  52. package/app/styles/form-elements/_select-grid.scss +79 -0
  53. package/app/styles/grids/_basic-grid.scss +52 -26
  54. package/app/styles/grids/_grid-layout.scss +35 -21
  55. package/app/styles/grids/_layout-grid.scss +4 -4
  56. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  57. package/app/styles/interface-elements/_side-panel.scss +87 -58
  58. package/app/styles/layout/_basic-layout.scss +1 -4
  59. package/app/styles/layout/_container.scss +32 -0
  60. package/app/styles/layout/_editor.scss +306 -0
  61. package/app/styles/menus/_sd-left-navigation.scss +14 -2
  62. package/app/styles/menus/_sd-sidebar-menu.scss +102 -9
  63. package/app/styles/pr-superdesk-theme.scss +3 -0
  64. package/app/styles/primereact/_pr-datepicker.scss +58 -7
  65. package/app/styles/primereact/_pr-dropdown.scss +157 -8
  66. package/app/styles/primereact/_pr-general.scss +4 -0
  67. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  68. package/app/styles/variables/_colors.scss +2 -452
  69. package/app/styles/variables/_dimensions.scss +85 -1
  70. package/app/styles/variables/_form-elements.scss +0 -2
  71. package/app-typescript/components/Alert.tsx +16 -1
  72. package/app-typescript/components/Avatar.tsx +21 -0
  73. package/app-typescript/components/Button.tsx +7 -1
  74. package/app-typescript/components/ButtonGroup.tsx +5 -4
  75. package/app-typescript/components/Carousel.tsx +1 -1
  76. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  77. package/app-typescript/components/CheckGroup.tsx +2 -1
  78. package/app-typescript/components/Checkbox.tsx +7 -3
  79. package/app-typescript/components/CheckboxButton.tsx +9 -2
  80. package/app-typescript/components/DatePicker.tsx +6 -2
  81. package/app-typescript/components/DropZone.tsx +89 -0
  82. package/app-typescript/components/Dropdown.tsx +9 -1
  83. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  84. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  85. package/app-typescript/components/Form/FormItem.tsx +20 -0
  86. package/app-typescript/components/Form/FormLabel.tsx +22 -0
  87. package/app-typescript/components/Form/FormRow.tsx +40 -0
  88. package/app-typescript/components/Form/FormText.tsx +15 -0
  89. package/app-typescript/components/Form/index.tsx +5 -0
  90. package/app-typescript/components/IconButton.tsx +26 -12
  91. package/app-typescript/components/IconPicker.tsx +277 -0
  92. package/app-typescript/components/Input.tsx +41 -8
  93. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  94. package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
  95. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  96. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  97. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  98. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  99. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  100. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
  101. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  102. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  103. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  104. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +38 -0
  105. package/app-typescript/components/Layouts/AuthoringMain.tsx +46 -0
  106. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  107. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  108. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +15 -0
  109. package/app-typescript/components/Layouts/Container.tsx +30 -0
  110. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  111. package/app-typescript/components/Layouts/LayoutContainer.tsx +18 -0
  112. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  113. package/app-typescript/components/Layouts/MainPanel.tsx +22 -0
  114. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  115. package/app-typescript/components/Layouts/Panel.tsx +207 -0
  116. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  117. package/app-typescript/components/Layouts/index.tsx +25 -0
  118. package/app-typescript/components/LeftMenu.tsx +123 -49
  119. package/app-typescript/components/ListItemLoader.tsx +30 -0
  120. package/app-typescript/components/Lists/BoxedList.tsx +133 -0
  121. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  122. package/app-typescript/components/Lists/index.tsx +2 -0
  123. package/app-typescript/components/Modal.tsx +1 -1
  124. package/app-typescript/components/MultiSelect.tsx +69 -0
  125. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  126. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  127. package/app-typescript/components/Navigation/SideBarTabs.tsx +77 -0
  128. package/app-typescript/components/Navigation/index.tsx +3 -0
  129. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  130. package/app-typescript/components/RadioGroup.tsx +69 -0
  131. package/app-typescript/components/Select.tsx +12 -4
  132. package/app-typescript/components/SelectGrid.tsx +233 -0
  133. package/app-typescript/components/Skeleton.tsx +48 -0
  134. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  135. package/app-typescript/components/Spinner.tsx +32 -0
  136. package/app-typescript/components/SubNav.tsx +25 -4
  137. package/app-typescript/components/Switch.tsx +34 -12
  138. package/app-typescript/components/Tag.tsx +31 -7
  139. package/app-typescript/components/Text/Heading.tsx +67 -0
  140. package/app-typescript/components/Text/Text.tsx +36 -0
  141. package/app-typescript/components/ThemeSelector.tsx +113 -0
  142. package/app-typescript/components/Togglebox.tsx +8 -6
  143. package/app-typescript/components/TreeSelect.tsx +330 -0
  144. package/app-typescript/index.ts +19 -3
  145. package/dist/avatar-2.jpg +0 -0
  146. package/dist/avatar-3.jpg +0 -0
  147. package/dist/avatar-4.jpg +0 -0
  148. package/dist/avatar-5.jpg +0 -0
  149. package/dist/avatar-6.jpg +0 -0
  150. package/dist/components/basic-grid.html +1 -1
  151. package/dist/components/checkbox.html +1 -1
  152. package/dist/components/modals.html +1 -0
  153. package/dist/examples.bundle.css +99 -1225
  154. package/dist/examples.bundle.js +24704 -15626
  155. package/dist/playgrounds/boxed-list.html +1 -1
  156. package/dist/playgrounds/cards.html +9 -4
  157. package/dist/playgrounds/editor-3-test.html +15 -0
  158. package/dist/playgrounds/form-layout.html +9 -7
  159. package/dist/playgrounds/master-desk.html +1 -3
  160. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  161. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  162. package/dist/playgrounds/react-playgrounds/Index.tsx +4 -1
  163. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  164. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  165. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
  166. package/dist/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  167. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +8 -79
  168. package/dist/react/Alerts.tsx +91 -18
  169. package/dist/react/Avatar.tsx +314 -127
  170. package/dist/react/BoxedList.tsx +362 -0
  171. package/dist/react/ButtonGroups.tsx +66 -65
  172. package/dist/react/Buttons.tsx +65 -113
  173. package/dist/react/Carousel.tsx +2 -3
  174. package/dist/react/Checkboxs.tsx +66 -25
  175. package/dist/react/Container.tsx +143 -0
  176. package/dist/react/DropZone.tsx +103 -0
  177. package/dist/react/Heading.tsx +106 -0
  178. package/dist/react/IconButtons.tsx +51 -21
  179. package/dist/react/IconFont.tsx +7 -6
  180. package/dist/react/IconPicker.tsx +65 -0
  181. package/dist/react/Index.tsx +100 -19
  182. package/dist/react/Inputs.tsx +9 -3
  183. package/dist/react/LeftNavigations.tsx +161 -9
  184. package/dist/react/ListItems.tsx +34 -0
  185. package/dist/react/Modal.tsx +7 -7
  186. package/dist/react/MultiSelect.tsx +193 -0
  187. package/dist/react/NavButtons.tsx +4 -4
  188. package/dist/react/Panel.tsx +366 -0
  189. package/dist/react/QuickNavigationBar.tsx +142 -0
  190. package/dist/react/RadioGroup.tsx +351 -0
  191. package/dist/react/SelectGrid.tsx +121 -0
  192. package/dist/react/Selects.tsx +2 -0
  193. package/dist/react/SimpleList.tsx +148 -0
  194. package/dist/react/SubNav.tsx +65 -18
  195. package/dist/react/Tags.tsx +57 -5
  196. package/dist/react/Text.tsx +134 -0
  197. package/dist/react/TreeSelect.tsx +178 -0
  198. package/dist/react.html +4 -0
  199. package/dist/superdesk-ui.bundle.css +26706 -20044
  200. package/dist/superdesk-ui.bundle.js +8456 -3426
  201. package/dist/vendor.bundle.js +13677 -13655
  202. package/examples/css/docs-page.css +98 -27
  203. package/examples/img/avatar-2.jpg +0 -0
  204. package/examples/img/avatar-3.jpg +0 -0
  205. package/examples/img/avatar-4.jpg +0 -0
  206. package/examples/img/avatar-5.jpg +0 -0
  207. package/examples/img/avatar-6.jpg +0 -0
  208. package/examples/index.js +16 -0
  209. package/examples/pages/components/basic-grid.html +1 -1
  210. package/examples/pages/components/checkbox.html +1 -1
  211. package/examples/pages/components/modals.html +1 -0
  212. package/examples/pages/playgrounds/boxed-list.html +1 -1
  213. package/examples/pages/playgrounds/cards.html +9 -4
  214. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  215. package/examples/pages/playgrounds/form-layout.html +9 -7
  216. package/examples/pages/playgrounds/master-desk.html +1 -3
  217. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  218. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  219. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +4 -1
  220. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  221. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  222. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
  223. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  224. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +8 -79
  225. package/examples/pages/react/Alerts.tsx +91 -18
  226. package/examples/pages/react/Avatar.tsx +314 -127
  227. package/examples/pages/react/BoxedList.tsx +362 -0
  228. package/examples/pages/react/ButtonGroups.tsx +66 -65
  229. package/examples/pages/react/Buttons.tsx +65 -113
  230. package/examples/pages/react/Carousel.tsx +2 -3
  231. package/examples/pages/react/Checkboxs.tsx +66 -25
  232. package/examples/pages/react/Container.tsx +143 -0
  233. package/examples/pages/react/DropZone.tsx +103 -0
  234. package/examples/pages/react/Heading.tsx +106 -0
  235. package/examples/pages/react/IconButtons.tsx +51 -21
  236. package/examples/pages/react/IconFont.tsx +7 -6
  237. package/examples/pages/react/IconPicker.tsx +65 -0
  238. package/examples/pages/react/Index.tsx +100 -19
  239. package/examples/pages/react/Inputs.tsx +9 -3
  240. package/examples/pages/react/LeftNavigations.tsx +161 -9
  241. package/examples/pages/react/ListItems.tsx +34 -0
  242. package/examples/pages/react/Modal.tsx +7 -7
  243. package/examples/pages/react/MultiSelect.tsx +193 -0
  244. package/examples/pages/react/NavButtons.tsx +4 -4
  245. package/examples/pages/react/Panel.tsx +366 -0
  246. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  247. package/examples/pages/react/RadioGroup.tsx +351 -0
  248. package/examples/pages/react/SelectGrid.tsx +121 -0
  249. package/examples/pages/react/Selects.tsx +2 -0
  250. package/examples/pages/react/SimpleList.tsx +148 -0
  251. package/examples/pages/react/SubNav.tsx +65 -18
  252. package/examples/pages/react/Tags.tsx +57 -5
  253. package/examples/pages/react/Text.tsx +134 -0
  254. package/examples/pages/react/TreeSelect.tsx +178 -0
  255. package/examples/pages/react.html +4 -0
  256. package/package.json +9 -5
  257. package/react/components/Alert.d.ts +3 -0
  258. package/react/components/Alert.js +9 -1
  259. package/react/components/Avatar.d.ts +9 -0
  260. package/react/components/Avatar.js +19 -1
  261. package/react/components/Button.d.ts +2 -0
  262. package/react/components/Button.js +4 -2
  263. package/react/components/ButtonGroup.d.ts +3 -2
  264. package/react/components/ButtonGroup.js +2 -2
  265. package/react/components/Carousel.js +1 -1
  266. package/react/components/CheckButtonGroup.d.ts +3 -1
  267. package/react/components/CheckButtonGroup.js +8 -2
  268. package/react/components/CheckGroup.d.ts +1 -0
  269. package/react/components/CheckGroup.js +1 -1
  270. package/react/components/Checkbox.d.ts +2 -1
  271. package/react/components/Checkbox.js +2 -2
  272. package/react/components/CheckboxButton.d.ts +1 -0
  273. package/react/components/CheckboxButton.js +2 -2
  274. package/react/components/DatePicker.js +7 -2
  275. package/react/components/DropZone.d.ts +25 -0
  276. package/react/components/DropZone.js +93 -0
  277. package/react/components/Dropdown.d.ts +1 -0
  278. package/react/components/Dropdown.js +3 -3
  279. package/react/components/Form/FormGroup.d.ts +13 -0
  280. package/react/components/Form/FormGroup.js +61 -0
  281. package/react/components/Form/FormItem.d.ts +9 -0
  282. package/react/components/Form/FormItem.js +54 -0
  283. package/react/components/Form/FormLabel.d.ts +10 -0
  284. package/react/components/Form/FormLabel.js +54 -0
  285. package/react/components/Form/FormRow.d.ts +17 -0
  286. package/react/components/Form/FormRow.js +62 -0
  287. package/react/components/Form/FormText.d.ts +8 -0
  288. package/react/components/Form/FormText.js +47 -0
  289. package/react/components/Form/index.d.ts +5 -0
  290. package/react/components/Form/index.js +12 -0
  291. package/react/components/IconButton.d.ts +9 -2
  292. package/react/components/IconButton.js +13 -5
  293. package/react/components/IconPicker.d.ts +24 -0
  294. package/react/components/IconPicker.js +283 -0
  295. package/react/components/Input.d.ts +20 -3
  296. package/react/components/Input.js +12 -3
  297. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  298. package/react/components/Layouts/AuthorinInnerSideBar.js +47 -0
  299. package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
  300. package/react/components/Layouts/AuthoringFrame.js +56 -0
  301. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  302. package/react/components/Layouts/AuthoringFrameContainer.js +47 -0
  303. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  304. package/react/components/Layouts/AuthoringFrameLeftBar.js +47 -0
  305. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  306. package/react/components/Layouts/AuthoringFrameMain.js +47 -0
  307. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  308. package/react/components/Layouts/AuthoringFrameNavBar.js +47 -0
  309. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  310. package/react/components/Layouts/AuthoringFrameOverlay.js +47 -0
  311. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
  312. package/react/components/Layouts/AuthoringFrameRightBar.js +47 -0
  313. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  314. package/react/components/Layouts/AuthoringFrameSidePanel.js +56 -0
  315. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  316. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +56 -0
  317. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  318. package/react/components/Layouts/AuthoringInnerBody.js +47 -0
  319. package/react/components/Layouts/AuthoringInnerHeader.d.ts +13 -0
  320. package/react/components/{RadioButton.js → Layouts/AuthoringInnerHeader.js} +20 -22
  321. package/react/components/Layouts/AuthoringMain.d.ts +12 -0
  322. package/react/components/Layouts/AuthoringMain.js +53 -0
  323. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  324. package/react/components/Layouts/AuthoringMainContainer.js +47 -0
  325. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  326. package/react/components/Layouts/AuthoringMainContent.js +47 -0
  327. package/react/components/Layouts/AuthoringMainToolBar.d.ts +8 -0
  328. package/react/components/Layouts/AuthoringMainToolBar.js +47 -0
  329. package/react/components/Layouts/Container.d.ts +14 -0
  330. package/react/components/Layouts/Container.js +60 -0
  331. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  332. package/react/components/Layouts/HeaderPanel.js +47 -0
  333. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  334. package/react/components/Layouts/LayoutContainer.js +47 -0
  335. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  336. package/react/components/Layouts/LeftPanel.js +54 -0
  337. package/react/components/Layouts/MainPanel.d.ts +10 -0
  338. package/react/components/Layouts/MainPanel.js +50 -0
  339. package/react/components/Layouts/PageLayout.d.ts +16 -0
  340. package/react/components/Layouts/PageLayout.js +64 -0
  341. package/react/components/Layouts/Panel.d.ts +65 -0
  342. package/react/components/Layouts/Panel.js +166 -0
  343. package/react/components/Layouts/RightPanel.d.ts +9 -0
  344. package/react/components/Layouts/RightPanel.js +47 -0
  345. package/react/components/Layouts/index.d.ts +24 -0
  346. package/react/components/Layouts/index.js +55 -0
  347. package/react/components/LeftMenu.d.ts +8 -3
  348. package/react/components/LeftMenu.js +55 -16
  349. package/react/components/ListItemLoader.d.ts +4 -0
  350. package/react/components/ListItemLoader.js +62 -0
  351. package/react/components/Lists/BoxedList.d.ts +36 -0
  352. package/react/components/Lists/BoxedList.js +137 -0
  353. package/react/components/Lists/SimpleList.d.ts +21 -0
  354. package/react/components/Lists/SimpleList.js +78 -0
  355. package/react/components/Lists/index.d.ts +2 -0
  356. package/react/components/Lists/index.js +9 -0
  357. package/react/components/Modal.js +1 -1
  358. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  359. package/react/components/Navigation/QuickNavBar.js +113 -0
  360. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  361. package/react/components/Navigation/SideBarMenu.js +77 -0
  362. package/react/components/Navigation/SideBarTabs.d.ts +22 -0
  363. package/react/components/Navigation/SideBarTabs.js +82 -0
  364. package/react/components/Navigation/index.d.ts +3 -0
  365. package/react/components/Navigation/index.js +8 -0
  366. package/react/components/RadioButtonGroup.d.ts +29 -0
  367. package/react/components/RadioButtonGroup.js +89 -0
  368. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  369. package/react/components/{Radio.js → RadioGroup.js} +15 -11
  370. package/react/components/Select.d.ts +3 -1
  371. package/react/components/Select.js +5 -3
  372. package/react/components/SelectGrid.d.ts +45 -0
  373. package/react/components/SelectGrid.js +179 -0
  374. package/react/components/Skeleton.d.ts +30 -0
  375. package/react/components/Skeleton.js +55 -0
  376. package/react/components/SlidingToolbar.d.ts +1 -1
  377. package/react/components/SlidingToolbar.js +11 -1
  378. package/react/components/Spinner.d.ts +11 -0
  379. package/react/components/Spinner.js +69 -0
  380. package/react/components/SubNav.d.ts +8 -1
  381. package/react/components/SubNav.js +22 -4
  382. package/react/components/Switch.d.ts +4 -1
  383. package/react/components/Switch.js +19 -7
  384. package/react/components/TabCustom.d.ts +0 -1
  385. package/react/components/Tag.d.ts +3 -2
  386. package/react/components/Tag.js +16 -5
  387. package/react/components/TagInput.d.ts +0 -1
  388. package/react/components/Text/Heading.d.ts +15 -0
  389. package/react/components/Text/Heading.js +77 -0
  390. package/react/components/Text/Text.d.ts +15 -0
  391. package/react/components/Text/Text.js +65 -0
  392. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  393. package/react/components/ThemeSelector.js +112 -0
  394. package/react/components/Togglebox.d.ts +1 -0
  395. package/react/components/Togglebox.js +9 -2
  396. package/react/index.d.ts +17 -3
  397. package/react/index.js +40 -4
  398. package/app/styles/variables/_design-tokens-general.scss +0 -136
  399. package/app-typescript/components/Radio.tsx +0 -57
  400. package/app-typescript/components/RadioButton.tsx +0 -57
  401. package/dist/react/Radios.tsx +0 -391
  402. package/examples/pages/react/Radios.tsx +0 -391
@@ -0,0 +1,622 @@
1
+ import * as React from 'react';
2
+ import * as Components from './components/Index';
3
+ import {
4
+ Button, ButtonGroup, IconButton, NavButton,
5
+ SubNav, SubNavDivider,
6
+ Dropdown,
7
+ Checkbox, CheckGroup, CheckButtonGroup, CheckboxButton, RadioGroup, RadioButtonGroup, Switch, SwitchGroup,
8
+ Input, Select, Option,
9
+ Label, Badge,
10
+ Icon,
11
+ Tooltip,
12
+ Tabs, TabLabel, TabContent, TabPanel,
13
+ AvatarWrapper, AvatarContentImage, AvatarContentText,
14
+ LeftMenu,
15
+ SimpleList, SimpleListItem,
16
+ Container,
17
+ Heading, Text,
18
+ Divider,
19
+ ThemeSelector,
20
+ Tag
21
+ } from '../../../../app-typescript/index';
22
+ import * as GridElements from '../../../../app-typescript/components/GridItem';
23
+ import * as Layout from '../../../../app-typescript/components/Layouts';
24
+ import * as Form from '../../../../app-typescript/components/Form';
25
+
26
+ import dummy_items from '../dummy-data/items';
27
+
28
+ interface IProps {
29
+ children?: React.ReactNode;
30
+ }
31
+
32
+ interface IState {
33
+ theme: 'dark' | 'light' | string;
34
+ itemType: string;
35
+ dropDownState: string;
36
+ openPreview: boolean;
37
+ openFilter: boolean;
38
+ itemSelected1: boolean;
39
+ itemSelected2: boolean;
40
+ itemSelected3: boolean;
41
+ value1: boolean;
42
+ value2: boolean;
43
+ value3: boolean;
44
+ value4: boolean;
45
+ value5: boolean;
46
+ value6: boolean;
47
+ value7: boolean;
48
+ value8: boolean;
49
+ value9: boolean;
50
+ value10: boolean;
51
+ value11: boolean;
52
+ value12: boolean;
53
+ radioValue1: string;
54
+ radioValue2: string;
55
+ radioValue3: string;
56
+ indexValue: number;
57
+ }
58
+
59
+ export class PersonalProfile extends React.Component<IProps, IState> {
60
+ constructor(props: IProps) {
61
+ super(props);
62
+ this.state = {
63
+ theme: 'light',
64
+ itemType: 'itemtype01',
65
+ dropDownState: '',
66
+ openPreview: false,
67
+ openFilter: false,
68
+ itemSelected1: false,
69
+ itemSelected2: false,
70
+ itemSelected3: false,
71
+ value1: false,
72
+ value2: true,
73
+ value3: true,
74
+ value4: false,
75
+ value5: true,
76
+ value6: true,
77
+ value7: false,
78
+ value8: false,
79
+ value9: false,
80
+ value10: false,
81
+ value11: true,
82
+ value12: true,
83
+ radioValue1: 'list',
84
+ radioValue2: 'grid',
85
+ radioValue3: 'list',
86
+ indexValue: 0,
87
+ }
88
+ this.handleFilter = this.handleFilter.bind(this);
89
+ this.handlePreview = this.handlePreview.bind(this);
90
+ this.handleTheme = this.handleTheme.bind(this);
91
+ this.handleClick=this.handleClick.bind(this);
92
+ }
93
+
94
+
95
+ handleFilter() {
96
+ this.setState((state) => ({
97
+ openFilter: !state.openFilter,
98
+ }));
99
+ }
100
+
101
+ handlePreview() {
102
+ this.setState((state) => ({
103
+ openPreview: !state.openPreview,
104
+ }));
105
+ }
106
+
107
+ handleTheme(newTheme: string) {
108
+ this.setState({
109
+ theme: newTheme
110
+ })
111
+ }
112
+
113
+ changeStatus(item: any, status: string) {
114
+ if (item.status.includes(status)) {
115
+ item.status.splice(item.status.indexOf(status), 1);
116
+ } else {
117
+ item.status.push(status);
118
+ }
119
+ }
120
+
121
+
122
+ handleClick = (number: number) => {
123
+ this.setState({
124
+ indexValue: number,
125
+ })
126
+ }
127
+
128
+ render() {
129
+ return (
130
+ <Components.Layout header='My Profile' theme={this.state.theme}>
131
+ <Components.LayoutContainer>
132
+ <Components.HeaderPanel>
133
+ <SubNav zIndex={2}>
134
+ <ButtonGroup align='start' spaces='no-space'>
135
+ <Tooltip text='User list' flow='right'>
136
+ <NavButton icon='arrow-left' onClick={() => false} />
137
+ </Tooltip>
138
+ </ButtonGroup>
139
+ <SubNavDivider width='medium' />
140
+ <AvatarWrapper size="medium">
141
+ <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
142
+ </AvatarWrapper>
143
+ <h2 className='subnav__page-title'>Jeffrey Lebowski</h2>
144
+ </SubNav>
145
+ <SubNav zIndex={1}>
146
+ <SubNavDivider width='small' />
147
+ <Tabs onClick={this.handleClick}>
148
+ <TabLabel label='Overview' indexValue={0}/>
149
+ <TabLabel label='Personal preferences' indexValue={1}/>
150
+ <TabLabel label='Privileges' indexValue={2}/>
151
+ </Tabs>
152
+
153
+ </SubNav>
154
+ </Components.HeaderPanel>
155
+ {/* TOOLBAR HEADER */}
156
+ <TabContent activePanel={this.state.indexValue}>
157
+ <TabPanel indexValue={0}>
158
+ <Layout.LeftPanel open={true}>
159
+ <Layout.Panel background='transparent' size='xx-small'>
160
+ <Layout.PanelContent>
161
+ <LeftMenu ariaLabel={'Left navigation'}
162
+ scrollSpy='#scrollContainer'
163
+ activeItemId='1'
164
+ style='blanc'
165
+ groups={[{ label: '', items: [
166
+ { id: '1', label: 'General info', ref:'profile'},
167
+ { id: '2', label: 'Password', ref: 'password' },
168
+ { id: '3', label: 'Default desk', ref: 'defaultDesk' },
169
+ { id: '4', label: 'Language', ref: 'language' },
170
+ { id: '5', label: 'Author info', ref: 'autorInfo' }
171
+ ]}]}
172
+ onSelect={() => {console.log('onSelect triggered')}} />
173
+ </Layout.PanelContent>
174
+ </Layout.Panel>
175
+ </Layout.LeftPanel>
176
+ {/* FILTER PANEL*/}
177
+ <Layout.MainPanel className='sd-padding--3' id='scrollContainer'>
178
+ <SimpleList density='comfortable' width='large'>
179
+ <SimpleListItem stacked={true} id='profile'>
180
+ <Container id="profile" direction='column' className='sd-radius--medium sd-panel-bg--gradient-1 sd-shadow--z2 sd-padding--3 sd-state--focus'>
181
+ <Container className='sd-flex-justify-space-between sd-margin-b--2'>
182
+ <Label text='Active' type='success' style='translucent' />
183
+ <Switch toolTipFlow='left' label={{text:'Toggle active', hidden: true}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
184
+ </Container>
185
+ <Container direction='column' className='sd-flex-align-items-center sd-margin-x--auto'>
186
+ <AvatarWrapper size="xx-large">
187
+ <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
188
+ </AvatarWrapper>
189
+ <Heading className='sd-margin-b--0-5 sd-margin-t--2' align='center' type='h2'>Jeffrey Lebowski</Heading>
190
+ <Text className='sd-margin-b--1 sd-font-size--medium' align='center' color='light' >the_dude</Text>
191
+ <Text className='sd-margin-b--1-5 sd-font-size--x-small' align='center' color='lighter'>Member since 24.04.2011</Text>
192
+ <ButtonGroup spaces='compact' align='center'>
193
+ <Tag text='Editor' shade='light' readOnly={true} onClick={()=>false} />
194
+ <Tag text='Author' shade='light' readOnly={true} onClick={()=>false} />
195
+ <Tag text='Administrator' shade='highlight1' readOnly={true} onClick={()=>false} />
196
+ </ButtonGroup>
197
+ </Container>
198
+ <Container direction='column' className='sd-margin-t--4'>
199
+ <Form.FormGroup marginBottom='3'>
200
+ <Form.FormItem>
201
+ <Input
202
+ label='First Name'
203
+ value='Jeffrey'
204
+ error='Error message'
205
+ required={false}
206
+ disabled={false}
207
+ invalid={false}
208
+ onChange={(value) => {}} />
209
+ </Form.FormItem>
210
+ </Form.FormGroup>
211
+ <Form.FormGroup marginBottom='3'>
212
+ <Form.FormItem>
213
+ <Input
214
+ label='Last Name'
215
+ value='Lebowski'
216
+ error='Error message'
217
+ required={false}
218
+ disabled={false}
219
+ invalid={false}
220
+ onChange={(value) => {}} />
221
+ </Form.FormItem>
222
+ </Form.FormGroup>
223
+ <Form.FormGroup marginBottom='4'>
224
+ <Form.FormItem>
225
+ <Input
226
+ label='Username'
227
+ value='the_dude'
228
+ error='Error message'
229
+ required={false}
230
+ disabled={false}
231
+ invalid={false}
232
+ onChange={(value) => {}} />
233
+ </Form.FormItem>
234
+ </Form.FormGroup>
235
+
236
+
237
+ <Form.FormGroup marginBottom='3'>
238
+ <Form.FormItem>
239
+ <Input
240
+ label='Email'
241
+ value='jeffrey.lebowski@bloodsimple.org'
242
+ error='Error message'
243
+ required={false}
244
+ disabled={false}
245
+ invalid={false}
246
+ onChange={(value) => {}} />
247
+ </Form.FormItem>
248
+ </Form.FormGroup>
249
+ <Form.FormGroup marginBottom='3'>
250
+ <Form.FormItem>
251
+ <Input
252
+ label='Phone number'
253
+ value='+381 64 155 22 55'
254
+ error='Error message'
255
+ required={false}
256
+ disabled={false}
257
+ invalid={false}
258
+ onChange={(value) => {}} />
259
+ </Form.FormItem>
260
+ </Form.FormGroup>
261
+ <Form.FormGroup marginBottom='4'>
262
+ <Form.FormItem>
263
+ <Select
264
+ label='Role'
265
+ value='Select user role'
266
+ required={false}
267
+ disabled={false}
268
+ invalid={false}
269
+ onChange={(value) => {}}>
270
+ <Option>Editor</Option>
271
+ <Option>Journalist</Option>
272
+ <Option>Photographer</Option>
273
+ <Option>Freelancer</Option>
274
+ <Option>Journalist Assistant</Option>
275
+ </Select>
276
+ </Form.FormItem>
277
+ </Form.FormGroup>
278
+ <CheckGroup orientation='vertical'>
279
+ <Checkbox checked={this.state.value11} label={{text:'Administrator'}}
280
+ onChange={(value) => this.setState(() => ({ value11: value }))} />
281
+ <Checkbox checked={this.state.value12} label={{text:'Author'}}
282
+ onChange={(value) => this.setState(() => ({ value12: value }))} />
283
+ </CheckGroup>
284
+ </Container>
285
+ </Container>
286
+ </SimpleListItem>
287
+ <SimpleListItem stacked={true} id='password'>
288
+ <Heading type='h3'>Password</Heading>
289
+ <Container className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
290
+ <ButtonGroup align='center'>
291
+ <Button style='hollow' type='primary' text='Change password' onClick={()=> false} />
292
+ </ButtonGroup>
293
+ </Container>
294
+ </SimpleListItem>
295
+ <SimpleListItem stacked={true} id='defaultDesk' >
296
+ <Heading type='h3'>Default desk</Heading>
297
+ <Container className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
298
+ <Form.FormGroup inlineLabel={true} marginBottom='0'>
299
+ <Form.FormItem>
300
+ <Select
301
+ label='Default desk'
302
+ value='This is some value'
303
+ labelHidden={true}
304
+ required={false}
305
+ disabled={false}
306
+ invalid={false}
307
+ onChange={(value) => {}}>
308
+ <Option>International</Option>
309
+ <Option>Kulture</Option>
310
+ <Option>National</Option>
311
+ <Option>News</Option>
312
+ <Option>Politics</Option>
313
+ <Option>Sports</Option>
314
+ </Select>
315
+ </Form.FormItem>
316
+ </Form.FormGroup>
317
+ </Container>
318
+ </SimpleListItem>
319
+ <SimpleListItem stacked={true} id='language'>
320
+ <Heading type='h3'>Language</Heading>
321
+ <Container className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
322
+ <Form.FormGroup inlineLabel={true} marginBottom='0'>
323
+ <Form.FormItem>
324
+ <Select
325
+ label='Language'
326
+ value='English'
327
+ labelHidden={true}
328
+ required={false}
329
+ disabled={false}
330
+ invalid={false}
331
+ onChange={(value) => {}}>
332
+ <Option>English</Option>
333
+ <Option>German</Option>
334
+ <Option>French</Option>
335
+ <Option>Serbian</Option>
336
+ </Select>
337
+ </Form.FormItem>
338
+ </Form.FormGroup>
339
+ </Container>
340
+ </SimpleListItem>
341
+ <SimpleListItem stacked={true} id='autorInfo'>
342
+ <h3 className='sd-font-size--medium'>Author info</h3>
343
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
344
+ <Form.FormGroup marginBottom='3'>
345
+ <Form.FormItem>
346
+ <Input
347
+ label='Sign-Off'
348
+ value='the_dude'
349
+ error='Error message'
350
+ required={false}
351
+ disabled={false}
352
+ invalid={false}
353
+ onChange={(value) => {}} />
354
+ </Form.FormItem>
355
+ </Form.FormGroup>
356
+ <Form.FormGroup marginBottom='3'>
357
+ <Form.FormItem>
358
+ <Input
359
+ label='Byline'
360
+ value='Jeffrey Lebowski'
361
+ error='Error message'
362
+ required={false}
363
+ disabled={false}
364
+ invalid={false}
365
+ onChange={(value) => {}} />
366
+ </Form.FormItem>
367
+ </Form.FormGroup>
368
+ <Form.FormGroup marginBottom='3'>
369
+ <Form.FormItem>
370
+ <Input
371
+ label='Job Title'
372
+ value='the_dude'
373
+ error='Error message'
374
+ required={false}
375
+ disabled={false}
376
+ invalid={false}
377
+ onChange={(value) => {}} />
378
+ </Form.FormItem>
379
+ </Form.FormGroup>
380
+ <Form.FormGroup marginBottom='4'>
381
+ <Form.FormItem>
382
+ <Input
383
+ label='Biography'
384
+ value='the_dude'
385
+ error='Error message'
386
+ required={false}
387
+ disabled={false}
388
+ invalid={false}
389
+ onChange={(value) => {}} />
390
+ </Form.FormItem>
391
+ </Form.FormGroup>
392
+ <Heading className='sd-margin-t--3 sd-margin-b--2' type='h4'>Social media</Heading>
393
+ <Form.FormGroup marginBottom='3'>
394
+ <Form.FormItem>
395
+ <Input
396
+ label='Facebook'
397
+ value='the_dude'
398
+ error='Error message'
399
+ required={false}
400
+ disabled={false}
401
+ invalid={false}
402
+ onChange={(value) => {}} />
403
+ </Form.FormItem>
404
+ </Form.FormGroup>
405
+ <Form.FormGroup marginBottom='3'>
406
+ <Form.FormItem>
407
+ <Input
408
+ label='Instagram'
409
+ value='the_dude'
410
+ error='Error message'
411
+ required={false}
412
+ disabled={false}
413
+ invalid={false}
414
+ onChange={(value) => {}} />
415
+ </Form.FormItem>
416
+ </Form.FormGroup>
417
+ <Form.FormGroup marginBottom='2'>
418
+ <Form.FormItem>
419
+ <Input
420
+ label='Twitter'
421
+ value='the_dude'
422
+ error='Error message'
423
+ required={false}
424
+ disabled={false}
425
+ invalid={false}
426
+ onChange={(value) => {}} />
427
+ </Form.FormItem>
428
+ </Form.FormGroup>
429
+
430
+ </Container>
431
+ </SimpleListItem>
432
+ </SimpleList>
433
+ </Layout.MainPanel>
434
+ {/* MAIN CONTENT (Monitoring) */}
435
+ <Components.RightPanel open={this.state.openPreview}>
436
+ </Components.RightPanel>
437
+ {/* PREVIEW PANEL*/}
438
+ <Components.OverlayPanel />
439
+ {/* OVERLAY PANEL (Send To) */}
440
+ </TabPanel>
441
+ <TabPanel indexValue={1}>
442
+ <Layout.LeftPanel open={true}>
443
+ <Layout.Panel background='transparent' size='xx-small'>
444
+ <Layout.PanelContent>
445
+
446
+ <LeftMenu ariaLabel={'Left navigation'}
447
+ activeItemId='#1'
448
+ style='blanc'
449
+ groups={[{ label: '', items: [
450
+ { id: '1', label: 'Feature preview' },
451
+ { id: '2', label: 'View formats' },
452
+ { id: '3', label: 'Notifications' },
453
+ { id: '4', label: 'Article defaults' },
454
+ { id: '5', label: 'Categories' },
455
+ { id: '6', label: 'Desks' },
456
+ { id: '7', label: 'Vocabulary values' },
457
+ { id: '8', label: 'Appearance' }
458
+ ]}]}
459
+ onSelect={() => false} />
460
+ </Layout.PanelContent>
461
+ </Layout.Panel>
462
+ </Layout.LeftPanel>
463
+ {/* FILTER PANEL*/}
464
+ <Layout.MainPanel className='sd-padding--3'>
465
+ <SimpleList density='comfortable' width='large'>
466
+ <SimpleListItem stacked={true}>
467
+ <Heading type='h3'>Feature preview</Heading>
468
+ <Container className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
469
+ <Switch label={{text:'Enable Feature Preview'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
470
+ </Container>
471
+ </SimpleListItem>
472
+ <SimpleListItem stacked={true}>
473
+ <Heading type='h3'>View formats</Heading>
474
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
475
+ <Text color='light' className=''>Select the prefered default view format for specific areas of Superdesks interface.
476
+ The sections will always open in the selected view format, but can be always changed using the view option dropdown in each section.
477
+ </Text>
478
+ <SimpleList density='compact' border={true} className='sd-margin-t--3 sd-margin-b--0 sd-padding-b--0' >
479
+ <SimpleListItem stacked={true}>
480
+ <Heading type='h4'>Archive</Heading>
481
+ <RadioButtonGroup value={this.state.radioValue1} options={[
482
+ {label: "Grid view", value: "grid", icon: "th"},
483
+ {label: "List view", value: "list", icon: "th-list"},
484
+ ]} onChange={(value) => this.setState(() => ({ radioValue1: value }))} />
485
+ </SimpleListItem>
486
+ <SimpleListItem stacked={true}>
487
+ <Heading type='h4'>Contacts</Heading>
488
+ <RadioButtonGroup value={this.state.radioValue2} options={[
489
+ {label: "Grid view", value: "grid", icon: "th"},
490
+ {label: "List view", value: "list", icon: "th-list"},
491
+ ]} onChange={(value) => this.setState(() => ({ radioValue2: value }))} />
492
+ </SimpleListItem>
493
+ <SimpleListItem stacked={true}>
494
+ <Heading type='h4'>Archive</Heading>
495
+ <RadioButtonGroup value={this.state.radioValue3} options={[
496
+ {label: "Grid view", value: "grid", icon: "th"},
497
+ {label: "List view", value: "list", icon: "th-list"},
498
+ {label: "Swimlane view", value: "kanban", icon: "kanban-view"},
499
+ ]} onChange={(value) => this.setState(() => ({ radioValue3: value }))} />
500
+ </SimpleListItem>
501
+
502
+ </SimpleList>
503
+ </Container>
504
+ </SimpleListItem>
505
+ <SimpleListItem stacked={true}>
506
+ <Heading type='h3'>Notifications</Heading>
507
+ <Container className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
508
+ <SwitchGroup>
509
+ <Switch label={{text:'Send notifications via email'}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
510
+ <Switch label={{text:'Allow Desktop Notifications'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} />
511
+ </SwitchGroup>
512
+ </Container>
513
+ </SimpleListItem>
514
+ <SimpleListItem stacked={true}>
515
+ <h3 className='sd-font-size--medium'>Article defaults</h3>
516
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
517
+ <Form.FormGroup>
518
+ <Form.FormItem>
519
+ <Input
520
+ label='Dateline / Located'
521
+ value=''
522
+ error='This is error message'
523
+ required={false}
524
+ disabled={false}
525
+ invalid={false}
526
+ onChange={(value) => {}} />
527
+ </Form.FormItem>
528
+ </Form.FormGroup>
529
+ <Form.FormGroup>
530
+ <Form.FormItem>
531
+ <Select
532
+ label='Place'
533
+ value='This is some value'
534
+ error='This is error message'
535
+ required={true}
536
+ disabled={false}
537
+ invalid={false}
538
+ onChange={(value) => {}}>
539
+ <Option>Select place</Option>
540
+ <Option>Option 1</Option>
541
+ <Option>Option 2</Option>
542
+ </Select>
543
+ </Form.FormItem>
544
+ </Form.FormGroup>
545
+ </Container>
546
+ </SimpleListItem>
547
+ <SimpleListItem stacked={true}>
548
+ <Heading type='h3'>Categories</Heading>
549
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
550
+ <Heading type='h4'>Preferred Categories</Heading>
551
+ <Text color='light' className=''>By selecting the categories you are interested in, the system will only display these in a
552
+ menu for setting the content item's categories (along with any of its existing categories).
553
+ </Text>
554
+ <ButtonGroup className='sd-margin-y--2'>
555
+ <Button text='All' style='text-only' type='primary' onClick={()=> false} />
556
+ <Divider border={true} />
557
+ <Button text='None' style='text-only' type='primary' onClick={()=> false} />
558
+ <Divider border={true} />
559
+ <Button text='Default' style='text-only' type='primary' onClick={()=> false} />
560
+ </ButtonGroup>
561
+ <CheckButtonGroup grid={true}>
562
+ <CheckboxButton checked={this.state.value1} label={{text:'Category one'}} onChange={(value) => this.setState(() => ({ value1: value }))} />
563
+ <CheckboxButton checked={this.state.value2} label={{text:'Category two'}} onChange={(value) => this.setState(() => ({ value2: value }))} />
564
+ <CheckboxButton checked={this.state.value3} label={{text:'Category three'}} onChange={(value) => this.setState(() => ({ value3: value }))} />
565
+ <CheckboxButton checked={this.state.value4} label={{text:'Category four'}} onChange={(value) => this.setState(() => ({ value4: value }))} />
566
+ </CheckButtonGroup>
567
+ </Container>
568
+ </SimpleListItem>
569
+ <SimpleListItem stacked={true}>
570
+ <Heading type='h3'>Desks</Heading>
571
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
572
+ <Heading type='h4'>Preferred Desks</Heading>
573
+ <Text color='light' className='sd-margin-b--2'>By selecting the desks as your preferred desks, they appear first in the order when
574
+ sending or publishing items.
575
+ </Text>
576
+ <CheckButtonGroup grid={true}>
577
+ <CheckboxButton checked={this.state.value5} label={{text:'Politics'}} onChange={(value) => this.setState(() => ({ value5: value }))} />
578
+ <CheckboxButton checked={this.state.value6} label={{text:'Sports'}} onChange={(value) => this.setState(() => ({ value6: value }))} />
579
+ <CheckboxButton checked={this.state.value7} label={{text:'News'}} onChange={(value) => this.setState(() => ({ value7: value }))} />
580
+ <CheckboxButton checked={this.state.value8} label={{text:'National'}} onChange={(value) => this.setState(() => ({ value8: value }))} />
581
+ <CheckboxButton checked={this.state.value9} label={{text:'International'}} onChange={(value) => this.setState(() => ({ value9: value }))} />
582
+ <CheckboxButton checked={this.state.value10} label={{text:'Kulture'}} onChange={(value) => this.setState(() => ({ value10: value }))} />
583
+ </CheckButtonGroup>
584
+ </Container>
585
+ </SimpleListItem>
586
+ <SimpleListItem stacked={true}>
587
+ <Heading type='h3'>Vocabulary values</Heading>
588
+ <Container direction='column' className='sd-radius--medium sd-padding--2 sd-border--medium sd-border-style--dashed'>
589
+ <Text color='lighter' size='medium' className='sd-margin--auto' align='center'>There are no vocabularies configured.</Text>
590
+ </Container>
591
+ </SimpleListItem>
592
+ <SimpleListItem stacked={true}>
593
+ <Heading type='h3'>Appearance</Heading>
594
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
595
+ <Heading type='h4'>Themes</Heading>
596
+ <Text color='light' className='sd-margin-b--2'>Change the appearance of Superdesk across the whole application.</Text>
597
+ <ThemeSelector size='small' options={[
598
+ {label: 'Light', value: 'light-ui', theme: 'light'},
599
+ {label: 'Dark', value: 'dark-ui', theme: 'dark'},
600
+ {label: 'High Contrast', value: 'high-contrast', theme: 'contrast-light', disabled: true},
601
+ ]} onChange={($event)=>{this.setState({theme: $event})}} value={this.state.theme} />
602
+ </Container>
603
+ </SimpleListItem>
604
+ </SimpleList>
605
+ </Layout.MainPanel>
606
+ {/* MAIN CONTENT (Monitoring) */}
607
+
608
+ <Layout.RightPanel open={this.state.openPreview}>
609
+ </Layout.RightPanel>
610
+ {/* PREVIEW PANEL*/}
611
+ </TabPanel>
612
+ <TabPanel indexValue={2}>
613
+ <Layout.MainPanel >
614
+ Privileges Content goes here
615
+ </Layout.MainPanel>
616
+ </TabPanel>
617
+ </TabContent>
618
+ </Components.LayoutContainer>
619
+ </Components.Layout >
620
+ );
621
+ }
622
+ }