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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (486) hide show
  1. package/.vscode/settings.json +5 -0
  2. package/app/fonts/sd_big-icons.eot +0 -0
  3. package/app/fonts/sd_big-icons.svg +55 -53
  4. package/app/fonts/sd_big-icons.ttf +0 -0
  5. package/app/fonts/sd_big-icons.woff +0 -0
  6. package/app/fonts/sd_icons.eot +0 -0
  7. package/app/fonts/sd_icons.svg +15 -7
  8. package/app/fonts/sd_icons.ttf +0 -0
  9. package/app/fonts/sd_icons.woff +0 -0
  10. package/app/img/SD-logo.svg +52 -0
  11. package/app/img/dots.svg +3 -0
  12. package/app/styles/_accessibility.scss +4 -3
  13. package/app/styles/_big-icon-font.scss +63 -23
  14. package/app/styles/_boxed-list.scss +29 -3
  15. package/app/styles/_buttons.scss +4 -0
  16. package/app/styles/_hamburger.scss +160 -0
  17. package/app/styles/_helpers.scss +15 -7
  18. package/app/styles/_icon-font.scss +351 -307
  19. package/app/styles/_icon-labels.scss +66 -10
  20. package/app/styles/_sd-tag-input.scss +221 -296
  21. package/app/styles/_table-list.scss +244 -0
  22. package/app/styles/app.scss +4 -0
  23. package/app/styles/components/_list-item.scss +37 -21
  24. package/app/styles/components/_sd-dropzone.scss +52 -16
  25. package/app/styles/components/_sd-grid-item.scss +30 -16
  26. package/app/styles/components/_sd-notification-panel.scss +48 -0
  27. package/app/styles/components/_sd-photo-preview.scss +1 -1
  28. package/app/styles/components/_sd-searchbar.scss +7 -0
  29. package/app/styles/components/_subnav.scss +87 -80
  30. package/app/styles/design-tokens/_design-tokens-general.scss +10 -6
  31. package/app/styles/design-tokens/_new-colors.scss +10 -3
  32. package/app/styles/form-elements/_forms-general.scss +81 -7
  33. package/app/styles/form-elements/_inputs.scss +372 -62
  34. package/app/styles/grids/_grid-layout.scss +163 -45
  35. package/app/styles/layout/_basic-layout.scss +2 -2
  36. package/app/styles/layout/_container.scss +3 -0
  37. package/app/styles/layout/_editor.scss +109 -17
  38. package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
  39. package/app/styles/menus/_sd-left-navigation.scss +24 -1
  40. package/app/styles/menus/_sd-sidebar-menu.scss +16 -14
  41. package/app/styles/menus/_sd-top-menu.scss +19 -5
  42. package/app/styles/primereact/_pr-dialog.scss +39 -7
  43. package/app/styles/primereact/_pr-dropdown.scss +17 -3
  44. package/app-typescript/components/Badge.tsx +3 -2
  45. package/app-typescript/components/CreateButton.tsx +38 -0
  46. package/app-typescript/components/DatePicker.tsx +71 -36
  47. package/app-typescript/components/DonutChart.tsx +1 -1
  48. package/app-typescript/components/DropZone.tsx +4 -4
  49. package/app-typescript/components/DurationInput.tsx +375 -0
  50. package/app-typescript/components/EmptyState.tsx +2 -1
  51. package/app-typescript/components/Form/FormRowNew.tsx +41 -0
  52. package/app-typescript/components/Form/InputBase.tsx +85 -0
  53. package/app-typescript/components/Form/InputNew.tsx +107 -0
  54. package/app-typescript/components/Form/InputWrapper.tsx +79 -0
  55. package/app-typescript/components/Form/index.tsx +4 -0
  56. package/app-typescript/components/Icon.tsx +4 -2
  57. package/app-typescript/components/IconButton.tsx +5 -1
  58. package/app-typescript/components/IconLabel.tsx +8 -1
  59. package/app-typescript/components/Input.tsx +40 -41
  60. package/app-typescript/components/Label.tsx +49 -10
  61. package/app-typescript/components/Layouts/AuthoringContainer.tsx +28 -0
  62. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +2 -0
  63. package/app-typescript/components/Layouts/AuthoringMain.tsx +11 -7
  64. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +7 -1
  65. package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
  66. package/app-typescript/components/Layouts/Container.tsx +1 -1
  67. package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
  68. package/app-typescript/components/Layouts/CoreLayout.tsx +62 -0
  69. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
  70. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
  71. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +16 -0
  72. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
  73. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
  74. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
  75. package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
  76. package/app-typescript/components/Layouts/Layout.tsx +33 -0
  77. package/app-typescript/components/Layouts/LayoutContainer.tsx +1 -4
  78. package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
  79. package/app-typescript/components/Layouts/MainPanel.tsx +10 -5
  80. package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
  81. package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
  82. package/app-typescript/components/Layouts/Panel.tsx +1 -0
  83. package/app-typescript/components/Layouts/index.tsx +20 -2
  84. package/app-typescript/components/LeftMenu.tsx +127 -116
  85. package/app-typescript/components/Lists/BoxedList.tsx +41 -5
  86. package/app-typescript/components/Lists/ContentList.tsx +100 -0
  87. package/app-typescript/components/Lists/TableList.tsx +212 -0
  88. package/app-typescript/components/Menu.tsx +31 -7
  89. package/app-typescript/components/Modal.tsx +31 -18
  90. package/app-typescript/components/MultiSelect.tsx +35 -5
  91. package/app-typescript/components/NavButton.tsx +4 -0
  92. package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
  93. package/app-typescript/components/Navigation/SideBarTabs.tsx +10 -0
  94. package/app-typescript/components/SearchBar.tsx +98 -0
  95. package/app-typescript/components/Select.tsx +28 -36
  96. package/app-typescript/components/SelectGrid.tsx +1 -1
  97. package/app-typescript/components/SelectWithTemplate.tsx +32 -7
  98. package/app-typescript/components/SidebarMenu.tsx +68 -0
  99. package/app-typescript/components/Skeleton.tsx +1 -1
  100. package/app-typescript/components/Spinner.tsx +1 -1
  101. package/app-typescript/components/SwitchGroup.tsx +2 -1
  102. package/app-typescript/components/Text/Time.tsx +34 -0
  103. package/app-typescript/components/TimePicker.tsx +50 -16
  104. package/app-typescript/components/Togglebox.tsx +1 -1
  105. package/app-typescript/components/Tooltip.tsx +7 -5
  106. package/app-typescript/components/TreeSelect.tsx +490 -208
  107. package/app-typescript/components/WithSizeObserver.tsx +88 -0
  108. package/app-typescript/dist/components/Alert.d.ts +16 -0
  109. package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
  110. package/app-typescript/dist/components/Avatar.d.ts +33 -0
  111. package/app-typescript/dist/components/Badge.d.ts +13 -0
  112. package/app-typescript/dist/components/Button.d.ts +23 -0
  113. package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
  114. package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
  115. package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
  116. package/app-typescript/dist/components/Checkbox.d.ts +19 -0
  117. package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
  118. package/app-typescript/dist/components/DatePicker.d.ts +37 -0
  119. package/app-typescript/dist/components/Divider.d.ts +9 -0
  120. package/app-typescript/dist/components/DonutChart.d.ts +12 -0
  121. package/app-typescript/dist/components/Dropdown.d.ts +28 -0
  122. package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
  123. package/app-typescript/dist/components/EmptyState.d.ts +11 -0
  124. package/app-typescript/dist/components/FormLabel.d.ts +9 -0
  125. package/app-typescript/dist/components/Genie.d.ts +13 -0
  126. package/app-typescript/dist/components/GridItem.d.ts +69 -0
  127. package/app-typescript/dist/components/GridList.d.ts +14 -0
  128. package/app-typescript/dist/components/HeadingText.d.ts +10 -0
  129. package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
  130. package/app-typescript/dist/components/Icon.d.ts +12 -0
  131. package/app-typescript/dist/components/IconButton.d.ts +12 -0
  132. package/app-typescript/dist/components/IconLabel.d.ts +11 -0
  133. package/app-typescript/dist/components/Input.d.ts +24 -0
  134. package/app-typescript/dist/components/Label.d.ts +15 -0
  135. package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
  136. package/app-typescript/dist/components/Loader.d.ts +8 -0
  137. package/app-typescript/dist/components/NavButton.d.ts +15 -0
  138. package/app-typescript/dist/components/Popover.d.ts +13 -0
  139. package/app-typescript/dist/components/PropsList.d.ts +15 -0
  140. package/app-typescript/dist/components/Radio.d.ts +19 -0
  141. package/app-typescript/dist/components/RadioButton.d.ts +20 -0
  142. package/app-typescript/dist/components/Select.d.ts +29 -0
  143. package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
  144. package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
  145. package/app-typescript/dist/components/StrechBar.d.ts +4 -0
  146. package/app-typescript/dist/components/SubNav.d.ts +10 -0
  147. package/app-typescript/dist/components/Switch.d.ts +12 -0
  148. package/app-typescript/dist/components/TabCustom.d.ts +25 -0
  149. package/app-typescript/dist/components/TabList.d.ts +22 -0
  150. package/app-typescript/dist/components/Tag.d.ts +9 -0
  151. package/app-typescript/dist/components/TagInput.d.ts +7 -0
  152. package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
  153. package/app-typescript/dist/components/TimePicker.d.ts +11 -0
  154. package/app-typescript/dist/components/Tooltip.d.ts +11 -0
  155. package/app-typescript/dist/components/_Positioner.d.ts +27 -0
  156. package/app-typescript/dist/index.d.ts +56 -0
  157. package/app-typescript/helpers.tsx +3 -0
  158. package/app-typescript/index.ts +10 -0
  159. package/dist/SD-logo.svg +52 -0
  160. package/dist/dots.svg +3 -0
  161. package/dist/examples.bundle.css +8803 -378
  162. package/dist/examples.bundle.js +81672 -64212
  163. package/dist/playgrounds/accessible-theme-test.html +1 -1
  164. package/dist/playgrounds/layout-test-2.html +1 -1
  165. package/dist/playgrounds/list-item-test.html +1 -1
  166. package/dist/playgrounds/master-desk.html +1 -1
  167. package/dist/playgrounds/media-carousel.html +1 -1
  168. package/dist/playgrounds/photo-desk.html +1 -1
  169. package/dist/playgrounds/planning.html +1 -1
  170. package/dist/playgrounds/publish.html +1 -1
  171. package/dist/playgrounds/publisher-content-analytics.html +1 -1
  172. package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
  173. package/dist/playgrounds/publisher-content-list-manual.html +1 -1
  174. package/dist/playgrounds/publisher-content-lists.html +1 -1
  175. package/dist/playgrounds/publisher-dashboard.html +1 -1
  176. package/dist/playgrounds/publisher-output-control.html +1 -1
  177. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +155 -0
  178. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +9 -4
  179. package/dist/playgrounds/react-playgrounds/Index.tsx +4 -1
  180. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +13 -0
  181. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +474 -0
  182. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  183. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
  184. package/dist/playgrounds/react-playgrounds/TestGround.tsx +407 -182
  185. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +4 -0
  186. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  187. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  188. package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  189. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  190. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  191. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  192. package/dist/playgrounds/swimlane-view.html +1 -1
  193. package/dist/playgrounds/toasts.html +1 -1
  194. package/dist/playgrounds/video-editor.html +1 -1
  195. package/dist/react/Badges.tsx +18 -0
  196. package/dist/react/Container.tsx +1 -1
  197. package/dist/react/ContentList.tsx +286 -0
  198. package/dist/react/CreateButton.tsx +71 -0
  199. package/dist/react/DatePicker.tsx +31 -6
  200. package/dist/react/DropZone.tsx +14 -6
  201. package/dist/react/DurationInput.tsx +104 -0
  202. package/dist/react/IconButtons.tsx +6 -6
  203. package/dist/react/IconLabels.tsx +24 -2
  204. package/dist/react/Index.tsx +25 -0
  205. package/dist/react/Inputs.tsx +290 -7
  206. package/dist/react/Labels.tsx +51 -1
  207. package/dist/react/LeftNavigations.tsx +71 -44
  208. package/dist/react/Modal.tsx +1 -0
  209. package/dist/react/MultiSelect.tsx +10 -2
  210. package/dist/react/SelectWithTemplate.tsx +6 -1
  211. package/dist/react/Selects.tsx +55 -0
  212. package/dist/react/TableList.tsx +248 -0
  213. package/dist/react/TimePicker.tsx +22 -12
  214. package/dist/react/TreeSelect.tsx +270 -48
  215. package/dist/react/WithSizeObserver.tsx +44 -0
  216. package/dist/react/tree-select/TreeSelect.tsx +273 -0
  217. package/dist/react/tree-select/example-1.tsx +71 -0
  218. package/dist/react/tree-select/example-2.tsx +59 -0
  219. package/dist/sd_big-icons.eot +0 -0
  220. package/dist/sd_big-icons.svg +55 -53
  221. package/dist/sd_big-icons.ttf +0 -0
  222. package/dist/sd_big-icons.woff +0 -0
  223. package/dist/sd_icons.eot +0 -0
  224. package/dist/sd_icons.svg +15 -7
  225. package/dist/sd_icons.ttf +0 -0
  226. package/dist/sd_icons.woff +0 -0
  227. package/dist/superdesk-ui.bundle.css +49460 -26118
  228. package/dist/superdesk-ui.bundle.js +75427 -59872
  229. package/dist/vendor.bundle.js +25029 -25029
  230. package/examples/css/docs-page.css +2 -3
  231. package/examples/index.js +12 -0
  232. package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
  233. package/examples/pages/playgrounds/layout-test-2.html +1 -1
  234. package/examples/pages/playgrounds/list-item-test.html +1 -1
  235. package/examples/pages/playgrounds/master-desk.html +1 -1
  236. package/examples/pages/playgrounds/media-carousel.html +1 -1
  237. package/examples/pages/playgrounds/photo-desk.html +1 -1
  238. package/examples/pages/playgrounds/planning.html +1 -1
  239. package/examples/pages/playgrounds/publish.html +1 -1
  240. package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
  241. package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
  242. package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
  243. package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
  244. package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
  245. package/examples/pages/playgrounds/publisher-output-control.html +1 -1
  246. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +155 -0
  247. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +9 -4
  248. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +4 -1
  249. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +13 -0
  250. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +474 -0
  251. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  252. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
  253. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +407 -182
  254. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +4 -0
  255. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  256. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  257. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  258. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  259. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  260. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  261. package/examples/pages/playgrounds/swimlane-view.html +1 -1
  262. package/examples/pages/playgrounds/toasts.html +1 -1
  263. package/examples/pages/playgrounds/video-editor.html +1 -1
  264. package/examples/pages/react/Badges.tsx +18 -0
  265. package/examples/pages/react/Container.tsx +1 -1
  266. package/examples/pages/react/ContentList.tsx +286 -0
  267. package/examples/pages/react/CreateButton.tsx +71 -0
  268. package/examples/pages/react/DatePicker.tsx +31 -6
  269. package/examples/pages/react/DropZone.tsx +14 -6
  270. package/examples/pages/react/DurationInput.tsx +104 -0
  271. package/examples/pages/react/IconButtons.tsx +6 -6
  272. package/examples/pages/react/IconLabels.tsx +24 -2
  273. package/examples/pages/react/Index.tsx +25 -0
  274. package/examples/pages/react/Inputs.tsx +290 -7
  275. package/examples/pages/react/Labels.tsx +51 -1
  276. package/examples/pages/react/LeftNavigations.tsx +71 -44
  277. package/examples/pages/react/Modal.tsx +1 -0
  278. package/examples/pages/react/MultiSelect.tsx +10 -2
  279. package/examples/pages/react/SelectWithTemplate.tsx +6 -1
  280. package/examples/pages/react/Selects.tsx +55 -0
  281. package/examples/pages/react/TableList.tsx +248 -0
  282. package/examples/pages/react/TimePicker.tsx +22 -12
  283. package/examples/pages/react/TreeSelect.tsx +270 -48
  284. package/examples/pages/react/WithSizeObserver.tsx +44 -0
  285. package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
  286. package/examples/pages/react/tree-select/example-1.tsx +71 -0
  287. package/examples/pages/react/tree-select/example-2.tsx +59 -0
  288. package/package.json +9 -8
  289. package/react/components/Alert.js +10 -8
  290. package/react/components/Autocomplete.js +16 -12
  291. package/react/components/Avatar.js +8 -6
  292. package/react/components/Badge.d.ts +1 -0
  293. package/react/components/Badge.js +9 -7
  294. package/react/components/Button.js +8 -6
  295. package/react/components/ButtonGroup.js +7 -5
  296. package/react/components/Carousel.js +4 -2
  297. package/react/components/CheckButtonGroup.js +6 -4
  298. package/react/components/CheckGroup.js +5 -3
  299. package/react/components/Checkbox.js +5 -3
  300. package/react/components/CheckboxButton.js +6 -4
  301. package/react/components/ContentDivider.js +8 -6
  302. package/react/components/CreateButton.d.ts +17 -0
  303. package/react/components/CreateButton.js +68 -0
  304. package/react/components/DatePicker.d.ts +11 -0
  305. package/react/components/DatePicker.js +44 -35
  306. package/react/components/Divider.js +6 -4
  307. package/react/components/DonutChart.d.ts +1 -1
  308. package/react/components/DonutChart.js +24 -6
  309. package/react/components/DropZone.d.ts +2 -2
  310. package/react/components/DropZone.js +8 -6
  311. package/react/components/Dropdown.js +7 -6
  312. package/react/components/DropdownFirst.js +18 -11
  313. package/react/components/DurationInput.d.ts +42 -0
  314. package/react/components/DurationInput.js +335 -0
  315. package/react/components/EmptyState.d.ts +1 -0
  316. package/react/components/EmptyState.js +8 -6
  317. package/react/components/Form/FormGroup.js +7 -5
  318. package/react/components/Form/FormItem.js +5 -3
  319. package/react/components/Form/FormLabel.js +5 -3
  320. package/react/components/Form/FormRow.js +5 -3
  321. package/react/components/Form/FormRowNew.d.ts +12 -0
  322. package/react/components/Form/FormRowNew.js +67 -0
  323. package/react/components/Form/FormText.js +4 -2
  324. package/react/components/Form/InputBase.d.ts +42 -0
  325. package/react/components/Form/InputBase.js +72 -0
  326. package/react/components/Form/InputNew.d.ts +45 -0
  327. package/react/components/Form/InputNew.js +75 -0
  328. package/react/components/Form/InputWrapper.d.ts +28 -0
  329. package/react/components/Form/InputWrapper.js +91 -0
  330. package/react/components/Form/index.d.ts +4 -0
  331. package/react/components/Form/index.js +9 -0
  332. package/react/components/FormLabel.js +5 -3
  333. package/react/components/GridItem.js +9 -7
  334. package/react/components/GridList.js +8 -6
  335. package/react/components/HeadingText.js +4 -2
  336. package/react/components/HelloWorld.js +4 -2
  337. package/react/components/Icon.d.ts +2 -1
  338. package/react/components/Icon.js +9 -6
  339. package/react/components/IconButton.js +8 -6
  340. package/react/components/IconLabel.d.ts +2 -0
  341. package/react/components/IconLabel.js +12 -7
  342. package/react/components/IconPicker.js +13 -9
  343. package/react/components/Input.d.ts +7 -2
  344. package/react/components/Input.js +16 -30
  345. package/react/components/Label.d.ts +1 -0
  346. package/react/components/Label.js +28 -10
  347. package/react/components/Layouts/AuthorinInnerSideBar.js +4 -2
  348. package/react/components/Layouts/AuthoringContainer.d.ts +12 -0
  349. package/react/components/Layouts/AuthoringContainer.js +60 -0
  350. package/react/components/Layouts/AuthoringFrame.js +4 -2
  351. package/react/components/Layouts/AuthoringFrameContainer.js +4 -2
  352. package/react/components/Layouts/AuthoringFrameLeftBar.js +4 -2
  353. package/react/components/Layouts/AuthoringFrameMain.js +4 -2
  354. package/react/components/Layouts/AuthoringFrameNavBar.js +4 -2
  355. package/react/components/Layouts/AuthoringFrameOverlay.js +4 -2
  356. package/react/components/Layouts/AuthoringFrameRightBar.js +4 -2
  357. package/react/components/Layouts/AuthoringFrameSidePanel.js +5 -3
  358. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +5 -3
  359. package/react/components/Layouts/AuthoringInnerBody.js +4 -2
  360. package/react/components/Layouts/AuthoringInnerHeader.d.ts +1 -0
  361. package/react/components/Layouts/AuthoringInnerHeader.js +10 -5
  362. package/react/components/Layouts/AuthoringMain.d.ts +3 -1
  363. package/react/components/Layouts/AuthoringMain.js +6 -4
  364. package/react/components/Layouts/AuthoringMainContainer.js +4 -2
  365. package/react/components/Layouts/AuthoringMainContent.js +4 -2
  366. package/react/components/Layouts/AuthoringMainToolBar.d.ts +1 -0
  367. package/react/components/Layouts/AuthoringMainToolBar.js +12 -3
  368. package/react/components/Layouts/BottomBarAction.d.ts +12 -0
  369. package/react/components/Layouts/BottomBarAction.js +59 -0
  370. package/react/components/Layouts/Container.d.ts +1 -1
  371. package/react/components/Layouts/Container.js +9 -7
  372. package/react/components/Layouts/ContentSplitter.d.ts +10 -0
  373. package/react/components/Layouts/ContentSplitter.js +58 -0
  374. package/react/components/Layouts/CoreLayout.d.ts +19 -0
  375. package/react/components/Layouts/CoreLayout.js +55 -0
  376. package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
  377. package/react/components/Layouts/CoreLayoutContainer.js +49 -0
  378. package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
  379. package/react/components/Layouts/CoreLayoutFooter.js +49 -0
  380. package/react/components/Layouts/CoreLayoutMain.d.ts +9 -0
  381. package/react/components/Layouts/CoreLayoutMain.js +49 -0
  382. package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
  383. package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
  384. package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
  385. package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
  386. package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
  387. package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
  388. package/react/components/Layouts/HamburgerButton.d.ts +14 -0
  389. package/react/components/Layouts/HamburgerButton.js +63 -0
  390. package/react/components/Layouts/HeaderPanel.js +4 -2
  391. package/react/components/Layouts/Layout.d.ts +8 -0
  392. package/react/components/Layouts/Layout.js +36 -0
  393. package/react/components/Layouts/LayoutContainer.js +5 -3
  394. package/react/components/Layouts/LeftPanel.js +5 -3
  395. package/react/components/Layouts/MainMenu.d.ts +41 -0
  396. package/react/components/Layouts/MainMenu.js +103 -0
  397. package/react/components/Layouts/MainPanel.d.ts +1 -0
  398. package/react/components/Layouts/MainPanel.js +15 -6
  399. package/react/components/Layouts/NotificationPanel.d.ts +45 -0
  400. package/react/components/Layouts/NotificationPanel.js +110 -0
  401. package/react/components/Layouts/OverlayPanel.d.ts +8 -0
  402. package/react/components/Layouts/OverlayPanel.js +51 -0
  403. package/react/components/Layouts/PageLayout.js +4 -2
  404. package/react/components/Layouts/Panel.d.ts +1 -0
  405. package/react/components/Layouts/Panel.js +16 -14
  406. package/react/components/Layouts/RightPanel.js +4 -2
  407. package/react/components/Layouts/index.d.ts +17 -2
  408. package/react/components/Layouts/index.js +35 -4
  409. package/react/components/LeftMenu.d.ts +5 -1
  410. package/react/components/LeftMenu.js +27 -13
  411. package/react/components/ListItemLoader.js +4 -2
  412. package/react/components/Lists/BoxedList.d.ts +8 -0
  413. package/react/components/Lists/BoxedList.js +39 -16
  414. package/react/components/Lists/ContentList.d.ts +45 -0
  415. package/react/components/Lists/ContentList.js +85 -0
  416. package/react/components/Lists/SimpleList.js +9 -7
  417. package/react/components/Lists/TableList.d.ts +42 -0
  418. package/react/components/Lists/TableList.js +145 -0
  419. package/react/components/Lists/index.js +1 -0
  420. package/react/components/Loader.js +4 -2
  421. package/react/components/Menu.d.ts +2 -1
  422. package/react/components/Menu.js +48 -12
  423. package/react/components/Modal.d.ts +4 -1
  424. package/react/components/Modal.js +35 -6
  425. package/react/components/NavButton.d.ts +1 -0
  426. package/react/components/NavButton.js +9 -4
  427. package/react/components/Navigation/BottomNav.d.ts +24 -0
  428. package/react/components/Navigation/BottomNav.js +88 -0
  429. package/react/components/Navigation/QuickNavBar.js +13 -9
  430. package/react/components/Navigation/SideBarMenu.js +4 -2
  431. package/react/components/Navigation/SideBarTabs.d.ts +1 -0
  432. package/react/components/Navigation/SideBarTabs.js +8 -2
  433. package/react/components/Navigation/index.js +1 -0
  434. package/react/components/Popover.js +4 -2
  435. package/react/components/PropsList.js +4 -2
  436. package/react/components/RadioButtonGroup.js +9 -7
  437. package/react/components/RadioGroup.js +6 -4
  438. package/react/components/SearchBar.d.ts +24 -0
  439. package/react/components/SearchBar.js +105 -0
  440. package/react/components/Select.d.ts +6 -1
  441. package/react/components/Select.js +9 -22
  442. package/react/components/SelectGrid.d.ts +1 -1
  443. package/react/components/SelectGrid.js +44 -23
  444. package/react/components/SelectWithTemplate.d.ts +11 -1
  445. package/react/components/SelectWithTemplate.js +23 -12
  446. package/react/components/Skeleton.d.ts +1 -1
  447. package/react/components/Skeleton.js +26 -5
  448. package/react/components/SlidingToolbar.js +6 -4
  449. package/react/components/Spinner.js +7 -5
  450. package/react/components/StrechBar.js +4 -2
  451. package/react/components/SubNav.js +9 -7
  452. package/react/components/Switch.js +6 -4
  453. package/react/components/SwitchGroup.d.ts +1 -0
  454. package/react/components/SwitchGroup.js +6 -4
  455. package/react/components/TabCustom.js +11 -7
  456. package/react/components/TabList.js +6 -4
  457. package/react/components/Tag.js +5 -4
  458. package/react/components/TagInput.js +7 -6
  459. package/react/components/TagInputTest.js +13 -9
  460. package/react/components/Text/Heading.js +10 -8
  461. package/react/components/Text/Text.js +10 -8
  462. package/react/components/Text/Time.d.ts +15 -0
  463. package/react/components/Text/Time.js +65 -0
  464. package/react/components/ThemeSelector.js +7 -5
  465. package/react/components/TimePicker.d.ts +16 -2
  466. package/react/components/TimePicker.js +19 -6
  467. package/react/components/Toast.js +1 -1
  468. package/react/components/ToastMessage.js +6 -5
  469. package/react/components/ToastText.js +1 -1
  470. package/react/components/ToastWrapper.d.ts +2 -2
  471. package/react/components/ToastWrapper.js +14 -10
  472. package/react/components/Togglebox.d.ts +1 -1
  473. package/react/components/Togglebox.js +36 -15
  474. package/react/components/Tooltip.d.ts +1 -0
  475. package/react/components/Tooltip.js +14 -10
  476. package/react/components/TreeSelect.d.ts +80 -0
  477. package/react/components/TreeSelect.js +494 -0
  478. package/react/components/WithSizeObserver.d.ts +25 -0
  479. package/react/components/WithSizeObserver.js +95 -0
  480. package/react/components/_Positioner.js +4 -2
  481. package/react/helpers.d.ts +1 -0
  482. package/react/helpers.js +7 -0
  483. package/react/index.d.ts +10 -0
  484. package/react/index.js +24 -1
  485. package/yarn-error.log +111 -0
  486. package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as Components from './components/Index';
3
- import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container } 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,13 +16,16 @@ interface IState {
16
16
  itemSelected1: boolean;
17
17
  itemSelected2: boolean;
18
18
  itemSelected3: boolean;
19
- value1: string;
20
- value2: string;
21
- value3: string;
22
- value4: string;
23
- value5: string;
24
- value6: string;
19
+ value1?: string;
20
+ value2?: string;
21
+ value3?: string;
22
+ value4?: string;
23
+ value5?: string;
24
+ value6?: string;
25
25
  selctedTheme: string;
26
+ invalid: boolean;
27
+ date: any;
28
+ time: string;
26
29
  }
27
30
 
28
31
  export class TestGround extends React.Component<IProps, IState> {
@@ -40,6 +43,9 @@ export class TestGround extends React.Component<IProps, IState> {
40
43
  value5: undefined,
41
44
  value6: undefined,
42
45
  selctedTheme: 'light',
46
+ invalid: false,
47
+ date: '01/08/2022',
48
+ time: '16:50',
43
49
  }
44
50
  }
45
51
 
@@ -56,6 +62,346 @@ export class TestGround extends React.Component<IProps, IState> {
56
62
  <Components.Layout header='Testing Ground'>
57
63
  <Components.LayoutContainer>
58
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
+
59
405
  <h3 className="docs-page__h3 sd-margin-y--0">Checkbox</h3>
60
406
  <hr />
61
407
  <div className="sd-check__group-new sd-check__group-new--vertical">
@@ -81,6 +427,42 @@ export class TestGround extends React.Component<IProps, IState> {
81
427
  </div>
82
428
 
83
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 />
84
466
 
85
467
  <h3 className="docs-page__h3 sd-margin-t--2 sd-margin-b--0">Radio</h3>
86
468
  <hr />
@@ -166,183 +548,9 @@ export class TestGround extends React.Component<IProps, IState> {
166
548
  <div className="button-group button-group--comfort">
167
549
  <div className="color-swatch colour-test--1"></div>
168
550
  <div className="color-swatch colour-test--2"></div>
551
+ <Spinner />
169
552
  </div>
170
- {/* <hr />
171
- <div className="sd-theme-selector__list">
172
- <div className="sd-theme-selector__item">
173
- <figure className="sd-theme-selector__item-thumb" data-theme="light-ui">
174
- <svg viewBox="0 0 156 94" xmlns="http://www.w3.org/2000/svg">
175
- <g fill="none" fillRule="evenodd">
176
- <path d="m0 0h156v94h-156z" fill="var(--sd-colour-panel-bg--100)"/>
177
- <circle cx="144" cy="33" fill="var(--color-text-lighter)" r="4"/>
178
- <rect fill="var(--sd-colour-interactive)" height="15" rx="2" width="58" x="91" y="71"/>
179
- <g fill="var(--sd-colour-btn-bg-neutral)">
180
- <rect height="15" rx="2" width="58" x="29" y="52"/>
181
- <rect height="15" rx="2" width="58" x="29" y="71"/>
182
- <rect height="15" rx="2" width="58" x="91" y="52"/>
183
- </g>
184
- <g fill="#fff">
185
- <rect height="3" rx="1.5" width="9" x="99" y="77"/>
186
- <rect height="3" rx="1.5" width="11" x="130" y="77"/>
187
- <rect height="3" rx="1.5" width="18" x="110" y="77"/>
188
- </g>
189
- <g fill="var(--color-text-light)">
190
- <rect height="3" rx="1.5" width="9" x="37" y="58"/>
191
- <rect height="3" rx="1.5" width="11" x="68" y="58"/>
192
- <rect height="3" rx="1.5" width="18" x="48" y="58"/>
193
- <rect height="3" rx="1.5" width="9" x="37" y="77"/>
194
- <rect height="3" rx="1.5" width="11" x="68" y="77"/>
195
- <rect height="3" rx="1.5" width="18" x="48" y="77"/>
196
- <rect height="3" rx="1.5" width="9" x="99" y="58"/>
197
- <rect height="3" rx="1.5" width="11" x="130" y="58"/>
198
- <rect height="3" rx="1.5" width="18" x="110" y="58"/>
199
- </g>
200
- <g fill="var(--color-text)">
201
- <rect height="4" rx="2" width="11" x="29" y="31"/>
202
- <rect height="4" rx="2" width="14" x="70" y="31"/>
203
- <rect height="4" rx="2" width="23" x="43" y="31"/>
204
- </g>
205
- <path d="m0 22h22v72h-22z" fill="var(--sd-colour-sidebar-menu--00)"/>
206
- <circle cx="11" cy="52" fill="var(--sd-colour-interactive)" r="6"/>
207
- <g fill="var(--color-icon-default)" opacity=".75">
208
- <circle cx="11" cy="34" r="6"/>
209
- <circle cx="11" cy="70" r="6"/>
210
- </g>
211
- <path d="m0 0h156v22h-156z" fill="var(--sd-colour-top-menu)"/>
212
- <path d="m0 22h156v1h-156z" fill="var(--sd-colour--shadow-line)"/>
213
- <g fill="hsla(214, 13%, 65%, 1)" opacity="1">
214
- <rect height="4" rx="2" width="11" x="31" y="9"/>
215
- <rect height="4" rx="2" width="23" x="45" y="9"/>
216
- </g>
217
- <path d="m22 44h134v1h-134z" fill="var(--sd-colour-line--medium)"/>
218
- <path d="m0 0h22v22h-22z" fill="var(--sd-colour-top-menu__btn)"/>
219
- <path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/>
220
- </g>
221
- </svg>
222
- </figure>
223
- <div className="sd-theme-selector__item-action">
224
- <input type="radio" className="sd-theme-selector__input" id="id50" name="id5" />
225
- <span className="sd-radio-new"></span>
226
- <label className="sd-theme-selector__label" htmlFor="id50">Light</label>
227
- </div>
228
- </div>
229
-
230
- <div className="sd-theme-selector__item">
231
- <figure className="sd-theme-selector__item-thumb" data-theme="dark-ui">
232
- <svg viewBox="0 0 156 94" xmlns="http://www.w3.org/2000/svg">
233
- <g fill="none" fillRule="evenodd">
234
- <path d="m0 0h156v94h-156z" fill="var(--sd-colour-panel-bg--100)"/>
235
- <circle cx="144" cy="33" fill="var(--color-text-lighter)" r="4"/>
236
- <rect fill="var(--sd-colour-interactive)" height="15" rx="2" width="58" x="91" y="71"/>
237
- <g fill="var(--sd-colour-btn-bg-neutral)">
238
- <rect height="15" rx="2" width="58" x="29" y="52"/>
239
- <rect height="15" rx="2" width="58" x="29" y="71"/>
240
- <rect height="15" rx="2" width="58" x="91" y="52"/>
241
- </g>
242
- <g fill="#fff">
243
- <rect height="3" rx="1.5" width="9" x="99" y="77"/>
244
- <rect height="3" rx="1.5" width="11" x="130" y="77"/>
245
- <rect height="3" rx="1.5" width="18" x="110" y="77"/>
246
- </g>
247
- <g fill="var(--color-text-light)">
248
- <rect height="3" rx="1.5" width="9" x="37" y="58"/>
249
- <rect height="3" rx="1.5" width="11" x="68" y="58"/>
250
- <rect height="3" rx="1.5" width="18" x="48" y="58"/>
251
- <rect height="3" rx="1.5" width="9" x="37" y="77"/>
252
- <rect height="3" rx="1.5" width="11" x="68" y="77"/>
253
- <rect height="3" rx="1.5" width="18" x="48" y="77"/>
254
- <rect height="3" rx="1.5" width="9" x="99" y="58"/>
255
- <rect height="3" rx="1.5" width="11" x="130" y="58"/>
256
- <rect height="3" rx="1.5" width="18" x="110" y="58"/>
257
- </g>
258
- <g fill="var(--color-text)">
259
- <rect height="4" rx="2" width="11" x="29" y="31"/>
260
- <rect height="4" rx="2" width="14" x="70" y="31"/>
261
- <rect height="4" rx="2" width="23" x="43" y="31"/>
262
- </g>
263
- <path d="m0 22h22v72h-22z" fill="var(--sd-colour-sidebar-menu--00)"/>
264
- <circle cx="11" cy="52" fill="var(--sd-colour-interactive)" r="6"/>
265
- <g fill="var(--color-icon-default)" opacity=".75">
266
- <circle cx="11" cy="34" r="6"/>
267
- <circle cx="11" cy="70" r="6"/>
268
- </g>
269
- <path d="m0 0h156v22h-156z" fill="var(--sd-colour-top-menu)"/>
270
- <path d="m0 22h156v1h-156z" fill="var(--sd-colour--shadow-line)"/>
271
- <g fill="hsla(214, 13%, 65%, 1)" opacity="1">
272
- <rect height="4" rx="2" width="11" x="31" y="9"/>
273
- <rect height="4" rx="2" width="23" x="45" y="9"/>
274
- </g>
275
- <path d="m22 44h134v1h-134z" fill="var(--sd-colour-line--medium)"/>
276
- <path d="m0 0h22v22h-22z" fill="var(--sd-colour-top-menu__btn)"/>
277
- <path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/>
278
- </g>
279
- </svg>
280
- </figure>
281
- <div className="sd-theme-selector__item-action">
282
- <input type="radio" className="sd-theme-selector__input" id="id50" name="id5" />
283
- <span className="sd-radio-new"></span>
284
- <label className="sd-theme-selector__label" htmlFor="id50">Dark</label>
285
- </div>
286
- </div>
287
553
 
288
- <div className="sd-theme-selector__item">
289
- <figure className="sd-theme-selector__item-thumb" data-theme="accessible-light-ui">
290
- <svg viewBox="0 0 156 94" xmlns="http://www.w3.org/2000/svg">
291
- <g fill="none" fillRule="evenodd">
292
- <path d="m0 0h156v94h-156z" fill="var(--sd-colour-panel-bg--100)"/>
293
- <circle cx="144" cy="33" fill="var(--color-text-lighter)" r="4"/>
294
- <rect fill="var(--sd-colour-interactive)" height="15" rx="2" width="58" x="91" y="71"/>
295
- <g fill="var(--sd-colour-btn-bg-neutral)">
296
- <rect height="15" rx="2" width="58" x="29" y="52"/>
297
- <rect height="15" rx="2" width="58" x="29" y="71"/>
298
- <rect height="15" rx="2" width="58" x="91" y="52"/>
299
- </g>
300
- <g fill="#fff">
301
- <rect height="3" rx="1.5" width="9" x="99" y="77"/>
302
- <rect height="3" rx="1.5" width="11" x="130" y="77"/>
303
- <rect height="3" rx="1.5" width="18" x="110" y="77"/>
304
- </g>
305
- <g fill="var(--color-text-light)">
306
- <rect height="3" rx="1.5" width="9" x="37" y="58"/>
307
- <rect height="3" rx="1.5" width="11" x="68" y="58"/>
308
- <rect height="3" rx="1.5" width="18" x="48" y="58"/>
309
- <rect height="3" rx="1.5" width="9" x="37" y="77"/>
310
- <rect height="3" rx="1.5" width="11" x="68" y="77"/>
311
- <rect height="3" rx="1.5" width="18" x="48" y="77"/>
312
- <rect height="3" rx="1.5" width="9" x="99" y="58"/>
313
- <rect height="3" rx="1.5" width="11" x="130" y="58"/>
314
- <rect height="3" rx="1.5" width="18" x="110" y="58"/>
315
- </g>
316
- <g fill="var(--color-text)">
317
- <rect height="4" rx="2" width="11" x="29" y="31"/>
318
- <rect height="4" rx="2" width="14" x="70" y="31"/>
319
- <rect height="4" rx="2" width="23" x="43" y="31"/>
320
- </g>
321
- <path d="m0 22h22v72h-22z" fill="var(--sd-colour-sidebar-menu--00)"/>
322
- <circle cx="11" cy="52" fill="var(--sd-colour-interactive)" r="6"/>
323
- <g fill="var(--color-icon-default)" opacity=".75">
324
- <circle cx="11" cy="34" r="6"/>
325
- <circle cx="11" cy="70" r="6"/>
326
- </g>
327
- <path d="m0 0h156v22h-156z" fill="var(--sd-colour-top-menu)"/>
328
- <path d="m0 22h156v1h-156z" fill="var(--sd-colour--shadow-line)"/>
329
- <g fill="hsla(214, 13%, 65%, 1)" opacity="1">
330
- <rect height="4" rx="2" width="11" x="31" y="9"/>
331
- <rect height="4" rx="2" width="23" x="45" y="9"/>
332
- </g>
333
- <path d="m22 44h134v1h-134z" fill="var(--sd-colour-line--medium)"/>
334
- <path d="m0 0h22v22h-22z" fill="var(--sd-colour-top-menu__btn)"/>
335
- <path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/>
336
- </g>
337
- </svg>
338
- </figure>
339
- <div className="sd-theme-selector__item-action">
340
- <input type="radio" className="sd-theme-selector__input" id="id50" name="id5" />
341
- <span className="sd-radio-new"></span>
342
- <label className="sd-theme-selector__label" htmlFor="id50">High Contrast</label>
343
- </div>
344
- </div>
345
- </div> */}
346
554
  <hr />
347
555
  <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
348
556
  <ThemeSelector size='small' options={[
@@ -352,6 +560,23 @@ export class TestGround extends React.Component<IProps, IState> {
352
560
  ]} onChange={($event)=>{this.setState({selctedTheme: $event})}} value={this.state.selctedTheme} />
353
561
  </Container>
354
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 />
355
580
  <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
356
581
  <div className='sd-dropzone__drop-target'>
357
582
  <div className='sd-dropzone__target-border'></div>