superdesk-ui-framework 4.0.46 → 4.0.48

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 (563) 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/form-elements/_forms-general.scss +0 -4
  9. package/app-typescript/components/Alert.tsx +12 -16
  10. package/app-typescript/components/Autocomplete.tsx +53 -42
  11. package/app-typescript/components/Badge.tsx +1 -1
  12. package/app-typescript/components/Button.tsx +5 -11
  13. package/app-typescript/components/ButtonGroup.tsx +15 -10
  14. package/app-typescript/components/Carousel.tsx +25 -26
  15. package/app-typescript/components/CheckButtonGroup.tsx +6 -10
  16. package/app-typescript/components/Checkbox.tsx +16 -10
  17. package/app-typescript/components/CheckboxButton.tsx +22 -13
  18. package/app-typescript/components/ContentDivider.tsx +6 -7
  19. package/app-typescript/components/CreateButton.tsx +8 -6
  20. package/app-typescript/components/DatePicker.tsx +59 -55
  21. package/app-typescript/components/DateTimePicker.tsx +175 -117
  22. package/app-typescript/components/Divider.tsx +2 -4
  23. package/app-typescript/components/DonutChart.tsx +11 -6
  24. package/app-typescript/components/DragHandle.tsx +10 -6
  25. package/app-typescript/components/DragHandleDots.tsx +1 -3
  26. package/app-typescript/components/DropZone.tsx +27 -25
  27. package/app-typescript/components/Dropdown.tsx +61 -102
  28. package/app-typescript/components/DropdownFirst.tsx +57 -69
  29. package/app-typescript/components/DurationInput.tsx +64 -54
  30. package/app-typescript/components/Editor/EditorButton.tsx +4 -3
  31. package/app-typescript/components/EmptyState.tsx +10 -14
  32. package/app-typescript/components/Form/FormGroup.tsx +9 -16
  33. package/app-typescript/components/Form/FormItem.tsx +1 -5
  34. package/app-typescript/components/Form/FormLabel.tsx +0 -1
  35. package/app-typescript/components/Form/FormRow.tsx +12 -19
  36. package/app-typescript/components/Form/FormRowNew.tsx +9 -16
  37. package/app-typescript/components/Form/FormText.tsx +1 -5
  38. package/app-typescript/components/Form/InputBase.tsx +12 -11
  39. package/app-typescript/components/Form/InputNew.tsx +11 -12
  40. package/app-typescript/components/Form/InputWrapper.tsx +9 -18
  41. package/app-typescript/components/Form/index.tsx +9 -9
  42. package/app-typescript/components/FormLabel.tsx +1 -5
  43. package/app-typescript/components/GridItem.tsx +38 -69
  44. package/app-typescript/components/GridList.tsx +2 -6
  45. package/app-typescript/components/HeadingText.tsx +4 -5
  46. package/app-typescript/components/IconButton.tsx +4 -10
  47. package/app-typescript/components/IconLabel.tsx +5 -5
  48. package/app-typescript/components/IconPicker.tsx +128 -126
  49. package/app-typescript/components/IllustrationButton.tsx +2 -8
  50. package/app-typescript/components/Input.tsx +2 -2
  51. package/app-typescript/components/Label.tsx +11 -7
  52. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +1 -5
  53. package/app-typescript/components/Layouts/AuthoringContainer.tsx +4 -6
  54. package/app-typescript/components/Layouts/AuthoringFrame.tsx +4 -20
  55. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +1 -5
  56. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +1 -5
  57. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +1 -5
  58. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +1 -5
  59. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +1 -5
  60. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +1 -5
  61. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +1 -5
  62. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +1 -3
  63. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -6
  64. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +5 -5
  65. package/app-typescript/components/Layouts/AuthoringMain.tsx +3 -4
  66. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +1 -5
  67. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +1 -5
  68. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +1 -6
  69. package/app-typescript/components/Layouts/BottomBarAction.tsx +8 -10
  70. package/app-typescript/components/Layouts/Container.tsx +13 -8
  71. package/app-typescript/components/Layouts/ContentSplitter.tsx +2 -6
  72. package/app-typescript/components/Layouts/CoreLayout.tsx +5 -12
  73. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +1 -1
  74. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +1 -5
  75. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -4
  76. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +1 -5
  77. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +2 -4
  78. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +8 -9
  79. package/app-typescript/components/Layouts/HamburgerButton.tsx +13 -14
  80. package/app-typescript/components/Layouts/HeaderPanel.tsx +1 -5
  81. package/app-typescript/components/Layouts/Layout.tsx +10 -16
  82. package/app-typescript/components/Layouts/LayoutContainer.tsx +2 -7
  83. package/app-typescript/components/Layouts/LeftPanel.tsx +4 -11
  84. package/app-typescript/components/Layouts/MainMenu.tsx +18 -32
  85. package/app-typescript/components/Layouts/MainPanel.tsx +10 -11
  86. package/app-typescript/components/Layouts/NotificationPanel.tsx +20 -29
  87. package/app-typescript/components/Layouts/OverlayPanel.tsx +3 -5
  88. package/app-typescript/components/Layouts/PageLayout.tsx +4 -21
  89. package/app-typescript/components/Layouts/Panel.tsx +45 -81
  90. package/app-typescript/components/Layouts/index.tsx +39 -39
  91. package/app-typescript/components/LeftMenu.tsx +51 -53
  92. package/app-typescript/components/ListItemLoader.tsx +1 -1
  93. package/app-typescript/components/Lists/BoxedList.tsx +16 -41
  94. package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +2 -10
  95. package/app-typescript/components/Lists/ContentList.tsx +68 -62
  96. package/app-typescript/components/Lists/SimpleList.tsx +13 -12
  97. package/app-typescript/components/Lists/TableList.tsx +169 -217
  98. package/app-typescript/components/Lists/index.tsx +2 -2
  99. package/app-typescript/components/Loader.tsx +1 -3
  100. package/app-typescript/components/Menu.tsx +2 -4
  101. package/app-typescript/components/Modal.tsx +21 -21
  102. package/app-typescript/components/MultiSelect.tsx +6 -6
  103. package/app-typescript/components/NavButton.tsx +10 -8
  104. package/app-typescript/components/Navigation/BottomNav.tsx +21 -17
  105. package/app-typescript/components/Navigation/QuickNavBar.tsx +40 -37
  106. package/app-typescript/components/Navigation/SideBarMenu.tsx +21 -17
  107. package/app-typescript/components/Navigation/SideBarTabs.tsx +13 -19
  108. package/app-typescript/components/Navigation/index.tsx +3 -3
  109. package/app-typescript/components/Popover.tsx +19 -21
  110. package/app-typescript/components/PropsList.tsx +2 -4
  111. package/app-typescript/components/RadioButtonGroup.tsx +48 -45
  112. package/app-typescript/components/RadioGroup.tsx +9 -8
  113. package/app-typescript/components/ResizablePanels.tsx +2 -3
  114. package/app-typescript/components/ResizeObserverComponent.tsx +1 -5
  115. package/app-typescript/components/SearchBar.tsx +53 -45
  116. package/app-typescript/components/Select.tsx +6 -8
  117. package/app-typescript/components/SelectGrid.tsx +32 -40
  118. package/app-typescript/components/SelectPreview.tsx +31 -25
  119. package/app-typescript/components/SelectWithTemplate.tsx +10 -11
  120. package/app-typescript/components/ShowPopup.tsx +30 -46
  121. package/app-typescript/components/SidebarMenu.tsx +19 -18
  122. package/app-typescript/components/Skeleton.tsx +12 -11
  123. package/app-typescript/components/SlidingToolbar.tsx +1 -6
  124. package/app-typescript/components/Spinner.tsx +2 -6
  125. package/app-typescript/components/StrechBar.tsx +1 -5
  126. package/app-typescript/components/SubNav.tsx +10 -8
  127. package/app-typescript/components/SvgIconIllustration.tsx +477 -105
  128. package/app-typescript/components/Switch.tsx +14 -12
  129. package/app-typescript/components/SwitchGroup.tsx +10 -10
  130. package/app-typescript/components/TabCustom.tsx +28 -35
  131. package/app-typescript/components/TabList.tsx +13 -10
  132. package/app-typescript/components/Tag.tsx +21 -24
  133. package/app-typescript/components/TagInput.tsx +4 -11
  134. package/app-typescript/components/Text/Heading.tsx +21 -41
  135. package/app-typescript/components/Text/Text.tsx +16 -12
  136. package/app-typescript/components/Text/Time.tsx +14 -10
  137. package/app-typescript/components/ThemeSelector.tsx +15 -14
  138. package/app-typescript/components/TimePicker.tsx +2 -2
  139. package/app-typescript/components/TimePickerV2.tsx +20 -20
  140. package/app-typescript/components/Toast.tsx +11 -7
  141. package/app-typescript/components/ToastMessage.tsx +3 -14
  142. package/app-typescript/components/ToastText.tsx +30 -32
  143. package/app-typescript/components/ToastWrapper.tsx +76 -74
  144. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -45
  145. package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +31 -33
  146. package/app-typescript/components/ToggleBox/index.tsx +3 -7
  147. package/app-typescript/components/Tooltip.tsx +1 -1
  148. package/app-typescript/components/TreeMenu.tsx +72 -81
  149. package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +1 -5
  150. package/app-typescript/components/TreeSelect/TreeSelect.tsx +221 -238
  151. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +20 -24
  152. package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +12 -15
  153. package/app-typescript/components/WithPagination.tsx +34 -39
  154. package/app-typescript/components/WithPopover.tsx +0 -1
  155. package/app-typescript/components/WithPortal.tsx +4 -7
  156. package/app-typescript/components/WithSizeObserver.tsx +2 -6
  157. package/app-typescript/components/_Positioner.tsx +26 -26
  158. package/app-typescript/components/avatar/avatar-action-add.tsx +1 -6
  159. package/app-typescript/components/avatar/avatar-group.tsx +49 -68
  160. package/app-typescript/components/avatar/avatar-image.tsx +18 -12
  161. package/app-typescript/components/avatar/avatar-placeholder.tsx +3 -15
  162. package/app-typescript/components/avatar/avatar-text.tsx +1 -4
  163. package/app-typescript/components/avatar/avatar-wrapper.tsx +18 -30
  164. package/app-typescript/components/avatar/avatar.tsx +5 -8
  165. package/app-typescript/components/with-pagination.spec.tsx +8 -27
  166. package/app-typescript/helpers.tsx +2 -2
  167. package/app-typescript/index.ts +111 -100
  168. package/declarations.d.ts +1 -1
  169. package/dist/components/Alerts.tsx +171 -78
  170. package/dist/components/Autocomplete.tsx +187 -78
  171. package/dist/components/Avatar.tsx +52 -112
  172. package/dist/components/Badges.tsx +111 -67
  173. package/dist/components/BigIconFont.tsx +29 -17
  174. package/dist/components/BoxedList.tsx +244 -114
  175. package/dist/components/ButtonGroups.tsx +213 -147
  176. package/dist/components/Buttons.tsx +409 -137
  177. package/dist/components/Card.tsx +6 -7
  178. package/dist/components/Carousel.tsx +126 -39
  179. package/dist/components/Checkboxs.tsx +446 -105
  180. package/dist/components/Container.tsx +95 -48
  181. package/dist/components/ContentDivider.tsx +110 -63
  182. package/dist/components/ContentList.tsx +577 -253
  183. package/dist/components/CreateButton.tsx +71 -21
  184. package/dist/components/DatePicker.tsx +102 -26
  185. package/dist/components/DateTimePicker.tsx +46 -10
  186. package/dist/components/DragHandleDocs.tsx +56 -26
  187. package/dist/components/DropZone.tsx +67 -29
  188. package/dist/components/Dropdowns.tsx +220 -131
  189. package/dist/components/DurationInput.tsx +92 -32
  190. package/dist/components/EmptyStates.tsx +61 -26
  191. package/dist/components/GridItem.tsx +190 -91
  192. package/dist/components/GridList.tsx +37 -17
  193. package/dist/components/Heading.tsx +81 -35
  194. package/dist/components/IconButtons.tsx +125 -32
  195. package/dist/components/IconFont.tsx +24 -12
  196. package/dist/components/IconLabels.tsx +146 -39
  197. package/dist/components/IconPicker.tsx +30 -13
  198. package/dist/components/IllustrationButton.tsx +40 -20
  199. package/dist/components/Index.tsx +128 -114
  200. package/dist/components/Inputs.tsx +153 -51
  201. package/dist/components/Labels.tsx +191 -117
  202. package/dist/components/LeftNavigations.tsx +327 -100
  203. package/dist/components/ListItems.tsx +8 -9
  204. package/dist/components/Loader.tsx +5 -4
  205. package/dist/components/Menu.tsx +48 -26
  206. package/dist/components/Modal.tsx +298 -104
  207. package/dist/components/MultiSelect.tsx +189 -53
  208. package/dist/components/NavButtons.tsx +86 -30
  209. package/dist/components/Panel.tsx +367 -120
  210. package/dist/components/Popover.tsx +37 -17
  211. package/dist/components/QuickNavigationBar.tsx +222 -86
  212. package/dist/components/RadioGroup.tsx +375 -137
  213. package/dist/components/ResizablePanels.tsx +8 -14
  214. package/dist/components/SelectGrid.tsx +79 -38
  215. package/dist/components/SelectWithTemplate.tsx +23 -14
  216. package/dist/components/Selects.tsx +94 -29
  217. package/dist/components/SimpleList.tsx +91 -41
  218. package/dist/components/SubNav.tsx +57 -37
  219. package/dist/components/Switch.tsx +168 -42
  220. package/dist/components/TableList.tsx +220 -66
  221. package/dist/components/Tabs.tsx +149 -64
  222. package/dist/components/TagInputDocs.tsx +73 -17
  223. package/dist/components/Tags.tsx +104 -73
  224. package/dist/components/Text.tsx +108 -58
  225. package/dist/components/TimePicker.tsx +74 -20
  226. package/dist/components/Toasts.tsx +162 -80
  227. package/dist/components/Togglebox.tsx +164 -62
  228. package/dist/components/Tooltips.tsx +27 -15
  229. package/dist/components/TreeMenu.tsx +95 -59
  230. package/dist/components/TreeSelect.tsx +297 -162
  231. package/dist/components/WithPaginationDocs.tsx +15 -16
  232. package/dist/components/WithSizeObserver.tsx +9 -9
  233. package/dist/components/tree-select/TreeSelect.tsx +126 -77
  234. package/dist/components/tree-select/example-1.tsx +8 -12
  235. package/dist/components/tree-select/example-2.tsx +2 -5
  236. package/dist/components/utilities/BorderRadiusUtilities.tsx +28 -13
  237. package/dist/components/utilities/BorderUtilities.tsx +31 -32
  238. package/dist/components/utilities/DisplayUtilities.tsx +4 -5
  239. package/dist/components/utilities/FlexAndGridUtilities.tsx +38 -38
  240. package/dist/components/utilities/ObjectFitUtilities.tsx +4 -6
  241. package/dist/components/utilities/ObjectPositionUtilities.tsx +3 -4
  242. package/dist/components/utilities/OpacityUtilities.tsx +4 -7
  243. package/dist/components/utilities/OverflowUtilities.tsx +4 -5
  244. package/dist/components/utilities/PositionUtilities.tsx +4 -5
  245. package/dist/components/utilities/ShadowUtilities.tsx +15 -16
  246. package/dist/components/utilities/SpacingUtilities.tsx +483 -178
  247. package/dist/components/utilities/TextUtilities.tsx +109 -60
  248. package/dist/design-patterns/Index.tsx +8 -11
  249. package/dist/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  250. package/dist/examples.bundle.css +1257 -1155
  251. package/dist/examples.bundle.js +6246 -5620
  252. package/dist/playgrounds/dummy-data/items.ts +9 -8
  253. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  254. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  255. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  256. package/dist/playgrounds/react-playgrounds/Index.tsx +11 -11
  257. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  258. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  259. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  260. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  261. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  262. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  263. package/dist/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  264. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  265. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  266. package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  267. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  268. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  269. package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  270. package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  271. package/dist/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  272. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  273. package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  274. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  275. package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  276. package/dist/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  277. package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  278. package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  279. package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  280. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  281. package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  282. package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  283. package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  284. package/dist/playgrounds/react-playgrounds/tsconfig.json +1 -1
  285. package/dist/superdesk-ui.bundle.css +0 -3
  286. package/dist/superdesk-ui.bundle.js +1791 -1865
  287. package/dist/vendor.bundle.js +2 -2
  288. package/examples/css/docs-page.css +1135 -1116
  289. package/examples/css/reset.css +124 -43
  290. package/examples/css/vendor.css +125 -125
  291. package/examples/index.js +138 -139
  292. package/examples/js/doc.js +41 -40
  293. package/examples/js/react.js +82 -48
  294. package/examples/pages/components/Alerts.tsx +171 -78
  295. package/examples/pages/components/Autocomplete.tsx +187 -78
  296. package/examples/pages/components/Avatar.tsx +52 -112
  297. package/examples/pages/components/Badges.tsx +111 -67
  298. package/examples/pages/components/BigIconFont.tsx +29 -17
  299. package/examples/pages/components/BoxedList.tsx +244 -114
  300. package/examples/pages/components/ButtonGroups.tsx +213 -147
  301. package/examples/pages/components/Buttons.tsx +409 -137
  302. package/examples/pages/components/Card.tsx +6 -7
  303. package/examples/pages/components/Carousel.tsx +126 -39
  304. package/examples/pages/components/Checkboxs.tsx +446 -105
  305. package/examples/pages/components/Container.tsx +95 -48
  306. package/examples/pages/components/ContentDivider.tsx +110 -63
  307. package/examples/pages/components/ContentList.tsx +577 -253
  308. package/examples/pages/components/CreateButton.tsx +71 -21
  309. package/examples/pages/components/DatePicker.tsx +102 -26
  310. package/examples/pages/components/DateTimePicker.tsx +46 -10
  311. package/examples/pages/components/DragHandleDocs.tsx +56 -26
  312. package/examples/pages/components/DropZone.tsx +67 -29
  313. package/examples/pages/components/Dropdowns.tsx +220 -131
  314. package/examples/pages/components/DurationInput.tsx +92 -32
  315. package/examples/pages/components/EmptyStates.tsx +61 -26
  316. package/examples/pages/components/GridItem.tsx +190 -91
  317. package/examples/pages/components/GridList.tsx +37 -17
  318. package/examples/pages/components/Heading.tsx +81 -35
  319. package/examples/pages/components/IconButtons.tsx +125 -32
  320. package/examples/pages/components/IconFont.tsx +24 -12
  321. package/examples/pages/components/IconLabels.tsx +146 -39
  322. package/examples/pages/components/IconPicker.tsx +30 -13
  323. package/examples/pages/components/IllustrationButton.tsx +40 -20
  324. package/examples/pages/components/Index.tsx +128 -114
  325. package/examples/pages/components/Inputs.tsx +153 -51
  326. package/examples/pages/components/Labels.tsx +191 -117
  327. package/examples/pages/components/LeftNavigations.tsx +327 -100
  328. package/examples/pages/components/ListItems.tsx +8 -9
  329. package/examples/pages/components/Loader.tsx +5 -4
  330. package/examples/pages/components/Menu.tsx +48 -26
  331. package/examples/pages/components/Modal.tsx +298 -104
  332. package/examples/pages/components/MultiSelect.tsx +189 -53
  333. package/examples/pages/components/NavButtons.tsx +86 -30
  334. package/examples/pages/components/Panel.tsx +367 -120
  335. package/examples/pages/components/Popover.tsx +37 -17
  336. package/examples/pages/components/QuickNavigationBar.tsx +222 -86
  337. package/examples/pages/components/RadioGroup.tsx +375 -137
  338. package/examples/pages/components/ResizablePanels.tsx +8 -14
  339. package/examples/pages/components/SelectGrid.tsx +79 -38
  340. package/examples/pages/components/SelectWithTemplate.tsx +23 -14
  341. package/examples/pages/components/Selects.tsx +94 -29
  342. package/examples/pages/components/SimpleList.tsx +91 -41
  343. package/examples/pages/components/SubNav.tsx +57 -37
  344. package/examples/pages/components/Switch.tsx +168 -42
  345. package/examples/pages/components/TableList.tsx +220 -66
  346. package/examples/pages/components/Tabs.tsx +149 -64
  347. package/examples/pages/components/TagInputDocs.tsx +73 -17
  348. package/examples/pages/components/Tags.tsx +104 -73
  349. package/examples/pages/components/Text.tsx +108 -58
  350. package/examples/pages/components/TimePicker.tsx +74 -20
  351. package/examples/pages/components/Toasts.tsx +162 -80
  352. package/examples/pages/components/Togglebox.tsx +164 -62
  353. package/examples/pages/components/Tooltips.tsx +27 -15
  354. package/examples/pages/components/TreeMenu.tsx +95 -59
  355. package/examples/pages/components/TreeSelect.tsx +297 -162
  356. package/examples/pages/components/WithPaginationDocs.tsx +15 -16
  357. package/examples/pages/components/WithSizeObserver.tsx +9 -9
  358. package/examples/pages/components/tree-select/TreeSelect.tsx +126 -77
  359. package/examples/pages/components/tree-select/example-1.tsx +8 -12
  360. package/examples/pages/components/tree-select/example-2.tsx +2 -5
  361. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +28 -13
  362. package/examples/pages/components/utilities/BorderUtilities.tsx +31 -32
  363. package/examples/pages/components/utilities/DisplayUtilities.tsx +4 -5
  364. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +38 -38
  365. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +4 -6
  366. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +3 -4
  367. package/examples/pages/components/utilities/OpacityUtilities.tsx +4 -7
  368. package/examples/pages/components/utilities/OverflowUtilities.tsx +4 -5
  369. package/examples/pages/components/utilities/PositionUtilities.tsx +4 -5
  370. package/examples/pages/components/utilities/ShadowUtilities.tsx +15 -16
  371. package/examples/pages/components/utilities/SpacingUtilities.tsx +483 -178
  372. package/examples/pages/components/utilities/TextUtilities.tsx +109 -60
  373. package/examples/pages/design-patterns/Index.tsx +8 -11
  374. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  375. package/examples/pages/playgrounds/dummy-data/items.ts +9 -8
  376. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  377. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  378. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  379. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +11 -11
  380. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  381. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  382. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  383. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  384. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  385. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  386. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  387. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  388. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  389. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  390. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  391. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  392. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  393. package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  394. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  395. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  396. package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  397. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  398. package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  399. package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  400. package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  401. package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  402. package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  403. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  404. package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  405. package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  406. package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  407. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +1 -1
  408. package/globals.d.ts +1 -1
  409. package/mocha-setup.ts +3 -3
  410. package/package.json +119 -117
  411. package/react/components/Alert.js +6 -9
  412. package/react/components/Autocomplete.js +15 -23
  413. package/react/components/Badge.js +1 -1
  414. package/react/components/Button.js +4 -6
  415. package/react/components/ButtonGroup.js +1 -1
  416. package/react/components/Carousel.js +3 -3
  417. package/react/components/CheckButtonGroup.js +3 -6
  418. package/react/components/CheckboxButton.js +2 -4
  419. package/react/components/ContentDivider.js +1 -1
  420. package/react/components/DatePicker.js +29 -26
  421. package/react/components/DateTimePicker.d.ts +26 -4
  422. package/react/components/DateTimePicker.js +82 -27
  423. package/react/components/Divider.js +1 -1
  424. package/react/components/DonutChart.js +1 -1
  425. package/react/components/DragHandle.js +1 -1
  426. package/react/components/DragHandleDots.js +1 -1
  427. package/react/components/DropZone.js +6 -8
  428. package/react/components/Dropdown.d.ts +1 -1
  429. package/react/components/Dropdown.js +34 -38
  430. package/react/components/DropdownFirst.d.ts +11 -11
  431. package/react/components/DropdownFirst.js +20 -24
  432. package/react/components/DurationInput.js +37 -34
  433. package/react/components/EmptyState.js +5 -5
  434. package/react/components/Form/FormGroup.js +1 -1
  435. package/react/components/Form/FormItem.js +1 -1
  436. package/react/components/Form/FormRow.js +1 -1
  437. package/react/components/Form/FormRowNew.js +3 -3
  438. package/react/components/Form/FormText.js +1 -1
  439. package/react/components/Form/InputNew.js +3 -3
  440. package/react/components/Form/InputWrapper.js +7 -10
  441. package/react/components/GridItem.d.ts +1 -1
  442. package/react/components/GridItem.js +16 -16
  443. package/react/components/GridList.js +1 -1
  444. package/react/components/HeadingText.js +4 -5
  445. package/react/components/IconLabel.js +3 -5
  446. package/react/components/IconPicker.d.ts +1 -1
  447. package/react/components/IconPicker.js +111 -104
  448. package/react/components/IllustrationButton.js +1 -1
  449. package/react/components/Input.js +1 -1
  450. package/react/components/Layouts/AuthorinInnerSideBar.js +1 -1
  451. package/react/components/Layouts/AuthoringContainer.js +1 -1
  452. package/react/components/Layouts/AuthoringFrame.js +4 -4
  453. package/react/components/Layouts/AuthoringFrameContainer.js +1 -1
  454. package/react/components/Layouts/AuthoringFrameLeftBar.js +1 -1
  455. package/react/components/Layouts/AuthoringFrameMain.js +1 -1
  456. package/react/components/Layouts/AuthoringFrameNavBar.js +1 -1
  457. package/react/components/Layouts/AuthoringFrameOverlay.js +1 -1
  458. package/react/components/Layouts/AuthoringFrameRightBar.js +1 -1
  459. package/react/components/Layouts/AuthoringFrameSidePanel.js +1 -1
  460. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +1 -1
  461. package/react/components/Layouts/AuthoringMainContainer.js +1 -1
  462. package/react/components/Layouts/AuthoringMainContent.js +1 -1
  463. package/react/components/Layouts/AuthoringMainToolBar.js +1 -1
  464. package/react/components/Layouts/BottomBarAction.js +2 -2
  465. package/react/components/Layouts/ContentSplitter.js +1 -1
  466. package/react/components/Layouts/CoreLayout.js +2 -2
  467. package/react/components/Layouts/CoreLayoutContainer.js +1 -1
  468. package/react/components/Layouts/CoreLayoutFooter.js +1 -1
  469. package/react/components/Layouts/CoreLayoutOverlay.js +1 -1
  470. package/react/components/Layouts/CoreLayoutSlideInMenu.js +2 -2
  471. package/react/components/Layouts/CoreLayoutTopMenu.js +3 -3
  472. package/react/components/Layouts/HamburgerButton.js +1 -1
  473. package/react/components/Layouts/HeaderPanel.js +1 -1
  474. package/react/components/Layouts/Layout.d.ts +1 -1
  475. package/react/components/Layouts/Layout.js +9 -9
  476. package/react/components/Layouts/LayoutContainer.js +1 -1
  477. package/react/components/Layouts/LeftPanel.js +1 -1
  478. package/react/components/Layouts/MainMenu.js +8 -10
  479. package/react/components/Layouts/MainPanel.js +1 -1
  480. package/react/components/Layouts/NotificationPanel.d.ts +1 -1
  481. package/react/components/Layouts/NotificationPanel.js +7 -7
  482. package/react/components/Layouts/OverlayPanel.js +3 -3
  483. package/react/components/Layouts/PageLayout.js +2 -2
  484. package/react/components/Layouts/Panel.d.ts +1 -1
  485. package/react/components/Layouts/Panel.js +12 -18
  486. package/react/components/LeftMenu.d.ts +3 -3
  487. package/react/components/LeftMenu.js +11 -13
  488. package/react/components/Lists/BoxedList.js +6 -6
  489. package/react/components/Lists/CalendarWeekDayItem.js +2 -2
  490. package/react/components/Lists/ContentList.js +24 -26
  491. package/react/components/Lists/TableList.d.ts +1 -1
  492. package/react/components/Lists/TableList.js +59 -79
  493. package/react/components/Loader.js +1 -1
  494. package/react/components/Menu.js +1 -1
  495. package/react/components/Modal.d.ts +1 -1
  496. package/react/components/MultiSelect.d.ts +1 -1
  497. package/react/components/MultiSelect.js +2 -2
  498. package/react/components/NavButton.js +2 -4
  499. package/react/components/Navigation/BottomNav.js +9 -8
  500. package/react/components/Navigation/QuickNavBar.js +17 -20
  501. package/react/components/Navigation/SideBarMenu.js +11 -9
  502. package/react/components/Navigation/SideBarTabs.js +9 -8
  503. package/react/components/Popover.js +1 -1
  504. package/react/components/RadioButtonGroup.js +15 -23
  505. package/react/components/ResizablePanels.js +1 -3
  506. package/react/components/ResizeObserverComponent.js +1 -3
  507. package/react/components/SearchBar.js +14 -16
  508. package/react/components/Select.js +3 -3
  509. package/react/components/SelectGrid.js +15 -20
  510. package/react/components/SelectPreview.js +13 -13
  511. package/react/components/SelectWithTemplate.js +3 -5
  512. package/react/components/ShowPopup.js +7 -10
  513. package/react/components/Skeleton.js +1 -1
  514. package/react/components/SlidingToolbar.js +1 -1
  515. package/react/components/Spinner.js +1 -1
  516. package/react/components/StrechBar.js +1 -1
  517. package/react/components/SubNav.js +1 -1
  518. package/react/components/Switch.js +4 -6
  519. package/react/components/SwitchGroup.js +1 -1
  520. package/react/components/TabCustom.js +6 -4
  521. package/react/components/TabList.js +4 -8
  522. package/react/components/Tag.js +13 -17
  523. package/react/components/TagInput.js +1 -1
  524. package/react/components/Text/Heading.js +6 -6
  525. package/react/components/ThemeSelector.js +1 -1
  526. package/react/components/TimePickerV2.js +17 -17
  527. package/react/components/Toast.js +3 -3
  528. package/react/components/ToastMessage.d.ts +1 -1
  529. package/react/components/ToastMessage.js +1 -1
  530. package/react/components/ToastText.js +5 -8
  531. package/react/components/ToastWrapper.js +3 -5
  532. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
  533. package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -7
  534. package/react/components/ToggleBox/SimpleToggleBox.d.ts +1 -1
  535. package/react/components/ToggleBox/SimpleToggleBox.js +5 -5
  536. package/react/components/ToggleBox/index.js +3 -3
  537. package/react/components/TreeMenu.d.ts +1 -1
  538. package/react/components/TreeMenu.js +38 -44
  539. package/react/components/TreeSelect/TreeSelect.d.ts +2 -2
  540. package/react/components/TreeSelect/TreeSelect.js +105 -127
  541. package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -1
  542. package/react/components/TreeSelect/TreeSelectItem.js +10 -13
  543. package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -1
  544. package/react/components/TreeSelect/TreeSelectPill.js +8 -9
  545. package/react/components/WithPagination.js +18 -21
  546. package/react/components/WithPortal.d.ts +1 -1
  547. package/react/components/WithPortal.js +2 -1
  548. package/react/components/WithSizeObserver.js +1 -3
  549. package/react/components/_Positioner.js +11 -11
  550. package/react/components/avatar/avatar-action-add.js +1 -1
  551. package/react/components/avatar/avatar-group.js +11 -14
  552. package/react/components/avatar/avatar-image.js +6 -4
  553. package/react/components/avatar/avatar-placeholder.js +1 -1
  554. package/react/components/avatar/avatar-wrapper.js +2 -4
  555. package/react/components/avatar/avatar.js +4 -3
  556. package/react/helpers.js +2 -2
  557. package/react/index.d.ts +1 -1
  558. package/tasks/webpack.dev.js +1 -1
  559. package/tasks/webpack.js +5 -5
  560. package/tasks/webpack.prod.js +1 -5
  561. package/tsconfig.json +2 -5
  562. package/tslint.json +6 -12
  563. package/webpack.config.js +2 -5
@@ -1,13 +1,13 @@
1
1
  import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
- import { CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
4
- import { DurationInput } from '../../../app-typescript/components/DurationInput';
3
+ import {CheckGroup, Checkbox, PropsList, Prop} from '../../../app-typescript';
4
+ import {DurationInput} from '../../../app-typescript/components/DurationInput';
5
5
 
6
6
  interface IState {
7
7
  inlineLabel: boolean;
8
8
  required: boolean;
9
9
  disabled: boolean;
10
- value: any
10
+ value: any;
11
11
  }
12
12
 
13
13
  export default class DurationInputDoc extends React.Component<{}, IState> {
@@ -18,14 +18,15 @@ export default class DurationInputDoc extends React.Component<{}, IState> {
18
18
  required: false,
19
19
  disabled: false,
20
20
  value: 3661,
21
- }
21
+ };
22
22
  }
23
-
23
+
24
24
  render() {
25
25
  return (
26
- <section className='docs-page__container'>
27
- <h2 className='docs-page__h2'>Duration Input</h2>
28
- <Markup.ReactMarkupCodePreview>{`
26
+ <section className="docs-page__container">
27
+ <h2 className="docs-page__h2">Duration Input</h2>
28
+ <Markup.ReactMarkupCodePreview>
29
+ {`
29
30
  <DurationInput
30
31
  seconds={this.state.value}
31
32
  onChange={(e) => {
@@ -34,33 +35,50 @@ export default class DurationInputDoc extends React.Component<{}, IState> {
34
35
  />
35
36
  `}
36
37
  </Markup.ReactMarkupCodePreview>
37
- <p className='docs-page__paragraph'></p>
38
+ <p className="docs-page__paragraph"></p>
38
39
  <Markup.ReactMarkup>
39
40
  <Markup.ReactMarkupPreview>
40
- <div className='docs-page__content-row docs-page__content-row--no-margin'>
41
- <div className='form__row'>
41
+ <div className="docs-page__content-row docs-page__content-row--no-margin">
42
+ <div className="form__row">
42
43
  <CheckGroup>
43
- <Checkbox checked={this.state.required} label={{text:'Required input'}} onChange={(value) => {this.setState({required: value})}} />
44
- <Checkbox checked={this.state.disabled} label={{text:'Disabled input'}} onChange={(value) => {this.setState({disabled: value})}} />
45
- <Checkbox checked={this.state.inlineLabel} label={{text:'Label positioned inline'}} onChange={(value) => {this.setState({inlineLabel: value})}} />
44
+ <Checkbox
45
+ checked={this.state.required}
46
+ label={{text: 'Required input'}}
47
+ onChange={(value) => {
48
+ this.setState({required: value});
49
+ }}
50
+ />
51
+ <Checkbox
52
+ checked={this.state.disabled}
53
+ label={{text: 'Disabled input'}}
54
+ onChange={(value) => {
55
+ this.setState({disabled: value});
56
+ }}
57
+ />
58
+ <Checkbox
59
+ checked={this.state.inlineLabel}
60
+ label={{text: 'Label positioned inline'}}
61
+ onChange={(value) => {
62
+ this.setState({inlineLabel: value});
63
+ }}
64
+ />
46
65
  </CheckGroup>
47
66
  </div>
48
67
 
49
- <div className='form__row'>
68
+ <div className="form__row">
50
69
  <DurationInput
51
70
  seconds={this.state.value}
52
- label='Label'
53
- info='info message'
71
+ label="Label"
72
+ info="info message"
54
73
  disabled={this.state.disabled}
55
74
  required={this.state.required}
56
75
  inlineLabel={this.state.inlineLabel}
57
76
  onChange={(value) => {
58
- this.setState({value})
77
+ this.setState({value});
59
78
  }}
60
79
  />
61
80
  </div>
62
81
  </div>
63
-
64
82
  </Markup.ReactMarkupPreview>
65
83
  <Markup.ReactMarkupCode>{`
66
84
  <DurationInput
@@ -77,21 +95,63 @@ export default class DurationInputDoc extends React.Component<{}, IState> {
77
95
  `}</Markup.ReactMarkupCode>
78
96
  </Markup.ReactMarkup>
79
97
 
80
- <h3 className='docs-page__h3'>Props</h3>
98
+ <h3 className="docs-page__h3">Props</h3>
81
99
  <PropsList>
82
- <Prop name='hours' isRequired={false} type='number' default='00' description='Hours value.'/>
83
- <Prop name='minutes' isRequired={false} type='number' default='00' description='Minutes value.'/>
84
- <Prop name='seconds' isRequired={false} type='number' default='00' description='Seconds value.'/>
85
- <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
86
- <Prop name='label' isRequired={false} type='string' default='/' description='Label of component.' />
87
- <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline.' />
88
- <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.'/>
89
- <Prop name='info' isRequired={false} type='string' default='/' description='Info message of component.' />
90
- <Prop name='error' isRequired={false} type='string' default='/' description='Error message of component.' />
91
- <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required.' />
92
- <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled.' />
100
+ <Prop name="hours" isRequired={false} type="number" default="00" description="Hours value." />
101
+ <Prop name="minutes" isRequired={false} type="number" default="00" description="Minutes value." />
102
+ <Prop name="seconds" isRequired={false} type="number" default="00" description="Seconds value." />
103
+ <Prop
104
+ name="onChange"
105
+ isRequired={true}
106
+ type="Function"
107
+ default="/"
108
+ description="Callback to invoke when value changes."
109
+ />
110
+ <Prop name="label" isRequired={false} type="string" default="/" description="Label of component." />
111
+ <Prop
112
+ name="inlineLabel"
113
+ isRequired={false}
114
+ type="boolean"
115
+ default="false"
116
+ description="Position labels as inline."
117
+ />
118
+ <Prop
119
+ name="tabindex"
120
+ isRequired={false}
121
+ type="number"
122
+ default="/"
123
+ description="Indicates an element can be focused on, and determines how that focus is handled."
124
+ />
125
+ <Prop
126
+ name="info"
127
+ isRequired={false}
128
+ type="string"
129
+ default="/"
130
+ description="Info message of component."
131
+ />
132
+ <Prop
133
+ name="error"
134
+ isRequired={false}
135
+ type="string"
136
+ default="/"
137
+ description="Error message of component."
138
+ />
139
+ <Prop
140
+ name="required"
141
+ isRequired={false}
142
+ type="boolean"
143
+ default="false"
144
+ description="Mark field as required."
145
+ />
146
+ <Prop
147
+ name="disabled"
148
+ isRequired={false}
149
+ type="boolean"
150
+ default="false"
151
+ description="Mark field as disabled."
152
+ />
93
153
  </PropsList>
94
154
  </section>
95
- )
155
+ );
96
156
  }
97
157
  }
@@ -1,14 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
- import { EmptyState, Button, Prop, PropsList } from '../../../app-typescript';
3
+ import {EmptyState, Button, Prop, PropsList} from '../../../app-typescript';
4
4
 
5
5
  export default class EmptyStateDoc extends React.Component {
6
6
  render() {
7
7
  return (
8
- <section className='docs-page__container'>
9
- <h2 className='docs-page__h2'>Empty States</h2>
10
-
11
- <Markup.ReactMarkupCodePreview>{`
8
+ <section className="docs-page__container">
9
+ <h2 className="docs-page__h2">Empty States</h2>
10
+
11
+ <Markup.ReactMarkupCodePreview>
12
+ {`
12
13
  <EmptyState
13
14
  title={gettext('This is an empty state example')}
14
15
  description={gettext('Morbi leo risus, porta ac consectetur ac.')}
@@ -16,35 +17,40 @@ export default class EmptyStateDoc extends React.Component {
16
17
  `}
17
18
  </Markup.ReactMarkupCodePreview>
18
19
 
19
- <p className="docs-page__paragraph">Text info and illustrations for empty content areas in Superdesk.</p>
20
+ <p className="docs-page__paragraph">
21
+ Text info and illustrations for empty content areas in Superdesk.
22
+ </p>
20
23
 
21
24
  <Markup.ReactMarkup>
22
25
  <Markup.ReactMarkupPreview>
23
26
  <div className="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-3">
24
27
  <div className="flex-grid__item content-state--empty" style={{height: 500}}>
25
- <Button text="Primary action" type="primary" expand={true} onClick={()=> false} />
28
+ <Button text="Primary action" type="primary" expand={true} onClick={() => false} />
26
29
  <EmptyState
27
30
  title={'This is an example title'}
28
31
  description={'Morbi leo risus, porta ac consectetur ac.'}
29
32
  size="small"
30
- illustration="1"/>
31
- <Button text="Secondary action" style="hollow" expand={true} onClick={()=> false} />
33
+ illustration="1"
34
+ />
35
+ <Button text="Secondary action" style="hollow" expand={true} onClick={() => false} />
32
36
  </div>
33
37
  <div className="flex-grid__item content-state--empty" style={{height: 500}}>
34
38
  <EmptyState
35
39
  title={'Empty state title'}
36
40
  description={'Nulla vitae elit libero, a pharetra augue.'}
37
41
  size="small"
38
- illustration="2"/>
42
+ illustration="2"
43
+ />
39
44
  </div>
40
45
  <div className="flex-grid__item content-state--empty" style={{height: 500}}>
41
- <Button text="Primary action" type="primary" expand={true} onClick={()=> false} />
46
+ <Button text="Primary action" type="primary" expand={true} onClick={() => false} />
42
47
  <EmptyState
43
48
  title={'Empty state example'}
44
49
  description={'Nulla vitae elit libero, a pharetra augue.'}
45
50
  size="small"
46
- illustration="3"/>
47
- <Button text="Secondary action" style="hollow" expand={true} onClick={()=> false} />
51
+ illustration="3"
52
+ />
53
+ <Button text="Secondary action" style="hollow" expand={true} onClick={() => false} />
48
54
  </div>
49
55
  </div>
50
56
  <div className="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-1">
@@ -53,32 +59,39 @@ export default class EmptyStateDoc extends React.Component {
53
59
  title={'Empty state title'}
54
60
  description={'Integer posuere erat a ante venenatis dapibus posuere velit aliquet.'}
55
61
  size="large"
56
- illustration="1"/>
62
+ illustration="1"
63
+ />
57
64
  </div>
58
65
  <div className="flex-grid__item">
59
66
  <EmptyState
60
67
  title={'Some title'}
61
68
  description={'Maecenas sed diam eget risus varius blandit sit amet non magna.'}
62
69
  size="large"
63
- illustration="2"/>
70
+ illustration="2"
71
+ />
64
72
  </div>
65
73
  <div className="flex-grid__item">
66
74
  <EmptyState
67
75
  title={'Empty state heading'}
68
76
  description={'Vestibulum id ligula porta felis euismod semper.'}
69
77
  size="large"
70
- illustration="3"/>
78
+ illustration="3"
79
+ />
71
80
  </div>
72
81
  <div className="flex-grid__item">
73
82
  <EmptyState
74
83
  title={'Dashboard heading'}
75
- description={'Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.'}
84
+ description={
85
+ 'Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.'
86
+ }
76
87
  size="large"
77
- illustration="dashboard"/>
88
+ illustration="dashboard"
89
+ />
78
90
  </div>
79
91
  </div>
80
92
  </Markup.ReactMarkupPreview>
81
- <Markup.ReactMarkupCode>{`
93
+ <Markup.ReactMarkupCode>
94
+ {`
82
95
  // Small
83
96
  <EmptyState
84
97
  title={'This is an example title'}
@@ -121,16 +134,38 @@ export default class EmptyStateDoc extends React.Component {
121
134
  </Markup.ReactMarkupCode>
122
135
  </Markup.ReactMarkup>
123
136
 
124
-
125
137
  <h3 className="docs-page__h3">Props</h3>
126
138
  <PropsList>
127
- <Prop name='title' isRequired={true} type='string' default='false' description='Title of the Empty state info block.'/>
128
- <Prop name='description' isRequired={false} type='string' default='false' description='Additional information e.g. suggested actions etc.'/>
129
- <Prop name='size' isRequired={false} type='small | large' default='small' description='Specifies the size and type of the illustration. Small should be used for narrow areas, like side panels, while large is suited for wider content areas. '/>
130
- <Prop name='illustration' isRequired={false} type='string' default='1' description='In combination with the size prop this defines the illustration. Possible values: 1, 2, 3 and dashboard (with size large only).'/>
139
+ <Prop
140
+ name="title"
141
+ isRequired={true}
142
+ type="string"
143
+ default="false"
144
+ description="Title of the Empty state info block."
145
+ />
146
+ <Prop
147
+ name="description"
148
+ isRequired={false}
149
+ type="string"
150
+ default="false"
151
+ description="Additional information e.g. suggested actions etc."
152
+ />
153
+ <Prop
154
+ name="size"
155
+ isRequired={false}
156
+ type="small | large"
157
+ default="small"
158
+ description="Specifies the size and type of the illustration. Small should be used for narrow areas, like side panels, while large is suited for wider content areas. "
159
+ />
160
+ <Prop
161
+ name="illustration"
162
+ isRequired={false}
163
+ type="string"
164
+ default="1"
165
+ description="In combination with the size prop this defines the illustration. Possible values: 1, 2, 3 and dashboard (with size large only)."
166
+ />
131
167
  </PropsList>
132
-
133
168
  </section>
134
- )
169
+ );
135
170
  }
136
171
  }