superdesk-ui-framework 4.0.47 → 4.0.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (575) hide show
  1. package/.eslintrc.js +0 -1
  2. package/.eslintrc.json +2 -5
  3. package/.github/workflows/test.yml +22 -26
  4. package/.prettierignore +3 -0
  5. package/.prettierrc.js +9 -0
  6. package/.travis.yml +4 -4
  7. package/README.md +14 -1
  8. package/app/styles/_time.scss +28 -0
  9. package/app/styles/app.scss +1 -0
  10. package/app/styles/design-tokens/_design-tokens-general.scss +6 -3
  11. package/app/styles/form-elements/_forms-general.scss +0 -4
  12. package/app-typescript/components/Alert.tsx +12 -16
  13. package/app-typescript/components/Autocomplete.tsx +53 -42
  14. package/app-typescript/components/Badge.tsx +1 -1
  15. package/app-typescript/components/Button.tsx +5 -11
  16. package/app-typescript/components/ButtonGroup.tsx +15 -10
  17. package/app-typescript/components/Carousel.tsx +25 -26
  18. package/app-typescript/components/CheckButtonGroup.tsx +6 -10
  19. package/app-typescript/components/Checkbox.tsx +16 -10
  20. package/app-typescript/components/CheckboxButton.tsx +22 -13
  21. package/app-typescript/components/ContentDivider.tsx +6 -7
  22. package/app-typescript/components/CreateButton.tsx +8 -6
  23. package/app-typescript/components/DatePicker.tsx +59 -55
  24. package/app-typescript/components/DateTimePicker.tsx +51 -48
  25. package/app-typescript/components/Divider.tsx +2 -4
  26. package/app-typescript/components/DonutChart.tsx +11 -6
  27. package/app-typescript/components/DragHandle.tsx +10 -6
  28. package/app-typescript/components/DragHandleDots.tsx +1 -3
  29. package/app-typescript/components/DropZone.tsx +27 -25
  30. package/app-typescript/components/Dropdown.tsx +61 -102
  31. package/app-typescript/components/DropdownFirst.tsx +57 -69
  32. package/app-typescript/components/DurationInput.tsx +64 -54
  33. package/app-typescript/components/Editor/EditorButton.tsx +4 -3
  34. package/app-typescript/components/EmptyState.tsx +10 -14
  35. package/app-typescript/components/Form/FormGroup.tsx +9 -16
  36. package/app-typescript/components/Form/FormItem.tsx +1 -5
  37. package/app-typescript/components/Form/FormLabel.tsx +0 -1
  38. package/app-typescript/components/Form/FormRow.tsx +12 -19
  39. package/app-typescript/components/Form/FormRowNew.tsx +9 -16
  40. package/app-typescript/components/Form/FormText.tsx +1 -5
  41. package/app-typescript/components/Form/InputBase.tsx +12 -11
  42. package/app-typescript/components/Form/InputNew.tsx +11 -12
  43. package/app-typescript/components/Form/InputWrapper.tsx +9 -18
  44. package/app-typescript/components/Form/index.tsx +9 -9
  45. package/app-typescript/components/FormLabel.tsx +1 -5
  46. package/app-typescript/components/GridItem.tsx +38 -69
  47. package/app-typescript/components/GridList.tsx +2 -6
  48. package/app-typescript/components/HeadingText.tsx +4 -5
  49. package/app-typescript/components/IconButton.tsx +4 -10
  50. package/app-typescript/components/IconLabel.tsx +5 -5
  51. package/app-typescript/components/IconPicker.tsx +128 -126
  52. package/app-typescript/components/IllustrationButton.tsx +2 -8
  53. package/app-typescript/components/Input.tsx +2 -2
  54. package/app-typescript/components/Label.tsx +11 -7
  55. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +1 -5
  56. package/app-typescript/components/Layouts/AuthoringContainer.tsx +4 -6
  57. package/app-typescript/components/Layouts/AuthoringFrame.tsx +4 -20
  58. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +1 -5
  59. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +1 -5
  60. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +1 -5
  61. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +1 -5
  62. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +1 -5
  63. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +1 -5
  64. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +1 -5
  65. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +1 -3
  66. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -6
  67. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +5 -5
  68. package/app-typescript/components/Layouts/AuthoringMain.tsx +3 -4
  69. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +1 -5
  70. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +1 -5
  71. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +1 -6
  72. package/app-typescript/components/Layouts/BottomBarAction.tsx +8 -10
  73. package/app-typescript/components/Layouts/Container.tsx +13 -8
  74. package/app-typescript/components/Layouts/ContentSplitter.tsx +2 -6
  75. package/app-typescript/components/Layouts/CoreLayout.tsx +5 -12
  76. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +1 -1
  77. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +1 -5
  78. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -4
  79. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +1 -5
  80. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +2 -4
  81. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +8 -9
  82. package/app-typescript/components/Layouts/HamburgerButton.tsx +13 -14
  83. package/app-typescript/components/Layouts/HeaderPanel.tsx +1 -5
  84. package/app-typescript/components/Layouts/Layout.tsx +10 -16
  85. package/app-typescript/components/Layouts/LayoutContainer.tsx +2 -7
  86. package/app-typescript/components/Layouts/LeftPanel.tsx +4 -11
  87. package/app-typescript/components/Layouts/MainMenu.tsx +18 -32
  88. package/app-typescript/components/Layouts/MainPanel.tsx +10 -11
  89. package/app-typescript/components/Layouts/NotificationPanel.tsx +20 -29
  90. package/app-typescript/components/Layouts/OverlayPanel.tsx +3 -5
  91. package/app-typescript/components/Layouts/PageLayout.tsx +4 -21
  92. package/app-typescript/components/Layouts/Panel.tsx +45 -81
  93. package/app-typescript/components/Layouts/index.tsx +39 -39
  94. package/app-typescript/components/LeftMenu.tsx +51 -53
  95. package/app-typescript/components/ListItemLoader.tsx +1 -1
  96. package/app-typescript/components/Lists/BoxedList.tsx +16 -41
  97. package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +2 -10
  98. package/app-typescript/components/Lists/ContentList.tsx +68 -62
  99. package/app-typescript/components/Lists/SimpleList.tsx +13 -12
  100. package/app-typescript/components/Lists/TableList.tsx +169 -217
  101. package/app-typescript/components/Lists/index.tsx +2 -2
  102. package/app-typescript/components/Loader.tsx +1 -3
  103. package/app-typescript/components/Menu.tsx +2 -4
  104. package/app-typescript/components/Modal.tsx +21 -21
  105. package/app-typescript/components/MultiSelect.tsx +6 -6
  106. package/app-typescript/components/NavButton.tsx +10 -8
  107. package/app-typescript/components/Navigation/BottomNav.tsx +21 -17
  108. package/app-typescript/components/Navigation/QuickNavBar.tsx +40 -37
  109. package/app-typescript/components/Navigation/SideBarMenu.tsx +21 -17
  110. package/app-typescript/components/Navigation/SideBarTabs.tsx +13 -19
  111. package/app-typescript/components/Navigation/index.tsx +3 -3
  112. package/app-typescript/components/Popover.tsx +19 -21
  113. package/app-typescript/components/PropsList.tsx +2 -4
  114. package/app-typescript/components/RadioButtonGroup.tsx +48 -45
  115. package/app-typescript/components/RadioGroup.tsx +9 -8
  116. package/app-typescript/components/ResizablePanels.tsx +2 -3
  117. package/app-typescript/components/ResizeObserverComponent.tsx +1 -5
  118. package/app-typescript/components/SearchBar.tsx +53 -45
  119. package/app-typescript/components/Select.tsx +6 -8
  120. package/app-typescript/components/SelectGrid.tsx +32 -40
  121. package/app-typescript/components/SelectPreview.tsx +31 -25
  122. package/app-typescript/components/SelectWithTemplate.tsx +10 -11
  123. package/app-typescript/components/ShowPopup.tsx +32 -46
  124. package/app-typescript/components/SidebarMenu.tsx +19 -18
  125. package/app-typescript/components/Skeleton.tsx +12 -11
  126. package/app-typescript/components/SlidingToolbar.tsx +1 -6
  127. package/app-typescript/components/Spinner.tsx +2 -6
  128. package/app-typescript/components/StrechBar.tsx +1 -5
  129. package/app-typescript/components/SubNav.tsx +10 -8
  130. package/app-typescript/components/SvgIconIllustration.tsx +477 -105
  131. package/app-typescript/components/Switch.tsx +14 -12
  132. package/app-typescript/components/SwitchGroup.tsx +10 -10
  133. package/app-typescript/components/TabCustom.tsx +28 -35
  134. package/app-typescript/components/TabList.tsx +13 -10
  135. package/app-typescript/components/Tag.tsx +21 -24
  136. package/app-typescript/components/TagInput.tsx +4 -11
  137. package/app-typescript/components/Text/Heading.tsx +21 -41
  138. package/app-typescript/components/Text/Text.tsx +16 -12
  139. package/app-typescript/components/Text/Time.tsx +14 -10
  140. package/app-typescript/components/ThemeSelector.tsx +15 -14
  141. package/app-typescript/components/TimePicker.tsx +60 -6
  142. package/app-typescript/components/TimePickerPopover.tsx +274 -0
  143. package/app-typescript/components/TimePickerV2.tsx +20 -20
  144. package/app-typescript/components/Toast.tsx +11 -7
  145. package/app-typescript/components/ToastMessage.tsx +3 -14
  146. package/app-typescript/components/ToastText.tsx +30 -32
  147. package/app-typescript/components/ToastWrapper.tsx +76 -74
  148. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -45
  149. package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +31 -33
  150. package/app-typescript/components/ToggleBox/index.tsx +3 -7
  151. package/app-typescript/components/Tooltip.tsx +1 -1
  152. package/app-typescript/components/TreeMenu.tsx +72 -81
  153. package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +1 -5
  154. package/app-typescript/components/TreeSelect/TreeSelect.tsx +221 -238
  155. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +20 -24
  156. package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +12 -15
  157. package/app-typescript/components/WithPagination.tsx +34 -39
  158. package/app-typescript/components/WithPopover.tsx +0 -1
  159. package/app-typescript/components/WithPortal.tsx +4 -7
  160. package/app-typescript/components/WithSizeObserver.tsx +2 -6
  161. package/app-typescript/components/_Positioner.tsx +26 -26
  162. package/app-typescript/components/avatar/avatar-action-add.tsx +1 -6
  163. package/app-typescript/components/avatar/avatar-group.tsx +49 -68
  164. package/app-typescript/components/avatar/avatar-image.tsx +18 -12
  165. package/app-typescript/components/avatar/avatar-placeholder.tsx +3 -15
  166. package/app-typescript/components/avatar/avatar-text.tsx +1 -4
  167. package/app-typescript/components/avatar/avatar-wrapper.tsx +18 -30
  168. package/app-typescript/components/avatar/avatar.tsx +5 -8
  169. package/app-typescript/components/with-pagination.spec.tsx +8 -27
  170. package/app-typescript/helpers.tsx +2 -2
  171. package/app-typescript/index.ts +111 -100
  172. package/app-typescript/utils/time.tsx +31 -0
  173. package/declarations.d.ts +1 -1
  174. package/dist/components/Alerts.tsx +171 -78
  175. package/dist/components/Autocomplete.tsx +187 -78
  176. package/dist/components/Avatar.tsx +52 -112
  177. package/dist/components/Badges.tsx +111 -67
  178. package/dist/components/BigIconFont.tsx +29 -17
  179. package/dist/components/BoxedList.tsx +244 -114
  180. package/dist/components/ButtonGroups.tsx +213 -147
  181. package/dist/components/Buttons.tsx +409 -137
  182. package/dist/components/Card.tsx +6 -7
  183. package/dist/components/Carousel.tsx +126 -39
  184. package/dist/components/Checkboxs.tsx +446 -105
  185. package/dist/components/Container.tsx +95 -48
  186. package/dist/components/ContentDivider.tsx +110 -63
  187. package/dist/components/ContentList.tsx +577 -253
  188. package/dist/components/CreateButton.tsx +71 -21
  189. package/dist/components/DatePicker.tsx +102 -26
  190. package/dist/components/DateTimePicker.tsx +49 -11
  191. package/dist/components/DragHandleDocs.tsx +56 -26
  192. package/dist/components/DropZone.tsx +67 -29
  193. package/dist/components/Dropdowns.tsx +220 -131
  194. package/dist/components/DurationInput.tsx +92 -32
  195. package/dist/components/EmptyStates.tsx +61 -26
  196. package/dist/components/GridItem.tsx +190 -91
  197. package/dist/components/GridList.tsx +37 -17
  198. package/dist/components/Heading.tsx +81 -35
  199. package/dist/components/IconButtons.tsx +125 -32
  200. package/dist/components/IconFont.tsx +24 -12
  201. package/dist/components/IconLabels.tsx +146 -39
  202. package/dist/components/IconPicker.tsx +30 -13
  203. package/dist/components/IllustrationButton.tsx +40 -20
  204. package/dist/components/Index.tsx +128 -114
  205. package/dist/components/Inputs.tsx +153 -51
  206. package/dist/components/Labels.tsx +191 -117
  207. package/dist/components/LeftNavigations.tsx +327 -100
  208. package/dist/components/ListItems.tsx +8 -9
  209. package/dist/components/Loader.tsx +5 -4
  210. package/dist/components/Menu.tsx +48 -26
  211. package/dist/components/Modal.tsx +298 -104
  212. package/dist/components/MultiSelect.tsx +189 -53
  213. package/dist/components/NavButtons.tsx +86 -30
  214. package/dist/components/Panel.tsx +367 -120
  215. package/dist/components/Popover.tsx +37 -17
  216. package/dist/components/QuickNavigationBar.tsx +222 -86
  217. package/dist/components/RadioGroup.tsx +375 -137
  218. package/dist/components/ResizablePanels.tsx +8 -14
  219. package/dist/components/SelectGrid.tsx +79 -38
  220. package/dist/components/SelectWithTemplate.tsx +23 -14
  221. package/dist/components/Selects.tsx +94 -29
  222. package/dist/components/SimpleList.tsx +91 -41
  223. package/dist/components/SubNav.tsx +57 -37
  224. package/dist/components/Switch.tsx +168 -42
  225. package/dist/components/TableList.tsx +220 -66
  226. package/dist/components/Tabs.tsx +149 -64
  227. package/dist/components/TagInputDocs.tsx +73 -17
  228. package/dist/components/Tags.tsx +104 -73
  229. package/dist/components/Text.tsx +108 -58
  230. package/dist/components/TimePicker.tsx +76 -22
  231. package/dist/components/Toasts.tsx +162 -80
  232. package/dist/components/Togglebox.tsx +164 -62
  233. package/dist/components/Tooltips.tsx +27 -15
  234. package/dist/components/TreeMenu.tsx +95 -59
  235. package/dist/components/TreeSelect.tsx +297 -162
  236. package/dist/components/WithPaginationDocs.tsx +15 -16
  237. package/dist/components/WithSizeObserver.tsx +9 -9
  238. package/dist/components/tree-select/TreeSelect.tsx +126 -77
  239. package/dist/components/tree-select/example-1.tsx +8 -12
  240. package/dist/components/tree-select/example-2.tsx +2 -5
  241. package/dist/components/utilities/BorderRadiusUtilities.tsx +28 -13
  242. package/dist/components/utilities/BorderUtilities.tsx +31 -32
  243. package/dist/components/utilities/DisplayUtilities.tsx +4 -5
  244. package/dist/components/utilities/FlexAndGridUtilities.tsx +38 -38
  245. package/dist/components/utilities/ObjectFitUtilities.tsx +4 -6
  246. package/dist/components/utilities/ObjectPositionUtilities.tsx +3 -4
  247. package/dist/components/utilities/OpacityUtilities.tsx +4 -7
  248. package/dist/components/utilities/OverflowUtilities.tsx +4 -5
  249. package/dist/components/utilities/PositionUtilities.tsx +4 -5
  250. package/dist/components/utilities/ShadowUtilities.tsx +15 -16
  251. package/dist/components/utilities/SpacingUtilities.tsx +483 -178
  252. package/dist/components/utilities/TextUtilities.tsx +109 -60
  253. package/dist/design-patterns/Index.tsx +8 -11
  254. package/dist/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  255. package/dist/examples.bundle.css +1257 -1155
  256. package/dist/examples.bundle.js +7904 -7035
  257. package/dist/playgrounds/dummy-data/items.ts +9 -8
  258. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  259. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  260. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  261. package/dist/playgrounds/react-playgrounds/Index.tsx +11 -11
  262. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  263. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  264. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  265. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  266. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  267. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  268. package/dist/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  269. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  270. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  271. package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  272. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  273. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  274. package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  275. package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  276. package/dist/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  277. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  278. package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  279. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  280. package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  281. package/dist/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  282. package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  283. package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  284. package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  285. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  286. package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  287. package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  288. package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  289. package/dist/playgrounds/react-playgrounds/tsconfig.json +1 -1
  290. package/dist/superdesk-ui.bundle.css +25 -4
  291. package/dist/superdesk-ui.bundle.js +3072 -2903
  292. package/dist/vendor.bundle.js +18 -18
  293. package/examples/css/docs-page.css +1135 -1116
  294. package/examples/css/reset.css +124 -43
  295. package/examples/css/vendor.css +125 -125
  296. package/examples/index.js +138 -139
  297. package/examples/js/doc.js +41 -40
  298. package/examples/js/react.js +82 -48
  299. package/examples/pages/components/Alerts.tsx +171 -78
  300. package/examples/pages/components/Autocomplete.tsx +187 -78
  301. package/examples/pages/components/Avatar.tsx +52 -112
  302. package/examples/pages/components/Badges.tsx +111 -67
  303. package/examples/pages/components/BigIconFont.tsx +29 -17
  304. package/examples/pages/components/BoxedList.tsx +244 -114
  305. package/examples/pages/components/ButtonGroups.tsx +213 -147
  306. package/examples/pages/components/Buttons.tsx +409 -137
  307. package/examples/pages/components/Card.tsx +6 -7
  308. package/examples/pages/components/Carousel.tsx +126 -39
  309. package/examples/pages/components/Checkboxs.tsx +446 -105
  310. package/examples/pages/components/Container.tsx +95 -48
  311. package/examples/pages/components/ContentDivider.tsx +110 -63
  312. package/examples/pages/components/ContentList.tsx +577 -253
  313. package/examples/pages/components/CreateButton.tsx +71 -21
  314. package/examples/pages/components/DatePicker.tsx +102 -26
  315. package/examples/pages/components/DateTimePicker.tsx +49 -11
  316. package/examples/pages/components/DragHandleDocs.tsx +56 -26
  317. package/examples/pages/components/DropZone.tsx +67 -29
  318. package/examples/pages/components/Dropdowns.tsx +220 -131
  319. package/examples/pages/components/DurationInput.tsx +92 -32
  320. package/examples/pages/components/EmptyStates.tsx +61 -26
  321. package/examples/pages/components/GridItem.tsx +190 -91
  322. package/examples/pages/components/GridList.tsx +37 -17
  323. package/examples/pages/components/Heading.tsx +81 -35
  324. package/examples/pages/components/IconButtons.tsx +125 -32
  325. package/examples/pages/components/IconFont.tsx +24 -12
  326. package/examples/pages/components/IconLabels.tsx +146 -39
  327. package/examples/pages/components/IconPicker.tsx +30 -13
  328. package/examples/pages/components/IllustrationButton.tsx +40 -20
  329. package/examples/pages/components/Index.tsx +128 -114
  330. package/examples/pages/components/Inputs.tsx +153 -51
  331. package/examples/pages/components/Labels.tsx +191 -117
  332. package/examples/pages/components/LeftNavigations.tsx +327 -100
  333. package/examples/pages/components/ListItems.tsx +8 -9
  334. package/examples/pages/components/Loader.tsx +5 -4
  335. package/examples/pages/components/Menu.tsx +48 -26
  336. package/examples/pages/components/Modal.tsx +298 -104
  337. package/examples/pages/components/MultiSelect.tsx +189 -53
  338. package/examples/pages/components/NavButtons.tsx +86 -30
  339. package/examples/pages/components/Panel.tsx +367 -120
  340. package/examples/pages/components/Popover.tsx +37 -17
  341. package/examples/pages/components/QuickNavigationBar.tsx +222 -86
  342. package/examples/pages/components/RadioGroup.tsx +375 -137
  343. package/examples/pages/components/ResizablePanels.tsx +8 -14
  344. package/examples/pages/components/SelectGrid.tsx +79 -38
  345. package/examples/pages/components/SelectWithTemplate.tsx +23 -14
  346. package/examples/pages/components/Selects.tsx +94 -29
  347. package/examples/pages/components/SimpleList.tsx +91 -41
  348. package/examples/pages/components/SubNav.tsx +57 -37
  349. package/examples/pages/components/Switch.tsx +168 -42
  350. package/examples/pages/components/TableList.tsx +220 -66
  351. package/examples/pages/components/Tabs.tsx +149 -64
  352. package/examples/pages/components/TagInputDocs.tsx +73 -17
  353. package/examples/pages/components/Tags.tsx +104 -73
  354. package/examples/pages/components/Text.tsx +108 -58
  355. package/examples/pages/components/TimePicker.tsx +76 -22
  356. package/examples/pages/components/Toasts.tsx +162 -80
  357. package/examples/pages/components/Togglebox.tsx +164 -62
  358. package/examples/pages/components/Tooltips.tsx +27 -15
  359. package/examples/pages/components/TreeMenu.tsx +95 -59
  360. package/examples/pages/components/TreeSelect.tsx +297 -162
  361. package/examples/pages/components/WithPaginationDocs.tsx +15 -16
  362. package/examples/pages/components/WithSizeObserver.tsx +9 -9
  363. package/examples/pages/components/tree-select/TreeSelect.tsx +126 -77
  364. package/examples/pages/components/tree-select/example-1.tsx +8 -12
  365. package/examples/pages/components/tree-select/example-2.tsx +2 -5
  366. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +28 -13
  367. package/examples/pages/components/utilities/BorderUtilities.tsx +31 -32
  368. package/examples/pages/components/utilities/DisplayUtilities.tsx +4 -5
  369. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +38 -38
  370. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +4 -6
  371. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +3 -4
  372. package/examples/pages/components/utilities/OpacityUtilities.tsx +4 -7
  373. package/examples/pages/components/utilities/OverflowUtilities.tsx +4 -5
  374. package/examples/pages/components/utilities/PositionUtilities.tsx +4 -5
  375. package/examples/pages/components/utilities/ShadowUtilities.tsx +15 -16
  376. package/examples/pages/components/utilities/SpacingUtilities.tsx +483 -178
  377. package/examples/pages/components/utilities/TextUtilities.tsx +109 -60
  378. package/examples/pages/design-patterns/Index.tsx +8 -11
  379. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  380. package/examples/pages/playgrounds/dummy-data/items.ts +9 -8
  381. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  382. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  383. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  384. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +11 -11
  385. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  386. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  387. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  388. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  389. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  390. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  391. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  392. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  393. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  394. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  395. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  396. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  397. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  398. package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  399. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  400. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  401. package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  402. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  403. package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  404. package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  405. package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  406. package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  407. package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  408. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  409. package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  410. package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  411. package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  412. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +1 -1
  413. package/globals.d.ts +1 -1
  414. package/mocha-setup.ts +3 -3
  415. package/package.json +119 -117
  416. package/react/components/Alert.js +6 -9
  417. package/react/components/Autocomplete.js +15 -23
  418. package/react/components/Badge.js +1 -1
  419. package/react/components/Button.js +4 -6
  420. package/react/components/ButtonGroup.js +1 -1
  421. package/react/components/Carousel.js +3 -3
  422. package/react/components/CheckButtonGroup.js +3 -6
  423. package/react/components/CheckboxButton.js +2 -4
  424. package/react/components/ContentDivider.js +1 -1
  425. package/react/components/DatePicker.js +29 -26
  426. package/react/components/DateTimePicker.d.ts +8 -4
  427. package/react/components/DateTimePicker.js +6 -8
  428. package/react/components/Divider.js +1 -1
  429. package/react/components/DonutChart.js +1 -1
  430. package/react/components/DragHandle.js +1 -1
  431. package/react/components/DragHandleDots.js +1 -1
  432. package/react/components/DropZone.js +6 -8
  433. package/react/components/Dropdown.d.ts +1 -1
  434. package/react/components/Dropdown.js +34 -38
  435. package/react/components/DropdownFirst.d.ts +11 -11
  436. package/react/components/DropdownFirst.js +20 -24
  437. package/react/components/DurationInput.js +37 -34
  438. package/react/components/EmptyState.js +5 -5
  439. package/react/components/Form/FormGroup.js +1 -1
  440. package/react/components/Form/FormItem.js +1 -1
  441. package/react/components/Form/FormRow.js +1 -1
  442. package/react/components/Form/FormRowNew.js +3 -3
  443. package/react/components/Form/FormText.js +1 -1
  444. package/react/components/Form/InputNew.js +3 -3
  445. package/react/components/Form/InputWrapper.js +7 -10
  446. package/react/components/GridItem.d.ts +1 -1
  447. package/react/components/GridItem.js +16 -16
  448. package/react/components/GridList.js +1 -1
  449. package/react/components/HeadingText.js +4 -5
  450. package/react/components/IconLabel.js +3 -5
  451. package/react/components/IconPicker.d.ts +1 -1
  452. package/react/components/IconPicker.js +111 -104
  453. package/react/components/IllustrationButton.js +1 -1
  454. package/react/components/Input.js +1 -1
  455. package/react/components/Layouts/AuthorinInnerSideBar.js +1 -1
  456. package/react/components/Layouts/AuthoringContainer.js +1 -1
  457. package/react/components/Layouts/AuthoringFrame.js +4 -4
  458. package/react/components/Layouts/AuthoringFrameContainer.js +1 -1
  459. package/react/components/Layouts/AuthoringFrameLeftBar.js +1 -1
  460. package/react/components/Layouts/AuthoringFrameMain.js +1 -1
  461. package/react/components/Layouts/AuthoringFrameNavBar.js +1 -1
  462. package/react/components/Layouts/AuthoringFrameOverlay.js +1 -1
  463. package/react/components/Layouts/AuthoringFrameRightBar.js +1 -1
  464. package/react/components/Layouts/AuthoringFrameSidePanel.js +1 -1
  465. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +1 -1
  466. package/react/components/Layouts/AuthoringMainContainer.js +1 -1
  467. package/react/components/Layouts/AuthoringMainContent.js +1 -1
  468. package/react/components/Layouts/AuthoringMainToolBar.js +1 -1
  469. package/react/components/Layouts/BottomBarAction.js +2 -2
  470. package/react/components/Layouts/ContentSplitter.js +1 -1
  471. package/react/components/Layouts/CoreLayout.js +2 -2
  472. package/react/components/Layouts/CoreLayoutContainer.js +1 -1
  473. package/react/components/Layouts/CoreLayoutFooter.js +1 -1
  474. package/react/components/Layouts/CoreLayoutOverlay.js +1 -1
  475. package/react/components/Layouts/CoreLayoutSlideInMenu.js +2 -2
  476. package/react/components/Layouts/CoreLayoutTopMenu.js +3 -3
  477. package/react/components/Layouts/HamburgerButton.js +1 -1
  478. package/react/components/Layouts/HeaderPanel.js +1 -1
  479. package/react/components/Layouts/Layout.d.ts +1 -1
  480. package/react/components/Layouts/Layout.js +9 -9
  481. package/react/components/Layouts/LayoutContainer.js +1 -1
  482. package/react/components/Layouts/LeftPanel.js +1 -1
  483. package/react/components/Layouts/MainMenu.js +8 -10
  484. package/react/components/Layouts/MainPanel.js +1 -1
  485. package/react/components/Layouts/NotificationPanel.d.ts +1 -1
  486. package/react/components/Layouts/NotificationPanel.js +7 -7
  487. package/react/components/Layouts/OverlayPanel.js +3 -3
  488. package/react/components/Layouts/PageLayout.js +2 -2
  489. package/react/components/Layouts/Panel.d.ts +1 -1
  490. package/react/components/Layouts/Panel.js +12 -18
  491. package/react/components/LeftMenu.d.ts +3 -3
  492. package/react/components/LeftMenu.js +11 -13
  493. package/react/components/Lists/BoxedList.js +6 -6
  494. package/react/components/Lists/CalendarWeekDayItem.js +2 -2
  495. package/react/components/Lists/ContentList.js +24 -26
  496. package/react/components/Lists/TableList.d.ts +1 -1
  497. package/react/components/Lists/TableList.js +59 -79
  498. package/react/components/Loader.js +1 -1
  499. package/react/components/Menu.js +1 -1
  500. package/react/components/Modal.d.ts +1 -1
  501. package/react/components/MultiSelect.d.ts +1 -1
  502. package/react/components/MultiSelect.js +2 -2
  503. package/react/components/NavButton.js +2 -4
  504. package/react/components/Navigation/BottomNav.js +9 -8
  505. package/react/components/Navigation/QuickNavBar.js +17 -20
  506. package/react/components/Navigation/SideBarMenu.js +11 -9
  507. package/react/components/Navigation/SideBarTabs.js +9 -8
  508. package/react/components/Popover.js +1 -1
  509. package/react/components/RadioButtonGroup.js +15 -23
  510. package/react/components/ResizablePanels.js +1 -3
  511. package/react/components/ResizeObserverComponent.js +1 -3
  512. package/react/components/SearchBar.js +14 -16
  513. package/react/components/Select.js +3 -3
  514. package/react/components/SelectGrid.js +15 -20
  515. package/react/components/SelectPreview.js +13 -13
  516. package/react/components/SelectWithTemplate.js +3 -5
  517. package/react/components/ShowPopup.d.ts +1 -0
  518. package/react/components/ShowPopup.js +7 -10
  519. package/react/components/Skeleton.js +1 -1
  520. package/react/components/SlidingToolbar.js +1 -1
  521. package/react/components/Spinner.js +1 -1
  522. package/react/components/StrechBar.js +1 -1
  523. package/react/components/SubNav.js +1 -1
  524. package/react/components/Switch.js +4 -6
  525. package/react/components/SwitchGroup.js +1 -1
  526. package/react/components/TabCustom.js +6 -4
  527. package/react/components/TabList.js +4 -8
  528. package/react/components/Tag.js +13 -17
  529. package/react/components/TagInput.js +1 -1
  530. package/react/components/Text/Heading.js +6 -6
  531. package/react/components/ThemeSelector.js +1 -1
  532. package/react/components/TimePicker.d.ts +9 -2
  533. package/react/components/TimePicker.js +29 -4
  534. package/react/components/TimePickerPopover.d.ts +19 -0
  535. package/react/components/TimePickerPopover.js +225 -0
  536. package/react/components/TimePickerV2.js +17 -17
  537. package/react/components/Toast.js +3 -3
  538. package/react/components/ToastMessage.d.ts +1 -1
  539. package/react/components/ToastMessage.js +1 -1
  540. package/react/components/ToastText.js +5 -8
  541. package/react/components/ToastWrapper.js +3 -5
  542. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
  543. package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -7
  544. package/react/components/ToggleBox/SimpleToggleBox.d.ts +1 -1
  545. package/react/components/ToggleBox/SimpleToggleBox.js +5 -5
  546. package/react/components/ToggleBox/index.js +3 -3
  547. package/react/components/TreeMenu.d.ts +1 -1
  548. package/react/components/TreeMenu.js +38 -44
  549. package/react/components/TreeSelect/TreeSelect.d.ts +2 -2
  550. package/react/components/TreeSelect/TreeSelect.js +105 -127
  551. package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -1
  552. package/react/components/TreeSelect/TreeSelectItem.js +10 -13
  553. package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -1
  554. package/react/components/TreeSelect/TreeSelectPill.js +8 -9
  555. package/react/components/WithPagination.js +18 -21
  556. package/react/components/WithPortal.d.ts +1 -1
  557. package/react/components/WithPortal.js +2 -1
  558. package/react/components/WithSizeObserver.js +1 -3
  559. package/react/components/_Positioner.js +11 -11
  560. package/react/components/avatar/avatar-action-add.js +1 -1
  561. package/react/components/avatar/avatar-group.js +11 -14
  562. package/react/components/avatar/avatar-image.js +6 -4
  563. package/react/components/avatar/avatar-placeholder.js +1 -1
  564. package/react/components/avatar/avatar-wrapper.js +2 -4
  565. package/react/components/avatar/avatar.js +4 -3
  566. package/react/helpers.js +2 -2
  567. package/react/index.d.ts +1 -1
  568. package/react/utils/time.d.ts +5 -0
  569. package/react/utils/time.js +36 -0
  570. package/tasks/webpack.dev.js +1 -1
  571. package/tasks/webpack.js +5 -5
  572. package/tasks/webpack.prod.js +1 -5
  573. package/tsconfig.json +2 -5
  574. package/tslint.json +6 -12
  575. package/webpack.config.js +2 -5
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
- import { PropsList, Prop, Button, ButtonGroup, IconButton, Label, SlidingToolbar } from '../../../app-typescript';
3
+ import {PropsList, Prop, Button, ButtonGroup, IconButton, Label, SlidingToolbar} from '../../../app-typescript';
4
4
  import * as PanelElements from '../../../app-typescript/components/Layouts/Panel';
5
5
  import {Rotate} from '../../../app-typescript/components/Rotate';
6
6
 
@@ -18,24 +18,25 @@ interface IState {
18
18
  }
19
19
 
20
20
  export default class PanelDoc extends React.Component<IProps, IState> {
21
- constructor(props: IProps) {
22
- super(props);
23
- this.state = {
21
+ constructor(props: IProps) {
22
+ super(props);
23
+ this.state = {
24
24
  openPanel1: true,
25
25
  openPanel2: true,
26
26
  openPanel3: true,
27
27
  openPanel4: true,
28
28
  openToolbar1: true,
29
29
  rotate: false,
30
- }
30
+ };
31
31
  }
32
32
 
33
33
  render() {
34
34
  return (
35
- <section className='docs-page__container'>
36
- <h2 className='docs-page__h2'>Panel</h2>
37
-
38
- <Markup.ReactMarkupCodePreview>{`
35
+ <section className="docs-page__container">
36
+ <h2 className="docs-page__h2">Panel</h2>
37
+
38
+ <Markup.ReactMarkupCodePreview>
39
+ {`
39
40
  <Panel side='left' size="small">
40
41
  <PanelHeader title='Title for the Panel' handlePanelParent={()=> false}>
41
42
  </PanelHeader>
@@ -57,39 +58,69 @@ export default class PanelDoc extends React.Component<IProps, IState> {
57
58
  <Markup.ReactMarkup>
58
59
  <Markup.ReactMarkupPreview>
59
60
  <p className="docs-page__paragraph">// Left</p>
60
- <div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
61
- {this.state.openPanel1 ? null :
62
- <div className='d-flex items-center justify-center sd-flex--grow'>
63
- <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel1': true})} />
64
- </div>
65
- }
66
- <PanelElements.Panel side='left' background='light' open={this.state.openPanel1} size='x-small'>
61
+ <div
62
+ className="d-flex"
63
+ style={{
64
+ border: '1px solid var(--sd-colour-line--medium)',
65
+ backgroundColor: 'var(--sd-colour-panel-bg--100)',
66
+ maxHeight: '400px',
67
+ }}
68
+ >
69
+ {this.state.openPanel1 ? null : (
70
+ <div className="d-flex items-center justify-center sd-flex--grow">
71
+ <Button
72
+ text="Open Panel"
73
+ style="filled"
74
+ onClick={() => this.setState({openPanel1: true})}
75
+ />
76
+ </div>
77
+ )}
78
+ <PanelElements.Panel
79
+ side="left"
80
+ background="light"
81
+ open={this.state.openPanel1}
82
+ size="x-small"
83
+ >
67
84
  <PanelElements.PanelHeader
68
- title='This is the Panel title'
69
- onClose={() => this.setState({'openPanel1': false})}
85
+ title="This is the Panel title"
86
+ onClose={() => this.setState({openPanel1: false})}
70
87
  iconButtons={[
71
88
  <Rotate degrees={this.state.rotate ? 90 : 0}>
72
- <IconButton ariaValue='Pin' icon='pin' onClick={() => this.setState({rotate: !this.state.rotate})} />
89
+ <IconButton
90
+ ariaValue="Pin"
91
+ icon="pin"
92
+ onClick={() => this.setState({rotate: !this.state.rotate})}
93
+ />
73
94
  </Rotate>,
74
95
  ]}
75
- >
76
- </PanelElements.PanelHeader>
96
+ ></PanelElements.PanelHeader>
77
97
  <PanelElements.PanelContent>
78
98
  <PanelElements.PanelContentBlock>
79
- <p className='sd-margin-b--2'>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
80
- Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
81
- <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
82
- vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>
99
+ <p className="sd-margin-b--2">
100
+ Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum
101
+ dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis
102
+ interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
103
+ Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet,
104
+ consectetur adipiscing elit.
105
+ </p>
106
+ <p>
107
+ Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada
108
+ magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia
109
+ quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu
110
+ leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed
111
+ consectetur.
112
+ </p>
83
113
  </PanelElements.PanelContentBlock>
84
114
  </PanelElements.PanelContent>
85
115
  <PanelElements.PanelFooter>
86
- <Button text='Clear' style='hollow' onClick={() => false} />
87
- <Button text='Submit' type='primary' onClick={() => false} />
116
+ <Button text="Clear" style="hollow" onClick={() => false} />
117
+ <Button text="Submit" type="primary" onClick={() => false} />
88
118
  </PanelElements.PanelFooter>
89
119
  </PanelElements.Panel>
90
120
  </div>
91
121
  </Markup.ReactMarkupPreview>
92
- <Markup.ReactMarkupCode>{`
122
+ <Markup.ReactMarkupCode>
123
+ {`
93
124
  // Left
94
125
  {this.state.openPanel1 ? null :
95
126
  <div className='d-flex items-center justify-center sd-flex--grow'>
@@ -129,42 +160,82 @@ export default class PanelDoc extends React.Component<IProps, IState> {
129
160
 
130
161
  <Markup.ReactMarkup>
131
162
  <Markup.ReactMarkupPreview>
132
- <p className="docs-page__paragraph">// Right, custom elements inside the footer + dark theme.</p>
133
- <div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
134
- {this.state.openPanel2 ? null :
135
- <div className='d-flex items-center justify-center sd-flex--grow'>
136
- <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel2': true})} />
163
+ <p className="docs-page__paragraph">
164
+ // Right, custom elements inside the footer + dark theme.
165
+ </p>
166
+ <div
167
+ className="d-flex"
168
+ style={{
169
+ border: '1px solid var(--sd-colour-line--medium)',
170
+ backgroundColor: 'var(--sd-colour-panel-bg--100)',
171
+ maxHeight: '400px',
172
+ }}
173
+ >
174
+ {this.state.openPanel2 ? null : (
175
+ <div className="d-flex items-center justify-center sd-flex--grow">
176
+ <Button
177
+ text="Open Panel"
178
+ style="filled"
179
+ onClick={() => this.setState({openPanel2: true})}
180
+ />
137
181
  </div>
138
- }
139
- <PanelElements.Panel side='right' background='light' open={this.state.openPanel2} size='small' theme="dark">
140
- <PanelElements.PanelHeader title='Right panel title' onClose={()=> this.setState({openPanel2: false})} color='blueGreyDarker'>
141
- </PanelElements.PanelHeader>
182
+ )}
183
+ <PanelElements.Panel
184
+ side="right"
185
+ background="light"
186
+ open={this.state.openPanel2}
187
+ size="small"
188
+ theme="dark"
189
+ >
190
+ <PanelElements.PanelHeader
191
+ title="Right panel title"
192
+ onClose={() => this.setState({openPanel2: false})}
193
+ color="blueGreyDarker"
194
+ ></PanelElements.PanelHeader>
142
195
  <PanelElements.PanelContent>
143
196
  <PanelElements.PanelContentBlock>
144
- <p className='sd-margin-b--2'>Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem
145
- lacinia quam venenatis vestibulum.</p>
146
- <p className='sd-margin-b--2'>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.
147
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus,
148
- nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.</p>
149
- <p>Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada
150
- magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
197
+ <p className="sd-margin-b--2">
198
+ Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur
199
+ adipiscing elit. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare
200
+ sem lacinia quam venenatis vestibulum.
201
+ </p>
202
+ <p className="sd-margin-b--2">
203
+ Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur
204
+ purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.
205
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio,
206
+ dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo
207
+ luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
208
+ Vestibulum id ligula porta felis euismod semper.
209
+ </p>
210
+ <p>
211
+ Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus
212
+ et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem
213
+ malesuada magna mollis euismod. Integer posuere erat a ante venenatis
214
+ dapibus posuere velit aliquet. Praesent commodo cursus magna, vel
215
+ scelerisque nisl consectetur et.
216
+ </p>
151
217
  </PanelElements.PanelContentBlock>
152
218
  </PanelElements.PanelContent>
153
219
  <PanelElements.PanelFooter>
154
- <ButtonGroup align='start'>
155
- <Button text='one' style='hollow' onClick={()=> false} />
156
- <Button text='two' style='hollow' onClick={()=> false} />
157
- <Label text='Published' type='primary' style='translucent'/>
220
+ <ButtonGroup align="start">
221
+ <Button text="one" style="hollow" onClick={() => false} />
222
+ <Button text="two" style="hollow" onClick={() => false} />
223
+ <Label text="Published" type="primary" style="translucent" />
158
224
  </ButtonGroup>
159
- <ButtonGroup align='end'>
160
- <IconButton icon='pencil' ariaValue={'Edit'} onClick={() => false} />
161
- <IconButton icon='dots-vertical' ariaValue={'More options'} onClick={() => false} />
225
+ <ButtonGroup align="end">
226
+ <IconButton icon="pencil" ariaValue={'Edit'} onClick={() => false} />
227
+ <IconButton
228
+ icon="dots-vertical"
229
+ ariaValue={'More options'}
230
+ onClick={() => false}
231
+ />
162
232
  </ButtonGroup>
163
233
  </PanelElements.PanelFooter>
164
234
  </PanelElements.Panel>
165
235
  </div>
166
236
  </Markup.ReactMarkupPreview>
167
- <Markup.ReactMarkupCode>{`
237
+ <Markup.ReactMarkupCode>
238
+ {`
168
239
  // Right, custom elements inside the footer + dark theme.
169
240
 
170
241
  {this.state.openPanel2 ? null :
@@ -200,48 +271,96 @@ export default class PanelDoc extends React.Component<IProps, IState> {
200
271
 
201
272
  <Markup.ReactMarkup>
202
273
  <Markup.ReactMarkupPreview>
203
- <p className="docs-page__paragraph">// With PanelHeaderSlidingToolbar element inside the PanelHeader</p>
204
- <div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
205
- {this.state.openPanel3 ? null :
206
- <div className='d-flex items-center justify-center sd-flex--grow'>
207
- <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel3': true})} />
274
+ <p className="docs-page__paragraph">
275
+ // With PanelHeaderSlidingToolbar element inside the PanelHeader
276
+ </p>
277
+ <div
278
+ className="d-flex"
279
+ style={{
280
+ border: '1px solid var(--sd-colour-line--medium)',
281
+ backgroundColor: 'var(--sd-colour-panel-bg--100)',
282
+ maxHeight: '400px',
283
+ }}
284
+ >
285
+ {this.state.openPanel3 ? null : (
286
+ <div className="d-flex items-center justify-center sd-flex--grow">
287
+ <Button
288
+ text="Open Panel"
289
+ style="filled"
290
+ onClick={() => this.setState({openPanel3: true})}
291
+ />
208
292
  </div>
209
- }
210
- <PanelElements.Panel side='left' background='light' open={this.state.openPanel3} size='small'>
211
- <PanelElements.PanelHeader title='Donec sed odio dui' onClose={()=> this.setState({openPanel3: false})}>
212
- {!this.state.openToolbar1 ? null :
213
- <PanelElements.PanelHeaderSlidingToolbar>
214
- <ButtonGroup align='end'>
215
- <Button text='Cancel' style='hollow' onClick={()=> this.setState({openToolbar1: false})} />
216
- <Button text='Save' style='hollow' type='primary' onClick={()=> this.setState({openToolbar1: false})} />
217
- </ButtonGroup>
218
- </PanelElements.PanelHeaderSlidingToolbar>
219
- }
293
+ )}
294
+ <PanelElements.Panel
295
+ side="left"
296
+ background="light"
297
+ open={this.state.openPanel3}
298
+ size="small"
299
+ >
300
+ <PanelElements.PanelHeader
301
+ title="Donec sed odio dui"
302
+ onClose={() => this.setState({openPanel3: false})}
303
+ >
304
+ {!this.state.openToolbar1 ? null : (
305
+ <PanelElements.PanelHeaderSlidingToolbar>
306
+ <ButtonGroup align="end">
307
+ <Button
308
+ text="Cancel"
309
+ style="hollow"
310
+ onClick={() => this.setState({openToolbar1: false})}
311
+ />
312
+ <Button
313
+ text="Save"
314
+ style="hollow"
315
+ type="primary"
316
+ onClick={() => this.setState({openToolbar1: false})}
317
+ />
318
+ </ButtonGroup>
319
+ </PanelElements.PanelHeaderSlidingToolbar>
320
+ )}
220
321
  </PanelElements.PanelHeader>
221
322
  <PanelElements.PanelContent>
222
323
  <PanelElements.PanelContentBlock>
223
- <p className='sd-margin-b--2'>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida
224
- at eget metus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
225
- dolor auctor. Nulla vitae elit libero, a pharetra augue.</p>
226
- <p>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.
227
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus,
228
- nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.</p>
324
+ <p className="sd-margin-b--2">
325
+ Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
326
+ fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at
327
+ eget metus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus
328
+ mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
329
+ dolor auctor. Nulla vitae elit libero, a pharetra augue.
330
+ </p>
331
+ <p>
332
+ Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur
333
+ purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.
334
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio,
335
+ dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo
336
+ luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
337
+ Vestibulum id ligula porta felis euismod semper.
338
+ </p>
229
339
  </PanelElements.PanelContentBlock>
230
340
  </PanelElements.PanelContent>
231
341
  <PanelElements.PanelFooter>
232
- {this.state.openToolbar1 ? null :
233
- <ButtonGroup align='start'>
234
- <Button text='Open Slide In Toolbar' style='hollow' onClick={()=> this.setState({openToolbar1: true})} />
342
+ {this.state.openToolbar1 ? null : (
343
+ <ButtonGroup align="start">
344
+ <Button
345
+ text="Open Slide In Toolbar"
346
+ style="hollow"
347
+ onClick={() => this.setState({openToolbar1: true})}
348
+ />
235
349
  </ButtonGroup>
236
- }
237
- <ButtonGroup align='end'>
238
- <IconButton icon='dots-vertical' ariaValue={'More options'} onClick={() => false} />
350
+ )}
351
+ <ButtonGroup align="end">
352
+ <IconButton
353
+ icon="dots-vertical"
354
+ ariaValue={'More options'}
355
+ onClick={() => false}
356
+ />
239
357
  </ButtonGroup>
240
358
  </PanelElements.PanelFooter>
241
359
  </PanelElements.Panel>
242
360
  </div>
243
361
  </Markup.ReactMarkupPreview>
244
- <Markup.ReactMarkupCode>{`
362
+ <Markup.ReactMarkupCode>
363
+ {`
245
364
  // With PanelHeaderSlidingToolbar element inside the PanelHeader
246
365
 
247
366
  {this.state.openPanel3 ? null :
@@ -283,37 +402,70 @@ export default class PanelDoc extends React.Component<IProps, IState> {
283
402
 
284
403
  <Markup.ReactMarkup>
285
404
  <Markup.ReactMarkupPreview>
286
- <p className="docs-page__paragraph">// With PanelTools (allowing custom actions) + dark theme</p>
287
- <div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
288
- {this.state.openPanel4 ? null :
289
- <div className='d-flex items-center justify-center sd-flex--grow'>
290
- <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel4': true})} />
405
+ <p className="docs-page__paragraph">
406
+ // With PanelTools (allowing custom actions) + dark theme
407
+ </p>
408
+ <div
409
+ className="d-flex"
410
+ style={{
411
+ border: '1px solid var(--sd-colour-line--medium)',
412
+ backgroundColor: 'var(--sd-colour-panel-bg--100)',
413
+ maxHeight: '400px',
414
+ }}
415
+ >
416
+ {this.state.openPanel4 ? null : (
417
+ <div className="d-flex items-center justify-center sd-flex--grow">
418
+ <Button
419
+ text="Open Panel"
420
+ style="filled"
421
+ onClick={() => this.setState({openPanel4: true})}
422
+ />
291
423
  </div>
292
- }
293
- <PanelElements.Panel side='left' background='light' open={this.state.openPanel4} size='x-small' theme='dark'>
294
- <PanelElements.PanelHeader title='Donec sed odio dui'>
295
- <PanelElements.PanelTools tools={[
296
- {title: 'Delete', icon: 'trash', onClick: () => false, ariaValue: 'Delete' },
297
- {title: 'Edit', icon: 'pencil', onClick: () => false, ariaValue: 'Edit' },
298
- {title: 'Close', icon: 'close-small', onClick: ()=> this.setState({openPanel4: false}), ariaValue: 'Close' },
299
- ]} />
424
+ )}
425
+ <PanelElements.Panel
426
+ side="left"
427
+ background="light"
428
+ open={this.state.openPanel4}
429
+ size="x-small"
430
+ theme="dark"
431
+ >
432
+ <PanelElements.PanelHeader title="Donec sed odio dui">
433
+ <PanelElements.PanelTools
434
+ tools={[
435
+ {title: 'Delete', icon: 'trash', onClick: () => false, ariaValue: 'Delete'},
436
+ {title: 'Edit', icon: 'pencil', onClick: () => false, ariaValue: 'Edit'},
437
+ {
438
+ title: 'Close',
439
+ icon: 'close-small',
440
+ onClick: () => this.setState({openPanel4: false}),
441
+ ariaValue: 'Close',
442
+ },
443
+ ]}
444
+ />
300
445
  </PanelElements.PanelHeader>
301
446
  <PanelElements.PanelContent>
302
447
  <PanelElements.PanelContentBlock>
303
- <p className='sd-margin-b--2'>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida
304
- at eget metus. Nulla vitae elit libero, a pharetra augue.</p>
305
- <p>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.
306
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
448
+ <p className="sd-margin-b--2">
449
+ Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
450
+ fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at
451
+ eget metus. Nulla vitae elit libero, a pharetra augue.
452
+ </p>
453
+ <p>
454
+ Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur
455
+ purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.
456
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
457
+ </p>
307
458
  </PanelElements.PanelContentBlock>
308
459
  </PanelElements.PanelContent>
309
460
  <PanelElements.PanelFooter>
310
- <Button text='Cancel' style='hollow' onClick={() => false} />
311
- <Button text='Save' type='primary' onClick={() => false} />
461
+ <Button text="Cancel" style="hollow" onClick={() => false} />
462
+ <Button text="Save" type="primary" onClick={() => false} />
312
463
  </PanelElements.PanelFooter>
313
464
  </PanelElements.Panel>
314
465
  </div>
315
466
  </Markup.ReactMarkupPreview>
316
- <Markup.ReactMarkupCode>{`
467
+ <Markup.ReactMarkupCode>
468
+ {`
317
469
  // With PanelTools (allowing custom actions) + dark theme
318
470
 
319
471
  {this.state.openPanel4 ? null :
@@ -343,42 +495,137 @@ export default class PanelDoc extends React.Component<IProps, IState> {
343
495
  `}
344
496
  </Markup.ReactMarkupCode>
345
497
  </Markup.ReactMarkup>
346
-
347
498
 
348
499
  <h3 className="docs-page__h3">Props</h3>
349
500
  <p className="docs-page__paragraph">Panel</p>
350
501
  <PropsList>
351
- <Prop name='size' isRequired={false} type='xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large | full | auto' default='small' description='Specifies the width of the panel.'/>
352
- <Prop name='side' isRequired={false} type='left | right' default='left' description='Defines the side of the panel. It will also add the appropriate shadow on the opsite side.'/>
353
- <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Explicitly define the theme of the panel. All child elements and the content will inherit the selected theme.'/>
354
- <Prop name='background' isRequired={false} type='transparent | light | grey' default='light' description='Background colour of the panel.'/>
355
- <Prop name='open' isRequired={false} type='boolean' default='false' description='Toggles the open/closed state of the panel.'/>
356
- <Prop name='ClassName' isRequired={false} type='string' default='false' description='Add custom classes to modify the default behaviour or specify the placement in complex layouts.'/>
502
+ <Prop
503
+ name="size"
504
+ isRequired={false}
505
+ type="xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large | full | auto"
506
+ default="small"
507
+ description="Specifies the width of the panel."
508
+ />
509
+ <Prop
510
+ name="side"
511
+ isRequired={false}
512
+ type="left | right"
513
+ default="left"
514
+ description="Defines the side of the panel. It will also add the appropriate shadow on the opsite side."
515
+ />
516
+ <Prop
517
+ name="theme"
518
+ isRequired={false}
519
+ type="light | dark"
520
+ default="/"
521
+ description="Explicitly define the theme of the panel. All child elements and the content will inherit the selected theme."
522
+ />
523
+ <Prop
524
+ name="background"
525
+ isRequired={false}
526
+ type="transparent | light | grey"
527
+ default="light"
528
+ description="Background colour of the panel."
529
+ />
530
+ <Prop
531
+ name="open"
532
+ isRequired={false}
533
+ type="boolean"
534
+ default="false"
535
+ description="Toggles the open/closed state of the panel."
536
+ />
537
+ <Prop
538
+ name="ClassName"
539
+ isRequired={false}
540
+ type="string"
541
+ default="false"
542
+ description="Add custom classes to modify the default behaviour or specify the placement in complex layouts."
543
+ />
357
544
  </PropsList>
358
545
 
359
546
  <p className="docs-page__paragraph">PanelHeader</p>
360
547
  <PropsList>
361
- <Prop name='title' isRequired={false} type='string' default='/' description='Specifies the title of the panel.'/>
362
- <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Explicitly define the theme just for the of Panel Header. All child elements and the content inside the Header will inherit the selected theme.'/>
363
- <Prop name='color' isRequired={false} type='light | darker | blueGrey | blueGreyDarker' default='light' description='Background colour of the Panel Header. blueGrey and blueGreyDarker will also change the text colour to white.'/>
364
- <Prop name='ClassName' isRequired={false} type='string' default='false' description='Add custom or helper classes to modify the default behaviour if needed. Use only if necessary.'/>
365
- <Prop name='iconButtons' isRequired={false} type='Aarray' default='false' description='Array of JSX Elements.'/>
548
+ <Prop
549
+ name="title"
550
+ isRequired={false}
551
+ type="string"
552
+ default="/"
553
+ description="Specifies the title of the panel."
554
+ />
555
+ <Prop
556
+ name="theme"
557
+ isRequired={false}
558
+ type="light | dark"
559
+ default="/"
560
+ description="Explicitly define the theme just for the of Panel Header. All child elements and the content inside the Header will inherit the selected theme."
561
+ />
562
+ <Prop
563
+ name="color"
564
+ isRequired={false}
565
+ type="light | darker | blueGrey | blueGreyDarker"
566
+ default="light"
567
+ description="Background colour of the Panel Header. blueGrey and blueGreyDarker will also change the text colour to white."
568
+ />
569
+ <Prop
570
+ name="ClassName"
571
+ isRequired={false}
572
+ type="string"
573
+ default="false"
574
+ description="Add custom or helper classes to modify the default behaviour if needed. Use only if necessary."
575
+ />
576
+ <Prop
577
+ name="iconButtons"
578
+ isRequired={false}
579
+ type="Aarray"
580
+ default="false"
581
+ description="Array of JSX Elements."
582
+ />
366
583
  </PropsList>
367
584
 
368
585
  <p className="docs-page__paragraph">PanelContent</p>
369
586
  <PropsList>
370
- <Prop name='loading' isRequired={false} type='boolean' default='false' description='Loading state.'/>
371
- <Prop name='empty' isRequired={false} type='boolean' default='false' description='Empty state'/>
372
- <Prop name='emptyTemplate' isRequired={false} type='ReactNode' default='/' description='Use the EmptyState component to define the image and text for the empty state.'/>
587
+ <Prop
588
+ name="loading"
589
+ isRequired={false}
590
+ type="boolean"
591
+ default="false"
592
+ description="Loading state."
593
+ />
594
+ <Prop name="empty" isRequired={false} type="boolean" default="false" description="Empty state" />
595
+ <Prop
596
+ name="emptyTemplate"
597
+ isRequired={false}
598
+ type="ReactNode"
599
+ default="/"
600
+ description="Use the EmptyState component to define the image and text for the empty state."
601
+ />
373
602
  </PropsList>
374
603
 
375
604
  <p className="docs-page__paragraph">PanelContentBlock</p>
376
605
  <PropsList>
377
- <Prop name='flex' isRequired={false} type='boolean' default='false' description='Change to flex display mode.'/>
378
- <Prop name='padding' isRequired={false} type='0 | 1-5 | 3' default='2' description='Choose padding for the content block. Defaults to 2 (16px) without specifiying a value.'/>
379
- <Prop name='ClassName' isRequired={false} type='string' default='false' description='Add custom or helper classes to modify the default behaviour or layout if needed.'/>
606
+ <Prop
607
+ name="flex"
608
+ isRequired={false}
609
+ type="boolean"
610
+ default="false"
611
+ description="Change to flex display mode."
612
+ />
613
+ <Prop
614
+ name="padding"
615
+ isRequired={false}
616
+ type="0 | 1-5 | 3"
617
+ default="2"
618
+ description="Choose padding for the content block. Defaults to 2 (16px) without specifiying a value."
619
+ />
620
+ <Prop
621
+ name="ClassName"
622
+ isRequired={false}
623
+ type="string"
624
+ default="false"
625
+ description="Add custom or helper classes to modify the default behaviour or layout if needed."
626
+ />
380
627
  </PropsList>
381
628
  </section>
382
- )
629
+ );
383
630
  }
384
631
  }