superdesk-ui-framework 2.4.20 → 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 (443) 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 +2 -1
  7. package/app/scripts/modals.js +1 -0
  8. package/app/styles/_accessibility.scss +305 -3
  9. package/app/styles/_alerts.scss +227 -97
  10. package/app/styles/_avatar.scss +60 -33
  11. package/app/styles/_badge.scss +55 -26
  12. package/app/styles/_big-icon-font.scss +2 -1
  13. package/app/styles/_boxed-list.scss +41 -20
  14. package/app/styles/_buttons.scss +544 -1026
  15. package/app/styles/_carousel.scss +19 -13
  16. package/app/styles/_content-divider.scss +125 -0
  17. package/app/styles/_design-tokens.scss +2 -0
  18. package/app/styles/_drag-drop.scss +1 -1
  19. package/app/styles/_empty-states.scss +9 -1
  20. package/app/styles/_helpers.scss +650 -308
  21. package/app/styles/_icon-font.scss +5 -5
  22. package/app/styles/_icon-labels.scss +6 -7
  23. package/app/styles/_labels.scss +65 -52
  24. package/app/styles/_loaders.scss +28 -0
  25. package/app/styles/_master-desk.scss +11 -11
  26. package/app/styles/_mixins.scss +21 -13
  27. package/app/styles/_modals.scss +103 -116
  28. package/app/styles/_normalize.scss +1 -0
  29. package/app/styles/_panel-info.scss +21 -16
  30. package/app/styles/_popover.scss +2 -2
  31. package/app/styles/_pr-superdesk-theme.scss +4 -0
  32. package/app/styles/_publisher-styles.scss +182 -0
  33. package/app/styles/_reboot.scss +1 -0
  34. package/app/styles/_sd-tag-input.scss +184 -97
  35. package/app/styles/_simple-list.scss +41 -19
  36. package/app/styles/_tables.scss +5 -4
  37. package/app/styles/_tabs.scss +24 -75
  38. package/app/styles/_tag-labels.scss +47 -47
  39. package/app/styles/_thumb-carousel.scss +11 -10
  40. package/app/styles/_toggle-box.scss +52 -46
  41. package/app/styles/_toggle-button.scss +42 -0
  42. package/app/styles/_tooltips.scss +55 -98
  43. package/app/styles/_variables.scss +0 -1
  44. package/app/styles/app.scss +16 -1
  45. package/app/styles/components/_card-item.scss +41 -28
  46. package/app/styles/components/_list-item.scss +24 -94
  47. package/app/styles/components/_sd-circular-progress.scss +1 -1
  48. package/app/styles/components/_sd-collapse-box.scss +6 -33
  49. package/app/styles/components/_sd-comment-box.scss +1 -1
  50. package/app/styles/components/_sd-dropzone.scss +78 -0
  51. package/app/styles/components/_sd-grid-item.scss +78 -180
  52. package/app/styles/components/_sd-loader.scss +1 -16
  53. package/app/styles/components/_sd-media-carousel.scss +10 -12
  54. package/app/styles/components/_sd-photo-preview.scss +13 -13
  55. package/app/styles/components/_sd-searchbar.scss +43 -127
  56. package/app/styles/components/_sd-toaster.scss +13 -6
  57. package/app/styles/components/_subnav.scss +111 -117
  58. package/app/styles/components/_theme-selector.scss +189 -0
  59. package/app/styles/components/sd-slider.scss +11 -11
  60. package/app/styles/design-tokens/_design-tokens-general.scss +77 -0
  61. package/app/styles/design-tokens/_new-colors.scss +700 -0
  62. package/app/styles/dropdowns/_basic-dropdown.scss +119 -76
  63. package/app/styles/dropdowns/_navigation_dropdown.scss +7 -8
  64. package/app/styles/dropdowns/_nested-dropdown.scss +30 -16
  65. package/app/styles/dropdowns/_other_dropdown.scss +1 -1
  66. package/app/styles/editor/_editor-buttons.scss +54 -0
  67. package/app/styles/editor/_editor-themes.scss +437 -0
  68. package/app/styles/form-elements/_autocomplete.scss +12 -41
  69. package/app/styles/form-elements/_checkbox.scss +180 -245
  70. package/app/styles/form-elements/_forms-general.scss +92 -20
  71. package/app/styles/form-elements/_inputs.scss +96 -350
  72. package/app/styles/form-elements/_radio.scss +6 -6
  73. package/app/styles/form-elements/_select-grid.scss +16 -14
  74. package/app/styles/form-elements/_switch.scss +26 -47
  75. package/app/styles/grids/_basic-grid.scss +52 -26
  76. package/app/styles/grids/_grid-layout.scss +93 -58
  77. package/app/styles/grids/_layout-grid.scss +6 -6
  78. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  79. package/app/styles/interface-elements/_side-panel.scss +115 -83
  80. package/app/styles/layout/_basic-layout.scss +11 -19
  81. package/app/styles/layout/_container.scss +32 -0
  82. package/app/styles/layout/_editor.scss +306 -0
  83. package/app/styles/layout/_general.scss +4 -5
  84. package/app/styles/menus/_sd-content-navigation.scss +1 -1
  85. package/app/styles/menus/_sd-left-navigation.scss +34 -18
  86. package/app/styles/menus/_sd-sidebar-menu.scss +117 -25
  87. package/app/styles/menus/_sd-top-menu.scss +3 -3
  88. package/app/styles/primereact/_pr-datepicker.scss +60 -9
  89. package/app/styles/primereact/_pr-dialog.scss +99 -30
  90. package/app/styles/primereact/_pr-dropdown.scss +177 -19
  91. package/app/styles/primereact/_pr-general.scss +14 -7
  92. package/app/styles/primereact/_pr-menu.scss +9 -12
  93. package/app/styles/variables/_colors.scss +124 -516
  94. package/app/styles/variables/_dimensions.scss +82 -4
  95. package/app/styles/variables/_form-elements.scss +0 -2
  96. package/app/styles/variables/_typography.scss +2 -0
  97. package/app-typescript/components/Alert.tsx +16 -1
  98. package/app-typescript/components/Avatar.tsx +21 -0
  99. package/app-typescript/components/ButtonGroup.tsx +9 -5
  100. package/app-typescript/components/Carousel.tsx +1 -1
  101. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  102. package/app-typescript/components/CheckGroup.tsx +2 -1
  103. package/app-typescript/components/Checkbox.tsx +7 -3
  104. package/app-typescript/components/CheckboxButton.tsx +9 -2
  105. package/app-typescript/components/ContentDivider.tsx +34 -0
  106. package/app-typescript/components/DatePicker.tsx +6 -2
  107. package/app-typescript/components/DropZone.tsx +89 -0
  108. package/app-typescript/components/Dropdown.tsx +30 -11
  109. package/app-typescript/components/DropdownFirst.tsx +1 -1
  110. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  111. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  112. package/app-typescript/components/Form/FormItem.tsx +20 -0
  113. package/app-typescript/components/Form/FormLabel.tsx +22 -0
  114. package/app-typescript/components/Form/FormRow.tsx +40 -0
  115. package/app-typescript/components/Form/FormText.tsx +15 -0
  116. package/app-typescript/components/Form/index.tsx +5 -0
  117. package/app-typescript/components/IconButton.tsx +26 -12
  118. package/app-typescript/components/Input.tsx +38 -20
  119. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  120. package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
  121. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  122. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  123. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  124. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  125. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  126. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
  127. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  128. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  129. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  130. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +38 -0
  131. package/app-typescript/components/Layouts/AuthoringMain.tsx +46 -0
  132. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  133. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  134. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +15 -0
  135. package/app-typescript/components/Layouts/Container.tsx +30 -0
  136. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  137. package/app-typescript/components/Layouts/LayoutContainer.tsx +18 -0
  138. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  139. package/app-typescript/components/Layouts/MainPanel.tsx +22 -0
  140. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  141. package/app-typescript/components/Layouts/Panel.tsx +207 -0
  142. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  143. package/app-typescript/components/Layouts/index.tsx +25 -0
  144. package/app-typescript/components/LeftMenu.tsx +123 -49
  145. package/app-typescript/components/Lists/BoxedList.tsx +133 -0
  146. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  147. package/app-typescript/components/Lists/index.tsx +2 -0
  148. package/app-typescript/components/Modal.tsx +7 -2
  149. package/app-typescript/components/MultiSelect.tsx +69 -0
  150. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  151. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  152. package/app-typescript/components/Navigation/SideBarTabs.tsx +77 -0
  153. package/app-typescript/components/Navigation/index.tsx +3 -0
  154. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  155. package/app-typescript/components/RadioGroup.tsx +69 -0
  156. package/app-typescript/components/Select.tsx +7 -9
  157. package/app-typescript/components/SelectGrid.tsx +3 -3
  158. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  159. package/app-typescript/components/Spinner.tsx +0 -1
  160. package/app-typescript/components/SubNav.tsx +25 -4
  161. package/app-typescript/components/Switch.tsx +34 -12
  162. package/app-typescript/components/TabCustom.tsx +40 -89
  163. package/app-typescript/components/TabList.tsx +18 -43
  164. package/app-typescript/components/Tag.tsx +31 -8
  165. package/app-typescript/components/Text/Heading.tsx +67 -0
  166. package/app-typescript/components/Text/Text.tsx +36 -0
  167. package/app-typescript/components/ThemeSelector.tsx +113 -0
  168. package/app-typescript/components/TimePicker.tsx +3 -3
  169. package/app-typescript/components/Togglebox.tsx +8 -6
  170. package/app-typescript/components/TreeSelect.tsx +330 -0
  171. package/app-typescript/index.ts +16 -4
  172. package/dist/avatar-2.jpg +0 -0
  173. package/dist/avatar-3.jpg +0 -0
  174. package/dist/avatar-4.jpg +0 -0
  175. package/dist/avatar-5.jpg +0 -0
  176. package/dist/avatar-6.jpg +0 -0
  177. package/dist/avatar_64.png +0 -0
  178. package/dist/components/basic-grid.html +1 -1
  179. package/dist/components/checkbox.html +1 -1
  180. package/dist/examples.bundle.css +1933 -2393
  181. package/dist/examples.bundle.js +23583 -15736
  182. package/dist/index.html +9 -12
  183. package/dist/playgrounds/boxed-list.html +1 -1
  184. package/dist/playgrounds/cards.html +9 -4
  185. package/dist/playgrounds/editor-3-test.html +15 -0
  186. package/dist/playgrounds/form-layout.html +9 -7
  187. package/dist/playgrounds/layout-test-2.html +40 -36
  188. package/dist/playgrounds/list-item-test.html +1 -1
  189. package/dist/playgrounds/master-desk.html +1 -3
  190. package/dist/playgrounds/photo-desk.html +33 -33
  191. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  192. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  193. package/dist/playgrounds/react-playgrounds/Index.tsx +5 -1
  194. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  195. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  196. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
  197. package/dist/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  198. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +300 -0
  199. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  200. package/dist/playgrounds/tags-input.html +1 -1
  201. package/dist/react/Alerts.tsx +123 -23
  202. package/dist/react/Avatar.tsx +314 -127
  203. package/dist/react/BoxedList.tsx +362 -0
  204. package/dist/react/ButtonGroups.tsx +66 -65
  205. package/dist/react/Buttons.tsx +62 -247
  206. package/dist/react/Carousel.tsx +2 -3
  207. package/dist/react/Checkboxs.tsx +66 -25
  208. package/dist/react/Container.tsx +143 -0
  209. package/dist/react/ContentDivider.tsx +178 -0
  210. package/dist/react/DropZone.tsx +103 -0
  211. package/dist/react/Heading.tsx +106 -0
  212. package/dist/react/IconButtons.tsx +49 -42
  213. package/dist/react/Index.tsx +118 -11
  214. package/dist/react/Inputs.tsx +9 -24
  215. package/dist/react/LeftNavigations.tsx +161 -9
  216. package/dist/react/ListItems.tsx +3 -3
  217. package/dist/react/Modal.tsx +173 -19
  218. package/dist/react/MultiSelect.tsx +193 -0
  219. package/dist/react/NavButtons.tsx +4 -4
  220. package/dist/react/Panel.tsx +366 -0
  221. package/dist/react/QuickNavigationBar.tsx +142 -0
  222. package/dist/react/RadioGroup.tsx +351 -0
  223. package/dist/react/SelectWithTemplate.tsx +1 -1
  224. package/dist/react/Selects.tsx +3 -23
  225. package/dist/react/SimpleList.tsx +148 -0
  226. package/dist/react/SubNav.tsx +69 -20
  227. package/dist/react/Tabs.tsx +72 -248
  228. package/dist/react/Tags.tsx +45 -4
  229. package/dist/react/Text.tsx +134 -0
  230. package/dist/react/Tooltips.tsx +1 -1
  231. package/dist/react/TreeSelect.tsx +178 -0
  232. package/dist/react.html +4 -0
  233. package/dist/superdesk-ui.bundle.css +28522 -23998
  234. package/dist/superdesk-ui.bundle.js +7546 -3667
  235. package/dist/vendor.bundle.js +64 -68
  236. package/examples/css/docs-page.css +205 -46
  237. package/examples/img/avatar-2.jpg +0 -0
  238. package/examples/img/avatar-3.jpg +0 -0
  239. package/examples/img/avatar-4.jpg +0 -0
  240. package/examples/img/avatar-5.jpg +0 -0
  241. package/examples/img/avatar-6.jpg +0 -0
  242. package/examples/index.html +9 -12
  243. package/examples/index.js +20 -0
  244. package/examples/pages/components/basic-grid.html +1 -1
  245. package/examples/pages/components/checkbox.html +1 -1
  246. package/examples/pages/playgrounds/boxed-list.html +1 -1
  247. package/examples/pages/playgrounds/cards.html +9 -4
  248. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  249. package/examples/pages/playgrounds/form-layout.html +9 -7
  250. package/examples/pages/playgrounds/layout-test-2.html +40 -36
  251. package/examples/pages/playgrounds/list-item-test.html +1 -1
  252. package/examples/pages/playgrounds/master-desk.html +1 -3
  253. package/examples/pages/playgrounds/photo-desk.html +33 -33
  254. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  255. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  256. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +5 -1
  257. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  258. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  259. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
  260. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  261. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +300 -0
  262. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  263. package/examples/pages/playgrounds/tags-input.html +1 -1
  264. package/examples/pages/react/Alerts.tsx +123 -23
  265. package/examples/pages/react/Avatar.tsx +314 -127
  266. package/examples/pages/react/BoxedList.tsx +362 -0
  267. package/examples/pages/react/ButtonGroups.tsx +66 -65
  268. package/examples/pages/react/Buttons.tsx +62 -247
  269. package/examples/pages/react/Carousel.tsx +2 -3
  270. package/examples/pages/react/Checkboxs.tsx +66 -25
  271. package/examples/pages/react/Container.tsx +143 -0
  272. package/examples/pages/react/ContentDivider.tsx +178 -0
  273. package/examples/pages/react/DropZone.tsx +103 -0
  274. package/examples/pages/react/Heading.tsx +106 -0
  275. package/examples/pages/react/IconButtons.tsx +49 -42
  276. package/examples/pages/react/Index.tsx +118 -11
  277. package/examples/pages/react/Inputs.tsx +9 -24
  278. package/examples/pages/react/LeftNavigations.tsx +161 -9
  279. package/examples/pages/react/ListItems.tsx +3 -3
  280. package/examples/pages/react/Modal.tsx +173 -19
  281. package/examples/pages/react/MultiSelect.tsx +193 -0
  282. package/examples/pages/react/NavButtons.tsx +4 -4
  283. package/examples/pages/react/Panel.tsx +366 -0
  284. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  285. package/examples/pages/react/RadioGroup.tsx +351 -0
  286. package/examples/pages/react/SelectWithTemplate.tsx +1 -1
  287. package/examples/pages/react/Selects.tsx +3 -23
  288. package/examples/pages/react/SimpleList.tsx +148 -0
  289. package/examples/pages/react/SubNav.tsx +69 -20
  290. package/examples/pages/react/Tabs.tsx +72 -248
  291. package/examples/pages/react/Tags.tsx +45 -4
  292. package/examples/pages/react/Text.tsx +134 -0
  293. package/examples/pages/react/Tooltips.tsx +1 -1
  294. package/examples/pages/react/TreeSelect.tsx +178 -0
  295. package/examples/pages/react.html +4 -0
  296. package/images/avatar_64.png +0 -0
  297. package/package.json +10 -6
  298. package/react/components/Alert.d.ts +3 -0
  299. package/react/components/Alert.js +9 -1
  300. package/react/components/Avatar.d.ts +9 -0
  301. package/react/components/Avatar.js +19 -1
  302. package/react/components/ButtonGroup.d.ts +4 -2
  303. package/react/components/ButtonGroup.js +5 -3
  304. package/react/components/Carousel.js +1 -1
  305. package/react/components/CheckButtonGroup.d.ts +3 -1
  306. package/react/components/CheckButtonGroup.js +8 -2
  307. package/react/components/CheckGroup.d.ts +1 -0
  308. package/react/components/CheckGroup.js +1 -1
  309. package/react/components/Checkbox.d.ts +2 -1
  310. package/react/components/Checkbox.js +2 -2
  311. package/react/components/CheckboxButton.d.ts +1 -0
  312. package/react/components/CheckboxButton.js +2 -2
  313. package/react/components/ContentDivider.d.ts +12 -0
  314. package/react/components/ContentDivider.js +66 -0
  315. package/react/components/DatePicker.js +7 -2
  316. package/react/components/DropZone.d.ts +25 -0
  317. package/react/components/DropZone.js +93 -0
  318. package/react/components/Dropdown.d.ts +1 -0
  319. package/react/components/Dropdown.js +28 -23
  320. package/react/components/DropdownFirst.js +1 -1
  321. package/react/components/Form/FormGroup.d.ts +13 -0
  322. package/react/components/Form/FormGroup.js +61 -0
  323. package/react/components/Form/FormItem.d.ts +9 -0
  324. package/react/components/Form/FormItem.js +54 -0
  325. package/react/components/Form/FormLabel.d.ts +10 -0
  326. package/react/components/Form/FormLabel.js +54 -0
  327. package/react/components/Form/FormRow.d.ts +17 -0
  328. package/react/components/Form/FormRow.js +62 -0
  329. package/react/components/Form/FormText.d.ts +8 -0
  330. package/react/components/Form/FormText.js +47 -0
  331. package/react/components/Form/index.d.ts +5 -0
  332. package/react/components/Form/index.js +12 -0
  333. package/react/components/IconButton.d.ts +9 -2
  334. package/react/components/IconButton.js +13 -5
  335. package/react/components/Input.d.ts +20 -6
  336. package/react/components/Input.js +10 -13
  337. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  338. package/react/components/Layouts/AuthorinInnerSideBar.js +47 -0
  339. package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
  340. package/react/components/Layouts/AuthoringFrame.js +56 -0
  341. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  342. package/react/components/Layouts/AuthoringFrameContainer.js +47 -0
  343. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  344. package/react/components/Layouts/AuthoringFrameLeftBar.js +47 -0
  345. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  346. package/react/components/Layouts/AuthoringFrameMain.js +47 -0
  347. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  348. package/react/components/Layouts/AuthoringFrameNavBar.js +47 -0
  349. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  350. package/react/components/Layouts/AuthoringFrameOverlay.js +47 -0
  351. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
  352. package/react/components/Layouts/AuthoringFrameRightBar.js +47 -0
  353. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  354. package/react/components/Layouts/AuthoringFrameSidePanel.js +56 -0
  355. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  356. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +56 -0
  357. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  358. package/react/components/Layouts/AuthoringInnerBody.js +47 -0
  359. package/react/components/Layouts/AuthoringInnerHeader.d.ts +13 -0
  360. package/react/components/{RadioButton.js → Layouts/AuthoringInnerHeader.js} +20 -22
  361. package/react/components/Layouts/AuthoringMain.d.ts +12 -0
  362. package/react/components/Layouts/AuthoringMain.js +53 -0
  363. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  364. package/react/components/Layouts/AuthoringMainContainer.js +47 -0
  365. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  366. package/react/components/Layouts/AuthoringMainContent.js +47 -0
  367. package/react/components/Layouts/AuthoringMainToolBar.d.ts +8 -0
  368. package/react/components/Layouts/AuthoringMainToolBar.js +47 -0
  369. package/react/components/Layouts/Container.d.ts +14 -0
  370. package/react/components/Layouts/Container.js +60 -0
  371. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  372. package/react/components/Layouts/HeaderPanel.js +47 -0
  373. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  374. package/react/components/Layouts/LayoutContainer.js +47 -0
  375. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  376. package/react/components/Layouts/LeftPanel.js +54 -0
  377. package/react/components/Layouts/MainPanel.d.ts +10 -0
  378. package/react/components/Layouts/MainPanel.js +50 -0
  379. package/react/components/Layouts/PageLayout.d.ts +16 -0
  380. package/react/components/Layouts/PageLayout.js +64 -0
  381. package/react/components/Layouts/Panel.d.ts +65 -0
  382. package/react/components/Layouts/Panel.js +166 -0
  383. package/react/components/Layouts/RightPanel.d.ts +9 -0
  384. package/react/components/Layouts/RightPanel.js +47 -0
  385. package/react/components/Layouts/index.d.ts +24 -0
  386. package/react/components/Layouts/index.js +55 -0
  387. package/react/components/LeftMenu.d.ts +8 -3
  388. package/react/components/LeftMenu.js +55 -16
  389. package/react/components/Lists/BoxedList.d.ts +36 -0
  390. package/react/components/Lists/BoxedList.js +137 -0
  391. package/react/components/Lists/SimpleList.d.ts +21 -0
  392. package/react/components/Lists/SimpleList.js +78 -0
  393. package/react/components/Lists/index.d.ts +2 -0
  394. package/react/components/Lists/index.js +9 -0
  395. package/react/components/Modal.d.ts +3 -1
  396. package/react/components/Modal.js +3 -2
  397. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  398. package/react/components/Navigation/QuickNavBar.js +113 -0
  399. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  400. package/react/components/Navigation/SideBarMenu.js +77 -0
  401. package/react/components/Navigation/SideBarTabs.d.ts +22 -0
  402. package/react/components/Navigation/SideBarTabs.js +82 -0
  403. package/react/components/Navigation/index.d.ts +3 -0
  404. package/react/components/Navigation/index.js +8 -0
  405. package/react/components/RadioButtonGroup.d.ts +29 -0
  406. package/react/components/RadioButtonGroup.js +89 -0
  407. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  408. package/react/components/{Radio.js → RadioGroup.js} +15 -11
  409. package/react/components/Select.d.ts +1 -1
  410. package/react/components/Select.js +2 -9
  411. package/react/components/SelectGrid.js +3 -3
  412. package/react/components/SlidingToolbar.d.ts +1 -1
  413. package/react/components/SlidingToolbar.js +11 -1
  414. package/react/components/Spinner.d.ts +0 -1
  415. package/react/components/Spinner.js +0 -1
  416. package/react/components/SubNav.d.ts +8 -1
  417. package/react/components/SubNav.js +22 -4
  418. package/react/components/Switch.d.ts +4 -1
  419. package/react/components/Switch.js +19 -7
  420. package/react/components/TabCustom.d.ts +11 -22
  421. package/react/components/TabCustom.js +23 -52
  422. package/react/components/TabList.d.ts +2 -11
  423. package/react/components/TabList.js +11 -32
  424. package/react/components/Tag.d.ts +3 -3
  425. package/react/components/Tag.js +16 -5
  426. package/react/components/TagInput.d.ts +0 -1
  427. package/react/components/Text/Heading.d.ts +15 -0
  428. package/react/components/Text/Heading.js +77 -0
  429. package/react/components/Text/Text.d.ts +15 -0
  430. package/react/components/Text/Text.js +65 -0
  431. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  432. package/react/components/ThemeSelector.js +112 -0
  433. package/react/components/TimePicker.js +2 -2
  434. package/react/components/Togglebox.d.ts +1 -0
  435. package/react/components/Togglebox.js +9 -2
  436. package/react/index.d.ts +15 -4
  437. package/react/index.js +36 -6
  438. package/app/styles/_editor-themes.scss +0 -326
  439. package/app/styles/variables/_design-tokens-general.scss +0 -76
  440. package/app-typescript/components/Radio.tsx +0 -57
  441. package/app-typescript/components/RadioButton.tsx +0 -57
  442. package/dist/react/Radios.tsx +0 -391
  443. package/examples/pages/react/Radios.tsx +0 -391
@@ -0,0 +1,454 @@
1
+ import * as React from 'react';
2
+ import * as Components from './components/Index';
3
+ import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Switch, Icon, AvatarWrapper, AvatarContentImage, AvatarContentText, Text, EmptyState, Alert, SlidingToolbar, TabLabel, Tabs, Heading } from '../../../../app-typescript/index';
4
+ import * as Layout from '../../../../app-typescript/components/Layouts';
5
+ import * as Form from '../../../../app-typescript/components/Form';
6
+ import * as Nav from '../../../../app-typescript/components/Navigation';
7
+ import { BoxedList, BoxedListItem, BoxedListContentRow } from '../../../../app-typescript/components/Lists';
8
+ import { SimpleList, SimpleListItem } from '../../../../app-typescript/components/Lists';
9
+
10
+ interface IProps {
11
+ children?: React.ReactNode;
12
+ }
13
+
14
+ interface IState {
15
+ theme: 'dark' | 'light' | string;
16
+ itemType: string;
17
+ dropDownState: string;
18
+ itemSelected1: boolean;
19
+ itemSelected2: boolean;
20
+ itemSelected3: boolean;
21
+ value1: boolean;
22
+ value2: boolean;
23
+ value3: boolean;
24
+ leftPanelOpen: boolean;
25
+ rightPanelOpen: boolean;
26
+ rightPanelPinned: boolean;
27
+ sideOverlayOpen: boolean;
28
+ }
29
+
30
+ export class EditorTest extends React.Component<IProps, IState> {
31
+ constructor(props: IProps) {
32
+ super(props);
33
+ this.state = {
34
+ theme: 'light',
35
+ itemType: 'itemtype01',
36
+ dropDownState: '',
37
+ itemSelected1: false,
38
+ itemSelected2: false,
39
+ itemSelected3: false,
40
+ value1: false,
41
+ value2: false,
42
+ value3: false,
43
+ leftPanelOpen: false,
44
+ rightPanelOpen: false,
45
+ rightPanelPinned: false,
46
+ sideOverlayOpen: false,
47
+
48
+ }
49
+ this.handleTheme = this.handleTheme.bind(this);
50
+ }
51
+
52
+ handleTheme(newTheme: string) {
53
+ this.setState({
54
+ theme: newTheme
55
+ })
56
+ }
57
+
58
+ changeStatus(item: any, status: string) {
59
+ if (item.status.includes(status)) {
60
+ item.status.splice(item.status.indexOf(status), 1);
61
+ } else {
62
+ item.status.push(status);
63
+ }
64
+ }
65
+
66
+ render() {
67
+ return (
68
+ <Layout.AuthoringFrame
69
+ header={(
70
+ <SubNav zIndex={2}>
71
+ <ButtonGroup align='end'>
72
+ <Button
73
+ text="Open pinned"
74
+ style="hollow"
75
+ onClick={() => this.setState({'rightPanelOpen': !this.state.rightPanelOpen})}
76
+ />
77
+ <Divider size="mini" />
78
+ <ButtonGroup subgroup={true} spaces="no-space">
79
+ <Dropdown
80
+ items={[
81
+ {
82
+ type: 'group', label: 'Chose a theme', items: [
83
+ 'divider',
84
+ { label: 'Light', onSelect: () => this.handleTheme('light-ui')},
85
+ { label: 'Dark', onSelect: () => this.handleTheme('dark-ui')},
86
+ ]
87
+ },
88
+ ]}>
89
+ <NavButton type='default' icon='adjust' onClick={()=> false} />
90
+ </Dropdown>
91
+ <Tooltip text='Minimize' flow='left'>
92
+ <NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
93
+ </Tooltip>
94
+ <Tooltip text='More actions' flow='left'>
95
+ <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
96
+ </Tooltip>
97
+ <Tooltip text='Send to / Publish' flow='left'>
98
+ <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
99
+ </Tooltip>
100
+ </ButtonGroup>
101
+ </ButtonGroup>
102
+ </SubNav>
103
+ )}
104
+ leftPanel={(
105
+ <Nav.SideBarTabs
106
+ items={[
107
+ { icon: 'semantics', size: 'big', tooltip: 'Semantics', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
108
+ { icon: 'create-list', size: 'big', tooltip: 'Create list', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
109
+ { icon: 'picture', size: 'big', tooltip: 'Pictures', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
110
+ { icon: 'annotation', size: 'big', tooltip: 'Annotations', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
111
+ { icon: 'export', size: 'big', tooltip: 'Export', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) }]} />
112
+ )}
113
+ main={(
114
+ <Layout.AuthoringMain
115
+ toolBar={(
116
+ <React.Fragment>
117
+ <div className="sd-editor-toolbar__content">
118
+ <dl>
119
+ <dt>Created</dt>
120
+ <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
121
+ <dt>by</dt>
122
+ <dt>Nareg Asmarian</dt>
123
+ </dl>
124
+ <dl>
125
+ <dt>Modified</dt>
126
+ <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
127
+ </dl>
128
+ </div>
129
+ <ButtonGroup align='end'>
130
+ <IconButton icon="preview-mode" toolTipAppend={true} ariaValue="Print preview" onClick={()=> false} />
131
+ <IconButton icon="adjust" ariaValue="Toogle theme" onClick={()=> false} />
132
+ <IconButton icon="switches" ariaValue="Theme settings" onClick={()=> false} />
133
+ </ButtonGroup>
134
+ </React.Fragment>
135
+ )}
136
+ authoringHeader={(
137
+ <React.Fragment>
138
+ <Form.FormGroup inlineLabel={true}>
139
+ <Form.FormItem>
140
+ <Input
141
+ label='Slugline'
142
+ value='This is some value'
143
+ maxLength={30}
144
+ error='This is error message'
145
+ info='This is some hint message'
146
+ required={false}
147
+ disabled={false}
148
+ invalid={false}
149
+ onChange={(value) => {}} />
150
+ </Form.FormItem>
151
+ <Form.FormItem>
152
+ <Input
153
+ label='Slugline'
154
+ value='This is some value'
155
+ maxLength={30}
156
+ error='This is error message'
157
+ info='This is some hint message'
158
+ required={false}
159
+ disabled={false}
160
+ invalid={false}
161
+ onChange={(value) => {}} />
162
+ </Form.FormItem>
163
+ </Form.FormGroup>
164
+ <Form.FormGroup inlineLabel={true}>
165
+ <Form.FormItem>
166
+ <Input
167
+ label='Genre'
168
+ value='This is some value'
169
+ maxLength={30}
170
+ error='This is error message'
171
+ info='This is some hint message'
172
+ required={false}
173
+ disabled={false}
174
+ invalid={false}
175
+ onChange={(value) => {}} />
176
+ </Form.FormItem>
177
+ </Form.FormGroup>
178
+ <Form.FormGroup marginBottom='0' inlineLabel={true}>
179
+ <Form.FormItem>
180
+ <Input
181
+ label='Subject'
182
+ value='This is some value'
183
+ maxLength={30}
184
+ error='This is error message'
185
+ info='This is some hint message'
186
+ required={true}
187
+ disabled={false}
188
+ invalid={false}
189
+ onChange={(value) => {}} />
190
+ </Form.FormItem>
191
+ <Form.FormItem autoWidth={true}>
192
+ <Form.FormText>Just testing:</Form.FormText>
193
+ </Form.FormItem>
194
+ <Form.FormItem>
195
+ <Select
196
+ label='Categories'
197
+ labelHidden={true}
198
+ value='This is some value'
199
+ error='This is error message'
200
+ info='This is some hint message'
201
+ required={true}
202
+ disabled={false}
203
+ invalid={false}
204
+ onChange={(value) => {}}>
205
+ <Option>Option 1</Option>
206
+ <Option>Option 2</Option>
207
+ </Select>
208
+ </Form.FormItem>
209
+ <Form.FormItem autoWidth={true}>
210
+ <ButtonGroup>
211
+ <IconButton ariaValue="Submit" icon="picture" onClick={()=> false} />
212
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
213
+ <Button text="Submit" onClick={()=> false} type="primary" />
214
+ </ButtonGroup>
215
+ </Form.FormItem>
216
+ </Form.FormGroup>
217
+ </React.Fragment>
218
+ )}
219
+ authoringBookmarks={(
220
+ <Nav.QuickNavBar
221
+ scrollSpy='#scroll'
222
+ offset={-300}
223
+ items={[
224
+ { icon: 'heading-1', tooltip: 'Headline', onClick:()=> false, id: 'section1' },
225
+ { icon: 'align-left', tooltip: 'Body', onClick:()=> false, id: 'section2' },
226
+ { icon: 'picture', tooltip: 'Media', onClick:()=> false, id: 'section3' },
227
+ { icon: 'attachment-large', tooltip: 'Attachments', onClick:()=> false, id: 'section4' }]} />
228
+ )}>
229
+ <div id='scroll' style={{overflow: 'scroll', height: 600}}>
230
+ <div id='section1'>
231
+ <Heading type='h1' className='sd-padding--5'>Section 1</Heading>
232
+ <p className='sd-margin-b--3'>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
233
+ Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
234
+ <p className='sd-margin-b--3'>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
235
+ vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo
236
+ risus, porta ac consectetur ac, vestibulum at eros.</p>
237
+ <p className='sd-margin-b--3'>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
238
+ vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
239
+ vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
240
+ <p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra
241
+ augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
242
+ sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
243
+ purus sit amet fermentum.</p>
244
+ <Layout.Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
245
+ <span>Curabitur blandit tempus porttitor.</span>
246
+ <Button text="Test button" type="primary" onClick={()=> false} />
247
+ <Button text="Test button" type="highlight" onClick={()=> false} />
248
+ <ButtonGroup align="end">
249
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
250
+ <Button text="Submit" onClick={()=> false} type="primary" />
251
+ </ButtonGroup>
252
+ </Layout.Container>
253
+ </div>
254
+ <div id='section2'>
255
+ <Heading type='h1' className='sd-padding--5'>Section 2</Heading>
256
+ <p className='sd-margin-b--3'>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
257
+ Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
258
+ <p className='sd-margin-b--3'>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
259
+ vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo
260
+ risus, porta ac consectetur ac, vestibulum at eros.</p>
261
+ <p className='sd-margin-b--3'>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
262
+ vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
263
+ vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
264
+ <p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra
265
+ augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
266
+ sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
267
+ purus sit amet fermentum.</p>
268
+ <Layout.Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
269
+ <span>Curabitur blandit tempus porttitor.</span>
270
+ <Button text="Test button" type="primary" onClick={()=> false} />
271
+ <Button text="Test button" type="highlight" onClick={()=> false} />
272
+ <ButtonGroup align="end">
273
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
274
+ <Button text="Submit" onClick={()=> false} type="primary" />
275
+ </ButtonGroup>
276
+ </Layout.Container>
277
+ </div>
278
+ <div id='section3'>
279
+ <Heading type='h1' className='sd-padding--5'>Section 3</Heading>
280
+ <p className='sd-margin-b--3'>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
281
+ Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
282
+ <p className='sd-margin-b--3'>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
283
+ vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo
284
+ risus, porta ac consectetur ac, vestibulum at eros.</p>
285
+ <p className='sd-margin-b--3'>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
286
+ vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
287
+ vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
288
+ <p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra
289
+ augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
290
+ sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
291
+ purus sit amet fermentum.</p>
292
+ <Layout.Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
293
+ <span>Curabitur blandit tempus porttitor.</span>
294
+ <Button text="Test button" type="primary" onClick={()=> false} />
295
+ <Button text="Test button" type="highlight" onClick={()=> false} />
296
+ <ButtonGroup align="end">
297
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
298
+ <Button text="Submit" onClick={()=> false} type="primary" />
299
+ </ButtonGroup>
300
+ </Layout.Container>
301
+ </div>
302
+
303
+ <div id='section4'>
304
+ <Heading type='h1' className='sd-padding--5'>Section 4</Heading>
305
+ <p className='sd-margin-b--3'>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
306
+ Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
307
+ <p className='sd-margin-b--3'>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
308
+ vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo
309
+ risus, porta ac consectetur ac, vestibulum at eros.</p>
310
+ <p className='sd-margin-b--3'>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
311
+ vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
312
+ vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
313
+ <p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra
314
+ augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
315
+ sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
316
+ purus sit amet fermentum.</p>
317
+ <Layout.Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
318
+ <span>Curabitur blandit tempus porttitor.</span>
319
+ <Button text="Test button" type="primary" onClick={()=> false} />
320
+ <Button text="Test button" type="highlight" onClick={()=> false} />
321
+ <ButtonGroup align="end">
322
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
323
+ <Button text="Submit" onClick={()=> false} type="primary" />
324
+ </ButtonGroup>
325
+ </Layout.Container>
326
+ </div>
327
+ </div>
328
+
329
+ </Layout.AuthoringMain>
330
+ )}
331
+ sidePanelPinned={this.state.rightPanelOpen}
332
+ sidePanel={(
333
+ <Layout.Panel side='right' background='grey' open={this.state.rightPanelOpen} size='x-small'>
334
+ <Layout.PanelHeader title='Pinned content' onClose={() => this.setState({'rightPanelOpen': false})}>
335
+ </Layout.PanelHeader>
336
+ <Layout.PanelContent>
337
+ <Layout.PanelContentBlock>
338
+ <BoxedList density='comfortable'>
339
+ <BoxedListItem
340
+ type="success"
341
+ clickable={true}
342
+ media={(
343
+ <Icon name='slideshow' />
344
+ )}
345
+ actions={(
346
+ <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
347
+ )}
348
+ >
349
+ <BoxedListContentRow>
350
+ Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
351
+ </BoxedListContentRow>
352
+ <BoxedListContentRow>
353
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
354
+ </BoxedListContentRow>
355
+ </BoxedListItem>
356
+ <BoxedListItem
357
+ type="warning"
358
+ media={(
359
+ <AvatarWrapper
360
+ size="medium"
361
+ >
362
+ <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
363
+ </AvatarWrapper>
364
+ )}
365
+ footer={(
366
+ <ButtonGroup align="end">
367
+ <Button text="cancel" size="small" style="hollow" onClick={()=> false} />
368
+ <Button text="yes" size="small" style="hollow" type="primary" onClick={()=> false} />
369
+ </ButtonGroup>
370
+ )}
371
+ actions={(
372
+ <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
373
+ )}
374
+ >
375
+ <BoxedListContentRow>
376
+ Maecenas sed diam eget risus varius blandit sit amet magna.
377
+ </BoxedListContentRow>
378
+ </BoxedListItem>
379
+ <BoxedListItem
380
+ selected={true}
381
+ actions={(
382
+ <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
383
+ )}
384
+ >
385
+ <BoxedListContentRow>
386
+ Maecenas sed diam eget risus varius blandit sit amet magna. Vestibulum id ligula porta felis euismod semper.
387
+ </BoxedListContentRow>
388
+ </BoxedListItem>
389
+ </BoxedList>
390
+ </Layout.PanelContentBlock>
391
+ </Layout.PanelContent>
392
+ </Layout.Panel>
393
+ )}
394
+ sideOverlayOpen={this.state.sideOverlayOpen}
395
+ sideOverlay={(
396
+ <Layout.Panel background='light' open={this.state.sideOverlayOpen} size='x-small'>
397
+ <Layout.PanelHeader title="Metadata (overlay pannel)" onClose={() => this.setState({'sideOverlayOpen': false})}>
398
+ {/* <Tabs onClick={()=> false}>
399
+ <TabLabel label='Content' indexValue={0}/>
400
+ <TabLabel label='Metadata' indexValue={1}/>
401
+ <TabLabel label='Duplicates' indexValue={2}/>
402
+ </Tabs> */}
403
+
404
+ {/* <SlidingToolbar>
405
+ <Button text="Cancel" onClick={()=> false} />
406
+ <Button text="Save" type="primary" onClick={()=> false} />
407
+ </SlidingToolbar> */}
408
+ {/* <Alert icon="warning-sign" size='small' type='warning'>
409
+ Sed tincidunt ipsum metus, consectetur vestibulum turpis luctus in.
410
+ </Alert> */}
411
+ </Layout.PanelHeader>
412
+ <Layout.PanelContent
413
+ loading={false}
414
+ empty={false}
415
+ emptyTemplate={(
416
+ <EmptyState title="test" />
417
+ )} >
418
+ <Layout.PanelContentBlock>
419
+ <SimpleList border={true}>
420
+ <SimpleListItem justify="space-between">
421
+ <Form.FormLabel text="My label" />
422
+ <Switch toolTipFlow='left' label={{text:'My label', hidden: true}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
423
+ </SimpleListItem>
424
+ <SimpleListItem justify="space-between">
425
+ <Form.FormLabel text="Form label" />
426
+ <Switch toolTipFlow='left' label={{text:'Form label', hidden: true}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
427
+ </SimpleListItem>
428
+ <SimpleListItem stacked={true}>
429
+ <Form.FormLabel text="Label two" />
430
+ <Text size="small" weight="light">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.</Text>
431
+ </SimpleListItem>
432
+ </SimpleList>
433
+ </Layout.PanelContentBlock>
434
+ </Layout.PanelContent>
435
+ </Layout.Panel>
436
+ )}
437
+ sideBar={(
438
+ <Nav.SideBarTabs
439
+ items={[
440
+ { icon: 'info', size: 'big', tooltip: 'Info', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
441
+ { icon: 'chat', size: 'big', tooltip: 'Comments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
442
+ { icon: 'history', size: 'big', tooltip: 'History', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
443
+ { icon: 'package', size: 'big', tooltip: 'Packages', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
444
+ { icon: 'attachment', size: 'big', tooltip: 'Attachments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
445
+ { icon: 'comments', size: 'big', tooltip: 'Inline Comments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
446
+ { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) }]} />
447
+ )}
448
+ overlayPanel={(
449
+ <div></div>
450
+ )}
451
+ />
452
+ );
453
+ }
454
+ }
@@ -69,7 +69,7 @@ export class FirstPlayground extends React.Component<IProps, IState> {
69
69
 
70
70
  <div className='sd-content-wrapper__main-content-area sd-main-content-grid comfort'>
71
71
  <Components.HeaderPanel >
72
- <SubNav theme={this.state.theme}>
72
+ <SubNav>
73
73
  <ButtonGroup align='inline'>
74
74
  <Dropdown
75
75
  items={[
@@ -85,11 +85,11 @@ export class FirstPlayground extends React.Component<IProps, IState> {
85
85
  <NavButton onClick={() => false} />
86
86
  </Dropdown>
87
87
  </ButtonGroup>
88
- <ButtonGroup align='right'>
88
+ <ButtonGroup align='end'>
89
89
  <NavButton icon='dots-vertical' onClick={() => false} />
90
90
  </ButtonGroup>
91
91
  </SubNav>
92
- <SubNav theme={this.state.theme}>
92
+ <SubNav>
93
93
  <ButtonGroup >
94
94
  <NavButton icon='filter-large' onClick={this.handleFilter} />
95
95
  </ButtonGroup>
@@ -100,7 +100,7 @@ export class FirstPlayground extends React.Component<IProps, IState> {
100
100
  { value: 'itemtype03', label: 'Videos only' },
101
101
  { value: 'itemtype04', label: 'Documents only' }]} />
102
102
  </CheckButtonGroup>
103
- <ButtonGroup align='right'>
103
+ <ButtonGroup align='end'>
104
104
  <NavButton icon='adjust' onClick={this.handleTheme} />
105
105
  <NavButton icon='th-list' onClick={() => false} />
106
106
  </ButtonGroup>
@@ -1,3 +1,7 @@
1
1
  export { FirstPlayground } from './FirstPlayground';
2
2
  export { SamsPlayground } from './SamsPlayground';
3
- export { TestGround } from './TestGround';
3
+ export { TestGround } from './TestGround';
4
+ export { UiPlayground } from './UiPlayground';
5
+ export { PageLayoutTest } from './PageLayoutTest';
6
+ export { EditorTest } from './EditorTest';
7
+ export { PersonalProfile } from './PersonalProfile';