superdesk-ui-framework 4.0.47 → 4.0.49

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 (575) hide show
  1. package/.eslintrc.js +0 -1
  2. package/.eslintrc.json +2 -5
  3. package/.github/workflows/test.yml +22 -26
  4. package/.prettierignore +3 -0
  5. package/.prettierrc.js +9 -0
  6. package/.travis.yml +4 -4
  7. package/README.md +14 -1
  8. package/app/styles/_time.scss +28 -0
  9. package/app/styles/app.scss +1 -0
  10. package/app/styles/design-tokens/_design-tokens-general.scss +6 -3
  11. package/app/styles/form-elements/_forms-general.scss +0 -4
  12. package/app-typescript/components/Alert.tsx +12 -16
  13. package/app-typescript/components/Autocomplete.tsx +53 -42
  14. package/app-typescript/components/Badge.tsx +1 -1
  15. package/app-typescript/components/Button.tsx +5 -11
  16. package/app-typescript/components/ButtonGroup.tsx +15 -10
  17. package/app-typescript/components/Carousel.tsx +25 -26
  18. package/app-typescript/components/CheckButtonGroup.tsx +6 -10
  19. package/app-typescript/components/Checkbox.tsx +16 -10
  20. package/app-typescript/components/CheckboxButton.tsx +22 -13
  21. package/app-typescript/components/ContentDivider.tsx +6 -7
  22. package/app-typescript/components/CreateButton.tsx +8 -6
  23. package/app-typescript/components/DatePicker.tsx +59 -55
  24. package/app-typescript/components/DateTimePicker.tsx +51 -48
  25. package/app-typescript/components/Divider.tsx +2 -4
  26. package/app-typescript/components/DonutChart.tsx +11 -6
  27. package/app-typescript/components/DragHandle.tsx +10 -6
  28. package/app-typescript/components/DragHandleDots.tsx +1 -3
  29. package/app-typescript/components/DropZone.tsx +27 -25
  30. package/app-typescript/components/Dropdown.tsx +61 -102
  31. package/app-typescript/components/DropdownFirst.tsx +57 -69
  32. package/app-typescript/components/DurationInput.tsx +64 -54
  33. package/app-typescript/components/Editor/EditorButton.tsx +4 -3
  34. package/app-typescript/components/EmptyState.tsx +10 -14
  35. package/app-typescript/components/Form/FormGroup.tsx +9 -16
  36. package/app-typescript/components/Form/FormItem.tsx +1 -5
  37. package/app-typescript/components/Form/FormLabel.tsx +0 -1
  38. package/app-typescript/components/Form/FormRow.tsx +12 -19
  39. package/app-typescript/components/Form/FormRowNew.tsx +9 -16
  40. package/app-typescript/components/Form/FormText.tsx +1 -5
  41. package/app-typescript/components/Form/InputBase.tsx +12 -11
  42. package/app-typescript/components/Form/InputNew.tsx +11 -12
  43. package/app-typescript/components/Form/InputWrapper.tsx +9 -18
  44. package/app-typescript/components/Form/index.tsx +9 -9
  45. package/app-typescript/components/FormLabel.tsx +1 -5
  46. package/app-typescript/components/GridItem.tsx +38 -69
  47. package/app-typescript/components/GridList.tsx +2 -6
  48. package/app-typescript/components/HeadingText.tsx +4 -5
  49. package/app-typescript/components/IconButton.tsx +4 -10
  50. package/app-typescript/components/IconLabel.tsx +5 -5
  51. package/app-typescript/components/IconPicker.tsx +128 -126
  52. package/app-typescript/components/IllustrationButton.tsx +2 -8
  53. package/app-typescript/components/Input.tsx +2 -2
  54. package/app-typescript/components/Label.tsx +11 -7
  55. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +1 -5
  56. package/app-typescript/components/Layouts/AuthoringContainer.tsx +4 -6
  57. package/app-typescript/components/Layouts/AuthoringFrame.tsx +4 -20
  58. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +1 -5
  59. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +1 -5
  60. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +1 -5
  61. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +1 -5
  62. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +1 -5
  63. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +1 -5
  64. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +1 -5
  65. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +1 -3
  66. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -6
  67. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +5 -5
  68. package/app-typescript/components/Layouts/AuthoringMain.tsx +3 -4
  69. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +1 -5
  70. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +1 -5
  71. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +1 -6
  72. package/app-typescript/components/Layouts/BottomBarAction.tsx +8 -10
  73. package/app-typescript/components/Layouts/Container.tsx +13 -8
  74. package/app-typescript/components/Layouts/ContentSplitter.tsx +2 -6
  75. package/app-typescript/components/Layouts/CoreLayout.tsx +5 -12
  76. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +1 -1
  77. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +1 -5
  78. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -4
  79. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +1 -5
  80. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +2 -4
  81. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +8 -9
  82. package/app-typescript/components/Layouts/HamburgerButton.tsx +13 -14
  83. package/app-typescript/components/Layouts/HeaderPanel.tsx +1 -5
  84. package/app-typescript/components/Layouts/Layout.tsx +10 -16
  85. package/app-typescript/components/Layouts/LayoutContainer.tsx +2 -7
  86. package/app-typescript/components/Layouts/LeftPanel.tsx +4 -11
  87. package/app-typescript/components/Layouts/MainMenu.tsx +18 -32
  88. package/app-typescript/components/Layouts/MainPanel.tsx +10 -11
  89. package/app-typescript/components/Layouts/NotificationPanel.tsx +20 -29
  90. package/app-typescript/components/Layouts/OverlayPanel.tsx +3 -5
  91. package/app-typescript/components/Layouts/PageLayout.tsx +4 -21
  92. package/app-typescript/components/Layouts/Panel.tsx +45 -81
  93. package/app-typescript/components/Layouts/index.tsx +39 -39
  94. package/app-typescript/components/LeftMenu.tsx +51 -53
  95. package/app-typescript/components/ListItemLoader.tsx +1 -1
  96. package/app-typescript/components/Lists/BoxedList.tsx +16 -41
  97. package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +2 -10
  98. package/app-typescript/components/Lists/ContentList.tsx +68 -62
  99. package/app-typescript/components/Lists/SimpleList.tsx +13 -12
  100. package/app-typescript/components/Lists/TableList.tsx +169 -217
  101. package/app-typescript/components/Lists/index.tsx +2 -2
  102. package/app-typescript/components/Loader.tsx +1 -3
  103. package/app-typescript/components/Menu.tsx +2 -4
  104. package/app-typescript/components/Modal.tsx +21 -21
  105. package/app-typescript/components/MultiSelect.tsx +6 -6
  106. package/app-typescript/components/NavButton.tsx +10 -8
  107. package/app-typescript/components/Navigation/BottomNav.tsx +21 -17
  108. package/app-typescript/components/Navigation/QuickNavBar.tsx +40 -37
  109. package/app-typescript/components/Navigation/SideBarMenu.tsx +21 -17
  110. package/app-typescript/components/Navigation/SideBarTabs.tsx +13 -19
  111. package/app-typescript/components/Navigation/index.tsx +3 -3
  112. package/app-typescript/components/Popover.tsx +19 -21
  113. package/app-typescript/components/PropsList.tsx +2 -4
  114. package/app-typescript/components/RadioButtonGroup.tsx +48 -45
  115. package/app-typescript/components/RadioGroup.tsx +9 -8
  116. package/app-typescript/components/ResizablePanels.tsx +2 -3
  117. package/app-typescript/components/ResizeObserverComponent.tsx +1 -5
  118. package/app-typescript/components/SearchBar.tsx +53 -45
  119. package/app-typescript/components/Select.tsx +6 -8
  120. package/app-typescript/components/SelectGrid.tsx +32 -40
  121. package/app-typescript/components/SelectPreview.tsx +31 -25
  122. package/app-typescript/components/SelectWithTemplate.tsx +10 -11
  123. package/app-typescript/components/ShowPopup.tsx +32 -46
  124. package/app-typescript/components/SidebarMenu.tsx +19 -18
  125. package/app-typescript/components/Skeleton.tsx +12 -11
  126. package/app-typescript/components/SlidingToolbar.tsx +1 -6
  127. package/app-typescript/components/Spinner.tsx +2 -6
  128. package/app-typescript/components/StrechBar.tsx +1 -5
  129. package/app-typescript/components/SubNav.tsx +10 -8
  130. package/app-typescript/components/SvgIconIllustration.tsx +477 -105
  131. package/app-typescript/components/Switch.tsx +14 -12
  132. package/app-typescript/components/SwitchGroup.tsx +10 -10
  133. package/app-typescript/components/TabCustom.tsx +28 -35
  134. package/app-typescript/components/TabList.tsx +13 -10
  135. package/app-typescript/components/Tag.tsx +21 -24
  136. package/app-typescript/components/TagInput.tsx +4 -11
  137. package/app-typescript/components/Text/Heading.tsx +21 -41
  138. package/app-typescript/components/Text/Text.tsx +16 -12
  139. package/app-typescript/components/Text/Time.tsx +14 -10
  140. package/app-typescript/components/ThemeSelector.tsx +15 -14
  141. package/app-typescript/components/TimePicker.tsx +60 -6
  142. package/app-typescript/components/TimePickerPopover.tsx +274 -0
  143. package/app-typescript/components/TimePickerV2.tsx +20 -20
  144. package/app-typescript/components/Toast.tsx +11 -7
  145. package/app-typescript/components/ToastMessage.tsx +3 -14
  146. package/app-typescript/components/ToastText.tsx +30 -32
  147. package/app-typescript/components/ToastWrapper.tsx +76 -74
  148. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -45
  149. package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +31 -33
  150. package/app-typescript/components/ToggleBox/index.tsx +3 -7
  151. package/app-typescript/components/Tooltip.tsx +1 -1
  152. package/app-typescript/components/TreeMenu.tsx +72 -81
  153. package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +1 -5
  154. package/app-typescript/components/TreeSelect/TreeSelect.tsx +221 -238
  155. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +20 -24
  156. package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +12 -15
  157. package/app-typescript/components/WithPagination.tsx +34 -39
  158. package/app-typescript/components/WithPopover.tsx +0 -1
  159. package/app-typescript/components/WithPortal.tsx +4 -7
  160. package/app-typescript/components/WithSizeObserver.tsx +2 -6
  161. package/app-typescript/components/_Positioner.tsx +26 -26
  162. package/app-typescript/components/avatar/avatar-action-add.tsx +1 -6
  163. package/app-typescript/components/avatar/avatar-group.tsx +49 -68
  164. package/app-typescript/components/avatar/avatar-image.tsx +18 -12
  165. package/app-typescript/components/avatar/avatar-placeholder.tsx +3 -15
  166. package/app-typescript/components/avatar/avatar-text.tsx +1 -4
  167. package/app-typescript/components/avatar/avatar-wrapper.tsx +18 -30
  168. package/app-typescript/components/avatar/avatar.tsx +5 -8
  169. package/app-typescript/components/with-pagination.spec.tsx +8 -27
  170. package/app-typescript/helpers.tsx +2 -2
  171. package/app-typescript/index.ts +111 -100
  172. package/app-typescript/utils/time.tsx +31 -0
  173. package/declarations.d.ts +1 -1
  174. package/dist/components/Alerts.tsx +171 -78
  175. package/dist/components/Autocomplete.tsx +187 -78
  176. package/dist/components/Avatar.tsx +52 -112
  177. package/dist/components/Badges.tsx +111 -67
  178. package/dist/components/BigIconFont.tsx +29 -17
  179. package/dist/components/BoxedList.tsx +244 -114
  180. package/dist/components/ButtonGroups.tsx +213 -147
  181. package/dist/components/Buttons.tsx +409 -137
  182. package/dist/components/Card.tsx +6 -7
  183. package/dist/components/Carousel.tsx +126 -39
  184. package/dist/components/Checkboxs.tsx +446 -105
  185. package/dist/components/Container.tsx +95 -48
  186. package/dist/components/ContentDivider.tsx +110 -63
  187. package/dist/components/ContentList.tsx +577 -253
  188. package/dist/components/CreateButton.tsx +71 -21
  189. package/dist/components/DatePicker.tsx +102 -26
  190. package/dist/components/DateTimePicker.tsx +49 -11
  191. package/dist/components/DragHandleDocs.tsx +56 -26
  192. package/dist/components/DropZone.tsx +67 -29
  193. package/dist/components/Dropdowns.tsx +220 -131
  194. package/dist/components/DurationInput.tsx +92 -32
  195. package/dist/components/EmptyStates.tsx +61 -26
  196. package/dist/components/GridItem.tsx +190 -91
  197. package/dist/components/GridList.tsx +37 -17
  198. package/dist/components/Heading.tsx +81 -35
  199. package/dist/components/IconButtons.tsx +125 -32
  200. package/dist/components/IconFont.tsx +24 -12
  201. package/dist/components/IconLabels.tsx +146 -39
  202. package/dist/components/IconPicker.tsx +30 -13
  203. package/dist/components/IllustrationButton.tsx +40 -20
  204. package/dist/components/Index.tsx +128 -114
  205. package/dist/components/Inputs.tsx +153 -51
  206. package/dist/components/Labels.tsx +191 -117
  207. package/dist/components/LeftNavigations.tsx +327 -100
  208. package/dist/components/ListItems.tsx +8 -9
  209. package/dist/components/Loader.tsx +5 -4
  210. package/dist/components/Menu.tsx +48 -26
  211. package/dist/components/Modal.tsx +298 -104
  212. package/dist/components/MultiSelect.tsx +189 -53
  213. package/dist/components/NavButtons.tsx +86 -30
  214. package/dist/components/Panel.tsx +367 -120
  215. package/dist/components/Popover.tsx +37 -17
  216. package/dist/components/QuickNavigationBar.tsx +222 -86
  217. package/dist/components/RadioGroup.tsx +375 -137
  218. package/dist/components/ResizablePanels.tsx +8 -14
  219. package/dist/components/SelectGrid.tsx +79 -38
  220. package/dist/components/SelectWithTemplate.tsx +23 -14
  221. package/dist/components/Selects.tsx +94 -29
  222. package/dist/components/SimpleList.tsx +91 -41
  223. package/dist/components/SubNav.tsx +57 -37
  224. package/dist/components/Switch.tsx +168 -42
  225. package/dist/components/TableList.tsx +220 -66
  226. package/dist/components/Tabs.tsx +149 -64
  227. package/dist/components/TagInputDocs.tsx +73 -17
  228. package/dist/components/Tags.tsx +104 -73
  229. package/dist/components/Text.tsx +108 -58
  230. package/dist/components/TimePicker.tsx +76 -22
  231. package/dist/components/Toasts.tsx +162 -80
  232. package/dist/components/Togglebox.tsx +164 -62
  233. package/dist/components/Tooltips.tsx +27 -15
  234. package/dist/components/TreeMenu.tsx +95 -59
  235. package/dist/components/TreeSelect.tsx +297 -162
  236. package/dist/components/WithPaginationDocs.tsx +15 -16
  237. package/dist/components/WithSizeObserver.tsx +9 -9
  238. package/dist/components/tree-select/TreeSelect.tsx +126 -77
  239. package/dist/components/tree-select/example-1.tsx +8 -12
  240. package/dist/components/tree-select/example-2.tsx +2 -5
  241. package/dist/components/utilities/BorderRadiusUtilities.tsx +28 -13
  242. package/dist/components/utilities/BorderUtilities.tsx +31 -32
  243. package/dist/components/utilities/DisplayUtilities.tsx +4 -5
  244. package/dist/components/utilities/FlexAndGridUtilities.tsx +38 -38
  245. package/dist/components/utilities/ObjectFitUtilities.tsx +4 -6
  246. package/dist/components/utilities/ObjectPositionUtilities.tsx +3 -4
  247. package/dist/components/utilities/OpacityUtilities.tsx +4 -7
  248. package/dist/components/utilities/OverflowUtilities.tsx +4 -5
  249. package/dist/components/utilities/PositionUtilities.tsx +4 -5
  250. package/dist/components/utilities/ShadowUtilities.tsx +15 -16
  251. package/dist/components/utilities/SpacingUtilities.tsx +483 -178
  252. package/dist/components/utilities/TextUtilities.tsx +109 -60
  253. package/dist/design-patterns/Index.tsx +8 -11
  254. package/dist/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  255. package/dist/examples.bundle.css +1257 -1155
  256. package/dist/examples.bundle.js +7904 -7035
  257. package/dist/playgrounds/dummy-data/items.ts +9 -8
  258. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  259. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  260. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  261. package/dist/playgrounds/react-playgrounds/Index.tsx +11 -11
  262. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  263. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  264. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  265. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  266. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  267. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  268. package/dist/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  269. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  270. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  271. package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  272. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  273. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  274. package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  275. package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  276. package/dist/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  277. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  278. package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  279. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  280. package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  281. package/dist/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  282. package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  283. package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  284. package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  285. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  286. package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  287. package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  288. package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  289. package/dist/playgrounds/react-playgrounds/tsconfig.json +1 -1
  290. package/dist/superdesk-ui.bundle.css +25 -4
  291. package/dist/superdesk-ui.bundle.js +3072 -2903
  292. package/dist/vendor.bundle.js +18 -18
  293. package/examples/css/docs-page.css +1135 -1116
  294. package/examples/css/reset.css +124 -43
  295. package/examples/css/vendor.css +125 -125
  296. package/examples/index.js +138 -139
  297. package/examples/js/doc.js +41 -40
  298. package/examples/js/react.js +82 -48
  299. package/examples/pages/components/Alerts.tsx +171 -78
  300. package/examples/pages/components/Autocomplete.tsx +187 -78
  301. package/examples/pages/components/Avatar.tsx +52 -112
  302. package/examples/pages/components/Badges.tsx +111 -67
  303. package/examples/pages/components/BigIconFont.tsx +29 -17
  304. package/examples/pages/components/BoxedList.tsx +244 -114
  305. package/examples/pages/components/ButtonGroups.tsx +213 -147
  306. package/examples/pages/components/Buttons.tsx +409 -137
  307. package/examples/pages/components/Card.tsx +6 -7
  308. package/examples/pages/components/Carousel.tsx +126 -39
  309. package/examples/pages/components/Checkboxs.tsx +446 -105
  310. package/examples/pages/components/Container.tsx +95 -48
  311. package/examples/pages/components/ContentDivider.tsx +110 -63
  312. package/examples/pages/components/ContentList.tsx +577 -253
  313. package/examples/pages/components/CreateButton.tsx +71 -21
  314. package/examples/pages/components/DatePicker.tsx +102 -26
  315. package/examples/pages/components/DateTimePicker.tsx +49 -11
  316. package/examples/pages/components/DragHandleDocs.tsx +56 -26
  317. package/examples/pages/components/DropZone.tsx +67 -29
  318. package/examples/pages/components/Dropdowns.tsx +220 -131
  319. package/examples/pages/components/DurationInput.tsx +92 -32
  320. package/examples/pages/components/EmptyStates.tsx +61 -26
  321. package/examples/pages/components/GridItem.tsx +190 -91
  322. package/examples/pages/components/GridList.tsx +37 -17
  323. package/examples/pages/components/Heading.tsx +81 -35
  324. package/examples/pages/components/IconButtons.tsx +125 -32
  325. package/examples/pages/components/IconFont.tsx +24 -12
  326. package/examples/pages/components/IconLabels.tsx +146 -39
  327. package/examples/pages/components/IconPicker.tsx +30 -13
  328. package/examples/pages/components/IllustrationButton.tsx +40 -20
  329. package/examples/pages/components/Index.tsx +128 -114
  330. package/examples/pages/components/Inputs.tsx +153 -51
  331. package/examples/pages/components/Labels.tsx +191 -117
  332. package/examples/pages/components/LeftNavigations.tsx +327 -100
  333. package/examples/pages/components/ListItems.tsx +8 -9
  334. package/examples/pages/components/Loader.tsx +5 -4
  335. package/examples/pages/components/Menu.tsx +48 -26
  336. package/examples/pages/components/Modal.tsx +298 -104
  337. package/examples/pages/components/MultiSelect.tsx +189 -53
  338. package/examples/pages/components/NavButtons.tsx +86 -30
  339. package/examples/pages/components/Panel.tsx +367 -120
  340. package/examples/pages/components/Popover.tsx +37 -17
  341. package/examples/pages/components/QuickNavigationBar.tsx +222 -86
  342. package/examples/pages/components/RadioGroup.tsx +375 -137
  343. package/examples/pages/components/ResizablePanels.tsx +8 -14
  344. package/examples/pages/components/SelectGrid.tsx +79 -38
  345. package/examples/pages/components/SelectWithTemplate.tsx +23 -14
  346. package/examples/pages/components/Selects.tsx +94 -29
  347. package/examples/pages/components/SimpleList.tsx +91 -41
  348. package/examples/pages/components/SubNav.tsx +57 -37
  349. package/examples/pages/components/Switch.tsx +168 -42
  350. package/examples/pages/components/TableList.tsx +220 -66
  351. package/examples/pages/components/Tabs.tsx +149 -64
  352. package/examples/pages/components/TagInputDocs.tsx +73 -17
  353. package/examples/pages/components/Tags.tsx +104 -73
  354. package/examples/pages/components/Text.tsx +108 -58
  355. package/examples/pages/components/TimePicker.tsx +76 -22
  356. package/examples/pages/components/Toasts.tsx +162 -80
  357. package/examples/pages/components/Togglebox.tsx +164 -62
  358. package/examples/pages/components/Tooltips.tsx +27 -15
  359. package/examples/pages/components/TreeMenu.tsx +95 -59
  360. package/examples/pages/components/TreeSelect.tsx +297 -162
  361. package/examples/pages/components/WithPaginationDocs.tsx +15 -16
  362. package/examples/pages/components/WithSizeObserver.tsx +9 -9
  363. package/examples/pages/components/tree-select/TreeSelect.tsx +126 -77
  364. package/examples/pages/components/tree-select/example-1.tsx +8 -12
  365. package/examples/pages/components/tree-select/example-2.tsx +2 -5
  366. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +28 -13
  367. package/examples/pages/components/utilities/BorderUtilities.tsx +31 -32
  368. package/examples/pages/components/utilities/DisplayUtilities.tsx +4 -5
  369. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +38 -38
  370. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +4 -6
  371. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +3 -4
  372. package/examples/pages/components/utilities/OpacityUtilities.tsx +4 -7
  373. package/examples/pages/components/utilities/OverflowUtilities.tsx +4 -5
  374. package/examples/pages/components/utilities/PositionUtilities.tsx +4 -5
  375. package/examples/pages/components/utilities/ShadowUtilities.tsx +15 -16
  376. package/examples/pages/components/utilities/SpacingUtilities.tsx +483 -178
  377. package/examples/pages/components/utilities/TextUtilities.tsx +109 -60
  378. package/examples/pages/design-patterns/Index.tsx +8 -11
  379. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  380. package/examples/pages/playgrounds/dummy-data/items.ts +9 -8
  381. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  382. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  383. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  384. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +11 -11
  385. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  386. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  387. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  388. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  389. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  390. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  391. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  392. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  393. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  394. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  395. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  396. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  397. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  398. package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  399. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  400. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  401. package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  402. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  403. package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  404. package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  405. package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  406. package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  407. package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  408. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  409. package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  410. package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  411. package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  412. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +1 -1
  413. package/globals.d.ts +1 -1
  414. package/mocha-setup.ts +3 -3
  415. package/package.json +119 -117
  416. package/react/components/Alert.js +6 -9
  417. package/react/components/Autocomplete.js +15 -23
  418. package/react/components/Badge.js +1 -1
  419. package/react/components/Button.js +4 -6
  420. package/react/components/ButtonGroup.js +1 -1
  421. package/react/components/Carousel.js +3 -3
  422. package/react/components/CheckButtonGroup.js +3 -6
  423. package/react/components/CheckboxButton.js +2 -4
  424. package/react/components/ContentDivider.js +1 -1
  425. package/react/components/DatePicker.js +29 -26
  426. package/react/components/DateTimePicker.d.ts +8 -4
  427. package/react/components/DateTimePicker.js +6 -8
  428. package/react/components/Divider.js +1 -1
  429. package/react/components/DonutChart.js +1 -1
  430. package/react/components/DragHandle.js +1 -1
  431. package/react/components/DragHandleDots.js +1 -1
  432. package/react/components/DropZone.js +6 -8
  433. package/react/components/Dropdown.d.ts +1 -1
  434. package/react/components/Dropdown.js +34 -38
  435. package/react/components/DropdownFirst.d.ts +11 -11
  436. package/react/components/DropdownFirst.js +20 -24
  437. package/react/components/DurationInput.js +37 -34
  438. package/react/components/EmptyState.js +5 -5
  439. package/react/components/Form/FormGroup.js +1 -1
  440. package/react/components/Form/FormItem.js +1 -1
  441. package/react/components/Form/FormRow.js +1 -1
  442. package/react/components/Form/FormRowNew.js +3 -3
  443. package/react/components/Form/FormText.js +1 -1
  444. package/react/components/Form/InputNew.js +3 -3
  445. package/react/components/Form/InputWrapper.js +7 -10
  446. package/react/components/GridItem.d.ts +1 -1
  447. package/react/components/GridItem.js +16 -16
  448. package/react/components/GridList.js +1 -1
  449. package/react/components/HeadingText.js +4 -5
  450. package/react/components/IconLabel.js +3 -5
  451. package/react/components/IconPicker.d.ts +1 -1
  452. package/react/components/IconPicker.js +111 -104
  453. package/react/components/IllustrationButton.js +1 -1
  454. package/react/components/Input.js +1 -1
  455. package/react/components/Layouts/AuthorinInnerSideBar.js +1 -1
  456. package/react/components/Layouts/AuthoringContainer.js +1 -1
  457. package/react/components/Layouts/AuthoringFrame.js +4 -4
  458. package/react/components/Layouts/AuthoringFrameContainer.js +1 -1
  459. package/react/components/Layouts/AuthoringFrameLeftBar.js +1 -1
  460. package/react/components/Layouts/AuthoringFrameMain.js +1 -1
  461. package/react/components/Layouts/AuthoringFrameNavBar.js +1 -1
  462. package/react/components/Layouts/AuthoringFrameOverlay.js +1 -1
  463. package/react/components/Layouts/AuthoringFrameRightBar.js +1 -1
  464. package/react/components/Layouts/AuthoringFrameSidePanel.js +1 -1
  465. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +1 -1
  466. package/react/components/Layouts/AuthoringMainContainer.js +1 -1
  467. package/react/components/Layouts/AuthoringMainContent.js +1 -1
  468. package/react/components/Layouts/AuthoringMainToolBar.js +1 -1
  469. package/react/components/Layouts/BottomBarAction.js +2 -2
  470. package/react/components/Layouts/ContentSplitter.js +1 -1
  471. package/react/components/Layouts/CoreLayout.js +2 -2
  472. package/react/components/Layouts/CoreLayoutContainer.js +1 -1
  473. package/react/components/Layouts/CoreLayoutFooter.js +1 -1
  474. package/react/components/Layouts/CoreLayoutOverlay.js +1 -1
  475. package/react/components/Layouts/CoreLayoutSlideInMenu.js +2 -2
  476. package/react/components/Layouts/CoreLayoutTopMenu.js +3 -3
  477. package/react/components/Layouts/HamburgerButton.js +1 -1
  478. package/react/components/Layouts/HeaderPanel.js +1 -1
  479. package/react/components/Layouts/Layout.d.ts +1 -1
  480. package/react/components/Layouts/Layout.js +9 -9
  481. package/react/components/Layouts/LayoutContainer.js +1 -1
  482. package/react/components/Layouts/LeftPanel.js +1 -1
  483. package/react/components/Layouts/MainMenu.js +8 -10
  484. package/react/components/Layouts/MainPanel.js +1 -1
  485. package/react/components/Layouts/NotificationPanel.d.ts +1 -1
  486. package/react/components/Layouts/NotificationPanel.js +7 -7
  487. package/react/components/Layouts/OverlayPanel.js +3 -3
  488. package/react/components/Layouts/PageLayout.js +2 -2
  489. package/react/components/Layouts/Panel.d.ts +1 -1
  490. package/react/components/Layouts/Panel.js +12 -18
  491. package/react/components/LeftMenu.d.ts +3 -3
  492. package/react/components/LeftMenu.js +11 -13
  493. package/react/components/Lists/BoxedList.js +6 -6
  494. package/react/components/Lists/CalendarWeekDayItem.js +2 -2
  495. package/react/components/Lists/ContentList.js +24 -26
  496. package/react/components/Lists/TableList.d.ts +1 -1
  497. package/react/components/Lists/TableList.js +59 -79
  498. package/react/components/Loader.js +1 -1
  499. package/react/components/Menu.js +1 -1
  500. package/react/components/Modal.d.ts +1 -1
  501. package/react/components/MultiSelect.d.ts +1 -1
  502. package/react/components/MultiSelect.js +2 -2
  503. package/react/components/NavButton.js +2 -4
  504. package/react/components/Navigation/BottomNav.js +9 -8
  505. package/react/components/Navigation/QuickNavBar.js +17 -20
  506. package/react/components/Navigation/SideBarMenu.js +11 -9
  507. package/react/components/Navigation/SideBarTabs.js +9 -8
  508. package/react/components/Popover.js +1 -1
  509. package/react/components/RadioButtonGroup.js +15 -23
  510. package/react/components/ResizablePanels.js +1 -3
  511. package/react/components/ResizeObserverComponent.js +1 -3
  512. package/react/components/SearchBar.js +14 -16
  513. package/react/components/Select.js +3 -3
  514. package/react/components/SelectGrid.js +15 -20
  515. package/react/components/SelectPreview.js +13 -13
  516. package/react/components/SelectWithTemplate.js +3 -5
  517. package/react/components/ShowPopup.d.ts +1 -0
  518. package/react/components/ShowPopup.js +7 -10
  519. package/react/components/Skeleton.js +1 -1
  520. package/react/components/SlidingToolbar.js +1 -1
  521. package/react/components/Spinner.js +1 -1
  522. package/react/components/StrechBar.js +1 -1
  523. package/react/components/SubNav.js +1 -1
  524. package/react/components/Switch.js +4 -6
  525. package/react/components/SwitchGroup.js +1 -1
  526. package/react/components/TabCustom.js +6 -4
  527. package/react/components/TabList.js +4 -8
  528. package/react/components/Tag.js +13 -17
  529. package/react/components/TagInput.js +1 -1
  530. package/react/components/Text/Heading.js +6 -6
  531. package/react/components/ThemeSelector.js +1 -1
  532. package/react/components/TimePicker.d.ts +9 -2
  533. package/react/components/TimePicker.js +29 -4
  534. package/react/components/TimePickerPopover.d.ts +19 -0
  535. package/react/components/TimePickerPopover.js +225 -0
  536. package/react/components/TimePickerV2.js +17 -17
  537. package/react/components/Toast.js +3 -3
  538. package/react/components/ToastMessage.d.ts +1 -1
  539. package/react/components/ToastMessage.js +1 -1
  540. package/react/components/ToastText.js +5 -8
  541. package/react/components/ToastWrapper.js +3 -5
  542. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
  543. package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -7
  544. package/react/components/ToggleBox/SimpleToggleBox.d.ts +1 -1
  545. package/react/components/ToggleBox/SimpleToggleBox.js +5 -5
  546. package/react/components/ToggleBox/index.js +3 -3
  547. package/react/components/TreeMenu.d.ts +1 -1
  548. package/react/components/TreeMenu.js +38 -44
  549. package/react/components/TreeSelect/TreeSelect.d.ts +2 -2
  550. package/react/components/TreeSelect/TreeSelect.js +105 -127
  551. package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -1
  552. package/react/components/TreeSelect/TreeSelectItem.js +10 -13
  553. package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -1
  554. package/react/components/TreeSelect/TreeSelectPill.js +8 -9
  555. package/react/components/WithPagination.js +18 -21
  556. package/react/components/WithPortal.d.ts +1 -1
  557. package/react/components/WithPortal.js +2 -1
  558. package/react/components/WithSizeObserver.js +1 -3
  559. package/react/components/_Positioner.js +11 -11
  560. package/react/components/avatar/avatar-action-add.js +1 -1
  561. package/react/components/avatar/avatar-group.js +11 -14
  562. package/react/components/avatar/avatar-image.js +6 -4
  563. package/react/components/avatar/avatar-placeholder.js +1 -1
  564. package/react/components/avatar/avatar-wrapper.js +2 -4
  565. package/react/components/avatar/avatar.js +4 -3
  566. package/react/helpers.js +2 -2
  567. package/react/index.d.ts +1 -1
  568. package/react/utils/time.d.ts +5 -0
  569. package/react/utils/time.js +36 -0
  570. package/tasks/webpack.dev.js +1 -1
  571. package/tasks/webpack.js +5 -5
  572. package/tasks/webpack.prod.js +1 -5
  573. package/tsconfig.json +2 -5
  574. package/tslint.json +6 -12
  575. package/webpack.config.js +2 -5
@@ -1,96 +1,129 @@
1
1
  import * as React from 'react';
2
2
 
3
3
  import * as Markup from '../../js/react';
4
- import { HeadingText, Button, Prop, PropsList } from '../../../app-typescript';
5
- import { toasted } from '../../../app-typescript';
4
+ import {HeadingText, Button, Prop, PropsList} from '../../../app-typescript';
5
+ import {toasted} from '../../../app-typescript';
6
6
 
7
7
  export default class ToastsDoc extends React.Component {
8
8
  // default
9
9
  showDefault = () => {
10
10
  toasted.notify("I'm a tasty default Toast message!", {position: 'top'});
11
- }
11
+ };
12
12
 
13
13
  // all positions
14
14
  showAll = () => {
15
- toasted.notify('Position top', { position: 'top' });
16
- toasted.notify('Position top-left', { position: 'top-left' });
17
- toasted.notify('Position top-right', { position: 'top-right' });
18
- toasted.notify('Position bottom', { position: 'bottom' });
19
- toasted.notify('Position bottom-left', { position: 'bottom-left' });
20
- toasted.notify('Position bottom-right', { position: 'bottom-right' });
21
- }
15
+ toasted.notify('Position top', {position: 'top'});
16
+ toasted.notify('Position top-left', {position: 'top-left'});
17
+ toasted.notify('Position top-right', {position: 'top-right'});
18
+ toasted.notify('Position bottom', {position: 'bottom'});
19
+ toasted.notify('Position bottom-left', {position: 'bottom-left'});
20
+ toasted.notify('Position bottom-right', {position: 'bottom-right'});
21
+ };
22
22
 
23
23
  // duration
24
24
  showDuration = () => {
25
- toasted.notify("Curabitur blandit tempus porttitor.", { duration: 3000 });
26
- }
25
+ toasted.notify('Curabitur blandit tempus porttitor.', {duration: 3000});
26
+ };
27
27
  showNull = () => {
28
- toasted.notify("Curabitur blandit tempus porttitor.", {});
29
- }
28
+ toasted.notify('Curabitur blandit tempus porttitor.', {});
29
+ };
30
30
 
31
31
  // coloring and icon
32
32
  showSuccess = () => {
33
- toasted.notify("I'm a tasty default Toast message!", { type: 'success', icon: 'ok'});
34
- }
33
+ toasted.notify("I'm a tasty default Toast message!", {type: 'success', icon: 'ok'});
34
+ };
35
35
  showAlert = () => {
36
- toasted.notify("Danger! Condimentum ridiculus ultricies ornare mollis.", { type: 'alert', icon: 'exclamation-sign', position: 'bottom'});
37
- }
36
+ toasted.notify('Danger! Condimentum ridiculus ultricies ornare mollis.', {
37
+ type: 'alert',
38
+ icon: 'exclamation-sign',
39
+ position: 'bottom',
40
+ });
41
+ };
38
42
 
39
43
  // size
40
44
  showSizeS = () => {
41
- toasted.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-s' });
42
- }
45
+ toasted.notify('Et harum quidem rerum facilis est et expedita distinctio.', {
46
+ position: 'top-left',
47
+ size: 'fixed-s',
48
+ });
49
+ };
43
50
  showSizeM = () => {
44
- toasted.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-m' });
45
- }
51
+ toasted.notify('Et harum quidem rerum facilis est et expedita distinctio.', {
52
+ position: 'top-left',
53
+ size: 'fixed-m',
54
+ });
55
+ };
46
56
  showSizeL = () => {
47
- toasted.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-l' });
48
- }
57
+ toasted.notify('Et harum quidem rerum facilis est et expedita distinctio.', {
58
+ position: 'top-left',
59
+ size: 'fixed-l',
60
+ });
61
+ };
49
62
  showSizeXL = () => {
50
- toasted.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-xl' });
51
- }
63
+ toasted.notify('Et harum quidem rerum facilis est et expedita distinctio.', {
64
+ position: 'top-left',
65
+ size: 'fixed-xl',
66
+ });
67
+ };
52
68
 
53
69
  // custom element
54
70
  showCustomHeading = () => {
55
- toasted.notify(<HeadingText heading='I have Toaster heading!' text='Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.' />, { type: 'primary', icon: 'info-sign', position: 'bottom' });
56
- }
71
+ toasted.notify(
72
+ <HeadingText
73
+ heading="I have Toaster heading!"
74
+ text="Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus."
75
+ />,
76
+ {type: 'primary', icon: 'info-sign', position: 'bottom'},
77
+ );
78
+ };
57
79
  showAnotherCustomElement = () => {
58
80
  toasted.notify(
59
- <React.Fragment>
60
- <div className="sd-toast__icon"></div>
81
+ <React.Fragment>
82
+ <div className="sd-toast__icon"></div>
61
83
  <figure className="sd-toast__avatar avatar">sd</figure>
62
84
  <div className="sd-toast__message">
63
85
  <div className="sd-toast__message-header">
64
86
  <h4 className="sd-toast__heading">Martin Mustermann</h4>
65
87
  <time title="March 22, 2017 11:08 AM">16:50, 16.03.2019</time>
66
88
  </div>
67
- <p>Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
68
- </div>
69
- </React.Fragment>
70
- , { position: 'bottom-right', size: 'fixed-l' });
71
- }
72
-
89
+ <p>
90
+ Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
91
+ elit.
92
+ </p>
93
+ </div>
94
+ </React.Fragment>,
95
+ {position: 'bottom-right', size: 'fixed-l'},
96
+ );
97
+ };
98
+
73
99
  render() {
74
100
  return (
75
101
  <section className="docs-page__container">
76
102
  <h2 className="docs-page__h2">Toasts</h2>
77
- <Markup.ReactMarkupCodePreview>{`
103
+ <Markup.ReactMarkupCodePreview>
104
+ {`
78
105
  import {toasted} from 'superdesk-ui-framework/react';
79
106
 
80
107
  toasted.notify("I'm a tasty default Toast message!", {});
81
108
  `}
82
109
  </Markup.ReactMarkupCodePreview>
83
-
110
+
84
111
  <h3 className="docs-page__h3">Position</h3>
85
- <p className="docs-page__paragraph">Chose one of 6 placement options (<code>'top'</code>, <code>'top-right'</code>, <code>'top-left'</code>, <code>'bottom'</code>, <code>'bottom-right'</code>, <code>'bottom-left'</code>). The default value is ’top’ and will be rendered so without explicitly specifying it.</p>
112
+ <p className="docs-page__paragraph">
113
+ Chose one of 6 placement options (<code>'top'</code>, <code>'top-right'</code>,{' '}
114
+ <code>'top-left'</code>, <code>'bottom'</code>, <code>'bottom-right'</code>,{' '}
115
+ <code>'bottom-left'</code>). The default value is ’top’ and will be rendered so without explicitly
116
+ specifying it.
117
+ </p>
86
118
  <Markup.ReactMarkup>
87
119
  <Markup.ReactMarkupPreview>
88
- <div className="docs-page__content-row">
89
- <Button text='default' onClick={this.showDefault}></Button>
90
- <Button text='all positions' onClick={this.showAll}></Button>
91
- </div>
120
+ <div className="docs-page__content-row">
121
+ <Button text="default" onClick={this.showDefault}></Button>
122
+ <Button text="all positions" onClick={this.showAll}></Button>
123
+ </div>
92
124
  </Markup.ReactMarkupPreview>
93
- <Markup.ReactMarkupCode>{`
125
+ <Markup.ReactMarkupCode>
126
+ {`
94
127
  toasted.notify("I'm a tasty default Toast message!", {});
95
128
 
96
129
  toasted.notify('Position top', { position: 'top' });
@@ -104,16 +137,20 @@ export default class ToastsDoc extends React.Component {
104
137
  </Markup.ReactMarkup>
105
138
 
106
139
  <h3 className="docs-page__h3">Duration</h3>
107
- <p className="docs-page__paragraph">It can be set duration time off notification when is set <code>duration</code> option, otherwise the notification will appear indefinitely until manually closed by the user.</p>
140
+ <p className="docs-page__paragraph">
141
+ It can be set duration time off notification when is set <code>duration</code> option, otherwise the
142
+ notification will appear indefinitely until manually closed by the user.
143
+ </p>
108
144
  <Markup.ReactMarkup>
109
145
  <Markup.ReactMarkupPreview>
110
- <p className="docs-page__paragraph">// Duration time 3000ms and NULL</p>
111
- <div className="docs-page__content-row">
112
- <Button text='3000' onClick={this.showDuration}></Button>
113
- <Button text='null' onClick={this.showNull}></Button>
114
- </div>
146
+ <p className="docs-page__paragraph">// Duration time 3000ms and NULL</p>
147
+ <div className="docs-page__content-row">
148
+ <Button text="3000" onClick={this.showDuration}></Button>
149
+ <Button text="null" onClick={this.showNull}></Button>
150
+ </div>
115
151
  </Markup.ReactMarkupPreview>
116
- <Markup.ReactMarkupCode>{`
152
+ <Markup.ReactMarkupCode>
153
+ {`
117
154
  toasted.notify("Curabitur blandit tempus porttitor.", { duration: 3000 });
118
155
  toasted.notify("Curabitur blandit tempus porttitor.", {});
119
156
  `}
@@ -121,35 +158,43 @@ export default class ToastsDoc extends React.Component {
121
158
  </Markup.ReactMarkup>
122
159
 
123
160
  <h3 className="docs-page__h3">Coloring and Icon</h3>
124
- <p className="docs-page__paragraph">For Superdesk only Default and Primary buttons should be used in most cases.
125
- Other semantic colour options are allowed but should be used only in cases where a clear distinction between similarly important actions is needed (e.g. Send To versus Publish action). Also it can be set icons for toast.
126
- Just add any of the available classes from the Icon font as a value of the icon prop</p>
161
+ <p className="docs-page__paragraph">
162
+ For Superdesk only Default and Primary buttons should be used in most cases. Other semantic colour
163
+ options are allowed but should be used only in cases where a clear distinction between similarly
164
+ important actions is needed (e.g. Send To versus Publish action). Also it can be set icons for
165
+ toast. Just add any of the available classes from the Icon font as a value of the icon prop
166
+ </p>
127
167
  <Markup.ReactMarkup>
128
168
  <Markup.ReactMarkupPreview>
129
- <div className="docs-page__content-row">
130
- <Button type='success' text='success' onClick={this.showSuccess}></Button>
131
- <Button type='alert' text='alert' onClick={this.showAlert}></Button>
132
- </div>
169
+ <div className="docs-page__content-row">
170
+ <Button type="success" text="success" onClick={this.showSuccess}></Button>
171
+ <Button type="alert" text="alert" onClick={this.showAlert}></Button>
172
+ </div>
133
173
  </Markup.ReactMarkupPreview>
134
- <Markup.ReactMarkupCode>{`
174
+ <Markup.ReactMarkupCode>
175
+ {`
135
176
  toasted.notify("I'm a tasty default Toast message!", { type: 'success', icon: 'ok'});
136
177
  toasted.notify("Danger! Condimentum ridiculus ultricies ornare mollis.", { type: 'alert', icon: 'exclamation-sign', position: 'bottom'});
137
178
  `}
138
179
  </Markup.ReactMarkupCode>
139
180
  </Markup.ReactMarkup>
140
-
181
+
141
182
  <h3 className="docs-page__h3">Size</h3>
142
- <p className="docs-page__paragraph">To change the default size set the size value either to <code>'fixed-s'</code>, <code>'fixed-m'</code>, <code>'fixed-l'</code> or <code>'fixed-xl'</code>.</p>
183
+ <p className="docs-page__paragraph">
184
+ To change the default size set the size value either to <code>'fixed-s'</code>,{' '}
185
+ <code>'fixed-m'</code>, <code>'fixed-l'</code> or <code>'fixed-xl'</code>.
186
+ </p>
143
187
  <Markup.ReactMarkup>
144
188
  <Markup.ReactMarkupPreview>
145
- <div className="docs-page__content-row">
146
- <Button text='fixed-s' onClick={this.showSizeS}></Button>
147
- <Button text='fixed-m' onClick={this.showSizeM}></Button>
148
- <Button text='fixed-l' onClick={this.showSizeL}></Button>
149
- <Button text='fixed-xl' onClick={this.showSizeXL}></Button>
150
- </div>
189
+ <div className="docs-page__content-row">
190
+ <Button text="fixed-s" onClick={this.showSizeS}></Button>
191
+ <Button text="fixed-m" onClick={this.showSizeM}></Button>
192
+ <Button text="fixed-l" onClick={this.showSizeL}></Button>
193
+ <Button text="fixed-xl" onClick={this.showSizeXL}></Button>
194
+ </div>
151
195
  </Markup.ReactMarkupPreview>
152
- <Markup.ReactMarkupCode>{`
196
+ <Markup.ReactMarkupCode>
197
+ {`
153
198
  toasted.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-s' });
154
199
  toasted.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-m' });
155
200
  toasted.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-l' });
@@ -162,12 +207,13 @@ export default class ToastsDoc extends React.Component {
162
207
  <p className="docs-page__paragraph"></p>
163
208
  <Markup.ReactMarkup>
164
209
  <Markup.ReactMarkupPreview>
165
- <div className="docs-page__content-row">
166
- <Button text='heading' type='primary' onClick={this.showCustomHeading}></Button>
167
- <Button text='element' onClick={this.showAnotherCustomElement}></Button>
168
- </div>
210
+ <div className="docs-page__content-row">
211
+ <Button text="heading" type="primary" onClick={this.showCustomHeading}></Button>
212
+ <Button text="element" onClick={this.showAnotherCustomElement}></Button>
213
+ </div>
169
214
  </Markup.ReactMarkupPreview>
170
- <Markup.ReactMarkupCode>{`
215
+ <Markup.ReactMarkupCode>
216
+ {`
171
217
  toasted.notify(<HeadingText heading='I have Toaster heading!' text='Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.' />, { type: 'primary', icon: 'info-sign', position: 'bottom' });
172
218
  toasted.notify(
173
219
  <React.Fragment>
@@ -188,14 +234,50 @@ export default class ToastsDoc extends React.Component {
188
234
 
189
235
  <h3 className="docs-page__h3">Props</h3>
190
236
  <PropsList>
191
- <Prop name='message' isRequired={true} type='string | React.ReactNode' default='normal' description='Message value or custom message element'/>
192
- <Prop name='icon' isRequired={false} type='string' default='' description='Icon class name without the icon- part.'/>
193
- <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | light' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).'/>
194
- <Prop name='position' isRequired={false} type='top | bottom | top-right | top-left | bottom-right | bottom-left' default='top' description='Position of the toast'/>
195
- <Prop name='size' isRequired={false} type='fixed-s | fixed-m | fixed-l | fixed-xl' default='normal' description='Specifies a different sizes of toast.'/>
196
- <Prop name='duration' isRequired={false} type='number | null' default='null' description='Specifies a duration time of toast.'/>
237
+ <Prop
238
+ name="message"
239
+ isRequired={true}
240
+ type="string | React.ReactNode"
241
+ default="normal"
242
+ description="Message value or custom message element"
243
+ />
244
+ <Prop
245
+ name="icon"
246
+ isRequired={false}
247
+ type="string"
248
+ default=""
249
+ description="Icon class name without the icon- part."
250
+ />
251
+ <Prop
252
+ name="type"
253
+ isRequired={false}
254
+ type="default | primary | success | warning | alert | highlight | light"
255
+ default="default"
256
+ description="Default + semantic colour variations (e.g. primary, success etc.)."
257
+ />
258
+ <Prop
259
+ name="position"
260
+ isRequired={false}
261
+ type="top | bottom | top-right | top-left | bottom-right | bottom-left"
262
+ default="top"
263
+ description="Position of the toast"
264
+ />
265
+ <Prop
266
+ name="size"
267
+ isRequired={false}
268
+ type="fixed-s | fixed-m | fixed-l | fixed-xl"
269
+ default="normal"
270
+ description="Specifies a different sizes of toast."
271
+ />
272
+ <Prop
273
+ name="duration"
274
+ isRequired={false}
275
+ type="number | null"
276
+ default="null"
277
+ description="Specifies a duration time of toast."
278
+ />
197
279
  </PropsList>
198
280
  </section>
199
- )
281
+ );
200
282
  }
201
283
  }