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

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 (402) hide show
  1. package/app/img/spinner.svg +3 -0
  2. package/app/img/themes/theme-base.svg +1 -0
  3. package/app/img/themes/theme-contrast.svg +45 -0
  4. package/app/img/themes/theme-dark.svg +1 -0
  5. package/app/img/themes/theme-light.svg +1 -0
  6. package/app/index.js +1 -1
  7. package/app/scripts/modals.js +22 -9
  8. package/app/styles/_accessibility.scss +311 -4
  9. package/app/styles/_alerts.scss +57 -19
  10. package/app/styles/_avatar.scss +25 -1
  11. package/app/styles/_badge.scss +2 -2
  12. package/app/styles/_big-icon-font.scss +1 -1
  13. package/app/styles/_boxed-list.scss +38 -18
  14. package/app/styles/_buttons.scss +431 -332
  15. package/app/styles/_carousel.scss +17 -11
  16. package/app/styles/_design-tokens.scss +2 -0
  17. package/app/styles/_helpers.scss +186 -30
  18. package/app/styles/_icon-font.scss +1 -1
  19. package/app/styles/_labels.scss +12 -6
  20. package/app/styles/_loaders.scss +13 -0
  21. package/app/styles/_master-desk.scss +5 -5
  22. package/app/styles/_mixins.scss +13 -3
  23. package/app/styles/_modals.scss +4 -28
  24. package/app/styles/_normalize.scss +1 -0
  25. package/app/styles/_panel-info.scss +19 -14
  26. package/app/styles/_sd-tag-input.scss +104 -3
  27. package/app/styles/_simple-list.scss +39 -17
  28. package/app/styles/_spinner.scss +46 -0
  29. package/app/styles/_tabs.scss +6 -8
  30. package/app/styles/_tag-labels.scss +11 -2
  31. package/app/styles/_thumb-carousel.scss +11 -10
  32. package/app/styles/_toggle-box.scss +46 -12
  33. package/app/styles/_toggle-button.scss +42 -0
  34. package/app/styles/_tooltips.scss +3 -3
  35. package/app/styles/_variables.scss +0 -1
  36. package/app/styles/app.scss +9 -2
  37. package/app/styles/components/_card-item.scss +33 -21
  38. package/app/styles/components/_list-item.scss +9 -4
  39. package/app/styles/components/_sd-dropzone.scss +78 -0
  40. package/app/styles/components/_sd-grid-item.scss +2 -2
  41. package/app/styles/components/_sd-searchbar.scss +5 -98
  42. package/app/styles/components/_subnav.scss +83 -61
  43. package/app/styles/components/_theme-selector.scss +189 -0
  44. package/app/styles/design-tokens/_design-tokens-general.scss +77 -0
  45. package/app/styles/{variables → design-tokens}/_new-colors.scss +34 -20
  46. package/app/styles/dropdowns/_basic-dropdown.scss +30 -3
  47. package/app/styles/editor/_editor-buttons.scss +54 -0
  48. package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
  49. package/app/styles/form-elements/_checkbox.scss +85 -58
  50. package/app/styles/form-elements/_forms-general.scss +90 -14
  51. package/app/styles/form-elements/_inputs.scss +22 -3
  52. package/app/styles/form-elements/_select-grid.scss +79 -0
  53. package/app/styles/grids/_basic-grid.scss +52 -26
  54. package/app/styles/grids/_grid-layout.scss +35 -21
  55. package/app/styles/grids/_layout-grid.scss +4 -4
  56. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  57. package/app/styles/interface-elements/_side-panel.scss +87 -58
  58. package/app/styles/layout/_basic-layout.scss +1 -4
  59. package/app/styles/layout/_container.scss +32 -0
  60. package/app/styles/layout/_editor.scss +306 -0
  61. package/app/styles/menus/_sd-left-navigation.scss +14 -2
  62. package/app/styles/menus/_sd-sidebar-menu.scss +102 -9
  63. package/app/styles/pr-superdesk-theme.scss +3 -0
  64. package/app/styles/primereact/_pr-datepicker.scss +58 -7
  65. package/app/styles/primereact/_pr-dropdown.scss +157 -8
  66. package/app/styles/primereact/_pr-general.scss +4 -0
  67. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  68. package/app/styles/variables/_colors.scss +2 -452
  69. package/app/styles/variables/_dimensions.scss +85 -1
  70. package/app/styles/variables/_form-elements.scss +0 -2
  71. package/app-typescript/components/Alert.tsx +16 -1
  72. package/app-typescript/components/Avatar.tsx +21 -0
  73. package/app-typescript/components/Button.tsx +7 -1
  74. package/app-typescript/components/ButtonGroup.tsx +5 -4
  75. package/app-typescript/components/Carousel.tsx +1 -1
  76. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  77. package/app-typescript/components/CheckGroup.tsx +2 -1
  78. package/app-typescript/components/Checkbox.tsx +7 -3
  79. package/app-typescript/components/CheckboxButton.tsx +9 -2
  80. package/app-typescript/components/DatePicker.tsx +6 -2
  81. package/app-typescript/components/DropZone.tsx +89 -0
  82. package/app-typescript/components/Dropdown.tsx +9 -1
  83. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  84. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  85. package/app-typescript/components/Form/FormItem.tsx +20 -0
  86. package/app-typescript/components/Form/FormLabel.tsx +22 -0
  87. package/app-typescript/components/Form/FormRow.tsx +40 -0
  88. package/app-typescript/components/Form/FormText.tsx +15 -0
  89. package/app-typescript/components/Form/index.tsx +5 -0
  90. package/app-typescript/components/IconButton.tsx +26 -12
  91. package/app-typescript/components/IconPicker.tsx +277 -0
  92. package/app-typescript/components/Input.tsx +41 -8
  93. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  94. package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
  95. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  96. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  97. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  98. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  99. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  100. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
  101. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  102. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  103. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  104. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +38 -0
  105. package/app-typescript/components/Layouts/AuthoringMain.tsx +46 -0
  106. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  107. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  108. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +15 -0
  109. package/app-typescript/components/Layouts/Container.tsx +30 -0
  110. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  111. package/app-typescript/components/Layouts/LayoutContainer.tsx +18 -0
  112. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  113. package/app-typescript/components/Layouts/MainPanel.tsx +22 -0
  114. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  115. package/app-typescript/components/Layouts/Panel.tsx +207 -0
  116. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  117. package/app-typescript/components/Layouts/index.tsx +25 -0
  118. package/app-typescript/components/LeftMenu.tsx +123 -49
  119. package/app-typescript/components/ListItemLoader.tsx +30 -0
  120. package/app-typescript/components/Lists/BoxedList.tsx +133 -0
  121. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  122. package/app-typescript/components/Lists/index.tsx +2 -0
  123. package/app-typescript/components/Modal.tsx +1 -1
  124. package/app-typescript/components/MultiSelect.tsx +69 -0
  125. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  126. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  127. package/app-typescript/components/Navigation/SideBarTabs.tsx +77 -0
  128. package/app-typescript/components/Navigation/index.tsx +3 -0
  129. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  130. package/app-typescript/components/RadioGroup.tsx +69 -0
  131. package/app-typescript/components/Select.tsx +12 -4
  132. package/app-typescript/components/SelectGrid.tsx +233 -0
  133. package/app-typescript/components/Skeleton.tsx +48 -0
  134. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  135. package/app-typescript/components/Spinner.tsx +32 -0
  136. package/app-typescript/components/SubNav.tsx +25 -4
  137. package/app-typescript/components/Switch.tsx +34 -12
  138. package/app-typescript/components/Tag.tsx +31 -7
  139. package/app-typescript/components/Text/Heading.tsx +67 -0
  140. package/app-typescript/components/Text/Text.tsx +36 -0
  141. package/app-typescript/components/ThemeSelector.tsx +113 -0
  142. package/app-typescript/components/Togglebox.tsx +8 -6
  143. package/app-typescript/components/TreeSelect.tsx +330 -0
  144. package/app-typescript/index.ts +19 -3
  145. package/dist/avatar-2.jpg +0 -0
  146. package/dist/avatar-3.jpg +0 -0
  147. package/dist/avatar-4.jpg +0 -0
  148. package/dist/avatar-5.jpg +0 -0
  149. package/dist/avatar-6.jpg +0 -0
  150. package/dist/components/basic-grid.html +1 -1
  151. package/dist/components/checkbox.html +1 -1
  152. package/dist/components/modals.html +1 -0
  153. package/dist/examples.bundle.css +99 -1225
  154. package/dist/examples.bundle.js +24704 -15626
  155. package/dist/playgrounds/boxed-list.html +1 -1
  156. package/dist/playgrounds/cards.html +9 -4
  157. package/dist/playgrounds/editor-3-test.html +15 -0
  158. package/dist/playgrounds/form-layout.html +9 -7
  159. package/dist/playgrounds/master-desk.html +1 -3
  160. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  161. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  162. package/dist/playgrounds/react-playgrounds/Index.tsx +4 -1
  163. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  164. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  165. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
  166. package/dist/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  167. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +8 -79
  168. package/dist/react/Alerts.tsx +91 -18
  169. package/dist/react/Avatar.tsx +314 -127
  170. package/dist/react/BoxedList.tsx +362 -0
  171. package/dist/react/ButtonGroups.tsx +66 -65
  172. package/dist/react/Buttons.tsx +65 -113
  173. package/dist/react/Carousel.tsx +2 -3
  174. package/dist/react/Checkboxs.tsx +66 -25
  175. package/dist/react/Container.tsx +143 -0
  176. package/dist/react/DropZone.tsx +103 -0
  177. package/dist/react/Heading.tsx +106 -0
  178. package/dist/react/IconButtons.tsx +51 -21
  179. package/dist/react/IconFont.tsx +7 -6
  180. package/dist/react/IconPicker.tsx +65 -0
  181. package/dist/react/Index.tsx +100 -19
  182. package/dist/react/Inputs.tsx +9 -3
  183. package/dist/react/LeftNavigations.tsx +161 -9
  184. package/dist/react/ListItems.tsx +34 -0
  185. package/dist/react/Modal.tsx +7 -7
  186. package/dist/react/MultiSelect.tsx +193 -0
  187. package/dist/react/NavButtons.tsx +4 -4
  188. package/dist/react/Panel.tsx +366 -0
  189. package/dist/react/QuickNavigationBar.tsx +142 -0
  190. package/dist/react/RadioGroup.tsx +351 -0
  191. package/dist/react/SelectGrid.tsx +121 -0
  192. package/dist/react/Selects.tsx +2 -0
  193. package/dist/react/SimpleList.tsx +148 -0
  194. package/dist/react/SubNav.tsx +65 -18
  195. package/dist/react/Tags.tsx +57 -5
  196. package/dist/react/Text.tsx +134 -0
  197. package/dist/react/TreeSelect.tsx +178 -0
  198. package/dist/react.html +4 -0
  199. package/dist/superdesk-ui.bundle.css +26706 -20044
  200. package/dist/superdesk-ui.bundle.js +8456 -3426
  201. package/dist/vendor.bundle.js +13677 -13655
  202. package/examples/css/docs-page.css +98 -27
  203. package/examples/img/avatar-2.jpg +0 -0
  204. package/examples/img/avatar-3.jpg +0 -0
  205. package/examples/img/avatar-4.jpg +0 -0
  206. package/examples/img/avatar-5.jpg +0 -0
  207. package/examples/img/avatar-6.jpg +0 -0
  208. package/examples/index.js +16 -0
  209. package/examples/pages/components/basic-grid.html +1 -1
  210. package/examples/pages/components/checkbox.html +1 -1
  211. package/examples/pages/components/modals.html +1 -0
  212. package/examples/pages/playgrounds/boxed-list.html +1 -1
  213. package/examples/pages/playgrounds/cards.html +9 -4
  214. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  215. package/examples/pages/playgrounds/form-layout.html +9 -7
  216. package/examples/pages/playgrounds/master-desk.html +1 -3
  217. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  218. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  219. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +4 -1
  220. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  221. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  222. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
  223. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  224. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +8 -79
  225. package/examples/pages/react/Alerts.tsx +91 -18
  226. package/examples/pages/react/Avatar.tsx +314 -127
  227. package/examples/pages/react/BoxedList.tsx +362 -0
  228. package/examples/pages/react/ButtonGroups.tsx +66 -65
  229. package/examples/pages/react/Buttons.tsx +65 -113
  230. package/examples/pages/react/Carousel.tsx +2 -3
  231. package/examples/pages/react/Checkboxs.tsx +66 -25
  232. package/examples/pages/react/Container.tsx +143 -0
  233. package/examples/pages/react/DropZone.tsx +103 -0
  234. package/examples/pages/react/Heading.tsx +106 -0
  235. package/examples/pages/react/IconButtons.tsx +51 -21
  236. package/examples/pages/react/IconFont.tsx +7 -6
  237. package/examples/pages/react/IconPicker.tsx +65 -0
  238. package/examples/pages/react/Index.tsx +100 -19
  239. package/examples/pages/react/Inputs.tsx +9 -3
  240. package/examples/pages/react/LeftNavigations.tsx +161 -9
  241. package/examples/pages/react/ListItems.tsx +34 -0
  242. package/examples/pages/react/Modal.tsx +7 -7
  243. package/examples/pages/react/MultiSelect.tsx +193 -0
  244. package/examples/pages/react/NavButtons.tsx +4 -4
  245. package/examples/pages/react/Panel.tsx +366 -0
  246. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  247. package/examples/pages/react/RadioGroup.tsx +351 -0
  248. package/examples/pages/react/SelectGrid.tsx +121 -0
  249. package/examples/pages/react/Selects.tsx +2 -0
  250. package/examples/pages/react/SimpleList.tsx +148 -0
  251. package/examples/pages/react/SubNav.tsx +65 -18
  252. package/examples/pages/react/Tags.tsx +57 -5
  253. package/examples/pages/react/Text.tsx +134 -0
  254. package/examples/pages/react/TreeSelect.tsx +178 -0
  255. package/examples/pages/react.html +4 -0
  256. package/package.json +9 -5
  257. package/react/components/Alert.d.ts +3 -0
  258. package/react/components/Alert.js +9 -1
  259. package/react/components/Avatar.d.ts +9 -0
  260. package/react/components/Avatar.js +19 -1
  261. package/react/components/Button.d.ts +2 -0
  262. package/react/components/Button.js +4 -2
  263. package/react/components/ButtonGroup.d.ts +3 -2
  264. package/react/components/ButtonGroup.js +2 -2
  265. package/react/components/Carousel.js +1 -1
  266. package/react/components/CheckButtonGroup.d.ts +3 -1
  267. package/react/components/CheckButtonGroup.js +8 -2
  268. package/react/components/CheckGroup.d.ts +1 -0
  269. package/react/components/CheckGroup.js +1 -1
  270. package/react/components/Checkbox.d.ts +2 -1
  271. package/react/components/Checkbox.js +2 -2
  272. package/react/components/CheckboxButton.d.ts +1 -0
  273. package/react/components/CheckboxButton.js +2 -2
  274. package/react/components/DatePicker.js +7 -2
  275. package/react/components/DropZone.d.ts +25 -0
  276. package/react/components/DropZone.js +93 -0
  277. package/react/components/Dropdown.d.ts +1 -0
  278. package/react/components/Dropdown.js +3 -3
  279. package/react/components/Form/FormGroup.d.ts +13 -0
  280. package/react/components/Form/FormGroup.js +61 -0
  281. package/react/components/Form/FormItem.d.ts +9 -0
  282. package/react/components/Form/FormItem.js +54 -0
  283. package/react/components/Form/FormLabel.d.ts +10 -0
  284. package/react/components/Form/FormLabel.js +54 -0
  285. package/react/components/Form/FormRow.d.ts +17 -0
  286. package/react/components/Form/FormRow.js +62 -0
  287. package/react/components/Form/FormText.d.ts +8 -0
  288. package/react/components/Form/FormText.js +47 -0
  289. package/react/components/Form/index.d.ts +5 -0
  290. package/react/components/Form/index.js +12 -0
  291. package/react/components/IconButton.d.ts +9 -2
  292. package/react/components/IconButton.js +13 -5
  293. package/react/components/IconPicker.d.ts +24 -0
  294. package/react/components/IconPicker.js +283 -0
  295. package/react/components/Input.d.ts +20 -3
  296. package/react/components/Input.js +12 -3
  297. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  298. package/react/components/Layouts/AuthorinInnerSideBar.js +47 -0
  299. package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
  300. package/react/components/Layouts/AuthoringFrame.js +56 -0
  301. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  302. package/react/components/Layouts/AuthoringFrameContainer.js +47 -0
  303. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  304. package/react/components/Layouts/AuthoringFrameLeftBar.js +47 -0
  305. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  306. package/react/components/Layouts/AuthoringFrameMain.js +47 -0
  307. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  308. package/react/components/Layouts/AuthoringFrameNavBar.js +47 -0
  309. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  310. package/react/components/Layouts/AuthoringFrameOverlay.js +47 -0
  311. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
  312. package/react/components/Layouts/AuthoringFrameRightBar.js +47 -0
  313. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  314. package/react/components/Layouts/AuthoringFrameSidePanel.js +56 -0
  315. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  316. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +56 -0
  317. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  318. package/react/components/Layouts/AuthoringInnerBody.js +47 -0
  319. package/react/components/Layouts/AuthoringInnerHeader.d.ts +13 -0
  320. package/react/components/{RadioButton.js → Layouts/AuthoringInnerHeader.js} +20 -22
  321. package/react/components/Layouts/AuthoringMain.d.ts +12 -0
  322. package/react/components/Layouts/AuthoringMain.js +53 -0
  323. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  324. package/react/components/Layouts/AuthoringMainContainer.js +47 -0
  325. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  326. package/react/components/Layouts/AuthoringMainContent.js +47 -0
  327. package/react/components/Layouts/AuthoringMainToolBar.d.ts +8 -0
  328. package/react/components/Layouts/AuthoringMainToolBar.js +47 -0
  329. package/react/components/Layouts/Container.d.ts +14 -0
  330. package/react/components/Layouts/Container.js +60 -0
  331. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  332. package/react/components/Layouts/HeaderPanel.js +47 -0
  333. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  334. package/react/components/Layouts/LayoutContainer.js +47 -0
  335. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  336. package/react/components/Layouts/LeftPanel.js +54 -0
  337. package/react/components/Layouts/MainPanel.d.ts +10 -0
  338. package/react/components/Layouts/MainPanel.js +50 -0
  339. package/react/components/Layouts/PageLayout.d.ts +16 -0
  340. package/react/components/Layouts/PageLayout.js +64 -0
  341. package/react/components/Layouts/Panel.d.ts +65 -0
  342. package/react/components/Layouts/Panel.js +166 -0
  343. package/react/components/Layouts/RightPanel.d.ts +9 -0
  344. package/react/components/Layouts/RightPanel.js +47 -0
  345. package/react/components/Layouts/index.d.ts +24 -0
  346. package/react/components/Layouts/index.js +55 -0
  347. package/react/components/LeftMenu.d.ts +8 -3
  348. package/react/components/LeftMenu.js +55 -16
  349. package/react/components/ListItemLoader.d.ts +4 -0
  350. package/react/components/ListItemLoader.js +62 -0
  351. package/react/components/Lists/BoxedList.d.ts +36 -0
  352. package/react/components/Lists/BoxedList.js +137 -0
  353. package/react/components/Lists/SimpleList.d.ts +21 -0
  354. package/react/components/Lists/SimpleList.js +78 -0
  355. package/react/components/Lists/index.d.ts +2 -0
  356. package/react/components/Lists/index.js +9 -0
  357. package/react/components/Modal.js +1 -1
  358. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  359. package/react/components/Navigation/QuickNavBar.js +113 -0
  360. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  361. package/react/components/Navigation/SideBarMenu.js +77 -0
  362. package/react/components/Navigation/SideBarTabs.d.ts +22 -0
  363. package/react/components/Navigation/SideBarTabs.js +82 -0
  364. package/react/components/Navigation/index.d.ts +3 -0
  365. package/react/components/Navigation/index.js +8 -0
  366. package/react/components/RadioButtonGroup.d.ts +29 -0
  367. package/react/components/RadioButtonGroup.js +89 -0
  368. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  369. package/react/components/{Radio.js → RadioGroup.js} +15 -11
  370. package/react/components/Select.d.ts +3 -1
  371. package/react/components/Select.js +5 -3
  372. package/react/components/SelectGrid.d.ts +45 -0
  373. package/react/components/SelectGrid.js +179 -0
  374. package/react/components/Skeleton.d.ts +30 -0
  375. package/react/components/Skeleton.js +55 -0
  376. package/react/components/SlidingToolbar.d.ts +1 -1
  377. package/react/components/SlidingToolbar.js +11 -1
  378. package/react/components/Spinner.d.ts +11 -0
  379. package/react/components/Spinner.js +69 -0
  380. package/react/components/SubNav.d.ts +8 -1
  381. package/react/components/SubNav.js +22 -4
  382. package/react/components/Switch.d.ts +4 -1
  383. package/react/components/Switch.js +19 -7
  384. package/react/components/TabCustom.d.ts +0 -1
  385. package/react/components/Tag.d.ts +3 -2
  386. package/react/components/Tag.js +16 -5
  387. package/react/components/TagInput.d.ts +0 -1
  388. package/react/components/Text/Heading.d.ts +15 -0
  389. package/react/components/Text/Heading.js +77 -0
  390. package/react/components/Text/Text.d.ts +15 -0
  391. package/react/components/Text/Text.js +65 -0
  392. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  393. package/react/components/ThemeSelector.js +112 -0
  394. package/react/components/Togglebox.d.ts +1 -0
  395. package/react/components/Togglebox.js +9 -2
  396. package/react/index.d.ts +17 -3
  397. package/react/index.js +40 -4
  398. package/app/styles/variables/_design-tokens-general.scss +0 -136
  399. package/app-typescript/components/Radio.tsx +0 -57
  400. package/app-typescript/components/RadioButton.tsx +0 -57
  401. package/dist/react/Radios.tsx +0 -391
  402. package/examples/pages/react/Radios.tsx +0 -391
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as Components from './components/Index';
3
- import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioButton, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
3
+ import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioButtonGroup, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
4
4
  import * as GridElements from '../../../../app-typescript/components/GridItem';
5
5
 
6
6
  import dummy_items from '../dummy-data/items';
@@ -100,7 +100,7 @@ export class SamsPlayground extends React.Component<IProps, IState> {
100
100
  </ButtonGroup>
101
101
  <Components.SearchBar placeholder='Search media'></Components.SearchBar>
102
102
 
103
- <ButtonGroup align='right'>
103
+ <ButtonGroup align='end'>
104
104
  <NavButton icon='dots-vertical' onClick={() => false} />
105
105
  </ButtonGroup>
106
106
  </SubNav>
@@ -108,14 +108,14 @@ export class SamsPlayground extends React.Component<IProps, IState> {
108
108
  <ButtonGroup align='inline'>
109
109
  <NavButton icon='filter-large' onClick={this.handleFilter} />
110
110
  </ButtonGroup>
111
- <CheckButtonGroup padded>
112
- <RadioButton value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })} options={[
113
- { value: 'itemtype01', label: 'All item types' },
114
- { value: 'itemtype02', label: 'Images only' },
115
- { value: 'itemtype03', label: 'Videos only' },
116
- { value: 'itemtype04', label: 'Documents only' }]} />
117
- </CheckButtonGroup>
118
- <ButtonGroup align='right'>
111
+ <RadioButtonGroup value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })}
112
+ options={[
113
+ { value: 'itemtype01', label: 'All item types' },
114
+ { value: 'itemtype02', label: 'Images only' },
115
+ { value: 'itemtype03', label: 'Videos only' },
116
+ { value: 'itemtype04', label: 'Documents only' }
117
+ ]} group={{padded: true}} />
118
+ <ButtonGroup align='end' spaces='no-space'>
119
119
  <Dropdown
120
120
  items={[
121
121
  {
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as Components from './components/Index';
3
- import { Checkbox, Radio, CheckboxButton, RadioButton, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge } from '../../../../app-typescript/index';
3
+ import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container } from '../../../../app-typescript/index';
4
4
  import { Carousel } from '../../../../app-typescript/index';
5
5
  import * as GridElements from '../../../../app-typescript/components/GridItem';
6
6
 
@@ -16,10 +16,13 @@ interface IState {
16
16
  itemSelected1: boolean;
17
17
  itemSelected2: boolean;
18
18
  itemSelected3: boolean;
19
- value1: boolean;
20
- value2: boolean;
21
- value3: boolean;
22
- value4: boolean;
19
+ value1: string;
20
+ value2: string;
21
+ value3: string;
22
+ value4: string;
23
+ value5: string;
24
+ value6: string;
25
+ selctedTheme: string;
23
26
  }
24
27
 
25
28
  export class TestGround extends React.Component<IProps, IState> {
@@ -30,10 +33,13 @@ export class TestGround extends React.Component<IProps, IState> {
30
33
  itemSelected1: false,
31
34
  itemSelected2: false,
32
35
  itemSelected3: false,
33
- value1: false,
34
- value2: false,
35
- value3: false,
36
- value4: false,
36
+ value1: undefined,
37
+ value2: undefined,
38
+ value3: undefined,
39
+ value4: undefined,
40
+ value5: undefined,
41
+ value6: undefined,
42
+ selctedTheme: 'light',
37
43
  }
38
44
  }
39
45
 
@@ -54,13 +60,13 @@ export class TestGround extends React.Component<IProps, IState> {
54
60
  <hr />
55
61
  <div className="sd-check__group-new sd-check__group-new--vertical">
56
62
  <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)} />
63
+ <Checkbox label={{text: 'Defined label side - right', side: 'end'}} onChange={(value) => console.log('value changed', value)} />
58
64
  <Checkbox label={{text: 'This checkbox is disabled'}} onChange={(value) => console.log('value changed', value)} disabled={true}/>
59
65
  </div>
60
66
 
61
67
  <hr />
62
68
 
63
- <Checkbox label={{text: 'Defined label side - left', side: 'left'}} onChange={(value) => console.log('value changed', value)} />
69
+ <Checkbox label={{text: 'Defined label side - left', side: 'start'}} onChange={(value) => console.log('value changed', value)} />
64
70
 
65
71
  <hr />
66
72
 
@@ -68,7 +74,7 @@ export class TestGround extends React.Component<IProps, IState> {
68
74
 
69
75
  <hr />
70
76
 
71
- <div className="sd-check__group-new sd-check-button__group--left">
77
+ <div className="sd-check-button__group sd-check-button__group--start">
72
78
  <CheckboxButton label={{text: 'CheckboxButton rules!'}} onChange={(value) => console.log('value changed', value)} />
73
79
  <CheckboxButton label={{text: 'CheckboxButton rules again!', icon: 'th'}} onChange={(value) => console.log('value changed', value)} />
74
80
  <CheckboxButton label={{text: 'Hell yeah!'}} onChange={(value) => console.log('value changed', value)} />
@@ -79,27 +85,27 @@ export class TestGround extends React.Component<IProps, IState> {
79
85
  <h3 className="docs-page__h3 sd-margin-t--2 sd-margin-b--0">Radio</h3>
80
86
  <hr />
81
87
  <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)} />
88
+ <RadioGroup value={this.state.value2} options={[
89
+ {label: "Radio 1", value: "somevalue1"},
90
+ {label: "Radio 2", value: "somevalue2"},
91
+ {label: "Radio 3", value: "somevalue3"},
92
+ ]} onChange={(value) => this.setState(() => ({ value2: value }))} />
87
93
  </div>
88
94
 
89
95
  <hr />
90
96
 
91
97
  <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)} />
98
+ <RadioButtonGroup value={this.state.value3} options={[
99
+ {label: "RadioButton with an icon", value: "somevalue4", icon: "th-list"},
100
+ {label: "RadioButton with no visible text, only an icon", value: "somevalue5", icon: "th", labelHidden: true},
101
+ {label: "Normal RadioButton", value: "somevalue6"},
102
+ ]} onChange={(value) => this.setState(() => ({ value3: value }))} />
97
103
  </div>
98
104
 
99
105
 
100
106
  <hr />
101
107
 
102
- <Carousel></Carousel>
108
+ {/* <Carousel></Carousel> */}
103
109
 
104
110
  <hr />
105
111
  <div className="sd-thumb-carousel" data-theme="dark-ui">
@@ -156,6 +162,209 @@ export class TestGround extends React.Component<IProps, IState> {
156
162
  parturient montes, nascetur ridiculus mus.
157
163
  </div>
158
164
  </div>
165
+ <hr />
166
+ <div className="button-group button-group--comfort">
167
+ <div className="color-swatch colour-test--1"></div>
168
+ <div className="color-swatch colour-test--2"></div>
169
+ </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
+
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
+ <hr />
347
+ <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
348
+ <ThemeSelector size='small' options={[
349
+ {label: 'Light', value: 'light', theme: 'light'},
350
+ {label: 'Dark', value: 'dark', theme: 'dark'},
351
+ {label: 'High Contrast', value: 'high-contrast', theme: 'contrast-light', disabled: true},
352
+ ]} onChange={($event)=>{this.setState({selctedTheme: $event})}} value={this.state.selctedTheme} />
353
+ </Container>
354
+ <hr />
355
+ <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
356
+ <div className='sd-dropzone__drop-target'>
357
+ <div className='sd-dropzone__target-border'></div>
358
+ <figure className='sd-dropzone__icon'>
359
+ <Icon name='upload-alt' size='big' />
360
+ </figure>
361
+ <h4 className='sd-dropzone__heading'>
362
+ Upload files
363
+ </h4>
364
+ <p className='sd-dropzone__description'>Drag one or more files here to upload them, or just click the button below.</p>
365
+ <button className='btn btn--hollow sd-dropzone__action'>Attach files</button>
366
+ </div>
367
+ </Container>
159
368
  </Components.MainPanel>
160
369
  {/* MAIN CONTENT (Monitoring) */}
161
370
  </Components.LayoutContainer>
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as Components from './components/Index';
3
- import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioButton, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
3
+ import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioGroup, RadioButtonGroup, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
4
4
  import * as GridElements from '../../../../app-typescript/components/GridItem';
5
5
 
6
6
  import dummy_items from '../dummy-data/items';
@@ -99,7 +99,7 @@ export class UiPlayground extends React.Component<IProps, IState> {
99
99
  </ButtonGroup>
100
100
  <Components.SearchBar placeholder='Search media'></Components.SearchBar>
101
101
 
102
- <ButtonGroup align='right'>
102
+ <ButtonGroup align='end'>
103
103
  <NavButton icon='dots-vertical' onClick={() => false} />
104
104
  </ButtonGroup>
105
105
  </SubNav>
@@ -107,14 +107,12 @@ export class UiPlayground extends React.Component<IProps, IState> {
107
107
  <ButtonGroup align='inline'>
108
108
  <NavButton icon='filter-large' onClick={this.handleFilter} />
109
109
  </ButtonGroup>
110
- <CheckButtonGroup padded>
111
- <RadioButton value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })} options={[
112
- { value: 'itemtype01', label: 'All item types' },
113
- { value: 'itemtype02', label: 'Images only' },
114
- { value: 'itemtype03', label: 'Videos only' },
115
- { value: 'itemtype04', label: 'Documents only' }]} />
116
- </CheckButtonGroup>
117
- <ButtonGroup align='right' spaces='no-space'>
110
+ <RadioButtonGroup options={[
111
+ {value:'test10', label:'Radio button with icon'},
112
+ {value:'test11', label:'I have an icon!'},
113
+ {value:'test12', label:'Yeah, me too!'},
114
+ ]} group={{padded:true}} value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })} />
115
+ <ButtonGroup align='end' spaces='no-space'>
118
116
  <Dropdown
119
117
  items={[
120
118
  {
@@ -239,75 +237,6 @@ export class UiPlayground extends React.Component<IProps, IState> {
239
237
  </GridElements.GridItem>
240
238
  )}
241
239
  </GridList>
242
- <GridList size="small" gap="medium" margin="3">
243
- <GridElements.GridItem>
244
- <GridElements.GridItemContent>
245
- <div className="test-div test-div--1"></div>
246
- <div className="test-div test-div--2"></div>
247
- <div className="test-div test-div--3"></div>
248
- <div className="test-div test-div--4"></div>
249
- <div className="test-div test-div--5"></div>
250
- <div className="test-div test-div--6"></div>
251
- <div className="test-div test-div--7"></div>
252
- <div className="test-div test-div--8"></div>
253
- <div className="test-div test-div--9"></div>
254
- </GridElements.GridItemContent>
255
- </GridElements.GridItem>
256
- <GridElements.GridItem>
257
- <GridElements.GridItemContent>
258
- <div className="test-div test-div--10"></div>
259
- <div className="test-div test-div--11"></div>
260
- <div className="test-div test-div--12"></div>
261
- <div className="test-div test-div--13"></div>
262
- <div className="test-div test-div--14"></div>
263
- <div className="test-div test-div--15"></div>
264
- <div className="test-div test-div--16"></div>
265
- <div className="test-div test-div--17"></div>
266
- <div className="test-div test-div--18"></div>
267
- </GridElements.GridItemContent>
268
- </GridElements.GridItem>
269
- <GridElements.GridItem>
270
- <GridElements.GridItemContent>
271
- <div className="test-div">
272
- <div className="test-div--19-1"></div>
273
- <div className="test-div--19-2"></div>
274
- </div>
275
- <div className="test-div">
276
- <div className="test-div--20-1"></div>
277
- <div className="test-div--20-2"></div>
278
- </div>
279
- <div className="test-div">
280
- <div className="test-div--21-1"></div>
281
- <div className="test-div--21-2"></div>
282
- </div>
283
- <div className="test-div">
284
- <div className="test-div--22-1"></div>
285
- <div className="test-div--22-2"></div>
286
- </div>
287
- <div className="test-div">
288
- <div className="test-div--23-1"></div>
289
- <div className="test-div--23-2"></div>
290
- </div>
291
- <div className="test-div">
292
- <div className="test-div--24-1"></div>
293
- <div className="test-div--24-2"></div>
294
- </div>
295
- <div className="test-div">
296
- <div className="test-div--25-1"></div>
297
- <div className="test-div--25-2"></div>
298
- </div>
299
- <div className="test-div">
300
- <div className="test-div--26-1"></div>
301
- <div className="test-div--26-2"></div>
302
- </div>
303
- <div className="test-div">
304
- <div className="test-div--27-1"></div>
305
- <div className="test-div--27-2"></div>
306
- </div>
307
- </GridElements.GridItemContent>
308
- </GridElements.GridItem>
309
- </GridList>
310
-
311
240
  </Components.MainPanel>
312
241
  {/* MAIN CONTENT (Monitoring) */}
313
242