superdesk-ui-framework 3.0.0-beta.0 → 3.0.0-rc12

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 (679) hide show
  1. package/app/fonts/sd_big-icons.eot +0 -0
  2. package/app/fonts/sd_big-icons.svg +55 -53
  3. package/app/fonts/sd_big-icons.ttf +0 -0
  4. package/app/fonts/sd_big-icons.woff +0 -0
  5. package/app/fonts/sd_icons.eot +0 -0
  6. package/app/fonts/sd_icons.svg +15 -7
  7. package/app/fonts/sd_icons.ttf +0 -0
  8. package/app/fonts/sd_icons.woff +0 -0
  9. package/app/img/SD-logo.svg +52 -0
  10. package/app/img/dots.svg +3 -0
  11. package/app/img/spinner.svg +3 -0
  12. package/app/img/themes/theme-base.svg +1 -0
  13. package/app/img/themes/theme-contrast.svg +45 -0
  14. package/app/img/themes/theme-dark.svg +1 -0
  15. package/app/img/themes/theme-light.svg +1 -0
  16. package/app/index.js +1 -1
  17. package/app/scripts/modals.js +22 -9
  18. package/app/scripts/toggleBoxNext.js +1 -1
  19. package/app/styles/_accessibility.scss +312 -4
  20. package/app/styles/_alerts.scss +57 -19
  21. package/app/styles/_avatar.scss +25 -1
  22. package/app/styles/_badge.scss +2 -2
  23. package/app/styles/_big-icon-font.scss +64 -24
  24. package/app/styles/_boxed-list.scss +67 -21
  25. package/app/styles/_buttons.scss +441 -333
  26. package/app/styles/_carousel.scss +17 -11
  27. package/app/styles/_content-divider.scss +63 -8
  28. package/app/styles/_design-tokens.scss +2 -0
  29. package/app/styles/_hamburger.scss +160 -0
  30. package/app/styles/_helpers.scss +221 -34
  31. package/app/styles/_icon-font.scss +351 -307
  32. package/app/styles/_icon-labels.scss +66 -10
  33. package/app/styles/_labels.scss +12 -7
  34. package/app/styles/_loaders.scss +13 -0
  35. package/app/styles/_master-desk.scss +8 -7
  36. package/app/styles/_mixins.scss +13 -3
  37. package/app/styles/_modals.scss +10 -31
  38. package/app/styles/_normalize.scss +5 -0
  39. package/app/styles/_panel-info.scss +19 -14
  40. package/app/styles/_sd-tag-input.scss +280 -219
  41. package/app/styles/_simple-list.scss +37 -17
  42. package/app/styles/_spinner.scss +46 -0
  43. package/app/styles/_table-list.scss +348 -0
  44. package/app/styles/_tabs.scss +6 -8
  45. package/app/styles/_tag-labels.scss +11 -2
  46. package/app/styles/_thumb-carousel.scss +11 -10
  47. package/app/styles/_toggle-box.scss +46 -12
  48. package/app/styles/_toggle-button.scss +42 -0
  49. package/app/styles/_tooltips.scss +3 -3
  50. package/app/styles/_variables.scss +0 -1
  51. package/app/styles/app.scss +15 -2
  52. package/app/styles/components/_card-item.scss +33 -21
  53. package/app/styles/components/_list-item.scss +63 -35
  54. package/app/styles/components/_sd-collapse-box.scss +6 -6
  55. package/app/styles/components/_sd-comment-box.scss +8 -4
  56. package/app/styles/components/_sd-dropzone.scss +114 -0
  57. package/app/styles/components/_sd-editor-popup.scss +4 -4
  58. package/app/styles/components/_sd-grid-item.scss +32 -18
  59. package/app/styles/components/_sd-media-carousel.scss +37 -2
  60. package/app/styles/components/_sd-notification-panel.scss +48 -0
  61. package/app/styles/components/_sd-photo-preview.scss +3 -3
  62. package/app/styles/components/_sd-searchbar.scss +12 -98
  63. package/app/styles/components/_subnav.scss +464 -435
  64. package/app/styles/components/_theme-selector.scss +189 -0
  65. package/app/styles/design-tokens/_design-tokens-general.scss +81 -0
  66. package/app/styles/{variables → design-tokens}/_new-colors.scss +68 -30
  67. package/app/styles/dropdowns/_basic-dropdown.scss +36 -3
  68. package/app/styles/editor/_editor-buttons.scss +54 -0
  69. package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
  70. package/app/styles/form-elements/_checkbox.scss +85 -58
  71. package/app/styles/form-elements/_forms-general.scss +171 -21
  72. package/app/styles/form-elements/_input-wrap.scss +138 -0
  73. package/app/styles/form-elements/_inputs.scss +602 -104
  74. package/app/styles/form-elements/_select-grid.scss +79 -0
  75. package/app/styles/grids/_basic-grid.scss +52 -26
  76. package/app/styles/grids/_grid-layout.scss +207 -66
  77. package/app/styles/grids/_layout-grid.scss +4 -4
  78. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  79. package/app/styles/interface-elements/_side-panel.scss +88 -59
  80. package/app/styles/layout/_basic-layout.scss +3 -6
  81. package/app/styles/layout/_container.scss +35 -0
  82. package/app/styles/layout/_editor.scss +404 -0
  83. package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
  84. package/app/styles/menus/_sd-left-navigation.scss +38 -3
  85. package/app/styles/menus/_sd-sidebar-menu.scss +109 -14
  86. package/app/styles/menus/_sd-top-menu.scss +19 -5
  87. package/app/styles/pr-superdesk-theme.scss +3 -0
  88. package/app/styles/primereact/_pr-datepicker.scss +62 -9
  89. package/app/styles/primereact/_pr-dialog.scss +44 -7
  90. package/app/styles/primereact/_pr-dropdown.scss +170 -7
  91. package/app/styles/primereact/_pr-general.scss +4 -0
  92. package/app/styles/primereact/_pr-menu.scss +6 -5
  93. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  94. package/app/styles/variables/_colors.scss +23 -473
  95. package/app/styles/variables/_dimensions.scss +85 -1
  96. package/app/styles/variables/_form-elements.scss +0 -2
  97. package/app-typescript/components/Alert.tsx +16 -1
  98. package/app-typescript/components/Avatar.tsx +21 -0
  99. package/app-typescript/components/Badge.tsx +3 -2
  100. package/app-typescript/components/Button.tsx +7 -1
  101. package/app-typescript/components/ButtonGroup.tsx +5 -4
  102. package/app-typescript/components/Carousel.tsx +1 -1
  103. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  104. package/app-typescript/components/CheckGroup.tsx +2 -1
  105. package/app-typescript/components/Checkbox.tsx +7 -3
  106. package/app-typescript/components/CheckboxButton.tsx +9 -2
  107. package/app-typescript/components/ContentDivider.tsx +3 -0
  108. package/app-typescript/components/CreateButton.tsx +38 -0
  109. package/app-typescript/components/DatePicker.tsx +77 -38
  110. package/app-typescript/components/DonutChart.tsx +1 -1
  111. package/app-typescript/components/DropZone.tsx +89 -0
  112. package/app-typescript/components/Dropdown.tsx +133 -80
  113. package/app-typescript/components/DurationInput.tsx +400 -0
  114. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  115. package/app-typescript/components/EmptyState.tsx +2 -1
  116. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  117. package/app-typescript/components/Form/FormItem.tsx +20 -0
  118. package/app-typescript/components/Form/FormLabel.tsx +29 -0
  119. package/app-typescript/components/Form/FormRow.tsx +40 -0
  120. package/app-typescript/components/Form/FormRowNew.tsx +41 -0
  121. package/app-typescript/components/Form/FormText.tsx +15 -0
  122. package/app-typescript/components/Form/InputBase.tsx +95 -0
  123. package/app-typescript/components/Form/InputNew.tsx +107 -0
  124. package/app-typescript/components/Form/InputWrapper.tsx +79 -0
  125. package/app-typescript/components/Form/index.tsx +9 -0
  126. package/app-typescript/components/Icon.tsx +4 -2
  127. package/app-typescript/components/IconButton.tsx +30 -12
  128. package/app-typescript/components/IconLabel.tsx +8 -1
  129. package/app-typescript/components/IconPicker.tsx +277 -0
  130. package/app-typescript/components/Input.tsx +67 -35
  131. package/app-typescript/components/Label.tsx +65 -10
  132. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  133. package/app-typescript/components/Layouts/AuthoringContainer.tsx +28 -0
  134. package/app-typescript/components/Layouts/AuthoringFrame.tsx +73 -0
  135. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  136. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  137. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  138. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  139. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  140. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +34 -0
  141. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  142. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  143. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  144. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
  145. package/app-typescript/components/Layouts/AuthoringMain.tsx +52 -0
  146. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  147. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  148. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -0
  149. package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
  150. package/app-typescript/components/Layouts/Container.tsx +30 -0
  151. package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
  152. package/app-typescript/components/Layouts/CoreLayout.tsx +63 -0
  153. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
  154. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
  155. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +22 -0
  156. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
  157. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
  158. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
  159. package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
  160. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  161. package/app-typescript/components/Layouts/Layout.tsx +33 -0
  162. package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
  163. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  164. package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
  165. package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
  166. package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
  167. package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
  168. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  169. package/app-typescript/components/Layouts/Panel.tsx +208 -0
  170. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  171. package/app-typescript/components/Layouts/index.tsx +43 -0
  172. package/app-typescript/components/LeftMenu.tsx +116 -31
  173. package/app-typescript/components/ListItemLoader.tsx +30 -0
  174. package/app-typescript/components/Lists/BoxedList.tsx +169 -0
  175. package/app-typescript/components/Lists/ContentList.tsx +133 -0
  176. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  177. package/app-typescript/components/Lists/TableList.tsx +405 -0
  178. package/app-typescript/components/Lists/index.tsx +2 -0
  179. package/app-typescript/components/Menu.tsx +33 -9
  180. package/app-typescript/components/Modal.tsx +31 -18
  181. package/app-typescript/components/MultiSelect.tsx +99 -0
  182. package/app-typescript/components/NavButton.tsx +6 -1
  183. package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
  184. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  185. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  186. package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
  187. package/app-typescript/components/Navigation/index.tsx +3 -0
  188. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  189. package/app-typescript/components/RadioGroup.tsx +69 -0
  190. package/app-typescript/components/SearchBar.tsx +106 -0
  191. package/app-typescript/components/Select.tsx +31 -31
  192. package/app-typescript/components/SelectGrid.tsx +233 -0
  193. package/app-typescript/components/SelectWithTemplate.tsx +32 -7
  194. package/app-typescript/components/SidebarMenu.tsx +68 -0
  195. package/app-typescript/components/Skeleton.tsx +48 -0
  196. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  197. package/app-typescript/components/Spacer.tsx +87 -0
  198. package/app-typescript/components/Spinner.tsx +32 -0
  199. package/app-typescript/components/SubNav.tsx +25 -4
  200. package/app-typescript/components/Switch.tsx +34 -12
  201. package/app-typescript/components/SwitchGroup.tsx +2 -1
  202. package/app-typescript/components/Tag.tsx +31 -7
  203. package/app-typescript/components/Text/Heading.tsx +67 -0
  204. package/app-typescript/components/Text/Text.tsx +36 -0
  205. package/app-typescript/components/Text/Time.tsx +34 -0
  206. package/app-typescript/components/ThemeSelector.tsx +113 -0
  207. package/app-typescript/components/TimePicker.tsx +38 -15
  208. package/app-typescript/components/Togglebox.tsx +9 -7
  209. package/app-typescript/components/Tooltip.tsx +7 -5
  210. package/app-typescript/components/TreeSelect.tsx +664 -0
  211. package/app-typescript/components/WithSizeObserver.tsx +88 -0
  212. package/app-typescript/helpers.tsx +3 -0
  213. package/app-typescript/index.ts +30 -3
  214. package/dist/SD-logo.svg +52 -0
  215. package/dist/avatar-2.jpg +0 -0
  216. package/dist/avatar-3.jpg +0 -0
  217. package/dist/avatar-4.jpg +0 -0
  218. package/dist/avatar-5.jpg +0 -0
  219. package/dist/avatar-6.jpg +0 -0
  220. package/dist/components/basic-grid.html +1 -1
  221. package/dist/components/checkbox.html +1 -1
  222. package/dist/components/modals.html +1 -0
  223. package/dist/dots.svg +3 -0
  224. package/dist/examples.bundle.css +8916 -1617
  225. package/dist/examples.bundle.js +99314 -71560
  226. package/dist/playgrounds/accessible-theme-test.html +1 -1
  227. package/dist/playgrounds/boxed-list.html +1 -1
  228. package/dist/playgrounds/cards.html +9 -4
  229. package/dist/playgrounds/editor-3-test.html +15 -0
  230. package/dist/playgrounds/form-layout.html +9 -7
  231. package/dist/playgrounds/layout-test-2.html +1 -1
  232. package/dist/playgrounds/list-item-test.html +1 -1
  233. package/dist/playgrounds/master-desk.html +2 -4
  234. package/dist/playgrounds/media-carousel.html +1 -1
  235. package/dist/playgrounds/photo-desk.html +1 -1
  236. package/dist/playgrounds/planning.html +1 -1
  237. package/dist/playgrounds/publish.html +1 -1
  238. package/dist/playgrounds/publisher-content-analytics.html +1 -1
  239. package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
  240. package/dist/playgrounds/publisher-content-list-manual.html +1 -1
  241. package/dist/playgrounds/publisher-content-lists.html +1 -1
  242. package/dist/playgrounds/publisher-dashboard.html +1 -1
  243. package/dist/playgrounds/publisher-output-control.html +1 -1
  244. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +156 -0
  245. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  246. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  247. package/dist/playgrounds/react-playgrounds/Index.tsx +8 -1
  248. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  249. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  250. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  251. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
  252. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
  253. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
  254. package/dist/playgrounds/react-playgrounds/TestGround.tsx +631 -24
  255. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  256. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  257. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  258. package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  259. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  260. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  261. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  262. package/dist/playgrounds/swimlane-view.html +1 -1
  263. package/dist/playgrounds/toasts.html +1 -1
  264. package/dist/playgrounds/video-editor.html +1 -1
  265. package/dist/react/Alerts.tsx +91 -18
  266. package/dist/react/Avatar.tsx +314 -127
  267. package/dist/react/Badges.tsx +18 -0
  268. package/dist/react/BoxedList.tsx +362 -0
  269. package/dist/react/ButtonGroups.tsx +66 -65
  270. package/dist/react/Buttons.tsx +65 -113
  271. package/dist/react/Carousel.tsx +2 -3
  272. package/dist/react/Checkboxs.tsx +66 -25
  273. package/dist/react/Container.tsx +143 -0
  274. package/dist/react/ContentDivider.tsx +22 -18
  275. package/dist/react/ContentList.tsx +462 -0
  276. package/dist/react/CreateButton.tsx +71 -0
  277. package/dist/react/DatePicker.tsx +31 -6
  278. package/dist/react/DropZone.tsx +111 -0
  279. package/dist/react/Dropdowns.tsx +580 -48
  280. package/dist/react/DurationInput.tsx +108 -0
  281. package/dist/react/Heading.tsx +106 -0
  282. package/dist/react/IconButtons.tsx +51 -21
  283. package/dist/react/IconFont.tsx +7 -6
  284. package/dist/react/IconLabels.tsx +24 -2
  285. package/dist/react/IconPicker.tsx +65 -0
  286. package/dist/react/Index.tsx +125 -19
  287. package/dist/react/Inputs.tsx +289 -6
  288. package/dist/react/Labels.tsx +51 -1
  289. package/dist/react/LeftNavigations.tsx +194 -15
  290. package/dist/react/ListItems.tsx +34 -0
  291. package/dist/react/Modal.tsx +8 -7
  292. package/dist/react/MultiSelect.tsx +201 -0
  293. package/dist/react/NavButtons.tsx +35 -5
  294. package/dist/react/Panel.tsx +366 -0
  295. package/dist/react/QuickNavigationBar.tsx +142 -0
  296. package/dist/react/RadioGroup.tsx +351 -0
  297. package/dist/react/SelectGrid.tsx +121 -0
  298. package/dist/react/SelectWithTemplate.tsx +6 -1
  299. package/dist/react/Selects.tsx +57 -0
  300. package/dist/react/SimpleList.tsx +148 -0
  301. package/dist/react/SubNav.tsx +65 -18
  302. package/dist/react/TableList.tsx +161 -0
  303. package/dist/react/Tags.tsx +57 -5
  304. package/dist/react/Text.tsx +134 -0
  305. package/dist/react/TimePicker.tsx +22 -12
  306. package/dist/react/Togglebox.tsx +1 -1
  307. package/dist/react/TreeSelect.tsx +422 -0
  308. package/dist/react/WithSizeObserver.tsx +44 -0
  309. package/dist/react/tree-select/TreeSelect.tsx +273 -0
  310. package/dist/react/tree-select/example-1.tsx +71 -0
  311. package/dist/react/tree-select/example-2.tsx +59 -0
  312. package/dist/react.html +4 -0
  313. package/dist/sd_big-icons.eot +0 -0
  314. package/dist/sd_big-icons.svg +55 -53
  315. package/dist/sd_big-icons.ttf +0 -0
  316. package/dist/sd_big-icons.woff +0 -0
  317. package/dist/sd_icons.eot +0 -0
  318. package/dist/sd_icons.svg +15 -7
  319. package/dist/sd_icons.ttf +0 -0
  320. package/dist/sd_icons.woff +0 -0
  321. package/dist/superdesk-ui.bundle.css +55688 -25164
  322. package/dist/superdesk-ui.bundle.js +89363 -66822
  323. package/dist/vendor.bundle.js +25685 -25663
  324. package/examples/css/docs-page.css +103 -33
  325. package/examples/img/avatar-2.jpg +0 -0
  326. package/examples/img/avatar-3.jpg +0 -0
  327. package/examples/img/avatar-4.jpg +0 -0
  328. package/examples/img/avatar-5.jpg +0 -0
  329. package/examples/img/avatar-6.jpg +0 -0
  330. package/examples/index.js +32 -0
  331. package/examples/pages/components/basic-grid.html +1 -1
  332. package/examples/pages/components/checkbox.html +1 -1
  333. package/examples/pages/components/modals.html +1 -0
  334. package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
  335. package/examples/pages/playgrounds/boxed-list.html +1 -1
  336. package/examples/pages/playgrounds/cards.html +9 -4
  337. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  338. package/examples/pages/playgrounds/form-layout.html +9 -7
  339. package/examples/pages/playgrounds/layout-test-2.html +1 -1
  340. package/examples/pages/playgrounds/list-item-test.html +1 -1
  341. package/examples/pages/playgrounds/master-desk.html +2 -4
  342. package/examples/pages/playgrounds/media-carousel.html +1 -1
  343. package/examples/pages/playgrounds/photo-desk.html +1 -1
  344. package/examples/pages/playgrounds/planning.html +1 -1
  345. package/examples/pages/playgrounds/publish.html +1 -1
  346. package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
  347. package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
  348. package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
  349. package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
  350. package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
  351. package/examples/pages/playgrounds/publisher-output-control.html +1 -1
  352. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +156 -0
  353. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  354. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  355. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +8 -1
  356. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  357. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  358. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  359. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
  360. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
  361. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
  362. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +631 -24
  363. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  364. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  365. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  366. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  367. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  368. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  369. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  370. package/examples/pages/playgrounds/swimlane-view.html +1 -1
  371. package/examples/pages/playgrounds/toasts.html +1 -1
  372. package/examples/pages/playgrounds/video-editor.html +1 -1
  373. package/examples/pages/react/Alerts.tsx +91 -18
  374. package/examples/pages/react/Avatar.tsx +314 -127
  375. package/examples/pages/react/Badges.tsx +18 -0
  376. package/examples/pages/react/BoxedList.tsx +362 -0
  377. package/examples/pages/react/ButtonGroups.tsx +66 -65
  378. package/examples/pages/react/Buttons.tsx +65 -113
  379. package/examples/pages/react/Carousel.tsx +2 -3
  380. package/examples/pages/react/Checkboxs.tsx +66 -25
  381. package/examples/pages/react/Container.tsx +143 -0
  382. package/examples/pages/react/ContentDivider.tsx +22 -18
  383. package/examples/pages/react/ContentList.tsx +462 -0
  384. package/examples/pages/react/CreateButton.tsx +71 -0
  385. package/examples/pages/react/DatePicker.tsx +31 -6
  386. package/examples/pages/react/DropZone.tsx +111 -0
  387. package/examples/pages/react/Dropdowns.tsx +580 -48
  388. package/examples/pages/react/DurationInput.tsx +108 -0
  389. package/examples/pages/react/Heading.tsx +106 -0
  390. package/examples/pages/react/IconButtons.tsx +51 -21
  391. package/examples/pages/react/IconFont.tsx +7 -6
  392. package/examples/pages/react/IconLabels.tsx +24 -2
  393. package/examples/pages/react/IconPicker.tsx +65 -0
  394. package/examples/pages/react/Index.tsx +125 -19
  395. package/examples/pages/react/Inputs.tsx +289 -6
  396. package/examples/pages/react/Labels.tsx +51 -1
  397. package/examples/pages/react/LeftNavigations.tsx +194 -15
  398. package/examples/pages/react/ListItems.tsx +34 -0
  399. package/examples/pages/react/Modal.tsx +8 -7
  400. package/examples/pages/react/MultiSelect.tsx +201 -0
  401. package/examples/pages/react/NavButtons.tsx +35 -5
  402. package/examples/pages/react/Panel.tsx +366 -0
  403. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  404. package/examples/pages/react/RadioGroup.tsx +351 -0
  405. package/examples/pages/react/SelectGrid.tsx +121 -0
  406. package/examples/pages/react/SelectWithTemplate.tsx +6 -1
  407. package/examples/pages/react/Selects.tsx +57 -0
  408. package/examples/pages/react/SimpleList.tsx +148 -0
  409. package/examples/pages/react/SubNav.tsx +65 -18
  410. package/examples/pages/react/TableList.tsx +161 -0
  411. package/examples/pages/react/Tags.tsx +57 -5
  412. package/examples/pages/react/Text.tsx +134 -0
  413. package/examples/pages/react/TimePicker.tsx +22 -12
  414. package/examples/pages/react/Togglebox.tsx +1 -1
  415. package/examples/pages/react/TreeSelect.tsx +422 -0
  416. package/examples/pages/react/WithSizeObserver.tsx +44 -0
  417. package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
  418. package/examples/pages/react/tree-select/example-1.tsx +71 -0
  419. package/examples/pages/react/tree-select/example-2.tsx +59 -0
  420. package/examples/pages/react.html +4 -0
  421. package/package.json +16 -11
  422. package/react/components/Alert.d.ts +3 -0
  423. package/react/components/Alert.js +17 -7
  424. package/react/components/Autocomplete.js +16 -12
  425. package/react/components/Avatar.d.ts +9 -0
  426. package/react/components/Avatar.js +24 -4
  427. package/react/components/Badge.d.ts +1 -0
  428. package/react/components/Badge.js +9 -7
  429. package/react/components/Button.d.ts +2 -0
  430. package/react/components/Button.js +12 -8
  431. package/react/components/ButtonGroup.d.ts +3 -2
  432. package/react/components/ButtonGroup.js +9 -7
  433. package/react/components/Carousel.js +5 -3
  434. package/react/components/CheckButtonGroup.d.ts +3 -1
  435. package/react/components/CheckButtonGroup.js +14 -6
  436. package/react/components/CheckGroup.d.ts +1 -0
  437. package/react/components/CheckGroup.js +6 -4
  438. package/react/components/Checkbox.d.ts +2 -1
  439. package/react/components/Checkbox.js +7 -5
  440. package/react/components/CheckboxButton.d.ts +1 -0
  441. package/react/components/CheckboxButton.js +8 -6
  442. package/react/components/ContentDivider.d.ts +1 -0
  443. package/react/components/ContentDivider.js +10 -6
  444. package/react/components/CreateButton.d.ts +17 -0
  445. package/react/components/CreateButton.js +68 -0
  446. package/react/components/DatePicker.d.ts +11 -0
  447. package/react/components/DatePicker.js +45 -31
  448. package/react/components/Divider.js +6 -4
  449. package/react/components/DonutChart.d.ts +1 -1
  450. package/react/components/DonutChart.js +24 -6
  451. package/react/components/DropZone.d.ts +25 -0
  452. package/react/components/DropZone.js +95 -0
  453. package/react/components/Dropdown.d.ts +7 -5
  454. package/react/components/Dropdown.js +64 -36
  455. package/react/components/DropdownFirst.js +18 -11
  456. package/react/components/DurationInput.d.ts +42 -0
  457. package/react/components/DurationInput.js +364 -0
  458. package/react/components/EmptyState.d.ts +1 -0
  459. package/react/components/EmptyState.js +8 -6
  460. package/react/components/Form/FormGroup.d.ts +13 -0
  461. package/react/components/Form/FormGroup.js +63 -0
  462. package/react/components/Form/FormItem.d.ts +9 -0
  463. package/react/components/Form/FormItem.js +56 -0
  464. package/react/components/Form/FormLabel.d.ts +13 -0
  465. package/react/components/Form/FormLabel.js +62 -0
  466. package/react/components/Form/FormRow.d.ts +17 -0
  467. package/react/components/Form/FormRow.js +64 -0
  468. package/react/components/Form/FormRowNew.d.ts +12 -0
  469. package/react/components/Form/FormRowNew.js +67 -0
  470. package/react/components/Form/FormText.d.ts +8 -0
  471. package/react/components/Form/FormText.js +49 -0
  472. package/react/components/Form/InputBase.d.ts +41 -0
  473. package/react/components/Form/InputBase.js +86 -0
  474. package/react/components/Form/InputNew.d.ts +45 -0
  475. package/react/components/Form/InputNew.js +75 -0
  476. package/react/components/Form/InputWrapper.d.ts +28 -0
  477. package/react/components/Form/InputWrapper.js +91 -0
  478. package/react/components/Form/index.d.ts +9 -0
  479. package/react/components/Form/index.js +21 -0
  480. package/react/components/FormLabel.js +5 -3
  481. package/react/components/GridItem.js +9 -7
  482. package/react/components/GridList.js +8 -6
  483. package/react/components/HeadingText.js +4 -2
  484. package/react/components/HelloWorld.js +4 -2
  485. package/react/components/Icon.d.ts +2 -1
  486. package/react/components/Icon.js +9 -6
  487. package/react/components/IconButton.d.ts +9 -2
  488. package/react/components/IconButton.js +17 -7
  489. package/react/components/IconLabel.d.ts +2 -0
  490. package/react/components/IconLabel.js +12 -7
  491. package/react/components/IconPicker.d.ts +24 -0
  492. package/react/components/IconPicker.js +287 -0
  493. package/react/components/Input.d.ts +25 -3
  494. package/react/components/Input.js +22 -26
  495. package/react/components/Label.d.ts +2 -0
  496. package/react/components/Label.js +44 -11
  497. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  498. package/react/components/Layouts/AuthorinInnerSideBar.js +49 -0
  499. package/react/components/Layouts/AuthoringContainer.d.ts +12 -0
  500. package/react/components/Layouts/AuthoringContainer.js +60 -0
  501. package/react/components/Layouts/AuthoringFrame.d.ts +19 -0
  502. package/react/components/Layouts/AuthoringFrame.js +58 -0
  503. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  504. package/react/components/Layouts/AuthoringFrameContainer.js +49 -0
  505. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  506. package/react/components/Layouts/AuthoringFrameLeftBar.js +49 -0
  507. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  508. package/react/components/Layouts/AuthoringFrameMain.js +49 -0
  509. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  510. package/react/components/Layouts/AuthoringFrameNavBar.js +49 -0
  511. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  512. package/react/components/Layouts/AuthoringFrameOverlay.js +49 -0
  513. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +15 -0
  514. package/react/components/Layouts/AuthoringFrameRightBar.js +60 -0
  515. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  516. package/react/components/Layouts/AuthoringFrameSidePanel.js +58 -0
  517. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  518. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +58 -0
  519. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  520. package/react/components/Layouts/AuthoringInnerBody.js +49 -0
  521. package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
  522. package/react/components/Layouts/AuthoringInnerHeader.js +68 -0
  523. package/react/components/Layouts/AuthoringMain.d.ts +14 -0
  524. package/react/components/Layouts/AuthoringMain.js +55 -0
  525. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  526. package/react/components/Layouts/AuthoringMainContainer.js +49 -0
  527. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  528. package/react/components/Layouts/AuthoringMainContent.js +49 -0
  529. package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
  530. package/react/components/Layouts/AuthoringMainToolBar.js +56 -0
  531. package/react/components/Layouts/BottomBarAction.d.ts +12 -0
  532. package/react/components/Layouts/BottomBarAction.js +59 -0
  533. package/react/components/Layouts/Container.d.ts +14 -0
  534. package/react/components/Layouts/Container.js +62 -0
  535. package/react/components/Layouts/ContentSplitter.d.ts +10 -0
  536. package/react/components/Layouts/ContentSplitter.js +58 -0
  537. package/react/components/Layouts/CoreLayout.d.ts +20 -0
  538. package/react/components/Layouts/CoreLayout.js +55 -0
  539. package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
  540. package/react/components/Layouts/CoreLayoutContainer.js +49 -0
  541. package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
  542. package/react/components/Layouts/CoreLayoutFooter.js +49 -0
  543. package/react/components/Layouts/CoreLayoutMain.d.ts +10 -0
  544. package/react/components/Layouts/CoreLayoutMain.js +56 -0
  545. package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
  546. package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
  547. package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
  548. package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
  549. package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
  550. package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
  551. package/react/components/Layouts/HamburgerButton.d.ts +14 -0
  552. package/react/components/Layouts/HamburgerButton.js +63 -0
  553. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  554. package/react/components/Layouts/HeaderPanel.js +49 -0
  555. package/react/components/Layouts/Layout.d.ts +8 -0
  556. package/react/components/Layouts/Layout.js +36 -0
  557. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  558. package/react/components/Layouts/LayoutContainer.js +49 -0
  559. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  560. package/react/components/Layouts/LeftPanel.js +56 -0
  561. package/react/components/Layouts/MainMenu.d.ts +41 -0
  562. package/react/components/Layouts/MainMenu.js +103 -0
  563. package/react/components/Layouts/MainPanel.d.ts +11 -0
  564. package/react/components/Layouts/MainPanel.js +59 -0
  565. package/react/components/Layouts/NotificationPanel.d.ts +45 -0
  566. package/react/components/Layouts/NotificationPanel.js +110 -0
  567. package/react/components/Layouts/OverlayPanel.d.ts +8 -0
  568. package/react/components/Layouts/OverlayPanel.js +51 -0
  569. package/react/components/Layouts/PageLayout.d.ts +16 -0
  570. package/react/components/Layouts/PageLayout.js +66 -0
  571. package/react/components/Layouts/Panel.d.ts +66 -0
  572. package/react/components/Layouts/Panel.js +168 -0
  573. package/react/components/Layouts/RightPanel.d.ts +9 -0
  574. package/react/components/Layouts/RightPanel.js +49 -0
  575. package/react/components/Layouts/index.d.ts +39 -0
  576. package/react/components/Layouts/index.js +86 -0
  577. package/react/components/LeftMenu.d.ts +13 -4
  578. package/react/components/LeftMenu.js +71 -18
  579. package/react/components/ListItemLoader.d.ts +4 -0
  580. package/react/components/ListItemLoader.js +64 -0
  581. package/react/components/Lists/BoxedList.d.ts +44 -0
  582. package/react/components/Lists/BoxedList.js +160 -0
  583. package/react/components/Lists/ContentList.d.ts +51 -0
  584. package/react/components/Lists/ContentList.js +110 -0
  585. package/react/components/Lists/SimpleList.d.ts +21 -0
  586. package/react/components/Lists/SimpleList.js +80 -0
  587. package/react/components/Lists/TableList.d.ts +64 -0
  588. package/react/components/Lists/TableList.js +240 -0
  589. package/react/components/Lists/index.d.ts +2 -0
  590. package/react/components/Lists/index.js +10 -0
  591. package/react/components/Loader.js +4 -2
  592. package/react/components/Menu.d.ts +2 -1
  593. package/react/components/Menu.js +48 -12
  594. package/react/components/Modal.d.ts +4 -1
  595. package/react/components/Modal.js +35 -6
  596. package/react/components/MultiSelect.d.ts +40 -0
  597. package/react/components/MultiSelect.js +70 -0
  598. package/react/components/NavButton.d.ts +2 -1
  599. package/react/components/NavButton.js +9 -4
  600. package/react/components/Navigation/BottomNav.d.ts +24 -0
  601. package/react/components/Navigation/BottomNav.js +88 -0
  602. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  603. package/react/components/Navigation/QuickNavBar.js +117 -0
  604. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  605. package/react/components/Navigation/SideBarMenu.js +79 -0
  606. package/react/components/Navigation/SideBarTabs.d.ts +23 -0
  607. package/react/components/Navigation/SideBarTabs.js +88 -0
  608. package/react/components/Navigation/index.d.ts +3 -0
  609. package/react/components/Navigation/index.js +9 -0
  610. package/react/components/Popover.js +4 -2
  611. package/react/components/PropsList.js +4 -2
  612. package/react/components/RadioButtonGroup.d.ts +29 -0
  613. package/react/components/RadioButtonGroup.js +91 -0
  614. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  615. package/react/components/{Radio.js → RadioGroup.js} +20 -14
  616. package/react/components/SearchBar.d.ts +24 -0
  617. package/react/components/SearchBar.js +113 -0
  618. package/react/components/Select.d.ts +9 -2
  619. package/react/components/Select.js +9 -20
  620. package/react/components/SelectGrid.d.ts +45 -0
  621. package/react/components/SelectGrid.js +200 -0
  622. package/react/components/SelectWithTemplate.d.ts +11 -1
  623. package/react/components/SelectWithTemplate.js +23 -12
  624. package/react/components/Skeleton.d.ts +30 -0
  625. package/react/components/Skeleton.js +76 -0
  626. package/react/components/SlidingToolbar.d.ts +1 -1
  627. package/react/components/SlidingToolbar.js +15 -3
  628. package/react/components/Spinner.d.ts +11 -0
  629. package/react/components/Spinner.js +71 -0
  630. package/react/components/StrechBar.js +4 -2
  631. package/react/components/SubNav.d.ts +8 -1
  632. package/react/components/SubNav.js +28 -8
  633. package/react/components/Switch.d.ts +4 -1
  634. package/react/components/Switch.js +25 -11
  635. package/react/components/SwitchGroup.d.ts +1 -0
  636. package/react/components/SwitchGroup.js +6 -4
  637. package/react/components/TabCustom.d.ts +0 -1
  638. package/react/components/TabCustom.js +11 -7
  639. package/react/components/TabList.js +6 -4
  640. package/react/components/Tag.d.ts +3 -2
  641. package/react/components/Tag.js +21 -9
  642. package/react/components/TagInput.d.ts +0 -1
  643. package/react/components/TagInput.js +7 -6
  644. package/react/components/TagInputTest.js +13 -9
  645. package/react/components/Text/Heading.d.ts +15 -0
  646. package/react/components/Text/Heading.js +79 -0
  647. package/react/components/Text/Text.d.ts +15 -0
  648. package/react/components/Text/Text.js +67 -0
  649. package/react/components/Text/Time.d.ts +15 -0
  650. package/react/components/Text/Time.js +65 -0
  651. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  652. package/react/components/ThemeSelector.js +114 -0
  653. package/react/components/TimePicker.d.ts +11 -1
  654. package/react/components/TimePicker.js +14 -5
  655. package/react/components/Toast.js +1 -1
  656. package/react/components/ToastMessage.js +6 -5
  657. package/react/components/ToastText.js +1 -1
  658. package/react/components/ToastWrapper.d.ts +2 -2
  659. package/react/components/ToastWrapper.js +14 -10
  660. package/react/components/Togglebox.d.ts +2 -1
  661. package/react/components/Togglebox.js +42 -14
  662. package/react/components/Tooltip.d.ts +1 -0
  663. package/react/components/Tooltip.js +14 -10
  664. package/react/components/TreeSelect.d.ts +82 -0
  665. package/react/components/TreeSelect.js +521 -0
  666. package/react/components/WithSizeObserver.d.ts +25 -0
  667. package/react/components/WithSizeObserver.js +95 -0
  668. package/react/components/_Positioner.js +4 -2
  669. package/react/helpers.d.ts +1 -0
  670. package/react/helpers.js +7 -0
  671. package/react/index.d.ts +28 -3
  672. package/react/index.js +66 -4
  673. package/app/styles/variables/_design-tokens-general.scss +0 -136
  674. package/app-typescript/components/Radio.tsx +0 -57
  675. package/app-typescript/components/RadioButton.tsx +0 -57
  676. package/dist/react/Radios.tsx +0 -391
  677. package/examples/pages/react/Radios.tsx +0 -391
  678. package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
  679. package/react/components/RadioButton.js +0 -65
@@ -6,7 +6,6 @@ import { ButtonGroup, Button, NavButton, Dropdown } from '../../../app-typescrip
6
6
  import {
7
7
  Switch,
8
8
  Route,
9
-
10
9
  } from "react-router-dom";
11
10
 
12
11
  import InputsDoc from './Inputs';
@@ -24,10 +23,11 @@ import TooltipDoc from './Tooltips';
24
23
  import DatePickerDoc from './DatePicker';
25
24
  import TimePickerDoc from './TimePicker';
26
25
  import SwitchDoc from './Switch';
27
- import RadiosDoc from './Radios';
26
+ import RadioGroupDoc from './RadioGroup';
28
27
  import CheckboxsDoc from './Checkboxs';
29
28
  import TabsDoc from './Tabs';
30
29
  import LeftNavigationsDoc from './LeftNavigations';
30
+ import QuickNavBarDoc from './QuickNavigationBar';
31
31
  import NavButtonsDoc from './NavButtons';
32
32
  import IconFontDoc from './IconFont';
33
33
  import BigIconFontDoc from './BigIconFont';
@@ -43,11 +43,28 @@ import ModalDoc from './Modal';
43
43
  import CarouselDoc from './Carousel';
44
44
  import ContentDividerDoc from './ContentDivider';
45
45
  import ToggleboxDocs from './Togglebox';
46
+ import ListItemsDoc from './ListItems';
47
+ import PanelDoc from './Panel';
48
+ import SelectGridDocs from './SelectGrid';
49
+ import IconPickerDocs from "./IconPicker";
50
+ import SimpleListDoc from "./SimpleList";
51
+ import BoxedListDoc from "./BoxedList";
52
+ import TableListDoc from "./TableList";
53
+ import ContentListDoc from "./ContentList";
54
+ import HeadingDoc from "./Heading";
55
+ import TextDoc from "./Text";
56
+ import ContainerDoc from './Container';
57
+ import DropZoneDoc from './DropZone';
58
+ import CreateButtonDoc from './CreateButton';
46
59
 
47
60
  import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
48
61
  import { SelectWithTemplateDocs } from './SelectWithTemplate';
62
+ import { MultiselectDocs } from './MultiSelect';
63
+ import { TreeSelectDocs } from './TreeSelect';
64
+ import DurationInputDoc from './DurationInput';
49
65
  import { PopoverDoc } from './Popover';
50
66
  import { MenuDocs } from './Menu';
67
+ import {WithSizeObserverDocs} from './WithSizeObserver';
51
68
 
52
69
  const pages = {
53
70
  basicComponents: {
@@ -115,6 +132,9 @@ const pages = {
115
132
  'left-navigation': {
116
133
  name: 'Left navigation'
117
134
  },
135
+ 'Quick-navigation-bar': {
136
+ name: 'Quick navigation bar'
137
+ },
118
138
  'sub-navigation': {
119
139
  name: 'Sub navigation bar'
120
140
  },
@@ -123,26 +143,63 @@ const pages = {
123
143
  containerComponents: {
124
144
  name: "Containers",
125
145
  items: {
146
+ 'container': {
147
+ name: 'Container component'
148
+ },
126
149
  'empty-states': {
127
150
  name: 'Empty states'
128
151
  },
129
152
  'grid-item': {
130
153
  name: 'Grid Item'
131
154
  },
155
+ 'panel': {
156
+ name: 'Panel'
157
+ },
132
158
  }
133
159
  },
134
160
  layoutComponents: {
135
161
  name: "Layout",
136
162
  items: {
137
- 'grid-list': {
138
- name: 'Grid List'
139
- },
140
163
  'content-divider': {
141
164
  name: 'Content Divider'
142
165
  },
143
166
  "togglebox": {
144
167
  name: "Togglebox"
145
- }
168
+ },
169
+ }
170
+ },
171
+ textComponents: {
172
+ name: "Text",
173
+ items: {
174
+ 'heading': {
175
+ name: 'Heading component'
176
+ },
177
+ 'text': {
178
+ name: 'Text component'
179
+ },
180
+ }
181
+ },
182
+ listComponents: {
183
+ name: "Lists",
184
+ items: {
185
+ 'grid-list': {
186
+ name: 'Grid List'
187
+ },
188
+ 'list-items': {
189
+ name: 'List items'
190
+ },
191
+ 'simple-list': {
192
+ name: 'Simple list'
193
+ },
194
+ 'boxed-list': {
195
+ name: 'Boxed list'
196
+ },
197
+ 'table-list': {
198
+ name: 'Table list'
199
+ },
200
+ 'content-list': {
201
+ name: 'Content list'
202
+ },
146
203
  }
147
204
  },
148
205
  formComponents: {
@@ -160,24 +217,48 @@ const pages = {
160
217
  'select': {
161
218
  name: 'Select',
162
219
  },
220
+ 'select-grid': {
221
+ name: 'Select Grid',
222
+ },
163
223
  'select-with-template': {
164
224
  name: 'Select with template',
165
225
  },
226
+ 'with-size-observer': {
227
+ name: 'With size observer',
228
+ },
229
+ 'multiselect': {
230
+ name: 'MultiSelect',
231
+ },
232
+ 'treeselect': {
233
+ name: 'TreeSelect',
234
+ },
166
235
  'date-picker': {
167
236
  name: 'Date Picker',
168
237
  },
169
238
  'time-picker': {
170
239
  name: 'Time Picker',
171
240
  },
241
+ 'icon-picker': {
242
+ name: 'Icon Picker',
243
+ },
244
+ 'duration-input': {
245
+ name: 'Duration Input',
246
+ },
172
247
  'switch': {
173
248
  name: 'Switch'
174
249
  },
175
- 'radio': {
176
- name: 'Radio'
250
+ 'radiogroup': {
251
+ name: 'RadioGroup'
177
252
  },
178
253
  'checkbox': {
179
254
  name: 'Checkbox'
180
- }
255
+ },
256
+ 'dropzone': {
257
+ name: 'DropZone'
258
+ },
259
+ 'create-button': {
260
+ name: 'CreateButton'
261
+ },
181
262
  }
182
263
  },
183
264
  generalComponents: {
@@ -196,40 +277,48 @@ interface IProps {
196
277
  theme?: string;
197
278
  }
198
279
  interface IState {
199
- theme: 'dark' | 'light' | string;
280
+ theme: 'dark-ui' | 'light-ui' | string;
200
281
  }
201
282
 
202
283
  class ReactDoc extends React.Component<IProps, IState> {
203
284
  constructor(props: IProps) {
204
285
  super(props);
205
286
  this.state = {
206
- theme: 'light',
287
+ theme: 'light-ui',
207
288
  }
208
289
  this.handleTheme = this.handleTheme.bind(this);
209
290
  }
291
+
210
292
  handleTheme(newTheme: string) {
293
+ document.body.setAttribute('data-theme', newTheme);
294
+
211
295
  this.setState({
212
296
  theme: newTheme
213
297
  })
214
298
  }
299
+
300
+ checkTheme(theme: string) {
301
+ return this.state.theme === theme;
302
+ }
303
+
215
304
  render() {
216
305
  return (
217
306
  <React.Fragment>
218
307
  <ReactNav pages={pages} />
219
- <main className="docs-page__content docs-page__container-fluid" data-theme={this.state.theme}>
308
+ <main className="docs-page__content docs-page__container-fluid">
220
309
  <div className="docs-page__fla-button-container">
221
310
  <Dropdown
222
311
  items={[
223
312
  {
224
313
  type: 'group', label: 'Chose a theme', items: [
225
314
  'divider',
226
- { label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
227
- { label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
228
- { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
315
+ { label: 'Light', icon: 'adjust', active: this.checkTheme('light-ui'), onSelect: () => this.handleTheme('light-ui') },
316
+ { label: 'Dark', icon: 'adjust', active: this.checkTheme('dark-ui'), onSelect: () => this.handleTheme('dark-ui') },
317
+ { label: 'Accessible Light', active: this.checkTheme('accessible-light-ui'), icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui') },
229
318
  ]
230
319
  },
231
320
  ]}>
232
- <button className="docs-page__fla-button" aria-label="Change theme" onClick={()=> false}>
321
+ <button className="docs-page__fla-button" aria-label="Change theme" onClick={() => false}>
233
322
  <i className="icon-adjust"></i>
234
323
  </button>
235
324
  </Dropdown>
@@ -249,14 +338,19 @@ class ReactDoc extends React.Component<IProps, IState> {
249
338
  <Route path="/react/autocomplete" component={AutocompleteDoc} />
250
339
  <Route path="/react/select" component={SelectsDoc} />
251
340
  <Route path="/react/select-with-template" component={SelectWithTemplateDocs} />
341
+ <Route path="/react/with-size-observer" component={WithSizeObserverDocs} />
342
+ <Route path="/react/multiselect" component={MultiselectDocs} />
343
+ <Route path="/react/treeselect" component={TreeSelectDocs} />
344
+ <Route path="/react/duration-input" component={DurationInputDoc} />
252
345
  <Route path="/react/popover" component={PopoverDoc} />
253
346
  <Route path="/react/date-picker" component={DatePickerDoc} />
254
347
  <Route path="/react/time-picker" component={TimePickerDoc} />
255
348
  <Route path="/react/switch" component={SwitchDoc} />
256
- <Route path="/react/radio" component={RadiosDoc} />
349
+ <Route path="/react/radiogroup" component={RadioGroupDoc} />
257
350
  <Route path="/react/checkbox" component={CheckboxsDoc} />
258
351
  <Route path="/react/tab" component={TabsDoc} />
259
352
  <Route path="/react/left-navigation" component={LeftNavigationsDoc} />
353
+ <Route path="/react/Quick-navigation-bar" component={QuickNavBarDoc} />
260
354
  <Route path="/react/nav-buttons" component={NavButtonsDoc} />
261
355
  <Route path="/react/icon-font" component={IconFontDoc} />
262
356
  <Route path="/react/big-icon-font" component={BigIconFontDoc} />
@@ -272,6 +366,19 @@ class ReactDoc extends React.Component<IProps, IState> {
272
366
  <Route path="/react/content-divider" component={ContentDividerDoc} />
273
367
  <Route path="/react/menu" component={MenuDocs} />
274
368
  <Route path="/react/togglebox" component={ToggleboxDocs} />
369
+ <Route path="/react/list-items" component={ListItemsDoc} />
370
+ <Route path="/react/panel" component={PanelDoc} />
371
+ <Route path="/react/select-grid" component={SelectGridDocs} />
372
+ <Route path="/react/icon-picker" component={IconPickerDocs} />
373
+ <Route path="/react/simple-list" component={SimpleListDoc} />
374
+ <Route path="/react/boxed-list" component={BoxedListDoc} />
375
+ <Route path="/react/table-list" component={TableListDoc} />
376
+ <Route path="/react/content-list" component={ContentListDoc} />
377
+ <Route path="/react/heading" component={HeadingDoc} />
378
+ <Route path="/react/text" component={TextDoc} />
379
+ <Route path="/react/container" component={ContainerDoc} />
380
+ <Route path="/react/dropzone" component={DropZoneDoc} />
381
+ <Route path="/react/create-button" component={CreateButtonDoc} />
275
382
  <Route path="/" component={ReactDefault} />
276
383
  </Switch>
277
384
  </main>
@@ -296,10 +403,9 @@ class ReactPlayground extends React.Component<IProps> {
296
403
 
297
404
  const parsePlayground = ({ match }, playgrounds) => {
298
405
  const Component = Playgrounds[playgrounds[match.params.id].component];
299
-
300
406
  return (
301
407
  <Component />
302
408
  );
303
409
  };
304
410
 
305
- export { ReactDoc, ReactPlayground };
411
+ export { ReactDoc, ReactPlayground };
@@ -1,14 +1,16 @@
1
1
  import * as React from 'react';
2
-
3
2
  import * as Markup from '../../js/react';
3
+ import { Input, CheckGroup, Checkbox, PropsList, Prop, InputNew } from '../../../app-typescript';
4
+ import { DurationInput } from '../../../app-typescript/components/DurationInput';
4
5
 
5
- import { Input, Select, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
6
6
 
7
7
  interface IState {
8
8
  inlineLabel: boolean;
9
9
  required: boolean;
10
10
  disabled: boolean;
11
11
  invalid: boolean;
12
+ value: any;
13
+ value2: any;
12
14
  }
13
15
 
14
16
  export default class InputsDoc extends React.Component<{}, IState> {
@@ -18,7 +20,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
18
20
  inlineLabel: false,
19
21
  required: true,
20
22
  disabled: false,
21
- invalid: false
23
+ invalid: false,
24
+ value: null,
25
+ value2: '',
22
26
  }
23
27
  }
24
28
 
@@ -42,18 +46,168 @@ export default class InputsDoc extends React.Component<{}, IState> {
42
46
  <Checkbox checked={this.state.inlineLabel} label={{text:'Label positioned inline'}} onChange={(value) => {this.setState({inlineLabel: value})}} />
43
47
  </CheckGroup>
44
48
  </div>
49
+ <div className='form__row'>
50
+ <InputNew
51
+ label='Label'
52
+ value=''
53
+ onChange={(value) => false
54
+ }
55
+
56
+ required={true}
57
+ info='Nullam Sollicitudin'
58
+ maxLength={20}
59
+ //invalid={true}
60
+ //disabled={true}
61
+ error='Error message'
62
+ //inlineLabel={true}
63
+ //labelHidden={true}
64
+ type='text' />
65
+ </div>
45
66
 
46
67
  <div className='form__row'>
47
68
  <Input label='Input label'
48
- value='This is some value'
69
+ value={''}
49
70
  maxLength={30}
71
+ type='text'
50
72
  error='This is error message'
51
73
  info='This is some hint message'
52
74
  inlineLabel={this.state.inlineLabel}
53
75
  required={this.state.required}
54
76
  disabled={this.state.disabled}
55
77
  invalid={this.state.invalid}
56
- onChange={(value) => {}} />
78
+ tabindex={0}
79
+ onChange={(value) => this.setState({value2: value})} />
80
+ </div>
81
+ <div className='form__row'>
82
+ <Input label='Number Input'
83
+ value={this.state.value}
84
+ type='number'
85
+ error='This is error message'
86
+ info='Morbi leo risus porta ac consectetur ac.'
87
+ inlineLabel={this.state.inlineLabel}
88
+ required={this.state.required}
89
+ disabled={this.state.disabled}
90
+ invalid={this.state.invalid}
91
+ tabindex={0}
92
+ onChange={(value) => this.setState({value: value})} />
93
+ </div>
94
+ <p className="docs-page__paragraph">// Hidden label</p>
95
+ <div className='form__row'>
96
+ <Input label='Input label'
97
+ value={''}
98
+ maxLength={25}
99
+ type='text'
100
+ placeholder='Placeholder'
101
+ error='This is error message'
102
+ info='Donec id elit non mi porta gravida at eget metus.'
103
+ inlineLabel={true}
104
+ labelHidden={true}
105
+ required={this.state.required}
106
+ disabled={this.state.disabled}
107
+ invalid={this.state.invalid}
108
+ tabindex={0}
109
+ onChange={(value) => this.setState({value2: value})} />
110
+ </div>
111
+
112
+ <p className="docs-page__paragraph">// Boxed with hidden label</p>
113
+ <div className='form__row'>
114
+ <Input label='Input label'
115
+ value={''}
116
+ boxedStyle={true}
117
+ maxLength={25}
118
+ type='text'
119
+ placeholder='Default boxed input'
120
+ error='This is error message'
121
+ inlineLabel={true}
122
+ labelHidden={true}
123
+ required={this.state.required}
124
+ disabled={this.state.disabled}
125
+ invalid={this.state.invalid}
126
+ tabindex={0}
127
+ onChange={(value) => this.setState({value2: value})} />
128
+ </div>
129
+ <div className='form__row'>
130
+ <Input label='Input label'
131
+ value={''}
132
+ boxedStyle={true}
133
+ size='large'
134
+ maxLength={25}
135
+ type='text'
136
+ placeholder='Large boxed input'
137
+ error='This is error message'
138
+ inlineLabel={true}
139
+ labelHidden={true}
140
+ required={this.state.required}
141
+ disabled={this.state.disabled}
142
+ invalid={this.state.invalid}
143
+ tabindex={0}
144
+ onChange={(value) => this.setState({value2: value})} />
145
+ </div>
146
+ <div className='form__row'>
147
+ <Input label='Input label'
148
+ value={''}
149
+ boxedStyle={true}
150
+ size='x-large'
151
+ maxLength={25}
152
+ type='text'
153
+ placeholder='Extra large boxed input'
154
+ error='This is error message'
155
+ inlineLabel={true}
156
+ labelHidden={true}
157
+ required={this.state.required}
158
+ disabled={this.state.disabled}
159
+ invalid={this.state.invalid}
160
+ tabindex={0}
161
+ onChange={(value) => this.setState({value2: value})} />
162
+ </div>
163
+ <p className="docs-page__paragraph">// Boxed with default label</p>
164
+ <div className='form__row'>
165
+ <Input label='Input label'
166
+ value={''}
167
+ boxedStyle={true}
168
+ size='large'
169
+ maxLength={25}
170
+ placeholder='Placeholder'
171
+ type='text'
172
+ error='This is error message'
173
+ required={this.state.required}
174
+ disabled={this.state.disabled}
175
+ invalid={this.state.invalid}
176
+ tabindex={0}
177
+ onChange={(value) => this.setState({value2: value})} />
178
+ </div>
179
+ <p className="docs-page__paragraph">// Boxed with boxed label</p>
180
+ <div className='form__row'>
181
+ <Input label='Input label'
182
+ value={''}
183
+ boxedStyle={true}
184
+ boxedLable={true}
185
+ size='large'
186
+ maxLength={25}
187
+ placeholder='Placeholder'
188
+ type='text'
189
+ error='This is error message'
190
+ required={this.state.required}
191
+ disabled={this.state.disabled}
192
+ invalid={this.state.invalid}
193
+ tabindex={0}
194
+ onChange={(value) => this.setState({value2: value})} />
195
+ </div>
196
+ <div className='form__row'>
197
+ <Input label='Input label'
198
+ value={''}
199
+ boxedStyle={true}
200
+ boxedLable={true}
201
+ size='large'
202
+ placeholder='Hide my label'
203
+ labelHidden={true}
204
+ type='text'
205
+ error='This is error message'
206
+ required={this.state.required}
207
+ disabled={this.state.disabled}
208
+ invalid={this.state.invalid}
209
+ tabindex={0}
210
+ onChange={(value) => this.setState({value2: value})} />
57
211
  </div>
58
212
  </div>
59
213
 
@@ -69,12 +223,135 @@ export default class InputsDoc extends React.Component<{}, IState> {
69
223
  disabled={false}
70
224
  invalid={false}
71
225
  onChange={(value) => {}} />
226
+
227
+ <Input label='Number Input'
228
+ value={this.state.value}
229
+ type='number'
230
+ error='This is error message'
231
+ info='Morbi leo risus porta ac consectetur ac.'
232
+ inlineLabel={this.state.inlineLabel}
233
+ required={this.state.required}
234
+ disabled={this.state.disabled}
235
+ invalid={this.state.invalid}
236
+ tabindex={0}
237
+ onChange={(value) => {}} />
238
+
239
+ // Hidden label
240
+ <Input label='Input label'
241
+ value={''}
242
+ maxLength={25}
243
+ type='text'
244
+ placeholder='Placeholder'
245
+ error='This is error message'
246
+ info='Donec id elit non mi porta gravida at eget metus.'
247
+ inlineLabel={true}
248
+ labelHidden={true}
249
+ required={this.state.required}
250
+ disabled={this.state.disabled}
251
+ invalid={this.state.invalid}
252
+ tabindex={0}
253
+ onChange={(value) => {}} />
254
+
255
+ // Boxed with hidden label
256
+ <Input label='Input label'
257
+ value={''}
258
+ boxedStyle={true}
259
+ maxLength={25}
260
+ type='text'
261
+ placeholder='Default boxed input'
262
+ error='This is error message'
263
+ inlineLabel={true}
264
+ labelHidden={true}
265
+ required={this.state.required}
266
+ disabled={this.state.disabled}
267
+ invalid={this.state.invalid}
268
+ tabindex={0}
269
+ onChange={(value) => {}} />
270
+
271
+ <Input label='Input label'
272
+ value={''}
273
+ boxedStyle={true}
274
+ size='large'
275
+ maxLength={25}
276
+ type='text'
277
+ placeholder='Large boxed input'
278
+ error='This is error message'
279
+ inlineLabel={true}
280
+ labelHidden={true}
281
+ required={this.state.required}
282
+ disabled={this.state.disabled}
283
+ invalid={this.state.invalid}
284
+ tabindex={0}
285
+ onChange={(value) => {}} />
286
+
287
+ <Input label='Input label'
288
+ value={''}
289
+ boxedStyle={true}
290
+ size='x-large'
291
+ maxLength={25}
292
+ type='text'
293
+ placeholder='Extra large boxed input'
294
+ error='This is error message'
295
+ inlineLabel={true}
296
+ labelHidden={true}
297
+ required={this.state.required}
298
+ disabled={this.state.disabled}
299
+ invalid={this.state.invalid}
300
+ tabindex={0}
301
+ onChange={(value) => {}} />
302
+
303
+ // Boxed with default label
304
+ <Input label='Input label'
305
+ value={''}
306
+ boxedStyle={true}
307
+ size='large'
308
+ maxLength={25}
309
+ placeholder='Placeholder'
310
+ type='text'
311
+ error='This is error message'
312
+ required={this.state.required}
313
+ disabled={this.state.disabled}
314
+ invalid={this.state.invalid}
315
+ tabindex={0}
316
+ onChange={(value) => {}} />
317
+
318
+ // Boxed with boxed label
319
+ <Input label='Input label'
320
+ value={''}
321
+ boxedStyle={true}
322
+ boxedLable={true}
323
+ size='large'
324
+ maxLength={25}
325
+ placeholder='Placeholder'
326
+ type='text'
327
+ error='This is error message'
328
+ required={this.state.required}
329
+ disabled={this.state.disabled}
330
+ invalid={this.state.invalid}
331
+ tabindex={0}
332
+ onChange={(value) => {}} />
333
+
334
+ <Input label='Input label'
335
+ value={''}
336
+ boxedStyle={true}
337
+ boxedLable={true}
338
+ size='large'
339
+ placeholder='Hide my label'
340
+ labelHidden={true}
341
+ type='text'
342
+ error='This is error message'
343
+ required={this.state.required}
344
+ disabled={this.state.disabled}
345
+ invalid={this.state.invalid}
346
+ tabindex={0}
347
+ onChange={(value) => {}} />
72
348
  `}</Markup.ReactMarkupCode>
73
349
  </Markup.ReactMarkup>
74
350
 
75
351
  <h3 className='docs-page__h3'>Props</h3>
76
352
  <PropsList>
77
353
  <Prop name='value' isRequired={false} type='string' default='/' description='Item value'/>
354
+ <Prop name='type' isRequired={false} type='text | number | password' default='text' description='Input type. Defaults to type text.'/>
78
355
  <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
79
356
  <Prop name='maxLength' isRequired={false} type='number' default='/' description='Sets max length for input text'/>
80
357
  <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
@@ -83,8 +360,14 @@ export default class InputsDoc extends React.Component<{}, IState> {
83
360
  <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
84
361
  <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
85
362
  <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
363
+ <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.'/>
364
+ <Prop name='placeholder' isRequired={false} type='string' default='/' description='Defines the text for the placeholder pseudo-element.'/>
365
+ <Prop name='fullWidth' isRequired={false} type='boolean' default='false' description='Forces the input to take 100% of the container width.'/>
366
+ <Prop name='boxedStyle' isRequired={false} type='boolean' default='false' description='Applies a boxed style to the input. This style should be used only in the authoring enviroment and similar.'/>
367
+ <Prop name='boxedLable' isRequired={false} type='boolean' default='false' description='Applies a boxed style to the input label. This label style should be used only in combination with the boxedStyle input inside the authoring enviroment.'/>
368
+ <Prop name='size' isRequired={false} type='medium | large | x-large' default='medium' description='Specifies the size of the input. Defaults to medium and should be changed only in special cases (e.g. titles, headlines etc.).'/>
86
369
  </PropsList>
87
370
  </section>
88
371
  )
89
372
  }
90
- }
373
+ }