superdesk-ui-framework 3.0.1-beta.1 → 3.0.1-beta.11

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 (486) hide show
  1. package/.vscode/settings.json +5 -0
  2. package/app/fonts/sd_big-icons.eot +0 -0
  3. package/app/fonts/sd_big-icons.svg +55 -53
  4. package/app/fonts/sd_big-icons.ttf +0 -0
  5. package/app/fonts/sd_big-icons.woff +0 -0
  6. package/app/fonts/sd_icons.eot +0 -0
  7. package/app/fonts/sd_icons.svg +15 -7
  8. package/app/fonts/sd_icons.ttf +0 -0
  9. package/app/fonts/sd_icons.woff +0 -0
  10. package/app/img/SD-logo.svg +52 -0
  11. package/app/img/dots.svg +3 -0
  12. package/app/styles/_accessibility.scss +4 -3
  13. package/app/styles/_big-icon-font.scss +63 -23
  14. package/app/styles/_boxed-list.scss +29 -3
  15. package/app/styles/_buttons.scss +4 -0
  16. package/app/styles/_hamburger.scss +160 -0
  17. package/app/styles/_helpers.scss +15 -7
  18. package/app/styles/_icon-font.scss +351 -307
  19. package/app/styles/_icon-labels.scss +66 -10
  20. package/app/styles/_sd-tag-input.scss +221 -296
  21. package/app/styles/_table-list.scss +244 -0
  22. package/app/styles/app.scss +4 -0
  23. package/app/styles/components/_list-item.scss +37 -21
  24. package/app/styles/components/_sd-dropzone.scss +52 -16
  25. package/app/styles/components/_sd-grid-item.scss +30 -16
  26. package/app/styles/components/_sd-notification-panel.scss +48 -0
  27. package/app/styles/components/_sd-photo-preview.scss +1 -1
  28. package/app/styles/components/_sd-searchbar.scss +7 -0
  29. package/app/styles/components/_subnav.scss +87 -80
  30. package/app/styles/design-tokens/_design-tokens-general.scss +10 -6
  31. package/app/styles/design-tokens/_new-colors.scss +10 -3
  32. package/app/styles/form-elements/_forms-general.scss +81 -7
  33. package/app/styles/form-elements/_inputs.scss +372 -62
  34. package/app/styles/grids/_grid-layout.scss +163 -45
  35. package/app/styles/layout/_basic-layout.scss +2 -2
  36. package/app/styles/layout/_container.scss +3 -0
  37. package/app/styles/layout/_editor.scss +109 -17
  38. package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
  39. package/app/styles/menus/_sd-left-navigation.scss +24 -1
  40. package/app/styles/menus/_sd-sidebar-menu.scss +16 -14
  41. package/app/styles/menus/_sd-top-menu.scss +19 -5
  42. package/app/styles/primereact/_pr-dialog.scss +39 -7
  43. package/app/styles/primereact/_pr-dropdown.scss +17 -3
  44. package/app-typescript/components/Badge.tsx +3 -2
  45. package/app-typescript/components/CreateButton.tsx +38 -0
  46. package/app-typescript/components/DatePicker.tsx +71 -36
  47. package/app-typescript/components/DonutChart.tsx +1 -1
  48. package/app-typescript/components/DropZone.tsx +4 -4
  49. package/app-typescript/components/DurationInput.tsx +375 -0
  50. package/app-typescript/components/EmptyState.tsx +2 -1
  51. package/app-typescript/components/Form/FormRowNew.tsx +41 -0
  52. package/app-typescript/components/Form/InputBase.tsx +85 -0
  53. package/app-typescript/components/Form/InputNew.tsx +107 -0
  54. package/app-typescript/components/Form/InputWrapper.tsx +79 -0
  55. package/app-typescript/components/Form/index.tsx +4 -0
  56. package/app-typescript/components/Icon.tsx +4 -2
  57. package/app-typescript/components/IconButton.tsx +5 -1
  58. package/app-typescript/components/IconLabel.tsx +8 -1
  59. package/app-typescript/components/Input.tsx +40 -41
  60. package/app-typescript/components/Label.tsx +49 -10
  61. package/app-typescript/components/Layouts/AuthoringContainer.tsx +28 -0
  62. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +2 -0
  63. package/app-typescript/components/Layouts/AuthoringMain.tsx +11 -7
  64. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +7 -1
  65. package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
  66. package/app-typescript/components/Layouts/Container.tsx +1 -1
  67. package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
  68. package/app-typescript/components/Layouts/CoreLayout.tsx +62 -0
  69. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
  70. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
  71. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +16 -0
  72. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
  73. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
  74. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
  75. package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
  76. package/app-typescript/components/Layouts/Layout.tsx +33 -0
  77. package/app-typescript/components/Layouts/LayoutContainer.tsx +1 -4
  78. package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
  79. package/app-typescript/components/Layouts/MainPanel.tsx +10 -5
  80. package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
  81. package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
  82. package/app-typescript/components/Layouts/Panel.tsx +1 -0
  83. package/app-typescript/components/Layouts/index.tsx +20 -2
  84. package/app-typescript/components/LeftMenu.tsx +127 -116
  85. package/app-typescript/components/Lists/BoxedList.tsx +41 -5
  86. package/app-typescript/components/Lists/ContentList.tsx +100 -0
  87. package/app-typescript/components/Lists/TableList.tsx +212 -0
  88. package/app-typescript/components/Menu.tsx +31 -7
  89. package/app-typescript/components/Modal.tsx +31 -18
  90. package/app-typescript/components/MultiSelect.tsx +35 -5
  91. package/app-typescript/components/NavButton.tsx +4 -0
  92. package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
  93. package/app-typescript/components/Navigation/SideBarTabs.tsx +10 -0
  94. package/app-typescript/components/SearchBar.tsx +98 -0
  95. package/app-typescript/components/Select.tsx +28 -36
  96. package/app-typescript/components/SelectGrid.tsx +1 -1
  97. package/app-typescript/components/SelectWithTemplate.tsx +32 -7
  98. package/app-typescript/components/SidebarMenu.tsx +68 -0
  99. package/app-typescript/components/Skeleton.tsx +1 -1
  100. package/app-typescript/components/Spinner.tsx +1 -1
  101. package/app-typescript/components/SwitchGroup.tsx +2 -1
  102. package/app-typescript/components/Text/Time.tsx +34 -0
  103. package/app-typescript/components/TimePicker.tsx +50 -16
  104. package/app-typescript/components/Togglebox.tsx +1 -1
  105. package/app-typescript/components/Tooltip.tsx +7 -5
  106. package/app-typescript/components/TreeSelect.tsx +490 -208
  107. package/app-typescript/components/WithSizeObserver.tsx +88 -0
  108. package/app-typescript/dist/components/Alert.d.ts +16 -0
  109. package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
  110. package/app-typescript/dist/components/Avatar.d.ts +33 -0
  111. package/app-typescript/dist/components/Badge.d.ts +13 -0
  112. package/app-typescript/dist/components/Button.d.ts +23 -0
  113. package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
  114. package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
  115. package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
  116. package/app-typescript/dist/components/Checkbox.d.ts +19 -0
  117. package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
  118. package/app-typescript/dist/components/DatePicker.d.ts +37 -0
  119. package/app-typescript/dist/components/Divider.d.ts +9 -0
  120. package/app-typescript/dist/components/DonutChart.d.ts +12 -0
  121. package/app-typescript/dist/components/Dropdown.d.ts +28 -0
  122. package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
  123. package/app-typescript/dist/components/EmptyState.d.ts +11 -0
  124. package/app-typescript/dist/components/FormLabel.d.ts +9 -0
  125. package/app-typescript/dist/components/Genie.d.ts +13 -0
  126. package/app-typescript/dist/components/GridItem.d.ts +69 -0
  127. package/app-typescript/dist/components/GridList.d.ts +14 -0
  128. package/app-typescript/dist/components/HeadingText.d.ts +10 -0
  129. package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
  130. package/app-typescript/dist/components/Icon.d.ts +12 -0
  131. package/app-typescript/dist/components/IconButton.d.ts +12 -0
  132. package/app-typescript/dist/components/IconLabel.d.ts +11 -0
  133. package/app-typescript/dist/components/Input.d.ts +24 -0
  134. package/app-typescript/dist/components/Label.d.ts +15 -0
  135. package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
  136. package/app-typescript/dist/components/Loader.d.ts +8 -0
  137. package/app-typescript/dist/components/NavButton.d.ts +15 -0
  138. package/app-typescript/dist/components/Popover.d.ts +13 -0
  139. package/app-typescript/dist/components/PropsList.d.ts +15 -0
  140. package/app-typescript/dist/components/Radio.d.ts +19 -0
  141. package/app-typescript/dist/components/RadioButton.d.ts +20 -0
  142. package/app-typescript/dist/components/Select.d.ts +29 -0
  143. package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
  144. package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
  145. package/app-typescript/dist/components/StrechBar.d.ts +4 -0
  146. package/app-typescript/dist/components/SubNav.d.ts +10 -0
  147. package/app-typescript/dist/components/Switch.d.ts +12 -0
  148. package/app-typescript/dist/components/TabCustom.d.ts +25 -0
  149. package/app-typescript/dist/components/TabList.d.ts +22 -0
  150. package/app-typescript/dist/components/Tag.d.ts +9 -0
  151. package/app-typescript/dist/components/TagInput.d.ts +7 -0
  152. package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
  153. package/app-typescript/dist/components/TimePicker.d.ts +11 -0
  154. package/app-typescript/dist/components/Tooltip.d.ts +11 -0
  155. package/app-typescript/dist/components/_Positioner.d.ts +27 -0
  156. package/app-typescript/dist/index.d.ts +56 -0
  157. package/app-typescript/helpers.tsx +3 -0
  158. package/app-typescript/index.ts +10 -0
  159. package/dist/SD-logo.svg +52 -0
  160. package/dist/dots.svg +3 -0
  161. package/dist/examples.bundle.css +8803 -378
  162. package/dist/examples.bundle.js +81672 -64212
  163. package/dist/playgrounds/accessible-theme-test.html +1 -1
  164. package/dist/playgrounds/layout-test-2.html +1 -1
  165. package/dist/playgrounds/list-item-test.html +1 -1
  166. package/dist/playgrounds/master-desk.html +1 -1
  167. package/dist/playgrounds/media-carousel.html +1 -1
  168. package/dist/playgrounds/photo-desk.html +1 -1
  169. package/dist/playgrounds/planning.html +1 -1
  170. package/dist/playgrounds/publish.html +1 -1
  171. package/dist/playgrounds/publisher-content-analytics.html +1 -1
  172. package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
  173. package/dist/playgrounds/publisher-content-list-manual.html +1 -1
  174. package/dist/playgrounds/publisher-content-lists.html +1 -1
  175. package/dist/playgrounds/publisher-dashboard.html +1 -1
  176. package/dist/playgrounds/publisher-output-control.html +1 -1
  177. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +155 -0
  178. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +9 -4
  179. package/dist/playgrounds/react-playgrounds/Index.tsx +4 -1
  180. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +13 -0
  181. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +474 -0
  182. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  183. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
  184. package/dist/playgrounds/react-playgrounds/TestGround.tsx +407 -182
  185. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +4 -0
  186. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  187. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  188. package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  189. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  190. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  191. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  192. package/dist/playgrounds/swimlane-view.html +1 -1
  193. package/dist/playgrounds/toasts.html +1 -1
  194. package/dist/playgrounds/video-editor.html +1 -1
  195. package/dist/react/Badges.tsx +18 -0
  196. package/dist/react/Container.tsx +1 -1
  197. package/dist/react/ContentList.tsx +286 -0
  198. package/dist/react/CreateButton.tsx +71 -0
  199. package/dist/react/DatePicker.tsx +31 -6
  200. package/dist/react/DropZone.tsx +14 -6
  201. package/dist/react/DurationInput.tsx +104 -0
  202. package/dist/react/IconButtons.tsx +6 -6
  203. package/dist/react/IconLabels.tsx +24 -2
  204. package/dist/react/Index.tsx +25 -0
  205. package/dist/react/Inputs.tsx +290 -7
  206. package/dist/react/Labels.tsx +51 -1
  207. package/dist/react/LeftNavigations.tsx +71 -44
  208. package/dist/react/Modal.tsx +1 -0
  209. package/dist/react/MultiSelect.tsx +10 -2
  210. package/dist/react/SelectWithTemplate.tsx +6 -1
  211. package/dist/react/Selects.tsx +55 -0
  212. package/dist/react/TableList.tsx +248 -0
  213. package/dist/react/TimePicker.tsx +22 -12
  214. package/dist/react/TreeSelect.tsx +270 -48
  215. package/dist/react/WithSizeObserver.tsx +44 -0
  216. package/dist/react/tree-select/TreeSelect.tsx +273 -0
  217. package/dist/react/tree-select/example-1.tsx +71 -0
  218. package/dist/react/tree-select/example-2.tsx +59 -0
  219. package/dist/sd_big-icons.eot +0 -0
  220. package/dist/sd_big-icons.svg +55 -53
  221. package/dist/sd_big-icons.ttf +0 -0
  222. package/dist/sd_big-icons.woff +0 -0
  223. package/dist/sd_icons.eot +0 -0
  224. package/dist/sd_icons.svg +15 -7
  225. package/dist/sd_icons.ttf +0 -0
  226. package/dist/sd_icons.woff +0 -0
  227. package/dist/superdesk-ui.bundle.css +49460 -26118
  228. package/dist/superdesk-ui.bundle.js +75427 -59872
  229. package/dist/vendor.bundle.js +25029 -25029
  230. package/examples/css/docs-page.css +2 -3
  231. package/examples/index.js +12 -0
  232. package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
  233. package/examples/pages/playgrounds/layout-test-2.html +1 -1
  234. package/examples/pages/playgrounds/list-item-test.html +1 -1
  235. package/examples/pages/playgrounds/master-desk.html +1 -1
  236. package/examples/pages/playgrounds/media-carousel.html +1 -1
  237. package/examples/pages/playgrounds/photo-desk.html +1 -1
  238. package/examples/pages/playgrounds/planning.html +1 -1
  239. package/examples/pages/playgrounds/publish.html +1 -1
  240. package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
  241. package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
  242. package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
  243. package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
  244. package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
  245. package/examples/pages/playgrounds/publisher-output-control.html +1 -1
  246. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +155 -0
  247. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +9 -4
  248. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +4 -1
  249. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +13 -0
  250. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +474 -0
  251. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  252. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
  253. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +407 -182
  254. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +4 -0
  255. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  256. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  257. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  258. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  259. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  260. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  261. package/examples/pages/playgrounds/swimlane-view.html +1 -1
  262. package/examples/pages/playgrounds/toasts.html +1 -1
  263. package/examples/pages/playgrounds/video-editor.html +1 -1
  264. package/examples/pages/react/Badges.tsx +18 -0
  265. package/examples/pages/react/Container.tsx +1 -1
  266. package/examples/pages/react/ContentList.tsx +286 -0
  267. package/examples/pages/react/CreateButton.tsx +71 -0
  268. package/examples/pages/react/DatePicker.tsx +31 -6
  269. package/examples/pages/react/DropZone.tsx +14 -6
  270. package/examples/pages/react/DurationInput.tsx +104 -0
  271. package/examples/pages/react/IconButtons.tsx +6 -6
  272. package/examples/pages/react/IconLabels.tsx +24 -2
  273. package/examples/pages/react/Index.tsx +25 -0
  274. package/examples/pages/react/Inputs.tsx +290 -7
  275. package/examples/pages/react/Labels.tsx +51 -1
  276. package/examples/pages/react/LeftNavigations.tsx +71 -44
  277. package/examples/pages/react/Modal.tsx +1 -0
  278. package/examples/pages/react/MultiSelect.tsx +10 -2
  279. package/examples/pages/react/SelectWithTemplate.tsx +6 -1
  280. package/examples/pages/react/Selects.tsx +55 -0
  281. package/examples/pages/react/TableList.tsx +248 -0
  282. package/examples/pages/react/TimePicker.tsx +22 -12
  283. package/examples/pages/react/TreeSelect.tsx +270 -48
  284. package/examples/pages/react/WithSizeObserver.tsx +44 -0
  285. package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
  286. package/examples/pages/react/tree-select/example-1.tsx +71 -0
  287. package/examples/pages/react/tree-select/example-2.tsx +59 -0
  288. package/package.json +9 -8
  289. package/react/components/Alert.js +10 -8
  290. package/react/components/Autocomplete.js +16 -12
  291. package/react/components/Avatar.js +8 -6
  292. package/react/components/Badge.d.ts +1 -0
  293. package/react/components/Badge.js +9 -7
  294. package/react/components/Button.js +8 -6
  295. package/react/components/ButtonGroup.js +7 -5
  296. package/react/components/Carousel.js +4 -2
  297. package/react/components/CheckButtonGroup.js +6 -4
  298. package/react/components/CheckGroup.js +5 -3
  299. package/react/components/Checkbox.js +5 -3
  300. package/react/components/CheckboxButton.js +6 -4
  301. package/react/components/ContentDivider.js +8 -6
  302. package/react/components/CreateButton.d.ts +17 -0
  303. package/react/components/CreateButton.js +68 -0
  304. package/react/components/DatePicker.d.ts +11 -0
  305. package/react/components/DatePicker.js +44 -35
  306. package/react/components/Divider.js +6 -4
  307. package/react/components/DonutChart.d.ts +1 -1
  308. package/react/components/DonutChart.js +24 -6
  309. package/react/components/DropZone.d.ts +2 -2
  310. package/react/components/DropZone.js +8 -6
  311. package/react/components/Dropdown.js +7 -6
  312. package/react/components/DropdownFirst.js +18 -11
  313. package/react/components/DurationInput.d.ts +42 -0
  314. package/react/components/DurationInput.js +335 -0
  315. package/react/components/EmptyState.d.ts +1 -0
  316. package/react/components/EmptyState.js +8 -6
  317. package/react/components/Form/FormGroup.js +7 -5
  318. package/react/components/Form/FormItem.js +5 -3
  319. package/react/components/Form/FormLabel.js +5 -3
  320. package/react/components/Form/FormRow.js +5 -3
  321. package/react/components/Form/FormRowNew.d.ts +12 -0
  322. package/react/components/Form/FormRowNew.js +67 -0
  323. package/react/components/Form/FormText.js +4 -2
  324. package/react/components/Form/InputBase.d.ts +42 -0
  325. package/react/components/Form/InputBase.js +72 -0
  326. package/react/components/Form/InputNew.d.ts +45 -0
  327. package/react/components/Form/InputNew.js +75 -0
  328. package/react/components/Form/InputWrapper.d.ts +28 -0
  329. package/react/components/Form/InputWrapper.js +91 -0
  330. package/react/components/Form/index.d.ts +4 -0
  331. package/react/components/Form/index.js +9 -0
  332. package/react/components/FormLabel.js +5 -3
  333. package/react/components/GridItem.js +9 -7
  334. package/react/components/GridList.js +8 -6
  335. package/react/components/HeadingText.js +4 -2
  336. package/react/components/HelloWorld.js +4 -2
  337. package/react/components/Icon.d.ts +2 -1
  338. package/react/components/Icon.js +9 -6
  339. package/react/components/IconButton.js +8 -6
  340. package/react/components/IconLabel.d.ts +2 -0
  341. package/react/components/IconLabel.js +12 -7
  342. package/react/components/IconPicker.js +13 -9
  343. package/react/components/Input.d.ts +7 -2
  344. package/react/components/Input.js +16 -30
  345. package/react/components/Label.d.ts +1 -0
  346. package/react/components/Label.js +28 -10
  347. package/react/components/Layouts/AuthorinInnerSideBar.js +4 -2
  348. package/react/components/Layouts/AuthoringContainer.d.ts +12 -0
  349. package/react/components/Layouts/AuthoringContainer.js +60 -0
  350. package/react/components/Layouts/AuthoringFrame.js +4 -2
  351. package/react/components/Layouts/AuthoringFrameContainer.js +4 -2
  352. package/react/components/Layouts/AuthoringFrameLeftBar.js +4 -2
  353. package/react/components/Layouts/AuthoringFrameMain.js +4 -2
  354. package/react/components/Layouts/AuthoringFrameNavBar.js +4 -2
  355. package/react/components/Layouts/AuthoringFrameOverlay.js +4 -2
  356. package/react/components/Layouts/AuthoringFrameRightBar.js +4 -2
  357. package/react/components/Layouts/AuthoringFrameSidePanel.js +5 -3
  358. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +5 -3
  359. package/react/components/Layouts/AuthoringInnerBody.js +4 -2
  360. package/react/components/Layouts/AuthoringInnerHeader.d.ts +1 -0
  361. package/react/components/Layouts/AuthoringInnerHeader.js +10 -5
  362. package/react/components/Layouts/AuthoringMain.d.ts +3 -1
  363. package/react/components/Layouts/AuthoringMain.js +6 -4
  364. package/react/components/Layouts/AuthoringMainContainer.js +4 -2
  365. package/react/components/Layouts/AuthoringMainContent.js +4 -2
  366. package/react/components/Layouts/AuthoringMainToolBar.d.ts +1 -0
  367. package/react/components/Layouts/AuthoringMainToolBar.js +12 -3
  368. package/react/components/Layouts/BottomBarAction.d.ts +12 -0
  369. package/react/components/Layouts/BottomBarAction.js +59 -0
  370. package/react/components/Layouts/Container.d.ts +1 -1
  371. package/react/components/Layouts/Container.js +9 -7
  372. package/react/components/Layouts/ContentSplitter.d.ts +10 -0
  373. package/react/components/Layouts/ContentSplitter.js +58 -0
  374. package/react/components/Layouts/CoreLayout.d.ts +19 -0
  375. package/react/components/Layouts/CoreLayout.js +55 -0
  376. package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
  377. package/react/components/Layouts/CoreLayoutContainer.js +49 -0
  378. package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
  379. package/react/components/Layouts/CoreLayoutFooter.js +49 -0
  380. package/react/components/Layouts/CoreLayoutMain.d.ts +9 -0
  381. package/react/components/Layouts/CoreLayoutMain.js +49 -0
  382. package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
  383. package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
  384. package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
  385. package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
  386. package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
  387. package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
  388. package/react/components/Layouts/HamburgerButton.d.ts +14 -0
  389. package/react/components/Layouts/HamburgerButton.js +63 -0
  390. package/react/components/Layouts/HeaderPanel.js +4 -2
  391. package/react/components/Layouts/Layout.d.ts +8 -0
  392. package/react/components/Layouts/Layout.js +36 -0
  393. package/react/components/Layouts/LayoutContainer.js +5 -3
  394. package/react/components/Layouts/LeftPanel.js +5 -3
  395. package/react/components/Layouts/MainMenu.d.ts +41 -0
  396. package/react/components/Layouts/MainMenu.js +103 -0
  397. package/react/components/Layouts/MainPanel.d.ts +1 -0
  398. package/react/components/Layouts/MainPanel.js +15 -6
  399. package/react/components/Layouts/NotificationPanel.d.ts +45 -0
  400. package/react/components/Layouts/NotificationPanel.js +110 -0
  401. package/react/components/Layouts/OverlayPanel.d.ts +8 -0
  402. package/react/components/Layouts/OverlayPanel.js +51 -0
  403. package/react/components/Layouts/PageLayout.js +4 -2
  404. package/react/components/Layouts/Panel.d.ts +1 -0
  405. package/react/components/Layouts/Panel.js +16 -14
  406. package/react/components/Layouts/RightPanel.js +4 -2
  407. package/react/components/Layouts/index.d.ts +17 -2
  408. package/react/components/Layouts/index.js +35 -4
  409. package/react/components/LeftMenu.d.ts +5 -1
  410. package/react/components/LeftMenu.js +27 -13
  411. package/react/components/ListItemLoader.js +4 -2
  412. package/react/components/Lists/BoxedList.d.ts +8 -0
  413. package/react/components/Lists/BoxedList.js +39 -16
  414. package/react/components/Lists/ContentList.d.ts +45 -0
  415. package/react/components/Lists/ContentList.js +85 -0
  416. package/react/components/Lists/SimpleList.js +9 -7
  417. package/react/components/Lists/TableList.d.ts +42 -0
  418. package/react/components/Lists/TableList.js +145 -0
  419. package/react/components/Lists/index.js +1 -0
  420. package/react/components/Loader.js +4 -2
  421. package/react/components/Menu.d.ts +2 -1
  422. package/react/components/Menu.js +48 -12
  423. package/react/components/Modal.d.ts +4 -1
  424. package/react/components/Modal.js +35 -6
  425. package/react/components/NavButton.d.ts +1 -0
  426. package/react/components/NavButton.js +9 -4
  427. package/react/components/Navigation/BottomNav.d.ts +24 -0
  428. package/react/components/Navigation/BottomNav.js +88 -0
  429. package/react/components/Navigation/QuickNavBar.js +13 -9
  430. package/react/components/Navigation/SideBarMenu.js +4 -2
  431. package/react/components/Navigation/SideBarTabs.d.ts +1 -0
  432. package/react/components/Navigation/SideBarTabs.js +8 -2
  433. package/react/components/Navigation/index.js +1 -0
  434. package/react/components/Popover.js +4 -2
  435. package/react/components/PropsList.js +4 -2
  436. package/react/components/RadioButtonGroup.js +9 -7
  437. package/react/components/RadioGroup.js +6 -4
  438. package/react/components/SearchBar.d.ts +24 -0
  439. package/react/components/SearchBar.js +105 -0
  440. package/react/components/Select.d.ts +6 -1
  441. package/react/components/Select.js +9 -22
  442. package/react/components/SelectGrid.d.ts +1 -1
  443. package/react/components/SelectGrid.js +44 -23
  444. package/react/components/SelectWithTemplate.d.ts +11 -1
  445. package/react/components/SelectWithTemplate.js +23 -12
  446. package/react/components/Skeleton.d.ts +1 -1
  447. package/react/components/Skeleton.js +26 -5
  448. package/react/components/SlidingToolbar.js +6 -4
  449. package/react/components/Spinner.js +7 -5
  450. package/react/components/StrechBar.js +4 -2
  451. package/react/components/SubNav.js +9 -7
  452. package/react/components/Switch.js +6 -4
  453. package/react/components/SwitchGroup.d.ts +1 -0
  454. package/react/components/SwitchGroup.js +6 -4
  455. package/react/components/TabCustom.js +11 -7
  456. package/react/components/TabList.js +6 -4
  457. package/react/components/Tag.js +5 -4
  458. package/react/components/TagInput.js +7 -6
  459. package/react/components/TagInputTest.js +13 -9
  460. package/react/components/Text/Heading.js +10 -8
  461. package/react/components/Text/Text.js +10 -8
  462. package/react/components/Text/Time.d.ts +15 -0
  463. package/react/components/Text/Time.js +65 -0
  464. package/react/components/ThemeSelector.js +7 -5
  465. package/react/components/TimePicker.d.ts +16 -2
  466. package/react/components/TimePicker.js +19 -6
  467. package/react/components/Toast.js +1 -1
  468. package/react/components/ToastMessage.js +6 -5
  469. package/react/components/ToastText.js +1 -1
  470. package/react/components/ToastWrapper.d.ts +2 -2
  471. package/react/components/ToastWrapper.js +14 -10
  472. package/react/components/Togglebox.d.ts +1 -1
  473. package/react/components/Togglebox.js +36 -15
  474. package/react/components/Tooltip.d.ts +1 -0
  475. package/react/components/Tooltip.js +14 -10
  476. package/react/components/TreeSelect.d.ts +80 -0
  477. package/react/components/TreeSelect.js +494 -0
  478. package/react/components/WithSizeObserver.d.ts +25 -0
  479. package/react/components/WithSizeObserver.js +95 -0
  480. package/react/components/_Positioner.js +4 -2
  481. package/react/helpers.d.ts +1 -0
  482. package/react/helpers.js +7 -0
  483. package/react/index.d.ts +10 -0
  484. package/react/index.js +24 -1
  485. package/yarn-error.log +111 -0
  486. package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
@@ -13,11 +13,17 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
13
13
  <LeftMenu
14
14
  activeItemId='1'
15
15
  groups={[
16
- { label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
17
- { label: 'WORKFLOW', items: [{ id: '4', label: 'Desk' }, { id: '5', label: 'User Roles & Privileges'}]},
18
- { label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
16
+ { label: 'SYSTEM SETTINGS', items: [
17
+ {id: '1', label: 'General'},
18
+ {id: '2', label: 'Email settings'},
19
+ ]},
20
+ { label: 'WORKFLOW', items: [
21
+ { id: '4', label: 'Desk' },
22
+ { id: '5', label: 'User Roles & Privileges'},
23
+ ]}
19
24
  ]}
20
- onSelect={() => false} />
25
+ onSelect={() => false}
26
+ />
21
27
  `}
22
28
  </Markup.ReactMarkupCodePreview>
23
29
 
@@ -32,25 +38,41 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
32
38
  <p className="sd-top-menu__header">Top menu</p>
33
39
  </div>
34
40
  </div>
35
- <LeftMenu ariaLabel={'Left navigation'} className={'docs-page__grid-page-example__side'} activeItemId='1'
36
- groups={[
37
- {label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
38
- {label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
39
- {label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
40
- ]}
41
- onSelect={() => false} />
41
+ <LeftMenu ariaLabel={'Left navigation'}
42
+ className={'docs-page__grid-page-example__side'}
43
+ activeItemId='3'
44
+ groups={[
45
+ {label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
46
+ {label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
47
+ {label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
48
+ ]}
49
+ onSelect={() => false} />
42
50
  <div className='docs-page__grid-page-example__main'></div>
43
51
  </div>
44
52
  </div>
45
53
  </Markup.ReactMarkupPreview>
46
54
  <Markup.ReactMarkupCode>{`
47
- <LeftMenu ariaLabel={'Left navigation'} className={'docs-page__grid-page-example__side'} activeItemId='1'
55
+ <LeftMenu
56
+ ariaLabel={'Left navigation'}
57
+ className={'docs-page__grid-page-example__side'}
58
+ activeItemId='1'
48
59
  groups={[
49
- {label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
50
- {label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
51
- {label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
60
+ {label: 'SYSTEM SETTINGS', items: [
61
+ {id: '1', label: 'General'},
62
+ {id: '2', label: 'Email settings'},
63
+ {id: '3', label: 'Spell checking'},
64
+ ]},
65
+ {label: 'WORKFLOW', items: [
66
+ {id: '4', label: 'Desk'},
67
+ {id: '5', label: 'User Roles & Privileges'},
68
+ ]},
69
+ {label: 'CONTENT CONFIG', items: [
70
+ {id: '6', label: 'Image renditions'},
71
+ {id: '7', label: 'Controlled Vocabularies'},
52
72
  ]}
53
- onSelect={() => false} />
73
+ ]}
74
+ onSelect={() => false}
75
+ />
54
76
  `}
55
77
  </Markup.ReactMarkupCode>
56
78
  </Markup.ReactMarkup>
@@ -67,26 +89,26 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
67
89
  </div>
68
90
  </div>
69
91
  <LeftMenu ariaLabel={'Left navigation'}
70
- className={'docs-page__grid-page-example__side'}
71
- scrollSpy='#scrollContainer'
72
- offset={-300}
73
- activeItemId='1'
74
- groups={[
75
- { label: 'MAIN SECTIONS', items: [
76
- { id: '1', label: 'Section 1', ref:'section1'},
77
- { id: '2', label: 'Section 2', ref: 'section2' },
78
- { id: '3', label: 'Section 3', ref: 'section3' },
79
-
80
- ]},
81
- { label:'OTHER SECTIONS', items: [
82
- { id: '4', label: 'Section 4', ref: 'section4' },
83
- { id: '5', label: 'Section 5', ref: 'section5' }
84
- ]},
85
- { label:'OTHER SECTIONS', items: [
86
- { id: '6', label: 'Section 6', ref: 'section6' },
87
- { id: '7', label: 'Section 7', ref: 'section7' }
88
- ]}
92
+ className={'docs-page__grid-page-example__side'}
93
+ scrollSpy='#scrollContainer'
94
+ offset={-300}
95
+ //scrollTo={'section4'}
96
+ groups={[
97
+ { label: 'MAIN SECTIONS', items: [
98
+ { id: '1', label: 'Section 1', ref:'section1'},
99
+ { id: '2', label: 'Section 2', ref: 'section2' },
100
+ { id: '3', label: 'Section 3', ref: 'section3' },
101
+
102
+ ]},
103
+ { label:'OTHER SECTIONS', items: [
104
+ { id: '4', label: 'Section 4', ref: 'section4' },
105
+ { id: '5', label: 'Section 5', ref: 'section5' }
106
+ ]},
107
+ { label:'OTHER SECTIONS', items: [
108
+ { id: '6', label: 'Section 6', ref: 'section6' },
109
+ { id: '7', label: 'Section 7', ref: 'section7' }
89
110
  ]}
111
+ ]}
90
112
  onSelect={() => false} />
91
113
  <div className='docs-page__grid-page-example__main sd-padding--4' id='scrollContainer' style={{height:600}}>
92
114
  <SimpleList density='comfortable'>
@@ -160,16 +182,17 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
160
182
  </Markup.ReactMarkupPreview>
161
183
  <Markup.ReactMarkupCode>
162
184
  {`
163
- <LeftMenu ariaLabel={'Left navigation'}
185
+ <LeftMenu
186
+ ariaLabel={'Left navigation'}
164
187
  className={'docs-page__grid-page-example__side'}
165
188
  scrollSpy='#scrollContainer'
189
+ offset={-300}
166
190
  activeItemId='1'
167
191
  groups={[
168
192
  { label: 'MAIN SECTIONS', items: [
169
193
  { id: '1', label: 'Section 1', ref:'section1'},
170
194
  { id: '2', label: 'Section 2', ref: 'section2' },
171
- { id: '3', label: 'Section 3', ref: 'section3' },
172
-
195
+ { id: '3', label: 'Section 3', ref: 'section3' }
173
196
  ]},
174
197
  {label:'OTHER SECTIONS', items: [
175
198
  { id: '4', label: 'Section 4', ref: 'section4' },
@@ -180,7 +203,8 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
180
203
  { id: '5', label: 'Section 7', ref: 'section7' }
181
204
  ]}
182
205
  ]}
183
- onSelect={() => false} />
206
+ onSelect={() => false}
207
+ />
184
208
 
185
209
  <div id='#scrollContainer'>...</div>
186
210
  `}
@@ -189,16 +213,19 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
189
213
 
190
214
  <h3 className="docs-page__h3">Props</h3>
191
215
  <PropsList>
192
- <Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups'/>
193
- <Prop name='activeItemId' isRequired={true} type='string' default='/' description='Id of active item'/>
216
+ <Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups.'/>
194
217
  <Prop name='menugroup label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
195
- <Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items'/>
196
- <Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value'/>
218
+ <Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items.'/>
219
+ <Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value.'/>
197
220
  <Prop name='menuitem label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
221
+ <Prop name='menuitem ref' isRequired={false} type='string' default='/' description='Menugroup ref.'/>
222
+ <Prop name='menuitem route' isRequired={false} type='string' default='/' description='Menugroup route value.'/>
223
+ <Prop name='menuitem onCLick' isRequired={true} type='string' default='/' description='On click function.'/>
198
224
  <Prop name='scrollSpy' isRequired={false} type='string' default='HTML' description='Name of the element of scrollable container.'/>
199
225
  <Prop name='offset' isRequired={false} type='number' default='-300' description='Offset value that adjusts to determine the elements are in the viewport.'/>
226
+ <Prop name='activeItemId' isRequired={false} type='string' default='/' description='Id of active item'/>
227
+ <Prop name='scrollTo' isRequired={false} type='string' default='/' description='Ref of active item.'/>
200
228
  </PropsList>
201
-
202
229
  </section>
203
230
  )
204
231
  }
@@ -187,6 +187,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
187
187
  visible={this.state.modalFull}
188
188
  theme='dark'
189
189
  maximized={true}
190
+ className='testClass'
190
191
  onHide={() => {this.setState({modalFull: false})}}>
191
192
  <p className="sd-margin-b--3">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes,
192
193
  nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
@@ -69,6 +69,10 @@ export class MultiselectDocs extends React.Component<{}, IState> {
69
69
  showSelectAll
70
70
  placeholder='Select a color'
71
71
  optionLabel='name'
72
+ required
73
+ tabindex={1}
74
+ label={'This is Label'}
75
+ info={'This is info'}
72
76
  />
73
77
  </div>
74
78
  </div>
@@ -83,6 +87,10 @@ export class MultiselectDocs extends React.Component<{}, IState> {
83
87
  showSelectAll
84
88
  placeholder='Select a color'
85
89
  optionLabel='name'
90
+ required
91
+ tabindex={1}
92
+ label={'This is Label'}
93
+ info={'This is info'}
86
94
  />
87
95
  `}</Markup.ReactMarkupCode>
88
96
 
@@ -176,7 +184,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
176
184
  <Prop name='filter' isRequired={false} type='boolean' default='false' description='When specified, displays an input field to filter the items on keyup.'/>
177
185
  <Prop name='filterPlaceholder' isRequired={false} type='string' default='/' description='Placeholder text to show when filter input is empty.'/>
178
186
  <Prop name='emptyFilterMessage' isRequired={false} type='string' default='No results found' description='Template to display when filtering does not return any results.'/>
179
- <Prop name='maxSelectedLabels' isRequired={false} type='number' default='/' description='Decides how many selected item labels to show at most.'/>
187
+ <Prop name='maxSelectedLabels' isRequired={false} type='number' default='/' description='Decides how many selected item labels to show at most. Its necessary to use selectedItemTemplate.'/>
180
188
  <Prop name='selectedItemsLabel' isRequired={false} type='string' default='{0} items selected' description='Label to display after exceeding max selected labels.'/>
181
189
  <Prop name='ariaLabelledBy' isRequired={false} type='string' default='/' description='Establishes relationships between the component and label(s) where its value should be one or more element IDs.'/>
182
190
  <Prop name='tabIndex' isRequired={false} type='string' default="'0'" description='Index of the element in tabbing order.'/>
@@ -190,4 +198,4 @@ export class MultiselectDocs extends React.Component<{}, IState> {
190
198
  </section>
191
199
  )
192
200
  }
193
- }
201
+ }
@@ -80,9 +80,14 @@ export class SelectWithTemplateDocs extends React.Component<{}, IState> {
80
80
  }
81
81
  }}
82
82
  getLabel={(option) => option.name}
83
- areEqual={(a, b) => a.colorCode === b.colorCode}
83
+ areEqual={(a, b) => a?.colorCode === b?.colorCode}
84
84
  filterPlaceholder="Search..."
85
85
  noResultsFoundMessage="No results found."
86
+ required
87
+ tabindex={1}
88
+ label={'This is Label'}
89
+ info={'This is info'}
90
+ error={'This is error'}
86
91
  />
87
92
  </div>
88
93
  </div>
@@ -62,6 +62,61 @@ export default class InputsDoc extends React.Component<{}, IState> {
62
62
  <Option>Option 2</Option>
63
63
  </Select>
64
64
  </div>
65
+
66
+ <p className="docs-page__paragraph">// Boxed with hidden label</p>
67
+ <div className='form__row'>
68
+ <Select label='Select label'
69
+ value='Option 2'
70
+ boxedStyle
71
+ labelHidden
72
+ error='This is error message'
73
+ info='This is some hint message'
74
+ inlineLabel={this.state.inlineLabel}
75
+ required={this.state.required}
76
+ disabled={this.state.disabled}
77
+ invalid={this.state.invalid}
78
+ tabindex={0}
79
+ onChange={(value) => { console.log(value) }}>
80
+ <Option>Option 1</Option>
81
+ <Option>Option 2</Option>
82
+ </Select>
83
+ </div>
84
+ <div className='form__row'>
85
+ <Select label='Select label'
86
+ value='Option 2'
87
+ boxedStyle
88
+ labelHidden
89
+ size='large'
90
+ error='This is error message'
91
+ info='This is some hint message'
92
+ inlineLabel={this.state.inlineLabel}
93
+ required={this.state.required}
94
+ disabled={this.state.disabled}
95
+ invalid={this.state.invalid}
96
+ tabindex={0}
97
+ onChange={(value) => { console.log(value) }}>
98
+ <Option>Option 1</Option>
99
+ <Option>Option 2</Option>
100
+ </Select>
101
+ </div>
102
+ <div className='form__row'>
103
+ <Select label='Select label'
104
+ value='Option 2'
105
+ boxedStyle
106
+ labelHidden
107
+ size='x-large'
108
+ error='This is error message'
109
+ info='This is some hint message'
110
+ inlineLabel={this.state.inlineLabel}
111
+ required={this.state.required}
112
+ disabled={this.state.disabled}
113
+ invalid={this.state.invalid}
114
+ tabindex={0}
115
+ onChange={(value) => { console.log(value) }}>
116
+ <Option>Option 1</Option>
117
+ <Option>Option 2</Option>
118
+ </Select>
119
+ </div>
65
120
  </div>
66
121
 
67
122
  </Markup.ReactMarkupPreview>
@@ -0,0 +1,248 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel, SelectGrid, Dropdown } from '../../../app-typescript';
4
+ import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
5
+
6
+ interface IState {
7
+ array: any;
8
+ }
9
+
10
+ interface IProps {
11
+ array: any;
12
+ }
13
+
14
+ export default class TableListDoc extends React.Component<IProps, IState> {
15
+ constructor(props: IState) {
16
+ super(props);
17
+ this.state = {
18
+ array: [
19
+ {
20
+ start: <>
21
+ <Label style='translucent' text='aacc' />
22
+ <Label style='translucent' type='primary' text='prlg' />
23
+ </>,
24
+ center: <span>Item 1</span>,
25
+ end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
26
+ action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
27
+ onClick: () => {
28
+ return false;
29
+ }
30
+ },
31
+ {
32
+ start: <>
33
+ <Label style='translucent' text='aacc' />
34
+ <Label style='translucent' type='primary' text='prlg' />
35
+ </>,
36
+ center: <span>Item 2</span>,
37
+ end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
38
+ action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
39
+ onClick: () => {
40
+ return false;
41
+ }
42
+ },
43
+ {
44
+ start: <>
45
+ <Label style='translucent' text='aacc' />
46
+ <Label style='translucent' type='primary' text='prlg' />
47
+ </>,
48
+ center: <span>Item 3</span>,
49
+ end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
50
+ action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
51
+ onClick: () => {
52
+ return false;
53
+ }
54
+ },
55
+ ]
56
+ }
57
+
58
+ }
59
+
60
+ render() {
61
+ return (
62
+ <section className='docs-page__container'>
63
+ <h2 className='docs-page__h2'>TableList</h2>
64
+
65
+ <Markup.ReactMarkupCodePreview>{`
66
+ <TableList
67
+ dragAndDrop
68
+ addItem
69
+ array={this.state.array}
70
+ itemsDropdown={[
71
+ { label: 'Action 1', onSelect: () => 1 },
72
+ { label: 'Action 2', onSelect: () => 1 },
73
+ { label: 'Action 3', onSelect: () => 1 },
74
+ ]} />
75
+ `}
76
+ </Markup.ReactMarkupCodePreview>
77
+
78
+ <p className="docs-page__paragraph">Basic:</p>
79
+
80
+ <Markup.ReactMarkup>
81
+ <Markup.ReactMarkupPreview>
82
+
83
+ <TableList>
84
+ <TableListItem
85
+ start={
86
+ <>
87
+ <Label style='translucent' text='aacc' />
88
+ <Label style='translucent' type='primary' text='prlg' />
89
+ </>
90
+ }
91
+ center={
92
+ <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
93
+ }
94
+ end={
95
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
96
+ }
97
+ action={
98
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
99
+ } />
100
+ <TableListItem
101
+ start={
102
+ <>
103
+ <Label style='hollow' text='aacc' />
104
+ <Label style='filled' type='primary' text='prlg' />
105
+ </>
106
+ }
107
+ center={
108
+ <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
109
+ }
110
+ end={
111
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
112
+ } />
113
+ <TableListItem
114
+ start={
115
+ <>
116
+ <Label style='translucent' text='aacc' />
117
+ <Label style='translucent' type='primary' text='prlg' />
118
+ </>
119
+ }
120
+ center={
121
+ <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
122
+ }
123
+ end={
124
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
125
+ }
126
+ action={
127
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
128
+ } />
129
+ </TableList>
130
+
131
+ </Markup.ReactMarkupPreview>
132
+ <Markup.ReactMarkupCode>{`
133
+ <TableList>
134
+ <TableListItem
135
+ start={
136
+ <>
137
+ <Label style='translucent' text='aacc' />
138
+ <Label style='translucent' type='primary' text='prlg' />
139
+ </>
140
+ }
141
+ center={
142
+ <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
143
+ }
144
+ end={
145
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
146
+ }
147
+ action={
148
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
149
+ } />
150
+ <TableListItem
151
+ start={
152
+ <>
153
+ <Label style='hollow' text='aacc' />
154
+ <Label style='filled' type='primary' text='prlg' />
155
+ </>
156
+ }
157
+ center={
158
+ <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
159
+ }
160
+ end={
161
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
162
+ } />
163
+ <TableListItem
164
+ start={
165
+ <>
166
+ <Label style='translucent' text='aacc' />
167
+ <Label style='translucent' type='primary' text='prlg' />
168
+ </>
169
+ }
170
+ center={
171
+ <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
172
+ }
173
+ end={
174
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
175
+ }
176
+ action={
177
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
178
+ } />
179
+ </TableList>
180
+ `}
181
+ </Markup.ReactMarkupCode>
182
+ </Markup.ReactMarkup>
183
+ <p className="docs-page__paragraph">With drag and drop functionality:</p>
184
+ <Markup.ReactMarkup>
185
+ <Markup.ReactMarkupPreview>
186
+
187
+ <TableList
188
+ dragAndDrop
189
+ addItem
190
+ array={this.state.array}
191
+ itemsDropdown={[
192
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
193
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
194
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
195
+ ]}
196
+ onClick={() => false}
197
+ onDrag={(start, end) => console.log(start, end)}
198
+ />
199
+
200
+ </Markup.ReactMarkupPreview>
201
+ <Markup.ReactMarkupCode>{`
202
+ <TableList
203
+ dragAndDrop
204
+ addItem
205
+ array={this.state.array}
206
+ itemsDropdown={[
207
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
208
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
209
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
210
+ ]}
211
+ onClick={() => false}
212
+ />
213
+ `}
214
+ </Markup.ReactMarkupCode>
215
+ </Markup.ReactMarkup>
216
+
217
+ <h3 className="docs-page__h3">Props</h3>
218
+ <p className="docs-page__paragraph">TableList</p>
219
+ <PropsList>
220
+ <Prop name='array' isRequired={false} type='Array' default='false' description='Array of object.' />
221
+ <Prop name='children' isRequired={false} type='React.ReactNode' default='false' description='Children of component.' />
222
+ <Prop name='addItem' isRequired={false} type='boolean' default='false' description='Functionality to add items to the list.' />
223
+ <Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.' />
224
+ <Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.' />
225
+ <Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.' />
226
+ <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
227
+ <Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
228
+ </PropsList>
229
+ <p className="docs-page__paragraph">array:</p>
230
+ <PropsList>
231
+ <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
232
+ <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
233
+ <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
234
+ <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
235
+ </PropsList>
236
+ <p className="docs-page__paragraph">TableListItem</p>
237
+ <PropsList>
238
+ <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
239
+ <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
240
+ <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
241
+ <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
242
+ <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
243
+ </PropsList>
244
+
245
+ </section>
246
+ )
247
+ }
248
+ }
@@ -15,10 +15,16 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
15
15
  render() {
16
16
  return (
17
17
  <TimePicker
18
- value={this.state.time}
19
- onChange={(time) => {
20
- this.setState({time});
21
- }}
18
+ value={this.state.time}
19
+ onChange={(time) => {
20
+ this.setState({time});
21
+ }}
22
+ required
23
+ tabindex={1}
24
+ label={'This is Label'}
25
+ info={'This is info'}
26
+ error={'This is error'}
27
+ allowSeconds
22
28
  />
23
29
  );
24
30
  }
@@ -38,10 +44,13 @@ export default class TimePickerDoc extends React.Component {
38
44
  render() {
39
45
  return (
40
46
  <TimePicker
41
- value={this.state.time}
42
- onChange={(time) => {
43
- this.setState({time});
44
- }}
47
+ value={this.state.time}
48
+ onChange={(time) => {
49
+ this.setState({time});
50
+ }}
51
+ label={'This is Label'}
52
+ info={'This is info'}
53
+ error={'This is error'}
45
54
  />
46
55
  );
47
56
  }
@@ -67,14 +76,15 @@ export default class TimePickerDoc extends React.Component {
67
76
 
68
77
  <h3 className='docs-page__h3'>Props</h3>
69
78
  <PropsList>
70
- <Prop name='value' isRequired={true} type='string' default='/' description='Item value' />
71
- <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
72
- <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
79
+ <Prop name='value' isRequired={true} type='string' default='/' description='Item value.' />
80
+ <Prop name='allowSeconds' isRequired={true} type='string' default='/' description='Allow seconds.' />
81
+ <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required.' />
82
+ <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled.' />
73
83
  </PropsList>
74
84
 
75
85
  <h3 className='docs-page__h3'>Events</h3>
76
86
  <PropsList>
77
- <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input' />
87
+ <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input.' />
78
88
  </PropsList>
79
89
  </section>
80
90
  );