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,6 +1,6 @@
1
- import * as React from "react";
2
- import * as Markup from "../../js/react";
3
- import { Button, Prop, PropsList } from "../../../app-typescript";
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import {Button, Prop, PropsList} from '../../../app-typescript';
4
4
  import * as Components from '../playgrounds/react-playgrounds/components/Index';
5
5
 
6
6
  export default class ButtonsDoc extends React.Component {
@@ -8,26 +8,32 @@ export default class ButtonsDoc extends React.Component {
8
8
  return (
9
9
  <section className="docs-page__container">
10
10
  <h2 className="docs-page__h2">Buttons</h2>
11
- <Markup.ReactMarkupCodePreview>{`
11
+ <Markup.ReactMarkupCodePreview>
12
+ {`
12
13
  <Button text="button default" onClick={()=> false} />
13
14
  `}
14
15
  </Markup.ReactMarkupCodePreview>
15
16
  <h3 className="docs-page__h3 docs-page__h3--small-top-m">Coloring</h3>
16
- <p className="docs-page__paragraph">For Superdesk only <em>Default</em> and <em>Primary</em> buttons should be used in most cases. 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. <em>Send To</em> versus <em>Publish</em> action).</p>
17
+ <p className="docs-page__paragraph">
18
+ For Superdesk only <em>Default</em> and <em>Primary</em> buttons should be used in most cases. Other
19
+ semantic colour options are allowed but should be used only in cases where a clear distinction
20
+ between similarly important actions is needed (e.g. <em>Send To</em> versus <em>Publish</em>{' '}
21
+ action).
22
+ </p>
17
23
  <Markup.ReactMarkup>
18
24
  <Markup.ReactMarkupPreview>
19
- <div className="docs-page__content-row">
20
- <Button text="default" onClick={()=> false} tooltip="test tooltip" />
21
- <Button text="primary" type="primary" onClick={()=> false} />
22
- </div>
23
- <p className="docs-page__paragraph">// Other colour options</p>
24
- <div className="docs-page__content-row docs-page__content-row--no-margin">
25
- <Button text="success" type="success" onClick={()=> false} />
26
- <Button text="warning" type="warning" onClick={()=> false} />
27
- <Button text="alert" type="alert" onClick={()=> false} />
28
- <Button text="highlight" type="highlight" onClick={()=> false} />
29
- <Button text="sd-green" type="sd-green" onClick={()=> false} />
30
- </div>
25
+ <div className="docs-page__content-row">
26
+ <Button text="default" onClick={() => false} tooltip="test tooltip" />
27
+ <Button text="primary" type="primary" onClick={() => false} />
28
+ </div>
29
+ <p className="docs-page__paragraph">// Other colour options</p>
30
+ <div className="docs-page__content-row docs-page__content-row--no-margin">
31
+ <Button text="success" type="success" onClick={() => false} />
32
+ <Button text="warning" type="warning" onClick={() => false} />
33
+ <Button text="alert" type="alert" onClick={() => false} />
34
+ <Button text="highlight" type="highlight" onClick={() => false} />
35
+ <Button text="sd-green" type="sd-green" onClick={() => false} />
36
+ </div>
31
37
  </Markup.ReactMarkupPreview>
32
38
  <Markup.ReactMarkupCode>{`
33
39
  <Button text="default" onClick={()=> false} />
@@ -42,25 +48,32 @@ export default class ButtonsDoc extends React.Component {
42
48
  </Markup.ReactMarkup>
43
49
 
44
50
  <Components.GraphicButtonsGroup>
45
- <Components.GraphicButton graphic='design' text='View design guidelines' smallText='Design guidelines' link='#/design/buttons' />
51
+ <Components.GraphicButton
52
+ graphic="design"
53
+ text="View design guidelines"
54
+ smallText="Design guidelines"
55
+ link="#/design/buttons"
56
+ />
46
57
  </Components.GraphicButtonsGroup>
47
58
 
48
59
  <h3 className="docs-page__h3">Hollow style</h3>
49
- <p className="docs-page__paragraph">Define prop <code>style="hollow"</code> to create a hollow buttons.</p>
60
+ <p className="docs-page__paragraph">
61
+ Define prop <code>style="hollow"</code> to create a hollow buttons.
62
+ </p>
50
63
  <Markup.ReactMarkup>
51
64
  <Markup.ReactMarkupPreview>
52
- <div className="docs-page__content-row">
53
- <Button text="default" style="hollow" onClick={()=> false} />
54
- <Button text="primary" type="primary" style="hollow" onClick={()=> false} />
55
- </div>
56
- <p className="docs-page__paragraph">// Other colour options</p>
57
- <div className="docs-page__content-row docs-page__content-row--no-margin">
58
- <Button text="success" type="success" style="hollow" onClick={()=> false} />
59
- <Button text="warning" type="warning" style="hollow" onClick={()=> false} />
60
- <Button text="alert" type="alert" style="hollow" onClick={()=> false} />
61
- <Button text="highlight" type="highlight" style="hollow" onClick={()=> false} />
62
- <Button text="sd-green" type="sd-green" style="hollow" onClick={()=> false} />
63
- </div>
65
+ <div className="docs-page__content-row">
66
+ <Button text="default" style="hollow" onClick={() => false} />
67
+ <Button text="primary" type="primary" style="hollow" onClick={() => false} />
68
+ </div>
69
+ <p className="docs-page__paragraph">// Other colour options</p>
70
+ <div className="docs-page__content-row docs-page__content-row--no-margin">
71
+ <Button text="success" type="success" style="hollow" onClick={() => false} />
72
+ <Button text="warning" type="warning" style="hollow" onClick={() => false} />
73
+ <Button text="alert" type="alert" style="hollow" onClick={() => false} />
74
+ <Button text="highlight" type="highlight" style="hollow" onClick={() => false} />
75
+ <Button text="sd-green" type="sd-green" style="hollow" onClick={() => false} />
76
+ </div>
64
77
  </Markup.ReactMarkupPreview>
65
78
  <Markup.ReactMarkupCode>{`
66
79
  <Button text="default" style="hollow" onClick={()=> false} />
@@ -75,18 +88,20 @@ export default class ButtonsDoc extends React.Component {
75
88
  </Markup.ReactMarkup>
76
89
 
77
90
  <h3 className="docs-page__h3">Text only (without background)</h3>
78
- <p className="docs-page__paragraph">Define prop <code>style="text-only"</code> for buttons without a background.</p>
91
+ <p className="docs-page__paragraph">
92
+ Define prop <code>style="text-only"</code> for buttons without a background.
93
+ </p>
79
94
  <Markup.ReactMarkup>
80
95
  <Markup.ReactMarkupPreview>
81
- <div className="docs-page__content-row docs-page__content-row--no-margin">
82
- <Button text="default" style="text-only" onClick={()=> false} />
83
- <Button text="primary" type="primary" style="text-only" onClick={()=> false} />
84
- <Button text="success" type="success" style="text-only" onClick={()=> false} />
85
- <Button text="warning" type="warning" style="text-only" onClick={()=> false} />
86
- <Button text="alert" type="alert" style="text-only" onClick={()=> false} />
87
- <Button text="highlight" type="highlight" style="text-only" onClick={()=> false} />
88
- <Button text="sd-green" type="sd-green" style="text-only" onClick={()=> false} />
89
- </div>
96
+ <div className="docs-page__content-row docs-page__content-row--no-margin">
97
+ <Button text="default" style="text-only" onClick={() => false} />
98
+ <Button text="primary" type="primary" style="text-only" onClick={() => false} />
99
+ <Button text="success" type="success" style="text-only" onClick={() => false} />
100
+ <Button text="warning" type="warning" style="text-only" onClick={() => false} />
101
+ <Button text="alert" type="alert" style="text-only" onClick={() => false} />
102
+ <Button text="highlight" type="highlight" style="text-only" onClick={() => false} />
103
+ <Button text="sd-green" type="sd-green" style="text-only" onClick={() => false} />
104
+ </div>
90
105
  </Markup.ReactMarkupPreview>
91
106
  <Markup.ReactMarkupCode>{`
92
107
  <Button text="default" style="text-only" onClick={()=> false} />
@@ -101,26 +116,26 @@ export default class ButtonsDoc extends React.Component {
101
116
 
102
117
  <h3 className="docs-page__h3">Sizing</h3>
103
118
  <p className="docs-page__paragraph">
104
- For the default button, no size has to be specified.
105
- To change the default size set the <code>size</code> value either to <code>small</code> or <code>large</code>.
106
- For the button to take the full width of the container add <code>expand={'{true}'}</code>.
119
+ For the default button, no size has to be specified. To change the default size set the{' '}
120
+ <code>size</code> value either to <code>small</code> or <code>large</code>. For the button to take
121
+ the full width of the container add <code>expand={'{true}'}</code>.
107
122
  </p>
108
123
  <Markup.ReactMarkup>
109
124
  <Markup.ReactMarkupPreview>
110
- <div className="docs-page__content-row">
111
- <Button text="button large" size="large" onClick={()=> false} />
112
- <Button text="button default" onClick={()=> false} />
113
- <Button text="button small" size="small" onClick={()=> false} />
114
- </div>
115
- <div className="docs-page__content-row">
116
- <Button text="large expanded button" expand={true} size="large" onClick={()=> false} />
117
- </div>
118
- <div className="docs-page__content-row">
119
- <Button text="default expanded button" expand={true} onClick={()=> false} />
120
- </div>
121
- <div className="docs-page__content-row">
122
- <Button text="small expanded button" expand={true} size="small" onClick={()=> false} />
123
- </div>
125
+ <div className="docs-page__content-row">
126
+ <Button text="button large" size="large" onClick={() => false} />
127
+ <Button text="button default" onClick={() => false} />
128
+ <Button text="button small" size="small" onClick={() => false} />
129
+ </div>
130
+ <div className="docs-page__content-row">
131
+ <Button text="large expanded button" expand={true} size="large" onClick={() => false} />
132
+ </div>
133
+ <div className="docs-page__content-row">
134
+ <Button text="default expanded button" expand={true} onClick={() => false} />
135
+ </div>
136
+ <div className="docs-page__content-row">
137
+ <Button text="small expanded button" expand={true} size="small" onClick={() => false} />
138
+ </div>
124
139
  </Markup.ReactMarkupPreview>
125
140
  <Markup.ReactMarkupCode>{`
126
141
  <Button text="button large" size="large" onClick={()=> false} />
@@ -134,24 +149,38 @@ export default class ButtonsDoc extends React.Component {
134
149
  </Markup.ReactMarkup>
135
150
 
136
151
  <h3 className="docs-page__h3">States</h3>
137
- <p className="docs-page__paragraph">Disabled state:<code>disabled={'{true}'}</code>; Loading state:<code>isLoading={'{true}'}</code>; </p>
152
+ <p className="docs-page__paragraph">
153
+ Disabled state:<code>disabled={'{true}'}</code>; Loading state:<code>isLoading={'{true}'}</code>
154
+ ;{' '}
155
+ </p>
138
156
  <Markup.ReactMarkup>
139
157
  <Markup.ReactMarkupPreview>
140
- <p className="docs-page__paragraph">// Disabled</p>
141
- <div className="docs-page__content-row">
142
- <Button text="default" disabled={true} onClick={()=> false} />
143
- <Button text="primary" type="primary" disabled={true} onClick={()=> false} />
144
- <Button text="default" style="hollow" disabled={true} onClick={()=> false} />
145
- <Button text="primary" type="primary" disabled={true} style="hollow" onClick={()=> false} />
146
- </div>
147
- <p className="docs-page__paragraph">// Loading</p>
148
- <div className="docs-page__content-row">
149
- <Button text="default" isLoading={true} onClick={()=> false} />
150
- <Button text="primary" type="primary" isLoading={true} onClick={()=> false} />
151
- <Button text="default" style="hollow" isLoading={true} onClick={()=> false} />
152
- <Button text="primary" type="primary" isLoading={true} style="hollow" onClick={()=> false} />
153
- </div>
154
-
158
+ <p className="docs-page__paragraph">// Disabled</p>
159
+ <div className="docs-page__content-row">
160
+ <Button text="default" disabled={true} onClick={() => false} />
161
+ <Button text="primary" type="primary" disabled={true} onClick={() => false} />
162
+ <Button text="default" style="hollow" disabled={true} onClick={() => false} />
163
+ <Button
164
+ text="primary"
165
+ type="primary"
166
+ disabled={true}
167
+ style="hollow"
168
+ onClick={() => false}
169
+ />
170
+ </div>
171
+ <p className="docs-page__paragraph">// Loading</p>
172
+ <div className="docs-page__content-row">
173
+ <Button text="default" isLoading={true} onClick={() => false} />
174
+ <Button text="primary" type="primary" isLoading={true} onClick={() => false} />
175
+ <Button text="default" style="hollow" isLoading={true} onClick={() => false} />
176
+ <Button
177
+ text="primary"
178
+ type="primary"
179
+ isLoading={true}
180
+ style="hollow"
181
+ onClick={() => false}
182
+ />
183
+ </div>
155
184
  </Markup.ReactMarkupPreview>
156
185
  <Markup.ReactMarkupCode>{`
157
186
  // Disabled
@@ -169,30 +198,63 @@ export default class ButtonsDoc extends React.Component {
169
198
  </Markup.ReactMarkup>
170
199
 
171
200
  <h3 className="docs-page__h3">Buttons with icon and text</h3>
172
- <p className="docs-page__paragraph">Buttons can be combined with icons from the icon font. Just add any of the available classes from the Icon font as a value of the <code>icon</code> prop.</p>
201
+ <p className="docs-page__paragraph">
202
+ Buttons can be combined with icons from the icon font. Just add any of the available classes from
203
+ the Icon font as a value of the <code>icon</code> prop.
204
+ </p>
173
205
  <Markup.ReactMarkup>
174
206
  <Markup.ReactMarkupPreview>
175
- <p className="docs-page__paragraph">// Default size</p>
176
- <div className="docs-page__content-row">
177
- <Button text="default" icon="info-sign" onClick={()=> false} />
178
- <Button text="primary" type="primary" icon="plus-sign" onClick={()=> false} />
179
- <Button text="success" type="success" icon="ok" onClick={()=> false} />
180
- <Button text="warning" type="warning" icon="exclamation-sign" onClick={()=> false} />
181
- <Button text="alert" type="alert" icon="warning-sign" onClick={()=> false} />
182
- <br />
183
- <Button text="default" icon="info-sign" style="hollow" onClick={()=> false} />
184
- <Button text="primary" type="primary" icon="plus-sign" style="hollow" onClick={()=> false} />
185
- <Button text="success" type="success" icon="ok" style="hollow" onClick={()=> false} />
186
- <Button text="warning" type="warning" icon="exclamation-sign" style="hollow" onClick={()=> false} />
187
- <Button text="alert" type="alert" icon="warning-sign" style="hollow" onClick={()=> false} />
188
- </div>
189
- <p className="docs-page__paragraph">// Large and small options</p>
190
- <div className="docs-page__content-row">
191
- <Button text="default large" icon="info-sign" size="large" onClick={()=> false} />
192
- <Button text="primary large" type="primary" icon="plus-sign" size="large" onClick={()=> false} />
193
- <Button text="default small" icon="info-sign" size="small" onClick={()=> false} />
194
- <Button text="primary small" type="primary" icon="plus-sign" size="small" onClick={()=> false} />
195
- </div>
207
+ <p className="docs-page__paragraph">// Default size</p>
208
+ <div className="docs-page__content-row">
209
+ <Button text="default" icon="info-sign" onClick={() => false} />
210
+ <Button text="primary" type="primary" icon="plus-sign" onClick={() => false} />
211
+ <Button text="success" type="success" icon="ok" onClick={() => false} />
212
+ <Button text="warning" type="warning" icon="exclamation-sign" onClick={() => false} />
213
+ <Button text="alert" type="alert" icon="warning-sign" onClick={() => false} />
214
+ <br />
215
+ <Button text="default" icon="info-sign" style="hollow" onClick={() => false} />
216
+ <Button
217
+ text="primary"
218
+ type="primary"
219
+ icon="plus-sign"
220
+ style="hollow"
221
+ onClick={() => false}
222
+ />
223
+ <Button text="success" type="success" icon="ok" style="hollow" onClick={() => false} />
224
+ <Button
225
+ text="warning"
226
+ type="warning"
227
+ icon="exclamation-sign"
228
+ style="hollow"
229
+ onClick={() => false}
230
+ />
231
+ <Button
232
+ text="alert"
233
+ type="alert"
234
+ icon="warning-sign"
235
+ style="hollow"
236
+ onClick={() => false}
237
+ />
238
+ </div>
239
+ <p className="docs-page__paragraph">// Large and small options</p>
240
+ <div className="docs-page__content-row">
241
+ <Button text="default large" icon="info-sign" size="large" onClick={() => false} />
242
+ <Button
243
+ text="primary large"
244
+ type="primary"
245
+ icon="plus-sign"
246
+ size="large"
247
+ onClick={() => false}
248
+ />
249
+ <Button text="default small" icon="info-sign" size="small" onClick={() => false} />
250
+ <Button
251
+ text="primary small"
252
+ type="primary"
253
+ icon="plus-sign"
254
+ size="small"
255
+ onClick={() => false}
256
+ />
257
+ </div>
196
258
  </Markup.ReactMarkupPreview>
197
259
  <Markup.ReactMarkupCode>{`
198
260
  // Default size
@@ -217,37 +279,175 @@ export default class ButtonsDoc extends React.Component {
217
279
  </Markup.ReactMarkup>
218
280
 
219
281
  <h3 className="docs-page__h3">Buttons with icon font only</h3>
220
- <p className="docs-page__paragraph">Buttons can also contain only an icon, without any visible text. To achieve this specify the <code>icon</code> value and set <code>iconOnly={true}</code>.
221
- The specified text value will be used for the <code>aria-label</code>.</p>
282
+ <p className="docs-page__paragraph">
283
+ Buttons can also contain only an icon, without any visible text. To achieve this specify the{' '}
284
+ <code>icon</code> value and set <code>iconOnly={true}</code>. The specified text value will be used
285
+ for the <code>aria-label</code>.
286
+ </p>
222
287
  <Markup.ReactMarkup>
223
288
  <Markup.ReactMarkupPreview>
224
- <p className="docs-page__paragraph">// Large default and small</p>
225
- <div className="docs-page__content-row">
226
- <Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" iconOnly={true} onClick={()=> false} />
227
- <Button type="primary" icon="plus-sign" text="plus-sign" style="hollow" size="large" iconOnly={true} onClick={()=> false} />
228
- <Button type="highlight" icon="bell" text="bell" size="large" iconOnly={true} onClick={()=> false} />
229
- <Button icon="info-sign" text="info-sign" iconOnly={true} onClick={()=> false} />
230
- <Button type="primary" icon="plus-sign" text="plus-sign" iconOnly={true} onClick={()=> false} />
231
- <Button type="success" icon="ok" text="ok" iconOnly={true} onClick={()=> false} />
232
- <Button type="alert" style="hollow" icon="kill" text="kill" size="small" iconOnly={true} onClick={()=> false} />
233
- <Button icon="calendar" size="small" text="calendar" iconOnly={true} onClick={()=> false} />
234
- <Button type="primary" style="hollow" icon="refresh" text="refresh" size="small" iconOnly={true} onClick={()=> false} />
235
- </div>
289
+ <p className="docs-page__paragraph">// Large default and small</p>
290
+ <div className="docs-page__content-row">
291
+ <Button
292
+ type="warning"
293
+ icon="exclamation-sign"
294
+ text="exclamation-sign"
295
+ size="large"
296
+ iconOnly={true}
297
+ onClick={() => false}
298
+ />
299
+ <Button
300
+ type="primary"
301
+ icon="plus-sign"
302
+ text="plus-sign"
303
+ style="hollow"
304
+ size="large"
305
+ iconOnly={true}
306
+ onClick={() => false}
307
+ />
308
+ <Button
309
+ type="highlight"
310
+ icon="bell"
311
+ text="bell"
312
+ size="large"
313
+ iconOnly={true}
314
+ onClick={() => false}
315
+ />
316
+ <Button icon="info-sign" text="info-sign" iconOnly={true} onClick={() => false} />
317
+ <Button
318
+ type="primary"
319
+ icon="plus-sign"
320
+ text="plus-sign"
321
+ iconOnly={true}
322
+ onClick={() => false}
323
+ />
324
+ <Button type="success" icon="ok" text="ok" iconOnly={true} onClick={() => false} />
325
+ <Button
326
+ type="alert"
327
+ style="hollow"
328
+ icon="kill"
329
+ text="kill"
330
+ size="small"
331
+ iconOnly={true}
332
+ onClick={() => false}
333
+ />
334
+ <Button
335
+ icon="calendar"
336
+ size="small"
337
+ text="calendar"
338
+ iconOnly={true}
339
+ onClick={() => false}
340
+ />
341
+ <Button
342
+ type="primary"
343
+ style="hollow"
344
+ icon="refresh"
345
+ text="refresh"
346
+ size="small"
347
+ iconOnly={true}
348
+ onClick={() => false}
349
+ />
350
+ </div>
236
351
 
237
- <p className="docs-page__paragraph">// Circle (large, default and small)</p>
238
- <div className="docs-page__content-row">
239
- <Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" shape="round" iconOnly={true} onClick={()=> false} />
240
- <Button type="primary" icon="plus-large" text="plus-large" style="hollow" size="large" shape="round" iconOnly={true} onClick={()=> false} />
241
- <Button icon="chevron-up-thin" text="Pull up" style="hollow" shape="round" size="large" iconOnly={true} onClick={()=> false} />
242
- <Button type="highlight" icon="bell" text="bell" size="large" shape="round" iconOnly={true} onClick={()=> false} />
243
- <Button size="normal" icon="info-sign" text="info-sign" shape="round" iconOnly={true} onClick={()=> false} />
244
- <Button type="primary" icon="plus-large" text="plus-large" shape="round" iconOnly={true} onClick={()=> false} />
245
- <Button type="success" icon="ok" text="ok" shape="round" iconOnly={true} onClick={()=> false} />
246
- <Button type="alert" icon="close-small" text="close-small" size="small" shape="round" iconOnly={true} onClick={()=> false} />
247
- <Button type="primary" icon="plus-large" text="Add New" size="small" shape="round" iconOnly={true} onClick={()=> false} />
248
- <Button icon="chevron-up-thin" text="Pull up" size="small" shape="round" iconOnly={true} onClick={()=> false} />
249
- <Button type="sd-green" icon="star" text="star" size="small" shape="round" iconOnly={true} onClick={()=> false} />
250
- </div>
352
+ <p className="docs-page__paragraph">// Circle (large, default and small)</p>
353
+ <div className="docs-page__content-row">
354
+ <Button
355
+ type="warning"
356
+ icon="exclamation-sign"
357
+ text="exclamation-sign"
358
+ size="large"
359
+ shape="round"
360
+ iconOnly={true}
361
+ onClick={() => false}
362
+ />
363
+ <Button
364
+ type="primary"
365
+ icon="plus-large"
366
+ text="plus-large"
367
+ style="hollow"
368
+ size="large"
369
+ shape="round"
370
+ iconOnly={true}
371
+ onClick={() => false}
372
+ />
373
+ <Button
374
+ icon="chevron-up-thin"
375
+ text="Pull up"
376
+ style="hollow"
377
+ shape="round"
378
+ size="large"
379
+ iconOnly={true}
380
+ onClick={() => false}
381
+ />
382
+ <Button
383
+ type="highlight"
384
+ icon="bell"
385
+ text="bell"
386
+ size="large"
387
+ shape="round"
388
+ iconOnly={true}
389
+ onClick={() => false}
390
+ />
391
+ <Button
392
+ size="normal"
393
+ icon="info-sign"
394
+ text="info-sign"
395
+ shape="round"
396
+ iconOnly={true}
397
+ onClick={() => false}
398
+ />
399
+ <Button
400
+ type="primary"
401
+ icon="plus-large"
402
+ text="plus-large"
403
+ shape="round"
404
+ iconOnly={true}
405
+ onClick={() => false}
406
+ />
407
+ <Button
408
+ type="success"
409
+ icon="ok"
410
+ text="ok"
411
+ shape="round"
412
+ iconOnly={true}
413
+ onClick={() => false}
414
+ />
415
+ <Button
416
+ type="alert"
417
+ icon="close-small"
418
+ text="close-small"
419
+ size="small"
420
+ shape="round"
421
+ iconOnly={true}
422
+ onClick={() => false}
423
+ />
424
+ <Button
425
+ type="primary"
426
+ icon="plus-large"
427
+ text="Add New"
428
+ size="small"
429
+ shape="round"
430
+ iconOnly={true}
431
+ onClick={() => false}
432
+ />
433
+ <Button
434
+ icon="chevron-up-thin"
435
+ text="Pull up"
436
+ size="small"
437
+ shape="round"
438
+ iconOnly={true}
439
+ onClick={() => false}
440
+ />
441
+ <Button
442
+ type="sd-green"
443
+ icon="star"
444
+ text="star"
445
+ size="small"
446
+ shape="round"
447
+ iconOnly={true}
448
+ onClick={() => false}
449
+ />
450
+ </div>
251
451
  </Markup.ReactMarkupPreview>
252
452
  <Markup.ReactMarkupCode>{`
253
453
  // Large default and small
@@ -274,20 +474,92 @@ export default class ButtonsDoc extends React.Component {
274
474
 
275
475
  <h3 className="docs-page__h3">Props</h3>
276
476
  <PropsList>
277
- <Prop name='text' isRequired={true} type='string' default='/' description='Text value of the Button. In the case of iconOnly buttons the value will be set to the aria-label.'/>
278
- <Prop name='iconOnly' isRequired={false} type='boolean' default='false' description='This prop is used for Buttons with icons only. It set to true, it will visually hide the text and use the value for the aria-label.'/>
279
- <Prop name='expand' isRequired={false} type='boolean' default='false' description='Spans the full width of the Button parent.'/>
280
- <Prop name='style' isRequired={false} type='filled | hollow | text-only' default='filled' description='Buttons may be one of styles such as hollow buttons, buttons without background (text-only) or filled (default).'/>
281
- <Prop name='shape' isRequired={false} type='square | round' default='square' description='Make shape of button round or default square.'/>
282
- <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).'/>
283
- <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Styles button for diffrent background.'/>
284
- <Prop name='size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button.'/>
285
- <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
286
- <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
287
- <Prop name='isLoading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator and disables the button if set to true.'/>
288
- <Prop name='onClick' isRequired={true} type='function' default='false' description='Callback fired when a button is pressed.'/>
477
+ <Prop
478
+ name="text"
479
+ isRequired={true}
480
+ type="string"
481
+ default="/"
482
+ description="Text value of the Button. In the case of iconOnly buttons the value will be set to the aria-label."
483
+ />
484
+ <Prop
485
+ name="iconOnly"
486
+ isRequired={false}
487
+ type="boolean"
488
+ default="false"
489
+ description="This prop is used for Buttons with icons only. It set to true, it will visually hide the text and use the value for the aria-label."
490
+ />
491
+ <Prop
492
+ name="expand"
493
+ isRequired={false}
494
+ type="boolean"
495
+ default="false"
496
+ description="Spans the full width of the Button parent."
497
+ />
498
+ <Prop
499
+ name="style"
500
+ isRequired={false}
501
+ type="filled | hollow | text-only"
502
+ default="filled"
503
+ description="Buttons may be one of styles such as hollow buttons, buttons without background (text-only) or filled (default)."
504
+ />
505
+ <Prop
506
+ name="shape"
507
+ isRequired={false}
508
+ type="square | round"
509
+ default="square"
510
+ description="Make shape of button round or default square."
511
+ />
512
+ <Prop
513
+ name="type"
514
+ isRequired={false}
515
+ type="default | primary | success | warning | alert | highlight | sd-green"
516
+ default="default"
517
+ description="Default + semantic colour variations (e.g. primary, success etc.)."
518
+ />
519
+ <Prop
520
+ name="theme"
521
+ isRequired={false}
522
+ type="light | dark"
523
+ default="light"
524
+ description="Styles button for diffrent background."
525
+ />
526
+ <Prop
527
+ name="size"
528
+ isRequired={false}
529
+ type="small | normal | large"
530
+ default="normal"
531
+ description="Specifies a small, normal or large button."
532
+ />
533
+ <Prop
534
+ name="icon"
535
+ isRequired={false}
536
+ type="string"
537
+ default="/"
538
+ description="Icon class name without the icon- part."
539
+ />
540
+ <Prop
541
+ name="disabled"
542
+ isRequired={false}
543
+ type="boolean"
544
+ default="false"
545
+ description="Disables the Button, preventing mouse events."
546
+ />
547
+ <Prop
548
+ name="isLoading"
549
+ isRequired={false}
550
+ type="boolean"
551
+ default="false"
552
+ description="Adds a loading indicator and disables the button if set to true."
553
+ />
554
+ <Prop
555
+ name="onClick"
556
+ isRequired={true}
557
+ type="function"
558
+ default="false"
559
+ description="Callback fired when a button is pressed."
560
+ />
289
561
  </PropsList>
290
562
  </section>
291
- )
563
+ );
292
564
  }
293
565
  }