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,103 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { DropZone, Button, Icon, Prop, PropsList } from '../../../app-typescript';
4
+
5
+ interface IProps {
6
+ children?: React.ReactNode;
7
+ }
8
+
9
+ export default class DropZoneDoc extends React.Component<IProps> {
10
+ render() {
11
+ return (
12
+ <section className='docs-page__container'>
13
+ <h2 className='docs-page__h2'>Container</h2>
14
+
15
+ <Markup.ReactMarkupCodePreview>{`
16
+ <DropZone>
17
+
18
+ </DropZone>
19
+ `}
20
+ </Markup.ReactMarkupCodePreview>
21
+
22
+ <p className="docs-page__paragraph">
23
+ The Container is a convenient layout component with different layout options and support for external CSS classes.
24
+ The display model is <code>flex</code> by default, but can be changed with the <code>display</code> prop. It is
25
+ intended to be used with helper CSS classes to achieve desired styling options
26
+ </p>
27
+
28
+ <Markup.ReactMarkup>
29
+ <Markup.ReactMarkupPreview>
30
+ <p className="docs-page__paragraph">// Basic</p>
31
+ <div className='docs-page__content-row'>
32
+ <DropZone actionText='Attach file' text="Drag one or more files here to upload them, or just click on the field.">
33
+
34
+ </DropZone>
35
+ </div>
36
+
37
+ <p className="docs-page__paragraph">// Usage examples</p>
38
+
39
+
40
+
41
+ <div className='docs-page__content-row'>
42
+
43
+ </div>
44
+
45
+
46
+ </Markup.ReactMarkupPreview>
47
+ <Markup.ReactMarkupCode>{`
48
+ // Basic
49
+
50
+ <Container>
51
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
52
+ </Container>
53
+
54
+ // Usage examples
55
+
56
+ <Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
57
+ <span>Curabitur blandit tempus porttitor.</span>
58
+ <Button text="Test button" type="primary" onClick={()=> false} />
59
+ <Button text="Test button" type="highlight" onClick={()=> false} />
60
+ <ButtonGroup align="end">
61
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
62
+ <Button text="Submit" onClick={()=> false} type="primary" />
63
+ </ButtonGroup>
64
+ </Container>
65
+
66
+ <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
67
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
68
+ <Text color='light'>
69
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
70
+ </Text>
71
+ <ButtonGroup align="end">
72
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
73
+ <Button text="Submit" onClick={()=> false} type="primary" />
74
+ </ButtonGroup>
75
+ </Container>
76
+
77
+ <Container gap="large" theme='dark-ui' direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
78
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
79
+ <Text color='light'>
80
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
81
+ </Text>
82
+ <ButtonGroup align="end">
83
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
84
+ <Button text="Submit" onClick={()=> false} type="primary" />
85
+ </ButtonGroup>
86
+ </Container>
87
+
88
+ `}
89
+ </Markup.ReactMarkupCode>
90
+ </Markup.ReactMarkup>
91
+
92
+ <h3 className="docs-page__h3">Props</h3>
93
+ <PropsList>
94
+ <Prop name='display' isRequired={false} type='flex | inline-flex | block' default='flex' description='Change the default display mode (flex).'/>
95
+ <Prop name='direction' isRequired={false} type='row | column' default='row' description='Change the flex-direction property.'/>
96
+ <Prop name='gap' isRequired={false} type='none | small | medium | large' default='none' description='Set the gap between elements inside the Container.'/>
97
+ <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All items inside will inherit the theme of the Container if it is set.'/>
98
+ <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
99
+ </PropsList>
100
+ </section>
101
+ )
102
+ }
103
+ }
@@ -0,0 +1,106 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { PropsList, Prop, Heading } from '../../../app-typescript';
4
+
5
+ interface IProps {
6
+ children?: React.ReactNode;
7
+ }
8
+
9
+ export default class HeadingDoc extends React.Component<IProps> {
10
+ render() {
11
+ return (
12
+ <section className='docs-page__container'>
13
+ <h2 className='docs-page__h2'>Heading</h2>
14
+
15
+ <Markup.ReactMarkupCodePreview>{`
16
+ <Heading type='h2'>
17
+ Purus Dolor Ligula
18
+ </Heading>
19
+ `}
20
+ </Markup.ReactMarkupCodePreview>
21
+
22
+ <p className="docs-page__paragraph">Heading component. By choosing the type (h1, h2, h3...) appropriate HTML tags will be rendered, preserving the semantcs.</p>
23
+
24
+ <Markup.ReactMarkup>
25
+ <Markup.ReactMarkupPreview>
26
+ <p className="docs-page__paragraph">// Basic</p>
27
+ <div className='docs-page__content-row'>
28
+ <Heading type='h1'>Heading one example</Heading>
29
+ </div>
30
+ <div className='docs-page__content-row'>
31
+ <Heading type='h2'>Heading two example</Heading>
32
+ </div>
33
+ <div className='docs-page__content-row'>
34
+ <Heading type='h3'>Heading three example</Heading>
35
+ </div>
36
+ <div className='docs-page__content-row'>
37
+ <Heading type='h4'>Heading four example</Heading>
38
+ </div>
39
+ <div className='docs-page__content-row'>
40
+ <Heading type='h5'>Heading five example</Heading>
41
+ </div>
42
+ <div className='docs-page__content-row'>
43
+ <Heading type='h6'>Heading six example</Heading>
44
+ </div>
45
+
46
+ <p className="docs-page__paragraph">// Variations</p>
47
+
48
+ <div className='docs-page__content-row'>
49
+ <Heading fontStyle='serif' color='light' weight='strong' type='h1'>
50
+ Maecenas faucibus mollis interdum.
51
+ </Heading>
52
+ </div>
53
+ <div className='docs-page__content-row'>
54
+ <Heading type='h2' style='italic' align='end'>
55
+ Cras mattis consectetur purus sit amet fermentum.
56
+ </Heading>
57
+ </div>
58
+ <div className='docs-page__content-row'>
59
+ <Heading fontStyle='serif' type='h3' align='center' color='lighter'>
60
+ Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla.
61
+ </Heading>
62
+ </div>
63
+
64
+ </Markup.ReactMarkupPreview>
65
+ <Markup.ReactMarkupCode>{`
66
+ // Basic
67
+
68
+ <Heading type='h1'>Heading one example</Heading>
69
+ <Heading type='h2'>Heading two example</Heading>
70
+ <Heading type='h3'>Heading three example</Heading>
71
+ <Heading type='h4'>Heading four example</Heading>
72
+ <Heading type='h5'>Heading five example</Heading>
73
+ <Heading type='h6'>Heading six example</Heading>
74
+
75
+ // Variations
76
+
77
+ <Heading fontStyle='serif' color='light' weight='strong' type='h1'>
78
+ Maecenas faucibus mollis interdum.
79
+ </Heading>
80
+
81
+ <Heading type='h2' style='italic' align='end'>
82
+ Cras mattis consectetur purus sit amet fermentum.
83
+ </Heading>
84
+
85
+ <Heading fontStyle='serif' type='h3' align='center' color='lighter'>
86
+ Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla.
87
+ </Heading>
88
+
89
+ `}
90
+ </Markup.ReactMarkupCode>
91
+ </Markup.ReactMarkup>
92
+
93
+ <h3 className="docs-page__h3">Props</h3>
94
+ <PropsList>
95
+ <Prop name='type' isRequired={true} type='h1 | h2 | h3 | h4 | h5 | h6' default='/' description='Heading type (eg. H1, H2, H3... etc.)'/>
96
+ <Prop name='weight' isRequired={false} type='normal | medium | strong' default='normal' description='Change the default font weight.'/>
97
+ <Prop name='style' isRequired={false} type='normal | italic' default='normal' description='Change the default text style.'/>
98
+ <Prop name='align' isRequired={false} type='start | end | center | justify' default='start' description='Text-align'/>
99
+ <Prop name='fontStyle' isRequired={false} type='sans | serif' default='sans' description='Choose between default sans (Roboto) and serif (Merriweather) font styles. '/>
100
+ <Prop name='color' isRequired={false} type='normal | light | lighter' default='normal' description='Choose a different text colour. Additional two lighter shades are available.'/>
101
+ <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
102
+ </PropsList>
103
+ </section>
104
+ )
105
+ }
106
+ }
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
 
3
3
  import * as Markup from '../../js/react';
4
4
 
5
- import { IconButton, Prop, PropsList, Tooltip } from '../../../app-typescript';
5
+ import { IconButton, Prop, PropsList, Tooltip, Container, ButtonGroup } from '../../../app-typescript';
6
6
 
7
7
  export default class IconButtonDoc extends React.Component {
8
8
  render() {
@@ -20,61 +20,64 @@ export default class IconButtonDoc extends React.Component {
20
20
  <p className="docs-page__paragraph">// Default</p>
21
21
  <p className="docs-page__paragraph--small">Hover buttons to see tooltips.</p>
22
22
  <div className="docs-page__content-row docs-page__content-row--white">
23
- <Tooltip text='I support tooltips!'>
24
- <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
25
- </Tooltip>
26
- <IconButton icon='plus-large' ariaValue='Add' onClick ={()=> false} />
23
+ <IconButton icon='close-small' disabled ariaValue='Close' onClick={()=> false} />
24
+ <IconButton icon='plus-large' ariaValue='Add' onClick={()=> false} />
27
25
  <IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
28
26
  <IconButton icon='trash' ariaValue='Move to trash' onClick={()=> false} />
29
- <Tooltip text='My tooltip is on the right.' flow='right'>
30
- <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
31
- </Tooltip>
27
+ <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
32
28
  </div>
33
29
  <p className="docs-page__paragraph">// Small</p>
34
30
  <div className="docs-page__content-row docs-page__content-row--white sd-d-flex ">
35
- <IconButton size='small' icon='plus-large' ariaValue='Add' onClick ={()=> false} />
31
+ <IconButton size='small' icon='plus-large' ariaValue='Add' onClick={()=> false} />
36
32
  <span className="sd-margin-x--auto"></span>
37
33
  <IconButton size='small' icon='close-small' ariaValue='Close' onClick={()=> false} />
38
34
  </div>
39
- <p className="docs-page__paragraph">// Dark UI</p>
40
- <div className="docs-page__content-row docs-page__content-row--ui-dark" style={{color:'white'}}>
41
- <Tooltip text='I support tooltips!'>
42
- <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
43
- </Tooltip>
44
- <IconButton icon='plus-large' ariaValue='Add item' onClick={()=> false} />
45
- <IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
46
- <IconButton icon='trash' ariaValue='Delete' onClick={()=> false} />
47
- <Tooltip text='My tooltip is on the right.' flow='right'>
48
- <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
49
- </Tooltip>
35
+
36
+ <p className="docs-page__paragraph">// Xtra large, 'outline' style</p>
37
+ <Container gap="large" className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--3'>
38
+ <ButtonGroup align='center' spaces='loose'>
39
+ <IconButton style='outline' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
40
+ <IconButton style='outline' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
41
+ <IconButton style='outline' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
42
+ </ButtonGroup>
43
+ </Container>
44
+
45
+ <p className="docs-page__paragraph">// Xtra large, outlineWhite style</p>
46
+ <p className="docs-page__paragraph--small">The 'outlineWhite' syle forces a white icon and outline. It can be used on dark overlays for example.</p>
47
+ <div style={{background: 'hsla(214, 13%, 12%, 1)'}} className="sd-container sd-container--flex sd-container--gap-large sd-radius--medium sd-shadow--z2 sd-padding--3">
48
+ <ButtonGroup align='center' spaces='loose'>
49
+ <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
50
+ <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
51
+ <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
52
+ </ButtonGroup>
50
53
  </div>
54
+
51
55
  </Markup.ReactMarkupPreview>
52
56
  <Markup.ReactMarkupCode>{`
53
- <Tooltip text='I support tooltips!'>
54
- <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
55
- </Tooltip>
56
- <IconButton icon='plus-large' ariaValue='plus' onClick ={()=> false} />
57
- <IconButton icon='dots-vertical' ariaValue='dots' onClick={()=> false} />
58
- <IconButton icon='trash' ariaValue='trash' onClick={()=> false} />
59
- <Tooltip text='My tooltip is on right.' flow='right'>
60
- <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
61
- </Tooltip>
57
+ <IconButton icon='close-small' disabled ariaValue='Close' onClick={()=> false} />
58
+ <IconButton icon='plus-large' ariaValue='Add' onClick={()=> false} />
59
+ <IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
60
+ <IconButton icon='trash' ariaValue='Move to trash' onClick={()=> false} />
61
+ <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
62
62
 
63
63
  // Small
64
- <IconButton size='small' icon='plus-large' ariaValue='Add' onClick ={()=> false} />
64
+ <IconButton size='small' icon='plus-large' ariaValue='Add' onClick={()=> false} />
65
65
  ...
66
66
  <IconButton size='small' icon='close-small' ariaValue='Close' onClick={()=> false} />
67
67
 
68
- //Dark UI
69
- <Tooltip text='I support tooltips!'>
70
- <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
71
- </Tooltip>
72
- <IconButton icon='plus-large' ariaValue='plus' onClick={()=> false} />
73
- <IconButton icon='dots-vertical' ariaValue='dots' onClick={()=> false} />
74
- <IconButton icon='trash' ariaValue='trash' onClick={()=> false} />
75
- <Tooltip text='My tooltip is on right.' flow='right'>
76
- <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
77
- </Tooltip>
68
+ // Xtra large, 'outline' style
69
+ <ButtonGroup align='center' spaces='loose'>
70
+ <IconButton style='outline' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
71
+ <IconButton style='outline' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
72
+ <IconButton style='outline' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
73
+ </ButtonGroup>
74
+
75
+ // Xtra large, outlineWhite style
76
+ <ButtonGroup align='center' spaces='loose'>
77
+ <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
78
+ <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
79
+ <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
80
+ </ButtonGroup>
78
81
  `}
79
82
  </Markup.ReactMarkupCode>
80
83
  </Markup.ReactMarkup>
@@ -82,8 +85,12 @@ export default class IconButtonDoc extends React.Component {
82
85
  <h3 className="docs-page__h3">Props</h3>
83
86
  <PropsList>
84
87
  <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
85
- <Prop name='ariaValue' isRequired={true} type='string' default='/' description='Description for screen readers'/>
86
- <Prop name='size' isRequired={false} type='small' default='normal' description='Creates an IconButton with a smaller footprint.'/>
88
+ <Prop name='ariaValue' isRequired={true} type='string' default='/' description='Description for screen readers, also used as the ToolTip value.'/>
89
+ <Prop name='size' isRequired={false} type='default | small | x-large' default='default' description='Creates an IconButton with a smaller or larger footprint.'/>
90
+ <Prop name='style' isRequired={false} type='default | outline | outlineWhite' default='default' description='Different styling options.'/>
91
+ <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
92
+ <Prop name='toolTipFlow' isRequired={false} type='top | left | right | down' default='top' description='Defines the possition of the ToolTip.'/>
93
+ <Prop name='toolTipAppend' isRequired={false} type='boolean' default='false' description='Uses the append to body version of the ToolTips if set to true.'/>
87
94
  </PropsList>
88
95
  </section>
89
96
  )
@@ -1,11 +1,11 @@
1
1
  import * as React from 'react';
2
2
 
3
3
  import { ReactNav, ReactDefault } from '../../js/react';
4
+ import { ButtonGroup, Button, NavButton, Dropdown } from '../../../app-typescript/index';
4
5
 
5
6
  import {
6
7
  Switch,
7
8
  Route,
8
-
9
9
  } from "react-router-dom";
10
10
 
11
11
  import InputsDoc from './Inputs';
@@ -23,10 +23,11 @@ import TooltipDoc from './Tooltips';
23
23
  import DatePickerDoc from './DatePicker';
24
24
  import TimePickerDoc from './TimePicker';
25
25
  import SwitchDoc from './Switch';
26
- import RadiosDoc from './Radios';
26
+ import RadioGroupDoc from './RadioGroup';
27
27
  import CheckboxsDoc from './Checkboxs';
28
28
  import TabsDoc from './Tabs';
29
29
  import LeftNavigationsDoc from './LeftNavigations';
30
+ import QuickNavBarDoc from './QuickNavigationBar';
30
31
  import NavButtonsDoc from './NavButtons';
31
32
  import IconFontDoc from './IconFont';
32
33
  import BigIconFontDoc from './BigIconFont';
@@ -40,13 +41,23 @@ import GridListDoc from './GridList';
40
41
  import GridItemDoc from './GridItem';
41
42
  import ModalDoc from './Modal';
42
43
  import CarouselDoc from './Carousel';
44
+ import ContentDividerDoc from './ContentDivider';
43
45
  import ToggleboxDocs from './Togglebox';
44
46
  import ListItemsDoc from './ListItems';
47
+ import PanelDoc from './Panel';
45
48
  import SelectGridDocs from './SelectGrid';
46
49
  import IconPickerDocs from "./IconPicker";
50
+ import SimpleListDoc from "./SimpleList";
51
+ import BoxedListDoc from "./BoxedList";
52
+ import HeadingDoc from "./Heading";
53
+ import TextDoc from "./Text";
54
+ import ContainerDoc from './Container';
55
+ import DropZoneDoc from './DropZone';
47
56
 
48
57
  import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
49
58
  import { SelectWithTemplateDocs } from './SelectWithTemplate';
59
+ import { MultiselectDocs } from './MultiSelect';
60
+ import { TreeSelectDocs } from './TreeSelect';
50
61
  import { PopoverDoc } from './Popover';
51
62
  import { MenuDocs } from './Menu';
52
63
 
@@ -116,6 +127,9 @@ const pages = {
116
127
  'left-navigation': {
117
128
  name: 'Left navigation'
118
129
  },
130
+ 'Quick-navigation-bar': {
131
+ name: 'Quick navigation bar'
132
+ },
119
133
  'sub-navigation': {
120
134
  name: 'Sub navigation bar'
121
135
  },
@@ -124,26 +138,57 @@ const pages = {
124
138
  containerComponents: {
125
139
  name: "Containers",
126
140
  items: {
141
+ 'container': {
142
+ name: 'Container component'
143
+ },
127
144
  'empty-states': {
128
145
  name: 'Empty states'
129
146
  },
130
147
  'grid-item': {
131
148
  name: 'Grid Item'
132
149
  },
150
+ 'panel': {
151
+ name: 'Panel'
152
+ },
133
153
  }
134
154
  },
135
155
  layoutComponents: {
136
156
  name: "Layout",
137
157
  items: {
138
- 'grid-list': {
139
- name: 'Grid List'
158
+ 'content-divider': {
159
+ name: 'Content Divider'
140
160
  },
141
161
  "togglebox": {
142
162
  name: "Togglebox"
143
163
  },
164
+ }
165
+ },
166
+ textComponents: {
167
+ name: "Text",
168
+ items: {
169
+ 'heading': {
170
+ name: 'Heading component'
171
+ },
172
+ 'text': {
173
+ name: 'Text component'
174
+ },
175
+ }
176
+ },
177
+ listComponents: {
178
+ name: "Lists",
179
+ items: {
180
+ 'grid-list': {
181
+ name: 'Grid List'
182
+ },
144
183
  'list-items': {
145
184
  name: 'List items'
146
185
  },
186
+ 'simple-list': {
187
+ name: 'Simple list'
188
+ },
189
+ 'boxed-list': {
190
+ name: 'Boxed list'
191
+ },
147
192
  }
148
193
  },
149
194
  formComponents: {
@@ -167,6 +212,12 @@ const pages = {
167
212
  'select-with-template': {
168
213
  name: 'Select with template',
169
214
  },
215
+ 'multiselect': {
216
+ name: 'MultiSelect',
217
+ },
218
+ 'treeselect': {
219
+ name: 'TreeSelect',
220
+ },
170
221
  'date-picker': {
171
222
  name: 'Date Picker',
172
223
  },
@@ -179,12 +230,15 @@ const pages = {
179
230
  'switch': {
180
231
  name: 'Switch'
181
232
  },
182
- 'radio': {
183
- name: 'Radio'
233
+ 'radiogroup': {
234
+ name: 'RadioGroup'
184
235
  },
185
236
  'checkbox': {
186
237
  name: 'Checkbox'
187
- }
238
+ },
239
+ 'dropzone': {
240
+ name: 'DropZone'
241
+ },
188
242
  }
189
243
  },
190
244
  generalComponents: {
@@ -199,13 +253,56 @@ const pages = {
199
253
  }
200
254
  }
201
255
  }
256
+ interface IProps {
257
+ theme?: string;
258
+ }
259
+ interface IState {
260
+ theme: 'dark-ui' | 'light-ui' | string;
261
+ }
262
+
263
+ class ReactDoc extends React.Component<IProps, IState> {
264
+ constructor(props: IProps) {
265
+ super(props);
266
+ this.state = {
267
+ theme: 'light-ui',
268
+ }
269
+ this.handleTheme = this.handleTheme.bind(this);
270
+ }
271
+
272
+ handleTheme(newTheme: string) {
273
+ document.body.setAttribute('data-theme', newTheme);
274
+
275
+ this.setState({
276
+ theme: newTheme
277
+ })
278
+ }
279
+
280
+ checkTheme(theme: string) {
281
+ return this.state.theme === theme;
282
+ }
202
283
 
203
- class ReactDoc extends React.Component {
204
284
  render() {
205
285
  return (
206
286
  <React.Fragment>
207
287
  <ReactNav pages={pages} />
208
288
  <main className="docs-page__content docs-page__container-fluid">
289
+ <div className="docs-page__fla-button-container">
290
+ <Dropdown
291
+ items={[
292
+ {
293
+ type: 'group', label: 'Chose a theme', items: [
294
+ 'divider',
295
+ { label: 'Light', icon: 'adjust', active: this.checkTheme('light-ui'), onSelect: () => this.handleTheme('light-ui') },
296
+ { label: 'Dark', icon: 'adjust', active: this.checkTheme('dark-ui'), onSelect: () => this.handleTheme('dark-ui') },
297
+ { label: 'Accessible Light', active: this.checkTheme('accessible-light-ui'), icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui') },
298
+ ]
299
+ },
300
+ ]}>
301
+ <button className="docs-page__fla-button" aria-label="Change theme" onClick={() => false}>
302
+ <i className="icon-adjust"></i>
303
+ </button>
304
+ </Dropdown>
305
+ </div>
209
306
  <Switch>
210
307
  <Route path="/react/buttons" component={ButtonsDoc} />
211
308
  <Route path="/react/icon-buttons" component={IconButtonDoc} />
@@ -221,14 +318,17 @@ class ReactDoc extends React.Component {
221
318
  <Route path="/react/autocomplete" component={AutocompleteDoc} />
222
319
  <Route path="/react/select" component={SelectsDoc} />
223
320
  <Route path="/react/select-with-template" component={SelectWithTemplateDocs} />
321
+ <Route path="/react/multiselect" component={MultiselectDocs} />
322
+ <Route path="/react/treeselect" component={TreeSelectDocs} />
224
323
  <Route path="/react/popover" component={PopoverDoc} />
225
324
  <Route path="/react/date-picker" component={DatePickerDoc} />
226
325
  <Route path="/react/time-picker" component={TimePickerDoc} />
227
326
  <Route path="/react/switch" component={SwitchDoc} />
228
- <Route path="/react/radio" component={RadiosDoc} />
327
+ <Route path="/react/radiogroup" component={RadioGroupDoc} />
229
328
  <Route path="/react/checkbox" component={CheckboxsDoc} />
230
329
  <Route path="/react/tab" component={TabsDoc} />
231
330
  <Route path="/react/left-navigation" component={LeftNavigationsDoc} />
331
+ <Route path="/react/Quick-navigation-bar" component={QuickNavBarDoc} />
232
332
  <Route path="/react/nav-buttons" component={NavButtonsDoc} />
233
333
  <Route path="/react/icon-font" component={IconFontDoc} />
234
334
  <Route path="/react/big-icon-font" component={BigIconFontDoc} />
@@ -241,11 +341,19 @@ class ReactDoc extends React.Component {
241
341
  <Route path="/react/grid-item" component={GridItemDoc} />
242
342
  <Route path="/react/modal" component={ModalDoc} />
243
343
  <Route path="/react/carousel" component={CarouselDoc} />
344
+ <Route path="/react/content-divider" component={ContentDividerDoc} />
244
345
  <Route path="/react/menu" component={MenuDocs} />
245
346
  <Route path="/react/togglebox" component={ToggleboxDocs} />
246
347
  <Route path="/react/list-items" component={ListItemsDoc} />
348
+ <Route path="/react/panel" component={PanelDoc} />
247
349
  <Route path="/react/select-grid" component={SelectGridDocs} />
248
350
  <Route path="/react/icon-picker" component={IconPickerDocs} />
351
+ <Route path="/react/simple-list" component={SimpleListDoc} />
352
+ <Route path="/react/boxed-list" component={BoxedListDoc} />
353
+ <Route path="/react/heading" component={HeadingDoc} />
354
+ <Route path="/react/text" component={TextDoc} />
355
+ <Route path="/react/container" component={ContainerDoc} />
356
+ <Route path="/react/dropzone" component={DropZoneDoc} />
249
357
  <Route path="/" component={ReactDefault} />
250
358
  </Switch>
251
359
  </main>
@@ -270,10 +378,9 @@ class ReactPlayground extends React.Component<IProps> {
270
378
 
271
379
  const parsePlayground = ({ match }, playgrounds) => {
272
380
  const Component = Playgrounds[playgrounds[match.params.id].component];
273
-
274
381
  return (
275
382
  <Component />
276
383
  );
277
384
  };
278
385
 
279
- export { ReactDoc, ReactPlayground };
386
+ export { ReactDoc, ReactPlayground };