superdesk-ui-framework 3.0.0-beta.0 → 3.0.0-rc12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (679) hide show
  1. package/app/fonts/sd_big-icons.eot +0 -0
  2. package/app/fonts/sd_big-icons.svg +55 -53
  3. package/app/fonts/sd_big-icons.ttf +0 -0
  4. package/app/fonts/sd_big-icons.woff +0 -0
  5. package/app/fonts/sd_icons.eot +0 -0
  6. package/app/fonts/sd_icons.svg +15 -7
  7. package/app/fonts/sd_icons.ttf +0 -0
  8. package/app/fonts/sd_icons.woff +0 -0
  9. package/app/img/SD-logo.svg +52 -0
  10. package/app/img/dots.svg +3 -0
  11. package/app/img/spinner.svg +3 -0
  12. package/app/img/themes/theme-base.svg +1 -0
  13. package/app/img/themes/theme-contrast.svg +45 -0
  14. package/app/img/themes/theme-dark.svg +1 -0
  15. package/app/img/themes/theme-light.svg +1 -0
  16. package/app/index.js +1 -1
  17. package/app/scripts/modals.js +22 -9
  18. package/app/scripts/toggleBoxNext.js +1 -1
  19. package/app/styles/_accessibility.scss +312 -4
  20. package/app/styles/_alerts.scss +57 -19
  21. package/app/styles/_avatar.scss +25 -1
  22. package/app/styles/_badge.scss +2 -2
  23. package/app/styles/_big-icon-font.scss +64 -24
  24. package/app/styles/_boxed-list.scss +67 -21
  25. package/app/styles/_buttons.scss +441 -333
  26. package/app/styles/_carousel.scss +17 -11
  27. package/app/styles/_content-divider.scss +63 -8
  28. package/app/styles/_design-tokens.scss +2 -0
  29. package/app/styles/_hamburger.scss +160 -0
  30. package/app/styles/_helpers.scss +221 -34
  31. package/app/styles/_icon-font.scss +351 -307
  32. package/app/styles/_icon-labels.scss +66 -10
  33. package/app/styles/_labels.scss +12 -7
  34. package/app/styles/_loaders.scss +13 -0
  35. package/app/styles/_master-desk.scss +8 -7
  36. package/app/styles/_mixins.scss +13 -3
  37. package/app/styles/_modals.scss +10 -31
  38. package/app/styles/_normalize.scss +5 -0
  39. package/app/styles/_panel-info.scss +19 -14
  40. package/app/styles/_sd-tag-input.scss +280 -219
  41. package/app/styles/_simple-list.scss +37 -17
  42. package/app/styles/_spinner.scss +46 -0
  43. package/app/styles/_table-list.scss +348 -0
  44. package/app/styles/_tabs.scss +6 -8
  45. package/app/styles/_tag-labels.scss +11 -2
  46. package/app/styles/_thumb-carousel.scss +11 -10
  47. package/app/styles/_toggle-box.scss +46 -12
  48. package/app/styles/_toggle-button.scss +42 -0
  49. package/app/styles/_tooltips.scss +3 -3
  50. package/app/styles/_variables.scss +0 -1
  51. package/app/styles/app.scss +15 -2
  52. package/app/styles/components/_card-item.scss +33 -21
  53. package/app/styles/components/_list-item.scss +63 -35
  54. package/app/styles/components/_sd-collapse-box.scss +6 -6
  55. package/app/styles/components/_sd-comment-box.scss +8 -4
  56. package/app/styles/components/_sd-dropzone.scss +114 -0
  57. package/app/styles/components/_sd-editor-popup.scss +4 -4
  58. package/app/styles/components/_sd-grid-item.scss +32 -18
  59. package/app/styles/components/_sd-media-carousel.scss +37 -2
  60. package/app/styles/components/_sd-notification-panel.scss +48 -0
  61. package/app/styles/components/_sd-photo-preview.scss +3 -3
  62. package/app/styles/components/_sd-searchbar.scss +12 -98
  63. package/app/styles/components/_subnav.scss +464 -435
  64. package/app/styles/components/_theme-selector.scss +189 -0
  65. package/app/styles/design-tokens/_design-tokens-general.scss +81 -0
  66. package/app/styles/{variables → design-tokens}/_new-colors.scss +68 -30
  67. package/app/styles/dropdowns/_basic-dropdown.scss +36 -3
  68. package/app/styles/editor/_editor-buttons.scss +54 -0
  69. package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
  70. package/app/styles/form-elements/_checkbox.scss +85 -58
  71. package/app/styles/form-elements/_forms-general.scss +171 -21
  72. package/app/styles/form-elements/_input-wrap.scss +138 -0
  73. package/app/styles/form-elements/_inputs.scss +602 -104
  74. package/app/styles/form-elements/_select-grid.scss +79 -0
  75. package/app/styles/grids/_basic-grid.scss +52 -26
  76. package/app/styles/grids/_grid-layout.scss +207 -66
  77. package/app/styles/grids/_layout-grid.scss +4 -4
  78. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  79. package/app/styles/interface-elements/_side-panel.scss +88 -59
  80. package/app/styles/layout/_basic-layout.scss +3 -6
  81. package/app/styles/layout/_container.scss +35 -0
  82. package/app/styles/layout/_editor.scss +404 -0
  83. package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
  84. package/app/styles/menus/_sd-left-navigation.scss +38 -3
  85. package/app/styles/menus/_sd-sidebar-menu.scss +109 -14
  86. package/app/styles/menus/_sd-top-menu.scss +19 -5
  87. package/app/styles/pr-superdesk-theme.scss +3 -0
  88. package/app/styles/primereact/_pr-datepicker.scss +62 -9
  89. package/app/styles/primereact/_pr-dialog.scss +44 -7
  90. package/app/styles/primereact/_pr-dropdown.scss +170 -7
  91. package/app/styles/primereact/_pr-general.scss +4 -0
  92. package/app/styles/primereact/_pr-menu.scss +6 -5
  93. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  94. package/app/styles/variables/_colors.scss +23 -473
  95. package/app/styles/variables/_dimensions.scss +85 -1
  96. package/app/styles/variables/_form-elements.scss +0 -2
  97. package/app-typescript/components/Alert.tsx +16 -1
  98. package/app-typescript/components/Avatar.tsx +21 -0
  99. package/app-typescript/components/Badge.tsx +3 -2
  100. package/app-typescript/components/Button.tsx +7 -1
  101. package/app-typescript/components/ButtonGroup.tsx +5 -4
  102. package/app-typescript/components/Carousel.tsx +1 -1
  103. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  104. package/app-typescript/components/CheckGroup.tsx +2 -1
  105. package/app-typescript/components/Checkbox.tsx +7 -3
  106. package/app-typescript/components/CheckboxButton.tsx +9 -2
  107. package/app-typescript/components/ContentDivider.tsx +3 -0
  108. package/app-typescript/components/CreateButton.tsx +38 -0
  109. package/app-typescript/components/DatePicker.tsx +77 -38
  110. package/app-typescript/components/DonutChart.tsx +1 -1
  111. package/app-typescript/components/DropZone.tsx +89 -0
  112. package/app-typescript/components/Dropdown.tsx +133 -80
  113. package/app-typescript/components/DurationInput.tsx +400 -0
  114. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  115. package/app-typescript/components/EmptyState.tsx +2 -1
  116. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  117. package/app-typescript/components/Form/FormItem.tsx +20 -0
  118. package/app-typescript/components/Form/FormLabel.tsx +29 -0
  119. package/app-typescript/components/Form/FormRow.tsx +40 -0
  120. package/app-typescript/components/Form/FormRowNew.tsx +41 -0
  121. package/app-typescript/components/Form/FormText.tsx +15 -0
  122. package/app-typescript/components/Form/InputBase.tsx +95 -0
  123. package/app-typescript/components/Form/InputNew.tsx +107 -0
  124. package/app-typescript/components/Form/InputWrapper.tsx +79 -0
  125. package/app-typescript/components/Form/index.tsx +9 -0
  126. package/app-typescript/components/Icon.tsx +4 -2
  127. package/app-typescript/components/IconButton.tsx +30 -12
  128. package/app-typescript/components/IconLabel.tsx +8 -1
  129. package/app-typescript/components/IconPicker.tsx +277 -0
  130. package/app-typescript/components/Input.tsx +67 -35
  131. package/app-typescript/components/Label.tsx +65 -10
  132. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  133. package/app-typescript/components/Layouts/AuthoringContainer.tsx +28 -0
  134. package/app-typescript/components/Layouts/AuthoringFrame.tsx +73 -0
  135. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  136. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  137. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  138. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  139. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  140. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +34 -0
  141. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  142. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  143. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  144. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
  145. package/app-typescript/components/Layouts/AuthoringMain.tsx +52 -0
  146. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  147. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  148. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -0
  149. package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
  150. package/app-typescript/components/Layouts/Container.tsx +30 -0
  151. package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
  152. package/app-typescript/components/Layouts/CoreLayout.tsx +63 -0
  153. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
  154. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
  155. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +22 -0
  156. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
  157. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
  158. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
  159. package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
  160. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  161. package/app-typescript/components/Layouts/Layout.tsx +33 -0
  162. package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
  163. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  164. package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
  165. package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
  166. package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
  167. package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
  168. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  169. package/app-typescript/components/Layouts/Panel.tsx +208 -0
  170. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  171. package/app-typescript/components/Layouts/index.tsx +43 -0
  172. package/app-typescript/components/LeftMenu.tsx +116 -31
  173. package/app-typescript/components/ListItemLoader.tsx +30 -0
  174. package/app-typescript/components/Lists/BoxedList.tsx +169 -0
  175. package/app-typescript/components/Lists/ContentList.tsx +133 -0
  176. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  177. package/app-typescript/components/Lists/TableList.tsx +405 -0
  178. package/app-typescript/components/Lists/index.tsx +2 -0
  179. package/app-typescript/components/Menu.tsx +33 -9
  180. package/app-typescript/components/Modal.tsx +31 -18
  181. package/app-typescript/components/MultiSelect.tsx +99 -0
  182. package/app-typescript/components/NavButton.tsx +6 -1
  183. package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
  184. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  185. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  186. package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
  187. package/app-typescript/components/Navigation/index.tsx +3 -0
  188. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  189. package/app-typescript/components/RadioGroup.tsx +69 -0
  190. package/app-typescript/components/SearchBar.tsx +106 -0
  191. package/app-typescript/components/Select.tsx +31 -31
  192. package/app-typescript/components/SelectGrid.tsx +233 -0
  193. package/app-typescript/components/SelectWithTemplate.tsx +32 -7
  194. package/app-typescript/components/SidebarMenu.tsx +68 -0
  195. package/app-typescript/components/Skeleton.tsx +48 -0
  196. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  197. package/app-typescript/components/Spacer.tsx +87 -0
  198. package/app-typescript/components/Spinner.tsx +32 -0
  199. package/app-typescript/components/SubNav.tsx +25 -4
  200. package/app-typescript/components/Switch.tsx +34 -12
  201. package/app-typescript/components/SwitchGroup.tsx +2 -1
  202. package/app-typescript/components/Tag.tsx +31 -7
  203. package/app-typescript/components/Text/Heading.tsx +67 -0
  204. package/app-typescript/components/Text/Text.tsx +36 -0
  205. package/app-typescript/components/Text/Time.tsx +34 -0
  206. package/app-typescript/components/ThemeSelector.tsx +113 -0
  207. package/app-typescript/components/TimePicker.tsx +38 -15
  208. package/app-typescript/components/Togglebox.tsx +9 -7
  209. package/app-typescript/components/Tooltip.tsx +7 -5
  210. package/app-typescript/components/TreeSelect.tsx +664 -0
  211. package/app-typescript/components/WithSizeObserver.tsx +88 -0
  212. package/app-typescript/helpers.tsx +3 -0
  213. package/app-typescript/index.ts +30 -3
  214. package/dist/SD-logo.svg +52 -0
  215. package/dist/avatar-2.jpg +0 -0
  216. package/dist/avatar-3.jpg +0 -0
  217. package/dist/avatar-4.jpg +0 -0
  218. package/dist/avatar-5.jpg +0 -0
  219. package/dist/avatar-6.jpg +0 -0
  220. package/dist/components/basic-grid.html +1 -1
  221. package/dist/components/checkbox.html +1 -1
  222. package/dist/components/modals.html +1 -0
  223. package/dist/dots.svg +3 -0
  224. package/dist/examples.bundle.css +8916 -1617
  225. package/dist/examples.bundle.js +99314 -71560
  226. package/dist/playgrounds/accessible-theme-test.html +1 -1
  227. package/dist/playgrounds/boxed-list.html +1 -1
  228. package/dist/playgrounds/cards.html +9 -4
  229. package/dist/playgrounds/editor-3-test.html +15 -0
  230. package/dist/playgrounds/form-layout.html +9 -7
  231. package/dist/playgrounds/layout-test-2.html +1 -1
  232. package/dist/playgrounds/list-item-test.html +1 -1
  233. package/dist/playgrounds/master-desk.html +2 -4
  234. package/dist/playgrounds/media-carousel.html +1 -1
  235. package/dist/playgrounds/photo-desk.html +1 -1
  236. package/dist/playgrounds/planning.html +1 -1
  237. package/dist/playgrounds/publish.html +1 -1
  238. package/dist/playgrounds/publisher-content-analytics.html +1 -1
  239. package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
  240. package/dist/playgrounds/publisher-content-list-manual.html +1 -1
  241. package/dist/playgrounds/publisher-content-lists.html +1 -1
  242. package/dist/playgrounds/publisher-dashboard.html +1 -1
  243. package/dist/playgrounds/publisher-output-control.html +1 -1
  244. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +156 -0
  245. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  246. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  247. package/dist/playgrounds/react-playgrounds/Index.tsx +8 -1
  248. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  249. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  250. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  251. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
  252. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
  253. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
  254. package/dist/playgrounds/react-playgrounds/TestGround.tsx +631 -24
  255. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  256. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  257. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  258. package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  259. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  260. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  261. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  262. package/dist/playgrounds/swimlane-view.html +1 -1
  263. package/dist/playgrounds/toasts.html +1 -1
  264. package/dist/playgrounds/video-editor.html +1 -1
  265. package/dist/react/Alerts.tsx +91 -18
  266. package/dist/react/Avatar.tsx +314 -127
  267. package/dist/react/Badges.tsx +18 -0
  268. package/dist/react/BoxedList.tsx +362 -0
  269. package/dist/react/ButtonGroups.tsx +66 -65
  270. package/dist/react/Buttons.tsx +65 -113
  271. package/dist/react/Carousel.tsx +2 -3
  272. package/dist/react/Checkboxs.tsx +66 -25
  273. package/dist/react/Container.tsx +143 -0
  274. package/dist/react/ContentDivider.tsx +22 -18
  275. package/dist/react/ContentList.tsx +462 -0
  276. package/dist/react/CreateButton.tsx +71 -0
  277. package/dist/react/DatePicker.tsx +31 -6
  278. package/dist/react/DropZone.tsx +111 -0
  279. package/dist/react/Dropdowns.tsx +580 -48
  280. package/dist/react/DurationInput.tsx +108 -0
  281. package/dist/react/Heading.tsx +106 -0
  282. package/dist/react/IconButtons.tsx +51 -21
  283. package/dist/react/IconFont.tsx +7 -6
  284. package/dist/react/IconLabels.tsx +24 -2
  285. package/dist/react/IconPicker.tsx +65 -0
  286. package/dist/react/Index.tsx +125 -19
  287. package/dist/react/Inputs.tsx +289 -6
  288. package/dist/react/Labels.tsx +51 -1
  289. package/dist/react/LeftNavigations.tsx +194 -15
  290. package/dist/react/ListItems.tsx +34 -0
  291. package/dist/react/Modal.tsx +8 -7
  292. package/dist/react/MultiSelect.tsx +201 -0
  293. package/dist/react/NavButtons.tsx +35 -5
  294. package/dist/react/Panel.tsx +366 -0
  295. package/dist/react/QuickNavigationBar.tsx +142 -0
  296. package/dist/react/RadioGroup.tsx +351 -0
  297. package/dist/react/SelectGrid.tsx +121 -0
  298. package/dist/react/SelectWithTemplate.tsx +6 -1
  299. package/dist/react/Selects.tsx +57 -0
  300. package/dist/react/SimpleList.tsx +148 -0
  301. package/dist/react/SubNav.tsx +65 -18
  302. package/dist/react/TableList.tsx +161 -0
  303. package/dist/react/Tags.tsx +57 -5
  304. package/dist/react/Text.tsx +134 -0
  305. package/dist/react/TimePicker.tsx +22 -12
  306. package/dist/react/Togglebox.tsx +1 -1
  307. package/dist/react/TreeSelect.tsx +422 -0
  308. package/dist/react/WithSizeObserver.tsx +44 -0
  309. package/dist/react/tree-select/TreeSelect.tsx +273 -0
  310. package/dist/react/tree-select/example-1.tsx +71 -0
  311. package/dist/react/tree-select/example-2.tsx +59 -0
  312. package/dist/react.html +4 -0
  313. package/dist/sd_big-icons.eot +0 -0
  314. package/dist/sd_big-icons.svg +55 -53
  315. package/dist/sd_big-icons.ttf +0 -0
  316. package/dist/sd_big-icons.woff +0 -0
  317. package/dist/sd_icons.eot +0 -0
  318. package/dist/sd_icons.svg +15 -7
  319. package/dist/sd_icons.ttf +0 -0
  320. package/dist/sd_icons.woff +0 -0
  321. package/dist/superdesk-ui.bundle.css +55688 -25164
  322. package/dist/superdesk-ui.bundle.js +89363 -66822
  323. package/dist/vendor.bundle.js +25685 -25663
  324. package/examples/css/docs-page.css +103 -33
  325. package/examples/img/avatar-2.jpg +0 -0
  326. package/examples/img/avatar-3.jpg +0 -0
  327. package/examples/img/avatar-4.jpg +0 -0
  328. package/examples/img/avatar-5.jpg +0 -0
  329. package/examples/img/avatar-6.jpg +0 -0
  330. package/examples/index.js +32 -0
  331. package/examples/pages/components/basic-grid.html +1 -1
  332. package/examples/pages/components/checkbox.html +1 -1
  333. package/examples/pages/components/modals.html +1 -0
  334. package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
  335. package/examples/pages/playgrounds/boxed-list.html +1 -1
  336. package/examples/pages/playgrounds/cards.html +9 -4
  337. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  338. package/examples/pages/playgrounds/form-layout.html +9 -7
  339. package/examples/pages/playgrounds/layout-test-2.html +1 -1
  340. package/examples/pages/playgrounds/list-item-test.html +1 -1
  341. package/examples/pages/playgrounds/master-desk.html +2 -4
  342. package/examples/pages/playgrounds/media-carousel.html +1 -1
  343. package/examples/pages/playgrounds/photo-desk.html +1 -1
  344. package/examples/pages/playgrounds/planning.html +1 -1
  345. package/examples/pages/playgrounds/publish.html +1 -1
  346. package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
  347. package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
  348. package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
  349. package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
  350. package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
  351. package/examples/pages/playgrounds/publisher-output-control.html +1 -1
  352. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +156 -0
  353. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  354. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  355. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +8 -1
  356. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  357. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  358. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  359. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
  360. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
  361. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
  362. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +631 -24
  363. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  364. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  365. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  366. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  367. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  368. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  369. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  370. package/examples/pages/playgrounds/swimlane-view.html +1 -1
  371. package/examples/pages/playgrounds/toasts.html +1 -1
  372. package/examples/pages/playgrounds/video-editor.html +1 -1
  373. package/examples/pages/react/Alerts.tsx +91 -18
  374. package/examples/pages/react/Avatar.tsx +314 -127
  375. package/examples/pages/react/Badges.tsx +18 -0
  376. package/examples/pages/react/BoxedList.tsx +362 -0
  377. package/examples/pages/react/ButtonGroups.tsx +66 -65
  378. package/examples/pages/react/Buttons.tsx +65 -113
  379. package/examples/pages/react/Carousel.tsx +2 -3
  380. package/examples/pages/react/Checkboxs.tsx +66 -25
  381. package/examples/pages/react/Container.tsx +143 -0
  382. package/examples/pages/react/ContentDivider.tsx +22 -18
  383. package/examples/pages/react/ContentList.tsx +462 -0
  384. package/examples/pages/react/CreateButton.tsx +71 -0
  385. package/examples/pages/react/DatePicker.tsx +31 -6
  386. package/examples/pages/react/DropZone.tsx +111 -0
  387. package/examples/pages/react/Dropdowns.tsx +580 -48
  388. package/examples/pages/react/DurationInput.tsx +108 -0
  389. package/examples/pages/react/Heading.tsx +106 -0
  390. package/examples/pages/react/IconButtons.tsx +51 -21
  391. package/examples/pages/react/IconFont.tsx +7 -6
  392. package/examples/pages/react/IconLabels.tsx +24 -2
  393. package/examples/pages/react/IconPicker.tsx +65 -0
  394. package/examples/pages/react/Index.tsx +125 -19
  395. package/examples/pages/react/Inputs.tsx +289 -6
  396. package/examples/pages/react/Labels.tsx +51 -1
  397. package/examples/pages/react/LeftNavigations.tsx +194 -15
  398. package/examples/pages/react/ListItems.tsx +34 -0
  399. package/examples/pages/react/Modal.tsx +8 -7
  400. package/examples/pages/react/MultiSelect.tsx +201 -0
  401. package/examples/pages/react/NavButtons.tsx +35 -5
  402. package/examples/pages/react/Panel.tsx +366 -0
  403. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  404. package/examples/pages/react/RadioGroup.tsx +351 -0
  405. package/examples/pages/react/SelectGrid.tsx +121 -0
  406. package/examples/pages/react/SelectWithTemplate.tsx +6 -1
  407. package/examples/pages/react/Selects.tsx +57 -0
  408. package/examples/pages/react/SimpleList.tsx +148 -0
  409. package/examples/pages/react/SubNav.tsx +65 -18
  410. package/examples/pages/react/TableList.tsx +161 -0
  411. package/examples/pages/react/Tags.tsx +57 -5
  412. package/examples/pages/react/Text.tsx +134 -0
  413. package/examples/pages/react/TimePicker.tsx +22 -12
  414. package/examples/pages/react/Togglebox.tsx +1 -1
  415. package/examples/pages/react/TreeSelect.tsx +422 -0
  416. package/examples/pages/react/WithSizeObserver.tsx +44 -0
  417. package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
  418. package/examples/pages/react/tree-select/example-1.tsx +71 -0
  419. package/examples/pages/react/tree-select/example-2.tsx +59 -0
  420. package/examples/pages/react.html +4 -0
  421. package/package.json +16 -11
  422. package/react/components/Alert.d.ts +3 -0
  423. package/react/components/Alert.js +17 -7
  424. package/react/components/Autocomplete.js +16 -12
  425. package/react/components/Avatar.d.ts +9 -0
  426. package/react/components/Avatar.js +24 -4
  427. package/react/components/Badge.d.ts +1 -0
  428. package/react/components/Badge.js +9 -7
  429. package/react/components/Button.d.ts +2 -0
  430. package/react/components/Button.js +12 -8
  431. package/react/components/ButtonGroup.d.ts +3 -2
  432. package/react/components/ButtonGroup.js +9 -7
  433. package/react/components/Carousel.js +5 -3
  434. package/react/components/CheckButtonGroup.d.ts +3 -1
  435. package/react/components/CheckButtonGroup.js +14 -6
  436. package/react/components/CheckGroup.d.ts +1 -0
  437. package/react/components/CheckGroup.js +6 -4
  438. package/react/components/Checkbox.d.ts +2 -1
  439. package/react/components/Checkbox.js +7 -5
  440. package/react/components/CheckboxButton.d.ts +1 -0
  441. package/react/components/CheckboxButton.js +8 -6
  442. package/react/components/ContentDivider.d.ts +1 -0
  443. package/react/components/ContentDivider.js +10 -6
  444. package/react/components/CreateButton.d.ts +17 -0
  445. package/react/components/CreateButton.js +68 -0
  446. package/react/components/DatePicker.d.ts +11 -0
  447. package/react/components/DatePicker.js +45 -31
  448. package/react/components/Divider.js +6 -4
  449. package/react/components/DonutChart.d.ts +1 -1
  450. package/react/components/DonutChart.js +24 -6
  451. package/react/components/DropZone.d.ts +25 -0
  452. package/react/components/DropZone.js +95 -0
  453. package/react/components/Dropdown.d.ts +7 -5
  454. package/react/components/Dropdown.js +64 -36
  455. package/react/components/DropdownFirst.js +18 -11
  456. package/react/components/DurationInput.d.ts +42 -0
  457. package/react/components/DurationInput.js +364 -0
  458. package/react/components/EmptyState.d.ts +1 -0
  459. package/react/components/EmptyState.js +8 -6
  460. package/react/components/Form/FormGroup.d.ts +13 -0
  461. package/react/components/Form/FormGroup.js +63 -0
  462. package/react/components/Form/FormItem.d.ts +9 -0
  463. package/react/components/Form/FormItem.js +56 -0
  464. package/react/components/Form/FormLabel.d.ts +13 -0
  465. package/react/components/Form/FormLabel.js +62 -0
  466. package/react/components/Form/FormRow.d.ts +17 -0
  467. package/react/components/Form/FormRow.js +64 -0
  468. package/react/components/Form/FormRowNew.d.ts +12 -0
  469. package/react/components/Form/FormRowNew.js +67 -0
  470. package/react/components/Form/FormText.d.ts +8 -0
  471. package/react/components/Form/FormText.js +49 -0
  472. package/react/components/Form/InputBase.d.ts +41 -0
  473. package/react/components/Form/InputBase.js +86 -0
  474. package/react/components/Form/InputNew.d.ts +45 -0
  475. package/react/components/Form/InputNew.js +75 -0
  476. package/react/components/Form/InputWrapper.d.ts +28 -0
  477. package/react/components/Form/InputWrapper.js +91 -0
  478. package/react/components/Form/index.d.ts +9 -0
  479. package/react/components/Form/index.js +21 -0
  480. package/react/components/FormLabel.js +5 -3
  481. package/react/components/GridItem.js +9 -7
  482. package/react/components/GridList.js +8 -6
  483. package/react/components/HeadingText.js +4 -2
  484. package/react/components/HelloWorld.js +4 -2
  485. package/react/components/Icon.d.ts +2 -1
  486. package/react/components/Icon.js +9 -6
  487. package/react/components/IconButton.d.ts +9 -2
  488. package/react/components/IconButton.js +17 -7
  489. package/react/components/IconLabel.d.ts +2 -0
  490. package/react/components/IconLabel.js +12 -7
  491. package/react/components/IconPicker.d.ts +24 -0
  492. package/react/components/IconPicker.js +287 -0
  493. package/react/components/Input.d.ts +25 -3
  494. package/react/components/Input.js +22 -26
  495. package/react/components/Label.d.ts +2 -0
  496. package/react/components/Label.js +44 -11
  497. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  498. package/react/components/Layouts/AuthorinInnerSideBar.js +49 -0
  499. package/react/components/Layouts/AuthoringContainer.d.ts +12 -0
  500. package/react/components/Layouts/AuthoringContainer.js +60 -0
  501. package/react/components/Layouts/AuthoringFrame.d.ts +19 -0
  502. package/react/components/Layouts/AuthoringFrame.js +58 -0
  503. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  504. package/react/components/Layouts/AuthoringFrameContainer.js +49 -0
  505. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  506. package/react/components/Layouts/AuthoringFrameLeftBar.js +49 -0
  507. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  508. package/react/components/Layouts/AuthoringFrameMain.js +49 -0
  509. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  510. package/react/components/Layouts/AuthoringFrameNavBar.js +49 -0
  511. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  512. package/react/components/Layouts/AuthoringFrameOverlay.js +49 -0
  513. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +15 -0
  514. package/react/components/Layouts/AuthoringFrameRightBar.js +60 -0
  515. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  516. package/react/components/Layouts/AuthoringFrameSidePanel.js +58 -0
  517. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  518. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +58 -0
  519. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  520. package/react/components/Layouts/AuthoringInnerBody.js +49 -0
  521. package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
  522. package/react/components/Layouts/AuthoringInnerHeader.js +68 -0
  523. package/react/components/Layouts/AuthoringMain.d.ts +14 -0
  524. package/react/components/Layouts/AuthoringMain.js +55 -0
  525. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  526. package/react/components/Layouts/AuthoringMainContainer.js +49 -0
  527. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  528. package/react/components/Layouts/AuthoringMainContent.js +49 -0
  529. package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
  530. package/react/components/Layouts/AuthoringMainToolBar.js +56 -0
  531. package/react/components/Layouts/BottomBarAction.d.ts +12 -0
  532. package/react/components/Layouts/BottomBarAction.js +59 -0
  533. package/react/components/Layouts/Container.d.ts +14 -0
  534. package/react/components/Layouts/Container.js +62 -0
  535. package/react/components/Layouts/ContentSplitter.d.ts +10 -0
  536. package/react/components/Layouts/ContentSplitter.js +58 -0
  537. package/react/components/Layouts/CoreLayout.d.ts +20 -0
  538. package/react/components/Layouts/CoreLayout.js +55 -0
  539. package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
  540. package/react/components/Layouts/CoreLayoutContainer.js +49 -0
  541. package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
  542. package/react/components/Layouts/CoreLayoutFooter.js +49 -0
  543. package/react/components/Layouts/CoreLayoutMain.d.ts +10 -0
  544. package/react/components/Layouts/CoreLayoutMain.js +56 -0
  545. package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
  546. package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
  547. package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
  548. package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
  549. package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
  550. package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
  551. package/react/components/Layouts/HamburgerButton.d.ts +14 -0
  552. package/react/components/Layouts/HamburgerButton.js +63 -0
  553. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  554. package/react/components/Layouts/HeaderPanel.js +49 -0
  555. package/react/components/Layouts/Layout.d.ts +8 -0
  556. package/react/components/Layouts/Layout.js +36 -0
  557. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  558. package/react/components/Layouts/LayoutContainer.js +49 -0
  559. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  560. package/react/components/Layouts/LeftPanel.js +56 -0
  561. package/react/components/Layouts/MainMenu.d.ts +41 -0
  562. package/react/components/Layouts/MainMenu.js +103 -0
  563. package/react/components/Layouts/MainPanel.d.ts +11 -0
  564. package/react/components/Layouts/MainPanel.js +59 -0
  565. package/react/components/Layouts/NotificationPanel.d.ts +45 -0
  566. package/react/components/Layouts/NotificationPanel.js +110 -0
  567. package/react/components/Layouts/OverlayPanel.d.ts +8 -0
  568. package/react/components/Layouts/OverlayPanel.js +51 -0
  569. package/react/components/Layouts/PageLayout.d.ts +16 -0
  570. package/react/components/Layouts/PageLayout.js +66 -0
  571. package/react/components/Layouts/Panel.d.ts +66 -0
  572. package/react/components/Layouts/Panel.js +168 -0
  573. package/react/components/Layouts/RightPanel.d.ts +9 -0
  574. package/react/components/Layouts/RightPanel.js +49 -0
  575. package/react/components/Layouts/index.d.ts +39 -0
  576. package/react/components/Layouts/index.js +86 -0
  577. package/react/components/LeftMenu.d.ts +13 -4
  578. package/react/components/LeftMenu.js +71 -18
  579. package/react/components/ListItemLoader.d.ts +4 -0
  580. package/react/components/ListItemLoader.js +64 -0
  581. package/react/components/Lists/BoxedList.d.ts +44 -0
  582. package/react/components/Lists/BoxedList.js +160 -0
  583. package/react/components/Lists/ContentList.d.ts +51 -0
  584. package/react/components/Lists/ContentList.js +110 -0
  585. package/react/components/Lists/SimpleList.d.ts +21 -0
  586. package/react/components/Lists/SimpleList.js +80 -0
  587. package/react/components/Lists/TableList.d.ts +64 -0
  588. package/react/components/Lists/TableList.js +240 -0
  589. package/react/components/Lists/index.d.ts +2 -0
  590. package/react/components/Lists/index.js +10 -0
  591. package/react/components/Loader.js +4 -2
  592. package/react/components/Menu.d.ts +2 -1
  593. package/react/components/Menu.js +48 -12
  594. package/react/components/Modal.d.ts +4 -1
  595. package/react/components/Modal.js +35 -6
  596. package/react/components/MultiSelect.d.ts +40 -0
  597. package/react/components/MultiSelect.js +70 -0
  598. package/react/components/NavButton.d.ts +2 -1
  599. package/react/components/NavButton.js +9 -4
  600. package/react/components/Navigation/BottomNav.d.ts +24 -0
  601. package/react/components/Navigation/BottomNav.js +88 -0
  602. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  603. package/react/components/Navigation/QuickNavBar.js +117 -0
  604. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  605. package/react/components/Navigation/SideBarMenu.js +79 -0
  606. package/react/components/Navigation/SideBarTabs.d.ts +23 -0
  607. package/react/components/Navigation/SideBarTabs.js +88 -0
  608. package/react/components/Navigation/index.d.ts +3 -0
  609. package/react/components/Navigation/index.js +9 -0
  610. package/react/components/Popover.js +4 -2
  611. package/react/components/PropsList.js +4 -2
  612. package/react/components/RadioButtonGroup.d.ts +29 -0
  613. package/react/components/RadioButtonGroup.js +91 -0
  614. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  615. package/react/components/{Radio.js → RadioGroup.js} +20 -14
  616. package/react/components/SearchBar.d.ts +24 -0
  617. package/react/components/SearchBar.js +113 -0
  618. package/react/components/Select.d.ts +9 -2
  619. package/react/components/Select.js +9 -20
  620. package/react/components/SelectGrid.d.ts +45 -0
  621. package/react/components/SelectGrid.js +200 -0
  622. package/react/components/SelectWithTemplate.d.ts +11 -1
  623. package/react/components/SelectWithTemplate.js +23 -12
  624. package/react/components/Skeleton.d.ts +30 -0
  625. package/react/components/Skeleton.js +76 -0
  626. package/react/components/SlidingToolbar.d.ts +1 -1
  627. package/react/components/SlidingToolbar.js +15 -3
  628. package/react/components/Spinner.d.ts +11 -0
  629. package/react/components/Spinner.js +71 -0
  630. package/react/components/StrechBar.js +4 -2
  631. package/react/components/SubNav.d.ts +8 -1
  632. package/react/components/SubNav.js +28 -8
  633. package/react/components/Switch.d.ts +4 -1
  634. package/react/components/Switch.js +25 -11
  635. package/react/components/SwitchGroup.d.ts +1 -0
  636. package/react/components/SwitchGroup.js +6 -4
  637. package/react/components/TabCustom.d.ts +0 -1
  638. package/react/components/TabCustom.js +11 -7
  639. package/react/components/TabList.js +6 -4
  640. package/react/components/Tag.d.ts +3 -2
  641. package/react/components/Tag.js +21 -9
  642. package/react/components/TagInput.d.ts +0 -1
  643. package/react/components/TagInput.js +7 -6
  644. package/react/components/TagInputTest.js +13 -9
  645. package/react/components/Text/Heading.d.ts +15 -0
  646. package/react/components/Text/Heading.js +79 -0
  647. package/react/components/Text/Text.d.ts +15 -0
  648. package/react/components/Text/Text.js +67 -0
  649. package/react/components/Text/Time.d.ts +15 -0
  650. package/react/components/Text/Time.js +65 -0
  651. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  652. package/react/components/ThemeSelector.js +114 -0
  653. package/react/components/TimePicker.d.ts +11 -1
  654. package/react/components/TimePicker.js +14 -5
  655. package/react/components/Toast.js +1 -1
  656. package/react/components/ToastMessage.js +6 -5
  657. package/react/components/ToastText.js +1 -1
  658. package/react/components/ToastWrapper.d.ts +2 -2
  659. package/react/components/ToastWrapper.js +14 -10
  660. package/react/components/Togglebox.d.ts +2 -1
  661. package/react/components/Togglebox.js +42 -14
  662. package/react/components/Tooltip.d.ts +1 -0
  663. package/react/components/Tooltip.js +14 -10
  664. package/react/components/TreeSelect.d.ts +82 -0
  665. package/react/components/TreeSelect.js +521 -0
  666. package/react/components/WithSizeObserver.d.ts +25 -0
  667. package/react/components/WithSizeObserver.js +95 -0
  668. package/react/components/_Positioner.js +4 -2
  669. package/react/helpers.d.ts +1 -0
  670. package/react/helpers.js +7 -0
  671. package/react/index.d.ts +28 -3
  672. package/react/index.js +66 -4
  673. package/app/styles/variables/_design-tokens-general.scss +0 -136
  674. package/app-typescript/components/Radio.tsx +0 -57
  675. package/app-typescript/components/RadioButton.tsx +0 -57
  676. package/dist/react/Radios.tsx +0 -391
  677. package/examples/pages/react/Radios.tsx +0 -391
  678. package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
  679. package/react/components/RadioButton.js +0 -65
@@ -0,0 +1,143 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { PropsList, Prop, Container, Text, Heading, Button, ButtonGroup } from '../../../app-typescript';
4
+
5
+ interface IProps {
6
+ children?: React.ReactNode;
7
+ }
8
+
9
+ export default class ContainerDoc extends React.Component<IProps> {
10
+ render() {
11
+ return (
12
+ <section className='docs-page__container'>
13
+ <h2 className='docs-page__h2'>Container</h2>
14
+
15
+ <Markup.ReactMarkupCodePreview>{`
16
+ <Container>
17
+ Cum sociis natoque penatibus et magnis dis parturient...
18
+ </Container>
19
+ `}
20
+ </Markup.ReactMarkupCodePreview>
21
+
22
+ <p className="docs-page__paragraph">
23
+ The Container is a convenient layout component with different layout options and support for external CSS classes.
24
+ The display model is <code>flex</code> by default, but can be changed with the <code>display</code> prop. It is
25
+ intended to be used with helper CSS classes to achieve desired styling options
26
+ </p>
27
+
28
+ <Markup.ReactMarkup>
29
+ <Markup.ReactMarkupPreview>
30
+ <p className="docs-page__paragraph">// Basic</p>
31
+ <div className='docs-page__content-row'>
32
+ <Container>
33
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
34
+ est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
35
+ consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
36
+ sem lacinia quam venenatis vestibulum.
37
+ </Container>
38
+ </div>
39
+
40
+ <p className="docs-page__paragraph">// Usage examples</p>
41
+
42
+ <div className='docs-page__content-row'>
43
+ <Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
44
+ <span>Curabitur blandit tempus porttitor.</span>
45
+ <Button text="Test button" type="primary" onClick={()=> false} />
46
+ <Button text="Test button" type="highlight" onClick={()=> false} />
47
+ <ButtonGroup align="end">
48
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
49
+ <Button text="Submit" onClick={()=> false} type="primary" />
50
+ </ButtonGroup>
51
+ </Container>
52
+ </div>
53
+
54
+ <div className='docs-page__content-row'>
55
+ <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
56
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
57
+ <Text color='light'>
58
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
59
+ Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
60
+ Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
61
+ posuere velit aliquet. Aenean eu leo quam.
62
+ </Text>
63
+ <ButtonGroup align="end">
64
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
65
+ <Button text="Submit" onClick={()=> false} type="primary" />
66
+ </ButtonGroup>
67
+ </Container>
68
+ </div>
69
+
70
+ <div className='docs-page__content-row'>
71
+ <Container gap="large" theme='dark' direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
72
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
73
+ <Text color='light'>
74
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
75
+ Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
76
+ Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
77
+ posuere velit aliquet. Aenean eu leo quam.
78
+ </Text>
79
+ <ButtonGroup align="end">
80
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
81
+ <Button text="Submit" onClick={()=> false} type="primary" />
82
+ </ButtonGroup>
83
+ </Container>
84
+ </div>
85
+
86
+ </Markup.ReactMarkupPreview>
87
+ <Markup.ReactMarkupCode>{`
88
+ // Basic
89
+
90
+ <Container>
91
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
92
+ </Container>
93
+
94
+ // Usage examples
95
+
96
+ <Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
97
+ <span>Curabitur blandit tempus porttitor.</span>
98
+ <Button text="Test button" type="primary" onClick={()=> false} />
99
+ <Button text="Test button" type="highlight" onClick={()=> false} />
100
+ <ButtonGroup align="end">
101
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
102
+ <Button text="Submit" onClick={()=> false} type="primary" />
103
+ </ButtonGroup>
104
+ </Container>
105
+
106
+ <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
107
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
108
+ <Text color='light'>
109
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
110
+ </Text>
111
+ <ButtonGroup align="end">
112
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
113
+ <Button text="Submit" onClick={()=> false} type="primary" />
114
+ </ButtonGroup>
115
+ </Container>
116
+
117
+ <Container gap="large" theme='dark' direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
118
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
119
+ <Text color='light'>
120
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
121
+ </Text>
122
+ <ButtonGroup align="end">
123
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
124
+ <Button text="Submit" onClick={()=> false} type="primary" />
125
+ </ButtonGroup>
126
+ </Container>
127
+
128
+ `}
129
+ </Markup.ReactMarkupCode>
130
+ </Markup.ReactMarkup>
131
+
132
+ <h3 className="docs-page__h3">Props</h3>
133
+ <PropsList>
134
+ <Prop name='display' isRequired={false} type='flex | inline-flex | block' default='flex' description='Change the default display mode (flex).'/>
135
+ <Prop name='direction' isRequired={false} type='row | column' default='row' description='Change the flex-direction property.'/>
136
+ <Prop name='gap' isRequired={false} type='none | x-small | small | medium | large' default='none' description='Set the gap between elements inside the Container.'/>
137
+ <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All items inside will inherit the theme of the Container if it is set.'/>
138
+ <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
139
+ </PropsList>
140
+ </section>
141
+ )
142
+ }
143
+ }
@@ -32,11 +32,12 @@ export default class ContentDividerDoc extends React.Component {
32
32
  consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.
33
33
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur
34
34
  purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
35
- <ContentDivider type="dotted" />
35
+ <ContentDivider type="dotted" margin='x-small' />
36
36
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus
37
37
  ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
38
38
  risus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac
39
39
  facilisis in, egestas eget quam.</p>
40
+ <ContentDivider type="dotted" margin='x-small' />
40
41
  </div>
41
42
  </Markup.ReactMarkupPreview>
42
43
  <Markup.ReactMarkupCode>{`
@@ -50,9 +51,11 @@ export default class ContentDividerDoc extends React.Component {
50
51
 
51
52
  <p>Donec ullamcorper nulla non metus auctor fringilla...</p>
52
53
 
53
- <ContentDivider type="dotted" />
54
+ <ContentDivider type="dotted" margin='x-small' />
54
55
 
55
56
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
57
+
58
+ <ContentDivider type="dotted" margin='x-small' />
56
59
  `}
57
60
  </Markup.ReactMarkupCode>
58
61
  </Markup.ReactMarkup>
@@ -69,15 +72,15 @@ export default class ContentDividerDoc extends React.Component {
69
72
  Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus
70
73
  auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia
71
74
  quam venenatis vestibulum.</p>
72
- <ContentDivider align="left">
73
- Left aligned
75
+ <ContentDivider margin='small' align="left">
76
+ Left aligned, small margin
74
77
  </ContentDivider>
75
78
  <p>Maecenas sed diam eget risus varius blandit sit amet non magna.
76
79
  Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur
77
80
  purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod.
78
81
  Cras mattis consectetur purus sit amet fermentum.</p>
79
82
  <ContentDivider align="right" type="dotted">
80
- Right aligned
83
+ Right aligned, dotted
81
84
  </ContentDivider>
82
85
  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
83
86
  Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
@@ -93,14 +96,14 @@ export default class ContentDividerDoc extends React.Component {
93
96
 
94
97
  <p>Maecenas sed diam eget...</p>
95
98
 
96
- <ContentDivider align="left">
97
- Left aligned
99
+ <ContentDivider margin='small' align="left">
100
+ Left aligned, small margin
98
101
  </ContentDivider>
99
102
 
100
103
  <p>Maecenas sed diam eget risus...</p>
101
104
 
102
105
  <ContentDivider align="right" type="dotted">
103
- Right aligned
106
+ Right aligned, dotted
104
107
  </ContentDivider>
105
108
 
106
109
  <p>Praesent commodo cursus magna...</p>
@@ -115,9 +118,9 @@ export default class ContentDividerDoc extends React.Component {
115
118
  <p className="docs-page__paragraph">// Basic</p>
116
119
  <div className='docs-page__content-row'>
117
120
  <span>Option one</span>
118
- <ContentDivider orientation="vertical" type="dotted" />
121
+ <ContentDivider margin='small' orientation="vertical" type="dotted" />
119
122
  <span>Option two</span>
120
- <ContentDivider orientation="vertical" type="dotted" />
123
+ <ContentDivider margin='small' orientation="vertical" type="dotted" />
121
124
  <span>Option three</span>
122
125
  </div>
123
126
  <p className="docs-page__paragraph ">// With text</p>
@@ -129,7 +132,7 @@ export default class ContentDividerDoc extends React.Component {
129
132
  sit amet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla
130
133
  sed consectetur. Vivamus sagittis lacus vel augue.
131
134
  </div>
132
- <ContentDivider orientation="vertical">
135
+ <ContentDivider orientation="vertical" margin='large'>
133
136
  or
134
137
  </ContentDivider>
135
138
  <div style={{width:'100%'}}>
@@ -143,9 +146,9 @@ export default class ContentDividerDoc extends React.Component {
143
146
  // Basic
144
147
 
145
148
  <span>Option one</span>
146
- <ContentDivider orientation="vertical" type="dotted" />
149
+ <ContentDivider margin='small' orientation="vertical" type="dotted" />
147
150
  <span>Option two</span>
148
- <ContentDivider orientation="vertical" type="dotted" />
151
+ <ContentDivider margin='small' orientation="vertical" type="dotted" />
149
152
  <span>Option three</span>
150
153
 
151
154
  // With text
@@ -154,7 +157,7 @@ export default class ContentDividerDoc extends React.Component {
154
157
  Cras justo odio, dapibus ac facilisis in, egestas eget quam...
155
158
  </div>
156
159
 
157
- <ContentDivider orientation="vertical">
160
+ <ContentDivider orientation="vertical" margin='large'>
158
161
  or
159
162
  </ContentDivider>
160
163
 
@@ -167,10 +170,11 @@ export default class ContentDividerDoc extends React.Component {
167
170
 
168
171
  <h3 className="docs-page__h3">Props</h3>
169
172
  <PropsList>
170
- <Prop name='type' isRequered={false} type='dashed | dotted | solid' default='solid' description='Border style of the divider.'/>
171
- <Prop name='orientation' isRequered={false} type='horizontal | vertical' default='horizontal' description='Defines if the divider is horizontal or vertical. Default is horizontal.'/>
172
- <Prop name='align' isRequered={false} type='center | left | right' default='right' description='Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options.'/>
173
- <Prop name='border' isRequered={false} type='boolean' default='true' description='Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.'/>
173
+ <Prop name='type' isRequired={false} type='dashed | dotted | solid' default='solid' description='Border style of the divider.'/>
174
+ <Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='Defines if the divider is horizontal or vertical. Default is horizontal.'/>
175
+ <Prop name='align' isRequired={false} type='center | left | right' default='right' description='Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options.'/>
176
+ <Prop name='border' isRequired={false} type='boolean' default='true' description='Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.'/>
177
+ <Prop name='margin' isRequired={false} type='x-small | small | medium | large | none' default='medium' description='Vertical or horizontal margins (depending on the orientation) of the ContentDivider. Default to medium if not set.'/>
174
178
  </PropsList>
175
179
  </section>
176
180
  )