superdesk-ui-framework 4.0.46 → 4.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (563) hide show
  1. package/.eslintrc.js +0 -1
  2. package/.eslintrc.json +2 -5
  3. package/.github/workflows/test.yml +22 -26
  4. package/.prettierignore +3 -0
  5. package/.prettierrc.js +9 -0
  6. package/.travis.yml +4 -4
  7. package/README.md +14 -1
  8. package/app/styles/form-elements/_forms-general.scss +0 -4
  9. package/app-typescript/components/Alert.tsx +12 -16
  10. package/app-typescript/components/Autocomplete.tsx +53 -42
  11. package/app-typescript/components/Badge.tsx +1 -1
  12. package/app-typescript/components/Button.tsx +5 -11
  13. package/app-typescript/components/ButtonGroup.tsx +15 -10
  14. package/app-typescript/components/Carousel.tsx +25 -26
  15. package/app-typescript/components/CheckButtonGroup.tsx +6 -10
  16. package/app-typescript/components/Checkbox.tsx +16 -10
  17. package/app-typescript/components/CheckboxButton.tsx +22 -13
  18. package/app-typescript/components/ContentDivider.tsx +6 -7
  19. package/app-typescript/components/CreateButton.tsx +8 -6
  20. package/app-typescript/components/DatePicker.tsx +59 -55
  21. package/app-typescript/components/DateTimePicker.tsx +175 -117
  22. package/app-typescript/components/Divider.tsx +2 -4
  23. package/app-typescript/components/DonutChart.tsx +11 -6
  24. package/app-typescript/components/DragHandle.tsx +10 -6
  25. package/app-typescript/components/DragHandleDots.tsx +1 -3
  26. package/app-typescript/components/DropZone.tsx +27 -25
  27. package/app-typescript/components/Dropdown.tsx +61 -102
  28. package/app-typescript/components/DropdownFirst.tsx +57 -69
  29. package/app-typescript/components/DurationInput.tsx +64 -54
  30. package/app-typescript/components/Editor/EditorButton.tsx +4 -3
  31. package/app-typescript/components/EmptyState.tsx +10 -14
  32. package/app-typescript/components/Form/FormGroup.tsx +9 -16
  33. package/app-typescript/components/Form/FormItem.tsx +1 -5
  34. package/app-typescript/components/Form/FormLabel.tsx +0 -1
  35. package/app-typescript/components/Form/FormRow.tsx +12 -19
  36. package/app-typescript/components/Form/FormRowNew.tsx +9 -16
  37. package/app-typescript/components/Form/FormText.tsx +1 -5
  38. package/app-typescript/components/Form/InputBase.tsx +12 -11
  39. package/app-typescript/components/Form/InputNew.tsx +11 -12
  40. package/app-typescript/components/Form/InputWrapper.tsx +9 -18
  41. package/app-typescript/components/Form/index.tsx +9 -9
  42. package/app-typescript/components/FormLabel.tsx +1 -5
  43. package/app-typescript/components/GridItem.tsx +38 -69
  44. package/app-typescript/components/GridList.tsx +2 -6
  45. package/app-typescript/components/HeadingText.tsx +4 -5
  46. package/app-typescript/components/IconButton.tsx +4 -10
  47. package/app-typescript/components/IconLabel.tsx +5 -5
  48. package/app-typescript/components/IconPicker.tsx +128 -126
  49. package/app-typescript/components/IllustrationButton.tsx +2 -8
  50. package/app-typescript/components/Input.tsx +2 -2
  51. package/app-typescript/components/Label.tsx +11 -7
  52. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +1 -5
  53. package/app-typescript/components/Layouts/AuthoringContainer.tsx +4 -6
  54. package/app-typescript/components/Layouts/AuthoringFrame.tsx +4 -20
  55. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +1 -5
  56. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +1 -5
  57. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +1 -5
  58. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +1 -5
  59. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +1 -5
  60. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +1 -5
  61. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +1 -5
  62. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +1 -3
  63. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -6
  64. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +5 -5
  65. package/app-typescript/components/Layouts/AuthoringMain.tsx +3 -4
  66. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +1 -5
  67. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +1 -5
  68. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +1 -6
  69. package/app-typescript/components/Layouts/BottomBarAction.tsx +8 -10
  70. package/app-typescript/components/Layouts/Container.tsx +13 -8
  71. package/app-typescript/components/Layouts/ContentSplitter.tsx +2 -6
  72. package/app-typescript/components/Layouts/CoreLayout.tsx +5 -12
  73. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +1 -1
  74. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +1 -5
  75. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -4
  76. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +1 -5
  77. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +2 -4
  78. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +8 -9
  79. package/app-typescript/components/Layouts/HamburgerButton.tsx +13 -14
  80. package/app-typescript/components/Layouts/HeaderPanel.tsx +1 -5
  81. package/app-typescript/components/Layouts/Layout.tsx +10 -16
  82. package/app-typescript/components/Layouts/LayoutContainer.tsx +2 -7
  83. package/app-typescript/components/Layouts/LeftPanel.tsx +4 -11
  84. package/app-typescript/components/Layouts/MainMenu.tsx +18 -32
  85. package/app-typescript/components/Layouts/MainPanel.tsx +10 -11
  86. package/app-typescript/components/Layouts/NotificationPanel.tsx +20 -29
  87. package/app-typescript/components/Layouts/OverlayPanel.tsx +3 -5
  88. package/app-typescript/components/Layouts/PageLayout.tsx +4 -21
  89. package/app-typescript/components/Layouts/Panel.tsx +45 -81
  90. package/app-typescript/components/Layouts/index.tsx +39 -39
  91. package/app-typescript/components/LeftMenu.tsx +51 -53
  92. package/app-typescript/components/ListItemLoader.tsx +1 -1
  93. package/app-typescript/components/Lists/BoxedList.tsx +16 -41
  94. package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +2 -10
  95. package/app-typescript/components/Lists/ContentList.tsx +68 -62
  96. package/app-typescript/components/Lists/SimpleList.tsx +13 -12
  97. package/app-typescript/components/Lists/TableList.tsx +169 -217
  98. package/app-typescript/components/Lists/index.tsx +2 -2
  99. package/app-typescript/components/Loader.tsx +1 -3
  100. package/app-typescript/components/Menu.tsx +2 -4
  101. package/app-typescript/components/Modal.tsx +21 -21
  102. package/app-typescript/components/MultiSelect.tsx +6 -6
  103. package/app-typescript/components/NavButton.tsx +10 -8
  104. package/app-typescript/components/Navigation/BottomNav.tsx +21 -17
  105. package/app-typescript/components/Navigation/QuickNavBar.tsx +40 -37
  106. package/app-typescript/components/Navigation/SideBarMenu.tsx +21 -17
  107. package/app-typescript/components/Navigation/SideBarTabs.tsx +13 -19
  108. package/app-typescript/components/Navigation/index.tsx +3 -3
  109. package/app-typescript/components/Popover.tsx +19 -21
  110. package/app-typescript/components/PropsList.tsx +2 -4
  111. package/app-typescript/components/RadioButtonGroup.tsx +48 -45
  112. package/app-typescript/components/RadioGroup.tsx +9 -8
  113. package/app-typescript/components/ResizablePanels.tsx +2 -3
  114. package/app-typescript/components/ResizeObserverComponent.tsx +1 -5
  115. package/app-typescript/components/SearchBar.tsx +53 -45
  116. package/app-typescript/components/Select.tsx +6 -8
  117. package/app-typescript/components/SelectGrid.tsx +32 -40
  118. package/app-typescript/components/SelectPreview.tsx +31 -25
  119. package/app-typescript/components/SelectWithTemplate.tsx +10 -11
  120. package/app-typescript/components/ShowPopup.tsx +30 -46
  121. package/app-typescript/components/SidebarMenu.tsx +19 -18
  122. package/app-typescript/components/Skeleton.tsx +12 -11
  123. package/app-typescript/components/SlidingToolbar.tsx +1 -6
  124. package/app-typescript/components/Spinner.tsx +2 -6
  125. package/app-typescript/components/StrechBar.tsx +1 -5
  126. package/app-typescript/components/SubNav.tsx +10 -8
  127. package/app-typescript/components/SvgIconIllustration.tsx +477 -105
  128. package/app-typescript/components/Switch.tsx +14 -12
  129. package/app-typescript/components/SwitchGroup.tsx +10 -10
  130. package/app-typescript/components/TabCustom.tsx +28 -35
  131. package/app-typescript/components/TabList.tsx +13 -10
  132. package/app-typescript/components/Tag.tsx +21 -24
  133. package/app-typescript/components/TagInput.tsx +4 -11
  134. package/app-typescript/components/Text/Heading.tsx +21 -41
  135. package/app-typescript/components/Text/Text.tsx +16 -12
  136. package/app-typescript/components/Text/Time.tsx +14 -10
  137. package/app-typescript/components/ThemeSelector.tsx +15 -14
  138. package/app-typescript/components/TimePicker.tsx +2 -2
  139. package/app-typescript/components/TimePickerV2.tsx +20 -20
  140. package/app-typescript/components/Toast.tsx +11 -7
  141. package/app-typescript/components/ToastMessage.tsx +3 -14
  142. package/app-typescript/components/ToastText.tsx +30 -32
  143. package/app-typescript/components/ToastWrapper.tsx +76 -74
  144. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -45
  145. package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +31 -33
  146. package/app-typescript/components/ToggleBox/index.tsx +3 -7
  147. package/app-typescript/components/Tooltip.tsx +1 -1
  148. package/app-typescript/components/TreeMenu.tsx +72 -81
  149. package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +1 -5
  150. package/app-typescript/components/TreeSelect/TreeSelect.tsx +221 -238
  151. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +20 -24
  152. package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +12 -15
  153. package/app-typescript/components/WithPagination.tsx +34 -39
  154. package/app-typescript/components/WithPopover.tsx +0 -1
  155. package/app-typescript/components/WithPortal.tsx +4 -7
  156. package/app-typescript/components/WithSizeObserver.tsx +2 -6
  157. package/app-typescript/components/_Positioner.tsx +26 -26
  158. package/app-typescript/components/avatar/avatar-action-add.tsx +1 -6
  159. package/app-typescript/components/avatar/avatar-group.tsx +49 -68
  160. package/app-typescript/components/avatar/avatar-image.tsx +18 -12
  161. package/app-typescript/components/avatar/avatar-placeholder.tsx +3 -15
  162. package/app-typescript/components/avatar/avatar-text.tsx +1 -4
  163. package/app-typescript/components/avatar/avatar-wrapper.tsx +18 -30
  164. package/app-typescript/components/avatar/avatar.tsx +5 -8
  165. package/app-typescript/components/with-pagination.spec.tsx +8 -27
  166. package/app-typescript/helpers.tsx +2 -2
  167. package/app-typescript/index.ts +111 -100
  168. package/declarations.d.ts +1 -1
  169. package/dist/components/Alerts.tsx +171 -78
  170. package/dist/components/Autocomplete.tsx +187 -78
  171. package/dist/components/Avatar.tsx +52 -112
  172. package/dist/components/Badges.tsx +111 -67
  173. package/dist/components/BigIconFont.tsx +29 -17
  174. package/dist/components/BoxedList.tsx +244 -114
  175. package/dist/components/ButtonGroups.tsx +213 -147
  176. package/dist/components/Buttons.tsx +409 -137
  177. package/dist/components/Card.tsx +6 -7
  178. package/dist/components/Carousel.tsx +126 -39
  179. package/dist/components/Checkboxs.tsx +446 -105
  180. package/dist/components/Container.tsx +95 -48
  181. package/dist/components/ContentDivider.tsx +110 -63
  182. package/dist/components/ContentList.tsx +577 -253
  183. package/dist/components/CreateButton.tsx +71 -21
  184. package/dist/components/DatePicker.tsx +102 -26
  185. package/dist/components/DateTimePicker.tsx +46 -10
  186. package/dist/components/DragHandleDocs.tsx +56 -26
  187. package/dist/components/DropZone.tsx +67 -29
  188. package/dist/components/Dropdowns.tsx +220 -131
  189. package/dist/components/DurationInput.tsx +92 -32
  190. package/dist/components/EmptyStates.tsx +61 -26
  191. package/dist/components/GridItem.tsx +190 -91
  192. package/dist/components/GridList.tsx +37 -17
  193. package/dist/components/Heading.tsx +81 -35
  194. package/dist/components/IconButtons.tsx +125 -32
  195. package/dist/components/IconFont.tsx +24 -12
  196. package/dist/components/IconLabels.tsx +146 -39
  197. package/dist/components/IconPicker.tsx +30 -13
  198. package/dist/components/IllustrationButton.tsx +40 -20
  199. package/dist/components/Index.tsx +128 -114
  200. package/dist/components/Inputs.tsx +153 -51
  201. package/dist/components/Labels.tsx +191 -117
  202. package/dist/components/LeftNavigations.tsx +327 -100
  203. package/dist/components/ListItems.tsx +8 -9
  204. package/dist/components/Loader.tsx +5 -4
  205. package/dist/components/Menu.tsx +48 -26
  206. package/dist/components/Modal.tsx +298 -104
  207. package/dist/components/MultiSelect.tsx +189 -53
  208. package/dist/components/NavButtons.tsx +86 -30
  209. package/dist/components/Panel.tsx +367 -120
  210. package/dist/components/Popover.tsx +37 -17
  211. package/dist/components/QuickNavigationBar.tsx +222 -86
  212. package/dist/components/RadioGroup.tsx +375 -137
  213. package/dist/components/ResizablePanels.tsx +8 -14
  214. package/dist/components/SelectGrid.tsx +79 -38
  215. package/dist/components/SelectWithTemplate.tsx +23 -14
  216. package/dist/components/Selects.tsx +94 -29
  217. package/dist/components/SimpleList.tsx +91 -41
  218. package/dist/components/SubNav.tsx +57 -37
  219. package/dist/components/Switch.tsx +168 -42
  220. package/dist/components/TableList.tsx +220 -66
  221. package/dist/components/Tabs.tsx +149 -64
  222. package/dist/components/TagInputDocs.tsx +73 -17
  223. package/dist/components/Tags.tsx +104 -73
  224. package/dist/components/Text.tsx +108 -58
  225. package/dist/components/TimePicker.tsx +74 -20
  226. package/dist/components/Toasts.tsx +162 -80
  227. package/dist/components/Togglebox.tsx +164 -62
  228. package/dist/components/Tooltips.tsx +27 -15
  229. package/dist/components/TreeMenu.tsx +95 -59
  230. package/dist/components/TreeSelect.tsx +297 -162
  231. package/dist/components/WithPaginationDocs.tsx +15 -16
  232. package/dist/components/WithSizeObserver.tsx +9 -9
  233. package/dist/components/tree-select/TreeSelect.tsx +126 -77
  234. package/dist/components/tree-select/example-1.tsx +8 -12
  235. package/dist/components/tree-select/example-2.tsx +2 -5
  236. package/dist/components/utilities/BorderRadiusUtilities.tsx +28 -13
  237. package/dist/components/utilities/BorderUtilities.tsx +31 -32
  238. package/dist/components/utilities/DisplayUtilities.tsx +4 -5
  239. package/dist/components/utilities/FlexAndGridUtilities.tsx +38 -38
  240. package/dist/components/utilities/ObjectFitUtilities.tsx +4 -6
  241. package/dist/components/utilities/ObjectPositionUtilities.tsx +3 -4
  242. package/dist/components/utilities/OpacityUtilities.tsx +4 -7
  243. package/dist/components/utilities/OverflowUtilities.tsx +4 -5
  244. package/dist/components/utilities/PositionUtilities.tsx +4 -5
  245. package/dist/components/utilities/ShadowUtilities.tsx +15 -16
  246. package/dist/components/utilities/SpacingUtilities.tsx +483 -178
  247. package/dist/components/utilities/TextUtilities.tsx +109 -60
  248. package/dist/design-patterns/Index.tsx +8 -11
  249. package/dist/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  250. package/dist/examples.bundle.css +1257 -1155
  251. package/dist/examples.bundle.js +6246 -5620
  252. package/dist/playgrounds/dummy-data/items.ts +9 -8
  253. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  254. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  255. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  256. package/dist/playgrounds/react-playgrounds/Index.tsx +11 -11
  257. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  258. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  259. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  260. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  261. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  262. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  263. package/dist/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  264. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  265. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  266. package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  267. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  268. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  269. package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  270. package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  271. package/dist/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  272. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  273. package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  274. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  275. package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  276. package/dist/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  277. package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  278. package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  279. package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  280. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  281. package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  282. package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  283. package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  284. package/dist/playgrounds/react-playgrounds/tsconfig.json +1 -1
  285. package/dist/superdesk-ui.bundle.css +0 -3
  286. package/dist/superdesk-ui.bundle.js +1791 -1865
  287. package/dist/vendor.bundle.js +2 -2
  288. package/examples/css/docs-page.css +1135 -1116
  289. package/examples/css/reset.css +124 -43
  290. package/examples/css/vendor.css +125 -125
  291. package/examples/index.js +138 -139
  292. package/examples/js/doc.js +41 -40
  293. package/examples/js/react.js +82 -48
  294. package/examples/pages/components/Alerts.tsx +171 -78
  295. package/examples/pages/components/Autocomplete.tsx +187 -78
  296. package/examples/pages/components/Avatar.tsx +52 -112
  297. package/examples/pages/components/Badges.tsx +111 -67
  298. package/examples/pages/components/BigIconFont.tsx +29 -17
  299. package/examples/pages/components/BoxedList.tsx +244 -114
  300. package/examples/pages/components/ButtonGroups.tsx +213 -147
  301. package/examples/pages/components/Buttons.tsx +409 -137
  302. package/examples/pages/components/Card.tsx +6 -7
  303. package/examples/pages/components/Carousel.tsx +126 -39
  304. package/examples/pages/components/Checkboxs.tsx +446 -105
  305. package/examples/pages/components/Container.tsx +95 -48
  306. package/examples/pages/components/ContentDivider.tsx +110 -63
  307. package/examples/pages/components/ContentList.tsx +577 -253
  308. package/examples/pages/components/CreateButton.tsx +71 -21
  309. package/examples/pages/components/DatePicker.tsx +102 -26
  310. package/examples/pages/components/DateTimePicker.tsx +46 -10
  311. package/examples/pages/components/DragHandleDocs.tsx +56 -26
  312. package/examples/pages/components/DropZone.tsx +67 -29
  313. package/examples/pages/components/Dropdowns.tsx +220 -131
  314. package/examples/pages/components/DurationInput.tsx +92 -32
  315. package/examples/pages/components/EmptyStates.tsx +61 -26
  316. package/examples/pages/components/GridItem.tsx +190 -91
  317. package/examples/pages/components/GridList.tsx +37 -17
  318. package/examples/pages/components/Heading.tsx +81 -35
  319. package/examples/pages/components/IconButtons.tsx +125 -32
  320. package/examples/pages/components/IconFont.tsx +24 -12
  321. package/examples/pages/components/IconLabels.tsx +146 -39
  322. package/examples/pages/components/IconPicker.tsx +30 -13
  323. package/examples/pages/components/IllustrationButton.tsx +40 -20
  324. package/examples/pages/components/Index.tsx +128 -114
  325. package/examples/pages/components/Inputs.tsx +153 -51
  326. package/examples/pages/components/Labels.tsx +191 -117
  327. package/examples/pages/components/LeftNavigations.tsx +327 -100
  328. package/examples/pages/components/ListItems.tsx +8 -9
  329. package/examples/pages/components/Loader.tsx +5 -4
  330. package/examples/pages/components/Menu.tsx +48 -26
  331. package/examples/pages/components/Modal.tsx +298 -104
  332. package/examples/pages/components/MultiSelect.tsx +189 -53
  333. package/examples/pages/components/NavButtons.tsx +86 -30
  334. package/examples/pages/components/Panel.tsx +367 -120
  335. package/examples/pages/components/Popover.tsx +37 -17
  336. package/examples/pages/components/QuickNavigationBar.tsx +222 -86
  337. package/examples/pages/components/RadioGroup.tsx +375 -137
  338. package/examples/pages/components/ResizablePanels.tsx +8 -14
  339. package/examples/pages/components/SelectGrid.tsx +79 -38
  340. package/examples/pages/components/SelectWithTemplate.tsx +23 -14
  341. package/examples/pages/components/Selects.tsx +94 -29
  342. package/examples/pages/components/SimpleList.tsx +91 -41
  343. package/examples/pages/components/SubNav.tsx +57 -37
  344. package/examples/pages/components/Switch.tsx +168 -42
  345. package/examples/pages/components/TableList.tsx +220 -66
  346. package/examples/pages/components/Tabs.tsx +149 -64
  347. package/examples/pages/components/TagInputDocs.tsx +73 -17
  348. package/examples/pages/components/Tags.tsx +104 -73
  349. package/examples/pages/components/Text.tsx +108 -58
  350. package/examples/pages/components/TimePicker.tsx +74 -20
  351. package/examples/pages/components/Toasts.tsx +162 -80
  352. package/examples/pages/components/Togglebox.tsx +164 -62
  353. package/examples/pages/components/Tooltips.tsx +27 -15
  354. package/examples/pages/components/TreeMenu.tsx +95 -59
  355. package/examples/pages/components/TreeSelect.tsx +297 -162
  356. package/examples/pages/components/WithPaginationDocs.tsx +15 -16
  357. package/examples/pages/components/WithSizeObserver.tsx +9 -9
  358. package/examples/pages/components/tree-select/TreeSelect.tsx +126 -77
  359. package/examples/pages/components/tree-select/example-1.tsx +8 -12
  360. package/examples/pages/components/tree-select/example-2.tsx +2 -5
  361. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +28 -13
  362. package/examples/pages/components/utilities/BorderUtilities.tsx +31 -32
  363. package/examples/pages/components/utilities/DisplayUtilities.tsx +4 -5
  364. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +38 -38
  365. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +4 -6
  366. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +3 -4
  367. package/examples/pages/components/utilities/OpacityUtilities.tsx +4 -7
  368. package/examples/pages/components/utilities/OverflowUtilities.tsx +4 -5
  369. package/examples/pages/components/utilities/PositionUtilities.tsx +4 -5
  370. package/examples/pages/components/utilities/ShadowUtilities.tsx +15 -16
  371. package/examples/pages/components/utilities/SpacingUtilities.tsx +483 -178
  372. package/examples/pages/components/utilities/TextUtilities.tsx +109 -60
  373. package/examples/pages/design-patterns/Index.tsx +8 -11
  374. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  375. package/examples/pages/playgrounds/dummy-data/items.ts +9 -8
  376. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  377. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  378. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  379. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +11 -11
  380. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  381. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  382. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  383. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  384. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  385. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  386. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  387. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  388. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  389. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  390. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  391. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  392. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  393. package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  394. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  395. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  396. package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  397. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  398. package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  399. package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  400. package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  401. package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  402. package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  403. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  404. package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  405. package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  406. package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  407. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +1 -1
  408. package/globals.d.ts +1 -1
  409. package/mocha-setup.ts +3 -3
  410. package/package.json +119 -117
  411. package/react/components/Alert.js +6 -9
  412. package/react/components/Autocomplete.js +15 -23
  413. package/react/components/Badge.js +1 -1
  414. package/react/components/Button.js +4 -6
  415. package/react/components/ButtonGroup.js +1 -1
  416. package/react/components/Carousel.js +3 -3
  417. package/react/components/CheckButtonGroup.js +3 -6
  418. package/react/components/CheckboxButton.js +2 -4
  419. package/react/components/ContentDivider.js +1 -1
  420. package/react/components/DatePicker.js +29 -26
  421. package/react/components/DateTimePicker.d.ts +26 -4
  422. package/react/components/DateTimePicker.js +82 -27
  423. package/react/components/Divider.js +1 -1
  424. package/react/components/DonutChart.js +1 -1
  425. package/react/components/DragHandle.js +1 -1
  426. package/react/components/DragHandleDots.js +1 -1
  427. package/react/components/DropZone.js +6 -8
  428. package/react/components/Dropdown.d.ts +1 -1
  429. package/react/components/Dropdown.js +34 -38
  430. package/react/components/DropdownFirst.d.ts +11 -11
  431. package/react/components/DropdownFirst.js +20 -24
  432. package/react/components/DurationInput.js +37 -34
  433. package/react/components/EmptyState.js +5 -5
  434. package/react/components/Form/FormGroup.js +1 -1
  435. package/react/components/Form/FormItem.js +1 -1
  436. package/react/components/Form/FormRow.js +1 -1
  437. package/react/components/Form/FormRowNew.js +3 -3
  438. package/react/components/Form/FormText.js +1 -1
  439. package/react/components/Form/InputNew.js +3 -3
  440. package/react/components/Form/InputWrapper.js +7 -10
  441. package/react/components/GridItem.d.ts +1 -1
  442. package/react/components/GridItem.js +16 -16
  443. package/react/components/GridList.js +1 -1
  444. package/react/components/HeadingText.js +4 -5
  445. package/react/components/IconLabel.js +3 -5
  446. package/react/components/IconPicker.d.ts +1 -1
  447. package/react/components/IconPicker.js +111 -104
  448. package/react/components/IllustrationButton.js +1 -1
  449. package/react/components/Input.js +1 -1
  450. package/react/components/Layouts/AuthorinInnerSideBar.js +1 -1
  451. package/react/components/Layouts/AuthoringContainer.js +1 -1
  452. package/react/components/Layouts/AuthoringFrame.js +4 -4
  453. package/react/components/Layouts/AuthoringFrameContainer.js +1 -1
  454. package/react/components/Layouts/AuthoringFrameLeftBar.js +1 -1
  455. package/react/components/Layouts/AuthoringFrameMain.js +1 -1
  456. package/react/components/Layouts/AuthoringFrameNavBar.js +1 -1
  457. package/react/components/Layouts/AuthoringFrameOverlay.js +1 -1
  458. package/react/components/Layouts/AuthoringFrameRightBar.js +1 -1
  459. package/react/components/Layouts/AuthoringFrameSidePanel.js +1 -1
  460. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +1 -1
  461. package/react/components/Layouts/AuthoringMainContainer.js +1 -1
  462. package/react/components/Layouts/AuthoringMainContent.js +1 -1
  463. package/react/components/Layouts/AuthoringMainToolBar.js +1 -1
  464. package/react/components/Layouts/BottomBarAction.js +2 -2
  465. package/react/components/Layouts/ContentSplitter.js +1 -1
  466. package/react/components/Layouts/CoreLayout.js +2 -2
  467. package/react/components/Layouts/CoreLayoutContainer.js +1 -1
  468. package/react/components/Layouts/CoreLayoutFooter.js +1 -1
  469. package/react/components/Layouts/CoreLayoutOverlay.js +1 -1
  470. package/react/components/Layouts/CoreLayoutSlideInMenu.js +2 -2
  471. package/react/components/Layouts/CoreLayoutTopMenu.js +3 -3
  472. package/react/components/Layouts/HamburgerButton.js +1 -1
  473. package/react/components/Layouts/HeaderPanel.js +1 -1
  474. package/react/components/Layouts/Layout.d.ts +1 -1
  475. package/react/components/Layouts/Layout.js +9 -9
  476. package/react/components/Layouts/LayoutContainer.js +1 -1
  477. package/react/components/Layouts/LeftPanel.js +1 -1
  478. package/react/components/Layouts/MainMenu.js +8 -10
  479. package/react/components/Layouts/MainPanel.js +1 -1
  480. package/react/components/Layouts/NotificationPanel.d.ts +1 -1
  481. package/react/components/Layouts/NotificationPanel.js +7 -7
  482. package/react/components/Layouts/OverlayPanel.js +3 -3
  483. package/react/components/Layouts/PageLayout.js +2 -2
  484. package/react/components/Layouts/Panel.d.ts +1 -1
  485. package/react/components/Layouts/Panel.js +12 -18
  486. package/react/components/LeftMenu.d.ts +3 -3
  487. package/react/components/LeftMenu.js +11 -13
  488. package/react/components/Lists/BoxedList.js +6 -6
  489. package/react/components/Lists/CalendarWeekDayItem.js +2 -2
  490. package/react/components/Lists/ContentList.js +24 -26
  491. package/react/components/Lists/TableList.d.ts +1 -1
  492. package/react/components/Lists/TableList.js +59 -79
  493. package/react/components/Loader.js +1 -1
  494. package/react/components/Menu.js +1 -1
  495. package/react/components/Modal.d.ts +1 -1
  496. package/react/components/MultiSelect.d.ts +1 -1
  497. package/react/components/MultiSelect.js +2 -2
  498. package/react/components/NavButton.js +2 -4
  499. package/react/components/Navigation/BottomNav.js +9 -8
  500. package/react/components/Navigation/QuickNavBar.js +17 -20
  501. package/react/components/Navigation/SideBarMenu.js +11 -9
  502. package/react/components/Navigation/SideBarTabs.js +9 -8
  503. package/react/components/Popover.js +1 -1
  504. package/react/components/RadioButtonGroup.js +15 -23
  505. package/react/components/ResizablePanels.js +1 -3
  506. package/react/components/ResizeObserverComponent.js +1 -3
  507. package/react/components/SearchBar.js +14 -16
  508. package/react/components/Select.js +3 -3
  509. package/react/components/SelectGrid.js +15 -20
  510. package/react/components/SelectPreview.js +13 -13
  511. package/react/components/SelectWithTemplate.js +3 -5
  512. package/react/components/ShowPopup.js +7 -10
  513. package/react/components/Skeleton.js +1 -1
  514. package/react/components/SlidingToolbar.js +1 -1
  515. package/react/components/Spinner.js +1 -1
  516. package/react/components/StrechBar.js +1 -1
  517. package/react/components/SubNav.js +1 -1
  518. package/react/components/Switch.js +4 -6
  519. package/react/components/SwitchGroup.js +1 -1
  520. package/react/components/TabCustom.js +6 -4
  521. package/react/components/TabList.js +4 -8
  522. package/react/components/Tag.js +13 -17
  523. package/react/components/TagInput.js +1 -1
  524. package/react/components/Text/Heading.js +6 -6
  525. package/react/components/ThemeSelector.js +1 -1
  526. package/react/components/TimePickerV2.js +17 -17
  527. package/react/components/Toast.js +3 -3
  528. package/react/components/ToastMessage.d.ts +1 -1
  529. package/react/components/ToastMessage.js +1 -1
  530. package/react/components/ToastText.js +5 -8
  531. package/react/components/ToastWrapper.js +3 -5
  532. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
  533. package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -7
  534. package/react/components/ToggleBox/SimpleToggleBox.d.ts +1 -1
  535. package/react/components/ToggleBox/SimpleToggleBox.js +5 -5
  536. package/react/components/ToggleBox/index.js +3 -3
  537. package/react/components/TreeMenu.d.ts +1 -1
  538. package/react/components/TreeMenu.js +38 -44
  539. package/react/components/TreeSelect/TreeSelect.d.ts +2 -2
  540. package/react/components/TreeSelect/TreeSelect.js +105 -127
  541. package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -1
  542. package/react/components/TreeSelect/TreeSelectItem.js +10 -13
  543. package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -1
  544. package/react/components/TreeSelect/TreeSelectPill.js +8 -9
  545. package/react/components/WithPagination.js +18 -21
  546. package/react/components/WithPortal.d.ts +1 -1
  547. package/react/components/WithPortal.js +2 -1
  548. package/react/components/WithSizeObserver.js +1 -3
  549. package/react/components/_Positioner.js +11 -11
  550. package/react/components/avatar/avatar-action-add.js +1 -1
  551. package/react/components/avatar/avatar-group.js +11 -14
  552. package/react/components/avatar/avatar-image.js +6 -4
  553. package/react/components/avatar/avatar-placeholder.js +1 -1
  554. package/react/components/avatar/avatar-wrapper.js +2 -4
  555. package/react/components/avatar/avatar.js +4 -3
  556. package/react/helpers.js +2 -2
  557. package/react/index.d.ts +1 -1
  558. package/tasks/webpack.dev.js +1 -1
  559. package/tasks/webpack.js +5 -5
  560. package/tasks/webpack.prod.js +1 -5
  561. package/tsconfig.json +2 -5
  562. package/tslint.json +6 -12
  563. package/webpack.config.js +2 -5
@@ -1,6 +1,22 @@
1
1
  import * as React from 'react';
2
2
  import * as Components from './components/Index';
3
- import { ButtonGroup, Button, NavButton, SubNav, Dropdown, RadioButtonGroup, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
3
+ import {
4
+ ButtonGroup,
5
+ Button,
6
+ NavButton,
7
+ SubNav,
8
+ Dropdown,
9
+ RadioButtonGroup,
10
+ Input,
11
+ Select,
12
+ Option,
13
+ Label,
14
+ Icon,
15
+ IconButton,
16
+ Checkbox,
17
+ GridList,
18
+ Badge,
19
+ } from '../../../../app-typescript/index';
4
20
  import * as GridElements from '../../../../app-typescript/components/GridItem';
5
21
 
6
22
  import dummy_items from '../dummy-data/items';
@@ -34,7 +50,7 @@ export class UiPlayground extends React.Component<IProps, IState> {
34
50
  itemSelected2: false,
35
51
  itemSelected3: false,
36
52
  value1: false,
37
- }
53
+ };
38
54
  this.handleFilter = this.handleFilter.bind(this);
39
55
  this.handlePreview = this.handlePreview.bind(this);
40
56
  this.handleTheme = this.handleTheme.bind(this);
@@ -54,8 +70,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
54
70
 
55
71
  handleTheme(newTheme: string) {
56
72
  this.setState({
57
- theme: newTheme
58
- })
73
+ theme: newTheme,
74
+ });
59
75
  }
60
76
 
61
77
  changeStatus(item: any, status: string) {
@@ -68,91 +84,123 @@ export class UiPlayground extends React.Component<IProps, IState> {
68
84
 
69
85
  render() {
70
86
  return (
71
- <Components.Layout header='UI Playground' theme={this.state.theme}>
87
+ <Components.Layout header="UI Playground" theme={this.state.theme}>
72
88
  <Components.SidebarMenu
73
89
  items={[
74
- { icon: 'dashboard', size: 'big' },
75
- { icon: 'view', size: 'big' },
76
- { icon: 'marked-star', size: 'big' },
77
- { icon: 'spike', size: 'big' },
78
- { icon: 'personal', size: 'big' },
79
- { icon: 'global-search', size: 'big' },
80
- { icon: 'picture', size: 'big', active: true }
90
+ {icon: 'dashboard', size: 'big'},
91
+ {icon: 'view', size: 'big'},
92
+ {icon: 'marked-star', size: 'big'},
93
+ {icon: 'spike', size: 'big'},
94
+ {icon: 'personal', size: 'big'},
95
+ {icon: 'global-search', size: 'big'},
96
+ {icon: 'picture', size: 'big', active: true},
81
97
  ]}
82
98
  />
83
99
 
84
100
  <Components.LayoutContainer>
85
101
  <Components.HeaderPanel>
86
102
  <SubNav>
87
- <ButtonGroup align='inline'>
103
+ <ButtonGroup align="inline">
88
104
  <Dropdown
89
105
  items={[
90
106
  {
91
- type: 'group', label: 'Archives', items: [
107
+ type: 'group',
108
+ label: 'Archives',
109
+ items: [
92
110
  'divider',
93
- { label: 'All archives', onSelect: () => this.setState({ dropDownState: 'All archives' }) },
94
- { label: 'Media archive', onSelect: () => this.setState({ dropDownState: 'Media archive' }) },
95
- { label: 'File archive', onSelect: () => this.setState({ dropDownState: 'File archive' }) },
96
- { label: 'AP images', onSelect: () => this.setState({ dropDownState: 'AP archive' }) },
97
- ]
98
- }
111
+ {
112
+ label: 'All archives',
113
+ onSelect: () => this.setState({dropDownState: 'All archives'}),
114
+ },
115
+ {
116
+ label: 'Media archive',
117
+ onSelect: () => this.setState({dropDownState: 'Media archive'}),
118
+ },
119
+ {
120
+ label: 'File archive',
121
+ onSelect: () => this.setState({dropDownState: 'File archive'}),
122
+ },
123
+ {
124
+ label: 'AP images',
125
+ onSelect: () => this.setState({dropDownState: 'AP archive'}),
126
+ },
127
+ ],
128
+ },
99
129
  ]}
100
130
  >
101
- <NavButton text={this.state.dropDownState ? this.state.dropDownState : 'All Archives'} onClick={() => false} />
131
+ <NavButton
132
+ text={this.state.dropDownState ? this.state.dropDownState : 'All Archives'}
133
+ onClick={() => false}
134
+ />
102
135
  </Dropdown>
103
136
  </ButtonGroup>
104
- <Components.SearchBar placeholder='Search media'></Components.SearchBar>
137
+ <Components.SearchBar placeholder="Search media"></Components.SearchBar>
105
138
 
106
- <ButtonGroup align='end'>
107
- <NavButton icon='dots-vertical' onClick={() => false} />
139
+ <ButtonGroup align="end">
140
+ <NavButton icon="dots-vertical" onClick={() => false} />
108
141
  </ButtonGroup>
109
142
  </SubNav>
110
143
  <SubNav>
111
- <ButtonGroup align='inline'>
112
- <NavButton icon='filter-large' onClick={this.handleFilter} />
144
+ <ButtonGroup align="inline">
145
+ <NavButton icon="filter-large" onClick={this.handleFilter} />
113
146
  </ButtonGroup>
114
147
  <RadioButtonGroup
115
148
  options={[
116
- {value:'test10', label:'Radio button with icon'},
117
- {value:'test11', label:'I have an icon!'},
118
- {value:'test12', label:'Yeah, me too!'},
149
+ {value: 'test10', label: 'Radio button with icon'},
150
+ {value: 'test11', label: 'I have an icon!'},
151
+ {value: 'test12', label: 'Yeah, me too!'},
119
152
  ]}
120
- group={{padded:true}}
153
+ group={{padded: true}}
121
154
  value={this.state.itemType}
122
- onChange={(value) => this.setState({ itemType: value })}
155
+ onChange={(value) => this.setState({itemType: value})}
123
156
  />
124
- <ButtonGroup align='end' spaces='no-space'>
157
+ <ButtonGroup align="end" spaces="no-space">
125
158
  <Dropdown
126
159
  items={[
127
160
  {
128
- type: 'group', label: 'Chose a theme', items: [
161
+ type: 'group',
162
+ label: 'Chose a theme',
163
+ items: [
129
164
  'divider',
130
- { label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
131
- { label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
132
- { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
133
- ]
165
+ {
166
+ label: 'Light',
167
+ icon: 'adjust',
168
+ onSelect: () => this.handleTheme('light-ui'),
169
+ },
170
+ {
171
+ label: 'Dark',
172
+ icon: 'adjust',
173
+ onSelect: () => this.handleTheme('dark-ui'),
174
+ },
175
+ {
176
+ label: 'Accessible Light',
177
+ icon: 'adjust',
178
+ onSelect: () => this.handleTheme('accessible-light-ui'),
179
+ },
180
+ ],
134
181
  },
135
182
  ]}
136
183
  >
137
- <NavButton type='default' icon='adjust' onClick={()=> false} />
184
+ <NavButton type="default" icon="adjust" onClick={() => false} />
138
185
  </Dropdown>
139
- <NavButton icon='th-list' onClick={() => false} />
186
+ <NavButton icon="th-list" onClick={() => false} />
140
187
  </ButtonGroup>
141
188
  </SubNav>
142
189
  </Components.HeaderPanel>
143
190
  {/* TOOLBAR HEADER */}
144
191
 
145
192
  <Components.LeftPanel open={this.state.openFilter}>
146
- <Components.Panel side='left' background='grey'>
147
- <Components.PanelHeader handleFilterParent={this.handleFilter} title='Advanced filters' />
193
+ <Components.Panel side="left" background="grey">
194
+ <Components.PanelHeader handleFilterParent={this.handleFilter} title="Advanced filters" />
148
195
  <Components.PanelContent>
149
196
  <Components.PanelContentBlock>
150
197
  <div className="form__group">
151
198
  <div className="form__item">
152
- <Input label='Title'
153
- error='This is error message'
154
- type='text'
155
- value='Title'
199
+ <Input
200
+ label="Title"
201
+ error="This is error message"
202
+ type="text"
203
+ value="Title"
156
204
  inlineLabel={false}
157
205
  disabled={false}
158
206
  onChange={() => false}
@@ -161,9 +209,10 @@ export class UiPlayground extends React.Component<IProps, IState> {
161
209
  </div>
162
210
  <div className="form__group">
163
211
  <div className="form__item">
164
- <Select label='Source'
165
- value='Select ingest source...'
166
- error='This is error message'
212
+ <Select
213
+ label="Source"
214
+ value="Select ingest source..."
215
+ error="This is error message"
167
216
  inlineLabel={false}
168
217
  disabled={false}
169
218
  onChange={() => false}
@@ -177,10 +226,11 @@ export class UiPlayground extends React.Component<IProps, IState> {
177
226
 
178
227
  <div className="form__group">
179
228
  <div className="form__item">
180
- <Input label='Keyword'
181
- error='This is error message'
182
- type='text'
183
- value='Keyword'
229
+ <Input
230
+ label="Keyword"
231
+ error="This is error message"
232
+ type="text"
233
+ value="Keyword"
184
234
  inlineLabel={false}
185
235
  disabled={false}
186
236
  onChange={() => false}
@@ -190,10 +240,11 @@ export class UiPlayground extends React.Component<IProps, IState> {
190
240
 
191
241
  <div className="form__group">
192
242
  <div className="form__item">
193
- <Select label='Usage right'
194
- value='--- Not selected ---'
195
- error='This is error message'
196
- info='Dolor in hendrerit.'
243
+ <Select
244
+ label="Usage right"
245
+ value="--- Not selected ---"
246
+ error="This is error message"
247
+ info="Dolor in hendrerit."
197
248
  inlineLabel={false}
198
249
  disabled={false}
199
250
  onChange={() => false}
@@ -209,8 +260,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
209
260
  </Components.PanelContentBlock>
210
261
  </Components.PanelContent>
211
262
  <Components.PanelFooter>
212
- <Button text='Clear' style='hollow' onClick={() => false} />
213
- <Button text='Submit' type='primary' onClick={() => false} />
263
+ <Button text="Clear" style="hollow" onClick={() => false} />
264
+ <Button text="Submit" type="primary" onClick={() => false} />
214
265
  </Components.PanelFooter>
215
266
  </Components.Panel>
216
267
  </Components.LeftPanel>
@@ -218,12 +269,18 @@ export class UiPlayground extends React.Component<IProps, IState> {
218
269
 
219
270
  <Components.MainPanel>
220
271
  <GridList size="small" gap="medium" margin="3">
221
- {dummy_items.map((item: any, index: any) =>
222
- <GridElements.GridItem locked={item.locked} status={item.status} onClick={this.handlePreview} itemtype={item.type} key={index}>
272
+ {dummy_items.map((item: any, index: any) => (
273
+ <GridElements.GridItem
274
+ locked={item.locked}
275
+ status={item.status}
276
+ onClick={this.handlePreview}
277
+ itemtype={item.type}
278
+ key={index}
279
+ >
223
280
  <GridElements.GridItemCheckWrapper>
224
281
  <Checkbox
225
282
  checked={item.selected}
226
- label={{text:''}}
283
+ label={{text: ''}}
227
284
  onChange={(value) => {
228
285
  item.selected = value;
229
286
  this.changeStatus(item, 'selected');
@@ -231,10 +288,10 @@ export class UiPlayground extends React.Component<IProps, IState> {
231
288
  />
232
289
  </GridElements.GridItemCheckWrapper>
233
290
  <GridElements.GridItemTopActions>
234
- <IconButton icon='fullscreen' ariaValue='More actions' onClick={()=> false} />
291
+ <IconButton icon="fullscreen" ariaValue="More actions" onClick={() => false} />
235
292
  </GridElements.GridItemTopActions>
236
293
  <GridElements.GridItemMedia>
237
- { item.image ? <img src={item.image} alt={item.imageAlt}/> : null }
294
+ {item.image ? <img src={item.image} alt={item.imageAlt} /> : null}
238
295
  </GridElements.GridItemMedia>
239
296
  <GridElements.GridItemContent>
240
297
  <GridElements.GridItemTime time={item.date} />
@@ -242,51 +299,83 @@ export class UiPlayground extends React.Component<IProps, IState> {
242
299
  <GridElements.GridItemText>{item.description}</GridElements.GridItemText>
243
300
  </GridElements.GridItemContent>
244
301
  <GridElements.GridItemFooter>
245
- <GridElements.GridItemFooterBlock align='left'>
246
- <Icon name={item.type} className='sd-grid-item__type-icn' />
302
+ <GridElements.GridItemFooterBlock align="left">
303
+ <Icon name={item.type} className="sd-grid-item__type-icn" />
247
304
  <Badge text={item.urgency} color={item.urgencyColor} />
248
- <Badge text={item.priority} shape='square' color={item.priorityColor} />
305
+ <Badge text={item.priority} shape="square" color={item.priorityColor} />
249
306
  </GridElements.GridItemFooterBlock>
250
307
  <GridElements.GridItemFooterActions>
251
- <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
308
+ <IconButton
309
+ icon="dots-vertical"
310
+ ariaValue="More actions"
311
+ onClick={() => this.changeStatus(item, 'archived')}
312
+ />
252
313
  </GridElements.GridItemFooterActions>
253
314
  </GridElements.GridItemFooter>
254
315
  </GridElements.GridItem>
255
- )}
316
+ ))}
256
317
  </GridList>
257
318
  </Components.MainPanel>
258
319
  {/* MAIN CONTENT (Monitoring) */}
259
320
 
260
321
  <Components.RightPanel open={this.state.openPreview}>
261
- <Components.Panel side='right'>
262
- <Components.PanelHeader title='Item details' handleFilterParent={this.handlePreview} />
322
+ <Components.Panel side="right">
323
+ <Components.PanelHeader title="Item details" handleFilterParent={this.handlePreview} />
263
324
  <Components.PanelContent>
264
325
  <Components.PanelContentBlock flex={true}>
265
326
  <div className="side-panel__content-block-inner side-panel__content-block-inner--grow">
266
- <p className="sd-text__date-and-author"><time>Created 19.06.2020 by </time> <span className="sd-text__author">Mika Karapet</span></p>
267
- <p className="sd-text__date-and-author"><time>Updated 3 hours ago by</time> <span className="sd-text__author">John Doe</span></p>
327
+ <p className="sd-text__date-and-author">
328
+ <time>Created 19.06.2020 by </time>{' '}
329
+ <span className="sd-text__author">Mika Karapet</span>
330
+ </p>
331
+ <p className="sd-text__date-and-author">
332
+ <time>Updated 3 hours ago by</time>{' '}
333
+ <span className="sd-text__author">John Doe</span>
334
+ </p>
268
335
  </div>
269
336
  <div className="side-panel__content-block-inner side-panel__content-block-inner--right">
270
337
  <Dropdown
271
- align = 'right'
338
+ align="right"
272
339
  items={[
273
340
  {
274
- type: 'group', label: 'Actions', items: [
341
+ type: 'group',
342
+ label: 'Actions',
343
+ items: [
275
344
  'divider',
276
- { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
277
- { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
278
- { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
279
- ]
280
- }
345
+ {
346
+ label: 'Edit',
347
+ icon: 'pencil',
348
+ onSelect: () => this.setState({dropDownState: 'Edit '}),
349
+ },
350
+ {
351
+ label: 'Download',
352
+ icon: 'download',
353
+ onSelect: () => this.setState({dropDownState: 'Download'}),
354
+ },
355
+ {
356
+ label: 'Delete',
357
+ icon: 'trash',
358
+ onSelect: () => this.setState({dropDownState: 'Delete'}),
359
+ },
360
+ ],
361
+ },
281
362
  ]}
282
363
  >
283
- <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
364
+ <IconButton
365
+ ariaValue="dropdown-more-options"
366
+ icon="dots-vertical"
367
+ onClick={() => false}
368
+ />
284
369
  </Dropdown>
285
370
  </div>
286
371
  </Components.PanelContentBlock>
287
- <Components.PanelContentBlock padding='0' className='side-panel__content-block--image'>
372
+ <Components.PanelContentBlock padding="0" className="side-panel__content-block--image">
288
373
  <span className="side-panel__image-actions">
289
- <IconButton ariaValue='button-fullscreen' icon='fullscreen' onClick={() => false} />
374
+ <IconButton
375
+ ariaValue="button-fullscreen"
376
+ icon="fullscreen"
377
+ onClick={() => false}
378
+ />
290
379
  </span>
291
380
  <img src="/d_trump.jpg" alt="test" />
292
381
  </Components.PanelContentBlock>
@@ -298,11 +387,14 @@ export class UiPlayground extends React.Component<IProps, IState> {
298
387
  </div>
299
388
  <div className="form__row">
300
389
  <label className="form-label form-label--light">Description</label>
301
- <p className="sd-text sd-text--medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur, vestibulum eros.</p>
390
+ <p className="sd-text sd-text--medium">
391
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus,
392
+ porta ac consectetur, vestibulum eros.
393
+ </p>
302
394
  </div>
303
395
  <div className="form__row">
304
- <Label text='Public' type='success' style='hollow' size='large' />
305
- </div>
396
+ <Label text="Public" type="success" style="hollow" size="large" />
397
+ </div>
306
398
  </Components.PanelContentBlock>
307
399
  </Components.PanelContent>
308
400
  </Components.Panel>
@@ -312,7 +404,7 @@ export class UiPlayground extends React.Component<IProps, IState> {
312
404
  <Components.OverlayPanel />
313
405
  {/* OVERLAY PANEL (Send To) */}
314
406
  </Components.LayoutContainer>
315
- </Components.Layout >
407
+ </Components.Layout>
316
408
  );
317
409
  }
318
410
  }
@@ -5,22 +5,21 @@ interface IProps {
5
5
  children?: React.ReactNode;
6
6
  side?: 'left' | 'right';
7
7
  background?: 'transparent' | 'light' | 'grey' | 'dark';
8
- open?: boolean;
8
+ open?: boolean;
9
9
  }
10
10
 
11
11
  export class AuthoringContainer extends React.PureComponent<IProps> {
12
12
  render() {
13
13
  let classes = classNames('sd-content-wrapper__authoring-content-area', {
14
- [`sd-content-wrapper__authoring-content-area--${this.props.side}`] : this.props.side,
15
- [`sd-content-wrapper__authoring-content-area--${this.props.background}`]: this.props.background !== 'light' && this.props.background !== undefined,
14
+ [`sd-content-wrapper__authoring-content-area--${this.props.side}`]: this.props.side,
15
+ [`sd-content-wrapper__authoring-content-area--${this.props.background}`]:
16
+ this.props.background !== 'light' && this.props.background !== undefined,
16
17
  'open-editor': this.props.open,
17
18
  });
18
19
  return (
19
20
  <div className={classes}>
20
- <div className='sd-editor__container'>
21
- {this.props.children}
22
- </div>
21
+ <div className="sd-editor__container">{this.props.children}</div>
23
22
  </div>
24
23
  );
25
24
  }
26
- }
25
+ }
@@ -10,75 +10,75 @@ export class AuthoringContent extends React.PureComponent<IProps> {
10
10
  if (this.props.open) {
11
11
  return (
12
12
  <React.Fragment>
13
- <div className='sd-content-wrapper__content-splitter'></div>
14
- <div className='sd-content-wrapper__authoring-content-area'>
15
- <div className='sd-authoring-page'>
16
- <div className='sd-authoring-page__header'>
17
- <div className='subnav subnav--darker'>
13
+ <div className="sd-content-wrapper__content-splitter"></div>
14
+ <div className="sd-content-wrapper__authoring-content-area">
15
+ <div className="sd-authoring-page">
16
+ <div className="sd-authoring-page__header">
17
+ <div className="subnav subnav--darker">
18
18
  <div className="subnav__stretch-bar">
19
19
  <figure className="avatar">VS</figure>
20
20
  </div>
21
- <div className='subnav__stretch-bar subnav__stretch-bar--right'>
22
- <button className='btn'>Cancel</button>
23
- <button className='btn btn--primary'>Save</button>
21
+ <div className="subnav__stretch-bar subnav__stretch-bar--right">
22
+ <button className="btn">Cancel</button>
23
+ <button className="btn btn--primary">Save</button>
24
24
  </div>
25
- <button className='navbtn'>
26
- <i className='big-icon--minimize'></i>
25
+ <button className="navbtn">
26
+ <i className="big-icon--minimize"></i>
27
27
  </button>
28
- <button className='navbtn'>
29
- <i className='icon-dots-vertical'></i>
28
+ <button className="navbtn">
29
+ <i className="icon-dots-vertical"></i>
30
30
  </button>
31
- <button className='navbtn navbtn--highlighted'>
32
- <i className='big-icon--send-to'></i>
31
+ <button className="navbtn navbtn--highlighted">
32
+ <i className="big-icon--send-to"></i>
33
33
  </button>
34
34
  </div>
35
35
  </div>
36
- <div className='sd-authoring-page__main-container'></div>
37
- <div className='sd-authoring-page__side-tabs sd-sidetab-menu sd-sidetab-menu--right sd-sidetab-menu--static'>
36
+ <div className="sd-authoring-page__main-container"></div>
37
+ <div className="sd-authoring-page__side-tabs sd-sidetab-menu sd-sidetab-menu--right sd-sidetab-menu--static">
38
38
  <ul>
39
- <li data-sd-tooltip='Info' data-flow='left'>
40
- <a className='sd-sidetab-menu__btn'>
41
- <i className='sd-sidetab-menu__main-icon big-icon--info'></i>
42
- <i className='sd-sidetab-menu__helper-icon icon-close-small'></i>
39
+ <li data-sd-tooltip="Info" data-flow="left">
40
+ <a className="sd-sidetab-menu__btn">
41
+ <i className="sd-sidetab-menu__main-icon big-icon--info"></i>
42
+ <i className="sd-sidetab-menu__helper-icon icon-close-small"></i>
43
43
  </a>
44
44
  </li>
45
- <li data-sd-tooltip='Find & Replace' data-flow='left'>
46
- <a className='sd-sidetab-menu__btn'>
47
- <i className='sd-sidetab-menu__main-icon big-icon--find-replace'></i>
48
- <i className='sd-sidetab-menu__helepr-icon icon-close-small'></i>
45
+ <li data-sd-tooltip="Find & Replace" data-flow="left">
46
+ <a className="sd-sidetab-menu__btn">
47
+ <i className="sd-sidetab-menu__main-icon big-icon--find-replace"></i>
48
+ <i className="sd-sidetab-menu__helepr-icon icon-close-small"></i>
49
49
  </a>
50
50
  </li>
51
- <li data-sd-tooltip='Comments' data-flow='left'>
52
- <a className='sd-sidetab-menu__btn'>
53
- <i className='sd-sidetab-menu__main-icon big-icon--chat'></i>
54
- <i className='sd-sidetab-menu__helepr-icon icon-close-small'></i>
51
+ <li data-sd-tooltip="Comments" data-flow="left">
52
+ <a className="sd-sidetab-menu__btn">
53
+ <i className="sd-sidetab-menu__main-icon big-icon--chat"></i>
54
+ <i className="sd-sidetab-menu__helepr-icon icon-close-small"></i>
55
55
  </a>
56
56
  </li>
57
- <li data-sd-tooltip='Versions / History' data-flow='left'>
58
- <a className='sd-sidetab-menu__btn'>
59
- <i className='sd-sidetab-menu__main-icon big-icon--history'></i>
60
- <i className='sd-sidetab-menu__helepr-icon icon-close-small'></i>
57
+ <li data-sd-tooltip="Versions / History" data-flow="left">
58
+ <a className="sd-sidetab-menu__btn">
59
+ <i className="sd-sidetab-menu__main-icon big-icon--history"></i>
60
+ <i className="sd-sidetab-menu__helepr-icon icon-close-small"></i>
61
61
  </a>
62
62
  </li>
63
- <li data-sd-tooltip='Macros' data-flow='left'>
64
- <a className='sd-sidetab-menu__btn'>
65
- <i className='sd-sidetab-menu__main-icon big-icon--macro'></i>
66
- <i className='sd-sidetab-menu__helepr-icon icon-close-small'></i>
63
+ <li data-sd-tooltip="Macros" data-flow="left">
64
+ <a className="sd-sidetab-menu__btn">
65
+ <i className="sd-sidetab-menu__main-icon big-icon--macro"></i>
66
+ <i className="sd-sidetab-menu__helepr-icon icon-close-small"></i>
67
67
  </a>
68
68
  </li>
69
- <li data-sd-tooltip='Macros' data-flow='left'>
70
- <a className='sd-sidetab-menu__btn'>
71
- <i className='sd-sidetab-menu__main-icon big-icon--comments'></i>
72
- <i className='sd-sidetab-menu__helepr-icon icon-close-small'></i>
69
+ <li data-sd-tooltip="Macros" data-flow="left">
70
+ <a className="sd-sidetab-menu__btn">
71
+ <i className="sd-sidetab-menu__main-icon big-icon--comments"></i>
72
+ <i className="sd-sidetab-menu__helepr-icon icon-close-small"></i>
73
73
  </a>
74
74
  </li>
75
75
  </ul>
76
76
  </div>
77
- <div className='sd-authoring-page__publish-container'></div>
77
+ <div className="sd-authoring-page__publish-container"></div>
78
78
  </div>
79
79
  </div>
80
80
  </React.Fragment>
81
- )
81
+ );
82
82
  } else {
83
83
  return null;
84
84
  }
@@ -4,19 +4,16 @@ import classNames from 'classnames';
4
4
  interface IProps {
5
5
  children?: React.ReactNode;
6
6
  background?: 'transparent' | 'light' | 'grey' | 'dark';
7
- visible?: boolean; // defaults to light (white)
7
+ visible?: boolean; // defaults to light (white)
8
8
  }
9
9
 
10
10
  export class ContentSplitter extends React.PureComponent<IProps> {
11
11
  render() {
12
12
  let classes = classNames('sd-content-wrapper__content-splitter', {
13
- [`sd-content-wrapper__content-splitter--${this.props.background}`]: this.props.background !== 'light' && this.props.background !== undefined,
13
+ [`sd-content-wrapper__content-splitter--${this.props.background}`]:
14
+ this.props.background !== 'light' && this.props.background !== undefined,
14
15
  'content-splitter--visible': this.props.visible,
15
16
  });
16
- return (
17
- <div className={classes}>
18
- {this.props.children}
19
- </div>
20
- );
17
+ return <div className={classes}>{this.props.children}</div>;
21
18
  }
22
- }
19
+ }