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

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 (732) 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 +16 -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/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/scripts/toggleBoxNext.js +1 -1
  20. package/app/styles/_accessibility.scss +312 -4
  21. package/app/styles/_alerts.scss +57 -19
  22. package/app/styles/_avatar.scss +25 -1
  23. package/app/styles/_badge.scss +2 -2
  24. package/app/styles/_big-icon-font.scss +64 -24
  25. package/app/styles/_boxed-list.scss +67 -21
  26. package/app/styles/_buttons.scss +441 -333
  27. package/app/styles/_carousel.scss +17 -11
  28. package/app/styles/_content-divider.scss +63 -8
  29. package/app/styles/_design-tokens.scss +2 -0
  30. package/app/styles/_hamburger.scss +160 -0
  31. package/app/styles/_helpers.scss +221 -34
  32. package/app/styles/_icon-font.scss +352 -307
  33. package/app/styles/_icon-labels.scss +66 -10
  34. package/app/styles/_labels.scss +12 -7
  35. package/app/styles/_loaders.scss +13 -0
  36. package/app/styles/_master-desk.scss +10 -9
  37. package/app/styles/_mixins.scss +13 -3
  38. package/app/styles/_modals.scss +11 -31
  39. package/app/styles/_normalize.scss +5 -0
  40. package/app/styles/_panel-info.scss +19 -14
  41. package/app/styles/_sd-tag-input.scss +280 -219
  42. package/app/styles/_simple-list.scss +37 -17
  43. package/app/styles/_spinner.scss +46 -0
  44. package/app/styles/_table-list.scss +348 -0
  45. package/app/styles/_tabs.scss +6 -8
  46. package/app/styles/_tag-labels.scss +11 -2
  47. package/app/styles/_thumb-carousel.scss +11 -10
  48. package/app/styles/_toggle-box.scss +46 -12
  49. package/app/styles/_toggle-button.scss +42 -0
  50. package/app/styles/_tooltips.scss +3 -3
  51. package/app/styles/_variables.scss +0 -1
  52. package/app/styles/app.scss +16 -2
  53. package/app/styles/components/_card-item.scss +33 -21
  54. package/app/styles/components/_list-item.scss +63 -35
  55. package/app/styles/components/_sd-collapse-box.scss +6 -6
  56. package/app/styles/components/_sd-comment-box.scss +8 -4
  57. package/app/styles/components/_sd-dropzone.scss +114 -0
  58. package/app/styles/components/_sd-editor-popup.scss +4 -4
  59. package/app/styles/components/_sd-grid-item.scss +32 -18
  60. package/app/styles/components/_sd-media-carousel.scss +37 -2
  61. package/app/styles/components/_sd-notification-panel.scss +48 -0
  62. package/app/styles/components/_sd-pagination.scss +41 -0
  63. package/app/styles/components/_sd-photo-preview.scss +3 -3
  64. package/app/styles/components/_sd-searchbar.scss +12 -98
  65. package/app/styles/components/_subnav.scss +464 -435
  66. package/app/styles/components/_theme-selector.scss +189 -0
  67. package/app/styles/design-tokens/_design-tokens-general.scss +81 -0
  68. package/app/styles/{variables → design-tokens}/_new-colors.scss +68 -30
  69. package/app/styles/dropdowns/_basic-dropdown.scss +36 -3
  70. package/app/styles/editor/_editor-buttons.scss +54 -0
  71. package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
  72. package/app/styles/form-elements/_checkbox.scss +85 -58
  73. package/app/styles/form-elements/_forms-general.scss +171 -21
  74. package/app/styles/form-elements/_input-wrap.scss +138 -0
  75. package/app/styles/form-elements/_inputs.scss +602 -104
  76. package/app/styles/form-elements/_select-grid.scss +79 -0
  77. package/app/styles/grids/_basic-grid.scss +52 -26
  78. package/app/styles/grids/_grid-layout.scss +211 -80
  79. package/app/styles/grids/_layout-grid.scss +4 -4
  80. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  81. package/app/styles/interface-elements/_side-panel.scss +88 -59
  82. package/app/styles/layout/_basic-layout.scss +3 -6
  83. package/app/styles/layout/_container.scss +35 -0
  84. package/app/styles/layout/_editor.scss +404 -0
  85. package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
  86. package/app/styles/menus/_sd-left-navigation.scss +38 -3
  87. package/app/styles/menus/_sd-sidebar-menu.scss +110 -15
  88. package/app/styles/menus/_sd-top-menu.scss +19 -5
  89. package/app/styles/pr-superdesk-theme.scss +3 -0
  90. package/app/styles/primereact/_pr-datepicker.scss +74 -9
  91. package/app/styles/primereact/_pr-dialog.scss +48 -7
  92. package/app/styles/primereact/_pr-dropdown.scss +170 -7
  93. package/app/styles/primereact/_pr-general.scss +4 -0
  94. package/app/styles/primereact/_pr-menu.scss +6 -5
  95. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  96. package/app/styles/variables/_colors.scss +49 -499
  97. package/app/styles/variables/_dimensions.scss +85 -1
  98. package/app/styles/variables/_form-elements.scss +0 -2
  99. package/app/template/search-handler.html +2 -2
  100. package/app-typescript/components/Alert.tsx +16 -1
  101. package/app-typescript/components/Avatar.tsx +21 -0
  102. package/app-typescript/components/Badge.tsx +3 -2
  103. package/app-typescript/components/Button.tsx +7 -1
  104. package/app-typescript/components/ButtonGroup.tsx +5 -4
  105. package/app-typescript/components/Carousel.tsx +1 -1
  106. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  107. package/app-typescript/components/CheckGroup.tsx +2 -1
  108. package/app-typescript/components/Checkbox.tsx +7 -3
  109. package/app-typescript/components/CheckboxButton.tsx +9 -2
  110. package/app-typescript/components/ContentDivider.tsx +3 -0
  111. package/app-typescript/components/CreateButton.tsx +38 -0
  112. package/app-typescript/components/DatePicker.tsx +79 -41
  113. package/app-typescript/components/DonutChart.tsx +1 -1
  114. package/app-typescript/components/DropZone.tsx +89 -0
  115. package/app-typescript/components/Dropdown.tsx +133 -80
  116. package/app-typescript/components/DurationInput.tsx +400 -0
  117. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  118. package/app-typescript/components/EmptyState.tsx +2 -1
  119. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  120. package/app-typescript/components/Form/FormItem.tsx +20 -0
  121. package/app-typescript/components/Form/FormLabel.tsx +29 -0
  122. package/app-typescript/components/Form/FormRow.tsx +40 -0
  123. package/app-typescript/components/Form/FormRowNew.tsx +41 -0
  124. package/app-typescript/components/Form/FormText.tsx +15 -0
  125. package/app-typescript/components/Form/InputBase.tsx +95 -0
  126. package/app-typescript/components/Form/InputNew.tsx +107 -0
  127. package/app-typescript/components/Form/InputWrapper.tsx +79 -0
  128. package/app-typescript/components/Form/index.tsx +9 -0
  129. package/app-typescript/components/Icon.tsx +4 -2
  130. package/app-typescript/components/IconButton.tsx +30 -12
  131. package/app-typescript/components/IconLabel.tsx +8 -1
  132. package/app-typescript/components/IconPicker.tsx +277 -0
  133. package/app-typescript/components/Input.tsx +67 -35
  134. package/app-typescript/components/Label.tsx +65 -10
  135. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  136. package/app-typescript/components/Layouts/AuthoringContainer.tsx +28 -0
  137. package/app-typescript/components/Layouts/AuthoringFrame.tsx +73 -0
  138. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  139. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  140. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  141. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  142. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  143. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +34 -0
  144. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  145. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  146. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  147. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
  148. package/app-typescript/components/Layouts/AuthoringMain.tsx +52 -0
  149. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  150. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  151. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -0
  152. package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
  153. package/app-typescript/components/Layouts/Container.tsx +30 -0
  154. package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
  155. package/app-typescript/components/Layouts/CoreLayout.tsx +64 -0
  156. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
  157. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
  158. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +25 -0
  159. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
  160. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
  161. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
  162. package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
  163. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  164. package/app-typescript/components/Layouts/Layout.tsx +33 -0
  165. package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
  166. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  167. package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
  168. package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
  169. package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
  170. package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
  171. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  172. package/app-typescript/components/Layouts/Panel.tsx +208 -0
  173. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  174. package/app-typescript/components/Layouts/index.tsx +43 -0
  175. package/app-typescript/components/LeftMenu.tsx +116 -31
  176. package/app-typescript/components/ListItemLoader.tsx +30 -0
  177. package/app-typescript/components/Lists/BoxedList.tsx +169 -0
  178. package/app-typescript/components/Lists/ContentList.tsx +134 -0
  179. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  180. package/app-typescript/components/Lists/TableList.tsx +414 -0
  181. package/app-typescript/components/Lists/index.tsx +2 -0
  182. package/app-typescript/components/Menu.tsx +33 -9
  183. package/app-typescript/components/Modal.tsx +35 -18
  184. package/app-typescript/components/MultiSelect.tsx +99 -0
  185. package/app-typescript/components/NavButton.tsx +6 -1
  186. package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
  187. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  188. package/app-typescript/components/Navigation/SideBarMenu.tsx +94 -0
  189. package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
  190. package/app-typescript/components/Navigation/index.tsx +3 -0
  191. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  192. package/app-typescript/components/RadioGroup.tsx +69 -0
  193. package/app-typescript/components/SearchBar.tsx +106 -0
  194. package/app-typescript/components/Select.tsx +31 -31
  195. package/app-typescript/components/SelectGrid.tsx +233 -0
  196. package/app-typescript/components/SelectWithTemplate.tsx +32 -7
  197. package/app-typescript/components/SidebarMenu.tsx +68 -0
  198. package/app-typescript/components/Skeleton.tsx +48 -0
  199. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  200. package/app-typescript/components/Spacer.tsx +87 -0
  201. package/app-typescript/components/Spinner.tsx +32 -0
  202. package/app-typescript/components/SubNav.tsx +25 -4
  203. package/app-typescript/components/Switch.tsx +34 -12
  204. package/app-typescript/components/SwitchGroup.tsx +2 -1
  205. package/app-typescript/components/Tag.tsx +31 -7
  206. package/app-typescript/components/Text/Heading.tsx +67 -0
  207. package/app-typescript/components/Text/Text.tsx +36 -0
  208. package/app-typescript/components/Text/Time.tsx +34 -0
  209. package/app-typescript/components/ThemeSelector.tsx +113 -0
  210. package/app-typescript/components/TimePicker.tsx +38 -15
  211. package/app-typescript/components/Togglebox.tsx +9 -7
  212. package/app-typescript/components/Tooltip.tsx +7 -5
  213. package/app-typescript/components/TreeSelect.tsx +664 -0
  214. package/app-typescript/components/WithSizeObserver.tsx +88 -0
  215. package/app-typescript/dist/components/Alert.d.ts +16 -0
  216. package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
  217. package/app-typescript/dist/components/Avatar.d.ts +33 -0
  218. package/app-typescript/dist/components/Badge.d.ts +13 -0
  219. package/app-typescript/dist/components/Button.d.ts +23 -0
  220. package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
  221. package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
  222. package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
  223. package/app-typescript/dist/components/Checkbox.d.ts +19 -0
  224. package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
  225. package/app-typescript/dist/components/DatePicker.d.ts +37 -0
  226. package/app-typescript/dist/components/Divider.d.ts +9 -0
  227. package/app-typescript/dist/components/DonutChart.d.ts +12 -0
  228. package/app-typescript/dist/components/Dropdown.d.ts +28 -0
  229. package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
  230. package/app-typescript/dist/components/EmptyState.d.ts +11 -0
  231. package/app-typescript/dist/components/FormLabel.d.ts +9 -0
  232. package/app-typescript/dist/components/Genie.d.ts +13 -0
  233. package/app-typescript/dist/components/GridItem.d.ts +69 -0
  234. package/app-typescript/dist/components/GridList.d.ts +14 -0
  235. package/app-typescript/dist/components/HeadingText.d.ts +10 -0
  236. package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
  237. package/app-typescript/dist/components/Icon.d.ts +12 -0
  238. package/app-typescript/dist/components/IconButton.d.ts +12 -0
  239. package/app-typescript/dist/components/IconLabel.d.ts +11 -0
  240. package/app-typescript/dist/components/Input.d.ts +24 -0
  241. package/app-typescript/dist/components/Label.d.ts +15 -0
  242. package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
  243. package/app-typescript/dist/components/Loader.d.ts +8 -0
  244. package/app-typescript/dist/components/NavButton.d.ts +15 -0
  245. package/app-typescript/dist/components/Popover.d.ts +13 -0
  246. package/app-typescript/dist/components/PropsList.d.ts +15 -0
  247. package/{react → app-typescript/dist}/components/Radio.d.ts +7 -8
  248. package/{react → app-typescript/dist}/components/RadioButton.d.ts +0 -0
  249. package/app-typescript/dist/components/Select.d.ts +29 -0
  250. package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
  251. package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
  252. package/app-typescript/dist/components/StrechBar.d.ts +4 -0
  253. package/app-typescript/dist/components/SubNav.d.ts +10 -0
  254. package/app-typescript/dist/components/Switch.d.ts +12 -0
  255. package/app-typescript/dist/components/TabCustom.d.ts +25 -0
  256. package/app-typescript/dist/components/TabList.d.ts +22 -0
  257. package/app-typescript/dist/components/Tag.d.ts +9 -0
  258. package/app-typescript/dist/components/TagInput.d.ts +7 -0
  259. package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
  260. package/app-typescript/dist/components/TimePicker.d.ts +11 -0
  261. package/app-typescript/dist/components/Tooltip.d.ts +11 -0
  262. package/app-typescript/dist/components/_Positioner.d.ts +27 -0
  263. package/app-typescript/dist/index.d.ts +56 -0
  264. package/app-typescript/helpers.tsx +3 -0
  265. package/app-typescript/index.ts +30 -3
  266. package/dist/SD-logo.svg +52 -0
  267. package/dist/avatar-2.jpg +0 -0
  268. package/dist/avatar-3.jpg +0 -0
  269. package/dist/avatar-4.jpg +0 -0
  270. package/dist/avatar-5.jpg +0 -0
  271. package/dist/avatar-6.jpg +0 -0
  272. package/dist/components/basic-grid.html +1 -1
  273. package/dist/components/checkbox.html +1 -1
  274. package/dist/components/modals.html +1 -0
  275. package/dist/dots.svg +3 -0
  276. package/dist/examples.bundle.css +8955 -1617
  277. package/dist/examples.bundle.js +100795 -72607
  278. package/dist/playgrounds/accessible-theme-test.html +1 -1
  279. package/dist/playgrounds/boxed-list.html +1 -1
  280. package/dist/playgrounds/cards.html +9 -4
  281. package/dist/playgrounds/editor-3-test.html +15 -0
  282. package/dist/playgrounds/form-layout.html +9 -7
  283. package/dist/playgrounds/layout-test-2.html +1 -1
  284. package/dist/playgrounds/list-item-test.html +1 -1
  285. package/dist/playgrounds/master-desk.html +2 -4
  286. package/dist/playgrounds/media-carousel.html +1 -1
  287. package/dist/playgrounds/photo-desk.html +1 -1
  288. package/dist/playgrounds/planning.html +1 -1
  289. package/dist/playgrounds/publish.html +1 -1
  290. package/dist/playgrounds/publisher-content-analytics.html +1 -1
  291. package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
  292. package/dist/playgrounds/publisher-content-list-manual.html +1 -1
  293. package/dist/playgrounds/publisher-content-lists.html +1 -1
  294. package/dist/playgrounds/publisher-dashboard.html +1 -1
  295. package/dist/playgrounds/publisher-output-control.html +1 -1
  296. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +658 -0
  297. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  298. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  299. package/dist/playgrounds/react-playgrounds/Index.tsx +8 -1
  300. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  301. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  302. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  303. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +472 -0
  304. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
  305. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
  306. package/dist/playgrounds/react-playgrounds/TestGround.tsx +659 -24
  307. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  308. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  309. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  310. package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  311. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  312. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  313. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  314. package/dist/playgrounds/swimlane-view.html +1 -1
  315. package/dist/playgrounds/toasts.html +1 -1
  316. package/dist/playgrounds/video-editor.html +1 -1
  317. package/dist/react/Alerts.tsx +91 -18
  318. package/dist/react/Avatar.tsx +314 -127
  319. package/dist/react/Badges.tsx +18 -0
  320. package/dist/react/BoxedList.tsx +362 -0
  321. package/dist/react/ButtonGroups.tsx +66 -65
  322. package/dist/react/Buttons.tsx +65 -113
  323. package/dist/react/Carousel.tsx +2 -3
  324. package/dist/react/Checkboxs.tsx +66 -25
  325. package/dist/react/Container.tsx +143 -0
  326. package/dist/react/ContentDivider.tsx +22 -18
  327. package/dist/react/ContentList.tsx +462 -0
  328. package/dist/react/CreateButton.tsx +71 -0
  329. package/dist/react/DatePicker.tsx +81 -8
  330. package/dist/react/DropZone.tsx +111 -0
  331. package/dist/react/Dropdowns.tsx +580 -48
  332. package/dist/react/DurationInput.tsx +108 -0
  333. package/dist/react/Heading.tsx +106 -0
  334. package/dist/react/IconButtons.tsx +51 -21
  335. package/dist/react/IconFont.tsx +7 -6
  336. package/dist/react/IconLabels.tsx +24 -2
  337. package/dist/react/IconPicker.tsx +65 -0
  338. package/dist/react/Index.tsx +125 -19
  339. package/dist/react/Inputs.tsx +289 -6
  340. package/dist/react/Labels.tsx +51 -1
  341. package/dist/react/LeftNavigations.tsx +194 -15
  342. package/dist/react/ListItems.tsx +34 -0
  343. package/dist/react/Modal.tsx +161 -28
  344. package/dist/react/MultiSelect.tsx +201 -0
  345. package/dist/react/NavButtons.tsx +35 -5
  346. package/dist/react/Panel.tsx +366 -0
  347. package/dist/react/QuickNavigationBar.tsx +142 -0
  348. package/dist/react/RadioGroup.tsx +351 -0
  349. package/dist/react/SelectGrid.tsx +121 -0
  350. package/dist/react/SelectWithTemplate.tsx +6 -1
  351. package/dist/react/Selects.tsx +57 -0
  352. package/dist/react/SimpleList.tsx +148 -0
  353. package/dist/react/SubNav.tsx +65 -18
  354. package/dist/react/TableList.tsx +161 -0
  355. package/dist/react/Tags.tsx +57 -5
  356. package/dist/react/Text.tsx +134 -0
  357. package/dist/react/TimePicker.tsx +22 -12
  358. package/dist/react/Togglebox.tsx +1 -1
  359. package/dist/react/TreeSelect.tsx +422 -0
  360. package/dist/react/WithSizeObserver.tsx +44 -0
  361. package/dist/react/tree-select/TreeSelect.tsx +273 -0
  362. package/dist/react/tree-select/example-1.tsx +71 -0
  363. package/dist/react/tree-select/example-2.tsx +59 -0
  364. package/dist/react.html +4 -0
  365. package/dist/sd_big-icons.eot +0 -0
  366. package/dist/sd_big-icons.svg +55 -53
  367. package/dist/sd_big-icons.ttf +0 -0
  368. package/dist/sd_big-icons.woff +0 -0
  369. package/dist/sd_icons.eot +0 -0
  370. package/dist/sd_icons.svg +16 -7
  371. package/dist/sd_icons.ttf +0 -0
  372. package/dist/sd_icons.woff +0 -0
  373. package/dist/superdesk-ui.bundle.css +55848 -25170
  374. package/dist/superdesk-ui.bundle.js +89426 -66859
  375. package/dist/vendor.bundle.js +25682 -25660
  376. package/examples/css/docs-page.css +103 -33
  377. package/examples/img/avatar-2.jpg +0 -0
  378. package/examples/img/avatar-3.jpg +0 -0
  379. package/examples/img/avatar-4.jpg +0 -0
  380. package/examples/img/avatar-5.jpg +0 -0
  381. package/examples/img/avatar-6.jpg +0 -0
  382. package/examples/index.js +32 -0
  383. package/examples/pages/components/basic-grid.html +1 -1
  384. package/examples/pages/components/checkbox.html +1 -1
  385. package/examples/pages/components/modals.html +1 -0
  386. package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
  387. package/examples/pages/playgrounds/boxed-list.html +1 -1
  388. package/examples/pages/playgrounds/cards.html +9 -4
  389. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  390. package/examples/pages/playgrounds/form-layout.html +9 -7
  391. package/examples/pages/playgrounds/layout-test-2.html +1 -1
  392. package/examples/pages/playgrounds/list-item-test.html +1 -1
  393. package/examples/pages/playgrounds/master-desk.html +2 -4
  394. package/examples/pages/playgrounds/media-carousel.html +1 -1
  395. package/examples/pages/playgrounds/photo-desk.html +1 -1
  396. package/examples/pages/playgrounds/planning.html +1 -1
  397. package/examples/pages/playgrounds/publish.html +1 -1
  398. package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
  399. package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
  400. package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
  401. package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
  402. package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
  403. package/examples/pages/playgrounds/publisher-output-control.html +1 -1
  404. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +658 -0
  405. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  406. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  407. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +8 -1
  408. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  409. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  410. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  411. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +472 -0
  412. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
  413. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
  414. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +659 -24
  415. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  416. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  417. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  418. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  419. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  420. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  421. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  422. package/examples/pages/playgrounds/swimlane-view.html +1 -1
  423. package/examples/pages/playgrounds/toasts.html +1 -1
  424. package/examples/pages/playgrounds/video-editor.html +1 -1
  425. package/examples/pages/react/Alerts.tsx +91 -18
  426. package/examples/pages/react/Avatar.tsx +314 -127
  427. package/examples/pages/react/Badges.tsx +18 -0
  428. package/examples/pages/react/BoxedList.tsx +362 -0
  429. package/examples/pages/react/ButtonGroups.tsx +66 -65
  430. package/examples/pages/react/Buttons.tsx +65 -113
  431. package/examples/pages/react/Carousel.tsx +2 -3
  432. package/examples/pages/react/Checkboxs.tsx +66 -25
  433. package/examples/pages/react/Container.tsx +143 -0
  434. package/examples/pages/react/ContentDivider.tsx +22 -18
  435. package/examples/pages/react/ContentList.tsx +462 -0
  436. package/examples/pages/react/CreateButton.tsx +71 -0
  437. package/examples/pages/react/DatePicker.tsx +81 -8
  438. package/examples/pages/react/DropZone.tsx +111 -0
  439. package/examples/pages/react/Dropdowns.tsx +580 -48
  440. package/examples/pages/react/DurationInput.tsx +108 -0
  441. package/examples/pages/react/Heading.tsx +106 -0
  442. package/examples/pages/react/IconButtons.tsx +51 -21
  443. package/examples/pages/react/IconFont.tsx +7 -6
  444. package/examples/pages/react/IconLabels.tsx +24 -2
  445. package/examples/pages/react/IconPicker.tsx +65 -0
  446. package/examples/pages/react/Index.tsx +125 -19
  447. package/examples/pages/react/Inputs.tsx +289 -6
  448. package/examples/pages/react/Labels.tsx +51 -1
  449. package/examples/pages/react/LeftNavigations.tsx +194 -15
  450. package/examples/pages/react/ListItems.tsx +34 -0
  451. package/examples/pages/react/Modal.tsx +161 -28
  452. package/examples/pages/react/MultiSelect.tsx +201 -0
  453. package/examples/pages/react/NavButtons.tsx +35 -5
  454. package/examples/pages/react/Panel.tsx +366 -0
  455. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  456. package/examples/pages/react/RadioGroup.tsx +351 -0
  457. package/examples/pages/react/SelectGrid.tsx +121 -0
  458. package/examples/pages/react/SelectWithTemplate.tsx +6 -1
  459. package/examples/pages/react/Selects.tsx +57 -0
  460. package/examples/pages/react/SimpleList.tsx +148 -0
  461. package/examples/pages/react/SubNav.tsx +65 -18
  462. package/examples/pages/react/TableList.tsx +161 -0
  463. package/examples/pages/react/Tags.tsx +57 -5
  464. package/examples/pages/react/Text.tsx +134 -0
  465. package/examples/pages/react/TimePicker.tsx +22 -12
  466. package/examples/pages/react/Togglebox.tsx +1 -1
  467. package/examples/pages/react/TreeSelect.tsx +422 -0
  468. package/examples/pages/react/WithSizeObserver.tsx +44 -0
  469. package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
  470. package/examples/pages/react/tree-select/example-1.tsx +71 -0
  471. package/examples/pages/react/tree-select/example-2.tsx +59 -0
  472. package/examples/pages/react.html +4 -0
  473. package/package.json +16 -11
  474. package/react/components/Alert.d.ts +3 -0
  475. package/react/components/Alert.js +17 -7
  476. package/react/components/Autocomplete.js +16 -12
  477. package/react/components/Avatar.d.ts +9 -0
  478. package/react/components/Avatar.js +24 -4
  479. package/react/components/Badge.d.ts +1 -0
  480. package/react/components/Badge.js +9 -7
  481. package/react/components/Button.d.ts +2 -0
  482. package/react/components/Button.js +12 -8
  483. package/react/components/ButtonGroup.d.ts +3 -2
  484. package/react/components/ButtonGroup.js +9 -7
  485. package/react/components/Carousel.js +5 -3
  486. package/react/components/CheckButtonGroup.d.ts +3 -1
  487. package/react/components/CheckButtonGroup.js +14 -6
  488. package/react/components/CheckGroup.d.ts +1 -0
  489. package/react/components/CheckGroup.js +6 -4
  490. package/react/components/Checkbox.d.ts +2 -1
  491. package/react/components/Checkbox.js +7 -5
  492. package/react/components/CheckboxButton.d.ts +1 -0
  493. package/react/components/CheckboxButton.js +8 -6
  494. package/react/components/ContentDivider.d.ts +1 -0
  495. package/react/components/ContentDivider.js +10 -6
  496. package/react/components/CreateButton.d.ts +17 -0
  497. package/react/components/CreateButton.js +68 -0
  498. package/react/components/DatePicker.d.ts +13 -2
  499. package/react/components/DatePicker.js +45 -31
  500. package/react/components/Divider.js +6 -4
  501. package/react/components/DonutChart.d.ts +1 -1
  502. package/react/components/DonutChart.js +24 -6
  503. package/react/components/DropZone.d.ts +25 -0
  504. package/react/components/DropZone.js +95 -0
  505. package/react/components/Dropdown.d.ts +7 -5
  506. package/react/components/Dropdown.js +64 -36
  507. package/react/components/DropdownFirst.js +18 -11
  508. package/react/components/DurationInput.d.ts +42 -0
  509. package/react/components/DurationInput.js +364 -0
  510. package/react/components/EmptyState.d.ts +1 -0
  511. package/react/components/EmptyState.js +8 -6
  512. package/react/components/Form/FormGroup.d.ts +13 -0
  513. package/react/components/Form/FormGroup.js +63 -0
  514. package/react/components/Form/FormItem.d.ts +9 -0
  515. package/react/components/Form/FormItem.js +56 -0
  516. package/react/components/Form/FormLabel.d.ts +13 -0
  517. package/react/components/Form/FormLabel.js +62 -0
  518. package/react/components/Form/FormRow.d.ts +17 -0
  519. package/react/components/Form/FormRow.js +64 -0
  520. package/react/components/Form/FormRowNew.d.ts +12 -0
  521. package/react/components/Form/FormRowNew.js +67 -0
  522. package/react/components/Form/FormText.d.ts +8 -0
  523. package/react/components/Form/FormText.js +49 -0
  524. package/react/components/Form/InputBase.d.ts +41 -0
  525. package/react/components/Form/InputBase.js +86 -0
  526. package/react/components/Form/InputNew.d.ts +45 -0
  527. package/react/components/Form/InputNew.js +75 -0
  528. package/react/components/Form/InputWrapper.d.ts +28 -0
  529. package/react/components/Form/InputWrapper.js +91 -0
  530. package/react/components/Form/index.d.ts +9 -0
  531. package/react/components/Form/index.js +21 -0
  532. package/react/components/FormLabel.js +5 -3
  533. package/react/components/GridItem.js +9 -7
  534. package/react/components/GridList.js +8 -6
  535. package/react/components/HeadingText.js +4 -2
  536. package/react/components/HelloWorld.js +4 -2
  537. package/react/components/Icon.d.ts +2 -1
  538. package/react/components/Icon.js +9 -6
  539. package/react/components/IconButton.d.ts +9 -2
  540. package/react/components/IconButton.js +17 -7
  541. package/react/components/IconLabel.d.ts +2 -0
  542. package/react/components/IconLabel.js +12 -7
  543. package/react/components/IconPicker.d.ts +24 -0
  544. package/react/components/IconPicker.js +287 -0
  545. package/react/components/Input.d.ts +25 -3
  546. package/react/components/Input.js +22 -26
  547. package/react/components/Label.d.ts +2 -0
  548. package/react/components/Label.js +44 -11
  549. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  550. package/react/components/Layouts/AuthorinInnerSideBar.js +49 -0
  551. package/react/components/Layouts/AuthoringContainer.d.ts +12 -0
  552. package/react/components/Layouts/AuthoringContainer.js +60 -0
  553. package/react/components/Layouts/AuthoringFrame.d.ts +19 -0
  554. package/react/components/Layouts/AuthoringFrame.js +58 -0
  555. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  556. package/react/components/Layouts/AuthoringFrameContainer.js +49 -0
  557. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  558. package/react/components/Layouts/AuthoringFrameLeftBar.js +49 -0
  559. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  560. package/react/components/Layouts/AuthoringFrameMain.js +49 -0
  561. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  562. package/react/components/Layouts/AuthoringFrameNavBar.js +49 -0
  563. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  564. package/react/components/Layouts/AuthoringFrameOverlay.js +49 -0
  565. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +15 -0
  566. package/react/components/Layouts/AuthoringFrameRightBar.js +60 -0
  567. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  568. package/react/components/Layouts/AuthoringFrameSidePanel.js +58 -0
  569. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  570. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +58 -0
  571. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  572. package/react/components/Layouts/AuthoringInnerBody.js +49 -0
  573. package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
  574. package/react/components/Layouts/AuthoringInnerHeader.js +68 -0
  575. package/react/components/Layouts/AuthoringMain.d.ts +14 -0
  576. package/react/components/Layouts/AuthoringMain.js +55 -0
  577. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  578. package/react/components/Layouts/AuthoringMainContainer.js +49 -0
  579. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  580. package/react/components/Layouts/AuthoringMainContent.js +49 -0
  581. package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
  582. package/react/components/Layouts/AuthoringMainToolBar.js +56 -0
  583. package/react/components/Layouts/BottomBarAction.d.ts +12 -0
  584. package/react/components/Layouts/BottomBarAction.js +59 -0
  585. package/react/components/Layouts/Container.d.ts +14 -0
  586. package/react/components/Layouts/Container.js +62 -0
  587. package/react/components/Layouts/ContentSplitter.d.ts +10 -0
  588. package/react/components/Layouts/ContentSplitter.js +58 -0
  589. package/react/components/Layouts/CoreLayout.d.ts +21 -0
  590. package/react/components/Layouts/CoreLayout.js +55 -0
  591. package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
  592. package/react/components/Layouts/CoreLayoutContainer.js +49 -0
  593. package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
  594. package/react/components/Layouts/CoreLayoutFooter.js +49 -0
  595. package/react/components/Layouts/CoreLayoutMain.d.ts +11 -0
  596. package/react/components/Layouts/CoreLayoutMain.js +56 -0
  597. package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
  598. package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
  599. package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
  600. package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
  601. package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
  602. package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
  603. package/react/components/Layouts/HamburgerButton.d.ts +14 -0
  604. package/react/components/Layouts/HamburgerButton.js +63 -0
  605. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  606. package/react/components/Layouts/HeaderPanel.js +49 -0
  607. package/react/components/Layouts/Layout.d.ts +8 -0
  608. package/react/components/Layouts/Layout.js +36 -0
  609. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  610. package/react/components/Layouts/LayoutContainer.js +49 -0
  611. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  612. package/react/components/Layouts/LeftPanel.js +56 -0
  613. package/react/components/Layouts/MainMenu.d.ts +41 -0
  614. package/react/components/Layouts/MainMenu.js +103 -0
  615. package/react/components/Layouts/MainPanel.d.ts +11 -0
  616. package/react/components/Layouts/MainPanel.js +59 -0
  617. package/react/components/Layouts/NotificationPanel.d.ts +45 -0
  618. package/react/components/Layouts/NotificationPanel.js +110 -0
  619. package/react/components/Layouts/OverlayPanel.d.ts +8 -0
  620. package/react/components/Layouts/OverlayPanel.js +51 -0
  621. package/react/components/Layouts/PageLayout.d.ts +16 -0
  622. package/react/components/Layouts/PageLayout.js +66 -0
  623. package/react/components/Layouts/Panel.d.ts +66 -0
  624. package/react/components/Layouts/Panel.js +168 -0
  625. package/react/components/Layouts/RightPanel.d.ts +9 -0
  626. package/react/components/Layouts/RightPanel.js +49 -0
  627. package/react/components/Layouts/index.d.ts +39 -0
  628. package/react/components/Layouts/index.js +86 -0
  629. package/react/components/LeftMenu.d.ts +13 -4
  630. package/react/components/LeftMenu.js +71 -18
  631. package/react/components/ListItemLoader.d.ts +4 -0
  632. package/react/components/ListItemLoader.js +64 -0
  633. package/react/components/Lists/BoxedList.d.ts +44 -0
  634. package/react/components/Lists/BoxedList.js +160 -0
  635. package/react/components/Lists/ContentList.d.ts +51 -0
  636. package/react/components/Lists/ContentList.js +111 -0
  637. package/react/components/Lists/SimpleList.d.ts +21 -0
  638. package/react/components/Lists/SimpleList.js +80 -0
  639. package/react/components/Lists/TableList.d.ts +64 -0
  640. package/react/components/Lists/TableList.js +248 -0
  641. package/react/components/Lists/index.d.ts +2 -0
  642. package/react/components/Lists/index.js +10 -0
  643. package/react/components/Loader.js +4 -2
  644. package/react/components/Menu.d.ts +2 -1
  645. package/react/components/Menu.js +48 -12
  646. package/react/components/Modal.d.ts +6 -1
  647. package/react/components/Modal.js +35 -6
  648. package/react/components/MultiSelect.d.ts +40 -0
  649. package/react/components/MultiSelect.js +70 -0
  650. package/react/components/NavButton.d.ts +2 -1
  651. package/react/components/NavButton.js +9 -4
  652. package/react/components/Navigation/BottomNav.d.ts +24 -0
  653. package/react/components/Navigation/BottomNav.js +88 -0
  654. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  655. package/react/components/Navigation/QuickNavBar.js +117 -0
  656. package/react/components/Navigation/SideBarMenu.d.ts +27 -0
  657. package/react/components/Navigation/SideBarMenu.js +96 -0
  658. package/react/components/Navigation/SideBarTabs.d.ts +23 -0
  659. package/react/components/Navigation/SideBarTabs.js +88 -0
  660. package/react/components/Navigation/index.d.ts +3 -0
  661. package/react/components/Navigation/index.js +9 -0
  662. package/react/components/Popover.js +4 -2
  663. package/react/components/PropsList.js +4 -2
  664. package/react/components/RadioButtonGroup.d.ts +29 -0
  665. package/react/components/RadioButtonGroup.js +91 -0
  666. package/react/components/RadioGroup.d.ts +24 -0
  667. package/react/components/{Radio.js → RadioGroup.js} +20 -14
  668. package/react/components/SearchBar.d.ts +24 -0
  669. package/react/components/SearchBar.js +113 -0
  670. package/react/components/Select.d.ts +9 -2
  671. package/react/components/Select.js +9 -20
  672. package/react/components/SelectGrid.d.ts +45 -0
  673. package/react/components/SelectGrid.js +200 -0
  674. package/react/components/SelectWithTemplate.d.ts +11 -1
  675. package/react/components/SelectWithTemplate.js +23 -12
  676. package/react/components/Skeleton.d.ts +30 -0
  677. package/react/components/Skeleton.js +76 -0
  678. package/react/components/SlidingToolbar.d.ts +1 -1
  679. package/react/components/SlidingToolbar.js +15 -3
  680. package/react/components/Spinner.d.ts +11 -0
  681. package/react/components/Spinner.js +71 -0
  682. package/react/components/StrechBar.js +4 -2
  683. package/react/components/SubNav.d.ts +8 -1
  684. package/react/components/SubNav.js +28 -8
  685. package/react/components/Switch.d.ts +4 -1
  686. package/react/components/Switch.js +25 -11
  687. package/react/components/SwitchGroup.d.ts +1 -0
  688. package/react/components/SwitchGroup.js +6 -4
  689. package/react/components/TabCustom.d.ts +0 -1
  690. package/react/components/TabCustom.js +11 -7
  691. package/react/components/TabList.js +6 -4
  692. package/react/components/Tag.d.ts +3 -2
  693. package/react/components/Tag.js +21 -9
  694. package/react/components/TagInput.d.ts +0 -1
  695. package/react/components/TagInput.js +7 -6
  696. package/react/components/TagInputTest.js +13 -9
  697. package/react/components/Text/Heading.d.ts +15 -0
  698. package/react/components/Text/Heading.js +79 -0
  699. package/react/components/Text/Text.d.ts +15 -0
  700. package/react/components/Text/Text.js +67 -0
  701. package/react/components/Text/Time.d.ts +15 -0
  702. package/react/components/Text/Time.js +65 -0
  703. package/react/components/ThemeSelector.d.ts +21 -0
  704. package/react/components/ThemeSelector.js +114 -0
  705. package/react/components/TimePicker.d.ts +11 -1
  706. package/react/components/TimePicker.js +14 -5
  707. package/react/components/Toast.js +1 -1
  708. package/react/components/ToastMessage.js +6 -5
  709. package/react/components/ToastText.js +1 -1
  710. package/react/components/ToastWrapper.d.ts +2 -2
  711. package/react/components/ToastWrapper.js +14 -10
  712. package/react/components/Togglebox.d.ts +2 -1
  713. package/react/components/Togglebox.js +42 -14
  714. package/react/components/Tooltip.d.ts +1 -0
  715. package/react/components/Tooltip.js +14 -10
  716. package/react/components/TreeSelect.d.ts +82 -0
  717. package/react/components/TreeSelect.js +521 -0
  718. package/react/components/WithSizeObserver.d.ts +25 -0
  719. package/react/components/WithSizeObserver.js +95 -0
  720. package/react/components/_Positioner.js +4 -2
  721. package/react/helpers.d.ts +1 -0
  722. package/react/helpers.js +7 -0
  723. package/react/index.d.ts +28 -3
  724. package/react/index.js +66 -4
  725. package/yarn-error.log +111 -0
  726. package/app/styles/variables/_design-tokens-general.scss +0 -136
  727. package/app-typescript/components/Radio.tsx +0 -57
  728. package/app-typescript/components/RadioButton.tsx +0 -57
  729. package/dist/react/Radios.tsx +0 -391
  730. package/examples/pages/react/Radios.tsx +0 -391
  731. package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
  732. package/react/components/RadioButton.js +0 -65
@@ -9,6 +9,11 @@ interface IState {
9
9
  modalLarge: boolean;
10
10
  modalXLarge: boolean;
11
11
  modalFull: boolean;
12
+ maximizableModal: boolean;
13
+ top: boolean;
14
+ bottom: boolean;
15
+ left: boolean;
16
+ right: boolean;
12
17
  }
13
18
 
14
19
  export default class ModalDoc extends React.Component<{}, IState> {
@@ -21,25 +26,30 @@ export default class ModalDoc extends React.Component<{}, IState> {
21
26
  modalMedium: false,
22
27
  modalLarge: false,
23
28
  modalXLarge: false,
24
- modalFull: false
29
+ modalFull: false,
30
+ maximizableModal: false,
31
+ top: false,
32
+ bottom: false,
33
+ left: false,
34
+ right: false,
25
35
  }
26
36
  }
27
37
 
28
38
  render() {
29
39
  const modalFullFooter=(
30
- <ButtonGroup align="right">
40
+ <ButtonGroup align="end">
31
41
  <Button text='Cancel' onClick={() => {this.setState({modalFull:false})}}/>
32
42
  <Button type='primary' text='Save' onClick={() => {}}/>
33
43
  </ButtonGroup>
34
44
  );
35
45
  const modalLargeFooter=(
36
- <ButtonGroup align="right">
46
+ <ButtonGroup align="end">
37
47
  <Button text='Cancel' onClick={() => {this.setState({modalLarge:false})}}/>
38
48
  <Button type='primary' text='Save' onClick={() => {}}/>
39
49
  </ButtonGroup>
40
50
  );
41
51
  const modalXLargeFooter=(
42
- <ButtonGroup align="right">
52
+ <ButtonGroup align="end">
43
53
  <Button text='Cancel' onClick={() => {this.setState({modalXLarge:false})}}/>
44
54
  <Button type='primary' text='Save' onClick={() => {}}/>
45
55
  </ButtonGroup>
@@ -60,7 +70,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
60
70
  </p>
61
71
  <Markup.ReactMarkup>
62
72
  <Markup.ReactMarkupPreview>
63
- <ButtonGroup align="right">
73
+ <ButtonGroup align="end">
64
74
  <Button text="Basic (no size)" onClick={() => this.setState({modalBasic: true})} />
65
75
  <Button text="Small" onClick={() => this.setState({modalSmall: true})} />
66
76
  <Button text="Medium" onClick={() => this.setState({modalMedium: true})} />
@@ -69,21 +79,23 @@ export default class ModalDoc extends React.Component<{}, IState> {
69
79
  </ButtonGroup>
70
80
 
71
81
  <Modal headerTemplate="Basic modal"
72
- visible={this.state.modalBasic}
73
- onHide={() => {this.setState({modalBasic: false})}}>
82
+ zIndex={10000}
83
+ maximizable
84
+ visible={this.state.modalBasic}
85
+ onHide={() => {this.setState({modalBasic: false})}}>
74
86
  <p>This modal has no fixed size. It will adapt its size based on the content inside.</p>
75
87
  </Modal>
76
88
 
77
89
  <Modal headerTemplate="Small modal header"
78
- visible={this.state.modalSmall}
79
- size='small' onHide={() => {this.setState({modalSmall: false})}}>
90
+ visible={this.state.modalSmall}
91
+ size='small' onHide={() => {this.setState({modalSmall: false})}}>
80
92
  <p>Small modal content. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
81
93
  ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
82
94
  </Modal>
83
95
 
84
96
  <Modal headerTemplate="Medium modal header"
85
- visible={this.state.modalMedium}
86
- size='medium' onHide={() => {this.setState({modalMedium: false})}}>
97
+ visible={this.state.modalMedium}
98
+ size='medium' onHide={() => {this.setState({modalMedium: false})}}>
87
99
  <p>Medium modal content. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum.
88
100
  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non
89
101
  commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis
@@ -91,9 +103,9 @@ export default class ModalDoc extends React.Component<{}, IState> {
91
103
  </Modal>
92
104
 
93
105
  <Modal headerTemplate="Large modal header"
94
- visible={this.state.modalLarge}
95
- footerTemplate={modalLargeFooter}
96
- size='large' onHide={() => {this.setState({modalLarge: false})}}>
106
+ visible={this.state.modalLarge}
107
+ footerTemplate={modalLargeFooter}
108
+ size='large' onHide={() => {this.setState({modalLarge: false})}}>
97
109
  <p>Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
98
110
  Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
99
111
  purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit
@@ -104,9 +116,9 @@ export default class ModalDoc extends React.Component<{}, IState> {
104
116
  </Modal>
105
117
 
106
118
  <Modal headerTemplate="Extra large modal"
107
- visible={this.state.modalXLarge}
108
- footerTemplate={modalXLargeFooter}
109
- size='x-large' onHide={() => {this.setState({modalXLarge: false})}}>
119
+ visible={this.state.modalXLarge}
120
+ footerTemplate={modalXLargeFooter}
121
+ size='x-large' onHide={() => {this.setState({modalXLarge: false})}}>
110
122
  <p className="sd-margin-b--3">Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh
111
123
  ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
112
124
  Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis.</p>
@@ -144,7 +156,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
144
156
  // Large
145
157
  <Button text="Large with footer" onClick={() => this.setState({modalLarge: true})} />
146
158
  const modalLargeFooter=(
147
- <ButtonGroup align="right">
159
+ <ButtonGroup align="end">
148
160
  <Button text='Cancel' onClick={() => {this.setState({modalLarge:false})}}/>
149
161
  <Button type='primary' text='Save' onClick={() => {}}/>
150
162
  </ButtonGroup>
@@ -159,7 +171,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
159
171
  // Extra large
160
172
  <Button text="Extra Large with footer" onClick={() => this.setState({modalXLarge: true})} />
161
173
  const modalXLargeFooter=(
162
- <ButtonGroup align="right">
174
+ <ButtonGroup align="end">
163
175
  <Button text='Cancel' onClick={() => {this.setState({modalXLarge:false})}}/>
164
176
  <Button type='primary' text='Save' onClick={() => {}}/>
165
177
  </ButtonGroup>
@@ -183,11 +195,12 @@ export default class ModalDoc extends React.Component<{}, IState> {
183
195
  <Markup.ReactMarkupPreview>
184
196
  <Button text="Open Modal" onClick={() => this.setState({modalFull: true})} />
185
197
  <Modal headerTemplate="Another modal header"
186
- footerTemplate={modalFullFooter}
187
- visible={this.state.modalFull}
188
- theme='dark'
189
- maximized={true}
190
- onHide={() => {this.setState({modalFull: false})}}>
198
+ footerTemplate={modalFullFooter}
199
+ visible={this.state.modalFull}
200
+ theme='dark'
201
+ maximized={true}
202
+ className='testClass'
203
+ onHide={() => {this.setState({modalFull: false})}}>
191
204
  <p className="sd-margin-b--3">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes,
192
205
  nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
193
206
  Vestibulum id ligula porta felis euismod semper.</p>
@@ -203,7 +216,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
203
216
  <Markup.ReactMarkupCode>{`
204
217
  <Button text="Open Modal" onClick={() => this.setState({modalFull: true})} />
205
218
  const modalFullFooter=(
206
- <ButtonGroup align="right">
219
+ <ButtonGroup align="end">
207
220
  <Button text='Cancel' onClick={() => {this.setState({modalFull:false})}}/>
208
221
  <Button type='primary' text='Save' onClick={() => {}}/>
209
222
  </ButtonGroup>
@@ -221,18 +234,138 @@ export default class ModalDoc extends React.Component<{}, IState> {
221
234
  `}
222
235
  </Markup.ReactMarkupCode>
223
236
  </Markup.ReactMarkup>
237
+
238
+ <h3 className="docs-page__h3">Maximizable modal</h3>
239
+ <Markup.ReactMarkup>
240
+ <Markup.ReactMarkupPreview>
241
+ <Button text="Maximizable modal" onClick={() => this.setState({maximizableModal: true})} />
242
+ <Modal headerTemplate="Maximizable modal"
243
+ zIndex={1000}
244
+ maximizable
245
+ visible={this.state.maximizableModal}
246
+ size="small"
247
+ onHide={() => {this.setState({maximizableModal: false})}}>
248
+ <p className="sd-margin-b--3">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes,
249
+ nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
250
+ Vestibulum id ligula porta felis euismod semper.</p>
251
+
252
+ <p className="sd-margin-b--3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
253
+ eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.</p>
254
+
255
+ <p>Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh
256
+ ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
257
+ Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis.</p>
258
+ </Modal>
259
+ </Markup.ReactMarkupPreview>
260
+ <Markup.ReactMarkupCode>{`
261
+ <Button text="Maximizable modal" onClick={() => this.setState({maximizableModal: true})} />
262
+ <Modal
263
+ headerTemplate="Maximizable modal"
264
+ zIndex={1000}
265
+ maximizable
266
+ visible={this.state.maximizableModal}
267
+ size="small"
268
+ onHide={() => {this.setState({maximizableModal: false})}}>
269
+ {children}
270
+ </Modal>
271
+ `}
272
+ </Markup.ReactMarkupCode>
273
+ </Markup.ReactMarkup>
274
+
275
+ <h3 className="docs-page__h3">Optional positioning of modal</h3>
276
+ <Markup.ReactMarkup>
277
+ <Markup.ReactMarkupPreview>
278
+ <ButtonGroup align="end">
279
+ <Button text="top" onClick={() => this.setState({top: true})} />
280
+ <Button text="bottom" onClick={() => this.setState({bottom: true})} />
281
+ <Button text="left" onClick={() => this.setState({left: true})} />
282
+ <Button text="right" onClick={() => this.setState({right: true})} />
283
+ </ButtonGroup>
284
+
285
+ <Modal headerTemplate="Modal with position top"
286
+ position="top"
287
+ zIndex={10000}
288
+ visible={this.state.top}
289
+ onHide={() => {this.setState({top: false})}}>
290
+ <p>This modal has position top.</p>
291
+ </Modal>
292
+
293
+ <Modal headerTemplate="Modal with position bottom"
294
+ position="bottom"
295
+ zIndex={10000}
296
+ visible={this.state.bottom}
297
+ onHide={() => {this.setState({bottom: false})}}>
298
+ <p>This modal has position bottom.</p>
299
+ </Modal>
300
+
301
+ <Modal headerTemplate="Modal with position left"
302
+ position="left"
303
+ zIndex={10000}
304
+ visible={this.state.left}
305
+ onHide={() => {this.setState({left: false})}}>
306
+ <p>This modal has position left.</p>
307
+ </Modal>
308
+
309
+ <Modal headerTemplate="Modal with position right"
310
+ position="right"
311
+ zIndex={10000}
312
+ visible={this.state.right}
313
+ onHide={() => {this.setState({right: false})}}>
314
+ <p>This modal has position right.</p>
315
+ </Modal>
316
+ </Markup.ReactMarkupPreview>
317
+ <Markup.ReactMarkupCode>{`
318
+ <Modal headerTemplate="Modal with position top"
319
+ position="top"
320
+ zIndex={10000}
321
+ visible={this.state.top}
322
+ onHide={() => {this.setState({top: false})}}>
323
+ <p>This modal has position top.</p>
324
+ </Modal>
325
+
326
+ <Modal headerTemplate="Modal with position bottom"
327
+ position="bottom"
328
+ zIndex={10000}
329
+ visible={this.state.bottom}
330
+ onHide={() => {this.setState({bottom: false})}}>
331
+ <p>This modal has position bottom.</p>
332
+ </Modal>
333
+
334
+ <Modal headerTemplate="Modal with position left"
335
+ position="left"
336
+ zIndex={10000}
337
+ visible={this.state.left}
338
+ onHide={() => {this.setState({left: false})}}>
339
+ <p>This modal has position left.</p>
340
+ </Modal>
341
+
342
+ <Modal headerTemplate="Modal with position right"
343
+ position="right"
344
+ zIndex={10000}
345
+ visible={this.state.right}
346
+ onHide={() => {this.setState({right: false})}}>
347
+ <p>This modal has position right.</p>
348
+ </Modal>
349
+ `}
350
+ </Markup.ReactMarkupCode>
351
+ </Markup.ReactMarkup>
224
352
 
225
353
  <h3 className="docs-page__h3">Props</h3>
226
354
  <PropsList>
227
355
  <Prop name='id' isRequired={false} type='string' default='null' description='Unique identifier of the element' />
228
- <Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
356
+ <Prop name='className' isRequired={false} type='string' default='null' description='To add class to the content of component' />
229
357
  <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Item style' />
230
358
  <Prop name='size' isRequired={false} type='small | medium | large | x-large' default='/' description='Size of the modal. If not defined it will adapt to the width of the content.' />
359
+ <Prop name='position' isRequired={false} type="center | top | bottom | left | right | top-left | top-right | bottom-left | bottom-right" default='center' description='Position of the dialog.' />
231
360
  <Prop name='visible' isRequired={true} type='boolean' default='false' description='Specifies the visibility of the dialog' />
361
+ <Prop name='zIndex' isRequired={true} type='number' default='false' description='zIndex of modal' />
362
+ <Prop name='contentPadding' isRequired={true} type="'none' | 'small' | 'medium' | 'large'" default='false' description='Padding of content' />
363
+ <Prop name='contentBg' isRequired={true} type="'default' | 'medium' | 'dark'" default='false' description='Background of content' />
232
364
  <Prop name='headerTemplate' isRequired={false} type='element' default='null' description='Label of header' />
233
- <Prop name='footerTemplate' isRequired={false} type='element' default='null' description='Name of the footer template constant, created separately.' />
365
+ <Prop name='footerTemplate' isRequired={false} type='element' default='null' description='Name of the footer template constant, created separately' />
234
366
  <Prop name='closeOnEscape' isRequired={false} type='boolean' default='null' description='An array of objects to display' />
235
- <Prop name='maximized' isRequired={false} type='boolean' default='null' description='Creates a full-screen mofal id set to true.' />
367
+ <Prop name='maximized' isRequired={false} type='boolean' default='null' description='Creates a full-screen modal id set to true.' />
368
+ <Prop name='maximizable' isRequired={false} type='boolean' default='null' description='By clicking on button set full-screen modal and return on defoult size.' />
236
369
  <Prop name='onShow' isRequired={false} type='function' default='null' description='Callback to invoke after modal is opened' />
237
370
  <Prop name='onHide' isRequired={true} type='function' default='null' description='Callback to invoke after modal is closed' />
238
371
  </PropsList>
@@ -0,0 +1,201 @@
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';
5
+
6
+ interface IColor {
7
+ name: string;
8
+ colorCode?: string;
9
+ }
10
+
11
+ interface IState {
12
+ value: any;
13
+ value2: any;
14
+ }
15
+
16
+ const ItemArr: Array<IColor> = [
17
+ {name: 'Red', colorCode: '#FF0000'},
18
+ {name: 'Cyan', colorCode: '#00FFFF'},
19
+ {name: 'Blue', colorCode: '#0000FF'},
20
+ {name: 'DarkBlue', colorCode: '#0000A0'},
21
+ {name: 'Purple', colorCode: '#800080'},
22
+ {name: 'Yellow', colorCode: '#FFFF00'},
23
+ {name: 'Lime', colorCode: '#00FF00'},
24
+ {name: 'Magenta', colorCode: '#FF00FF'},
25
+ {name: 'Silver', colorCode: '#C0C0C0'},
26
+ {name: 'Gray', colorCode: '#808080'},
27
+ {name: 'Black', colorCode: '#000000'},
28
+ {name: 'Orange', colorCode: '#FFA500'},
29
+ {name: 'Brown', colorCode: '#A52A2A'},
30
+ {name: 'Maroon', colorCode: '#800000'},
31
+ {name: 'Green', colorCode: '#008000'},
32
+ {name: 'Olive', colorCode: '#808000'},
33
+ ];
34
+
35
+ export class MultiselectDocs extends React.Component<{}, IState> {
36
+ constructor(props) {
37
+ super(props);
38
+ this.state = {
39
+ value: null,
40
+ value2: null,
41
+ }
42
+ }
43
+
44
+ render() {
45
+ return (
46
+ <section className='docs-page__container'>
47
+ <h2 className='docs-page__h2'>MultiSelect</h2>
48
+
49
+ <Markup.ReactMarkupCodePreview>{`
50
+ <MultiSelect
51
+ value={this.state.value2}
52
+ options={ItemArr}
53
+ onChange={(e: any) => this.setState({value2: e.value})}
54
+ placeholder='Select Item'
55
+ optionLabel='name'
56
+ />
57
+ `}
58
+ </Markup.ReactMarkupCodePreview>
59
+
60
+ <Markup.ReactMarkup>
61
+ <Markup.ReactMarkupPreview>
62
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
63
+ <div className='form__row'>
64
+ <MultiSelect
65
+ value={this.state.value}
66
+ options={ItemArr}
67
+ onChange={(e: any) => this.setState({value: e.value})}
68
+ filter
69
+ showSelectAll
70
+ placeholder='Select a color'
71
+ optionLabel='name'
72
+ required
73
+ tabindex={1}
74
+ label={'This is Label'}
75
+ info={'This is info'}
76
+ />
77
+ </div>
78
+ </div>
79
+ </Markup.ReactMarkupPreview>
80
+
81
+ <Markup.ReactMarkupCode>{`
82
+ <MultiSelect
83
+ value={this.state.value}
84
+ options={ItemArr}
85
+ onChange={(e: any) => this.setState({value: e.value})}
86
+ filter
87
+ showSelectAll
88
+ placeholder='Select a color'
89
+ optionLabel='name'
90
+ required
91
+ tabindex={1}
92
+ label={'This is Label'}
93
+ info={'This is info'}
94
+ />
95
+ `}</Markup.ReactMarkupCode>
96
+
97
+ </Markup.ReactMarkup>
98
+
99
+ <p className='docs-page__paragraph'>MultiSelect with custom template.</p>
100
+
101
+ <Markup.ReactMarkup>
102
+ <Markup.ReactMarkupPreview>
103
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
104
+ <div className='form__row'>
105
+ <MultiSelect
106
+ value={this.state.value2}
107
+ options={ItemArr}
108
+ onChange={(e: any) => this.setState({value2: e.value})}
109
+ filter
110
+ showSelectAll
111
+ optionLabel='name'
112
+ itemTemplate={(option) => {
113
+ if (option) {
114
+ return (
115
+ <div style={{display: 'flex', alignItems: 'center'}}>
116
+ <div style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
117
+ <div>{option.name}</div>
118
+ </div>
119
+ );
120
+ }
121
+ }}
122
+ selectedItemTemplate={(option) => {
123
+ if (option == null) {
124
+ return (
125
+ <div>Select a color</div>
126
+ );
127
+ } else {
128
+ return (
129
+ <div className='p-multiselect-token'>
130
+ <span style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
131
+ <span className='p-multiselect-token-label'>{option.name}</span>
132
+ </div>
133
+ );
134
+ }
135
+ }}
136
+ />
137
+ </div>
138
+ </div>
139
+ </Markup.ReactMarkupPreview>
140
+
141
+ <Markup.ReactMarkupCode>{`
142
+ <MultiSelect
143
+ value={this.state.value2}
144
+ options={ItemArr}
145
+ onChange={(e: any) => this.setState({value2: e.value})}
146
+ filter
147
+ showSelectAll
148
+ optionLabel='name'
149
+ itemTemplate={(option) => {
150
+ if (option) {
151
+ return (
152
+ <div style={{display: 'flex', alignItems: 'center'}}>
153
+ <div style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
154
+ <div>{option.name}</div>
155
+ </div>
156
+ );
157
+ }
158
+ }}
159
+ selectedItemTemplate={(option) => {
160
+ if (option == null) {
161
+ return (
162
+ <div>Select a color</div>
163
+ );
164
+ } else {
165
+ return (
166
+ <div className='p-multiselect-token'>
167
+ <span style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
168
+ <span className='p-multiselect-token-label'>{option.name}</span>
169
+ </div>
170
+ );
171
+ }
172
+ }}
173
+ />
174
+ `}</Markup.ReactMarkupCode>
175
+
176
+ </Markup.ReactMarkup>
177
+
178
+ <h3 className="docs-page__h3">Props</h3>
179
+ <PropsList>
180
+ <Prop name='value' isRequired={true} type='Array<T>' default='/' description='Value of the component.'/>
181
+ <Prop name='options' isRequired={true} type='Array<T>' default='/' description='An array of selectitems to display as the available options.'/>
182
+ <Prop name='optionLabel' isRequired={true} type='string' default='/' description='Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options and decides which field or fields to search against.'/>
183
+ <Prop name='placeholder' isRequired={false} type='string' default='/' description='Label to display when there are no selections.'/>
184
+ <Prop name='filter' isRequired={false} type='boolean' default='false' description='When specified, displays an input field to filter the items on keyup.'/>
185
+ <Prop name='filterPlaceholder' isRequired={false} type='string' default='/' description='Placeholder text to show when filter input is empty.'/>
186
+ <Prop name='emptyFilterMessage' isRequired={false} type='string' default='No results found' description='Template to display when filtering does not return any results.'/>
187
+ <Prop name='maxSelectedLabels' isRequired={false} type='number' default='/' description='Decides how many selected item labels to show at most. Its necessary to use selectedItemTemplate.'/>
188
+ <Prop name='selectedItemsLabel' isRequired={false} type='string' default='{0} items selected' description='Label to display after exceeding max selected labels.'/>
189
+ <Prop name='ariaLabelledBy' isRequired={false} type='string' default='/' description='Establishes relationships between the component and label(s) where its value should be one or more element IDs.'/>
190
+ <Prop name='tabIndex' isRequired={false} type='string' default="'0'" description='Index of the element in tabbing order.'/>
191
+ <Prop name='showClear' isRequired={false} type='boolean' default='false' description='When enabled, a clear icon is displayed to clear the value.'/>
192
+ <Prop name='showSelectAll' isRequired={false} type='boolean' default='false' description='Whether to show the select all checkbox inside the panel header.'/>
193
+ <Prop name='itemTemplate' isRequired={false} type='function' default='/' description='Function that gets the option and returns the content for it.'/>
194
+ <Prop name='selectedItemTemplate' isRequired={false} type='function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
195
+ <Prop name='onChange' isRequired={true} type='function' default='/' description='Callback to invoke when value changes.'/>
196
+ </PropsList>
197
+
198
+ </section>
199
+ )
200
+ }
201
+ }
@@ -18,13 +18,13 @@ export default class NavButtonsDoc extends React.Component {
18
18
  <Markup.ReactMarkup>
19
19
  <Markup.ReactMarkupPreview>
20
20
  <SubNav zIndex={2}>
21
- <ButtonGroup align='left'>
21
+ <ButtonGroup align='start' spaces='no-space'>
22
22
  <Tooltip text='Filters' flow='right'>
23
23
  <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
24
24
  </Tooltip>
25
25
  <NavButton icon='search' text="Search" onClick={() => false} />
26
26
  </ButtonGroup>
27
- <ButtonGroup align='right'>
27
+ <ButtonGroup align='end' spaces='no-space'>
28
28
  <NavButton icon='list-plus' text="Add to list" onClick={() => false} />
29
29
  <Tooltip text='More actions' flow='down'>
30
30
  <NavButton icon='dots-vertical' text="More actions" onClick={() => false} />
@@ -37,13 +37,13 @@ export default class NavButtonsDoc extends React.Component {
37
37
  </Markup.ReactMarkupPreview>
38
38
  <Markup.ReactMarkupCode>{`
39
39
  <SubNav zIndex={2}>
40
- <ButtonGroup align='left'>
40
+ <ButtonGroup align='start' spaces='no-space'>
41
41
  <Tooltip text='Filters' flow='right'>
42
42
  <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
43
43
  </Tooltip>
44
44
  <NavButton icon='search' text="Search" onClick={() => false} />
45
45
  </ButtonGroup>
46
- <ButtonGroup align='right'>
46
+ <ButtonGroup align='end' spaces='no-space'>
47
47
  <NavButton icon='list-plus' text="Add to list" onClick={() => false} />
48
48
  <Tooltip text='More actions' flow='down'>
49
49
  <NavButton icon='dots-vertical' text="More actions" onClick={() => false} />
@@ -56,13 +56,43 @@ export default class NavButtonsDoc extends React.Component {
56
56
  `}
57
57
  </Markup.ReactMarkupCode>
58
58
  </Markup.ReactMarkup>
59
+ <h3 className="docs-page__h3">Styles / Types</h3>
60
+ <Markup.ReactMarkup>
61
+ <Markup.ReactMarkupPreview>
62
+ <SubNav zIndex={2}>
63
+ <ButtonGroup align='start' spaces='no-space'>
64
+ <NavButton icon='adjust' type='default' text="Adjust" onClick={() => false} />
65
+ <NavButton icon='eye-open' type='darker' text="View" onClick={() => false} />
66
+ <NavButton icon='refresh' type='dark' text="Refresh" onClick={() => false} />
67
+ </ButtonGroup>
68
+ <ButtonGroup align='end' spaces='no-space'>
69
+ <NavButton icon='edit-line' type='primary' text="Edit" onClick={() => false} />
70
+ <NavButton icon='expand-thin' type='highlight' text="Expand" onClick={() => false} />
71
+ </ButtonGroup>
72
+ </SubNav>
73
+ </Markup.ReactMarkupPreview>
74
+ <Markup.ReactMarkupCode>{`
75
+ <SubNav zIndex={2}>
76
+ <ButtonGroup align='start' spaces='no-space'>
77
+ <NavButton icon='adjust' type='default' text="Adjust" onClick={() => false} />
78
+ <NavButton icon='eye-open' type='darker' text="View" onClick={() => false} />
79
+ <NavButton icon='refresh' type='dark' text="Refresh" onClick={() => false} />
80
+ </ButtonGroup>
81
+ <ButtonGroup align='end' spaces='no-space'>
82
+ <NavButton icon='edit-line' type='primary' text="Edit" onClick={() => false} />
83
+ <NavButton icon='expand-thin' type='highlight' text="Expand" onClick={() => false} />
84
+ </ButtonGroup>
85
+ </SubNav>
86
+ `}
87
+ </Markup.ReactMarkupCode>
88
+ </Markup.ReactMarkup>
59
89
 
60
90
  <h3 className="docs-page__h3">Props</h3>
61
91
  <PropsList>
62
92
  <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.' />
63
93
  <Prop name='text' isRequired={false} type='string' default='/' description='Defines the value for aria-label, for screen-readers accessibility.' />
64
94
  <Prop name='iconSize' isRequired={false} type='small | big' default='small' description='Specifies a small or big button' />
65
- <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.).' />
95
+ <Prop name='type' isRequired={false} type='default | primary | highlight | darker | dark' default='default' description='Default + colour variations.' />
66
96
  <Prop name='state' isRequired={false} type='normal | active' default='normal' description='Defines the optional state of the button (e.g. active)' />
67
97
  <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Styles nav button for diffrent background.' />
68
98
  <Prop name='value' isRequired={false} type='button | submit | reset' default='button' description='Specifies a value of nav button' />