superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.3

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 (661) 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 +1 -0
  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/img/spinner.svg +3 -0
  13. package/app/img/themes/theme-base.svg +1 -0
  14. package/app/img/themes/theme-contrast.svg +45 -0
  15. package/app/img/themes/theme-dark.svg +1 -0
  16. package/app/img/themes/theme-light.svg +1 -0
  17. package/app/index.js +1 -1
  18. package/app/scripts/modals.js +22 -9
  19. package/app/styles/_accessibility.scss +312 -4
  20. package/app/styles/_alerts.scss +57 -19
  21. package/app/styles/_avatar.scss +25 -1
  22. package/app/styles/_badge.scss +2 -2
  23. package/app/styles/_big-icon-font.scss +64 -24
  24. package/app/styles/_boxed-list.scss +67 -21
  25. package/app/styles/_buttons.scss +435 -332
  26. package/app/styles/_carousel.scss +17 -11
  27. package/app/styles/_design-tokens.scss +2 -0
  28. package/app/styles/_hamburger.scss +160 -0
  29. package/app/styles/_helpers.scss +198 -34
  30. package/app/styles/_icon-font.scss +344 -307
  31. package/app/styles/_icon-labels.scss +66 -10
  32. package/app/styles/_labels.scss +12 -6
  33. package/app/styles/_loaders.scss +13 -0
  34. package/app/styles/_master-desk.scss +5 -5
  35. package/app/styles/_mixins.scss +13 -3
  36. package/app/styles/_modals.scss +4 -28
  37. package/app/styles/_normalize.scss +1 -0
  38. package/app/styles/_panel-info.scss +19 -14
  39. package/app/styles/_sd-tag-input.scss +104 -3
  40. package/app/styles/_simple-list.scss +39 -17
  41. package/app/styles/_spinner.scss +46 -0
  42. package/app/styles/_table-list.scss +244 -0
  43. package/app/styles/_tabs.scss +6 -8
  44. package/app/styles/_tag-labels.scss +11 -2
  45. package/app/styles/_thumb-carousel.scss +11 -10
  46. package/app/styles/_toggle-box.scss +46 -12
  47. package/app/styles/_toggle-button.scss +42 -0
  48. package/app/styles/_tooltips.scss +3 -3
  49. package/app/styles/_variables.scss +0 -1
  50. package/app/styles/app.scss +13 -2
  51. package/app/styles/components/_card-item.scss +33 -21
  52. package/app/styles/components/_list-item.scss +32 -23
  53. package/app/styles/components/_sd-dropzone.scss +114 -0
  54. package/app/styles/components/_sd-grid-item.scss +2 -2
  55. package/app/styles/components/_sd-notification-panel.scss +48 -0
  56. package/app/styles/components/_sd-searchbar.scss +5 -98
  57. package/app/styles/components/_subnav.scss +149 -120
  58. package/app/styles/components/_theme-selector.scss +189 -0
  59. package/app/styles/design-tokens/_design-tokens-general.scss +81 -0
  60. package/app/styles/{variables → design-tokens}/_new-colors.scss +41 -20
  61. package/app/styles/dropdowns/_basic-dropdown.scss +30 -3
  62. package/app/styles/editor/_editor-buttons.scss +54 -0
  63. package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
  64. package/app/styles/form-elements/_checkbox.scss +85 -58
  65. package/app/styles/form-elements/_forms-general.scss +90 -14
  66. package/app/styles/form-elements/_inputs.scss +305 -65
  67. package/app/styles/form-elements/_select-grid.scss +79 -0
  68. package/app/styles/grids/_basic-grid.scss +52 -26
  69. package/app/styles/grids/_grid-layout.scss +174 -66
  70. package/app/styles/grids/_layout-grid.scss +4 -4
  71. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  72. package/app/styles/interface-elements/_side-panel.scss +87 -58
  73. package/app/styles/layout/_basic-layout.scss +1 -4
  74. package/app/styles/layout/_container.scss +35 -0
  75. package/app/styles/layout/_editor.scss +398 -0
  76. package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
  77. package/app/styles/menus/_sd-left-navigation.scss +38 -3
  78. package/app/styles/menus/_sd-sidebar-menu.scss +109 -14
  79. package/app/styles/menus/_sd-top-menu.scss +19 -5
  80. package/app/styles/pr-superdesk-theme.scss +3 -0
  81. package/app/styles/primereact/_pr-datepicker.scss +58 -7
  82. package/app/styles/primereact/_pr-dialog.scss +39 -7
  83. package/app/styles/primereact/_pr-dropdown.scss +155 -8
  84. package/app/styles/primereact/_pr-general.scss +4 -0
  85. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  86. package/app/styles/variables/_colors.scss +2 -452
  87. package/app/styles/variables/_dimensions.scss +85 -1
  88. package/app/styles/variables/_form-elements.scss +0 -2
  89. package/app-typescript/components/Alert.tsx +16 -1
  90. package/app-typescript/components/Avatar.tsx +21 -0
  91. package/app-typescript/components/Button.tsx +7 -1
  92. package/app-typescript/components/ButtonGroup.tsx +5 -4
  93. package/app-typescript/components/Carousel.tsx +1 -1
  94. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  95. package/app-typescript/components/CheckGroup.tsx +2 -1
  96. package/app-typescript/components/Checkbox.tsx +7 -3
  97. package/app-typescript/components/CheckboxButton.tsx +9 -2
  98. package/app-typescript/components/CreateButton.tsx +38 -0
  99. package/app-typescript/components/DatePicker.tsx +73 -22
  100. package/app-typescript/components/DonutChart.tsx +1 -1
  101. package/app-typescript/components/DropZone.tsx +89 -0
  102. package/app-typescript/components/Dropdown.tsx +9 -1
  103. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  104. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  105. package/app-typescript/components/Form/FormItem.tsx +20 -0
  106. package/app-typescript/components/Form/FormLabel.tsx +22 -0
  107. package/app-typescript/components/Form/FormRow.tsx +40 -0
  108. package/app-typescript/components/Form/FormText.tsx +15 -0
  109. package/app-typescript/components/Form/index.tsx +5 -0
  110. package/app-typescript/components/Icon.tsx +4 -2
  111. package/app-typescript/components/IconButton.tsx +30 -12
  112. package/app-typescript/components/IconLabel.tsx +8 -1
  113. package/app-typescript/components/IconPicker.tsx +277 -0
  114. package/app-typescript/components/Input.tsx +58 -9
  115. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  116. package/app-typescript/components/Layouts/AuthoringContainer.tsx +27 -0
  117. package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
  118. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  119. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  120. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  121. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  122. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  123. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
  124. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  125. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  126. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  127. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
  128. package/app-typescript/components/Layouts/AuthoringMain.tsx +50 -0
  129. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  130. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  131. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -0
  132. package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
  133. package/app-typescript/components/Layouts/Container.tsx +30 -0
  134. package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
  135. package/app-typescript/components/Layouts/CoreLayout.tsx +62 -0
  136. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
  137. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
  138. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +16 -0
  139. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
  140. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
  141. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
  142. package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
  143. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  144. package/app-typescript/components/Layouts/Layout.tsx +33 -0
  145. package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
  146. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  147. package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
  148. package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
  149. package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
  150. package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
  151. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  152. package/app-typescript/components/Layouts/Panel.tsx +208 -0
  153. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  154. package/app-typescript/components/Layouts/index.tsx +43 -0
  155. package/app-typescript/components/LeftMenu.tsx +129 -49
  156. package/app-typescript/components/ListItemLoader.tsx +30 -0
  157. package/app-typescript/components/Lists/BoxedList.tsx +169 -0
  158. package/app-typescript/components/Lists/ContentList.tsx +100 -0
  159. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  160. package/app-typescript/components/Lists/TableList.tsx +208 -0
  161. package/app-typescript/components/Lists/index.tsx +2 -0
  162. package/app-typescript/components/Menu.tsx +31 -7
  163. package/app-typescript/components/Modal.tsx +31 -18
  164. package/app-typescript/components/MultiSelect.tsx +112 -0
  165. package/app-typescript/components/NavButton.tsx +4 -0
  166. package/app-typescript/components/Navigation/BottomNav.tsx +82 -0
  167. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  168. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  169. package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
  170. package/app-typescript/components/Navigation/index.tsx +3 -0
  171. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  172. package/app-typescript/components/RadioGroup.tsx +69 -0
  173. package/app-typescript/components/SearchBar.tsx +79 -0
  174. package/app-typescript/components/Select.tsx +22 -4
  175. package/app-typescript/components/SelectGrid.tsx +233 -0
  176. package/app-typescript/components/SidebarMenu.tsx +68 -0
  177. package/app-typescript/components/Skeleton.tsx +48 -0
  178. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  179. package/app-typescript/components/Spinner.tsx +32 -0
  180. package/app-typescript/components/SubNav.tsx +25 -4
  181. package/app-typescript/components/Switch.tsx +34 -12
  182. package/app-typescript/components/SwitchGroup.tsx +2 -1
  183. package/app-typescript/components/Tag.tsx +31 -7
  184. package/app-typescript/components/Text/Heading.tsx +67 -0
  185. package/app-typescript/components/Text/Text.tsx +36 -0
  186. package/app-typescript/components/Text/Time.tsx +34 -0
  187. package/app-typescript/components/ThemeSelector.tsx +113 -0
  188. package/app-typescript/components/Togglebox.tsx +9 -7
  189. package/app-typescript/components/Tooltip.tsx +7 -5
  190. package/app-typescript/components/TreeSelect.tsx +330 -0
  191. package/app-typescript/components/WithSizeObserver.tsx +88 -0
  192. package/app-typescript/dist/components/Alert.d.ts +16 -0
  193. package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
  194. package/app-typescript/dist/components/Avatar.d.ts +33 -0
  195. package/app-typescript/dist/components/Badge.d.ts +13 -0
  196. package/app-typescript/dist/components/Button.d.ts +23 -0
  197. package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
  198. package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
  199. package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
  200. package/app-typescript/dist/components/Checkbox.d.ts +19 -0
  201. package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
  202. package/app-typescript/dist/components/DatePicker.d.ts +37 -0
  203. package/app-typescript/dist/components/Divider.d.ts +9 -0
  204. package/app-typescript/dist/components/DonutChart.d.ts +12 -0
  205. package/app-typescript/dist/components/Dropdown.d.ts +28 -0
  206. package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
  207. package/app-typescript/dist/components/EmptyState.d.ts +11 -0
  208. package/app-typescript/dist/components/FormLabel.d.ts +9 -0
  209. package/app-typescript/dist/components/Genie.d.ts +13 -0
  210. package/app-typescript/dist/components/GridItem.d.ts +69 -0
  211. package/app-typescript/dist/components/GridList.d.ts +14 -0
  212. package/app-typescript/dist/components/HeadingText.d.ts +10 -0
  213. package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
  214. package/app-typescript/dist/components/Icon.d.ts +12 -0
  215. package/app-typescript/dist/components/IconButton.d.ts +12 -0
  216. package/app-typescript/dist/components/IconLabel.d.ts +11 -0
  217. package/app-typescript/dist/components/Input.d.ts +24 -0
  218. package/app-typescript/dist/components/Label.d.ts +15 -0
  219. package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
  220. package/app-typescript/dist/components/Loader.d.ts +8 -0
  221. package/app-typescript/dist/components/NavButton.d.ts +15 -0
  222. package/app-typescript/dist/components/Popover.d.ts +13 -0
  223. package/app-typescript/dist/components/PropsList.d.ts +15 -0
  224. package/{react → app-typescript/dist}/components/Radio.d.ts +7 -8
  225. package/{react → app-typescript/dist}/components/RadioButton.d.ts +0 -0
  226. package/app-typescript/dist/components/Select.d.ts +29 -0
  227. package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
  228. package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
  229. package/app-typescript/dist/components/StrechBar.d.ts +4 -0
  230. package/app-typescript/dist/components/SubNav.d.ts +10 -0
  231. package/app-typescript/dist/components/Switch.d.ts +12 -0
  232. package/app-typescript/dist/components/TabCustom.d.ts +25 -0
  233. package/app-typescript/dist/components/TabList.d.ts +22 -0
  234. package/app-typescript/dist/components/Tag.d.ts +9 -0
  235. package/app-typescript/dist/components/TagInput.d.ts +7 -0
  236. package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
  237. package/app-typescript/dist/components/TimePicker.d.ts +11 -0
  238. package/app-typescript/dist/components/Tooltip.d.ts +11 -0
  239. package/app-typescript/dist/components/_Positioner.d.ts +27 -0
  240. package/app-typescript/dist/index.d.ts +56 -0
  241. package/app-typescript/helpers.tsx +3 -0
  242. package/app-typescript/index.ts +25 -3
  243. package/dist/SD-logo.svg +52 -0
  244. package/dist/avatar-2.jpg +0 -0
  245. package/dist/avatar-3.jpg +0 -0
  246. package/dist/avatar-4.jpg +0 -0
  247. package/dist/avatar-5.jpg +0 -0
  248. package/dist/avatar-6.jpg +0 -0
  249. package/dist/components/basic-grid.html +1 -1
  250. package/dist/components/checkbox.html +1 -1
  251. package/dist/components/modals.html +1 -0
  252. package/dist/dots.svg +3 -0
  253. package/dist/examples.bundle.css +8628 -1602
  254. package/dist/examples.bundle.js +73031 -48307
  255. package/dist/playgrounds/accessible-theme-test.html +1 -1
  256. package/dist/playgrounds/boxed-list.html +1 -1
  257. package/dist/playgrounds/cards.html +9 -4
  258. package/dist/playgrounds/editor-3-test.html +15 -0
  259. package/dist/playgrounds/form-layout.html +9 -7
  260. package/dist/playgrounds/layout-test-2.html +1 -1
  261. package/dist/playgrounds/list-item-test.html +1 -1
  262. package/dist/playgrounds/master-desk.html +2 -4
  263. package/dist/playgrounds/media-carousel.html +1 -1
  264. package/dist/playgrounds/photo-desk.html +1 -1
  265. package/dist/playgrounds/planning.html +1 -1
  266. package/dist/playgrounds/publish.html +1 -1
  267. package/dist/playgrounds/publisher-content-analytics.html +1 -1
  268. package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
  269. package/dist/playgrounds/publisher-content-list-manual.html +1 -1
  270. package/dist/playgrounds/publisher-content-lists.html +1 -1
  271. package/dist/playgrounds/publisher-dashboard.html +1 -1
  272. package/dist/playgrounds/publisher-output-control.html +1 -1
  273. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +145 -0
  274. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  275. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  276. package/dist/playgrounds/react-playgrounds/Index.tsx +7 -1
  277. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  278. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  279. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +466 -0
  280. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  281. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
  282. package/dist/playgrounds/react-playgrounds/TestGround.tsx +276 -23
  283. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  284. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  285. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  286. package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  287. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  288. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  289. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  290. package/dist/playgrounds/swimlane-view.html +1 -1
  291. package/dist/playgrounds/toasts.html +1 -1
  292. package/dist/playgrounds/video-editor.html +1 -1
  293. package/dist/react/Alerts.tsx +91 -18
  294. package/dist/react/Avatar.tsx +314 -127
  295. package/dist/react/BoxedList.tsx +362 -0
  296. package/dist/react/ButtonGroups.tsx +66 -65
  297. package/dist/react/Buttons.tsx +65 -113
  298. package/dist/react/Carousel.tsx +2 -3
  299. package/dist/react/Checkboxs.tsx +66 -25
  300. package/dist/react/Container.tsx +143 -0
  301. package/dist/react/ContentList.tsx +280 -0
  302. package/dist/react/CreateButton.tsx +71 -0
  303. package/dist/react/DatePicker.tsx +10 -5
  304. package/dist/react/DropZone.tsx +111 -0
  305. package/dist/react/Heading.tsx +106 -0
  306. package/dist/react/IconButtons.tsx +51 -21
  307. package/dist/react/IconFont.tsx +7 -6
  308. package/dist/react/IconLabels.tsx +24 -2
  309. package/dist/react/IconPicker.tsx +65 -0
  310. package/dist/react/Index.tsx +120 -19
  311. package/dist/react/Inputs.tsx +142 -4
  312. package/dist/react/LeftNavigations.tsx +161 -9
  313. package/dist/react/ListItems.tsx +34 -0
  314. package/dist/react/Modal.tsx +8 -7
  315. package/dist/react/MultiSelect.tsx +198 -0
  316. package/dist/react/NavButtons.tsx +4 -4
  317. package/dist/react/Panel.tsx +366 -0
  318. package/dist/react/QuickNavigationBar.tsx +142 -0
  319. package/dist/react/RadioGroup.tsx +351 -0
  320. package/dist/react/SelectGrid.tsx +121 -0
  321. package/dist/react/Selects.tsx +57 -0
  322. package/dist/react/SimpleList.tsx +148 -0
  323. package/dist/react/SubNav.tsx +65 -18
  324. package/dist/react/TableList.tsx +268 -0
  325. package/dist/react/Tags.tsx +57 -5
  326. package/dist/react/Text.tsx +134 -0
  327. package/dist/react/TreeSelect.tsx +178 -0
  328. package/dist/react/WithSizeObserver.tsx +44 -0
  329. package/dist/react.html +4 -0
  330. package/dist/sd_big-icons.eot +0 -0
  331. package/dist/sd_big-icons.svg +55 -53
  332. package/dist/sd_big-icons.ttf +0 -0
  333. package/dist/sd_big-icons.woff +0 -0
  334. package/dist/sd_icons.eot +0 -0
  335. package/dist/sd_icons.svg +1 -0
  336. package/dist/sd_icons.ttf +0 -0
  337. package/dist/sd_icons.woff +0 -0
  338. package/dist/superdesk-ui.bundle.css +54140 -25145
  339. package/dist/superdesk-ui.bundle.js +58228 -51200
  340. package/dist/vendor.bundle.js +25688 -25666
  341. package/examples/css/docs-page.css +99 -29
  342. package/examples/img/avatar-2.jpg +0 -0
  343. package/examples/img/avatar-3.jpg +0 -0
  344. package/examples/img/avatar-4.jpg +0 -0
  345. package/examples/img/avatar-5.jpg +0 -0
  346. package/examples/img/avatar-6.jpg +0 -0
  347. package/examples/index.js +28 -0
  348. package/examples/pages/components/basic-grid.html +1 -1
  349. package/examples/pages/components/checkbox.html +1 -1
  350. package/examples/pages/components/modals.html +1 -0
  351. package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
  352. package/examples/pages/playgrounds/boxed-list.html +1 -1
  353. package/examples/pages/playgrounds/cards.html +9 -4
  354. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  355. package/examples/pages/playgrounds/form-layout.html +9 -7
  356. package/examples/pages/playgrounds/layout-test-2.html +1 -1
  357. package/examples/pages/playgrounds/list-item-test.html +1 -1
  358. package/examples/pages/playgrounds/master-desk.html +2 -4
  359. package/examples/pages/playgrounds/media-carousel.html +1 -1
  360. package/examples/pages/playgrounds/photo-desk.html +1 -1
  361. package/examples/pages/playgrounds/planning.html +1 -1
  362. package/examples/pages/playgrounds/publish.html +1 -1
  363. package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
  364. package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
  365. package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
  366. package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
  367. package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
  368. package/examples/pages/playgrounds/publisher-output-control.html +1 -1
  369. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +145 -0
  370. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  371. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  372. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +7 -1
  373. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  374. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  375. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +466 -0
  376. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  377. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
  378. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +276 -23
  379. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  380. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  381. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  382. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  383. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  384. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  385. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  386. package/examples/pages/playgrounds/swimlane-view.html +1 -1
  387. package/examples/pages/playgrounds/toasts.html +1 -1
  388. package/examples/pages/playgrounds/video-editor.html +1 -1
  389. package/examples/pages/react/Alerts.tsx +91 -18
  390. package/examples/pages/react/Avatar.tsx +314 -127
  391. package/examples/pages/react/BoxedList.tsx +362 -0
  392. package/examples/pages/react/ButtonGroups.tsx +66 -65
  393. package/examples/pages/react/Buttons.tsx +65 -113
  394. package/examples/pages/react/Carousel.tsx +2 -3
  395. package/examples/pages/react/Checkboxs.tsx +66 -25
  396. package/examples/pages/react/Container.tsx +143 -0
  397. package/examples/pages/react/ContentList.tsx +280 -0
  398. package/examples/pages/react/CreateButton.tsx +71 -0
  399. package/examples/pages/react/DatePicker.tsx +10 -5
  400. package/examples/pages/react/DropZone.tsx +111 -0
  401. package/examples/pages/react/Heading.tsx +106 -0
  402. package/examples/pages/react/IconButtons.tsx +51 -21
  403. package/examples/pages/react/IconFont.tsx +7 -6
  404. package/examples/pages/react/IconLabels.tsx +24 -2
  405. package/examples/pages/react/IconPicker.tsx +65 -0
  406. package/examples/pages/react/Index.tsx +120 -19
  407. package/examples/pages/react/Inputs.tsx +142 -4
  408. package/examples/pages/react/LeftNavigations.tsx +161 -9
  409. package/examples/pages/react/ListItems.tsx +34 -0
  410. package/examples/pages/react/Modal.tsx +8 -7
  411. package/examples/pages/react/MultiSelect.tsx +198 -0
  412. package/examples/pages/react/NavButtons.tsx +4 -4
  413. package/examples/pages/react/Panel.tsx +366 -0
  414. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  415. package/examples/pages/react/RadioGroup.tsx +351 -0
  416. package/examples/pages/react/SelectGrid.tsx +121 -0
  417. package/examples/pages/react/Selects.tsx +57 -0
  418. package/examples/pages/react/SimpleList.tsx +148 -0
  419. package/examples/pages/react/SubNav.tsx +65 -18
  420. package/examples/pages/react/TableList.tsx +268 -0
  421. package/examples/pages/react/Tags.tsx +57 -5
  422. package/examples/pages/react/Text.tsx +134 -0
  423. package/examples/pages/react/TreeSelect.tsx +178 -0
  424. package/examples/pages/react/WithSizeObserver.tsx +44 -0
  425. package/examples/pages/react.html +4 -0
  426. package/package.json +12 -7
  427. package/patches/@superdesk+primereact+5.0.2-4.patch +44 -0
  428. package/react/components/Alert.d.ts +3 -0
  429. package/react/components/Alert.js +17 -7
  430. package/react/components/Autocomplete.js +16 -12
  431. package/react/components/Avatar.d.ts +9 -0
  432. package/react/components/Avatar.js +24 -4
  433. package/react/components/Badge.js +7 -5
  434. package/react/components/Button.d.ts +2 -0
  435. package/react/components/Button.js +12 -8
  436. package/react/components/ButtonGroup.d.ts +3 -2
  437. package/react/components/ButtonGroup.js +9 -7
  438. package/react/components/Carousel.js +5 -3
  439. package/react/components/CheckButtonGroup.d.ts +3 -1
  440. package/react/components/CheckButtonGroup.js +14 -6
  441. package/react/components/CheckGroup.d.ts +1 -0
  442. package/react/components/CheckGroup.js +6 -4
  443. package/react/components/Checkbox.d.ts +2 -1
  444. package/react/components/Checkbox.js +7 -5
  445. package/react/components/CheckboxButton.d.ts +1 -0
  446. package/react/components/CheckboxButton.js +8 -6
  447. package/react/components/ContentDivider.js +8 -6
  448. package/react/components/CreateButton.d.ts +17 -0
  449. package/react/components/CreateButton.js +68 -0
  450. package/react/components/DatePicker.d.ts +10 -0
  451. package/react/components/DatePicker.js +61 -31
  452. package/react/components/Divider.js +6 -4
  453. package/react/components/DonutChart.d.ts +1 -1
  454. package/react/components/DonutChart.js +24 -6
  455. package/react/components/DropZone.d.ts +25 -0
  456. package/react/components/DropZone.js +95 -0
  457. package/react/components/Dropdown.d.ts +1 -0
  458. package/react/components/Dropdown.js +10 -9
  459. package/react/components/DropdownFirst.js +18 -11
  460. package/react/components/EmptyState.js +7 -5
  461. package/react/components/Form/FormGroup.d.ts +13 -0
  462. package/react/components/Form/FormGroup.js +63 -0
  463. package/react/components/Form/FormItem.d.ts +9 -0
  464. package/react/components/Form/FormItem.js +56 -0
  465. package/react/components/Form/FormLabel.d.ts +10 -0
  466. package/react/components/Form/FormLabel.js +56 -0
  467. package/react/components/Form/FormRow.d.ts +17 -0
  468. package/react/components/Form/FormRow.js +64 -0
  469. package/react/components/Form/FormText.d.ts +8 -0
  470. package/react/components/Form/FormText.js +49 -0
  471. package/react/components/Form/index.d.ts +5 -0
  472. package/react/components/Form/index.js +13 -0
  473. package/react/components/FormLabel.js +5 -3
  474. package/react/components/GridItem.js +9 -7
  475. package/react/components/GridList.js +8 -6
  476. package/react/components/HeadingText.js +4 -2
  477. package/react/components/HelloWorld.js +4 -2
  478. package/react/components/Icon.d.ts +2 -1
  479. package/react/components/Icon.js +9 -6
  480. package/react/components/IconButton.d.ts +9 -2
  481. package/react/components/IconButton.js +17 -7
  482. package/react/components/IconLabel.d.ts +2 -0
  483. package/react/components/IconLabel.js +12 -7
  484. package/react/components/IconPicker.d.ts +24 -0
  485. package/react/components/IconPicker.js +287 -0
  486. package/react/components/Input.d.ts +25 -3
  487. package/react/components/Input.js +36 -12
  488. package/react/components/Label.js +10 -8
  489. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  490. package/react/components/Layouts/AuthorinInnerSideBar.js +49 -0
  491. package/react/components/Layouts/AuthoringContainer.d.ts +11 -0
  492. package/react/components/Layouts/AuthoringContainer.js +60 -0
  493. package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
  494. package/react/components/Layouts/AuthoringFrame.js +58 -0
  495. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  496. package/react/components/Layouts/AuthoringFrameContainer.js +49 -0
  497. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  498. package/react/components/Layouts/AuthoringFrameLeftBar.js +49 -0
  499. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  500. package/react/components/Layouts/AuthoringFrameMain.js +49 -0
  501. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  502. package/react/components/Layouts/AuthoringFrameNavBar.js +49 -0
  503. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  504. package/react/components/Layouts/AuthoringFrameOverlay.js +49 -0
  505. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
  506. package/react/components/Layouts/AuthoringFrameRightBar.js +49 -0
  507. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  508. package/react/components/Layouts/AuthoringFrameSidePanel.js +58 -0
  509. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  510. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +58 -0
  511. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  512. package/react/components/Layouts/AuthoringInnerBody.js +49 -0
  513. package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
  514. package/react/components/Layouts/AuthoringInnerHeader.js +68 -0
  515. package/react/components/Layouts/AuthoringMain.d.ts +14 -0
  516. package/react/components/Layouts/AuthoringMain.js +55 -0
  517. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  518. package/react/components/Layouts/AuthoringMainContainer.js +49 -0
  519. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  520. package/react/components/Layouts/AuthoringMainContent.js +49 -0
  521. package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
  522. package/react/components/Layouts/AuthoringMainToolBar.js +56 -0
  523. package/react/components/Layouts/BottomBarAction.d.ts +12 -0
  524. package/react/components/Layouts/BottomBarAction.js +59 -0
  525. package/react/components/Layouts/Container.d.ts +14 -0
  526. package/react/components/Layouts/Container.js +62 -0
  527. package/react/components/Layouts/ContentSplitter.d.ts +10 -0
  528. package/react/components/Layouts/ContentSplitter.js +58 -0
  529. package/react/components/Layouts/CoreLayout.d.ts +19 -0
  530. package/react/components/Layouts/CoreLayout.js +55 -0
  531. package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
  532. package/react/components/Layouts/CoreLayoutContainer.js +49 -0
  533. package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
  534. package/react/components/Layouts/CoreLayoutFooter.js +49 -0
  535. package/react/components/Layouts/CoreLayoutMain.d.ts +9 -0
  536. package/react/components/Layouts/CoreLayoutMain.js +49 -0
  537. package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
  538. package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
  539. package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
  540. package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
  541. package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
  542. package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
  543. package/react/components/Layouts/HamburgerButton.d.ts +14 -0
  544. package/react/components/Layouts/HamburgerButton.js +63 -0
  545. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  546. package/react/components/Layouts/HeaderPanel.js +49 -0
  547. package/react/components/Layouts/Layout.d.ts +8 -0
  548. package/react/components/Layouts/Layout.js +36 -0
  549. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  550. package/react/components/Layouts/LayoutContainer.js +49 -0
  551. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  552. package/react/components/Layouts/LeftPanel.js +56 -0
  553. package/react/components/Layouts/MainMenu.d.ts +41 -0
  554. package/react/components/Layouts/MainMenu.js +103 -0
  555. package/react/components/Layouts/MainPanel.d.ts +11 -0
  556. package/react/components/Layouts/MainPanel.js +59 -0
  557. package/react/components/Layouts/NotificationPanel.d.ts +45 -0
  558. package/react/components/Layouts/NotificationPanel.js +110 -0
  559. package/react/components/Layouts/OverlayPanel.d.ts +8 -0
  560. package/react/components/Layouts/OverlayPanel.js +51 -0
  561. package/react/components/Layouts/PageLayout.d.ts +16 -0
  562. package/react/components/Layouts/PageLayout.js +66 -0
  563. package/react/components/Layouts/Panel.d.ts +66 -0
  564. package/react/components/Layouts/Panel.js +168 -0
  565. package/react/components/Layouts/RightPanel.d.ts +9 -0
  566. package/react/components/Layouts/RightPanel.js +49 -0
  567. package/react/components/Layouts/index.d.ts +39 -0
  568. package/react/components/Layouts/index.js +86 -0
  569. package/react/components/LeftMenu.d.ts +10 -3
  570. package/react/components/LeftMenu.js +64 -18
  571. package/react/components/ListItemLoader.d.ts +4 -0
  572. package/react/components/ListItemLoader.js +64 -0
  573. package/react/components/Lists/BoxedList.d.ts +44 -0
  574. package/react/components/Lists/BoxedList.js +160 -0
  575. package/react/components/Lists/SimpleList.d.ts +21 -0
  576. package/react/components/Lists/SimpleList.js +80 -0
  577. package/react/components/Lists/index.d.ts +2 -0
  578. package/react/components/Lists/index.js +10 -0
  579. package/react/components/Loader.js +4 -2
  580. package/react/components/Menu.d.ts +2 -1
  581. package/react/components/Menu.js +48 -12
  582. package/react/components/Modal.d.ts +4 -1
  583. package/react/components/Modal.js +35 -6
  584. package/react/components/NavButton.d.ts +1 -0
  585. package/react/components/NavButton.js +9 -4
  586. package/react/components/Navigation/BottomNav.d.ts +23 -0
  587. package/react/components/Navigation/BottomNav.js +88 -0
  588. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  589. package/react/components/Navigation/QuickNavBar.js +117 -0
  590. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  591. package/react/components/Navigation/SideBarMenu.js +79 -0
  592. package/react/components/Navigation/SideBarTabs.d.ts +23 -0
  593. package/react/components/Navigation/SideBarTabs.js +88 -0
  594. package/react/components/Navigation/index.d.ts +3 -0
  595. package/react/components/Navigation/index.js +9 -0
  596. package/react/components/Popover.js +4 -2
  597. package/react/components/PropsList.js +4 -2
  598. package/react/components/RadioButtonGroup.d.ts +29 -0
  599. package/react/components/RadioButtonGroup.js +91 -0
  600. package/react/components/RadioGroup.d.ts +24 -0
  601. package/react/components/{Radio.js → RadioGroup.js} +20 -14
  602. package/react/components/SearchBar.d.ts +23 -0
  603. package/react/components/SearchBar.js +89 -0
  604. package/react/components/Select.d.ts +8 -1
  605. package/react/components/Select.js +22 -11
  606. package/react/components/SelectGrid.d.ts +45 -0
  607. package/react/components/SelectGrid.js +200 -0
  608. package/react/components/SelectWithTemplate.js +4 -2
  609. package/react/components/Skeleton.d.ts +30 -0
  610. package/react/components/Skeleton.js +76 -0
  611. package/react/components/SlidingToolbar.d.ts +1 -1
  612. package/react/components/SlidingToolbar.js +15 -3
  613. package/react/components/Spinner.d.ts +11 -0
  614. package/react/components/Spinner.js +71 -0
  615. package/react/components/StrechBar.js +4 -2
  616. package/react/components/SubNav.d.ts +8 -1
  617. package/react/components/SubNav.js +28 -8
  618. package/react/components/Switch.d.ts +4 -1
  619. package/react/components/Switch.js +25 -11
  620. package/react/components/SwitchGroup.d.ts +1 -0
  621. package/react/components/SwitchGroup.js +6 -4
  622. package/react/components/TabCustom.d.ts +0 -1
  623. package/react/components/TabCustom.js +11 -7
  624. package/react/components/TabList.js +6 -4
  625. package/react/components/Tag.d.ts +3 -2
  626. package/react/components/Tag.js +21 -9
  627. package/react/components/TagInput.d.ts +0 -1
  628. package/react/components/TagInput.js +7 -6
  629. package/react/components/TagInputTest.js +13 -9
  630. package/react/components/Text/Heading.d.ts +15 -0
  631. package/react/components/Text/Heading.js +79 -0
  632. package/react/components/Text/Text.d.ts +15 -0
  633. package/react/components/Text/Text.js +67 -0
  634. package/react/components/Text/Time.d.ts +15 -0
  635. package/react/components/Text/Time.js +65 -0
  636. package/react/components/ThemeSelector.d.ts +21 -0
  637. package/react/components/ThemeSelector.js +114 -0
  638. package/react/components/TimePicker.js +4 -2
  639. package/react/components/Toast.js +1 -1
  640. package/react/components/ToastMessage.js +6 -5
  641. package/react/components/ToastText.js +1 -1
  642. package/react/components/ToastWrapper.d.ts +2 -2
  643. package/react/components/ToastWrapper.js +14 -10
  644. package/react/components/Togglebox.d.ts +2 -1
  645. package/react/components/Togglebox.js +42 -14
  646. package/react/components/Tooltip.d.ts +1 -0
  647. package/react/components/Tooltip.js +14 -10
  648. package/react/components/WithSizeObserver.d.ts +25 -0
  649. package/react/components/WithSizeObserver.js +95 -0
  650. package/react/components/_Positioner.js +4 -2
  651. package/react/helpers.d.ts +1 -0
  652. package/react/helpers.js +7 -0
  653. package/react/index.d.ts +22 -3
  654. package/react/index.js +53 -4
  655. package/yarn-error.log +111 -0
  656. package/app/styles/variables/_design-tokens-general.scss +0 -136
  657. package/app-typescript/components/Radio.tsx +0 -57
  658. package/app-typescript/components/RadioButton.tsx +0 -57
  659. package/dist/react/Radios.tsx +0 -391
  660. package/examples/pages/react/Radios.tsx +0 -391
  661. package/react/components/RadioButton.js +0 -65
@@ -5,14 +5,26 @@ import { Tag, Prop, PropsList } from '../../../app-typescript';
5
5
 
6
6
  interface ITag{
7
7
  tags: Array<any>;
8
+ tags2: Array<any>;
8
9
  }
9
10
  export default class TagDoc extends React.Component<{}, ITag> {
10
11
  constructor(props){
11
12
  super(props);
12
13
  this.state = {
13
- tags: [{text: 'This is a tag'},{text: 'This is another tag', shade:'darker'}, {text: 'Inverse tag', shade:'inverse'}, {text: 'Lorem ipsum', shade:'highlight1'}, {text: 'Dolor amet', shade:'highlight2', shape:'square'}],
14
+ tags: [
15
+ {text: 'This is a tag'},
16
+ {text: 'This is another tag', shade:'darker'},
17
+ {text: 'Inverse tag', shade:'inverse'},
18
+ {text: 'Lorem ipsum', shade:'highlight1'},
19
+ {text: 'Dolor amet', shade:'highlight2', shape:'square'},
20
+ {text: 'Read only tag', readOnly: true}
21
+ ],
22
+ tags2: [
23
+ {text: 'Tag with label', label: 'Label'},
24
+ ],
14
25
  }
15
26
  this.handleClick=this.handleClick.bind(this);
27
+ this.handleClick2=this.handleClick2.bind(this);
16
28
  }
17
29
 
18
30
  handleClick(i:number){
@@ -22,6 +34,14 @@ export default class TagDoc extends React.Component<{}, ITag> {
22
34
  tags: newTags
23
35
  });
24
36
  }
37
+
38
+ handleClick2(i:number){
39
+ let newTags2 = clone(this.state.tags2);
40
+ newTags2.splice(i, 1);
41
+ this.setState({
42
+ tags2: newTags2
43
+ });
44
+ }
25
45
  render() {
26
46
  return (
27
47
  <section className="docs-page__container">
@@ -37,7 +57,12 @@ export default class TagDoc extends React.Component<{}, ITag> {
37
57
  {this.state.tags.map((tag,index)=>{
38
58
  return (
39
59
  <React.Fragment key={index}>
40
- <Tag keyValue={index} text={tag.text} shade={tag.shade} shape={tag.shape} onClick={()=>this.handleClick(index)}/>
60
+ <Tag keyValue={index}
61
+ text={tag.text}
62
+ shade={tag.shade}
63
+ shape={tag.shape}
64
+ readOnly={tag.readOnly}
65
+ onClick={()=>this.handleClick(index)}/>
41
66
  </React.Fragment>
42
67
  )
43
68
  })}
@@ -46,19 +71,46 @@ export default class TagDoc extends React.Component<{}, ITag> {
46
71
  <Markup.ReactMarkupCode>{`
47
72
  <Tag text='This is a tag' onClick={()=>false}/>
48
73
  <Tag text='This is a another tag' shade='darker' onClick={()=>false}/>
74
+ <Tag text='Inverse tag' shade='inverse' onClick={()=>false}/>
49
75
  <Tag text='Lorem ipsum' shade='highlight1' onClick={()=>false}/>
50
76
  <Tag text='Dolor amet' shade='highlight2' shape='square' onClick={()=>false}/>
77
+ <Tag text='Read only tag' readOnly={trye} onClick={()=>false}/>
51
78
 
52
79
  `}
53
80
  </Markup.ReactMarkupCode>
54
81
  </Markup.ReactMarkup>
55
82
 
83
+ <Markup.ReactMarkup>
84
+ <Markup.ReactMarkupPreview>
85
+ <div className='docs-page__content-row'>
86
+ {this.state.tags2.map((tag,index)=>{
87
+ return (
88
+ <React.Fragment key={index}>
89
+ <Tag keyValue={index}
90
+ text={tag.text}
91
+ label={tag.label}
92
+ onClick={() => this.handleClick2(index)}/>
93
+ </React.Fragment>
94
+ )
95
+ })}
96
+ </div>
97
+ </Markup.ReactMarkupPreview>
98
+ <Markup.ReactMarkupCode>{`
99
+ <Tag text='Tag with label'
100
+ label='Label'
101
+ onClick={() => false} />
102
+ `}
103
+ </Markup.ReactMarkupCode>
104
+ </Markup.ReactMarkup>
105
+
56
106
  <h3 className="docs-page__h3">Props</h3>
57
107
  <PropsList>
58
108
  <Prop name='text' isRequired={true} type='string' default='/' description='Tag text value.'/>
59
- <Prop name='shade' isRequired={false} type='light | darker | highlight1 | highlight2 | inverse' default='light' description='Shade colour of tag'/>
60
- <Prop name='shape' isRequired={false} type='round | square' default='round' description='Make shape of tag square or default round.'/>
61
- <Prop name='keyValue' isRequired={false} type='number' default='/' description='Value of tag key'/>
109
+ <Prop name='shade' isRequired={false} type='light | darker | highlight1 | highlight2 | inverse' default='light' description='Shade colour of the tag.'/>
110
+ <Prop name='shape' isRequired={false} type='round | square' default='round' description='Shape of tag. Round (default) or square.'/>
111
+ <Prop name='readOnly' isRequired={false} type='boolean' default='false' description='Removes the option to delete the tag if set to true.'/>
112
+ <Prop name='keyValue' isRequired={false} type='number' default='/' description='Value of the tag key.'/>
113
+ <Prop name='label' isRequired={false} type='string' default='/' description='Text of label.'/>
62
114
  </PropsList>
63
115
  </section>
64
116
  )
@@ -0,0 +1,134 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { PropsList, Prop, Text } from '../../../app-typescript';
4
+
5
+ interface IProps {
6
+ children?: React.ReactNode;
7
+ }
8
+
9
+ export default class TextDoc extends React.Component<IProps> {
10
+ render() {
11
+ return (
12
+ <section className='docs-page__container'>
13
+ <h2 className='docs-page__h2'>Text</h2>
14
+
15
+ <Markup.ReactMarkupCodePreview>{`
16
+ <Text>Cum sociis natoque penatibus et magnis dis parturient...</Text>
17
+ `}
18
+ </Markup.ReactMarkupCodePreview>
19
+
20
+ <p className="docs-page__paragraph">Text component.</p>
21
+
22
+ <Markup.ReactMarkup>
23
+ <Markup.ReactMarkupPreview>
24
+ <p className="docs-page__paragraph">// Sizes and alignments</p>
25
+ <div className='docs-page__content-row sd-margin-b--5'>
26
+ <Text size='x-small' style='italic'>
27
+ Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus ac cursus commodo,
28
+ tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis
29
+ ornare vel eu leo. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
30
+ </Text>
31
+ </div>
32
+ <div className='docs-page__content-row sd-margin-b--5'>
33
+ <Text align='end'>
34
+ Default size (small), align to end. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
35
+ Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
36
+ Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
37
+ posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent
38
+ commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Morbi leo
39
+ risus, porta ac consectetur ac, vestibulum at eros.
40
+ </Text>
41
+ </div>
42
+ <div className='docs-page__content-row sd-margin-b--5'>
43
+ <Text size='medium' align='center'>
44
+ Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere
45
+ consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus,
46
+ porta ac consectetur ac, vestibulum at eros.
47
+ </Text>
48
+ </div>
49
+ <div className='docs-page__content-row sd-margin-b--5'>
50
+ <Text size='large' align='justify'>
51
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
52
+ est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
53
+ consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
54
+ sem lacinia quam venenatis vestibulum.
55
+ </Text>
56
+ </div>
57
+
58
+ <p className="docs-page__paragraph">// Variations</p>
59
+ <div className='docs-page__content-row sd-margin-b--5'>
60
+ <Text weight='light' size='medium'>
61
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
62
+ est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
63
+ consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
64
+ sem lacinia quam venenatis vestibulum.
65
+ </Text>
66
+ </div>
67
+ <div className='docs-page__content-row sd-margin-b--5'>
68
+ <Text fontStyle='serif' weight='strong' size='medium' color='light' align='center'>
69
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
70
+ est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
71
+ consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
72
+ sem lacinia quam venenatis vestibulum.
73
+ </Text>
74
+ </div>
75
+ <div className='docs-page__content-row sd-margin-b--5'>
76
+ <Text fontStyle='serif' weight='light' size='small' align='start'>
77
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
78
+ est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
79
+ consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
80
+ sem lacinia quam venenatis vestibulum.
81
+ </Text>
82
+ </div>
83
+
84
+ </Markup.ReactMarkupPreview>
85
+ <Markup.ReactMarkupCode>{`
86
+ // Sizes and alignments
87
+
88
+ <Text size='x-small' style='italic'>
89
+ Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus...
90
+ </Text>
91
+
92
+ <Text align='end'>
93
+ Default size (small), align to end. Praesent commodo cursus magna...
94
+ </Text>
95
+
96
+ <Text size='medium' align='center'>
97
+ Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque...
98
+ </Text>
99
+
100
+ <Text size='large' align='justify'>
101
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl...
102
+ </Text>
103
+
104
+ // Variations
105
+
106
+ <Text weight='light' size='medium'>
107
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
108
+ </Text>
109
+
110
+ <Text fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
111
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
112
+ </Text>
113
+
114
+ <Text className='' fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
115
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
116
+ </Text>
117
+ `}
118
+ </Markup.ReactMarkupCode>
119
+ </Markup.ReactMarkup>
120
+
121
+ <h3 className="docs-page__h3">Props</h3>
122
+ <PropsList>
123
+ <Prop name='weight' isRequired={false} type='light | normal | medium | strong' default='normal' description='Change the default font weight.'/>
124
+ <Prop name='size' isRequired={true} type='x-small | small | medium | large' default='small' description='Choose between four predefined font sizes.'/>
125
+ <Prop name='style' isRequired={false} type='normal | italic' default='normal' description='Change the default text style.'/>
126
+ <Prop name='align' isRequired={false} type='start | end | center | justify' default='start' description='Text-align'/>
127
+ <Prop name='fontStyle' isRequired={false} type='sans | serif' default='sans' description='Choose between the default – sans (Roboto) – and serif (Merriweather) font styles. '/>
128
+ <Prop name='color' isRequired={false} type='normal | light | lighter' default='normal' description='Choose a different text colour. Additional two lighter shades are available.'/>
129
+ <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
130
+ </PropsList>
131
+ </section>
132
+ )
133
+ }
134
+ }
@@ -0,0 +1,178 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { PropsList, Prop } from '../../../app-typescript';
4
+ import { MultiSelect } from '../../../app-typescript/components/MultiSelect';
5
+ import { TreeSelect } from '../../../app-typescript/components/TreeSelect';
6
+
7
+ interface IState {
8
+ value: any;
9
+ value2: any;
10
+ options: any;
11
+ options2: any;
12
+ }
13
+
14
+ let itemArr = [
15
+ {
16
+ label: 'Item1',
17
+ items: [
18
+ {
19
+ label: 'Item4',
20
+ items: [
21
+ {label: 'Item10'}
22
+ ]
23
+ },
24
+ {
25
+ label: 'Item5',
26
+ items: [
27
+ {label: 'Item11'}
28
+ ]
29
+ }
30
+ ]
31
+ },
32
+ {
33
+ label: 'Item2',
34
+ items: [
35
+ {
36
+ label: 'Item6'
37
+ },
38
+ {
39
+ label: 'Item7'
40
+ }
41
+ ]
42
+ },
43
+ {
44
+ label: 'Item3',
45
+ items: [
46
+ {
47
+ label: 'Item8'
48
+ },
49
+ {
50
+ label: 'Item9'
51
+ }
52
+ ]
53
+ },
54
+ ]
55
+
56
+ export class TreeSelectDocs extends React.Component<{}, IState> {
57
+ constructor(props) {
58
+ super(props);
59
+ this.state = {
60
+ value: [],
61
+ value2: [],
62
+ options: itemArr,
63
+ options2: itemArr
64
+ }
65
+
66
+ this.handleChange = this.handleChange.bind(this);
67
+ }
68
+
69
+ handleChange(e, option) {
70
+
71
+ if(option.item) {
72
+ e.stopPropagation();
73
+ e.preventDefault();
74
+
75
+ this.setState({
76
+ options: option.item
77
+ })
78
+ }
79
+ }
80
+
81
+ render() {
82
+ return (
83
+ <section className='docs-page__container'>
84
+ <h2 className='docs-page__h2'>TreeSelect</h2>
85
+
86
+ <Markup.ReactMarkupCodePreview>{`
87
+ <TreeSelect
88
+ options={this.state.options2}
89
+ getLabel={'label'}
90
+ getMultilevelArray={'items'}
91
+ selectBranchWithChildren={true}
92
+ onChange={() => false}
93
+ />
94
+ `}
95
+ </Markup.ReactMarkupCodePreview>
96
+
97
+ <Markup.ReactMarkup>
98
+ <Markup.ReactMarkupPreview>
99
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
100
+ <div className='form__row'>
101
+ <TreeSelect
102
+ options={this.state.options}
103
+ getLabel={'label'}
104
+ getMultilevelArray={'items'}
105
+ selectBranchWithChildren={true}
106
+ onChange={() => false}
107
+ />
108
+ </div>
109
+ </div>
110
+ </Markup.ReactMarkupPreview>
111
+
112
+ <Markup.ReactMarkupCode>{`
113
+ <TreeSelect
114
+ options={this.state.options}
115
+ getLabel={'label'}
116
+ getMultilevelArray={'items'}
117
+ selectBranchWithChildren={true}
118
+ onChange={() => false}
119
+ />
120
+ `}</Markup.ReactMarkupCode>
121
+
122
+ </Markup.ReactMarkup>
123
+ <p className='docs-page__paragraph'>TreeSelect with custom template.</p>
124
+ <Markup.ReactMarkup>
125
+ <Markup.ReactMarkupPreview>
126
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
127
+ <div className='form__row'>
128
+ <TreeSelect
129
+ options={this.state.options2}
130
+ getMultilevelArray={'items'}
131
+ getLabel={'label'}
132
+ onChange={() => false}
133
+ optionTemplate={(item: any) => {
134
+ return <div>Label: {item.label}</div>
135
+ }}
136
+ valueTemplate={(item: any) => {
137
+ return <span>Label: {item.label}</span>
138
+ }}
139
+ />
140
+ </div>
141
+ </div>
142
+ </Markup.ReactMarkupPreview>
143
+
144
+ <Markup.ReactMarkupCode>{`
145
+ <TreeSelect
146
+ options={this.state.options2}
147
+ getMultilevelArray={'items'}
148
+ getLabel={'label'}
149
+ onChange={() => false}
150
+ optionTemplate={(item: any) => {
151
+ return <div>Label: {item.label}</div>
152
+ }}
153
+ valueTemplate={(item: any) => {
154
+ return <span>Label: {item.label}</span>
155
+ }}
156
+ />
157
+ `}</Markup.ReactMarkupCode>
158
+
159
+ </Markup.ReactMarkup>
160
+
161
+ <h3 className="docs-page__h3">Props</h3>
162
+ <PropsList>
163
+ <Prop name='value' isRequired={false} type='Array<T>' default='/' description='Value of the component.'/>
164
+ <Prop name='options' isRequired={true} type='Array<T>' default='/' description='An array of selectitems to display as the available options.'/>
165
+ <Prop name='getLabel' isRequired={true} type='string' default='/' description='Name of the label field of an option and decides which field or fields to search against.'/>
166
+ <Prop name='getMultilevelArray' isRequired={true} type='string' default='/' description='Name of the children array of an option.'/>
167
+ <Prop name='width' isRequired={false} type='medium | full-width (100%)' default='100%' description='Dropdown width.'/>
168
+ <Prop name='selectBranchWithChildren' isRequired={false} type='boolean' default='false' description='When specified, select branch with children is enabled.'/>
169
+ <Prop name='readonly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.'/>
170
+ <Prop name='valueTemplate' isRequired={false} type='function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
171
+ <Prop name='optionTemplate' isRequired={false} type='function' default='/' description='Function that gets the option and returns the content for it.'/>
172
+ <Prop name='onChange' isRequired={true} type='function' default='/' description='Callback to invoke when value changes.'/>
173
+ </PropsList>
174
+
175
+ </section>
176
+ )
177
+ }
178
+ }
@@ -0,0 +1,44 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import {WithSizeObserver} from '../../../app-typescript/components/WithSizeObserver';
4
+
5
+ export class WithSizeObserverDocs extends React.Component {
6
+ render() {
7
+ return (
8
+ <section className='docs-page__container'>
9
+
10
+ <h2 className='docs-page__h2'>WithSizeObserver</h2>
11
+
12
+ <p>Higher order component for dynamically retrieving dimensions of any element.</p>
13
+
14
+ <p>It uses `ResizeObserver` to listen for updates and re-render children efficiently.</p>
15
+
16
+ <p className='docs-page__paragraph'></p>
17
+ <Markup.ReactMarkup>
18
+ <Markup.ReactMarkupPreview>
19
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
20
+ <div className='form__row'>
21
+ <div style={{resize: 'both', overflow: 'auto', height: 40, outline: '1px solid red'}}>
22
+ <WithSizeObserver>
23
+ {({width, height}) => (
24
+ <div>width: {width}px ; height: {height}px</div>
25
+ )}
26
+ </WithSizeObserver>
27
+ </div>
28
+ </div>
29
+ </div>
30
+
31
+ </Markup.ReactMarkupPreview>
32
+
33
+ <Markup.ReactMarkupCode>{`
34
+ <WithSizeObserver>
35
+ {({width, height}) => (
36
+ <div>width: {width}px ; height: {height}px</div>
37
+ )}
38
+ </WithSizeObserver>
39
+ `}</Markup.ReactMarkupCode>
40
+ </Markup.ReactMarkup>
41
+ </section>
42
+ )
43
+ }
44
+ }
@@ -8,6 +8,10 @@
8
8
  <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/react">React</a></li>
9
9
  <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
10
10
  </ul>
11
+ <button class="docs-page__header-button" aria-label="Change theme" aria-haspopup="menu" aria-expanded="false">
12
+ <i role="presentation" class="icon-adjust"></i>
13
+ </button>
11
14
  </header>
12
15
 
16
+
13
17
  <doc-react class="sd-wrap-helper"></doc-react>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.0-beta.0",
3
+ "version": "3.0.1-beta.3",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -19,9 +19,10 @@
19
19
  "scripts": {
20
20
  "start": "webpack-dev-server --config tasks/webpack.dev.js",
21
21
  "server": "webpack --watch --config tasks/webpack.prod.js && tsc-watch",
22
- "build": "webpack --config tasks/webpack.prod.js && tsc && npm run lint",
22
+ "build": "webpack --config tasks/webpack.prod.js && tsc",
23
23
  "build-ui": "webpack && tsc && npm run lint",
24
- "lint": "eslint app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
24
+ "lint": "eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
25
+ "lint-fix": "tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
25
26
  "prepublishOnly": "npm run build",
26
27
  "prepublish": "patch-package"
27
28
  },
@@ -32,6 +33,8 @@
32
33
  "@types/react": "16.8.23",
33
34
  "@types/react-dom": "16.8.0",
34
35
  "@types/react-router-dom": "^5.1.2",
36
+ "@types/react-scrollspy": "^3.3.5",
37
+ "@typescript-eslint/parser": "5.14.0",
35
38
  "angular": "^1.7.9",
36
39
  "angular-animate": "^1.7.9",
37
40
  "angular-route": "^1.7.9",
@@ -56,9 +59,9 @@
56
59
  "jquery": "^3.1.1",
57
60
  "jquery-ui": "^1.12.1",
58
61
  "lodash": "4.17.21",
59
- "node-sass": "^4.5.3",
62
+ "node-sass": "6.0",
60
63
  "patch-package": "6.2.0",
61
- "prismjs": "^1.17.1",
64
+ "prismjs": "^1.28.0",
62
65
  "prop-types": "^15.6.0",
63
66
  "react": "16.8.6",
64
67
  "react-bootstrap": "^0.31.2",
@@ -72,7 +75,7 @@
72
75
  "superdesk-code-style": "^1.1.2",
73
76
  "ts-loader": "^6.0.2",
74
77
  "tslint": "^5.18.0",
75
- "typescript": "^3.5.1",
78
+ "typescript": "4.5.2",
76
79
  "url-loader": "^1.1.2",
77
80
  "webpack": "^3.5.5",
78
81
  "webpack-cli": "3.3.10",
@@ -88,7 +91,9 @@
88
91
  "date-fns": "2.7.0",
89
92
  "popper.js": "1.14.4",
90
93
  "primeicons": "2.0.0",
94
+ "react-beautiful-dnd": "^13.0.0",
91
95
  "react-id-generator": "^3.0.0",
92
- "react-popper": "^2.2.3"
96
+ "react-popper": "^2.2.3",
97
+ "react-scrollspy": "^3.4.3"
93
98
  }
94
99
  }
@@ -1,3 +1,47 @@
1
+ diff --git a/node_modules/@superdesk/primereact/components/dialog/Dialog.d.ts b/node_modules/@superdesk/primereact/components/dialog/Dialog.d.ts
2
+ index 80b0f8e..5343abf 100644
3
+ --- a/node_modules/@superdesk/primereact/components/dialog/Dialog.d.ts
4
+ +++ b/node_modules/@superdesk/primereact/components/dialog/Dialog.d.ts
5
+ @@ -18,7 +18,7 @@ interface DialogProps {
6
+ maskClassName?: string;
7
+ showHeader?: boolean;
8
+ appendTo?: HTMLElement;
9
+ - baseZIndex?: number;
10
+ + zIndex?: number;
11
+ maximizable?: boolean;
12
+ blockScroll?: boolean;
13
+ ariaCloseIconLabel?: string;
14
+ diff --git a/node_modules/@superdesk/primereact/components/dialog/Dialog.js b/node_modules/@superdesk/primereact/components/dialog/Dialog.js
15
+ index 2e243f2..c40162e 100644
16
+ --- a/node_modules/@superdesk/primereact/components/dialog/Dialog.js
17
+ +++ b/node_modules/@superdesk/primereact/components/dialog/Dialog.js
18
+ @@ -148,7 +148,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
19
+ }, {
20
+ key: "zIndex",
21
+ get: function get() {
22
+ - return this.props.baseZIndex + _DomHandler.default.generateZIndex();
23
+ + return this.props.zIndex;
24
+ }
25
+ }, {
26
+ key: "maximized",
27
+ @@ -501,7 +501,7 @@ _defineProperty(Dialog, "defaultProps", {
28
+ maskClassName: null,
29
+ showHeader: true,
30
+ appendTo: null,
31
+ - baseZIndex: 0,
32
+ + zIndex: 0,
33
+ maximizable: false,
34
+ blockScroll: false,
35
+ icons: null,
36
+ @@ -531,7 +531,7 @@ _defineProperty(Dialog, "propTypes", {
37
+ maskClassName: _propTypes.default.string,
38
+ showHeader: _propTypes.default.bool,
39
+ appendTo: _propTypes.default.object,
40
+ - baseZIndex: _propTypes.default.number,
41
+ + zIndex: _propTypes.default.number,
42
+ maximizable: _propTypes.default.bool,
43
+ blockScroll: _propTypes.default.bool,
44
+ icons: _propTypes.default.any,
1
45
  diff --git a/node_modules/@superdesk/primereact/components/tieredmenu/TieredMenu.d.ts b/node_modules/@superdesk/primereact/components/tieredmenu/TieredMenu.d.ts
2
46
  index a91da27..3dd7822 100644
3
47
  --- a/node_modules/@superdesk/primereact/components/tieredmenu/TieredMenu.d.ts
@@ -4,6 +4,9 @@ interface IProps {
4
4
  style?: 'filled' | 'hollow';
5
5
  size?: 'normal' | 'small';
6
6
  restoreIcon?: 'info' | 'help';
7
+ icon?: string;
8
+ banner?: boolean;
9
+ margin?: 'none' | 'small' | 'normal' | 'large';
7
10
  }
8
11
  interface IState {
9
12
  open: boolean;