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
@@ -2,7 +2,15 @@ import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
3
  import * as Components from '../playgrounds/react-playgrounds/components/Index';
4
4
 
5
- import { RadioGroup, RadioButtonGroup, CheckGroup, CheckButtonGroup, Alert, Prop, PropsList } from '../../../app-typescript';
5
+ import {
6
+ RadioGroup,
7
+ RadioButtonGroup,
8
+ CheckGroup,
9
+ CheckButtonGroup,
10
+ Alert,
11
+ Prop,
12
+ PropsList,
13
+ } from '../../../app-typescript';
6
14
 
7
15
  interface IState {
8
16
  value1?: string;
@@ -41,7 +49,8 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
41
49
  <section className="docs-page__container">
42
50
  <h2 className="docs-page__h2">RadioGroup</h2>
43
51
  <p className="docs-page__paragraph"></p>
44
- <Markup.ReactMarkupCodePreview>{`
52
+ <Markup.ReactMarkupCodePreview>
53
+ {`
45
54
  <RadioGroup options={[
46
55
  {value:'test1', label:'Default label'},
47
56
  {value:'test2', label:'Default label'},
@@ -49,45 +58,58 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
49
58
  `}
50
59
  </Markup.ReactMarkupCodePreview>
51
60
  <h3 className="docs-page__h3">Basic RadioGroup</h3>
52
- <p className="docs-page__paragraph">The label of the RadioGroup is by default always on the right. Although it's not in line with Superdesk design standards the label can also be placed to the left, by addind the prop <code>labelSide='start'</code>.</p>
61
+ <p className="docs-page__paragraph">
62
+ The label of the RadioGroup is by default always on the right. Although it's not in line with
63
+ Superdesk design standards the label can also be placed to the left, by addind the prop{' '}
64
+ <code>labelSide='start'</code>.
65
+ </p>
53
66
  <Markup.ReactMarkup>
54
67
  <Markup.ReactMarkupPreview>
55
68
  <p className="docs-page__paragraph">// Horizontal - labels on the end/right (default)</p>
56
- <div className='form__group'>
57
- <RadioGroup options={[
58
- {value:'test1', label:'Default label'},
59
- {value:'test2', label:'Default label'},
60
- {value:'test3', label:'Default label'},
61
- {value:'test4', label:'Disabled state', disabled: true}
62
- ]}
63
- value={this.state.value1}
64
- onChange={(value) => this.setState(() => ({ value1: value }))} />
69
+ <div className="form__group">
70
+ <RadioGroup
71
+ options={[
72
+ {value: 'test1', label: 'Default label'},
73
+ {value: 'test2', label: 'Default label'},
74
+ {value: 'test3', label: 'Default label'},
75
+ {value: 'test4', label: 'Disabled state', disabled: true},
76
+ ]}
77
+ value={this.state.value1}
78
+ onChange={(value) => this.setState(() => ({value1: value}))}
79
+ />
65
80
  </div>
66
- <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Horizontal - labels on the start/left</p>
81
+ <p className="docs-page__paragraph docs-page__paragraph--topMarginL">
82
+ // Horizontal - labels on the start/left
83
+ </p>
67
84
  <p className="docs-page__paragraph--small">This option should be avoided in general use.</p>
68
- <div className='form__group'>
69
- <RadioGroup options={[
70
- {value:'test5', label:'Label on the left'},
71
- {value:'test6', label:'Label on the left'},
72
- {value:'test7', label:'Label on the left'},
73
- ]}
74
- value={this.state.value2}
75
- labelSide='start'
76
- onChange={(value) => this.setState(() => ({ value2: value }))} />
85
+ <div className="form__group">
86
+ <RadioGroup
87
+ options={[
88
+ {value: 'test5', label: 'Label on the left'},
89
+ {value: 'test6', label: 'Label on the left'},
90
+ {value: 'test7', label: 'Label on the left'},
91
+ ]}
92
+ value={this.state.value2}
93
+ labelSide="start"
94
+ onChange={(value) => this.setState(() => ({value2: value}))}
95
+ />
77
96
  </div>
78
97
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Vertical RadioGroup</p>
79
- <div className='form__group'>
80
- <RadioGroup options={[
81
- {value:'test105', label:'Radio vertical one'},
82
- {value:'test106', label:'Radio vertical two'},
83
- {value:'test107', label:'Radio vertical three'},
84
- ]}
85
- value={this.state.value2}
86
- orientation='vertical'
87
- onChange={(value) => this.setState(() => ({ value2: value }))} />
98
+ <div className="form__group">
99
+ <RadioGroup
100
+ options={[
101
+ {value: 'test105', label: 'Radio vertical one'},
102
+ {value: 'test106', label: 'Radio vertical two'},
103
+ {value: 'test107', label: 'Radio vertical three'},
104
+ ]}
105
+ value={this.state.value2}
106
+ orientation="vertical"
107
+ onChange={(value) => this.setState(() => ({value2: value}))}
108
+ />
88
109
  </div>
89
110
  </Markup.ReactMarkupPreview>
90
- <Markup.ReactMarkupCode>{`
111
+ <Markup.ReactMarkupCode>
112
+ {`
91
113
  // Label on the right (default)
92
114
  <RadioGroup options={[
93
115
  {value:'test1', label:'Default label'},
@@ -122,68 +144,113 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
122
144
  </Markup.ReactMarkup>
123
145
 
124
146
  <Components.GraphicButtonsGroup>
125
- <Components.GraphicButton graphic='design' text='Radio usage guidelines' smallText='Design guidelines' link='#/design/checkbox-and-radio' />
147
+ <Components.GraphicButton
148
+ graphic="design"
149
+ text="Radio usage guidelines"
150
+ smallText="Design guidelines"
151
+ link="#/design/checkbox-and-radio"
152
+ />
126
153
  </Components.GraphicButtonsGroup>
127
154
 
128
155
  <h3 className="docs-page__h3">RadioButtonGroup</h3>
129
- <Markup.ReactMarkupCodePreview>{`
156
+ <Markup.ReactMarkupCodePreview>
157
+ {`
130
158
  <RadioButtonGroup options={[
131
159
  {value:'test1', label:'Button style radio one'},
132
160
  {value:'test2', label:'Button style radio two'},
133
161
  ]} value={value1} />
134
162
  `}
135
163
  </Markup.ReactMarkupCodePreview>
136
- <p className="docs-page__paragraph">The <code>RadioButtonGroup</code> component shares the same functionality as the RadioGroup component but with a different visual appearance and some additional layout options. Any icon from the <a className='link' href='#/components/icons' target='blank'>icon font</a> can be added to the component by specifying a value (icon name without the <code>icon-</code> prefix) inside an options value e.g. <code>{'{value:"somevalue", label:"I have an icon", icon:"grid-view"}'}</code>.</p>
164
+ <p className="docs-page__paragraph">
165
+ The <code>RadioButtonGroup</code> component shares the same functionality as the RadioGroup
166
+ component but with a different visual appearance and some additional layout options. Any icon from
167
+ the{' '}
168
+ <a className="link" href="#/components/icons" target="blank">
169
+ icon font
170
+ </a>{' '}
171
+ can be added to the component by specifying a value (icon name without the <code>icon-</code>{' '}
172
+ prefix) inside an options value e.g.{' '}
173
+ <code>{'{value:"somevalue", label:"I have an icon", icon:"grid-view"}'}</code>.
174
+ </p>
137
175
 
138
176
  <Markup.ReactMarkup>
139
177
  <Markup.ReactMarkupPreview>
140
178
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Basic</p>
141
- <div className='form__group'>
142
- <RadioButtonGroup options={[
143
- {value:'test6', label:'Button style radio'},
144
- {value:'test7', label:'Button style'},
145
- {value:'test8', label:'Button style'},
146
- {value:'test9', label:'Button style disabled', disabled:true},
147
- ]} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} />
179
+ <div className="form__group">
180
+ <RadioButtonGroup
181
+ options={[
182
+ {value: 'test6', label: 'Button style radio'},
183
+ {value: 'test7', label: 'Button style'},
184
+ {value: 'test8', label: 'Button style'},
185
+ {value: 'test9', label: 'Button style disabled', disabled: true},
186
+ ]}
187
+ value={this.state.value3}
188
+ onChange={(value) => this.setState(() => ({value3: value}))}
189
+ />
148
190
  </div>
149
191
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// With label</p>
150
- <div className='form__group'>
151
- <RadioButtonGroup group={{groupLabel: 'My group label'}}
192
+ <div className="form__group">
193
+ <RadioButtonGroup
194
+ group={{groupLabel: 'My group label'}}
152
195
  options={[
153
- {value:'test6', label:'Button style radio'},
154
- {value:'test7', label:'Button style'},
155
- {value:'test8', label:'Button style'},
156
- {value:'test9', label:'Button style disabled', disabled:true},
157
- ]} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} />
196
+ {value: 'test6', label: 'Button style radio'},
197
+ {value: 'test7', label: 'Button style'},
198
+ {value: 'test8', label: 'Button style'},
199
+ {value: 'test9', label: 'Button style disabled', disabled: true},
200
+ ]}
201
+ value={this.state.value3}
202
+ onChange={(value) => this.setState(() => ({value3: value}))}
203
+ />
158
204
  </div>
159
205
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// With icon</p>
160
- <div className='form__group'>
161
- <RadioButtonGroup options={[
162
- {value:'test10', label:'Radio button with icon', icon:'list-view'},
163
- {value:'test11', label:'I have an icon!', icon:'grid-view'},
164
- {value:'test12', label:'Yeah, me too!', icon:'kanban-view'},
165
- ]} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
206
+ <div className="form__group">
207
+ <RadioButtonGroup
208
+ options={[
209
+ {value: 'test10', label: 'Radio button with icon', icon: 'list-view'},
210
+ {value: 'test11', label: 'I have an icon!', icon: 'grid-view'},
211
+ {value: 'test12', label: 'Yeah, me too!', icon: 'kanban-view'},
212
+ ]}
213
+ value={this.state.value4}
214
+ onChange={(value) => this.setState(() => ({value4: value}))}
215
+ />
166
216
  </div>
167
217
 
168
218
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// With icon & vertical</p>
169
- <div className='form__group'style={{width: 240}}>
170
- <RadioButtonGroup group={{orientation: 'vertical'}} options={[
171
- {value:'test10', label:'Radio button with icon', icon:'list-view'},
172
- {value:'test11', label:'I have an icon!', icon:'grid-view'},
173
- {value:'test12', label:'Yeah, me too!', icon:'kanban-view'},
174
- ]} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
219
+ <div className="form__group" style={{width: 240}}>
220
+ <RadioButtonGroup
221
+ group={{orientation: 'vertical'}}
222
+ options={[
223
+ {value: 'test10', label: 'Radio button with icon', icon: 'list-view'},
224
+ {value: 'test11', label: 'I have an icon!', icon: 'grid-view'},
225
+ {value: 'test12', label: 'Yeah, me too!', icon: 'kanban-view'},
226
+ ]}
227
+ value={this.state.value4}
228
+ onChange={(value) => this.setState(() => ({value4: value}))}
229
+ />
175
230
  </div>
176
231
 
177
- <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// With icon only (text label is hidden but still accessible to screenreaders)</p>
178
- <div className='form__group'>
179
- <RadioButtonGroup options={[
180
- {value:'test10', label:'Radio button with icon', icon:'list-view', labelHidden: true},
181
- {value:'test11', label:'I have an icon!', icon:'grid-view', labelHidden: true},
182
- {value:'test12', label:'Yeah, me too!', icon:'kanban-view', labelHidden: true},
183
- ]} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
232
+ <p className="docs-page__paragraph docs-page__paragraph--topMarginL">
233
+ // With icon only (text label is hidden but still accessible to screenreaders)
234
+ </p>
235
+ <div className="form__group">
236
+ <RadioButtonGroup
237
+ options={[
238
+ {
239
+ value: 'test10',
240
+ label: 'Radio button with icon',
241
+ icon: 'list-view',
242
+ labelHidden: true,
243
+ },
244
+ {value: 'test11', label: 'I have an icon!', icon: 'grid-view', labelHidden: true},
245
+ {value: 'test12', label: 'Yeah, me too!', icon: 'kanban-view', labelHidden: true},
246
+ ]}
247
+ value={this.state.value4}
248
+ onChange={(value) => this.setState(() => ({value4: value}))}
249
+ />
184
250
  </div>
185
251
  </Markup.ReactMarkupPreview>
186
- <Markup.ReactMarkupCode>{`
252
+ <Markup.ReactMarkupCode>
253
+ {`
187
254
  // Button styled radio buttons
188
255
  <RadioButtonGroup options={[
189
256
  {value:'test6', label:'Button style radio'},
@@ -226,67 +293,106 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
226
293
  </Markup.ReactMarkupCode>
227
294
  </Markup.ReactMarkup>
228
295
 
229
- <h3 className="docs-page__h3">Layout and alignment options</h3>
230
- <p className="docs-page__paragraph">By default the child elements are grouped horizontaly. A few more options are available – alignment (start, end and center) and grid layout. </p>
231
- <Alert style='hollow' size='small' type='primary'>
296
+ <h3 className="docs-page__h3">Layout and alignment options</h3>
297
+ <p className="docs-page__paragraph">
298
+ By default the child elements are grouped horizontaly. A few more options are available – alignment
299
+ (start, end and center) and grid layout.{' '}
300
+ </p>
301
+ <Alert style="hollow" size="small" type="primary">
232
302
  NOTE: Alignment will work only in parent elements with display: flex;
233
303
  </Alert>
234
304
  <Markup.ReactMarkup>
235
305
  <Markup.ReactMarkupPreview>
236
306
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Left (default)</p>
237
- <div className='form__row form__row--flex docs-page__test-helper-2'>
238
- <RadioButtonGroup value={this.state.value3} options={[
239
- {value:'test301', label:'Option one'},
240
- {value:'test302', label:'Option two'},
241
- {value:'test303', label:'Option three'},
242
- ]} onChange={(value) => this.setState(() => ({ value3: value }))} />
307
+ <div className="form__row form__row--flex docs-page__test-helper-2">
308
+ <RadioButtonGroup
309
+ value={this.state.value3}
310
+ options={[
311
+ {value: 'test301', label: 'Option one'},
312
+ {value: 'test302', label: 'Option two'},
313
+ {value: 'test303', label: 'Option three'},
314
+ ]}
315
+ onChange={(value) => this.setState(() => ({value3: value}))}
316
+ />
243
317
  </div>
244
318
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Right</p>
245
- <div className='form__row form__row--flex docs-page__test-helper-2'>
246
- <RadioButtonGroup group={{align:'end'}} value={this.state.value4} options={[
247
- {value:'test304', label:'Option one'},
248
- {value:'test305', label:'Option two'},
249
- {value:'test306', label:'Option three'},
250
- ]} onChange={(value) => this.setState(() => ({ value4: value }))} />
319
+ <div className="form__row form__row--flex docs-page__test-helper-2">
320
+ <RadioButtonGroup
321
+ group={{align: 'end'}}
322
+ value={this.state.value4}
323
+ options={[
324
+ {value: 'test304', label: 'Option one'},
325
+ {value: 'test305', label: 'Option two'},
326
+ {value: 'test306', label: 'Option three'},
327
+ ]}
328
+ onChange={(value) => this.setState(() => ({value4: value}))}
329
+ />
251
330
  </div>
252
331
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Center</p>
253
- <div className='form__row form__row--flex docs-page__test-helper-2'>
254
- <RadioButtonGroup group={{align:'center', groupLabelledBy:'someID'}} value={this.state.value5} options={[
255
- {value:'test307', label:'Option one'},
256
- {value:'test308', label:'Option two'},
257
- {value:'test309', label:'Option three'},
258
- ]} onChange={(value) => this.setState(() => ({ value5: value }))} />
332
+ <div className="form__row form__row--flex docs-page__test-helper-2">
333
+ <RadioButtonGroup
334
+ group={{align: 'center', groupLabelledBy: 'someID'}}
335
+ value={this.state.value5}
336
+ options={[
337
+ {value: 'test307', label: 'Option one'},
338
+ {value: 'test308', label: 'Option two'},
339
+ {value: 'test309', label: 'Option three'},
340
+ ]}
341
+ onChange={(value) => this.setState(() => ({value5: value}))}
342
+ />
259
343
  </div>
260
- <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Left + Center + Right</p>
261
- <div className='form__row form__row--flex docs-page__test-helper-2'>
262
- <RadioButtonGroup value={this.state.value6} options={[
263
- {value:'test310', label:'One'},
264
- {value:'test311', label:'Two'},
265
- ]} onChange={(value) => this.setState(() => ({ value6: value }))} />
344
+ <p className="docs-page__paragraph docs-page__paragraph--topMarginL">
345
+ // Left + Center + Right
346
+ </p>
347
+ <div className="form__row form__row--flex docs-page__test-helper-2">
348
+ <RadioButtonGroup
349
+ value={this.state.value6}
350
+ options={[
351
+ {value: 'test310', label: 'One'},
352
+ {value: 'test311', label: 'Two'},
353
+ ]}
354
+ onChange={(value) => this.setState(() => ({value6: value}))}
355
+ />
266
356
 
267
- <RadioButtonGroup group={{align:'center'}} value={this.state.value6} options={[
268
- {value:'test312', label:'Three'},
269
- {value:'test313', label:'Four'},
270
- ]} onChange={(value) => this.setState(() => ({ value6: value }))} />
357
+ <RadioButtonGroup
358
+ group={{align: 'center'}}
359
+ value={this.state.value6}
360
+ options={[
361
+ {value: 'test312', label: 'Three'},
362
+ {value: 'test313', label: 'Four'},
363
+ ]}
364
+ onChange={(value) => this.setState(() => ({value6: value}))}
365
+ />
271
366
 
272
- <RadioButtonGroup group={{align:'end'}} value={this.state.value6} options={[
273
- {value:'test314', label:'Five'},
274
- {value:'test315', label:'Six'},
275
- ]} onChange={(value) => this.setState(() => ({ value6: value }))} />
367
+ <RadioButtonGroup
368
+ group={{align: 'end'}}
369
+ value={this.state.value6}
370
+ options={[
371
+ {value: 'test314', label: 'Five'},
372
+ {value: 'test315', label: 'Six'},
373
+ ]}
374
+ onChange={(value) => this.setState(() => ({value6: value}))}
375
+ />
276
376
  </div>
277
377
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Grid</p>
278
- <div className='form__row form__row--flex docs-page__test-helper-2' style={{width:500}}>
279
- <RadioButtonGroup group={{grid:true}} value={this.state.value7} options={[
280
- {value:'test316', label:'One'},
281
- {value:'test317', label:'Two'},
282
- {value:'test318', label:'Three'},
283
- {value:'test319', label:'Four'},
284
- {value:'test320', label:'Five'},
285
- {value:'test321', label:'Six'},
286
- ]} onChange={(value) => this.setState(() => ({ value7: value }))} />
378
+ <div className="form__row form__row--flex docs-page__test-helper-2" style={{width: 500}}>
379
+ <RadioButtonGroup
380
+ group={{grid: true}}
381
+ value={this.state.value7}
382
+ options={[
383
+ {value: 'test316', label: 'One'},
384
+ {value: 'test317', label: 'Two'},
385
+ {value: 'test318', label: 'Three'},
386
+ {value: 'test319', label: 'Four'},
387
+ {value: 'test320', label: 'Five'},
388
+ {value: 'test321', label: 'Six'},
389
+ ]}
390
+ onChange={(value) => this.setState(() => ({value7: value}))}
391
+ />
287
392
  </div>
288
393
  </Markup.ReactMarkupPreview>
289
- <Markup.ReactMarkupCode>{`
394
+ <Markup.ReactMarkupCode>
395
+ {`
290
396
  // Left (default)
291
397
  <RadioButtonGroup value={value3} options={[
292
398
  {value:'test301', label:'Option one'},
@@ -342,33 +448,165 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
342
448
  <h3 className="docs-page__h3">Props</h3>
343
449
  <p className="docs-page__paragraph">RadioGroup</p>
344
450
  <PropsList>
345
- <Prop name='value' isRequired={true} type='T' default='/' description='The value of the checked button.'/>
346
- <Prop name='options' isRequired={true} type='Array' default='/' description='Array of Radio options.'/>
347
- <Prop name='options label' isRequired={true} type='string' default='/' description='Label text value for Radio.'/>
348
- <Prop name='options value' isRequired={true} type='T' default='/' description='Value of the Radio.'/>
349
- <Prop name='options disabled' isRequired={false} type='boolean' default='false' description='Disables the Radio, preventing mouse events.'/>
350
- <Prop name='labelSide' isRequired={false} type='start | end' default='end' description='Position of label relative to the button.'/>
351
- <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.' />
352
- <Prop name='groupLabelledBy' isRequired={false} type='string' default='/' description='Aria-labelledby for screen-reader support.'/>
451
+ <Prop
452
+ name="value"
453
+ isRequired={true}
454
+ type="T"
455
+ default="/"
456
+ description="The value of the checked button."
457
+ />
458
+ <Prop
459
+ name="options"
460
+ isRequired={true}
461
+ type="Array"
462
+ default="/"
463
+ description="Array of Radio options."
464
+ />
465
+ <Prop
466
+ name="options label"
467
+ isRequired={true}
468
+ type="string"
469
+ default="/"
470
+ description="Label text value for Radio."
471
+ />
472
+ <Prop
473
+ name="options value"
474
+ isRequired={true}
475
+ type="T"
476
+ default="/"
477
+ description="Value of the Radio."
478
+ />
479
+ <Prop
480
+ name="options disabled"
481
+ isRequired={false}
482
+ type="boolean"
483
+ default="false"
484
+ description="Disables the Radio, preventing mouse events."
485
+ />
486
+ <Prop
487
+ name="labelSide"
488
+ isRequired={false}
489
+ type="start | end"
490
+ default="end"
491
+ description="Position of label relative to the button."
492
+ />
493
+ <Prop
494
+ name="tabindex"
495
+ isRequired={false}
496
+ type="number"
497
+ default="/"
498
+ description="Indicates an element can be focused on, and determines how that focus is handled."
499
+ />
500
+ <Prop
501
+ name="groupLabelledBy"
502
+ isRequired={false}
503
+ type="string"
504
+ default="/"
505
+ description="Aria-labelledby for screen-reader support."
506
+ />
353
507
  </PropsList>
354
508
  <p className="docs-page__paragraph">RadioButtonGroup</p>
355
509
  <PropsList>
356
- <Prop name='value' isRequired={true} type='any' default='/' description='The value of the checked button.'/>
357
- <Prop name='options' isRequired={true} type='Array<option>' default='/' description='Array of RadioButton options.'/>
358
- <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.' />
359
- <Prop name='option label' isRequired={true} type='string' default='/' description='Label text value for RadioButton.'/>
360
- <Prop name='option value' isRequired={true} type='any' default='/' description='Value of the Radio.'/>
361
- <Prop name='option disabled' isRequired={false} type='boolean' default='false' description='Disables the Radio, preventing mouse events.'/>
362
- <Prop name='option labelHidden' isRequired={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
363
- <Prop name='option icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
364
- <Prop name='group orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='Orientation of the child elements.'/>
365
- <Prop name='group align' isRequired={false} type='start | end | center | inline' default='start' description='Alignemnt of the whole group relative to the parent container. Container must be flex for this to work.'/>
366
- <Prop name='group grid' isRequired={false} type='bolean' default='false' description='Lays out child elements in an uniform grid list.'/>
367
- <Prop name='group padded' isRequired={false} type='bolean' default='false' description='Adds padding on the start and end (left and right) of the group.'/>
368
- <Prop name='group groupLabel' isRequired={false} type='string' default='/' description='Label text value.'/>
369
- <Prop name='group groupLabelledBy' isRequired={false} type='string' default='/' description='Aria-labelledby for screen-reader support.'/>
510
+ <Prop
511
+ name="value"
512
+ isRequired={true}
513
+ type="any"
514
+ default="/"
515
+ description="The value of the checked button."
516
+ />
517
+ <Prop
518
+ name="options"
519
+ isRequired={true}
520
+ type="Array<option>"
521
+ default="/"
522
+ description="Array of RadioButton options."
523
+ />
524
+ <Prop
525
+ name="tabindex"
526
+ isRequired={false}
527
+ type="number"
528
+ default="/"
529
+ description="Indicates an element can be focused on, and determines how that focus is handled."
530
+ />
531
+ <Prop
532
+ name="option label"
533
+ isRequired={true}
534
+ type="string"
535
+ default="/"
536
+ description="Label text value for RadioButton."
537
+ />
538
+ <Prop
539
+ name="option value"
540
+ isRequired={true}
541
+ type="any"
542
+ default="/"
543
+ description="Value of the Radio."
544
+ />
545
+ <Prop
546
+ name="option disabled"
547
+ isRequired={false}
548
+ type="boolean"
549
+ default="false"
550
+ description="Disables the Radio, preventing mouse events."
551
+ />
552
+ <Prop
553
+ name="option labelHidden"
554
+ isRequired={false}
555
+ type="boolean"
556
+ default="false"
557
+ description="Hides visually the label and adds an aria-label for screen-reader support."
558
+ />
559
+ <Prop
560
+ name="option icon"
561
+ isRequired={false}
562
+ type="string"
563
+ default="/"
564
+ description="Icon class name without the icon- part."
565
+ />
566
+ <Prop
567
+ name="group orientation"
568
+ isRequired={false}
569
+ type="horizontal | vertical"
570
+ default="horizontal"
571
+ description="Orientation of the child elements."
572
+ />
573
+ <Prop
574
+ name="group align"
575
+ isRequired={false}
576
+ type="start | end | center | inline"
577
+ default="start"
578
+ description="Alignemnt of the whole group relative to the parent container. Container must be flex for this to work."
579
+ />
580
+ <Prop
581
+ name="group grid"
582
+ isRequired={false}
583
+ type="bolean"
584
+ default="false"
585
+ description="Lays out child elements in an uniform grid list."
586
+ />
587
+ <Prop
588
+ name="group padded"
589
+ isRequired={false}
590
+ type="bolean"
591
+ default="false"
592
+ description="Adds padding on the start and end (left and right) of the group."
593
+ />
594
+ <Prop
595
+ name="group groupLabel"
596
+ isRequired={false}
597
+ type="string"
598
+ default="/"
599
+ description="Label text value."
600
+ />
601
+ <Prop
602
+ name="group groupLabelledBy"
603
+ isRequired={false}
604
+ type="string"
605
+ default="/"
606
+ description="Aria-labelledby for screen-reader support."
607
+ />
370
608
  </PropsList>
371
609
  </section>
372
- )
610
+ );
373
611
  }
374
612
  }