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

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 +202 -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 +423 -195
  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 +79537 -62691
  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 +301 -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 +49437 -26114
  228. package/dist/superdesk-ui.bundle.js +75814 -60910
  229. package/dist/vendor.bundle.js +25030 -25030
  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 +301 -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 +75 -0
  477. package/react/components/TreeSelect.js +448 -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
@@ -141,6 +141,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
141
141
  <div className="form__item">
142
142
  <Input label='Title'
143
143
  error='This is error message'
144
+ type='text'
145
+ value='Title'
144
146
  inlineLabel={false}
145
147
  disabled={false}
146
148
  invalid={false}
@@ -167,6 +169,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
167
169
  <div className="form__item">
168
170
  <Input label='Keyword'
169
171
  error='This is error message'
172
+ type='text'
173
+ value='Keyword'
170
174
  inlineLabel={false}
171
175
  disabled={false}
172
176
  invalid={false}
@@ -0,0 +1,26 @@
1
+ import * as React from 'react';
2
+ import classNames from 'classnames';
3
+
4
+ interface IProps {
5
+ children?: React.ReactNode;
6
+ side?: 'left' | 'right';
7
+ background?: 'transparent' | 'light' | 'grey' | 'dark';
8
+ open?: boolean;
9
+ }
10
+
11
+ export class AuthoringContainer extends React.PureComponent<IProps> {
12
+ render() {
13
+ let classes = classNames('sd-content-wrapper__authoring-content-area', {
14
+ [`sd-content-wrapper__authoring-content-area--${this.props.side}`] : this.props.side,
15
+ [`sd-content-wrapper__authoring-content-area--${this.props.background}`]: this.props.background !== 'light' && this.props.background !== undefined,
16
+ 'open-editor': this.props.open,
17
+ });
18
+ return (
19
+ <div className={classes}>
20
+ <div className='sd-editor__container'>
21
+ {this.props.children}
22
+ </div>
23
+ </div>
24
+ );
25
+ }
26
+ }
@@ -0,0 +1,22 @@
1
+ import * as React from 'react';
2
+ import classNames from 'classnames';
3
+
4
+ interface IProps {
5
+ children?: React.ReactNode;
6
+ background?: 'transparent' | 'light' | 'grey' | 'dark';
7
+ visible?: boolean; // defaults to light (white)
8
+ }
9
+
10
+ export class ContentSplitter extends React.PureComponent<IProps> {
11
+ render() {
12
+ let classes = classNames('sd-content-wrapper__content-splitter', {
13
+ [`sd-content-wrapper__content-splitter--${this.props.background}`]: this.props.background !== 'light' && this.props.background !== undefined,
14
+ 'content-splitter--visible': this.props.visible,
15
+ });
16
+ return (
17
+ <div className={classes}>
18
+ {this.props.children}
19
+ </div>
20
+ );
21
+ }
22
+ }
@@ -1,9 +1,13 @@
1
1
  export { Layout } from './Layout';
2
+ export { LayoutContainer } from './LayoutContainer';
2
3
  export { HeaderPanel } from './HeaderPanel';
3
4
  export { MainPanel } from './MainPanel';
4
5
  export { OverlayPanel } from './OverlayPanel';
5
6
  export { RightPanel } from './RightPanel';
6
7
  export { LeftPanel } from './LeftPanel';
8
+ export { AuthoringContainer } from './AuthoringContainer';
9
+ export { ContentSplitter } from './ContentSplitter';
10
+
7
11
  export { SubNav } from './SubNav';
8
12
  export { GraphicButtonsGroup } from './GraphicButtonsGroup';
9
13
  export { GraphicButton } from './GraphicButton';
@@ -14,4 +18,5 @@ export { PanelHeader } from './PanelHeader';
14
18
  export { PanelFooter } from './PanelFooter';
15
19
  export { SearchBar } from './SearchBar';
16
20
  export { SidebarMenu } from './SidebarMenu';
17
- export { LayoutContainer } from './LayoutContainer';
21
+
22
+
@@ -27,8 +27,8 @@ export const Layout = ({
27
27
  <section id='1' className='sd-content sd-content-wrapper'>
28
28
  {children}
29
29
  </section>
30
- <footer className='bottom-bar'>
31
- This is the footer.
30
+ <footer className='sd-bottom-bar'>
31
+ Footer
32
32
  </footer>
33
33
  </div>
34
34
  );
@@ -1,13 +1,23 @@
1
1
  import * as React from 'react';
2
+ import classNames from 'classnames';
2
3
 
3
4
  interface IProps {
4
5
  children?: React.ReactNode;
6
+ className?: string;
7
+ padding?: 'small' | 'medium' | 'large' | 'none';
5
8
  }
6
9
 
7
10
  export class MainPanel extends React.PureComponent<IProps> {
11
+
8
12
  render() {
13
+ let classes = classNames('sd-main-content-grid__content', {
14
+ 'sd-padding--2': !this.props.padding || this.props.padding === 'small',
15
+ 'sd-padding--3': this.props.padding === 'medium',
16
+ 'sd-padding--4': this.props.padding === 'large',
17
+ 'sd-padding--0': this.props.padding === 'none',
18
+ }, this.props.className);
9
19
  return (
10
- <div className='sd-main-content-grid__content sd-padding--2'>
20
+ <div className={classes}>
11
21
  {this.props.children}
12
22
  </div>
13
23
  );
@@ -3,29 +3,71 @@ import classNames from 'classnames';
3
3
  import {Icon} from '../../../../../app-typescript/index';
4
4
 
5
5
  interface IProps {
6
+ value?: string | number;
6
7
  type?: 'expanded' | 'collapsed' | 'boxed';
7
8
  placeholder: string;
8
9
  focused? : boolean;
10
+ boxed?: boolean;
11
+ onSubmit?(): void;
9
12
  }
10
13
 
11
- export class SearchBar extends React.PureComponent<IProps> {
14
+ interface IState {
15
+ inputValue: any;
16
+ type: string;
17
+ focused: boolean;
18
+ boxed?: boolean;
19
+ }
20
+
21
+ export class SearchBar extends React.PureComponent<IProps, IState> {
22
+ private inputRef: any;
23
+ constructor(props) {
24
+ super(props);
25
+ this.state = {
26
+ inputValue: this.props.value ? this.props.value : '',
27
+ focused: this.props.focused ? this.props.focused : false,
28
+ type: this.props.type ? this.props.type : 'expanded',
29
+ boxed: this.props.boxed ? this.props.boxed : false,
30
+ }
31
+ this.inputRef = React.createRef();
32
+ }
33
+
34
+ componentDidUpdate(prevProps: any) {
35
+ if (prevProps.value !== this.props.value) {
36
+ this.setState({inputValue: this.props.value});
37
+ }
38
+ }
39
+
40
+ componentDidMount = () => {
41
+ document.addEventListener("mousedown", (event) => {
42
+ if (this.inputRef.current && !this.inputRef.current.contains(event.target)) {
43
+ this.setState({focused: false});
44
+ }
45
+ });
46
+ }
47
+
12
48
  render() {
13
49
  let classes = classNames('sd-searchbar', {
14
- [`sd-searchbar--${this.props.type}`] : this.props.type,
15
- 'sd-searchbar--expanded': this.props.type === 'expanded' || this.props.type === undefined,
16
- 'sd-searchbar--focused' : this.props.focused,
50
+ [`sd-searchbar--${this.state.type}`] : this.props.type,
51
+ 'sd-searchbar--expanded': this.state.type === 'expanded' || this.props.type === undefined,
52
+ 'sd-searchbar--focused' : this.state.focused,
53
+ 'sd-searchbar--boxed': this.state.boxed,
17
54
  });
18
55
  return (
19
- <div className={classes}>
56
+ <div className={classes} ref={this.inputRef}>
20
57
  <label className="sd-searchbar__icon"></label>
21
58
  <input id="search-input"
59
+ ref={(input: any) => (input && this.props.focused) && input.focus()}
22
60
  className="sd-searchbar__input"
23
61
  type="text"
24
- placeholder={this.props.placeholder} />
25
- <button className="sd-searchbar__cancel">
62
+ placeholder={this.props.placeholder}
63
+ value={this.state.inputValue}
64
+ onChange={(e) => this.setState({inputValue: e.target.value})}
65
+ onFocus={() => this.setState({focused: true})} />
66
+ {this.state.inputValue &&
67
+ <button className="sd-searchbar__cancel" onClick={() => this.setState({inputValue: ''})}>
26
68
  <Icon name='remove-sign' />
27
- </button>
28
- <button id="sd-searchbar__search-btn" className="sd-searchbar__search-btn">
69
+ </button>}
70
+ <button id="sd-searchbar__search-btn" className="sd-searchbar__search-btn" onSubmit={() => this.props.onSubmit}>
29
71
  <Icon name='chevron-right-thin' />
30
72
  </button>
31
73
  </div>
@@ -1969,7 +1969,7 @@
1969
1969
  <!-- END Editor content -->
1970
1970
  </div>
1971
1971
  </section>
1972
- <footer class="bottom-bar ">
1972
+ <footer class="sd-bottom-bar">
1973
1973
  This is the optional footer.
1974
1974
  </footer>
1975
1975
  </div>
@@ -19,7 +19,7 @@
19
19
 
20
20
  </div>
21
21
  </section>
22
- <footer class="bottom-bar">
22
+ <footer class="sd-bottom-bar">
23
23
  This is the optional footer.
24
24
  </footer>
25
25
  </div>
@@ -538,7 +538,7 @@
538
538
  <!-- END Editor content -->
539
539
  </div>
540
540
  </section>
541
- <footer class="bottom-bar ">
541
+ <footer class="sd-bottom-bar">
542
542
  This is the optional footer.
543
543
  </footer>
544
544
 
@@ -89,6 +89,16 @@ export default class BadgeDoc extends React.Component {
89
89
  <Badge text='E' color='purple--400' shape='square' />
90
90
  <Badge text='F' color='purple--500' shape='square' />
91
91
  </div>
92
+
93
+ <p className="docs-page__paragraph">// Custom hex colours</p>
94
+ <div className='docs-page__content-row'>
95
+ <Badge text='1' hexColor='#008773' />
96
+ <Badge text='2' hexColor='#0000FF' />
97
+ <Badge text='3' hexColor='#00D100' />
98
+ <Badge text='4' hexColor='#5531D9' shape='square' />
99
+ <Badge text='5' hexColor='#960E0F' shape='square' />
100
+ <Badge text='6' hexColor='#DB60FF' shape='square' />
101
+ </div>
92
102
  </Markup.ReactMarkupPreview>
93
103
  <Markup.ReactMarkupCode>{`
94
104
  // Basic colour palette
@@ -112,6 +122,13 @@ export default class BadgeDoc extends React.Component {
112
122
  <Badge text='D' color='purple--300' shape='square'/>
113
123
  <Badge text='E' color='purple--400' shape='square'/>
114
124
  <Badge text='F' color='purple--500' shape='square'/>
125
+ // Custom hex colours
126
+ <Badge text='1' hexColor='#008773' />
127
+ <Badge text='2' hexColor='#0000FF' />
128
+ <Badge text='3' hexColor='#00D100' />
129
+ <Badge text='4' hexColor='#5531D9' shape='square' />
130
+ <Badge text='5' hexColor='#960E0F' shape='square' />
131
+ <Badge text='6' hexColor='#DB60FF' shape='square' />
115
132
  `}
116
133
  </Markup.ReactMarkupCode>
117
134
  </Markup.ReactMarkup>
@@ -152,6 +169,7 @@ export default class BadgeDoc extends React.Component {
152
169
  <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
153
170
  <Prop name='color' isRequired={false} type='string' default='/' description='Extended color palette from the framework (e.g. red--500); NOTE: The badge can have either a Type or Color defined, not both at the same time.' />
154
171
  <Prop name='shape' isRequired={false} type='round | square' default='round' description='Make shape of badge square or default round.' />
172
+ <Prop name='hexColor' isRequired={false} type='string' default='/' description='Define a custom Hex colour for the Badge.'/>
155
173
  </PropsList>
156
174
  </section>
157
175
  )
@@ -133,7 +133,7 @@ export default class ContainerDoc extends React.Component<IProps> {
133
133
  <PropsList>
134
134
  <Prop name='display' isRequired={false} type='flex | inline-flex | block' default='flex' description='Change the default display mode (flex).'/>
135
135
  <Prop name='direction' isRequired={false} type='row | column' default='row' description='Change the flex-direction property.'/>
136
- <Prop name='gap' isRequired={false} type='none | small | medium | large' default='none' description='Set the gap between elements inside the Container.'/>
136
+ <Prop name='gap' isRequired={false} type='none | x-small | small | medium | large' default='none' description='Set the gap between elements inside the Container.'/>
137
137
  <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All items inside will inherit the theme of the Container if it is set.'/>
138
138
  <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
139
139
  </PropsList>
@@ -0,0 +1,286 @@
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 } from '../../../app-typescript';
4
+ import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
5
+ import { ContentList, ContentListItem } from '../../../app-typescript/components/Lists/ContentList';
6
+
7
+ export default class ContentListDoc extends React.Component {
8
+ render() {
9
+ return (
10
+ <section className='docs-page__container'>
11
+ <h2 className='docs-page__h2'>ContentList</h2>
12
+
13
+ <Markup.ReactMarkupCodePreview>{`
14
+ <ContentList
15
+ items: [...]
16
+ />
17
+ `}
18
+ </Markup.ReactMarkupCodePreview>
19
+
20
+ <p className="docs-page__paragraph">...</p>
21
+
22
+ <Markup.ReactMarkup>
23
+ <Markup.ReactMarkupPreview>
24
+ <p className="docs-page__paragraph">// basic</p>
25
+
26
+ <ContentList
27
+ items={[
28
+ {
29
+ itemColum: [
30
+ {
31
+ itemRow: [{content:<>
32
+ <i className="icon-rundown"></i>
33
+ </>}],
34
+ border: true
35
+ },
36
+ {
37
+ itemRow: [
38
+ {
39
+ content:
40
+ <>
41
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
42
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
43
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
44
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
45
+ </>
46
+ },
47
+ {
48
+ content:
49
+ <>
50
+ <Label text='Marker' color='blue--800'/>
51
+ <span className='sd-list-item__compound-text'>
52
+ <span className='sd-list-item__text-label'>Template:</span>
53
+ <span>Marker Daily</span>
54
+ </span>
55
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
56
+ <Label style='translucent' text='In Progress' type='warning' />
57
+ </>
58
+ },
59
+ ],
60
+ fullwidth: true,
61
+ }
62
+ ],
63
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
64
+ loading: true,
65
+ },
66
+ {
67
+ itemColum: [
68
+ {
69
+ itemRow: [{content:<>
70
+ <i className="icon-rundown"></i>
71
+ </>}],
72
+ border: true
73
+ },
74
+ {
75
+ itemRow: [
76
+ {
77
+ content:
78
+ <>
79
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
80
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
81
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
82
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
83
+ </>
84
+ },
85
+ {
86
+ content:
87
+ <>
88
+ <Label text='Marker' color='blue--800'/>
89
+ <span className='sd-list-item__compound-text'>
90
+ <span className='sd-list-item__text-label'>Template:</span>
91
+ <span>Marker Daily</span>
92
+ </span>
93
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
94
+ <Label style='translucent' text='In Progress' type='warning' />
95
+ </>
96
+ },
97
+ ],
98
+ fullwidth: true,
99
+ }
100
+ ],
101
+ //locked: true,
102
+ selected: true,
103
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
104
+ },
105
+ {
106
+ itemColum: [
107
+ {
108
+ itemRow: [{content:<>
109
+ <i className="icon-rundown"></i>
110
+ </>}],
111
+ border: true
112
+ },
113
+ {
114
+ itemRow: [
115
+ {
116
+ content:
117
+ <>
118
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
119
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
120
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
121
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
122
+ </>
123
+ },
124
+ {
125
+ content:
126
+ <>
127
+ <Label text='Marker' color='blue--800'/>
128
+ <span className='sd-list-item__compound-text'>
129
+ <span className='sd-list-item__text-label'>Template:</span>
130
+ <span>Marker Daily</span>
131
+ </span>
132
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
133
+ <Label style='translucent' text='In Progress' type='warning' />
134
+ </>
135
+ },
136
+ ],
137
+ fullwidth: true,
138
+ }
139
+ ],
140
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
141
+ },
142
+ ]} />
143
+
144
+ </Markup.ReactMarkupPreview>
145
+ <Markup.ReactMarkupCode>{`
146
+ <ContentList
147
+ items={[
148
+ {
149
+ itemColum: [
150
+ {
151
+ itemRow: [{content:<>
152
+ <i className="icon-rundown"></i>
153
+ </>}],
154
+ border: true
155
+ },
156
+ {
157
+ itemRow: [
158
+ {
159
+ content:
160
+ <>
161
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
162
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
163
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
164
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
165
+ </>
166
+ },
167
+ {
168
+ content:
169
+ <>
170
+ <Label text='Marker' color='blue--800'/>
171
+ <span className='sd-list-item__compound-text'>
172
+ <span className='sd-list-item__text-label'>Template:</span>
173
+ <span>Marker Daily</span>
174
+ </span>
175
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
176
+ <Label style='translucent' text='In Progress' type='warning' />
177
+ </>
178
+ },
179
+ ],
180
+ fullwidth: true,
181
+ }
182
+ ],
183
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
184
+ },
185
+ {
186
+ itemColum: [
187
+ {
188
+ itemRow: [{content:<>
189
+ <i className="icon-rundown"></i>
190
+ </>}],
191
+ border: true
192
+ },
193
+ {
194
+ itemRow: [
195
+ {
196
+ content:
197
+ <>
198
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
199
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
200
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
201
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
202
+ </>
203
+ },
204
+ {
205
+ content:
206
+ <>
207
+ <Label text='Marker' color='blue--800'/>
208
+ <span className='sd-list-item__compound-text'>
209
+ <span className='sd-list-item__text-label'>Template:</span>
210
+ <span>Marker Daily</span>
211
+ </span>
212
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
213
+ <Label style='translucent' text='In Progress' type='warning' />
214
+ </>
215
+ },
216
+ ],
217
+ fullwidth: true,
218
+ }
219
+ ],
220
+ locked: true,
221
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
222
+ },
223
+ {
224
+ itemColum: [
225
+ {
226
+ itemRow: [{content:<>
227
+ <i className="icon-rundown"></i>
228
+ </>}],
229
+ border: true
230
+ },
231
+ {
232
+ itemRow: [
233
+ {
234
+ content:
235
+ <>
236
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
237
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
238
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
239
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
240
+ </>
241
+ },
242
+ {
243
+ content:
244
+ <>
245
+ <Label text='Marker' color='blue--800'/>
246
+ <span className='sd-list-item__compound-text'>
247
+ <span className='sd-list-item__text-label'>Template:</span>
248
+ <span>Marker Daily</span>
249
+ </span>
250
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
251
+ <Label style='translucent' text='In Progress' type='warning' />
252
+ </>
253
+ },
254
+ ],
255
+ fullwidth: true,
256
+ }
257
+ ],
258
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
259
+ },
260
+ ]} />
261
+ `}
262
+ </Markup.ReactMarkupCode>
263
+ </Markup.ReactMarkup>
264
+
265
+ <h3 className="docs-page__h3">Props</h3>
266
+ <p className="docs-page__paragraph">ContentList</p>
267
+ <PropsList>
268
+ <Prop name='items' isRequired={true} type='Array' default='compact' description='An array of object.'/>
269
+ </PropsList>
270
+ <p className="docs-page__paragraph">Items:</p>
271
+ <PropsList>
272
+ <Prop name='itemColum' isRequired={true} type='Array<{itemRow: Array<{content: any}>, border?: boolean, fullwidth?: boolean}>' default='false' description='An array of objects for defining column of individual items.'/>
273
+ <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='On hover displays an additional menu.'/>
274
+ <Prop name='locked' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
275
+ <Prop name='activated' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
276
+ <Prop name='selected' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
277
+ <Prop name='archived' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
278
+ <Prop name='loading' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
279
+ <Prop name='onClick' isRequired={false} type='function' default='/' description='onClick functionality.'/>
280
+ <Prop name='onDoubleClick' isRequired={false} type='function' default='/' description='onDoubleClick functionality.'/>
281
+ </PropsList>
282
+
283
+ </section>
284
+ )
285
+ }
286
+ }