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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (709) hide show
  1. package/.vscode/settings.json +5 -0
  2. package/app/fonts/sd_big-icons.eot +0 -0
  3. package/app/fonts/sd_big-icons.svg +55 -53
  4. package/app/fonts/sd_big-icons.ttf +0 -0
  5. package/app/fonts/sd_big-icons.woff +0 -0
  6. package/app/fonts/sd_icons.eot +0 -0
  7. package/app/fonts/sd_icons.svg +15 -7
  8. package/app/fonts/sd_icons.ttf +0 -0
  9. package/app/fonts/sd_icons.woff +0 -0
  10. package/app/img/SD-logo.svg +52 -0
  11. package/app/img/dots.svg +3 -0
  12. package/app/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 +351 -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 +226 -219
  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 +45 -24
  53. package/app/styles/components/_sd-dropzone.scss +114 -0
  54. package/app/styles/components/_sd-grid-item.scss +32 -18
  55. package/app/styles/components/_sd-notification-panel.scss +48 -0
  56. package/app/styles/components/_sd-photo-preview.scss +1 -1
  57. package/app/styles/components/_sd-searchbar.scss +12 -98
  58. package/app/styles/components/_subnav.scss +149 -120
  59. package/app/styles/components/_theme-selector.scss +189 -0
  60. package/app/styles/design-tokens/_design-tokens-general.scss +81 -0
  61. package/app/styles/{variables → design-tokens}/_new-colors.scss +42 -21
  62. package/app/styles/dropdowns/_basic-dropdown.scss +30 -3
  63. package/app/styles/editor/_editor-buttons.scss +54 -0
  64. package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
  65. package/app/styles/form-elements/_checkbox.scss +85 -58
  66. package/app/styles/form-elements/_forms-general.scss +171 -21
  67. package/app/styles/form-elements/_inputs.scss +393 -64
  68. package/app/styles/form-elements/_select-grid.scss +79 -0
  69. package/app/styles/grids/_basic-grid.scss +52 -26
  70. package/app/styles/grids/_grid-layout.scss +198 -66
  71. package/app/styles/grids/_layout-grid.scss +4 -4
  72. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  73. package/app/styles/interface-elements/_side-panel.scss +87 -58
  74. package/app/styles/layout/_basic-layout.scss +3 -6
  75. package/app/styles/layout/_container.scss +35 -0
  76. package/app/styles/layout/_editor.scss +398 -0
  77. package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
  78. package/app/styles/menus/_sd-left-navigation.scss +38 -3
  79. package/app/styles/menus/_sd-sidebar-menu.scss +109 -14
  80. package/app/styles/menus/_sd-top-menu.scss +19 -5
  81. package/app/styles/pr-superdesk-theme.scss +3 -0
  82. package/app/styles/primereact/_pr-datepicker.scss +58 -7
  83. package/app/styles/primereact/_pr-dialog.scss +39 -7
  84. package/app/styles/primereact/_pr-dropdown.scss +170 -7
  85. package/app/styles/primereact/_pr-general.scss +4 -0
  86. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  87. package/app/styles/variables/_colors.scss +2 -452
  88. package/app/styles/variables/_dimensions.scss +85 -1
  89. package/app/styles/variables/_form-elements.scss +0 -2
  90. package/app-typescript/components/Alert.tsx +16 -1
  91. package/app-typescript/components/Avatar.tsx +21 -0
  92. package/app-typescript/components/Badge.tsx +3 -2
  93. package/app-typescript/components/Button.tsx +7 -1
  94. package/app-typescript/components/ButtonGroup.tsx +5 -4
  95. package/app-typescript/components/Carousel.tsx +1 -1
  96. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  97. package/app-typescript/components/CheckGroup.tsx +2 -1
  98. package/app-typescript/components/Checkbox.tsx +7 -3
  99. package/app-typescript/components/CheckboxButton.tsx +9 -2
  100. package/app-typescript/components/CreateButton.tsx +38 -0
  101. package/app-typescript/components/DatePicker.tsx +77 -38
  102. package/app-typescript/components/DonutChart.tsx +1 -1
  103. package/app-typescript/components/DropZone.tsx +89 -0
  104. package/app-typescript/components/Dropdown.tsx +9 -1
  105. package/app-typescript/components/DurationInput.tsx +375 -0
  106. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  107. package/app-typescript/components/EmptyState.tsx +2 -1
  108. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  109. package/app-typescript/components/Form/FormItem.tsx +20 -0
  110. package/app-typescript/components/Form/FormLabel.tsx +22 -0
  111. package/app-typescript/components/Form/FormRow.tsx +40 -0
  112. package/app-typescript/components/Form/FormRowNew.tsx +41 -0
  113. package/app-typescript/components/Form/FormText.tsx +15 -0
  114. package/app-typescript/components/Form/InputBase.tsx +85 -0
  115. package/app-typescript/components/Form/InputNew.tsx +107 -0
  116. package/app-typescript/components/Form/InputWrapper.tsx +79 -0
  117. package/app-typescript/components/Form/index.tsx +9 -0
  118. package/app-typescript/components/Icon.tsx +4 -2
  119. package/app-typescript/components/IconButton.tsx +30 -12
  120. package/app-typescript/components/IconLabel.tsx +8 -1
  121. package/app-typescript/components/IconPicker.tsx +277 -0
  122. package/app-typescript/components/Input.tsx +67 -35
  123. package/app-typescript/components/Label.tsx +49 -10
  124. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  125. package/app-typescript/components/Layouts/AuthoringContainer.tsx +28 -0
  126. package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
  127. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  128. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  129. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  130. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  131. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  132. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
  133. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  134. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  135. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  136. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
  137. package/app-typescript/components/Layouts/AuthoringMain.tsx +50 -0
  138. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  139. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  140. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -0
  141. package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
  142. package/app-typescript/components/Layouts/Container.tsx +30 -0
  143. package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
  144. package/app-typescript/components/Layouts/CoreLayout.tsx +62 -0
  145. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
  146. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
  147. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +16 -0
  148. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
  149. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
  150. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
  151. package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
  152. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  153. package/app-typescript/components/Layouts/Layout.tsx +33 -0
  154. package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
  155. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  156. package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
  157. package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
  158. package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
  159. package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
  160. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  161. package/app-typescript/components/Layouts/Panel.tsx +208 -0
  162. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  163. package/app-typescript/components/Layouts/index.tsx +43 -0
  164. package/app-typescript/components/LeftMenu.tsx +116 -31
  165. package/app-typescript/components/ListItemLoader.tsx +30 -0
  166. package/app-typescript/components/Lists/BoxedList.tsx +169 -0
  167. package/app-typescript/components/Lists/ContentList.tsx +100 -0
  168. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  169. package/app-typescript/components/Lists/TableList.tsx +212 -0
  170. package/app-typescript/components/Lists/index.tsx +2 -0
  171. package/app-typescript/components/Menu.tsx +31 -7
  172. package/app-typescript/components/Modal.tsx +31 -18
  173. package/app-typescript/components/MultiSelect.tsx +99 -0
  174. package/app-typescript/components/NavButton.tsx +4 -0
  175. package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
  176. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  177. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  178. package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
  179. package/app-typescript/components/Navigation/index.tsx +3 -0
  180. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  181. package/app-typescript/components/RadioGroup.tsx +69 -0
  182. package/app-typescript/components/SearchBar.tsx +98 -0
  183. package/app-typescript/components/Select.tsx +31 -31
  184. package/app-typescript/components/SelectGrid.tsx +233 -0
  185. package/app-typescript/components/SelectWithTemplate.tsx +32 -7
  186. package/app-typescript/components/SidebarMenu.tsx +68 -0
  187. package/app-typescript/components/Skeleton.tsx +48 -0
  188. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  189. package/app-typescript/components/Spinner.tsx +32 -0
  190. package/app-typescript/components/SubNav.tsx +25 -4
  191. package/app-typescript/components/Switch.tsx +34 -12
  192. package/app-typescript/components/SwitchGroup.tsx +2 -1
  193. package/app-typescript/components/Tag.tsx +31 -7
  194. package/app-typescript/components/Text/Heading.tsx +67 -0
  195. package/app-typescript/components/Text/Text.tsx +36 -0
  196. package/app-typescript/components/Text/Time.tsx +34 -0
  197. package/app-typescript/components/ThemeSelector.tsx +113 -0
  198. package/app-typescript/components/TimePicker.tsx +50 -16
  199. package/app-typescript/components/Togglebox.tsx +9 -7
  200. package/app-typescript/components/Tooltip.tsx +7 -5
  201. package/app-typescript/components/TreeSelect.tsx +558 -0
  202. package/app-typescript/components/WithSizeObserver.tsx +88 -0
  203. package/app-typescript/dist/components/Alert.d.ts +16 -0
  204. package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
  205. package/app-typescript/dist/components/Avatar.d.ts +33 -0
  206. package/app-typescript/dist/components/Badge.d.ts +13 -0
  207. package/app-typescript/dist/components/Button.d.ts +23 -0
  208. package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
  209. package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
  210. package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
  211. package/app-typescript/dist/components/Checkbox.d.ts +19 -0
  212. package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
  213. package/app-typescript/dist/components/DatePicker.d.ts +37 -0
  214. package/app-typescript/dist/components/Divider.d.ts +9 -0
  215. package/app-typescript/dist/components/DonutChart.d.ts +12 -0
  216. package/app-typescript/dist/components/Dropdown.d.ts +28 -0
  217. package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
  218. package/app-typescript/dist/components/EmptyState.d.ts +11 -0
  219. package/app-typescript/dist/components/FormLabel.d.ts +9 -0
  220. package/app-typescript/dist/components/Genie.d.ts +13 -0
  221. package/app-typescript/dist/components/GridItem.d.ts +69 -0
  222. package/app-typescript/dist/components/GridList.d.ts +14 -0
  223. package/app-typescript/dist/components/HeadingText.d.ts +10 -0
  224. package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
  225. package/app-typescript/dist/components/Icon.d.ts +12 -0
  226. package/app-typescript/dist/components/IconButton.d.ts +12 -0
  227. package/app-typescript/dist/components/IconLabel.d.ts +11 -0
  228. package/app-typescript/dist/components/Input.d.ts +24 -0
  229. package/app-typescript/dist/components/Label.d.ts +15 -0
  230. package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
  231. package/app-typescript/dist/components/Loader.d.ts +8 -0
  232. package/app-typescript/dist/components/NavButton.d.ts +15 -0
  233. package/app-typescript/dist/components/Popover.d.ts +13 -0
  234. package/app-typescript/dist/components/PropsList.d.ts +15 -0
  235. package/{react → app-typescript/dist}/components/Radio.d.ts +7 -8
  236. package/{react → app-typescript/dist}/components/RadioButton.d.ts +0 -0
  237. package/app-typescript/dist/components/Select.d.ts +29 -0
  238. package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
  239. package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
  240. package/app-typescript/dist/components/StrechBar.d.ts +4 -0
  241. package/app-typescript/dist/components/SubNav.d.ts +10 -0
  242. package/app-typescript/dist/components/Switch.d.ts +12 -0
  243. package/app-typescript/dist/components/TabCustom.d.ts +25 -0
  244. package/app-typescript/dist/components/TabList.d.ts +22 -0
  245. package/app-typescript/dist/components/Tag.d.ts +9 -0
  246. package/app-typescript/dist/components/TagInput.d.ts +7 -0
  247. package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
  248. package/app-typescript/dist/components/TimePicker.d.ts +11 -0
  249. package/app-typescript/dist/components/Tooltip.d.ts +11 -0
  250. package/app-typescript/dist/components/_Positioner.d.ts +27 -0
  251. package/app-typescript/dist/index.d.ts +56 -0
  252. package/app-typescript/helpers.tsx +3 -0
  253. package/app-typescript/index.ts +29 -3
  254. package/dist/SD-logo.svg +52 -0
  255. package/dist/avatar-2.jpg +0 -0
  256. package/dist/avatar-3.jpg +0 -0
  257. package/dist/avatar-4.jpg +0 -0
  258. package/dist/avatar-5.jpg +0 -0
  259. package/dist/avatar-6.jpg +0 -0
  260. package/dist/components/basic-grid.html +1 -1
  261. package/dist/components/checkbox.html +1 -1
  262. package/dist/components/modals.html +1 -0
  263. package/dist/dots.svg +3 -0
  264. package/dist/examples.bundle.css +8901 -1602
  265. package/dist/examples.bundle.js +103604 -77680
  266. package/dist/playgrounds/accessible-theme-test.html +1 -1
  267. package/dist/playgrounds/boxed-list.html +1 -1
  268. package/dist/playgrounds/cards.html +9 -4
  269. package/dist/playgrounds/editor-3-test.html +15 -0
  270. package/dist/playgrounds/form-layout.html +9 -7
  271. package/dist/playgrounds/layout-test-2.html +1 -1
  272. package/dist/playgrounds/list-item-test.html +1 -1
  273. package/dist/playgrounds/master-desk.html +2 -4
  274. package/dist/playgrounds/media-carousel.html +1 -1
  275. package/dist/playgrounds/photo-desk.html +1 -1
  276. package/dist/playgrounds/planning.html +1 -1
  277. package/dist/playgrounds/publish.html +1 -1
  278. package/dist/playgrounds/publisher-content-analytics.html +1 -1
  279. package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
  280. package/dist/playgrounds/publisher-content-list-manual.html +1 -1
  281. package/dist/playgrounds/publisher-content-lists.html +1 -1
  282. package/dist/playgrounds/publisher-dashboard.html +1 -1
  283. package/dist/playgrounds/publisher-output-control.html +1 -1
  284. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +155 -0
  285. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  286. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  287. package/dist/playgrounds/react-playgrounds/Index.tsx +7 -1
  288. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  289. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  290. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +474 -0
  291. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  292. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
  293. package/dist/playgrounds/react-playgrounds/TestGround.tsx +457 -23
  294. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  295. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  296. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  297. package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  298. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  299. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  300. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  301. package/dist/playgrounds/swimlane-view.html +1 -1
  302. package/dist/playgrounds/toasts.html +1 -1
  303. package/dist/playgrounds/video-editor.html +1 -1
  304. package/dist/react/Alerts.tsx +91 -18
  305. package/dist/react/Avatar.tsx +314 -127
  306. package/dist/react/Badges.tsx +18 -0
  307. package/dist/react/BoxedList.tsx +362 -0
  308. package/dist/react/ButtonGroups.tsx +66 -65
  309. package/dist/react/Buttons.tsx +65 -113
  310. package/dist/react/Carousel.tsx +2 -3
  311. package/dist/react/Checkboxs.tsx +66 -25
  312. package/dist/react/Container.tsx +143 -0
  313. package/dist/react/ContentList.tsx +286 -0
  314. package/dist/react/CreateButton.tsx +71 -0
  315. package/dist/react/DatePicker.tsx +31 -6
  316. package/dist/react/DropZone.tsx +111 -0
  317. package/dist/react/DurationInput.tsx +104 -0
  318. package/dist/react/Heading.tsx +106 -0
  319. package/dist/react/IconButtons.tsx +51 -21
  320. package/dist/react/IconFont.tsx +7 -6
  321. package/dist/react/IconLabels.tsx +24 -2
  322. package/dist/react/IconPicker.tsx +65 -0
  323. package/dist/react/Index.tsx +125 -19
  324. package/dist/react/Inputs.tsx +295 -6
  325. package/dist/react/Labels.tsx +51 -1
  326. package/dist/react/LeftNavigations.tsx +194 -15
  327. package/dist/react/ListItems.tsx +34 -0
  328. package/dist/react/Modal.tsx +8 -7
  329. package/dist/react/MultiSelect.tsx +201 -0
  330. package/dist/react/NavButtons.tsx +4 -4
  331. package/dist/react/Panel.tsx +366 -0
  332. package/dist/react/QuickNavigationBar.tsx +142 -0
  333. package/dist/react/RadioGroup.tsx +351 -0
  334. package/dist/react/SelectGrid.tsx +121 -0
  335. package/dist/react/SelectWithTemplate.tsx +6 -1
  336. package/dist/react/Selects.tsx +57 -0
  337. package/dist/react/SimpleList.tsx +148 -0
  338. package/dist/react/SubNav.tsx +65 -18
  339. package/dist/react/TableList.tsx +248 -0
  340. package/dist/react/Tags.tsx +57 -5
  341. package/dist/react/Text.tsx +134 -0
  342. package/dist/react/TimePicker.tsx +22 -12
  343. package/dist/react/TreeSelect.tsx +431 -0
  344. package/dist/react/WithSizeObserver.tsx +44 -0
  345. package/dist/react/tree-select/TreeSelect.tsx +273 -0
  346. package/dist/react/tree-select/example-1.tsx +71 -0
  347. package/dist/react/tree-select/example-2.tsx +59 -0
  348. package/dist/react.html +4 -0
  349. package/dist/sd_big-icons.eot +0 -0
  350. package/dist/sd_big-icons.svg +55 -53
  351. package/dist/sd_big-icons.ttf +0 -0
  352. package/dist/sd_big-icons.woff +0 -0
  353. package/dist/sd_icons.eot +0 -0
  354. package/dist/sd_icons.svg +15 -7
  355. package/dist/sd_icons.ttf +0 -0
  356. package/dist/sd_icons.woff +0 -0
  357. package/dist/superdesk-ui.bundle.css +55129 -25144
  358. package/dist/superdesk-ui.bundle.js +76296 -56362
  359. package/dist/vendor.bundle.js +25684 -25662
  360. package/examples/css/docs-page.css +99 -29
  361. package/examples/img/avatar-2.jpg +0 -0
  362. package/examples/img/avatar-3.jpg +0 -0
  363. package/examples/img/avatar-4.jpg +0 -0
  364. package/examples/img/avatar-5.jpg +0 -0
  365. package/examples/img/avatar-6.jpg +0 -0
  366. package/examples/index.js +28 -0
  367. package/examples/pages/components/basic-grid.html +1 -1
  368. package/examples/pages/components/checkbox.html +1 -1
  369. package/examples/pages/components/modals.html +1 -0
  370. package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
  371. package/examples/pages/playgrounds/boxed-list.html +1 -1
  372. package/examples/pages/playgrounds/cards.html +9 -4
  373. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  374. package/examples/pages/playgrounds/form-layout.html +9 -7
  375. package/examples/pages/playgrounds/layout-test-2.html +1 -1
  376. package/examples/pages/playgrounds/list-item-test.html +1 -1
  377. package/examples/pages/playgrounds/master-desk.html +2 -4
  378. package/examples/pages/playgrounds/media-carousel.html +1 -1
  379. package/examples/pages/playgrounds/photo-desk.html +1 -1
  380. package/examples/pages/playgrounds/planning.html +1 -1
  381. package/examples/pages/playgrounds/publish.html +1 -1
  382. package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
  383. package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
  384. package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
  385. package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
  386. package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
  387. package/examples/pages/playgrounds/publisher-output-control.html +1 -1
  388. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +155 -0
  389. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  390. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  391. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +7 -1
  392. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  393. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  394. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +474 -0
  395. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  396. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
  397. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +457 -23
  398. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  399. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  400. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  401. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  402. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  403. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  404. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  405. package/examples/pages/playgrounds/swimlane-view.html +1 -1
  406. package/examples/pages/playgrounds/toasts.html +1 -1
  407. package/examples/pages/playgrounds/video-editor.html +1 -1
  408. package/examples/pages/react/Alerts.tsx +91 -18
  409. package/examples/pages/react/Avatar.tsx +314 -127
  410. package/examples/pages/react/Badges.tsx +18 -0
  411. package/examples/pages/react/BoxedList.tsx +362 -0
  412. package/examples/pages/react/ButtonGroups.tsx +66 -65
  413. package/examples/pages/react/Buttons.tsx +65 -113
  414. package/examples/pages/react/Carousel.tsx +2 -3
  415. package/examples/pages/react/Checkboxs.tsx +66 -25
  416. package/examples/pages/react/Container.tsx +143 -0
  417. package/examples/pages/react/ContentList.tsx +286 -0
  418. package/examples/pages/react/CreateButton.tsx +71 -0
  419. package/examples/pages/react/DatePicker.tsx +31 -6
  420. package/examples/pages/react/DropZone.tsx +111 -0
  421. package/examples/pages/react/DurationInput.tsx +104 -0
  422. package/examples/pages/react/Heading.tsx +106 -0
  423. package/examples/pages/react/IconButtons.tsx +51 -21
  424. package/examples/pages/react/IconFont.tsx +7 -6
  425. package/examples/pages/react/IconLabels.tsx +24 -2
  426. package/examples/pages/react/IconPicker.tsx +65 -0
  427. package/examples/pages/react/Index.tsx +125 -19
  428. package/examples/pages/react/Inputs.tsx +295 -6
  429. package/examples/pages/react/Labels.tsx +51 -1
  430. package/examples/pages/react/LeftNavigations.tsx +194 -15
  431. package/examples/pages/react/ListItems.tsx +34 -0
  432. package/examples/pages/react/Modal.tsx +8 -7
  433. package/examples/pages/react/MultiSelect.tsx +201 -0
  434. package/examples/pages/react/NavButtons.tsx +4 -4
  435. package/examples/pages/react/Panel.tsx +366 -0
  436. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  437. package/examples/pages/react/RadioGroup.tsx +351 -0
  438. package/examples/pages/react/SelectGrid.tsx +121 -0
  439. package/examples/pages/react/SelectWithTemplate.tsx +6 -1
  440. package/examples/pages/react/Selects.tsx +57 -0
  441. package/examples/pages/react/SimpleList.tsx +148 -0
  442. package/examples/pages/react/SubNav.tsx +65 -18
  443. package/examples/pages/react/TableList.tsx +248 -0
  444. package/examples/pages/react/Tags.tsx +57 -5
  445. package/examples/pages/react/Text.tsx +134 -0
  446. package/examples/pages/react/TimePicker.tsx +22 -12
  447. package/examples/pages/react/TreeSelect.tsx +431 -0
  448. package/examples/pages/react/WithSizeObserver.tsx +44 -0
  449. package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
  450. package/examples/pages/react/tree-select/example-1.tsx +71 -0
  451. package/examples/pages/react/tree-select/example-2.tsx +59 -0
  452. package/examples/pages/react.html +4 -0
  453. package/package.json +16 -11
  454. package/react/components/Alert.d.ts +3 -0
  455. package/react/components/Alert.js +17 -7
  456. package/react/components/Autocomplete.js +16 -12
  457. package/react/components/Avatar.d.ts +9 -0
  458. package/react/components/Avatar.js +24 -4
  459. package/react/components/Badge.d.ts +1 -0
  460. package/react/components/Badge.js +9 -7
  461. package/react/components/Button.d.ts +2 -0
  462. package/react/components/Button.js +12 -8
  463. package/react/components/ButtonGroup.d.ts +3 -2
  464. package/react/components/ButtonGroup.js +9 -7
  465. package/react/components/Carousel.js +5 -3
  466. package/react/components/CheckButtonGroup.d.ts +3 -1
  467. package/react/components/CheckButtonGroup.js +14 -6
  468. package/react/components/CheckGroup.d.ts +1 -0
  469. package/react/components/CheckGroup.js +6 -4
  470. package/react/components/Checkbox.d.ts +2 -1
  471. package/react/components/Checkbox.js +7 -5
  472. package/react/components/CheckboxButton.d.ts +1 -0
  473. package/react/components/CheckboxButton.js +8 -6
  474. package/react/components/ContentDivider.js +8 -6
  475. package/react/components/CreateButton.d.ts +17 -0
  476. package/react/components/CreateButton.js +68 -0
  477. package/react/components/DatePicker.d.ts +11 -0
  478. package/react/components/DatePicker.js +45 -31
  479. package/react/components/Divider.js +6 -4
  480. package/react/components/DonutChart.d.ts +1 -1
  481. package/react/components/DonutChart.js +24 -6
  482. package/react/components/DropZone.d.ts +25 -0
  483. package/react/components/DropZone.js +95 -0
  484. package/react/components/Dropdown.d.ts +1 -0
  485. package/react/components/Dropdown.js +10 -9
  486. package/react/components/DropdownFirst.js +18 -11
  487. package/react/components/DurationInput.d.ts +42 -0
  488. package/react/components/DurationInput.js +335 -0
  489. package/react/components/EmptyState.d.ts +1 -0
  490. package/react/components/EmptyState.js +8 -6
  491. package/react/components/Form/FormGroup.d.ts +13 -0
  492. package/react/components/Form/FormGroup.js +63 -0
  493. package/react/components/Form/FormItem.d.ts +9 -0
  494. package/react/components/Form/FormItem.js +56 -0
  495. package/react/components/Form/FormLabel.d.ts +10 -0
  496. package/react/components/Form/FormLabel.js +56 -0
  497. package/react/components/Form/FormRow.d.ts +17 -0
  498. package/react/components/Form/FormRow.js +64 -0
  499. package/react/components/Form/FormRowNew.d.ts +12 -0
  500. package/react/components/Form/FormRowNew.js +67 -0
  501. package/react/components/Form/FormText.d.ts +8 -0
  502. package/react/components/Form/FormText.js +49 -0
  503. package/react/components/Form/InputBase.d.ts +42 -0
  504. package/react/components/Form/InputBase.js +72 -0
  505. package/react/components/Form/InputNew.d.ts +45 -0
  506. package/react/components/Form/InputNew.js +75 -0
  507. package/react/components/Form/InputWrapper.d.ts +28 -0
  508. package/react/components/Form/InputWrapper.js +91 -0
  509. package/react/components/Form/index.d.ts +9 -0
  510. package/react/components/Form/index.js +21 -0
  511. package/react/components/FormLabel.js +5 -3
  512. package/react/components/GridItem.js +9 -7
  513. package/react/components/GridList.js +8 -6
  514. package/react/components/HeadingText.js +4 -2
  515. package/react/components/HelloWorld.js +4 -2
  516. package/react/components/Icon.d.ts +2 -1
  517. package/react/components/Icon.js +9 -6
  518. package/react/components/IconButton.d.ts +9 -2
  519. package/react/components/IconButton.js +17 -7
  520. package/react/components/IconLabel.d.ts +2 -0
  521. package/react/components/IconLabel.js +12 -7
  522. package/react/components/IconPicker.d.ts +24 -0
  523. package/react/components/IconPicker.js +287 -0
  524. package/react/components/Input.d.ts +25 -3
  525. package/react/components/Input.js +21 -26
  526. package/react/components/Label.d.ts +1 -0
  527. package/react/components/Label.js +28 -10
  528. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  529. package/react/components/Layouts/AuthorinInnerSideBar.js +49 -0
  530. package/react/components/Layouts/AuthoringContainer.d.ts +12 -0
  531. package/react/components/Layouts/AuthoringContainer.js +60 -0
  532. package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
  533. package/react/components/Layouts/AuthoringFrame.js +58 -0
  534. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  535. package/react/components/Layouts/AuthoringFrameContainer.js +49 -0
  536. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  537. package/react/components/Layouts/AuthoringFrameLeftBar.js +49 -0
  538. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  539. package/react/components/Layouts/AuthoringFrameMain.js +49 -0
  540. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  541. package/react/components/Layouts/AuthoringFrameNavBar.js +49 -0
  542. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  543. package/react/components/Layouts/AuthoringFrameOverlay.js +49 -0
  544. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
  545. package/react/components/Layouts/AuthoringFrameRightBar.js +49 -0
  546. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  547. package/react/components/Layouts/AuthoringFrameSidePanel.js +58 -0
  548. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  549. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +58 -0
  550. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  551. package/react/components/Layouts/AuthoringInnerBody.js +49 -0
  552. package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
  553. package/react/components/Layouts/AuthoringInnerHeader.js +68 -0
  554. package/react/components/Layouts/AuthoringMain.d.ts +14 -0
  555. package/react/components/Layouts/AuthoringMain.js +55 -0
  556. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  557. package/react/components/Layouts/AuthoringMainContainer.js +49 -0
  558. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  559. package/react/components/Layouts/AuthoringMainContent.js +49 -0
  560. package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
  561. package/react/components/Layouts/AuthoringMainToolBar.js +56 -0
  562. package/react/components/Layouts/BottomBarAction.d.ts +12 -0
  563. package/react/components/Layouts/BottomBarAction.js +59 -0
  564. package/react/components/Layouts/Container.d.ts +14 -0
  565. package/react/components/Layouts/Container.js +62 -0
  566. package/react/components/Layouts/ContentSplitter.d.ts +10 -0
  567. package/react/components/Layouts/ContentSplitter.js +58 -0
  568. package/react/components/Layouts/CoreLayout.d.ts +19 -0
  569. package/react/components/Layouts/CoreLayout.js +55 -0
  570. package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
  571. package/react/components/Layouts/CoreLayoutContainer.js +49 -0
  572. package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
  573. package/react/components/Layouts/CoreLayoutFooter.js +49 -0
  574. package/react/components/Layouts/CoreLayoutMain.d.ts +9 -0
  575. package/react/components/Layouts/CoreLayoutMain.js +49 -0
  576. package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
  577. package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
  578. package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
  579. package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
  580. package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
  581. package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
  582. package/react/components/Layouts/HamburgerButton.d.ts +14 -0
  583. package/react/components/Layouts/HamburgerButton.js +63 -0
  584. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  585. package/react/components/Layouts/HeaderPanel.js +49 -0
  586. package/react/components/Layouts/Layout.d.ts +8 -0
  587. package/react/components/Layouts/Layout.js +36 -0
  588. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  589. package/react/components/Layouts/LayoutContainer.js +49 -0
  590. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  591. package/react/components/Layouts/LeftPanel.js +56 -0
  592. package/react/components/Layouts/MainMenu.d.ts +41 -0
  593. package/react/components/Layouts/MainMenu.js +103 -0
  594. package/react/components/Layouts/MainPanel.d.ts +11 -0
  595. package/react/components/Layouts/MainPanel.js +59 -0
  596. package/react/components/Layouts/NotificationPanel.d.ts +45 -0
  597. package/react/components/Layouts/NotificationPanel.js +110 -0
  598. package/react/components/Layouts/OverlayPanel.d.ts +8 -0
  599. package/react/components/Layouts/OverlayPanel.js +51 -0
  600. package/react/components/Layouts/PageLayout.d.ts +16 -0
  601. package/react/components/Layouts/PageLayout.js +66 -0
  602. package/react/components/Layouts/Panel.d.ts +66 -0
  603. package/react/components/Layouts/Panel.js +168 -0
  604. package/react/components/Layouts/RightPanel.d.ts +9 -0
  605. package/react/components/Layouts/RightPanel.js +49 -0
  606. package/react/components/Layouts/index.d.ts +39 -0
  607. package/react/components/Layouts/index.js +86 -0
  608. package/react/components/LeftMenu.d.ts +13 -4
  609. package/react/components/LeftMenu.js +71 -18
  610. package/react/components/ListItemLoader.d.ts +4 -0
  611. package/react/components/ListItemLoader.js +64 -0
  612. package/react/components/Lists/BoxedList.d.ts +44 -0
  613. package/react/components/Lists/BoxedList.js +160 -0
  614. package/react/components/Lists/ContentList.d.ts +45 -0
  615. package/react/components/Lists/ContentList.js +85 -0
  616. package/react/components/Lists/SimpleList.d.ts +21 -0
  617. package/react/components/Lists/SimpleList.js +80 -0
  618. package/react/components/Lists/TableList.d.ts +42 -0
  619. package/react/components/Lists/TableList.js +145 -0
  620. package/react/components/Lists/index.d.ts +2 -0
  621. package/react/components/Lists/index.js +10 -0
  622. package/react/components/Loader.js +4 -2
  623. package/react/components/Menu.d.ts +2 -1
  624. package/react/components/Menu.js +48 -12
  625. package/react/components/Modal.d.ts +4 -1
  626. package/react/components/Modal.js +35 -6
  627. package/react/components/NavButton.d.ts +1 -0
  628. package/react/components/NavButton.js +9 -4
  629. package/react/components/Navigation/BottomNav.d.ts +24 -0
  630. package/react/components/Navigation/BottomNav.js +88 -0
  631. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  632. package/react/components/Navigation/QuickNavBar.js +117 -0
  633. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  634. package/react/components/Navigation/SideBarMenu.js +79 -0
  635. package/react/components/Navigation/SideBarTabs.d.ts +23 -0
  636. package/react/components/Navigation/SideBarTabs.js +88 -0
  637. package/react/components/Navigation/index.d.ts +3 -0
  638. package/react/components/Navigation/index.js +9 -0
  639. package/react/components/Popover.js +4 -2
  640. package/react/components/PropsList.js +4 -2
  641. package/react/components/RadioButtonGroup.d.ts +29 -0
  642. package/react/components/RadioButtonGroup.js +91 -0
  643. package/react/components/RadioGroup.d.ts +24 -0
  644. package/react/components/{Radio.js → RadioGroup.js} +20 -14
  645. package/react/components/SearchBar.d.ts +24 -0
  646. package/react/components/SearchBar.js +105 -0
  647. package/react/components/Select.d.ts +9 -2
  648. package/react/components/Select.js +9 -20
  649. package/react/components/SelectGrid.d.ts +45 -0
  650. package/react/components/SelectGrid.js +200 -0
  651. package/react/components/SelectWithTemplate.d.ts +11 -1
  652. package/react/components/SelectWithTemplate.js +23 -12
  653. package/react/components/Skeleton.d.ts +30 -0
  654. package/react/components/Skeleton.js +76 -0
  655. package/react/components/SlidingToolbar.d.ts +1 -1
  656. package/react/components/SlidingToolbar.js +15 -3
  657. package/react/components/Spinner.d.ts +11 -0
  658. package/react/components/Spinner.js +71 -0
  659. package/react/components/StrechBar.js +4 -2
  660. package/react/components/SubNav.d.ts +8 -1
  661. package/react/components/SubNav.js +28 -8
  662. package/react/components/Switch.d.ts +4 -1
  663. package/react/components/Switch.js +25 -11
  664. package/react/components/SwitchGroup.d.ts +1 -0
  665. package/react/components/SwitchGroup.js +6 -4
  666. package/react/components/TabCustom.d.ts +0 -1
  667. package/react/components/TabCustom.js +11 -7
  668. package/react/components/TabList.js +6 -4
  669. package/react/components/Tag.d.ts +3 -2
  670. package/react/components/Tag.js +21 -9
  671. package/react/components/TagInput.d.ts +0 -1
  672. package/react/components/TagInput.js +7 -6
  673. package/react/components/TagInputTest.js +13 -9
  674. package/react/components/Text/Heading.d.ts +15 -0
  675. package/react/components/Text/Heading.js +79 -0
  676. package/react/components/Text/Text.d.ts +15 -0
  677. package/react/components/Text/Text.js +67 -0
  678. package/react/components/Text/Time.d.ts +15 -0
  679. package/react/components/Text/Time.js +65 -0
  680. package/react/components/ThemeSelector.d.ts +21 -0
  681. package/react/components/ThemeSelector.js +114 -0
  682. package/react/components/TimePicker.d.ts +16 -2
  683. package/react/components/TimePicker.js +19 -6
  684. package/react/components/Toast.js +1 -1
  685. package/react/components/ToastMessage.js +6 -5
  686. package/react/components/ToastText.js +1 -1
  687. package/react/components/ToastWrapper.d.ts +2 -2
  688. package/react/components/ToastWrapper.js +14 -10
  689. package/react/components/Togglebox.d.ts +2 -1
  690. package/react/components/Togglebox.js +42 -14
  691. package/react/components/Tooltip.d.ts +1 -0
  692. package/react/components/Tooltip.js +14 -10
  693. package/react/components/TreeSelect.d.ts +75 -0
  694. package/react/components/TreeSelect.js +448 -0
  695. package/react/components/WithSizeObserver.d.ts +25 -0
  696. package/react/components/WithSizeObserver.js +95 -0
  697. package/react/components/_Positioner.js +4 -2
  698. package/react/helpers.d.ts +1 -0
  699. package/react/helpers.js +7 -0
  700. package/react/index.d.ts +27 -3
  701. package/react/index.js +63 -4
  702. package/yarn-error.log +111 -0
  703. package/app/styles/variables/_design-tokens-general.scss +0 -136
  704. package/app-typescript/components/Radio.tsx +0 -57
  705. package/app-typescript/components/RadioButton.tsx +0 -57
  706. package/dist/react/Radios.tsx +0 -391
  707. package/examples/pages/react/Radios.tsx +0 -391
  708. package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
  709. package/react/components/RadioButton.js +0 -65
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as Components from './components/Index';
3
- import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioButton, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
3
+ import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioButtonGroup, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
4
4
  import * as GridElements from '../../../../app-typescript/components/GridItem';
5
5
 
6
6
  import dummy_items from '../dummy-data/items';
@@ -100,7 +100,7 @@ export class SamsPlayground extends React.Component<IProps, IState> {
100
100
  </ButtonGroup>
101
101
  <Components.SearchBar placeholder='Search media'></Components.SearchBar>
102
102
 
103
- <ButtonGroup align='right'>
103
+ <ButtonGroup align='end'>
104
104
  <NavButton icon='dots-vertical' onClick={() => false} />
105
105
  </ButtonGroup>
106
106
  </SubNav>
@@ -108,14 +108,14 @@ export class SamsPlayground extends React.Component<IProps, IState> {
108
108
  <ButtonGroup align='inline'>
109
109
  <NavButton icon='filter-large' onClick={this.handleFilter} />
110
110
  </ButtonGroup>
111
- <CheckButtonGroup padded>
112
- <RadioButton value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })} options={[
113
- { value: 'itemtype01', label: 'All item types' },
114
- { value: 'itemtype02', label: 'Images only' },
115
- { value: 'itemtype03', label: 'Videos only' },
116
- { value: 'itemtype04', label: 'Documents only' }]} />
117
- </CheckButtonGroup>
118
- <ButtonGroup align='right'>
111
+ <RadioButtonGroup value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })}
112
+ options={[
113
+ { value: 'itemtype01', label: 'All item types' },
114
+ { value: 'itemtype02', label: 'Images only' },
115
+ { value: 'itemtype03', label: 'Videos only' },
116
+ { value: 'itemtype04', label: 'Documents only' }
117
+ ]} group={{padded: true}} />
118
+ <ButtonGroup align='end' spaces='no-space'>
119
119
  <Dropdown
120
120
  items={[
121
121
  {
@@ -141,7 +141,10 @@ export class SamsPlayground extends React.Component<IProps, IState> {
141
141
  <Components.PanelContentBlock>
142
142
  <div className="form__group">
143
143
  <div className="form__item">
144
- <Input label='Title'
144
+ <Input
145
+ label='Title'
146
+ type='text'
147
+ value=''
145
148
  error='This is error message'
146
149
  inlineLabel={false}
147
150
  disabled={false}
@@ -167,7 +170,10 @@ export class SamsPlayground extends React.Component<IProps, IState> {
167
170
 
168
171
  <div className="form__group">
169
172
  <div className="form__item">
170
- <Input label='Keyword'
173
+ <Input
174
+ label='Keyword'
175
+ type='text'
176
+ value=''
171
177
  error='This is error message'
172
178
  inlineLabel={false}
173
179
  disabled={false}
@@ -232,8 +238,11 @@ export class SamsPlayground extends React.Component<IProps, IState> {
232
238
  <Badge text={item.urgency} color={item.urgencyColor} />
233
239
  <Badge text={item.priority} shape='square' color={item.priorityColor} />
234
240
  </GridElements.GridItemFooterBlock>
241
+ <GridElements.GridItemFooterBlock align='right'>
242
+ <Label type='success' style='translucent' text='In progress' />
243
+ </GridElements.GridItemFooterBlock>
235
244
  <GridElements.GridItemFooterActions>
236
- <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
245
+ <IconButton size='small' icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
237
246
  </GridElements.GridItemFooterActions>
238
247
  </GridElements.GridItemFooter>
239
248
  </GridElements.GridItem>
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as Components from './components/Index';
3
- import { Checkbox, Radio, CheckboxButton, RadioButton, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge } from '../../../../app-typescript/index';
3
+ import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase, Text, FormRowNew } from '../../../../app-typescript/index';
4
4
  import { Carousel } from '../../../../app-typescript/index';
5
5
  import * as GridElements from '../../../../app-typescript/components/GridItem';
6
6
 
@@ -16,10 +16,16 @@ interface IState {
16
16
  itemSelected1: boolean;
17
17
  itemSelected2: boolean;
18
18
  itemSelected3: boolean;
19
- value1: boolean;
20
- value2: boolean;
21
- value3: boolean;
22
- value4: boolean;
19
+ value1?: string;
20
+ value2?: string;
21
+ value3?: string;
22
+ value4?: string;
23
+ value5?: string;
24
+ value6?: string;
25
+ selctedTheme: string;
26
+ invalid: boolean;
27
+ date: any;
28
+ time: string;
23
29
  }
24
30
 
25
31
  export class TestGround extends React.Component<IProps, IState> {
@@ -30,10 +36,16 @@ export class TestGround extends React.Component<IProps, IState> {
30
36
  itemSelected1: false,
31
37
  itemSelected2: false,
32
38
  itemSelected3: false,
33
- value1: false,
34
- value2: false,
35
- value3: false,
36
- value4: false,
39
+ value1: undefined,
40
+ value2: undefined,
41
+ value3: undefined,
42
+ value4: undefined,
43
+ value5: undefined,
44
+ value6: undefined,
45
+ selctedTheme: 'light',
46
+ invalid: false,
47
+ date: '01/08/2022',
48
+ time: '16:50',
37
49
  }
38
50
  }
39
51
 
@@ -50,17 +62,357 @@ export class TestGround extends React.Component<IProps, IState> {
50
62
  <Components.Layout header='Testing Ground'>
51
63
  <Components.LayoutContainer>
52
64
  <Components.MainPanel>
65
+ <InputNew
66
+ label='test'
67
+ value=''
68
+ onChange={(value) => false}
69
+ placeholder='test'
70
+ required={true}
71
+ info='Nullam Sollicitudin'
72
+ maxLength={20}
73
+ error='Error message'
74
+ inlineLabel={true}
75
+ labelHidden={true}
76
+ type='text' />
77
+
78
+ <hr />
79
+ <div className='form__group-new'>
80
+ <Input
81
+ value=''
82
+ onChange={(value) => {}}
83
+ type='text'
84
+ label='Text input'
85
+ placeholder='Enter text'
86
+ disabled={true} />
87
+ <Input value=''
88
+ onChange={(value) => {}}
89
+ type='text'
90
+ label='Text input'
91
+ placeholder='Enter text'
92
+ disabled={true} />
93
+ <DatePicker
94
+ value={this.state.date}
95
+ onChange={(date) => {
96
+ this.setState({date});
97
+ }}
98
+ disabled={true}
99
+ dateFormat="DD-MM-YYYY"
100
+ label='Date'
101
+ info='Nullam Sollicitudin'
102
+ error='Error message'
103
+ inlineLabel={false}
104
+ shortcuts={[
105
+ {label: 'tomorrow', days: 1},
106
+ {label: 'yesterday', days: -1},
107
+ ]}
108
+ />
109
+ <TimePicker
110
+ value={this.state.time}
111
+ disabled={true}
112
+ required={true}
113
+ label='Time'
114
+ onChange={(time) => {
115
+ this.setState({time});
116
+ }}
117
+ />
118
+ <Button text="Clear" onClick={()=> false} />
119
+ <Button text="Cancel" onClick={()=> false} />
120
+ <Button text="Save" type='primary' onClick={()=> false} />
121
+ </div>
122
+ <hr />
123
+
124
+ <FormRowNew rowLabel='My group label' inlineLabels={true}>
125
+ <Input
126
+ value=''
127
+ onChange={(value) => {}}
128
+ type='text'
129
+ label='Text input'
130
+ placeholder='Enter text'
131
+ inlineLabel={true}
132
+ labelHidden={true}
133
+ disabled={false} />
134
+ <Text size='small' align='center'>To:</Text>
135
+ <Input
136
+ value=''
137
+ onChange={(value) => {}}
138
+ type='text'
139
+ label='Text input'
140
+ placeholder='Enter text'
141
+ inlineLabel={true}
142
+ labelHidden={true}
143
+ disabled={false} />
144
+ <DatePicker
145
+ value={this.state.date}
146
+ onChange={(date) => {
147
+ this.setState({date});
148
+ }}
149
+ // disabled={true}
150
+ dateFormat="DD-MM-YYYY"
151
+ label='Date'
152
+ info='Nullam Sollicitudin'
153
+ error='Error message'
154
+ inlineLabel={true}
155
+ labelHidden={true}
156
+ shortcuts={[
157
+ {label: 'tomorrow', days: 1},
158
+ {label: 'yesterday', days: -1},
159
+ ]}
160
+ />
161
+ <TimePicker
162
+ value={this.state.time}
163
+ // disabled={true}
164
+ required={true}
165
+ inlineLabel={true}
166
+ labelHidden={true}
167
+ label='Time'
168
+ onChange={(time) => {
169
+ this.setState({time});
170
+ }}
171
+ />
172
+ <Button text="Save" type='primary' onClick={()=> false} />
173
+ </FormRowNew>
174
+
175
+ <hr />
176
+
177
+ <FormRowNew>
178
+ <Input
179
+ value=''
180
+ onChange={(value) => {}}
181
+ type='text'
182
+ label='Text input'
183
+ placeholder='Enter text'
184
+ disabled={false} />
185
+ <Text size='small' align='center'>To:</Text>
186
+ <Input
187
+ value=''
188
+ onChange={(value) => {}}
189
+ type='text'
190
+ label='Text input'
191
+ placeholder='Enter text'
192
+ labelHidden={true}
193
+ disabled={false} />
194
+ <DatePicker
195
+ value={this.state.date}
196
+ onChange={(date) => {
197
+ this.setState({date});
198
+ }}
199
+ // disabled={true}
200
+ dateFormat="DD-MM-YYYY"
201
+ label='Date'
202
+ info='Nullam Sollicitudin'
203
+ error='Error message'
204
+ inlineLabel={false}
205
+ shortcuts={[
206
+ {label: 'tomorrow', days: 1},
207
+ {label: 'yesterday', days: -1},
208
+ ]}
209
+ />
210
+ <TimePicker
211
+ value={this.state.time}
212
+ // disabled={true}
213
+ required={true}
214
+ label='Time'
215
+ onChange={(time) => {
216
+ this.setState({time});
217
+ }}
218
+ />
219
+ <Button text="Save" type='primary' onClick={()=> false} />
220
+ </FormRowNew>
221
+
222
+ <hr />
223
+ <h3 className="docs-page__h3 sd-margin-y--0">Table list</h3>
224
+ <hr />
225
+ <ul className='table-list'>
226
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
227
+ <div className='table-list__item-content'>
228
+ <div className='table-list__item-content-block'>
229
+ <Label style='translucent' text='aacc' />
230
+ <Label style='translucent' type='primary' text='prlg' />
231
+ </div>
232
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
233
+ <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
234
+ </div>
235
+ <div className='table-list__item-content-block'>
236
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
237
+ </div>
238
+ </div>
239
+ <div className='table-list__slide-in-actions'>
240
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
241
+ </div>
242
+ </li>
243
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
244
+ <div className='table-list__item-content'>
245
+ <div className='table-list__item-content-block'>
246
+ <Label style='translucent' type='warning' text='pokr' />
247
+ <Label style='translucent' text='slika' />
248
+ </div>
249
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
250
+ <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
251
+ </div>
252
+ <div className='table-list__item-content-block'>
253
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
254
+ </div>
255
+ </div>
256
+ <div className='table-list__slide-in-actions'>
257
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
258
+ </div>
259
+ </li>
260
+ <li className='table-list__item table-list__item--clickable'>
261
+ <div className='table-list__item-content'>
262
+ <div className='table-list__item-content-block'>
263
+ <Label style='translucent' type='warning' text='pokr' />
264
+ <Label style='translucent' text='slika' />
265
+ </div>
266
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
267
+ <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
268
+ </div>
269
+ <div className='table-list__item-content-block'>
270
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
271
+ </div>
272
+ </div>
273
+ <div className='table-list__slide-in-actions'>
274
+ <IconButton icon='pencil' size='small' ariaValue='More actions' onClick={()=> false} />
275
+ <IconButton icon='trash' size='small' ariaValue='More actions' onClick={()=> false} />
276
+ </div>
277
+ </li>
278
+ <li className='table-list__item table-list__item--clickable table-list__item--selected'>
279
+ <div className='table-list__item-content'>
280
+ <div className='table-list__item-content-block'>
281
+ <Label style='translucent' type='warning' text='pokr' />
282
+ <Label style='translucent' text='slika' />
283
+ </div>
284
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
285
+ <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
286
+ </div>
287
+ <div className='table-list__item-content-block'>
288
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
289
+ </div>
290
+ </div>
291
+ <div className='table-list__slide-in-actions'>
292
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
293
+ </div>
294
+ </li>
295
+ <li className='table-list__item table-list__item--clickable'>
296
+ <div className='table-list__item-content'>
297
+ <div className='table-list__item-content-block'>
298
+ <Label style='translucent' type='warning' text='pokr' />
299
+ <Label style='translucent' text='slika' />
300
+ </div>
301
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
302
+ <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
303
+ </div>
304
+ <div className='table-list__item-content-block'>
305
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
306
+ </div>
307
+ </div>
308
+ <div className='table-list__slide-in-actions'>
309
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
310
+ </div>
311
+ </li>
312
+ </ul>
313
+
314
+ <h3 className="docs-page__h3 sd-margin-y--0 sd-margin-t--3">Table list with items between</h3>
315
+ <hr />
316
+ <ul className='table-list table-list--contained'>
317
+ <li className='table-list__item-container'>
318
+ <div className='table-list__item table-list__item--clickable table-list__item--draggable'>
319
+ <div className='table-list__item-content'>
320
+ <div className='table-list__item-content-block'>
321
+ <Label style='translucent' text='aacc' />
322
+ <Label style='translucent' type='primary' text='prlg' />
323
+ </div>
324
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
325
+ <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
326
+ </div>
327
+ <div className='table-list__item-content-block'>
328
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
329
+ </div>
330
+ </div>
331
+ <div className='table-list__slide-in-actions'>
332
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
333
+ </div>
334
+ </div>
335
+
336
+ <div className='table-list__add-bar-container'>
337
+ <Tooltip text='Add item' flow='top' appendToBody={true}>
338
+ <div className='table-list__add-bar'>
339
+ <Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
340
+ </div>
341
+ </Tooltip>
342
+ </div>
343
+ </li>
344
+
345
+ <li className='table-list__item-container'>
346
+ <div className='table-list__item table-list__item--clickable table-list__item--draggable'>
347
+ <div className='table-list__item-content'>
348
+ <div className='table-list__item-content-block'>
349
+ <Label style='translucent' type='warning' text='pokr' />
350
+ <Label style='translucent' text='slika' />
351
+ </div>
352
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
353
+ <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
354
+ </div>
355
+ <div className='table-list__item-content-block'>
356
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
357
+ </div>
358
+ </div>
359
+ <div className='table-list__slide-in-actions'>
360
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
361
+ </div>
362
+ </div>
363
+
364
+ <div className='table-list__add-bar-container'>
365
+ <Tooltip text='Add item' flow='top' appendToBody={true}>
366
+ <div className='table-list__add-bar'>
367
+ <Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
368
+ </div>
369
+ </Tooltip>
370
+ </div>
371
+ </li>
372
+
373
+ <li className='table-list__item-container'>
374
+ <div className='table-list__item table-list__item--clickable table-list__item--draggable'>
375
+ <div className='table-list__item-content'>
376
+ <div className='table-list__item-content-block'>
377
+ <Label style='translucent' type='warning' text='pokr' />
378
+ <Label style='translucent' text='slika' />
379
+ </div>
380
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
381
+ <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
382
+ </div>
383
+ <div className='table-list__item-content-block'>
384
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
385
+ </div>
386
+ </div>
387
+ <div className='table-list__slide-in-actions'>
388
+ <IconButton icon='pencil' size='small' ariaValue='More actions' onClick={()=> false} />
389
+ <IconButton icon='trash' size='small' ariaValue='More actions' onClick={()=> false} />
390
+ </div>
391
+ </div>
392
+
393
+ <div className='table-list__add-bar-container'>
394
+ <Tooltip text='Add item' flow='top' appendToBody={true}>
395
+ <div className='table-list__add-bar'>
396
+ <Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
397
+ </div>
398
+ </Tooltip>
399
+ </div>
400
+ </li>
401
+ </ul>
402
+
403
+ <hr /><hr />
404
+
53
405
  <h3 className="docs-page__h3 sd-margin-y--0">Checkbox</h3>
54
406
  <hr />
55
407
  <div className="sd-check__group-new sd-check__group-new--vertical">
56
408
  <Checkbox label={{text: 'Label side not defined'}} onChange={(value) => console.log('value changed', value)} />
57
- <Checkbox label={{text: 'Defined label side - right', side: 'right'}} onChange={(value) => console.log('value changed', value)} />
409
+ <Checkbox label={{text: 'Defined label side - right', side: 'end'}} onChange={(value) => console.log('value changed', value)} />
58
410
  <Checkbox label={{text: 'This checkbox is disabled'}} onChange={(value) => console.log('value changed', value)} disabled={true}/>
59
411
  </div>
60
412
 
61
413
  <hr />
62
414
 
63
- <Checkbox label={{text: 'Defined label side - left', side: 'left'}} onChange={(value) => console.log('value changed', value)} />
415
+ <Checkbox label={{text: 'Defined label side - left', side: 'start'}} onChange={(value) => console.log('value changed', value)} />
64
416
 
65
417
  <hr />
66
418
 
@@ -68,38 +420,74 @@ export class TestGround extends React.Component<IProps, IState> {
68
420
 
69
421
  <hr />
70
422
 
71
- <div className="sd-check__group-new sd-check-button__group--left">
423
+ <div className="sd-check-button__group sd-check-button__group--start">
72
424
  <CheckboxButton label={{text: 'CheckboxButton rules!'}} onChange={(value) => console.log('value changed', value)} />
73
425
  <CheckboxButton label={{text: 'CheckboxButton rules again!', icon: 'th'}} onChange={(value) => console.log('value changed', value)} />
74
426
  <CheckboxButton label={{text: 'Hell yeah!'}} onChange={(value) => console.log('value changed', value)} />
75
427
  </div>
76
428
 
77
429
  <hr /><hr />
430
+ <h3 className="docs-page__h3 sd-margin-y--0 sd-margin-b--3">Duration input</h3>
431
+
432
+
433
+ <div className="sd-input">
434
+ <label className="sd-input__label" id="duration01">Input label</label>
435
+ <div className="sd-input__duration-input" id="id06" aria-describedby="duration01">
436
+ <input type="number" className="" placeholder='00'/>
437
+ <span className="sd-input__suffix">h</span>
438
+ <input type="number" className="" placeholder='00'/>
439
+ <span className="sd-input__suffix">m</span>
440
+ <input type="number" className="" placeholder='00'/>
441
+ <span className="sd-input__suffix">s</span>
442
+ </div>
443
+ <div className="sd-input__char-count">0 / 30</div>
444
+ <div className="sd-input__message-box">
445
+ <div className="sd-input__hint">This is some hint message</div>
446
+ </div>
447
+ </div>
448
+
449
+ <h3 className="docs-page__h3 sd-margin-y--0 sd-margin-b--3">testiramt</h3>
450
+
451
+
452
+ <div className="sd-input">
453
+ <label className="sd-input__label" id="duration01">Input label</label>
454
+ {/* temp */}
455
+ <div id="pr_id_1" className="p-dropdown p-component p-inputwrapper p-dropdown-clearable"><div className="p-hidden-accessible"><input type="text" aria-haspopup="listbox" /></div><div className="p-hidden-accessible p-dropdown-hidden-select"><select aria-hidden="true"><option value=""> </option></select></div><span className="p-dropdown-label p-inputtext p-placeholder"><div>Select a color</div></span><div className="p-dropdown-trigger" role="button" aria-haspopup="listbox" aria-expanded="false"><span className="p-dropdown-trigger-icon pi pi-chevron-down p-clickable"></span></div></div>
456
+ {/* temp */}
457
+
458
+
459
+ <div className="sd-input__char-count">0 / 30</div>
460
+ <div className="sd-input__message-box">
461
+ <div className="sd-input__hint">This is some hint message</div>
462
+ </div>
463
+ </div>
464
+
465
+ <hr />
78
466
 
79
467
  <h3 className="docs-page__h3 sd-margin-t--2 sd-margin-b--0">Radio</h3>
80
468
  <hr />
81
469
  <div className="sd-check__group-new">
82
- <Radio options={[
83
- {label: "Radio 1", value: "Value 1"},
84
- {label: "Radio 2", value: "Value 2"},
85
- {label: "Radio 3", value: "Value 3"},
86
- ]} onChange={(value) => console.log('value changed', value)} />
470
+ <RadioGroup value={this.state.value2} options={[
471
+ {label: "Radio 1", value: "somevalue1"},
472
+ {label: "Radio 2", value: "somevalue2"},
473
+ {label: "Radio 3", value: "somevalue3"},
474
+ ]} onChange={(value) => this.setState(() => ({ value2: value }))} />
87
475
  </div>
88
476
 
89
477
  <hr />
90
478
 
91
479
  <div className="sd-check__group-new sd-check-button__group--left">
92
- <RadioButton options={[
93
- {label: "RadioButton with an icon", value: "Value 1", icon: "th-list"},
94
- {label: "RadioButton with no visible text, only an icon", value: "Value 2", icon: "th", labelHidden: true},
95
- {label: "Normal RadioButton", value: "Value 3"},
96
- ]} onChange={(value) => console.log('value changed', value)} />
480
+ <RadioButtonGroup value={this.state.value3} options={[
481
+ {label: "RadioButton with an icon", value: "somevalue4", icon: "th-list"},
482
+ {label: "RadioButton with no visible text, only an icon", value: "somevalue5", icon: "th", labelHidden: true},
483
+ {label: "Normal RadioButton", value: "somevalue6"},
484
+ ]} onChange={(value) => this.setState(() => ({ value3: value }))} />
97
485
  </div>
98
486
 
99
487
 
100
488
  <hr />
101
489
 
102
- <Carousel></Carousel>
490
+ {/* <Carousel></Carousel> */}
103
491
 
104
492
  <hr />
105
493
  <div className="sd-thumb-carousel" data-theme="dark-ui">
@@ -156,6 +544,52 @@ export class TestGround extends React.Component<IProps, IState> {
156
544
  parturient montes, nascetur ridiculus mus.
157
545
  </div>
158
546
  </div>
547
+ <hr />
548
+ <div className="button-group button-group--comfort">
549
+ <div className="color-swatch colour-test--1"></div>
550
+ <div className="color-swatch colour-test--2"></div>
551
+ <Spinner />
552
+ </div>
553
+
554
+ <hr />
555
+ <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
556
+ <ThemeSelector size='small' options={[
557
+ {label: 'Light', value: 'light', theme: 'light'},
558
+ {label: 'Dark', value: 'dark', theme: 'dark'},
559
+ {label: 'High Contrast', value: 'high-contrast', theme: 'contrast-light', disabled: true},
560
+ ]} onChange={($event)=>{this.setState({selctedTheme: $event})}} value={this.state.selctedTheme} />
561
+ </Container>
562
+ <hr />
563
+ <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
564
+ <Button text="Exit" type='primary' onClick={()=> false} />
565
+ <Divider />
566
+ <Button text="Cancel" onClick={()=> false} />
567
+ <Divider />
568
+ <Button text="Save" type='primary' onClick={()=> false} />
569
+ </Container>
570
+ <hr />
571
+ <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
572
+
573
+ <InputWrapper
574
+ label="Label"
575
+ invalid={false}>
576
+ <input type='text' />
577
+ </InputWrapper>
578
+ </Container>
579
+ <hr />
580
+ <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
581
+ <div className='sd-dropzone__drop-target'>
582
+ <div className='sd-dropzone__target-border'></div>
583
+ <figure className='sd-dropzone__icon'>
584
+ <Icon name='upload-alt' size='big' />
585
+ </figure>
586
+ <h4 className='sd-dropzone__heading'>
587
+ Upload files
588
+ </h4>
589
+ <p className='sd-dropzone__description'>Drag one or more files here to upload them, or just click the button below.</p>
590
+ <button className='btn btn--hollow sd-dropzone__action'>Attach files</button>
591
+ </div>
592
+ </Container>
159
593
  </Components.MainPanel>
160
594
  {/* MAIN CONTENT (Monitoring) */}
161
595
  </Components.LayoutContainer>