superdesk-ui-framework 2.4.21 → 3.0.0-rc12

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