superdesk-ui-framework 2.4.20 → 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 (443) 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 +2 -1
  7. package/app/scripts/modals.js +1 -0
  8. package/app/styles/_accessibility.scss +305 -3
  9. package/app/styles/_alerts.scss +227 -97
  10. package/app/styles/_avatar.scss +60 -33
  11. package/app/styles/_badge.scss +55 -26
  12. package/app/styles/_big-icon-font.scss +2 -1
  13. package/app/styles/_boxed-list.scss +41 -20
  14. package/app/styles/_buttons.scss +544 -1026
  15. package/app/styles/_carousel.scss +19 -13
  16. package/app/styles/_content-divider.scss +125 -0
  17. package/app/styles/_design-tokens.scss +2 -0
  18. package/app/styles/_drag-drop.scss +1 -1
  19. package/app/styles/_empty-states.scss +9 -1
  20. package/app/styles/_helpers.scss +650 -308
  21. package/app/styles/_icon-font.scss +5 -5
  22. package/app/styles/_icon-labels.scss +6 -7
  23. package/app/styles/_labels.scss +65 -52
  24. package/app/styles/_loaders.scss +28 -0
  25. package/app/styles/_master-desk.scss +11 -11
  26. package/app/styles/_mixins.scss +21 -13
  27. package/app/styles/_modals.scss +103 -116
  28. package/app/styles/_normalize.scss +1 -0
  29. package/app/styles/_panel-info.scss +21 -16
  30. package/app/styles/_popover.scss +2 -2
  31. package/app/styles/_pr-superdesk-theme.scss +4 -0
  32. package/app/styles/_publisher-styles.scss +182 -0
  33. package/app/styles/_reboot.scss +1 -0
  34. package/app/styles/_sd-tag-input.scss +184 -97
  35. package/app/styles/_simple-list.scss +41 -19
  36. package/app/styles/_tables.scss +5 -4
  37. package/app/styles/_tabs.scss +24 -75
  38. package/app/styles/_tag-labels.scss +47 -47
  39. package/app/styles/_thumb-carousel.scss +11 -10
  40. package/app/styles/_toggle-box.scss +52 -46
  41. package/app/styles/_toggle-button.scss +42 -0
  42. package/app/styles/_tooltips.scss +55 -98
  43. package/app/styles/_variables.scss +0 -1
  44. package/app/styles/app.scss +16 -1
  45. package/app/styles/components/_card-item.scss +41 -28
  46. package/app/styles/components/_list-item.scss +24 -94
  47. package/app/styles/components/_sd-circular-progress.scss +1 -1
  48. package/app/styles/components/_sd-collapse-box.scss +6 -33
  49. package/app/styles/components/_sd-comment-box.scss +1 -1
  50. package/app/styles/components/_sd-dropzone.scss +78 -0
  51. package/app/styles/components/_sd-grid-item.scss +78 -180
  52. package/app/styles/components/_sd-loader.scss +1 -16
  53. package/app/styles/components/_sd-media-carousel.scss +10 -12
  54. package/app/styles/components/_sd-photo-preview.scss +13 -13
  55. package/app/styles/components/_sd-searchbar.scss +43 -127
  56. package/app/styles/components/_sd-toaster.scss +13 -6
  57. package/app/styles/components/_subnav.scss +111 -117
  58. package/app/styles/components/_theme-selector.scss +189 -0
  59. package/app/styles/components/sd-slider.scss +11 -11
  60. package/app/styles/design-tokens/_design-tokens-general.scss +77 -0
  61. package/app/styles/design-tokens/_new-colors.scss +700 -0
  62. package/app/styles/dropdowns/_basic-dropdown.scss +119 -76
  63. package/app/styles/dropdowns/_navigation_dropdown.scss +7 -8
  64. package/app/styles/dropdowns/_nested-dropdown.scss +30 -16
  65. package/app/styles/dropdowns/_other_dropdown.scss +1 -1
  66. package/app/styles/editor/_editor-buttons.scss +54 -0
  67. package/app/styles/editor/_editor-themes.scss +437 -0
  68. package/app/styles/form-elements/_autocomplete.scss +12 -41
  69. package/app/styles/form-elements/_checkbox.scss +180 -245
  70. package/app/styles/form-elements/_forms-general.scss +92 -20
  71. package/app/styles/form-elements/_inputs.scss +96 -350
  72. package/app/styles/form-elements/_radio.scss +6 -6
  73. package/app/styles/form-elements/_select-grid.scss +16 -14
  74. package/app/styles/form-elements/_switch.scss +26 -47
  75. package/app/styles/grids/_basic-grid.scss +52 -26
  76. package/app/styles/grids/_grid-layout.scss +93 -58
  77. package/app/styles/grids/_layout-grid.scss +6 -6
  78. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  79. package/app/styles/interface-elements/_side-panel.scss +115 -83
  80. package/app/styles/layout/_basic-layout.scss +11 -19
  81. package/app/styles/layout/_container.scss +32 -0
  82. package/app/styles/layout/_editor.scss +306 -0
  83. package/app/styles/layout/_general.scss +4 -5
  84. package/app/styles/menus/_sd-content-navigation.scss +1 -1
  85. package/app/styles/menus/_sd-left-navigation.scss +34 -18
  86. package/app/styles/menus/_sd-sidebar-menu.scss +117 -25
  87. package/app/styles/menus/_sd-top-menu.scss +3 -3
  88. package/app/styles/primereact/_pr-datepicker.scss +60 -9
  89. package/app/styles/primereact/_pr-dialog.scss +99 -30
  90. package/app/styles/primereact/_pr-dropdown.scss +177 -19
  91. package/app/styles/primereact/_pr-general.scss +14 -7
  92. package/app/styles/primereact/_pr-menu.scss +9 -12
  93. package/app/styles/variables/_colors.scss +124 -516
  94. package/app/styles/variables/_dimensions.scss +82 -4
  95. package/app/styles/variables/_form-elements.scss +0 -2
  96. package/app/styles/variables/_typography.scss +2 -0
  97. package/app-typescript/components/Alert.tsx +16 -1
  98. package/app-typescript/components/Avatar.tsx +21 -0
  99. package/app-typescript/components/ButtonGroup.tsx +9 -5
  100. package/app-typescript/components/Carousel.tsx +1 -1
  101. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  102. package/app-typescript/components/CheckGroup.tsx +2 -1
  103. package/app-typescript/components/Checkbox.tsx +7 -3
  104. package/app-typescript/components/CheckboxButton.tsx +9 -2
  105. package/app-typescript/components/ContentDivider.tsx +34 -0
  106. package/app-typescript/components/DatePicker.tsx +6 -2
  107. package/app-typescript/components/DropZone.tsx +89 -0
  108. package/app-typescript/components/Dropdown.tsx +30 -11
  109. package/app-typescript/components/DropdownFirst.tsx +1 -1
  110. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  111. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  112. package/app-typescript/components/Form/FormItem.tsx +20 -0
  113. package/app-typescript/components/Form/FormLabel.tsx +22 -0
  114. package/app-typescript/components/Form/FormRow.tsx +40 -0
  115. package/app-typescript/components/Form/FormText.tsx +15 -0
  116. package/app-typescript/components/Form/index.tsx +5 -0
  117. package/app-typescript/components/IconButton.tsx +26 -12
  118. package/app-typescript/components/Input.tsx +38 -20
  119. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  120. package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
  121. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  122. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  123. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  124. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  125. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  126. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
  127. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  128. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  129. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  130. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +38 -0
  131. package/app-typescript/components/Layouts/AuthoringMain.tsx +46 -0
  132. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  133. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  134. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +15 -0
  135. package/app-typescript/components/Layouts/Container.tsx +30 -0
  136. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  137. package/app-typescript/components/Layouts/LayoutContainer.tsx +18 -0
  138. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  139. package/app-typescript/components/Layouts/MainPanel.tsx +22 -0
  140. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  141. package/app-typescript/components/Layouts/Panel.tsx +207 -0
  142. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  143. package/app-typescript/components/Layouts/index.tsx +25 -0
  144. package/app-typescript/components/LeftMenu.tsx +123 -49
  145. package/app-typescript/components/Lists/BoxedList.tsx +133 -0
  146. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  147. package/app-typescript/components/Lists/index.tsx +2 -0
  148. package/app-typescript/components/Modal.tsx +7 -2
  149. package/app-typescript/components/MultiSelect.tsx +69 -0
  150. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  151. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  152. package/app-typescript/components/Navigation/SideBarTabs.tsx +77 -0
  153. package/app-typescript/components/Navigation/index.tsx +3 -0
  154. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  155. package/app-typescript/components/RadioGroup.tsx +69 -0
  156. package/app-typescript/components/Select.tsx +7 -9
  157. package/app-typescript/components/SelectGrid.tsx +3 -3
  158. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  159. package/app-typescript/components/Spinner.tsx +0 -1
  160. package/app-typescript/components/SubNav.tsx +25 -4
  161. package/app-typescript/components/Switch.tsx +34 -12
  162. package/app-typescript/components/TabCustom.tsx +40 -89
  163. package/app-typescript/components/TabList.tsx +18 -43
  164. package/app-typescript/components/Tag.tsx +31 -8
  165. package/app-typescript/components/Text/Heading.tsx +67 -0
  166. package/app-typescript/components/Text/Text.tsx +36 -0
  167. package/app-typescript/components/ThemeSelector.tsx +113 -0
  168. package/app-typescript/components/TimePicker.tsx +3 -3
  169. package/app-typescript/components/Togglebox.tsx +8 -6
  170. package/app-typescript/components/TreeSelect.tsx +330 -0
  171. package/app-typescript/index.ts +16 -4
  172. package/dist/avatar-2.jpg +0 -0
  173. package/dist/avatar-3.jpg +0 -0
  174. package/dist/avatar-4.jpg +0 -0
  175. package/dist/avatar-5.jpg +0 -0
  176. package/dist/avatar-6.jpg +0 -0
  177. package/dist/avatar_64.png +0 -0
  178. package/dist/components/basic-grid.html +1 -1
  179. package/dist/components/checkbox.html +1 -1
  180. package/dist/examples.bundle.css +1933 -2393
  181. package/dist/examples.bundle.js +23583 -15736
  182. package/dist/index.html +9 -12
  183. package/dist/playgrounds/boxed-list.html +1 -1
  184. package/dist/playgrounds/cards.html +9 -4
  185. package/dist/playgrounds/editor-3-test.html +15 -0
  186. package/dist/playgrounds/form-layout.html +9 -7
  187. package/dist/playgrounds/layout-test-2.html +40 -36
  188. package/dist/playgrounds/list-item-test.html +1 -1
  189. package/dist/playgrounds/master-desk.html +1 -3
  190. package/dist/playgrounds/photo-desk.html +33 -33
  191. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  192. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  193. package/dist/playgrounds/react-playgrounds/Index.tsx +5 -1
  194. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  195. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  196. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
  197. package/dist/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  198. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +300 -0
  199. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  200. package/dist/playgrounds/tags-input.html +1 -1
  201. package/dist/react/Alerts.tsx +123 -23
  202. package/dist/react/Avatar.tsx +314 -127
  203. package/dist/react/BoxedList.tsx +362 -0
  204. package/dist/react/ButtonGroups.tsx +66 -65
  205. package/dist/react/Buttons.tsx +62 -247
  206. package/dist/react/Carousel.tsx +2 -3
  207. package/dist/react/Checkboxs.tsx +66 -25
  208. package/dist/react/Container.tsx +143 -0
  209. package/dist/react/ContentDivider.tsx +178 -0
  210. package/dist/react/DropZone.tsx +103 -0
  211. package/dist/react/Heading.tsx +106 -0
  212. package/dist/react/IconButtons.tsx +49 -42
  213. package/dist/react/Index.tsx +118 -11
  214. package/dist/react/Inputs.tsx +9 -24
  215. package/dist/react/LeftNavigations.tsx +161 -9
  216. package/dist/react/ListItems.tsx +3 -3
  217. package/dist/react/Modal.tsx +173 -19
  218. package/dist/react/MultiSelect.tsx +193 -0
  219. package/dist/react/NavButtons.tsx +4 -4
  220. package/dist/react/Panel.tsx +366 -0
  221. package/dist/react/QuickNavigationBar.tsx +142 -0
  222. package/dist/react/RadioGroup.tsx +351 -0
  223. package/dist/react/SelectWithTemplate.tsx +1 -1
  224. package/dist/react/Selects.tsx +3 -23
  225. package/dist/react/SimpleList.tsx +148 -0
  226. package/dist/react/SubNav.tsx +69 -20
  227. package/dist/react/Tabs.tsx +72 -248
  228. package/dist/react/Tags.tsx +45 -4
  229. package/dist/react/Text.tsx +134 -0
  230. package/dist/react/Tooltips.tsx +1 -1
  231. package/dist/react/TreeSelect.tsx +178 -0
  232. package/dist/react.html +4 -0
  233. package/dist/superdesk-ui.bundle.css +28522 -23998
  234. package/dist/superdesk-ui.bundle.js +7546 -3667
  235. package/dist/vendor.bundle.js +64 -68
  236. package/examples/css/docs-page.css +205 -46
  237. package/examples/img/avatar-2.jpg +0 -0
  238. package/examples/img/avatar-3.jpg +0 -0
  239. package/examples/img/avatar-4.jpg +0 -0
  240. package/examples/img/avatar-5.jpg +0 -0
  241. package/examples/img/avatar-6.jpg +0 -0
  242. package/examples/index.html +9 -12
  243. package/examples/index.js +20 -0
  244. package/examples/pages/components/basic-grid.html +1 -1
  245. package/examples/pages/components/checkbox.html +1 -1
  246. package/examples/pages/playgrounds/boxed-list.html +1 -1
  247. package/examples/pages/playgrounds/cards.html +9 -4
  248. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  249. package/examples/pages/playgrounds/form-layout.html +9 -7
  250. package/examples/pages/playgrounds/layout-test-2.html +40 -36
  251. package/examples/pages/playgrounds/list-item-test.html +1 -1
  252. package/examples/pages/playgrounds/master-desk.html +1 -3
  253. package/examples/pages/playgrounds/photo-desk.html +33 -33
  254. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  255. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  256. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +5 -1
  257. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  258. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  259. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
  260. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  261. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +300 -0
  262. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  263. package/examples/pages/playgrounds/tags-input.html +1 -1
  264. package/examples/pages/react/Alerts.tsx +123 -23
  265. package/examples/pages/react/Avatar.tsx +314 -127
  266. package/examples/pages/react/BoxedList.tsx +362 -0
  267. package/examples/pages/react/ButtonGroups.tsx +66 -65
  268. package/examples/pages/react/Buttons.tsx +62 -247
  269. package/examples/pages/react/Carousel.tsx +2 -3
  270. package/examples/pages/react/Checkboxs.tsx +66 -25
  271. package/examples/pages/react/Container.tsx +143 -0
  272. package/examples/pages/react/ContentDivider.tsx +178 -0
  273. package/examples/pages/react/DropZone.tsx +103 -0
  274. package/examples/pages/react/Heading.tsx +106 -0
  275. package/examples/pages/react/IconButtons.tsx +49 -42
  276. package/examples/pages/react/Index.tsx +118 -11
  277. package/examples/pages/react/Inputs.tsx +9 -24
  278. package/examples/pages/react/LeftNavigations.tsx +161 -9
  279. package/examples/pages/react/ListItems.tsx +3 -3
  280. package/examples/pages/react/Modal.tsx +173 -19
  281. package/examples/pages/react/MultiSelect.tsx +193 -0
  282. package/examples/pages/react/NavButtons.tsx +4 -4
  283. package/examples/pages/react/Panel.tsx +366 -0
  284. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  285. package/examples/pages/react/RadioGroup.tsx +351 -0
  286. package/examples/pages/react/SelectWithTemplate.tsx +1 -1
  287. package/examples/pages/react/Selects.tsx +3 -23
  288. package/examples/pages/react/SimpleList.tsx +148 -0
  289. package/examples/pages/react/SubNav.tsx +69 -20
  290. package/examples/pages/react/Tabs.tsx +72 -248
  291. package/examples/pages/react/Tags.tsx +45 -4
  292. package/examples/pages/react/Text.tsx +134 -0
  293. package/examples/pages/react/Tooltips.tsx +1 -1
  294. package/examples/pages/react/TreeSelect.tsx +178 -0
  295. package/examples/pages/react.html +4 -0
  296. package/images/avatar_64.png +0 -0
  297. package/package.json +10 -6
  298. package/react/components/Alert.d.ts +3 -0
  299. package/react/components/Alert.js +9 -1
  300. package/react/components/Avatar.d.ts +9 -0
  301. package/react/components/Avatar.js +19 -1
  302. package/react/components/ButtonGroup.d.ts +4 -2
  303. package/react/components/ButtonGroup.js +5 -3
  304. package/react/components/Carousel.js +1 -1
  305. package/react/components/CheckButtonGroup.d.ts +3 -1
  306. package/react/components/CheckButtonGroup.js +8 -2
  307. package/react/components/CheckGroup.d.ts +1 -0
  308. package/react/components/CheckGroup.js +1 -1
  309. package/react/components/Checkbox.d.ts +2 -1
  310. package/react/components/Checkbox.js +2 -2
  311. package/react/components/CheckboxButton.d.ts +1 -0
  312. package/react/components/CheckboxButton.js +2 -2
  313. package/react/components/ContentDivider.d.ts +12 -0
  314. package/react/components/ContentDivider.js +66 -0
  315. package/react/components/DatePicker.js +7 -2
  316. package/react/components/DropZone.d.ts +25 -0
  317. package/react/components/DropZone.js +93 -0
  318. package/react/components/Dropdown.d.ts +1 -0
  319. package/react/components/Dropdown.js +28 -23
  320. package/react/components/DropdownFirst.js +1 -1
  321. package/react/components/Form/FormGroup.d.ts +13 -0
  322. package/react/components/Form/FormGroup.js +61 -0
  323. package/react/components/Form/FormItem.d.ts +9 -0
  324. package/react/components/Form/FormItem.js +54 -0
  325. package/react/components/Form/FormLabel.d.ts +10 -0
  326. package/react/components/Form/FormLabel.js +54 -0
  327. package/react/components/Form/FormRow.d.ts +17 -0
  328. package/react/components/Form/FormRow.js +62 -0
  329. package/react/components/Form/FormText.d.ts +8 -0
  330. package/react/components/Form/FormText.js +47 -0
  331. package/react/components/Form/index.d.ts +5 -0
  332. package/react/components/Form/index.js +12 -0
  333. package/react/components/IconButton.d.ts +9 -2
  334. package/react/components/IconButton.js +13 -5
  335. package/react/components/Input.d.ts +20 -6
  336. package/react/components/Input.js +10 -13
  337. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  338. package/react/components/Layouts/AuthorinInnerSideBar.js +47 -0
  339. package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
  340. package/react/components/Layouts/AuthoringFrame.js +56 -0
  341. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  342. package/react/components/Layouts/AuthoringFrameContainer.js +47 -0
  343. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  344. package/react/components/Layouts/AuthoringFrameLeftBar.js +47 -0
  345. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  346. package/react/components/Layouts/AuthoringFrameMain.js +47 -0
  347. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  348. package/react/components/Layouts/AuthoringFrameNavBar.js +47 -0
  349. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  350. package/react/components/Layouts/AuthoringFrameOverlay.js +47 -0
  351. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
  352. package/react/components/Layouts/AuthoringFrameRightBar.js +47 -0
  353. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  354. package/react/components/Layouts/AuthoringFrameSidePanel.js +56 -0
  355. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  356. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +56 -0
  357. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  358. package/react/components/Layouts/AuthoringInnerBody.js +47 -0
  359. package/react/components/Layouts/AuthoringInnerHeader.d.ts +13 -0
  360. package/react/components/{RadioButton.js → Layouts/AuthoringInnerHeader.js} +20 -22
  361. package/react/components/Layouts/AuthoringMain.d.ts +12 -0
  362. package/react/components/Layouts/AuthoringMain.js +53 -0
  363. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  364. package/react/components/Layouts/AuthoringMainContainer.js +47 -0
  365. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  366. package/react/components/Layouts/AuthoringMainContent.js +47 -0
  367. package/react/components/Layouts/AuthoringMainToolBar.d.ts +8 -0
  368. package/react/components/Layouts/AuthoringMainToolBar.js +47 -0
  369. package/react/components/Layouts/Container.d.ts +14 -0
  370. package/react/components/Layouts/Container.js +60 -0
  371. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  372. package/react/components/Layouts/HeaderPanel.js +47 -0
  373. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  374. package/react/components/Layouts/LayoutContainer.js +47 -0
  375. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  376. package/react/components/Layouts/LeftPanel.js +54 -0
  377. package/react/components/Layouts/MainPanel.d.ts +10 -0
  378. package/react/components/Layouts/MainPanel.js +50 -0
  379. package/react/components/Layouts/PageLayout.d.ts +16 -0
  380. package/react/components/Layouts/PageLayout.js +64 -0
  381. package/react/components/Layouts/Panel.d.ts +65 -0
  382. package/react/components/Layouts/Panel.js +166 -0
  383. package/react/components/Layouts/RightPanel.d.ts +9 -0
  384. package/react/components/Layouts/RightPanel.js +47 -0
  385. package/react/components/Layouts/index.d.ts +24 -0
  386. package/react/components/Layouts/index.js +55 -0
  387. package/react/components/LeftMenu.d.ts +8 -3
  388. package/react/components/LeftMenu.js +55 -16
  389. package/react/components/Lists/BoxedList.d.ts +36 -0
  390. package/react/components/Lists/BoxedList.js +137 -0
  391. package/react/components/Lists/SimpleList.d.ts +21 -0
  392. package/react/components/Lists/SimpleList.js +78 -0
  393. package/react/components/Lists/index.d.ts +2 -0
  394. package/react/components/Lists/index.js +9 -0
  395. package/react/components/Modal.d.ts +3 -1
  396. package/react/components/Modal.js +3 -2
  397. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  398. package/react/components/Navigation/QuickNavBar.js +113 -0
  399. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  400. package/react/components/Navigation/SideBarMenu.js +77 -0
  401. package/react/components/Navigation/SideBarTabs.d.ts +22 -0
  402. package/react/components/Navigation/SideBarTabs.js +82 -0
  403. package/react/components/Navigation/index.d.ts +3 -0
  404. package/react/components/Navigation/index.js +8 -0
  405. package/react/components/RadioButtonGroup.d.ts +29 -0
  406. package/react/components/RadioButtonGroup.js +89 -0
  407. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  408. package/react/components/{Radio.js → RadioGroup.js} +15 -11
  409. package/react/components/Select.d.ts +1 -1
  410. package/react/components/Select.js +2 -9
  411. package/react/components/SelectGrid.js +3 -3
  412. package/react/components/SlidingToolbar.d.ts +1 -1
  413. package/react/components/SlidingToolbar.js +11 -1
  414. package/react/components/Spinner.d.ts +0 -1
  415. package/react/components/Spinner.js +0 -1
  416. package/react/components/SubNav.d.ts +8 -1
  417. package/react/components/SubNav.js +22 -4
  418. package/react/components/Switch.d.ts +4 -1
  419. package/react/components/Switch.js +19 -7
  420. package/react/components/TabCustom.d.ts +11 -22
  421. package/react/components/TabCustom.js +23 -52
  422. package/react/components/TabList.d.ts +2 -11
  423. package/react/components/TabList.js +11 -32
  424. package/react/components/Tag.d.ts +3 -3
  425. package/react/components/Tag.js +16 -5
  426. package/react/components/TagInput.d.ts +0 -1
  427. package/react/components/Text/Heading.d.ts +15 -0
  428. package/react/components/Text/Heading.js +77 -0
  429. package/react/components/Text/Text.d.ts +15 -0
  430. package/react/components/Text/Text.js +65 -0
  431. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  432. package/react/components/ThemeSelector.js +112 -0
  433. package/react/components/TimePicker.js +2 -2
  434. package/react/components/Togglebox.d.ts +1 -0
  435. package/react/components/Togglebox.js +9 -2
  436. package/react/index.d.ts +15 -4
  437. package/react/index.js +36 -6
  438. package/app/styles/_editor-themes.scss +0 -326
  439. package/app/styles/variables/_design-tokens-general.scss +0 -76
  440. package/app-typescript/components/Radio.tsx +0 -57
  441. package/app-typescript/components/RadioButton.tsx +0 -57
  442. package/dist/react/Radios.tsx +0 -391
  443. 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
+ }